/* ==========================================
   SHOWCASE (home page only)
   The turning arc on the first screen and the fanned collection cards
========================================== */

/* The first screen holds the words on the left and the arc on the right */

.hero.has-arc{
    gap:4%;
    justify-content:space-between;
}

.hero.has-arc .hero-content{
    flex:0 1 560px;
    position:relative;
    z-index:2;
}

/* ------------------------------------------
   THE ARC
------------------------------------------ */

.arc{
    position:relative;
    flex:1 1 480px;
    max-width:620px;
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:center;
    opacity:0;
    animation:fadeUp 1.2s var(--ease) .5s forwards;
}

.arc-stage{
    position:relative;
    height:min(440px,56vh);
    perspective:1100px;
    transform-style:preserve-3d;
}

.arc-card{
    position:absolute;
    left:50%;
    top:0;
    width:min(280px,46%);
    height:100%;
    margin-left:calc(min(280px,46%) / -2);
    border-radius:22px;
    overflow:hidden;
    background:#2a1c1c;
    box-shadow:0 30px 60px rgba(0,0,0,.45),0 0 0 1px rgba(236,214,168,.18);
    transition:transform .9s var(--ease),opacity .9s var(--ease),visibility .9s,box-shadow .5s;
    -webkit-tap-highlight-color:transparent;
}

.arc-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    user-select:none;
}

/* A soft gold glow under the piece in front, and a gentle float */

.arc-card.is-front{
    box-shadow:0 34px 70px rgba(0,0,0,.5),0 0 0 1px rgba(236,214,168,.55),0 0 60px rgba(236,214,168,.22);
}

.arc-card.is-front img{
    animation:arcFloat 5s ease-in-out infinite;
}

@keyframes arcFloat{
    0%,100%{ transform:scale(1.02) translateY(0); }
    50%{ transform:scale(1.06) translateY(-6px); }
}

/* Name and price on the piece in front */

.arc-label{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:10px;
    padding:46px 16px 14px;
    background:linear-gradient(transparent,rgba(30,16,16,.88));
    color:#fff;
    font-size:.92rem;
    line-height:1.3;
    opacity:0;
    transform:translateY(8px);
    transition:opacity .5s,transform .5s;
}

.arc-label b{
    color:var(--gold-light);
    font-weight:600;
    white-space:nowrap;
}

.arc-card.is-front .arc-label{
    opacity:1;
    transform:none;
}

/* The round arrow buttons, used by the arc and the fan */

.turn-buttons{
    display:flex;
    justify-content:center;
    gap:14px;
    margin-top:26px;
}

.turn-buttons button{
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid rgba(236,214,168,.6);
    background:rgba(255,255,255,.08);
    color:var(--gold-light);
    cursor:pointer;
    transition:background .3s,color .3s,transform .3s;
}

.turn-buttons button:hover{
    background:var(--gold-light);
    color:#2a1c10;
    transform:scale(1.08);
}

/* ------------------------------------------
   COLLECTIONS AND VIDEO, SIDE BY SIDE
------------------------------------------ */

.duo-section{
    display:grid;
    grid-template-columns:1.5fr 1fr;
    align-items:start;
    gap:40px;
    max-width:1180px;
    margin:0 auto;
    padding:56px 5% 40px;
}

/* On narrow screens the outer cards are trimmed at the edge, so the page never scrolls sideways */

@media(max-width:1100px){

    .duo-section{
        overflow:hidden;
    }

}

/* Only the video when there are not enough collections to fan out */

.duo-section:has(.fan-part[hidden]){
    grid-template-columns:1fr;
}

.duo-part[hidden]{
    display:none;
}

.duo-part{
    display:flex;
    flex-direction:column;
    align-items:center;
    min-width:0;
}

.duo-heading{
    text-align:center;
    margin-bottom:22px;
}

.duo-heading span{
    display:block;
    margin-bottom:6px;
    font-size:.76rem;
    font-weight:600;
    letter-spacing:.24em;
    color:var(--gold);
}

.duo-heading h2{
    font-size:clamp(1.8rem,3vw,2.5rem);
    line-height:1.1;
}

/* The fanned cards */

.fan{
    position:relative;
    width:100%;
    padding-top:10px;
}

.fan-stage{
    position:relative;
    height:400px;
}

.fan-card{
    position:absolute;
    left:50%;
    top:10px;
    width:250px;
    height:350px;
    margin-left:-125px;
    border-radius:20px;
    overflow:hidden;
    background:var(--surface);
    border:6px solid var(--surface);
    box-shadow:0 22px 46px rgba(60,30,30,.22);
    transform-origin:50% 120%;
    transition:transform .8s var(--ease),opacity .8s var(--ease),visibility .8s,box-shadow .5s;
    -webkit-tap-highlight-color:transparent;
}

.fan-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:14px;
    user-select:none;
    transition:transform 1.2s var(--ease);
}

.fan-card.is-front{
    box-shadow:0 30px 60px rgba(60,30,30,.32),0 0 0 1px var(--gold-light);
}

