/* ═══════════════════════════════════════════
   premiere — beat 1 of now-streaming (13 s, tap; its tap is begin())

   The pre-tap card, then the film's wow beat: the couple's monogram folds
   in stroke by stroke under a camera push, breaks into 22 ribbons of light
   on the music's hit, thins to one celestial hairline, and the hairline
   turns into the rule of the ident ("NOW STREAMING").

   Camera. Only the monogram rides film.camera. The section cancels the
   camera's pose (the same counter-transform graduation-glow-v2 put on its
   overture), so the card, the ribbons and the ident stay in screen space
   whatever pose the spine enters this beat with; the camera layer
   (.premiere-cam) then re-applies the very same --cam-* values under the
   stage's own perspective (900px, centred), so the monogram is pushed
   exactly as the world would push it. Both follow --cam-ms with the
   world's own `ease-out`, so they stay in step through a camera.to().

   Budgets: transform and opacity only for every moving part (plus one
   0.4 s clip-path wipe on the join, and the wordmark's letter-spacing
   tracking-in), no filter, no backdrop-filter, no mix-blend-mode. Soft
   edges are gradient feathers.
   ═══════════════════════════════════════════ */

#screen-premiere {
    transform:
        rotateY(calc(var(--cam-roty, 0deg) * -1))
        translate3d(calc(var(--cam-x, 0px) * -1), calc(var(--cam-y, 0px) * -1), calc(var(--cam-z, 0px) * -1));
    transition: transform var(--cam-ms, 300ms) ease-out;
}

.premiere-container,
.premiere-container *,
.premiere-container *::before,
.premiere-container *::after { box-sizing: border-box; }

.premiere-container {
    --premiere-mono-size: clamp(5.5rem, 31vw, 9rem);
    position: absolute;
    inset: 0;
    perspective: 900px;           /* .reveel-stage's own, so the camera layer projects as the world does */
    perspective-origin: 50% 50%;
    color: var(--text-primary);
    font-family: var(--font-body);
    -webkit-user-select: none;
    user-select: none;
}

/* Entry states are applied instantly (prepare), never animated in. */
.premiere-instant,
.premiere-instant *,
.premiere-instant *::before,
.premiere-instant *::after {
    transition: none !important;
    animation: none !important;
}

/* ───── 1. The ground, the veil, the beam, the dust ───── */
.premiere-backdrop,
.premiere-ground,
.premiere-veil,
.premiere-motes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.premiere-backdrop { overflow: hidden; }
.premiere-ground { background: var(--screen-bg); }
.premiere-veil {
    background: var(--void);
    opacity: 0;
    transition: opacity 0.5s var(--ease-silk);
}
.premiere-beam {
    position: absolute;
    inset: -10% -30%;
    background: linear-gradient(112deg,
        rgba(242, 196, 160, 0) 30%,
        var(--beam) 43%,
        rgba(242, 196, 160, 0.11) 50%,
        var(--beam) 57%,
        rgba(242, 196, 160, 0) 70%);
    transition: opacity 0.5s var(--ease-silk);
}
.premiere-motes { transition: opacity 0.5s var(--ease-silk); }
.premiere-mote {
    position: absolute;
    width: calc(var(--premiere-mote-size, 4px) * 2);
    height: calc(var(--premiere-mote-size, 4px) * 2);
    border-radius: 50%;
    background: radial-gradient(circle, var(--spark) 0%, rgba(242, 196, 160, 0.45) 30%, rgba(242, 196, 160, 0) 70%);
    opacity: 0.6;
    animation: premiere-mote-drift 18s var(--ease-drift) infinite alternate;
}
@keyframes premiere-mote-drift {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(var(--premiere-mote-dx, 12px), var(--premiere-mote-dy, -24px), 0); }
}

/* The tap: cinema black. The beam and the dust return under the ident (.is-beam). */
.premiere-container.is-tapped .premiere-veil { opacity: 1; }
.premiere-container.is-tapped .premiere-beam,
.premiere-container.is-tapped .premiere-motes { opacity: 0; }
.premiere-container.is-tapped.is-beam .premiere-beam {
    opacity: 0.85;
    transition-duration: 1.4s;
}
.premiere-container.is-tapped.is-beam .premiere-motes {
    opacity: 1;
    transition-duration: 1.4s;
}
/* Looping ornaments are parked while unseen. */
.premiere-container.is-tapped:not(.is-beam) .premiere-mote,
.premiere-container.is-dark .premiere-mote { animation-play-state: paused; }

