/*
 * High-End 3D Animations page — descent section styles.
 *
 * No separate CSS was captured for this page; styles are reconstructed
 * from the JS's own DOM writes, the live-page measurements, and the
 * conventions shared across the other service pages in site.css.
 *
 * OVERFLOW FIX (source defect):
 *   The live site horizontally overflowed at 390 px. Root cause: the
 *   .dsc-stage element used 100vw for its width, which on mobile includes
 *   the scrollbar gutter (on Android/Chrome) or causes a reflow (iOS).
 *   Additionally the .dsc-ambient video had no explicit constraint.
 *   Fix applied here:
 *     • #descent and .dsc-track carry overflow-x:hidden / clip.
 *     • .dsc-stage uses width:100% (inherits from the track, which is 100%
 *       of its container), never 100vw.
 *     • --dsc-vw (set to clientWidth by the JS) is used for any calc()
 *       that must know the viewport width, rather than the vw unit directly.
 */

/* ── page-level vars and chrome ─────────────────────────────────── */
body.hm-page-high-end-3d-animations {
  --sage:          #052926;
  --ink:           #070d0c;
  --cyan:          #66FCF1;
  --white:         #FFFFFF;
  --teal-surface:  #0a514b;
  --glass-border:  rgba(255,255,255,0.14);
  --text-dim:      rgba(255,255,255,0.66);
  --text-faint:    rgba(255,255,255,0.42);
  --gutter:        clamp(20px,5vw,60px);
  --ease:          cubic-bezier(.22,.61,.36,1);
}
body.hm-page-high-end-3d-animations {
  font-family:          'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:                var(--white);
  background:           var(--ink);
  overflow-x:           hidden;
  -webkit-font-smoothing: antialiased;
  line-height:          1.5;
}
body.hm-page-high-end-3d-animations .skip {
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--cyan);color:#06201e;
  padding:10px 16px;border-radius:0 0 8px 0;font-weight:600;text-decoration:none;
}
body.hm-page-high-end-3d-animations .wall {
  position:fixed;inset:0;z-index:-3;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(102,252,241,0.12) 0%, rgba(102,252,241,0) 45%),
    linear-gradient(180deg, var(--teal-surface) 0%, var(--sage) 28%, #061b1a 58%, var(--ink) 100%);
}
body.hm-page-high-end-3d-animations .wall__glow {
  position:fixed;inset:-20%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(34% 26% at 82% 60%, rgba(102,252,241,0.07), transparent 70%),
    radial-gradient(40% 30% at 18% 30%, rgba(11,42,58,0.45),    transparent 70%);
  animation:dsc-drift 26s var(--ease) infinite alternate;
}
@keyframes dsc-drift {
  0%   { transform:translate3d(0,0,0) scale(1); }
  100% { transform:translate3d(-3%,2%,0) scale(1.08); }
}
body.hm-page-high-end-3d-animations .wall__dust {
  position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.4;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.30), transparent),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(255,255,255,.22), transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,.26), transparent),
    radial-gradient(1.5px 1.5px at 85% 80%, rgba(255,255,255,.18), transparent);
  background-size:600px 600px;
  animation:dsc-rise 40s linear infinite;
}
@keyframes dsc-rise {
  from { background-position:0 0; }
  to   { background-position:0 -600px; }
}
/* The shared #octoCanvas from site.js remains active on this page (coexists). */
body.hm-page-high-end-3d-animations #octoCanvas {
  position:fixed;inset:0;z-index:5;pointer-events:none;width:100vw;height:100vh;
}
@media(prefers-reduced-motion:reduce) {
  body.hm-page-high-end-3d-animations { animation:none!important;transition:none!important;scroll-behavior:auto!important; }
}

/* ── descent section outer shell ───────────────────────────────── */
#descent {
  position:relative;
  /*
   * overflow-x:clip does NOT create a scroll container (unlike hidden),
   * so position:sticky inside still works.
   */
  overflow-x:clip;
}

/* ── scroll track ───────────────────────────────────────────────── */
.dsc-track {
  position:relative;
  /* Height is authored by the section stylesheet: 700vh, matching the source.
     It is choreography — the JS maps that runway onto the film's 13s.

     NO overflow HERE. The track IS the sticky stage's parent, and the comment
     four lines above had it right before this rule contradicted it:
     `overflow-x:hidden` computes `overflow-y:auto`, which makes this element a
     scroll container — so the stage stuck to the TRACK instead of the viewport,
     and since the track never scrolls internally it never stuck at all. The
     film scrolled away with the page instead of holding the screen, which is
     the whole effect. Measured: stage top 0 at every scroll depth on the
     source; 131 → -469 → -1369 → -2869 → -4240 here. #descent above already
     clips the horizontal overflow this was guarding against, with `clip`,
     which creates no scroll container. The source sets no overflow on the
     track either. */
}

/* ── sticky stage ───────────────────────────────────────────────── */
.dsc-stage {
  position:  sticky;
  top:       0;
  /*
   * FIX: was 100vw on the live site. Use 100% (inherits the track's width,
   * which is 100% of the section, which is constrained by the body's
   * overflow-x:hidden). Never 100vw here — that is the overflow source.
   */
  width:     100%;
  height:    100vh;
  height:    100svh;
  overflow:  hidden;
}

