/* ISL-R15 Phase 1: Island layer for the cinematic engine.
   dist/cinematic.css is the engine (byte-frozen; never edit it). This sheet styles the hero film
   (#home), the build timeline (#install-timeline) and the hero-next band that holds the old hero's
   supporting content. Theme tokens only, no raw hex. Local custom properties are cinematic scroll
   length and measured opening-header geometry. Theme-derived black alpha scrims remain compatible
   with the immutable probe; QA also checks actual text fragments at every sampled frame. */

/* 1. Engine hooks: brand colors instead of the engine's fallbacks ------------------------------ */
.hero-cine,
.cine--timeline{background:var(--deep);color:var(--white)}
#home{--cine-length:280vh;--island-cine-chrome:0px;--island-cine-header:0px}
#home.cine--live>.cine__stage{
  top:var(--island-cine-header);
  height:max(1px,calc(100svh - var(--island-cine-chrome)))
}
#install-timeline{--cine-length:400vh}
.hero-cine .cine__rail::after,
.cine--timeline .cine__rail::after{background:var(--sky)}
.hero-cine .cine__skip,
.cine--timeline .cine__skip{color:var(--white);background:var(--c-03172499);border-color:var(--c-ffffff90)}
.hero-cine .cine__skip:hover,
.cine--timeline .cine__skip:hover{background:var(--c-082d47c2)}
.hero-cine .cine__skip:focus-visible,
.cine--timeline .cine__skip:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-on-dark);outline-offset:3px}

/* 2. Scrim: bottom-weighted so the beats (lower half of the frame) keep 4.5:1 for body text and
   3:1 for large text over the brightest drawn frame (white wall, pale dawn glass, the light band).
   Stops for the probe: [[0,.30],[.26,.12],[.40,.40],[.52,.62],[.70,.78],[1,.90]]. */
.hero-cine .cine__scrim,
.cine--timeline .cine__scrim{
  background:linear-gradient(180deg,
    rgb(from var(--c-000) r g b / 0.30) 0%, rgb(from var(--c-000) r g b / 0.12) 26%, rgb(from var(--c-000) r g b / 0.40) 40%,
    rgb(from var(--c-000) r g b / 0.62) 52%, rgb(from var(--c-000) r g b / 0.78) 70%, rgb(from var(--c-000) r g b / 0.90) 100%)
}
/* At 200% the live title rises into the bright upper wall. Its former 26% stop was too light.
   Keep the frame visible, but protect that entire text region, not only its lower lines. */
.hero-cine.cine--live .cine__scrim{
  background:linear-gradient(180deg,
    rgb(from var(--c-000) r g b / 0.30) 0%, rgb(from var(--c-000) r g b / 0.50) 26%, rgb(from var(--c-000) r g b / 0.62) 40%,
    rgb(from var(--c-000) r g b / 0.72) 52%, rgb(from var(--c-000) r g b / 0.82) 70%, rgb(from var(--c-000) r g b / 0.90) 100%)
}
/* Still mode stacks the copy down the left, so the scrim is heavier on that side. */
.hero-cine.cine--still .cine__scrim,
.cine--timeline.cine--still .cine__scrim{
  background:linear-gradient(90deg, rgb(from var(--c-000) r g b / 0.82) 0%, rgb(from var(--c-000) r g b / 0.68) 55%, rgb(from var(--c-000) r g b / 0.42) 100%)
}

/* 3. Copy and beats ------------------------------------------------------------------------------ */
/* Live mode only: still mode makes the copy position:relative, where a bottom offset would shift it. */
.hero-cine.cine--live .cine__copy,
.cine--timeline.cine--live .cine__copy{bottom:clamp(6.75rem, 13vh, 8.5rem)}
.hero-cine .cine__copy{max-width:min(50rem, 100% - 2rem)}
.hero-cine .cine__beats{align-items:end}
/* The new phrase may fade in; hide the outgoing phrase immediately so rapid scrolling never
   places two readable sentences on top of one another. Still/print copy remains fully visible. */
.hero-cine.cine--live .cine__beat{visibility:hidden}
.hero-cine.cine--live .cine__beat.is-on{visibility:visible}
.hero-cine .cine__beat{
  font-weight:600;
  font-size:clamp(2.6rem, 6.6vw, 6.4rem);
  line-height:0.96;
  letter-spacing:-0.03em;
  text-wrap:balance;
  overflow-wrap:break-word;
  color:var(--white)
}
.hero-cine p.cine__beat{font-size:clamp(1.75rem, 4.2vw, 3.9rem);line-height:1.04;letter-spacing:-0.02em}
.hero-cine.cine--still p.cine__beat{font-size:clamp(1.25rem, 2vw, 1.75rem);line-height:1.4;letter-spacing:-0.01em;max-width:36rem}

