/* =====================================================================
 * Static ambient graphics for KH Portfolio.
 *
 * Every sprite here is a layout element with a fixed position, width,
 * and height taken from Figma file DzsLCogHGGEym6WYjlOpvD, node 12:2
 * (Ambient / Fish + Plankton) as placed inside node 2:2 (Home).
 *
 * Nothing in this file animates. Nothing chooses a position or scale.
 * Placement is authored: read the node id on each sprite for its
 * Figma provenance.
 *
 * Motion, if any, belongs in motion.css.
 * ===================================================================== */


/* -------------------- Page-level overscroll containment -------------- */
/* The seabed sparkle band is authored 1503px wide on a 1440 frame — it */
/* bleeds a bit past both viewport edges. Without clipping, that bleed  */
/* creates horizontal scroll and rubber-band overscroll. Kill both at   */
/* the root scrolling container so the page is anchored and no dark     */
/* gap ever appears at the edges.                                       */

html,
body {
  overscroll-behavior: none;    /* no rubber-band on any axis           */
  /* Horizontal overflow is intentionally NOT clipped: the layout is    */
  /* pinned to the 1440 design width in layout.css, so at narrower      */
  /* viewports the browser needs to scroll horizontally to reach the    */
  /* right edge. Clipping here would suppress that scrollbar.           */
}


/* -------------------- Ambient container -------------------- */
/* The ambient overlay must NOT take layout space. In Figma node 12:2   */
/* (Ambient / Fish + Plankton, h=4372) sits at (0,0) in the 2:2 frame   */
/* and OVERLAPS the top 148px of the footer. We reproduce that by       */
/* absolutely positioning .ambient at the origin of .ocean so it        */
/* extends past .page's flow bottom and covers the top of .footer,      */
/* just like the Figma frame. .page stays at its natural flow height    */
/* (~4221) so .footer starts at the Figma-authored y (~4224).            */

.ocean {
  position: relative;
  z-index: 1;                  /* Stacking context so .ambient at z:-1     */
                               /* sits above .ocean's bg gradient but      */
                               /* below page content.                       */
                               /* NB: .footer is z:2 (below), which puts   */
                               /* .footer content ABOVE .ocean — needed    */
                               /* because the Figma footer wave (399:11)   */
                               /* lives in .ocean and must sit BEHIND the  */
                               /* footer's heading, buttons, sign-off, and */
                               /* .footer__ambient seagrass/plankton. The  */
                               /* ambient sprites in .ocean that used to   */
                               /* need to overflow into the footer top all */
                               /* sit at y < 4000 (well above the footer  */
                               /* box), and the sparkle band at y=4184     */
                               /* doesn't overlap any .footer content in y,*/
                               /* so nothing gets hidden by this flip.     */
}

.footer {
  z-index: 2;                  /* Above .ocean (z:1) so footer content    */
                               /* paints in front of the wave that lives   */
                               /* inside .ocean. See .ocean note above.    */
}

.ambient {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--layout-max);
  height: 4372px;              /* h of node 12:2 in Figma */
  z-index: -1;
  pointer-events: none;
}

.ambient > * {
  position: absolute;
}


/* -------------------- Underwater details -------------------- */
/* A single rasterized SVG containing 4 wide light rays, rising        */
/* bubbles, drifting particles, and the surface line — baked in Figma.  */

.ambient__underwater {
  display: block;
}


/* -------------------- Light rays (55:3478, 55:3479) -------------------- */
/* Two additional soft vertical shafts that sit above the underwater    */
/* details. Each wrapper flex-centers a rotated gradient rect, matching */
/* Figma's flex-none rotate group.                                      */

.ambient__ray-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.ambient__ray {
  display: block;
  height: 900px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0)    100%
  );
  transform-origin: center center;
}


/* -------------------- Stars + sparkles -------------------- */
/* Wrappers carry position + Figma bounding box; inner <img> keeps      */
/* the sprite's intrinsic size (which matches Figma's pre-rotation box) */
/* and rotates around its own center. Same pattern for the small        */
/* sparkle marks (Union sprites).                                        */