/* ───── 2. The camera layer and the monogram ───── */
.premiere-cam {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    transform:
        translate3d(var(--cam-x, 0px), var(--cam-y, 0px), var(--cam-z, 0px))
        rotateY(var(--cam-roty, 0deg));
    transition: transform var(--cam-ms, 300ms) ease-out;
}

.premiere-mono {
    position: relative;
    display: flex;
    align-items: center;
    font: 700 var(--premiere-mono-size)/1 var(--font-display);
    perspective: 520px;
}

.premiere-mono-halo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3.4em;
    height: 2.6em;
    margin: -1.3em 0 0 -1.7em;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--halo) 0%, var(--accent-warm-glow-soft) 50%, rgba(232, 168, 124, 0) 100%);
    opacity: 0;
    transition: opacity 0.9s var(--ease-silk);
    pointer-events: none;
}

/* One initial: a glow copy (behind), the shaded side (the extruded fold),
   and the lit face on top. The two copies are aria-hidden mirrors of the
   face, kept in step by the module. */
.premiere-fold,
.premiere-mini-fold {
    position: relative;
    display: inline-grid;
}
.premiere-fold > *,
.premiere-mini-fold > * { grid-area: 1 / 1; }

.premiere-glyph-glow {
    color: var(--text-primary);
    text-shadow: var(--mono-flare);
    opacity: 0;
    transition: opacity 0.9s var(--ease-silk);
    will-change: opacity;
}
.premiere-glyph-side {
    color: var(--mono-side);
    text-shadow:
        1px 1px 0 var(--mono-side),
        2px 2px 0 var(--mono-side),
        3px 3px 0 rgba(196, 138, 96, 0.75),
        4px 7px 16px rgba(5, 5, 17, 0.75);
}
.premiere-glyph-face {
    background: var(--mono-lit);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Strokes 1 and 3: the initials fold open on their outer hinges. */
.premiere-fold {
    opacity: 0;
    transition: opacity 0.18s linear, transform 0.45s var(--ease-expo-out);
}
.premiere-fold--left {
    transform-origin: 0% 50%;
    transform: rotateY(-78deg);
}
.premiere-fold--right {
    transform-origin: 100% 50%;
    transform: rotateY(78deg);
}
.premiere-mono.is-s1 .premiere-fold--left,
.premiere-mono.is-s3 .premiere-fold--right {
    opacity: 1;
    transform: rotateY(0deg);
}

/* Stroke 2: the join, a diagonal ribbon band, drawn top to bottom. */
.premiere-join {
    position: relative;
    z-index: 1;
    width: 0.12em;
    height: 0.84em;
    margin: 0 -0.04em;
    border-radius: 0.02em;
    background: var(--mono-join);
    box-shadow: inset 0 0 0 1px rgba(250, 240, 230, 0.18);
    transform: skewX(-16deg);
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
    transition: -webkit-clip-path 0.4s var(--ease-silk), clip-path 0.4s var(--ease-silk);
}
.premiere-mono.is-s2 .premiere-join {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
}

/* 2.60-3.50 s: the flare ramps and a hairline of light opens down the join. */
.premiere-join-seam {
    position: absolute;
    top: 3%;
    bottom: 3%;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: linear-gradient(180deg, rgba(250, 240, 230, 0), var(--light-core) 20%, var(--light-core) 80%, rgba(250, 240, 230, 0));
    opacity: 0;
    transform: scaleY(0);
    transform-origin: 50% 0;
    transition: transform 0.9s var(--ease-silk), opacity 0.3s var(--ease-silk);
}
.premiere-mono.is-flaring .premiere-join-seam {
    opacity: 1;
    transform: scaleY(1);
}
.premiere-mono.is-flaring .premiere-mono-halo { opacity: 1; }
.premiere-mono.is-flaring .premiere-glyph-glow { opacity: 0.6; }

/* The hit: white-hot (the glow copy comes to the front), then gone in 0.3 s. */
.premiere-mono.is-hit .premiere-glyph-glow {
    z-index: 2;
    opacity: 1;
    transition: none;
}
.premiere-mono.is-hit { animation: premiere-mono-out 0.3s linear 0.04s both; }
@keyframes premiere-mono-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* A glint for ReveelStage.lightSweep: a feathered overlay, so the sweep's
   overflow: hidden never clips the glyphs' extruded sides. Keeps the
   primitive's own animation (reveel-sweep-move); only its light is ours. */
.premiere-glint {
    position: absolute;
    inset: -14% -18%;
    border-radius: 50%;
    pointer-events: none;
}
.premiere-glint.reveel-sweep {
    position: absolute;
    overflow: hidden;
}
.premiere-glint.reveel-sweep::after {
    background: linear-gradient(75deg,
        rgba(250, 240, 230, 0) 38%,
        rgba(250, 240, 230, 0.5) 50%,
        rgba(250, 240, 230, 0) 62%);
    background-size: 250% 100%;
    -webkit-mask-image: radial-gradient(closest-side, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(closest-side, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
}

/* ───── 3. The burst ───── */
.premiere-burst,
.premiere-ribbons,
.premiere-glows {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.premiere-haze {
    position: absolute;
    inset: 8% -25%;
    background: radial-gradient(50% 46% at 50% 50%, var(--ribbon-haze) 0%, rgba(74, 25, 66, 0) 72%);
    opacity: 0;
}
.premiere-burst.is-burst .premiere-haze { animation: premiere-haze 1.9s var(--ease-silk) both; }
@keyframes premiere-haze {
    0% { opacity: 0; }
    12% { opacity: 1; }
    100% { opacity: 0; }
}

/* A strip: the outer span slides (expo-out: fast, then a long
   deceleration), the inner one widens, then thins and fades. Each strip's
   colour, travel, width, alpha, duration and delay are its own custom
   properties (set by the module from its strip table). */
.premiere-strip {
    position: absolute;
    top: -20%;
    height: 140%;
    left: var(--premiere-join-x, 50%);
    width: var(--premiere-strip-w, 20px);
    margin-left: calc(var(--premiere-strip-w, 20px) * -0.5);
}
.premiere-strip-body {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(5, 5, 17, 0) 0%,
        var(--premiere-strip-c, var(--ribbon-gold)) var(--ribbon-soft-edge),
        var(--premiere-strip-c, var(--ribbon-gold)) calc(100% - var(--ribbon-soft-edge)),
        rgba(5, 5, 17, 0) 100%);
    opacity: 0;
    transform: skewX(-8deg) scaleX(0.25);
}
.premiere-ribbons--far .premiere-strip-body {
    background: linear-gradient(90deg,
        rgba(5, 5, 17, 0) 0%,
        var(--premiere-strip-c, var(--ribbon-gold)) 35%,
        var(--premiere-strip-c, var(--ribbon-gold)) 65%,
        rgba(5, 5, 17, 0) 100%);
}
.premiere-burst.is-burst .premiere-strip {
    animation: premiere-strip-move var(--premiere-strip-dur, 1.2s) var(--ease-expo-out) var(--premiere-strip-delay, 0s) both;
}
.premiere-burst.is-burst .premiere-strip-body {
    animation: premiere-strip-shape var(--premiere-strip-dur, 1.2s) linear var(--premiere-strip-delay, 0s) both;
}
@keyframes premiere-strip-move {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(var(--premiere-strip-dx, 30vw), 0, 0); }
}
@keyframes premiere-strip-shape {
    0% { opacity: 0; transform: skewX(-8deg) scaleX(0.25); }
    6% { opacity: var(--premiere-strip-a, 0.85); transform: skewX(-8deg) scaleX(1.5); }
    32% { opacity: var(--premiere-strip-a, 0.85); transform: skewX(-8deg) scaleX(1); }
    72% { opacity: calc(var(--premiere-strip-a, 0.85) * 0.55); transform: skewX(-8deg) scaleX(0.3); }
    100% { opacity: 0; transform: skewX(-8deg) scaleX(0.06); }
}

/* The last strip: the celestial hairline. It flies to 60% across and
   hangs there (is-fly), turns ninety degrees into the ident's rule at
   6.2 s (is-rule), and lifts away with the ident (on its wrapper). */
.premiere-hair-lift {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.premiere-hair {
    position: absolute;
    top: 0;
    height: 100%;
    left: var(--premiere-join-x, 50%);
    width: 0;
}
.premiere-hair-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;
    width: 20px;
    background: radial-gradient(closest-side, var(--ribbon-pink) 0%, var(--ribbon-pink) 50%, rgba(240, 180, 200, 0) 100%);
    opacity: 0;
    transform: skewX(-8deg) scaleX(0.3);
}
.premiere-hair.is-fly { animation: premiere-hair-move 1.47s var(--ease-expo-out) both; }
.premiere-hair.is-fly .premiere-hair-line { animation: premiere-hair-shape 1.47s linear both; }
.premiere-hair.is-fly.is-rule { animation: premiere-hair-turn 0.7s var(--ease-stage) both; }
/* The hit never landed (a safety net only): jump to the hanging hairline. */
.premiere-hair.is-settled:not(.is-rule),
.premiere-hair.is-settled .premiere-hair-line { animation-delay: -1.47s; }

@keyframes premiere-hair-move {
    from { transform: translateX(0); }
    to { transform: translateX(var(--premiere-hair-dx, 10vw)); }
}
@keyframes premiere-hair-shape {
    0% { opacity: 0; transform: skewX(-8deg) scaleX(0.3); }
    6% { opacity: 1; transform: skewX(-8deg) scaleX(1.3); }
    40% { opacity: 0.95; transform: skewX(-5deg) scaleX(0.5); }
    100% { opacity: 0.95; transform: skewX(0deg) scaleX(var(--premiere-hair-thin, 0.1)); }
}
@keyframes premiere-hair-turn {
    from { transform: translateX(var(--premiere-hair-dx, 10vw)) rotate(0deg) scaleY(1); }
    to { transform: translateX(var(--premiere-rule-dx, 0px)) rotate(90deg) scaleY(var(--premiere-rule-scale, 0.3)); }
}

/* Reduced motion's stand-in for the strips: six wide soft glows. */
.premiere-glow {
    display: none;
    position: absolute;
    top: -10%;
    height: 120%;
    width: 34vw;
    margin-left: -17vw;
    background: radial-gradient(closest-side, var(--premiere-glow-c, var(--ribbon-gold)) 0%, rgba(5, 5, 17, 0) 100%);
    opacity: 0;
}
@keyframes premiere-glow {
    0% { opacity: 0; }
    35% { opacity: 0.42; }
    100% { opacity: 0; }
}

/* ───── 4. The ident ───── */
.premiere-ident,
.premiere-ident-art,
.premiere-echoes,
.premiere-echo {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.premiere-ident-top {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(50% + 18px);
    display: flex;
    justify-content: center;
}
.premiere-ident-bottom {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% + 16px);
    display: grid;
    justify-items: center;
    gap: 1rem;
    padding-inline: 24px;
    text-align: center;
}

.premiere-mini {
    position: relative;
    display: inline-flex;
    align-items: center;
    font: 700 calc(var(--premiere-mono-size) * 0.36)/1 var(--font-display);
    opacity: 0;
    transition: opacity 0.6s var(--ease-silk);
}
.premiere-mini .premiere-glyph-glow { opacity: 0.35; }
.premiere-mini .premiere-glyph-side {
    text-shadow:
        1px 1px 0 var(--mono-side),
        2px 2px 0 rgba(196, 138, 96, 0.7),
        2px 4px 8px rgba(5, 5, 17, 0.7);
}
.premiere-mini-join {
    position: relative;
    z-index: 1;
    width: 0.12em;
    height: 0.84em;
    margin: 0 -0.04em;
    border-radius: 0.02em;
    background: var(--mono-join);
    transform: skewX(-16deg);
}
.premiere-ident.is-mono .premiere-mini { opacity: 1; }

.premiere-wordmark {
    margin: 0;
    font: 500 0.84rem/1 var(--font-body);
    text-transform: uppercase;
    color: var(--accent-warm-bright);
    letter-spacing: 0.5em;
    text-indent: 0.5em;          /* keeps the tracked line optically centred */
    opacity: 0;
    transition:
        opacity 1.2s var(--ease-silk),
        letter-spacing 1.6s var(--ease-expo-out),
        text-indent 1.6s var(--ease-expo-out);
}
.premiere-ident.is-word .premiere-wordmark {
    opacity: 1;
    letter-spacing: 0.32em;
    text-indent: 0.32em;
}

.premiere-ident-line {
    margin: 0;
    font: italic 400 clamp(1.15rem, 5.2vw, 1.45rem)/1.3 var(--font-display);
    color: var(--text-primary);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 1s var(--ease-silk), transform 1.2s var(--ease-expo-out);
}
.premiere-ident.is-line .premiere-ident-line {
    opacity: 1;
    transform: none;
}

/* 11.2 s: the ident lifts 20 px and ghosts upward, two echoes trailing
   (the ghost drop-in in reverse: the echoes start on the real copy and
   lag 9 and 18 px behind it as all three fade). */
.premiere-ident.is-lift .premiere-ident-art,
.premiere-hair-lift.is-lift { animation: premiere-lift 0.8s var(--ease-expo-out) both; }
.premiere-echo--1 { animation: premiere-echo-1 0.8s var(--ease-expo-out) both; }
.premiere-echo--2 { animation: premiere-echo-2 0.8s var(--ease-expo-out) both; }
@keyframes premiere-lift {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-20px); }
}
@keyframes premiere-echo-1 {
    from { opacity: var(--ghost-alpha-1, 0.34); transform: translateY(0); }
    to { opacity: 0; transform: translateY(calc(-20px - var(--ghost-offset-1, -9px))); }
}
@keyframes premiere-echo-2 {
    from { opacity: var(--ghost-alpha-2, 0.16); transform: translateY(0); }
    to { opacity: 0; transform: translateY(calc(-20px - var(--ghost-offset-2, -18px))); }
}