.cine--timeline .cine__copy{max-width:min(76rem, 100% - 2rem)}
.cine--timeline #timeline-title{
  font-size:clamp(1.75rem, 3.4vw, 2.9rem);
  line-height:1.02;
  letter-spacing:-0.03em;
  font-weight:600;
  margin:0 0 clamp(0.75rem, 2.4vh, 1.5rem);
  color:var(--white);
  text-wrap:balance
}
.cine--timeline .cine__beats{list-style:none;margin:0;padding:0}
.cine--timeline .cine__beat{font-size:clamp(0.9375rem, 1.35vw, 1.25rem);line-height:1.35;letter-spacing:-0.01em;color:var(--white)}
.timeline-step{display:block;margin-bottom:0.35rem;font-size:0.6875rem;font-weight:750;letter-spacing:0.14em;line-height:1.5;color:var(--c-dbeef8)}
/* Live mode shows all four steps as a stepper and brightens the current one. The engine turns two
   neighbours on at an exact boundary (0.25, 0.50, 0.75), so steps never share one grid cell. */
.cine--timeline.cine--live .cine__beats{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:var(--space-4) var(--space-5)}
.cine--timeline.cine--live .cine__beats>.cine__beat{
  grid-area:auto;
  opacity:0.7;
  transform:none;
  padding-top:var(--space-3);
  border-top:1px solid var(--c-ffffff75);
  transition:opacity 600ms cubic-bezier(.2,.7,.2,1), border-color 600ms cubic-bezier(.2,.7,.2,1)
}
.cine--timeline.cine--live .cine__beats>.cine__beat.is-on{opacity:1;border-top-color:var(--sky)}

/* 4. Credit line (the engine leaves it unstyled) ------------------------------------------------- */
.cine__credit{
  position:absolute;
  left:clamp(1rem, 5vw, 4.5rem);
  bottom:3.25rem;
  max-width:50%;
  margin:0;
  min-height:var(--target-min);
  padding:var(--space-1) 0;
  font-size:0.6875rem;
  line-height:1.45;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--c-b7cddb)
}
.cine--still .cine__credit{position:static;max-width:none;padding:0 clamp(1rem, 5vw, 4.5rem) 2rem}

/* 5. Before the engine mounts, and without JavaScript, the copy reads as plain stacked text ------- */
.cine:not(.cine--live):not(.cine--still) .cine__stage{height:auto;min-height:0}
.cine:not(.cine--live):not(.cine--still) .cine__copy{position:relative;inset:auto;padding:22vh clamp(1rem, 5vw, 4.5rem) 4rem}
.cine:not(.cine--live):not(.cine--still) .cine__beat{opacity:1;transform:none;margin-top:1rem}
.cine:not(.cine--live):not(.cine--still) .cine__skip,
.cine:not(.cine--live):not(.cine--still) .cine__rail{display:none}
.cine:not(.cine--live):not(.cine--still) .cine__credit{position:static;max-width:none;padding:0 clamp(1rem, 5vw, 4.5rem) 2rem}

/* 6. The hero-next band: everything the old hero held besides the film's three lines ------------- */
.hero-next{position:relative;overflow:hidden;isolation:isolate;color:var(--white);background:linear-gradient(118deg,var(--c-061b2d) 0%,var(--c-0b3656) 58%,var(--c-11496b) 100%)}
.hero-next::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(125deg,transparent 40%,var(--c-a9cee812) 40.1%,var(--c-bfdcea04) 61%,transparent 61.1%),linear-gradient(75deg,transparent 58%,var(--c-b5d6e406) 58.1%,transparent 82%)}
.hero-next-grid{max-width:var(--max);margin:auto;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:4%;padding:64px var(--gutter) 60px}
.hero-next-copy{position:relative;z-index:2;min-width:0;padding-bottom:14px}
.hero-next-copy .eyebrow{font-size:10px;color:var(--c-bad8e7);margin-bottom:22px}
.hero-next .hero-description{margin-top:0}
.hero-next .primary{background:var(--silver);color:var(--c-143c55);border-color:var(--c-e4eff5)}
.hero-next .primary:hover{background:var(--white)}
.hero-next .glass{color:var(--c-e4edf3);border-color:var(--c-83a8bd);background:var(--c-0b2b4440)}
.hero-next .glass:hover{background:var(--c-254d69)}
.hero-next-art{position:relative;min-width:0;height:510px;align-self:center}
.hero-next-proof{position:absolute;bottom:5px;left:-6%;z-index:3;display:block;max-width:65%;background:var(--c-e5eef4);color:var(--c-214d68);border:1px solid var(--c-a9c4d8);padding:17px 20px;box-shadow:0 12px 30px var(--c-051a2b40);font-size:10px;line-height:1.7}
.hero-next-proof>span{display:block;font-size:8px;letter-spacing:.14em;color:var(--hero-proof-label);line-height:1.6;margin-bottom:8px}
.hero-next-proof strong{display:block;font-size:14px;line-height:1.45;font-weight:600;letter-spacing:-.015em}
.hero-next-proof>a{display:block;min-height:32px;font-size:9px;line-height:1.6;padding:12px 0 0;margin-top:8px;border-top:1px solid var(--c-aac3d4);color:var(--c-2b6889)}
.hero-next-proof>a:hover{color:var(--c-092f4c);text-decoration:underline;text-underline-offset:3px}
/* Focus rings: the band is dark and the proof card is light (theme.css scopes its rings by .hero, which is gone). */
.hero-next a:focus-visible,
.hero-next button:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-on-dark);outline-offset:5px}
.hero-next .hero-next-proof a:focus-visible{outline-color:var(--focus-ring-on-light)}