.ambient__pos {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.ambient__star,
.ambient__sparkle {
  display: block;
  transform-origin: center center;
  max-width: none;
}


/* -------------------- Burst bubble -------------------- */

.ambient__bubble {
  display: block;
}


/* -------------------- Fish -------------------- */
/* Each fish (or fish school) sits at its Figma x/y/w/h. Schools are   */
/* baked single SVGs — one image per school node.                       */

.ambient__fish {
  display: block;
  max-width: none;
}


/* -------------------- Plankton -------------------- */
/* 16 small plankton sprites (12:30–12:45). Each SVG's intrinsic size   */
/* is larger than the Figma dot bbox because it carries a baked drop-   */
/* shadow glow. We render at intrinsic size and position by the dot's   */
/* CENTER so the glow keeps its space and the dot lands on the authored */
/* Figma coordinate.                                                     */

.ambient__plankton {
  display: block;
  max-width: none;
  transform: translate(-50%, -50%);
}


/* -------------------- Seabed sparkle band (55:4807 Glisten) -------- */
/* Figma-authored 1503×134 group at (-32, 4184) in node 2:2 — it       */
/* bleeds 32px past the 1440 frame on each side. Sits as a sibling of  */
/* .ambient (not inside it) so it isn't capped at 1440. Width scales   */
/* with viewport at Figma's 1503/1440 ratio so the same bleed reads at */
/* every screen size and no sparkle is ever cut mid-shape.              */

.ambient__seabed {
  position: absolute;
  top: 4184px;
  left: 50%;
  transform: translateX(-50%);
  width: 1503px;               /* 1440 + 32px bleed each side */
  height: auto;                /* preserves the Figma aspect ratio */
  max-width: none;
  z-index: -1;                 /* behind page content, above ocean bg */
  pointer-events: none;
  display: block;
}


/* -------------------- Night Aquarium Footer wave (399:11) ---------- */
/* Figma-authored 1503.41 × 583.78 vector at (-32, -13) inside node   */
/* 58:2 (footer, y=4224). It carries the same #123B55 → #081C33      */
/* gradient the footer's own fill used to render, so nothing else has */
/* to paint the footer background.                                     */
/*                                                                     */
/* Sibling of .ambient__seabed (not a child of .footer) so it lives   */
/* in .ocean's z:1 layer and can paint above the ambient overflow     */
/* that already covers the top ~148px of .footer. Placed BEFORE the   */
/* seabed in DOM so the sparkle band paints on top and the sparkles   */
/* straddle the wave edge, matching Figma.                             */
/*                                                                     */
/* .footer__wave-crop is a fixed-height, overflow-hidden container    */
/* that clips the wave to the footer's vertical range. Without it,    */
/* the wave — sized at 104.375vw with height:auto to preserve aspect  */
/* — grows TALLER than the 563 footer on viewports wider than 1440    */
/* (e.g., ~778 tall at 1920vw) and extends body scroll ~200px past    */
/* the sand bar, showing a dark navy strip. Cropping at 584 = 21      */
/* (crest above footer top) + 563 (footer height) drops the wave's    */
/* bottom edge exactly at the sand bar.                                */
/*                                                                     */
/* top: 4203 = 4224 (footer y) − 21 (SVG's own upward bleed above     */
/* the flat footer edge). That way the SVG's own geometry lands where */
/* Figma authored it: the wave ranges from y=4203 to y=4242 with the  */
/* old flat boundary at 4224 running through its middle. Width scales */
/* at Figma's 1503/1440 ratio for the same 32-px-each-side bleed as   */
/* the sparkle band.                                                   */

.footer__wave-crop {
  position: absolute;
  top: 4203px;
  left: 50%;
  transform: translateX(-50%);
  width: 1503px;               /* 1440 + 32px bleed each side          */
  height: 584px;               /* 21 crest + 563 footer height         */
  overflow: hidden;            /* clip wave overflow on wide viewports */
  pointer-events: none;
  z-index: -1;                 /* same layer as .ambient — above the   */
                               /* ocean bg, below .page content        */
}

.footer__wave {
  display: block;
  width: 100%;
  height: auto;                /* preserves the Figma aspect ratio     */
  max-width: none;
}


/* -------------------- Depth scrubber (11:2 UI / Depth Scrubber) ---- */
/* Left rail: depth label + 8 stops, vertically stacked, centered, with */
/* a 9px gap between items. Pinned to the VIEWPORT (not the 1440       */
/* layout) so it stays at a consistent screen edge regardless of        */
/* horizontal scroll — at narrow widths the page scrolls beneath it     */
/* rather than shoving it around. z-index sits above page content and  */
/* below the nav (z:100).                                                */
/*                                                                       */
/* Positioning: dot centers land at viewport x=64 (matching Figma node  */
/* 2:2's "9 m" state). The label is fixed at 68px wide (fits "100 m"   */
/* — measured 64.89 at 20/1.6 Scandia Medium — with a small buffer) so */
/* the flex container's width is stable across every depth reading and */
/* the dots don't drift horizontally as the digits change. Container    */
/* left = 30 = 64 (dot center) - 34 (half the fixed label width).       */

.ambient__scrubber {
  position: fixed;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  overflow: hidden;
  z-index: 5;
}

.ambient__scrubber-label {
  margin: 0;
  width: 68px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 1.6px;
  line-height: normal;
  color: #ffffff;
  opacity: 0.85;
  white-space: nowrap;
}

.ambient__scrubber-stop {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
}

.ambient__scrubber-stop--active {
  width: 10px;
  height: 10px;
}

.ambient__scrubber-stop img {
  display: block;
  width: 100%;
  height: 100%;
}


/* -------------------- Footer night details (58:50) ----------------- */
/* Overlay inside .footer with 8 seaweeds + 12 bio-plankton sprites at */
/* their Figma-authored positions (footer-relative coords).             */

.footer__ambient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.footer__seaweed {
  position: absolute;
  display: block;
  max-width: none;
}


/* Bio plankton: same centered-on-Figma-coord treatment as ocean       */
/* plankton — the SVG carries a wider glow than the dot itself.        */

.footer__bio-plankton {
  position: absolute;
  display: block;
  max-width: none;
  transform: translate(-50%, -50%);
}