/* ==========================================================================
   Deep Crown — «Nouă minute», the scroll film
   One scroll from 14:02 (an article publishes) to 14:11 (your phone buzzes).
   Scene opacity/transforms are driven by js/film.js; this file is the stage.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Track & stage
   -------------------------------------------------------------------------- */

.film-track {
    position: relative;
    /* the length of the film — scroll budget. 740→705vh 2026-07-13: the
       hero's slice was cut (SEG rebalance in film.js) and the track
       shortened by the same amount so the other scenes keep their pace.
       705→675vh 2026-07-14: the tail after the phone pocketed was ~40vh
       of dead scroll before the demo — cut to ~10vh (SEG rebalance). */
    height: 675vh;
}

.film-stage {
    position: sticky;
    top: 0;
    height: 100vh;   /* fallback: browsers without svh would collapse to 0 */
    height: 100svh;
    overflow: hidden;
}

#field {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;           /* under .grain (2) and all content (3+) */
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   The clock — the film's narrator
   -------------------------------------------------------------------------- */

.clock {
    /* docked in the header bar — its center is free since the nav moved left.
       The element is a CHILD of .site-head (see index.html): the film stage
       is a stacking context, so from inside it no z-index can clear the
       scrolled bar's background. As a header child it paints above the bar. */
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
}

/* below 940px the left-grouped nav reaches the bar's center —
   the chip steps down to the top-right corner instead */
@media (max-width: 939px) {
    .clock {
        top: 80px;
        left: auto;
        right: 20px;
        transform: none;
    }
}

.clock-time {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 0.34em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    display: inline-block;
    padding: 6px 16px 6px calc(16px + 0.34em);
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 999px;
    background: rgba(10, 10, 15, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: box-shadow 0.4s ease;
}

.clock.tick .clock-time { animation: clocktick 0.45s var(--ease); }

.clock.final .clock-time {
    box-shadow: 0 0 40px rgba(139, 92, 246, 0.35);
}

@keyframes clocktick {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   Scenes
   -------------------------------------------------------------------------- */

.scene {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
}

.scene.active { pointer-events: auto; }

.scene-inner {
    position: relative;
    max-width: 880px;
    will-change: transform, opacity;
}

/* «Află la timp ce se publică» as one row needs ~1030px at the capped
   title size (26 chars vs the old title's 23 at ~39.5px/char) — the hero
   gets a wider box than the other scenes */
.scene[data-scene="hero"] .scene-inner { max-width: 1080px; }

.scene h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.65rem, 4.2vw, 2.9rem);
    line-height: 1.14;
    letter-spacing: -0.008em;
    max-width: 22ch;
    margin: 0 auto;
    text-wrap: balance;
}

.scene .stamp { margin-bottom: 30px; }
.scene .stamp::after { display: none; }
.scene .whisper { margin-top: 26px; }

/* Scene: hero — scroll cue */
.hero-cue {
    margin-top: 64px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--paper-dim);
}

.cue-arrow {
    display: inline-block;
    margin-left: 10px;
    color: var(--accent);
    animation: cuebob 2.2s var(--ease) infinite;
}

@keyframes cuebob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
    .cue-arrow { animation: none; }
}

/* Scene: monitor — the sources as a live conveyor. Infinite marquee (the
   foot-ticker's .ticker-inner drives the loop), broken out of the centered
   scene-inner to full viewport width; the mask keeps only the middle ~30%
   of the screen fully readable, with long fades to nothing on both sides. */