/* 7. Anchor targets clear the sticky header (html scroll-padding-top already allows for it) ------- */
#hero-next,
#install-timeline,
#support{scroll-margin-top:var(--space-6)}

/* 8. The visible concept note under the timeline film ------------------------------------------- */
.timeline-note{margin:0;padding:var(--space-4) var(--gutter) var(--space-5);font-size:12px;line-height:1.7;color:var(--c-b7cddb);background:var(--deep)}

/* 9. Breakpoints (mirroring the old hero's) ------------------------------------------------------ */
@media (min-width:1500px){
  .hero-next-grid{padding-top:80px;padding-bottom:78px}
  .hero-next-art{height:540px}
}
@media (max-width:1100px){
  .hero-next-grid{padding-top:56px;padding-bottom:54px;gap:5%}
  .hero-next-art{height:440px}
  .hero-next-proof{bottom:-6px;padding:14px 17px}
}
@media (max-width:900px){
  .hero-next-grid{grid-template-columns:1fr 1fr;gap:6%;padding-top:48px}
  .hero-next .actions{gap:10px}
  .hero-next .button{font-size:12px;padding:12px 15px}
  .hero-next-art{height:390px}
  .hero-next-proof{bottom:0;max-width:65%;font-size:9px;padding:13px 15px}
  .hero-next-proof strong{font-size:12px}
}
@media (max-width:680px){
  .hero-next-grid{display:block;padding:40px var(--gutter) 32px}
  .hero-next-copy{padding-bottom:0}
  .hero-next-copy .eyebrow{font-size:9px;letter-spacing:.17em;margin-bottom:20px}
  .hero-next .actions{gap:11px}
  .hero-next .button{min-height:47px;font-size:12px;padding:12px 17px}
  .hero-next-art{height:405px;max-width:510px;margin:45px auto 10px}
  .hero-next-proof{bottom:0;left:0;max-width:65%;padding:13px 16px;font-size:9px}
  .hero-next-proof strong{font-size:12px}
  .hero-next-proof>a{font-size:8px;padding-top:10px;margin-top:8px}
  .cine--timeline.cine--live .cine__beats{grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--space-3) var(--space-4)}
  .cine--timeline .cine__beat{font-size:0.9375rem}
  .timeline-step{font-size:0.625rem}
}
@media (max-width:370px){
  .hero-next-art{height:365px}
  .hero-next-proof{font-size:8px;max-width:65%;padding:12px 14px}
  .hero-next-proof strong{font-size:12px}
}

/* 10. Reduced motion: the engine shows the still frame; this sheet adds no motion of its own ------ */
.cine--still .cine__beat{transition:none}
@media (prefers-reduced-motion:reduce){
  .cine__beat,
  .cine--timeline.cine--live .cine__beats>.cine__beat{transition:none}
}

/* 11. Print: the still state, every beat, no controls ------------------------------------------- */
@media print{
  .cine,
  .cine .cine__stage{height:auto!important;min-height:0!important;position:static!important}
  .cine{background:var(--white)!important;color:var(--c-173449)!important}
  .cine__scrim,
  .cine__rail,
  .cine__skip,
  .hero-next::before{display:none!important}
  .cine .cine__stage{overflow:visible!important}
  .cine .cine__canvas{
    display:block!important;position:static!important;inset:auto!important;
    width:100%!important;height:auto!important;max-width:100%;aspect-ratio:16 / 9;
    object-fit:contain!important;z-index:auto!important;break-inside:avoid;page-break-inside:avoid
  }
  .cine .cine__beat{transition:none!important;visibility:visible!important}
  .cine__copy{position:static!important;inset:auto!important;max-width:none!important;padding:24px 0 8px!important}
  .cine__beats{display:block!important}
  .cine__beat{opacity:1!important;transform:none!important;margin-top:10px!important;grid-area:auto!important;color:var(--c-173449)!important;border-color:var(--c-173449)!important}
  .hero-cine .cine__beat{font-size:28pt;line-height:1.05}
  .hero-cine p.cine__beat{font-size:13pt;line-height:1.5}
  .hero-cine h1 em{color:var(--c-173449)!important}
  .cine--timeline #timeline-title{font-size:20pt;color:var(--c-173449)!important}
  .cine--timeline .cine__beat{font-size:11pt}
  .cine__credit,
  .timeline-step,
  .timeline-note{position:static!important;color:var(--c-173449)!important;background:var(--white)!important;padding:0!important;max-width:none!important}
  .hero-next{background:var(--white)!important;color:var(--c-173449)!important}
  .hero-next .eyebrow,
  .hero-footer,
  .hero-next-proof,
  .hero-next-proof>span,
  .hero-next-proof>a{color:var(--c-173449)!important}
  .hero-next-grid{display:block;padding:0}
  .hero-next-art{height:auto}
  .brand-glass,
  .field-glass,
  .hero-next-proof{position:static;transform:none;box-shadow:none;margin:12px 0;max-width:none;height:auto}
}