.fan-card.is-front:hover img{
    transform:scale(1.06);
}

.fan-label{
    position:absolute;
    left:6px;
    right:6px;
    bottom:6px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    padding:40px 16px 14px;
    border-radius:0 0 14px 14px;
    background:linear-gradient(transparent,rgba(30,16,16,.85));
    color:#fff;
    text-align:left;
}

.fan-name{
    font-family:"Cormorant Garamond",serif;
    font-size:1.5rem;
    font-weight:600;
    line-height:1.1;
}

.fan-count{
    font-size:.8rem;
    color:rgba(255,255,255,.75);
}

.fan-shop{
    margin-top:8px;
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--gold-light);
    opacity:0;
    transition:opacity .5s;
}

.fan-card.is-front .fan-shop{
    opacity:1;
}

/* Side cards show only a picture, so their words never peek out from behind */

.fan-card:not(.is-front) .fan-label{
    opacity:0;
}

.fan .turn-buttons{
    margin-top:14px;
}

.fan .turn-buttons button{
    border-color:var(--line);
    background:var(--surface);
    color:var(--accent);
}

.fan .turn-buttons button:hover{
    background:var(--fill);
    color:var(--on-fill);
}

/* The video, in a tall rounded frame the same height as the cards */

.film-frame{
    width:236px;
    aspect-ratio:9/16;
    max-height:420px;
    border-radius:24px;
    overflow:hidden;
    background:#0c2a2c;
    box-shadow:0 26px 54px rgba(60,30,30,.32),0 0 0 1px var(--gold-light),0 0 0 7px rgba(236,214,168,.25);
}

.film-frame video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.film-button{
    margin-top:22px;
}

/* ------------------------------------------
   TABLETS AND PHONES
   The arc moves under the words
------------------------------------------ */

@media(max-width:992px){

    .hero.has-arc{
        flex-direction:column;
        align-items:stretch;
        gap:40px;
    }

    .hero.has-arc .hero-content{
        flex:none;
    }

    .duo-section{
        gap:44px;
        padding:44px 12px 30px;
    }

    .arc{
        flex:none;
        width:100%;
        max-width:560px;
        margin:0 auto;
    }

    .arc-stage{
        height:380px;
    }

}

@media(max-width:768px){

    .duo-section{
        grid-template-columns:1fr;
    }

    .film-frame{
        width:180px;
    }

    .duo-heading{
        margin-bottom:14px;
    }

    /* The two first-screen buttons sit side by side, so the arc comes up sooner */

    .hero.has-arc{
        padding-top:40px;
        gap:30px;
    }

    .hero.has-arc .hero-buttons{
        flex-direction:row;
        max-width:none;
    }

    .hero.has-arc .hero-buttons .btn{
        flex:1;
        padding-left:10px;
        padding-right:10px;
        font-size:.78rem;
    }

    .hero.has-arc p{
        margin-bottom:26px;
    }

    .hero.has-arc{
        padding-bottom:44px;
    }

    .arc-stage{
        height:290px;
    }

    .arc-card{
        width:200px;
        margin-left:-100px;
        border-radius:18px;
    }

    .turn-buttons{
        margin-top:20px;
    }

    .fan-stage{
        height:300px;
    }

    .fan-card{
        width:190px;
        height:270px;
        margin-left:-95px;
    }

    .fan-name{
        font-size:1.3rem;
    }

}

/* ------------------------------------------
   PHONES: THE LIGHTER VERSION
   Fewer things moving at once, so scrolling stays smooth.
   The photo behind the first screen stays still, the gold name
   does not shimmer, the front card does not float, and the
   shadows are simpler (big soft shadows are slow to draw).
------------------------------------------ */

@media(max-width:768px){

    .arc-stage{
        perspective:none;
        transform-style:flat;
    }

    .arc-card,
    .arc-card.is-front{
        box-shadow:0 12px 26px rgba(0,0,0,.4);
        transition:transform .6s var(--ease),opacity .6s var(--ease),visibility .6s;
    }

    .arc-card.is-front img{
        animation:none;
    }

    .hero.has-arc .hero-bg{
        animation:none;
    }

    .hero.has-arc h1 span:not(.hero-line){
        animation:none;
    }

    .fan-card,
    .fan-card.is-front{
        box-shadow:0 10px 22px rgba(60,30,30,.22);
        transition:transform .6s var(--ease),opacity .6s var(--ease),visibility .6s;
    }

    .film-frame{
        box-shadow:0 12px 26px rgba(60,30,30,.3),0 0 0 1px var(--gold-light);
    }

    /* Only two shooting stars on the home page on phones */

    .star-field .shooting-star:nth-child(n+3){
        display:none;
    }

}

/* People who turn animations off see the cards still */

@media(prefers-reduced-motion:reduce){

    .arc{
        opacity:1;
        animation:none;
    }

    .arc-card.is-front img{
        animation:none;
    }

}