.scene-ticker {
    /* full-bleed inside the centered .scene-inner: 50% of the parent minus
       half the viewport lands the left edge exactly at the screen's edge */
    width: 100vw;
    margin: 34px calc(50% - 50vw) 0;
    overflow: hidden;
    /* maximum fade from BOTH sides — no plateau at all: opacity peaks only
       at dead center, so a name is fully readable just for the moment it
       crosses the middle; the outer 12% each side is completely invisible */
    -webkit-mask-image: linear-gradient(90deg, transparent 12%, #000 50%, transparent 88%);
    mask-image: linear-gradient(90deg, transparent 12%, #000 50%, transparent 88%);
}

.scene-ticker .ticker-inner {
    /* livelier than the footer's stroll; doubled with the four-copy strip
       (twice the -50% travel) so the on-screen speed stays the same */
    animation-duration: 92s;
    line-height: 2;
}

.scanline {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(139, 92, 246, 0.85), transparent);
    box-shadow: 0 0 24px rgba(139, 92, 246, 0.5);
    opacity: 0;
}

/* Scene: read — the article under the beam */
.article-card {
    position: relative;
    max-width: 560px;
    margin: 32px auto 0;
    padding: 26px 28px 30px;
    text-align: left;
    background: var(--ink-2);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.article-kicker {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--paper-dim);
    margin-bottom: 14px;
}

.article-body {
    font-size: 15px;
    line-height: 1.75;
    --rowh: calc(15px * 1.75);
    color: rgba(255, 255, 255, 0.78);
}

.article-body .ent,
.teaser-body .ent {
    transition: color 0.4s ease, text-shadow 0.4s ease;
}

.article-body .ent.lit,
.teaser-body .ent.lit {
    color: var(--accent);
    text-shadow: 0 0 18px rgba(139, 92, 246, 0.35);
}

/* GEOMETRIC teaser fade, two mask layers that add up: a solid block over
   the crisp rows and a 50%→96% horizontal gradient over the final row —
   so the fade always begins at the midpoint of the last visible row, no
   matter how the copy wraps. Rows past the clamp are clipped.
   --rowh must equal one line-box (font-size × line-height).
   The main article shows 3 rows (fade from 2½); teasers show 2 (fade
   from 1½). */
.article-body,
.teaser-body {
    overflow: hidden;
    /* steep fall-off: readable at the row's midpoint, half-gone shortly
       after, fully dissolved well before the row ends */
    -webkit-mask-image:
        linear-gradient(#000, #000),
        linear-gradient(90deg, #000 48%, rgba(0, 0, 0, 0.45) 63%, transparent 80%);
    -webkit-mask-repeat: no-repeat;
    mask-image:
        linear-gradient(#000, #000),
        linear-gradient(90deg, #000 48%, rgba(0, 0, 0, 0.45) 63%, transparent 80%);
    mask-repeat: no-repeat;
}

.article-body {
    max-height: calc(3 * var(--rowh));
    -webkit-mask-size: 100% calc(2 * var(--rowh)), 100% var(--rowh);
    -webkit-mask-position: 0 0, 0 calc(2 * var(--rowh));
    mask-size: 100% calc(2 * var(--rowh)), 100% var(--rowh);
    mask-position: 0 0, 0 calc(2 * var(--rowh));
}

.teaser-body {
    max-height: calc(2 * var(--rowh));
    -webkit-mask-size: 100% var(--rowh), 100% var(--rowh);
    -webkit-mask-position: 0 0, 0 var(--rowh);
    mask-size: 100% var(--rowh), 100% var(--rowh);
    mask-position: 0 0, 0 var(--rowh);
}

/* the other desks, read in the same breath — a vertical stack of mini
   teasers under the main card, one per desk, all the same height
   (grid-auto-rows: 1fr). Opacity/transform driven per-frame from film.js,
   so with the film off they simply render static and visible. */
.article-teasers {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 8px;
    max-width: 560px;   /* same width as the main article card */
    margin: 12px auto 0;
    text-align: left;
}

.article-teaser {
    text-align: left;
    padding: 12px 16px 13px;
    background: var(--ink-2);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.article-teaser .article-kicker {
    font-size: 10px;
    margin-bottom: 8px;
}

.teaser-body {
    font-size: 12.5px;
    line-height: 1.6;
    --rowh: calc(12.5px * 1.6);
    color: rgba(255, 255, 255, 0.66);
}

/* The read scene grew a 4-teaser stack, so its flex-centered content rises
   toward the fixed header. Tall screens: push it below the bar. Short
   screens: drop the in-scene stamp (the top clock chip already says 14:04)
   and ease the title down a step. */
@media (min-height: 861px) {
    .scene[data-scene="read"] { padding-top: 96px; }
}
@media (max-height: 860px) {
    .scene[data-scene="read"] { padding-top: 84px; } /* clear the fixed bar */
    .scene[data-scene="read"] .stamp { display: none; }
    .scene[data-scene="read"] h2 { font-size: clamp(1.4rem, 3vw, 2.2rem); }
    .scene[data-scene="read"] .article-card { margin-top: 20px; }
}

.read-beam {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 44px;
    background: linear-gradient(to bottom,
        transparent,
        rgba(139, 92, 246, 0.10) 40%,
        rgba(139, 92, 246, 0.10) 60%,
        transparent);
    border-top: 1px solid rgba(139, 92, 246, 0.18);
    border-bottom: 1px solid rgba(139, 92, 246, 0.18);
    transform: translateY(-60px);
}

/* Scene: extract — entity chips, the disambiguation moment */
.chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 40px;
}

.chip {
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    color: var(--paper);
    background: var(--ink-2);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    padding: 12px 18px 13px;
    text-align: left;
    will-change: transform, opacity;
}

.chip-kind {
    display: block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--paper-dim);
    margin-bottom: 4px;
}

.chip-you {
    border-color: rgba(139, 92, 246, 0.6);
    box-shadow: 0 0 34px rgba(139, 92, 246, 0.16);
}

.chip-you .chip-kind { color: var(--accent); }

.chip-other { filter: grayscale(1); }

/* Scene: weigh — the tone meter */
.meter {
    position: relative;
    width: min(340px, 82vw);
    margin: 44px auto 0;
}

.meter svg {
    display: block;
    width: 100%;
    height: auto;
}

/* the needle carries its own light */
#needle line { filter: drop-shadow(0 0 7px rgba(139, 92, 246, 0.55)); }

.meter-labels {
    position: relative;
    height: 14px;
    margin-top: -16px;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper-dim);
}

/* each label centered under its arc endpoint (x = 30 / 150 / 270 of the
   300-unit viewBox → 10% / 50% / 90%), not flex-pushed to the box edges */
.meter-labels span {
    position: absolute;
    transform: translateX(-50%);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.meter-labels span:nth-child(1) { left: 10%; }
.meter-labels span:nth-child(2) { left: 50%; }
.meter-labels span:nth-child(3) { left: 90%; }

.meter-verdict {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.25rem;
    color: var(--success);
    margin-top: 18px;
    opacity: 0;
}

/* Scene: alert — the phone */
.scene[data-scene="alert"] { flex-direction: column; }

.scene[data-scene="alert"] .scene-inner { margin-bottom: 24px; }

.alert-title { font-variant-numeric: tabular-nums; }

.phone {
    position: relative;
    width: min(372px, 88vw);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-bottom: none;
    border-radius: 38px 38px 0 0;
    padding: 18px 14px 0;
    background: linear-gradient(180deg, #15151f, #0e0e15);
    box-shadow: 0 -30px 90px rgba(0, 0, 0, 0.55), 0 0 60px rgba(139, 92, 246, 0.06);
    will-change: transform;
    transform: translateY(110%);
}

.phone-notch {
    width: 110px;
    height: 22px;
    margin: 0 auto 14px;
    background: #050508;
    border-radius: 0 0 14px 14px;
}

.phone-screen {
    padding: 8px 10px 30px;
    text-align: left;
}

.phone .wa-bubble {
    font-size: 15.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.94);
    padding: 14px 16px 18px;
}

.phone .wa-link { font-size: 14.5px; }

.phone .wa-reason {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72);
    margin-top: 6px;
}

.phone .wa-bubble { opacity: 0; transform: translateY(14px) scale(0.96); }

/* --------------------------------------------------------------------------
   Camera de comandă — the dashboard assembling itself
   -------------------------------------------------------------------------- */

.demo-track {
    position: relative;
    z-index: 4;
    height: 470vh;
    margin-top: -60vh; /* overlap the film's tail: phone crossfades into the dashboard */
}

.demo-stage {
    position: sticky;
    top: 0;
    height: 100vh;   /* fallback: browsers without svh would collapse to 0 */
    height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 24px;
}

.demo-frame {
    position: relative;
    z-index: 4;
    width: min(94vw, 1040px);
    padding: 20px 24px 26px;
    border: 1px solid var(--hairline);
    border-radius: 16px;
    background: rgba(18, 18, 26, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.5), 0 0 60px rgba(139, 92, 246, 0.06);
    opacity: 0;
    will-change: transform, opacity;
}

.demo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.demo-pills { display: flex; gap: 8px; flex-wrap: wrap; }

.pill {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--hairline);
    font-size: 13px;
    font-weight: 500;
    color: var(--paper-dim);
    opacity: 0;
    transform: translateY(-14px);
    will-change: transform, opacity;
    transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.pill.on {
    background: var(--accent-grad);
    color: #ffffff;
    border-color: transparent;
}

.demo-stats { display: flex; gap: 26px; }

.dstat span {
    font-size: 20px;
    font-weight: 600;
    color: var(--paper);
    font-variant-numeric: tabular-nums;
}

.dstat label {
    display: block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--paper-dim);
    margin-top: 2px;
}

.demo-viz {
    position: relative;
    height: clamp(300px, 48vh, 480px);
    margin-top: 16px;
}

.demo-bubbles { position: absolute; inset: 0; }

.demo-bars { position: absolute; inset: 0; opacity: 0; }

.demo-tabs { display: flex; gap: 6px; }

.dtab {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--hairline);
    font-size: 13px;
    font-weight: 500;
    color: var(--paper-dim);
    transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.dtab.on {
    background: rgba(139, 92, 246, 0.16);
    border-color: rgba(139, 92, 246, 0.5);
    color: var(--paper);
}

.bar-row {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    will-change: transform, opacity;
    opacity: 0;
}

.bar-name {
    width: 170px;
    flex-shrink: 0;
    text-align: right;
    font-size: 13px;
    font-weight: 500;
    color: var(--paper);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bar-track {
    flex: 1;
    height: 14px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.bar-fill {
    display: block;
    height: 100%;
    border-radius: 7px;
    width: 0%;
}

.bar-count {
    width: 64px;
    flex-shrink: 0;
    font-size: 13px;
    color: var(--paper-dim);
    font-variant-numeric: tabular-nums;
}

.bubble {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 50%;
    color: #ffffff;
    transform: translate(-50%, -50%) scale(0);
    will-change: transform;
    cursor: default;
    user-select: none;
}

.bubble .bname {
    font-weight: 600;
    line-height: 1.12;
    padding: 0 10%;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.bubble .bcount {
    font-weight: 500;
    opacity: 0.9;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.bubble .bcrown {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    color: #fbbf24;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
}

.demo-cta {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 55% at 50% 50%,
        rgba(10, 10, 15, 0.82),
        rgba(10, 10, 15, 0.35) 60%,
        transparent 82%);
}

/* a tighter, deeper shadow right behind the «Deep Crown.» block, so the
   gold reads crisply over the blurred dashboard */
.demo-cta::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(680px, 90%);
    height: min(300px, 64%);
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse closest-side,
        rgba(5, 5, 9, 0.92),
        rgba(5, 5, 9, 0.5) 58%,
        transparent 100%);
    z-index: -1;
}

.demo-cta.live { pointer-events: auto; }

.demo-cta h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.8rem, 4.4vw, 3rem);
    letter-spacing: -0.008em;
}

/* --------------------------------------------------------------------------
   Fallback — no JS or reduced motion: the film unrolls as a static page
   (every scene stacked, canvas & clock hidden, nothing depends on scroll)
   -------------------------------------------------------------------------- */

html.no-js .film-track,
html.film-off .film-track { height: auto; }

html.no-js .film-stage,
html.film-off .film-stage {
    position: static;
    height: auto;
    overflow: visible;
}

html.no-js .scene,
html.film-off .scene {
    position: static;
    opacity: 1 !important;
    pointer-events: auto;
    padding: clamp(90px, 14vh, 160px) 24px;
}

html.no-js #field, html.film-off #field,
html.no-js .clock,  html.film-off .clock,
html.no-js .scanline, html.film-off .scanline { display: none; }

html.no-js .phone, html.film-off .phone { transform: none; margin-top: 40px; }
html.no-js .phone .wa-bubble, html.film-off .phone .wa-bubble { opacity: 1; transform: none; }
html.no-js .read-beam, html.film-off .read-beam { display: none; }
html.no-js .ent, html.film-off .ent { color: var(--accent); }
html.no-js .meter-verdict, html.film-off .meter-verdict { opacity: 1; }

html.no-js .demo-track { display: none; }

html.film-off .demo-track { height: auto; margin-top: 0; }
html.film-off .demo-stage { position: static; height: auto; padding: 90px 24px; flex-direction: column; gap: 40px; }
html.film-off .demo-frame { opacity: 1 !important; filter: none !important; }
html.film-off .pill { opacity: 1; transform: none; }
html.film-off .demo-cta { position: static; opacity: 1 !important; pointer-events: auto; background: none; }
html.film-off .demo-cta::before { display: none; }

@media (prefers-reduced-motion: reduce) {
    .clock.tick .clock-time { animation: none; }
    .pill { transition: none; }
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .film-track { height: 622vh; } /* 680→650: hero cut; 650→622: tail cut — both same as desktop */
    /* clearance under the fixed header: on short/zoomed viewports the
       centered hero block used to ride up beneath the transparent bar —
       brand "Deep Crown" colliding with the hero's own "Deep Crown." */
    .scene[data-scene="hero"] { padding-top: 96px; }
    .demo-track { height: 400vh; }
    .demo-frame { padding: 14px 14px 18px; }
    .demo-stats { gap: 16px; }
    .dstat span { font-size: 16px; }
    .demo-viz { height: clamp(260px, 44vh, 380px); }
    .bar-name { width: 104px; font-size: 11px; }
    .bar-count { width: 44px; font-size: 11px; }
    .clock { top: 70px; right: 14px; }
    .clock-time {
        font-size: 11px;
        letter-spacing: 0.28em;
        padding: 6px 12px 6px calc(12px + 0.28em);
    }
    .article-card { padding: 18px 16px 20px; margin-top: 24px; }
    .article-body { font-size: 13.5px; line-height: 1.65; --rowh: calc(13.5px * 1.65); }
    .article-teasers { gap: 8px; max-width: 420px; margin-top: 10px; }
    .article-teaser { padding: 9px 12px 10px; }
    .article-teaser .article-kicker { margin-bottom: 5px; }
    .teaser-body { font-size: 12px; line-height: 1.5; --rowh: calc(12px * 1.5); }
    .scene-ticker .ticker-inner { font-size: 11px; }
    .scene .whisper { font-size: 0.95rem; }
    .chips { gap: 10px; }
    .chip { font-size: 13.5px; padding: 10px 14px 11px; }
}

/* --------------------------------------------------------------------------
   Satellites — left: the crown with empty sockets, its gems adrift below.
   Right: one gem already captured in the rotating tracking reticle.
   Motion is engine-driven (layered sines; reticle spins continuously).
   -------------------------------------------------------------------------- */

.satellites {
    position: fixed;
    inset: 0;
    z-index: 9;
    pointer-events: none;
    will-change: transform;
}

.sat {
    position: absolute;
    will-change: transform;
}

/* inline svg leaves baseline-descender space under it, which would skew
   the wrapper's measured center — and every flight targets that center */
.sat > svg { display: block; }

.sat-crown {
    filter: drop-shadow(0 0 26px rgba(251, 191, 36, 0.4))
            drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
}

.sat-crown .socket polygon { animation: socketGlow 3.2s ease-in-out infinite; transition: stroke-dasharray 0.3s ease; }
.sat-crown #sockCrownD polygon { animation-delay: -1.1s; }
.sat-crown #sockCrownR polygon { animation-delay: -2.2s; }

.sat-crown .socket.filled polygon {
    animation: none;
    stroke-dasharray: 0;
    stroke-opacity: 1;
}

@keyframes socketGlow {
    0%, 100% { stroke-opacity: 0.35; }
    50%      { stroke-opacity: 0.9; }
}

.sat-gem-v { filter: drop-shadow(0 0 18px rgba(139, 92, 246, 0.5)) drop-shadow(0 14px 26px rgba(0, 0, 0, 0.45)); }
.sat-gem-p { filter: drop-shadow(0 0 14px rgba(236, 72, 153, 0.5)) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45)); }
.sat-gem-c { filter: drop-shadow(0 0 16px rgba(6, 182, 212, 0.55)) drop-shadow(0 12px 24px rgba(0, 0, 0, 0.45)); }
.sat-star  { filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.65)); }