/* ── background scrub video ─────────────────────────────────────── */
.dsc-bg {
  position:      absolute;
  inset:         0;
  width:         100%;
  height:        100%;
  object-fit:    cover;
  object-position: center center;
  pointer-events: none;
  display:       block;
}

/* ── ambient loop (audio carrier, visually hidden) ──────────────── */
.dsc-ambient {
  position:      absolute;
  top:           0;
  left:          0;
  width:         1px;
  height:        1px;
  opacity:       0;
  pointer-events: none;
  /* JS controls opacity for the fade transition */
}

/* ── octopus canvas ─────────────────────────────────────────────── */
.dsc-octo {
  position:        absolute;
  top:             0;
  left:            0;
  pointer-events:  none;
  /*
   * width/height in px are set by the JS (computeOctoSize).
   * transform-origin must be top-left so translate3d(cx-half, cy-half, 0)
   * correctly positions the canvas centre at (cx, cy).
   */
  transform-origin: top left;
  will-change:     transform;
  z-index:         2;
}

/* ── hidden video sources (keyer inputs) ────────────────────────── */
.dsc-octo-src,
.dsc-octo-dive {
  position:      absolute;
  top:           0;
  left:          0;
  width:         1px;
  height:        1px;
  opacity:       0;
  pointer-events: none;
  overflow:      hidden; /* belt against any UA default rendering       */
}

/* ── copy bands ─────────────────────────────────────────────────── */
.dsc-line {
  position:    absolute;
  top:         50%;
  left:        50%;
  /*
   * transform is driven entirely by JS: translate(-50%, calc(-50% + Npx))
   * Initial state set by JS on boot; until then opacity:0 hides the element.
   */
  opacity:     0;
  text-align:  center;
  width:       min(92vw, 860px);
  pointer-events: none; /* JS sets pointer-events on .dsc-cta, not .dsc-line */
  z-index:     3;
}
.dsc-line h1,
.dsc-line h2 {
  font-size:    clamp(32px, 6.5vw, 82px);
  font-weight:  700;
  letter-spacing: -.03em;
  line-height:  1.05;
  margin-bottom: 16px;
}
.dsc-line p {
  font-size:  clamp(15px, 1.6vw, 19px);
  font-weight: 300;
  color:       var(--text-dim);
  max-width:   46ch;
  margin:      0 auto;
}

/* ── scroll cue ─────────────────────────────────────────────────── */
.dsc-cue {
  position:    absolute;
  bottom:      clamp(28px, 5vh, 52px);
  left:        50%;
  transform:   translateX(-50%);
  z-index:     3;
  pointer-events: none;
  display:     flex;
  flex-direction: column;
  align-items: center;
  gap:         10px;
  color:       var(--text-faint);
  font-size:   12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.dsc-cue__arrow {
  width:        24px;
  height:       24px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform:    rotate(45deg);
  animation:    dsc-cue-bob 1.4s var(--ease) infinite;
}
@keyframes dsc-cue-bob {
  0%, 100% { transform:rotate(45deg) translate(0,0); }
  50%       { transform:rotate(45deg) translate(4px,4px); }
}
@media(prefers-reduced-motion:reduce) {
  .dsc-cue__arrow { animation:none; }
}

/* ── call to action ─────────────────────────────────────────────── */
.dsc-cta {
  position:      absolute;
  bottom:        clamp(36px, 6vh, 60px);
  left:          50%;
  transform:     translateX(-50%);
  z-index:       4;
  /* pointer-events driven by JS */
  pointer-events: none;
  text-align:    center;
}

/* ── back-to-top button ─────────────────────────────────────────── */
.dsc-totop {
  position:     fixed;  /* or absolute inside .dsc-stage — fixed is simpler */
  bottom:       clamp(20px, 3vh, 32px);
  right:        clamp(16px, 2.5vw, 28px);
  z-index:      10;
  width:        48px;
  height:       48px;
  border-radius: 50%;
  border:       1px solid var(--glass-border);
  background:   rgba(255,255,255,.10);
  color:        var(--white);
  cursor:       pointer;
  display:      grid;
  place-items:  center;
  opacity:      0;
  transform:    translateY(12px);
  pointer-events: none;
  transition:   opacity .4s var(--ease), transform .4s var(--ease);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter:         blur(8px);
}
.dsc-totop.is-on {
  opacity:       1;
  transform:     translateY(0);
  pointer-events: auto;
}
.dsc-totop:hover {
  border-color: var(--cyan);
  color:        var(--cyan);
}
.dsc-totop svg {
  width:  20px;
  height: 20px;
  display: block;
}

/* ── reduced-motion overrides ───────────────────────────────────── */
/*
 * When prefers-reduced-motion is set the JS shows all .dsc-lines at
 * opacity:1, seeks the bg video to a representative frame, and returns
 * before starting the RAF loop. These rules ensure the copy is readable
 * without JS (e.g. noscript) as well.
 */
@media(prefers-reduced-motion:reduce) {
  .dsc-line     { opacity:1 !important; transform:translate(-50%,-50%) !important; }
  .dsc-cue      { display:none; }
  .dsc-ambient  { display:none; }
}

/* ── mobile adjustments ─────────────────────────────────────────── */
@media(max-width:560px) {
  .dsc-line h1,
  .dsc-line h2 { font-size: clamp(26px, 8vw, 42px); }
  .dsc-line p  { font-size: 14px; }
}