/* 12.4 s: black. */
.premiere-container.is-dark .premiere-ident,
.premiere-container.is-dark .premiere-hair-lift { visibility: hidden; }

/* ───── 5. The pre-tap card ───── */
.premiere-lobby {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 24px 20px calc(96px + env(safe-area-inset-bottom, 0px));
    transition:
        opacity 0.5s var(--ease-expo-out),
        transform 0.5s var(--ease-expo-out),
        visibility 0s linear 0s;
}

.premiere-spark {
    display: block;
    width: 12px;
    height: 12px;
    transition: opacity 0.4s var(--ease-silk), transform 0.5s var(--ease-expo-out);
}
.premiere-spark-core {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--text-primary) 0%, var(--accent-warm-bright) 45%, rgba(232, 168, 124, 0) 100%);
    box-shadow: 0 0 16px 5px var(--accent-warm-glow), 0 0 48px 16px var(--accent-warm-glow-soft);
    animation: premiere-breathe 3.2s var(--ease-breath) infinite;
}
@keyframes premiere-breathe {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: 0.72; }
}

.premiere-card {
    width: min(22rem, 100%);
    display: grid;
    justify-items: center;
    gap: 0.95rem;
    padding: 2rem 1.5rem 1.6rem;
    text-align: center;
    background: var(--plaque-fill);
    border: 1px solid var(--gilt-line);
    border-radius: 20px;
    box-shadow: var(--plaque-inset), 0 0 60px var(--bloom);
    cursor: pointer;
}
.premiere-kicker {
    margin: 0;
    font: 500 0.74rem/1 var(--font-body);
    letter-spacing: 0.32em;
    text-indent: 0.32em;
    text-transform: uppercase;
    color: var(--accent-warm);
}
.premiere-title {
    margin: 0;
    font: 700 clamp(1.7rem, 7.4vw, 2.35rem)/1.16 var(--font-display);
    color: var(--text-primary);
    text-wrap: balance;
    overflow-wrap: anywhere;
}
.premiere-note {
    margin: 0;
    font: 400 0.95rem/1.5 var(--font-body);
    color: var(--text-secondary);
}
.premiere-begin {
    margin-top: 0.55rem;
    width: 70%;
    min-width: 12.5rem;
    min-height: 56px;
    padding: 0.9rem 1.2rem;
    border: none;
    border-radius: 999px;
    background: var(--btn-fill);
    color: var(--btn-ink);
    font: 600 1rem/1.15 var(--font-body);
    letter-spacing: 0.02em;
    box-shadow: var(--btn-shadow);
    cursor: pointer;
}
.premiere-begin:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

