/* coming-soon.css - red velvet curtains sweep closed, hold, then draw open to
   reveal the copy. one-shot (fill: forwards) so reduced-motion lands on the end state. */

.cs-stage {
    position: fixed;
    inset: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    background:
        radial-gradient(ellipse at 50% 42%, #3a2127 0%, #1c0f14 58%, #0a0608 100%);
}

.cs-curtain {
    position: absolute;
    top: 0;
    /* overgrown past the viewport (clipped by .cs-stage); the top-pivot rotate lifts
       the hem, so a 100vh panel would expose the stage under its bottom edge mid-swing */
    height: 145vh;
    /* wider than half-screen with the outer edge off-screen, so the rotate/skew can't
       swing a side edge into view; the inner edge still meets at the centre */
    width: 76vw;
    z-index: 3;
    overflow: hidden;          /* clip the travelling sheen (::before) */
    /* top pivot: the bottom hem swings aside first (heavy-fabric drag) */
    transform-origin: top center;
    background-color: #7d1820;
    background-image:
        repeating-linear-gradient(90deg,
            rgba(0, 0, 0, 0.5) 0px,
            rgba(0, 0, 0, 0.08) 16px,
            rgba(255, 255, 255, 0.10) 31px,
            rgba(0, 0, 0, 0.08) 46px,
            rgba(0, 0, 0, 0.5) 62px),
        linear-gradient(90deg, #450b11, #8e1c24 50%, #450b11);
    box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.55);
    will-change: transform;
}

/* diagonal stage-light gleam sweeping across the velvet during the hold */
.cs-curtain::before {
    content: "";
    position: absolute;
    top: -10%;
    bottom: -10%;
    left: -40%;
    width: 60%;
    pointer-events: none;
    background: linear-gradient(105deg,
        transparent 40%,
        rgba(255, 235, 210, 0.16) 50%,
        transparent 60%);
    opacity: 0;
    animation: cs-sheen 2.4s ease-in-out 0.35s 1 forwards;
}

@keyframes cs-sheen {
    0%   { opacity: 0;    transform: translateX(0); }
    25%  { opacity: 0.9; }
    100% { opacity: 0;    transform: translateX(240%); }
}

/* mirror the gleam so light spills outward from the centre seam */
.cs-curtain--right::before {
    left: auto;
    right: -40%;
    background: linear-gradient(255deg,
        transparent 40%,
        rgba(255, 235, 210, 0.16) 50%,
        transparent 60%);
    animation-name: cs-sheen-right;
}

@keyframes cs-sheen-right {
    0%   { opacity: 0;    transform: translateX(0); }
    25%  { opacity: 0.9; }
    100% { opacity: 0;    transform: translateX(-240%); }
}

.cs-curtain--left {
    left: -22vw;               /* outer edge off-screen; inner edge at centre */
    box-shadow: inset -34px 0 55px rgba(0, 0, 0, 0.5), inset 0 0 90px rgba(0, 0, 0, 0.45);
    animation: cs-curtain-left 3.2s cubic-bezier(0.62, 0.02, 0.2, 1) forwards;
}

.cs-curtain--right {
    right: -22vw;
    box-shadow: inset 34px 0 55px rgba(0, 0, 0, 0.5), inset 0 0 90px rgba(0, 0, 0, 0.45);
    animation: cs-curtain-right 3.2s cubic-bezier(0.62, 0.02, 0.2, 1) forwards;
}

/* closed, hold, then a weighted multi-phase drag-open: hem leads (top pivot), body
   sweeps aside, then settles with a small overshoot + counter-skew so it "lands" */
@keyframes cs-curtain-left {
    0%   { transform: translateX(0) rotate(0deg) skewX(0deg); }          /* closed */
    16%  { transform: translateX(0) rotate(0deg) skewX(0deg); }          /* hold */
    34%  { transform: translateX(-3vw) rotate(-11deg) skewX(3deg); }     /* hem leads */
    62%  { transform: translateX(-24vw) rotate(-5deg) skewX(1.5deg); }   /* sweep aside */
    84%  { transform: translateX(-32vw) rotate(2.5deg) skewX(-1.5deg); } /* overshoot */
    93%  { transform: translateX(-29vw) rotate(-1deg) skewX(0.6deg); }   /* settle */
    100% { transform: translateX(-30vw) rotate(0deg) skewX(0deg); }      /* rest */
}

@keyframes cs-curtain-right {
    0%   { transform: translateX(0) rotate(0deg) skewX(0deg); }
    16%  { transform: translateX(0) rotate(0deg) skewX(0deg); }
    34%  { transform: translateX(3vw) rotate(11deg) skewX(-3deg); }
    62%  { transform: translateX(24vw) rotate(5deg) skewX(-1.5deg); }
    84%  { transform: translateX(32vw) rotate(-2.5deg) skewX(1.5deg); }
    93%  { transform: translateX(29vw) rotate(1deg) skewX(-0.6deg); }
    100% { transform: translateX(30vw) rotate(0deg) skewX(0deg); }
}

/* valance: a scalloped swag pinned across the top (SVG), above the curtains */
.cs-valance {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(96px, 19vh, 200px);
    z-index: 4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='v' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23a51f29'/%3E%3Cstop offset='1' stop-color='%234d0c12'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0,0 H1000 V95 Q900,185 800,95 Q700,185 600,95 Q500,185 400,95 Q300,185 200,95 Q100,185 0,95 Z' fill='url(%23v)'/%3E%3Cpath d='M1000,95 Q900,185 800,95 Q700,185 600,95 Q500,185 400,95 Q300,185 200,95 Q100,185 0,95' fill='none' stroke='%23d9b15a' stroke-width='3' opacity='0.55'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
    pointer-events: none;
}

.cs-content {
    position: relative;
    z-index: 2;            /* behind the curtains, hidden while closed */
    max-width: min(560px, 86vw);
    padding: 0 24px;
    text-align: center;
    opacity: 0;
    animation: cs-reveal 1.1s ease 1.6s forwards;
}

@keyframes cs-reveal {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cs-eyebrow {
    margin: 0 0 10px;
    font-size: 16px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(var(--pink-alt), 0.85);
}

.cs-title {
    margin: 0;
    font-size: clamp(44px, 9vw, 84px);
    line-height: 1.05;
    font-weight: 400;
    color: var(--text);
    text-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
}

.cs-copy {
    margin: 20px auto 34px;
    font-size: clamp(18px, 2.4vw, 22px);
    line-height: 1.6;
    color: var(--text-soft);
}

.cs-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 34px;
    border-radius: 50px;
    background-color: rgb(var(--pink-alt));
    color: #2a0f17;
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(var(--pink-alt), 0.35);
    transition: transform var(--t-base) var(--ease-pop), filter var(--t-base) ease;
}

.cs-back:hover { transform: scale(1.05); filter: brightness(1.06); }
.cs-back:active { transform: scale(0.97); }

.cs-back-arrow {
    font-size: 22px;
    line-height: 1;
    transition: transform var(--t-base) var(--ease-snap);
}

.cs-back:hover .cs-back-arrow { transform: translateX(-4px); }

@media (max-width: 600px) {
    .cs-curtain { width: 84vw; }

    /* narrow parted gap on phones: lift the copy in front of the curtains */
    .cs-content { z-index: 6; }

    .cs-content { max-width: 78vw; padding: 0 14px; }
    .cs-eyebrow { font-size: 11px; letter-spacing: 2.5px; margin-bottom: 7px; }
    .cs-title   { font-size: clamp(24px, 8.2vw, 38px); }
    .cs-copy    { font-size: clamp(12px, 3.4vw, 15px); margin: 12px auto 22px; line-height: 1.45; }
    .cs-back    { font-size: 14px; padding: 10px 22px; }
    .cs-back-arrow { font-size: 16px; }

    /* same open as desktop, wider final gap for phones */
    @keyframes cs-curtain-left {
        0%, 16% { transform: translateX(0) rotate(0deg) skewX(0deg); }
        34%     { transform: translateX(-4vw) rotate(-11deg) skewX(3deg); }
        62%     { transform: translateX(-30vw) rotate(-5deg) skewX(1.5deg); }
        84%     { transform: translateX(-38vw) rotate(2.5deg) skewX(-1.5deg); }
        93%     { transform: translateX(-35vw) rotate(-1deg) skewX(0.6deg); }
        100%    { transform: translateX(-36vw) rotate(0deg) skewX(0deg); }
    }
    @keyframes cs-curtain-right {
        0%, 16% { transform: translateX(0) rotate(0deg) skewX(0deg); }
        34%     { transform: translateX(4vw) rotate(11deg) skewX(-3deg); }
        62%     { transform: translateX(30vw) rotate(5deg) skewX(-1.5deg); }
        84%     { transform: translateX(38vw) rotate(-2.5deg) skewX(1.5deg); }
        93%     { transform: translateX(35vw) rotate(1deg) skewX(-0.6deg); }
        100%    { transform: translateX(36vw) rotate(0deg) skewX(0deg); }
    }
}

/* reduced-motion: skip the sweep, land on the parted/revealed end state */
@media (prefers-reduced-motion: reduce) {
    .cs-curtain--left  { animation: none; transform: translateX(-30vw); }
    .cs-curtain--right { animation: none; transform: translateX(30vw); }
    .cs-curtain::before { animation: none; opacity: 0; }
    .cs-content { animation: none; opacity: 1; }
}