#satDiamond { filter: drop-shadow(0 0 20px rgba(186, 230, 253, 0.55)) drop-shadow(0 12px 26px rgba(0, 0, 0, 0.45)); }

.twinkle {
    opacity: 0;
    transform-origin: center;
    transform-box: fill-box;
    animation: diaTwinkle 2.6s ease-in-out infinite;
}

.twinkle.t2 { animation-delay: -0.9s; }
.twinkle.t3 { animation-delay: -1.8s; }

@keyframes diaTwinkle {
    0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
    50%      { opacity: 1; transform: scale(1) rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
    .twinkle { animation: none; opacity: 0.7; }
}

.gem-pulse svg { animation: gemPulse 4.6s ease-in-out infinite; }
.sat-gem-p.gem-pulse svg { animation-delay: -1.6s; }
.sat-gem-c.gem-pulse svg { animation-delay: -3s; }

@keyframes gemPulse {
    0%, 100% { opacity: 0.88; }
    50%      { opacity: 1; }
}

@media (max-width: 1100px) {
    .satellites { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sat-crown .socket circle, .gem-pulse svg { animation: none; }
}

/* --------------------------------------------------------------------------
   Planurile — Ruby & Diamond. The crown's gems fly into the card sockets.
   -------------------------------------------------------------------------- */

.plans-track {
    position: relative;
    z-index: 4;
    height: 300vh;
    /* overlap the demo's un-pin exit (same trick as .demo-track over the
       film's tail): the CTA scrolls away WHILE the plan cards fade in,
       instead of a viewport of empty dark between the two beats.
       buildPlans.update() gates pointer-events during the overlap so the
       invisible stage never blocks the demo CTA's button. */
    margin-top: -60vh;
}

.plans-stage {
    position: sticky;
    top: 0;
    height: 100vh;   /* fallback: browsers without svh would collapse to 0 */
    height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.plans-inner {
    display: flex;
    gap: clamp(20px, 3.4vw, 46px);
    width: min(94vw, 960px);
    opacity: 0;
    will-change: transform, opacity;
}

.plan-card {
    position: relative;
    flex: 1;
    padding: 56px 30px 30px;
    border: 1px solid var(--hairline);
    border-radius: 16px;
    background: rgba(18, 18, 26, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 40px 110px rgba(0, 0, 0, 0.5);
    text-align: left;
}

.plan-ruby { border-color: rgba(239, 68, 68, 0.28); }
.plan-diamond { border-color: rgba(125, 211, 252, 0.3); }

.plan-card h3 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.4rem;
    letter-spacing: 0.01em;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.plan-ruby h3 {
    background-image: linear-gradient(135deg, #fecaca, #ef4444 55%, #b91c1c);
    color: #ef4444;
}

.plan-diamond h3 {
    background-image: linear-gradient(135deg, #ffffff, #a5ecff 40%, #4fd6ff 75%, #38bdf8);
    color: #7dd3fc;
    filter: drop-shadow(0 0 14px rgba(125, 211, 252, 0.45));
}

.plan-for {
    font-size: 13px;
    color: var(--paper-dim);
    margin-top: 6px;
}

.plan-benefits {
    list-style: none;
    display: grid;
    gap: 9px;
    margin: 20px 0 26px;
}

.plan-benefits li { font-size: 14px; }

.plan-benefits li {
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.86);
    padding-left: 24px;
    position: relative;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.plan-benefits li::before {
    content: "✓";
    position: absolute;
    left: 0;
    font-weight: 600;
}

.plan-ruby .plan-benefits li::before { color: #f87171; }
.plan-diamond .plan-benefits li::before { color: #7dd3fc; }

.plans-stage.reveal .plan-benefits li { opacity: 1; transform: none; }
.plans-stage.reveal .plan-benefits li:nth-child(2) { transition-delay: 0.06s; }
.plans-stage.reveal .plan-benefits li:nth-child(3) { transition-delay: 0.12s; }
.plans-stage.reveal .plan-benefits li:nth-child(4) { transition-delay: 0.18s; }
.plans-stage.reveal .plan-benefits li:nth-child(5) { transition-delay: 0.24s; }
.plans-stage.reveal .plan-benefits li:nth-child(6) { transition-delay: 0.30s; }
.plans-stage.reveal .plan-benefits li:nth-child(7) { transition-delay: 0.36s; }
.plans-stage.reveal .plan-benefits li:nth-child(8) { transition-delay: 0.42s; }
.plans-stage.reveal .plan-benefits li:nth-child(9) { transition-delay: 0.48s; }

/* not included on this tier: gray dash, muted text */
.plan-benefits li.off { color: rgba(255, 255, 255, 0.34); }
.plan-benefits li.off::before { content: "–"; }
.plan-ruby .plan-benefits li.off::before,
.plan-diamond .plan-benefits li.off::before { color: rgba(255, 255, 255, 0.3); }

/* the premium differentiators, highlighted */
.plan-benefits em.hl {
    font-style: normal;
    font-weight: 600;
    color: #a78bfa;
    text-decoration: underline dotted rgba(167, 139, 250, 0.55);
    text-underline-offset: 3px;
}

.plan-card .cta-micro { margin-top: 12px; }

/* the socket: the gem's destination — cut to the stone's exact shape */
.plan-socket {
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.plan-ruby .plan-socket { width: 62px; height: 56px; }
.plan-diamond .plan-socket { width: 64px; height: 64px; }

.socket-shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.socket-shape polygon {
    fill: rgba(10, 10, 15, 0.92);
    stroke-width: 1.6;
    stroke-dasharray: 4 4;
    animation: sockPulse 3s ease-in-out infinite;
    transition: filter 0.4s ease;
}

.plan-ruby .socket-shape polygon { stroke: rgba(248, 113, 113, 0.8); }
.plan-diamond .socket-shape polygon { stroke: rgba(224, 242, 254, 0.85); }

@keyframes sockPulse {
    0%, 100% { stroke-opacity: 0.35; }
    50%      { stroke-opacity: 0.95; }
}

.plan-socket.filled .socket-shape polygon {
    animation: none;
    stroke-dasharray: 0;
    stroke-opacity: 1;
}

.plan-ruby .plan-socket.filled .socket-shape polygon { filter: drop-shadow(0 0 14px rgba(239, 68, 68, 0.6)); }
.plan-diamond .plan-socket.filled .socket-shape polygon { filter: drop-shadow(0 0 14px rgba(125, 211, 252, 0.65)); }

/* dock/undock spark burst */
.plan-socket .spark {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 9px currentColor;
    opacity: 0;
    pointer-events: none;
}

.plan-ruby .plan-socket .spark { color: #fecaca; }
.plan-diamond .plan-socket .spark { color: #e0f2fe; }

.plan-socket.bursting .spark { animation: sparkFly 0.62s ease-out forwards; }

@keyframes sparkFly {
    0%   { opacity: 1; transform: rotate(var(--a)) translateX(8px) scale(1); }
    100% { opacity: 0; transform: rotate(var(--a)) translateX(46px) scale(0.35); }
}

/* static pictograms when the flight can't happen (mobile / no motion / no JS).
   position:relative is LOAD-BEARING (subscription.css twin): .socket-shape is
   absolutely positioned, and positioned boxes paint above non-positioned
   siblings — without this the dark socket plate covers the gem. */
.socket-static { display: block; position: relative; }

@media (min-width: 1101px) {
    html.js:not(.film-off) .socket-static { display: none; }
}

/* wherever the static gem is the one that shows, the socket reads as a
   FILLED setting: solid ring, no empty-socket dash pulse (the gem never
   leaves, so the "awaiting its stone" look would lie) */
@media (max-width: 1100px) {
    .plan-socket .socket-shape polygon {
        animation: none;
        stroke-dasharray: 0;
        stroke-opacity: 1;
    }
}

html.no-js .plans-track, html.film-off .plans-track { height: auto; margin-top: 0; }
html.no-js .plans-stage, html.film-off .plans-stage { position: static; height: auto; padding: 90px 24px; }
html.no-js .plans-inner, html.film-off .plans-inner { opacity: 1 !important; transform: none !important; }
html.no-js .plan-benefits li, html.film-off .plan-benefits li { opacity: 1; transform: none; }

@media (max-width: 640px) {
    /* Phones: UNPINNED. Two stacked cards (~1500px) can't live inside a
       pinned 100svh stage — the centered column clipped at both ends at
       every scroll position and bled over the next beat once the stage
       un-pinned. The gem flight is desktop-only anyway (satellites hide
       ≤1100px), so the pin buys nothing here: the cards flow as normal
       page content, read one at a time. buildPlans.update() in film.js
       skips its per-frame inline opacity/transform below this SAME
       breakpoint — keep the two in sync. */
    .plans-track { height: auto; margin-top: 0; }
    .plans-stage { position: static; height: auto; padding: 70px 24px; }
    .plans-inner { flex-direction: column; gap: 52px; opacity: 1; transform: none; }
    .plan-card { padding-top: 50px; }
    .plan-benefits li { opacity: 1; transform: none; }
}