/* The tap: the card dims and shrinks back 6% (expo-out, 0.5 s), the spark dies. */
.premiere-container.is-tapped .premiere-lobby {
    opacity: 0;
    transform: scale(0.94);
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.5s var(--ease-expo-out),
        transform 0.5s var(--ease-expo-out),
        visibility 0s linear 0.5s;
}
.premiere-container.is-tapped .premiere-spark {
    opacity: 0;
    transform: scale(0.3);
}
.premiere-container.is-running .premiere-spark-core { animation: none; }

/* ───── Reduced motion: every part plays, calmly ─────
   No camera (ReveelStage.camera no-ops, so --cam-* stay at rest), no 3D
   fold: the three strokes fade in 0.25 s apart; the ribbons become six
   soft glows that cross-fade; the hairline rule and the ident arrive and
   leave by fading; the dust and the spark stand still. */
@media (prefers-reduced-motion: reduce) {
    #screen-premiere,
    .premiere-cam { transition: none; }

    .premiere-mote,
    .premiere-spark-core { animation: none; }
    .premiere-mote { opacity: 0.5; }

    .premiere-container.is-tapped .premiere-lobby,
    .premiere-container.is-tapped .premiere-spark { transform: none; }

    .premiere-fold--left,
    .premiere-fold--right {
        transform: none;
        transition: opacity 0.4s var(--ease-silk);
    }
    .premiere-fold--right { transition-delay: 0.5s; }
    .premiere-join,
    .premiere-mono.is-s2 .premiere-join {
        -webkit-clip-path: none;
        clip-path: none;
        opacity: 0;
        transition: opacity 0.4s var(--ease-silk) 0.25s;
    }
    .premiere-mono.is-s1 .premiere-fold--left,
    .premiere-mono.is-s1 .premiere-fold--right,
    .premiere-mono.is-s1 .premiere-join { opacity: 1; }
    .premiere-join-seam { transform: none; }
    .premiere-mono.is-hit { animation-duration: 0.6s; }

    .premiere-ribbons { display: none; }
    .premiere-glow { display: block; }
    .premiere-burst.is-burst .premiere-glow { animation: premiere-glow 1.8s var(--ease-silk) var(--premiere-glow-d, 0s) both; }

    .premiere-hair,
    .premiere-hair.is-fly,
    .premiere-hair.is-fly.is-rule {
        animation: none;
        transform: translateX(var(--premiere-rule-dx, 0px)) rotate(90deg) scaleY(var(--premiere-rule-scale, 0.3));
    }
    .premiere-hair .premiere-hair-line,
    .premiere-hair.is-fly .premiere-hair-line {
        animation: none;
        opacity: 0;
        transform: scaleX(var(--premiere-hair-thin, 0.1));
        transition: opacity 0.8s var(--ease-silk);
    }
    .premiere-hair.is-rule .premiere-hair-line,
    .premiere-hair.is-fly.is-rule .premiere-hair-line { opacity: 0.95; }

    .premiere-wordmark {
        letter-spacing: 0.32em;
        text-indent: 0.32em;
        transition: opacity 1.2s var(--ease-silk);
    }
    .premiere-ident-line {
        transform: none;
        transition: opacity 1s var(--ease-silk);
    }
    .premiere-ident.is-lift .premiere-ident-art,
    .premiere-hair-lift.is-lift { animation: premiere-fade-out 0.8s var(--ease-silk) both; }
}
@keyframes premiere-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}