/* Portfolio uses studio.css for the same background, logo and navigation. */
.portfolio-page {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

.models-page {
    flex: 1;
    padding-block: 70px;
}

.portfolio-page h1 {
    font-size: clamp(36px, 4vw, 48px);
    margin-bottom: 18px;
}

.portfolio-page .subtitle {
    max-width: 780px;
    color: var(--studio-muted);
    font-size: 18px;
    margin-bottom: 44px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.product-card {
    display: block;
    overflow: hidden;
    background: #070a08;
    border: 1px solid #384037;
    border-radius: 11px;
    transition: border-color .2s, box-shadow .2s;
}

.product-card:hover {
    border-color: #6bba55;
    box-shadow: 0 10px 28px #18371d33;
}

.product-preview {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 55%, #235a2b55, #10211833 45%, transparent 75%);
}

.product-image,
.product-animation {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    object-fit: contain;
}

.product-animation {
    pointer-events: none;
    opacity: 0;
}

.product-card h3 {
    color: var(--studio-text);
    text-align: center;
    padding: 20px;
    font-size: 22px;
    font-weight: 600;
}

.product-card:hover h3 {
    color: var(--studio-green);
}

.product-card--sequence {
    width: 100%;
    padding: 0;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
    transition: none;
}

.product-card--sequence .product-preview { display: block; }
.product-card--sequence .product-title {
    display: block;
    color: var(--studio-text);
    text-align: center;
    padding: 20px;
    font-size: 22px;
    font-weight: 600;
}

.product-card--sequence:focus-visible {
    outline: 2px solid var(--studio-green);
    outline-offset: 4px;
}

.product-card--sequence:hover .product-title,
.product-card--sequence:focus-visible .product-title { color: var(--studio-green); }

/* Keep the poster visible during loading/errors. Swap only after drawing a frame. */
.product-card--sequence .product-image {
    z-index: 2;
    opacity: 1;
    transform: scale(1);
    transition: transform .08s ease;
}
.product-card--sequence .product-animation {
    z-index: 1;
    opacity: 0;
    transition: none;
}
.product-card--sequence.is-preparing {
    border-color: var(--studio-green);
    box-shadow: 0 0 0 1px #24ff344d, 0 10px 32px #1d682f42;
    transition: none;
}
.product-card--sequence.is-preparing .product-image { transform: scale(1.012); }
.product-card--sequence.is-playing .product-image { opacity: 0; }
.product-card--sequence.is-playing .product-animation { opacity: 1; }

@media (max-width: 1000px) {
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
    .models-page { padding-block: 40px; }
    .portfolio-page .subtitle { font-size: 16px; margin-bottom: 30px; }
    .product-grid { grid-template-columns: 1fr; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .product-card:hover .product-animation { opacity: 0; }
    .product-card:hover .product-image { opacity: 1; }
}