/* Hero — standalone rebuild of the Slider Revolution "Deep Dive Ocean Water" scene */

:root {
  --i-groupW: 500px; --i-imgW: 976px; --i-imgH: 777px;
  --i-imgX: -208px;  --i-imgY: -142px;
  --i-imgDX: 17px;   --i-imgDY: 43px;
  --i-glowW: 300px;  --i-glowY: 0px;  --i-glowB: 150px;
  --i-ovH: 500px;
  --scale: 1;        /* layout ratio for the active breakpoint x viewport fit */
  --fit: 1;          /* viewport fit only */
  --title-scale: 1;
  --body-scale: 1;
  --btn-scale: 1;
  --desc-w: 640px;
  --sub-off: 150px;
  --grid-top: 0px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: #082b31; }

body {
  background: #082b31;
  color: #fff;
  font-family: 'Roboto Mono', ui-monospace, monospace;
  -webkit-font-smoothing: antialiased;
  /* `clip` rather than `hidden`: `hidden` would make body a scroll container
     and break the hero's position: sticky pinning. */
  overflow-x: clip;
}

/* Scroll runway: the hero stays pinned for the length of the timeline. */
#stage { position: relative; }

#hero {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  /* Matches the slider's global perspective:600 setting. */
  perspective: 600px;
  perspective-origin: 50% 50%;
  background: linear-gradient(
    rgba(61,117,116,1)   0%,
    rgba(189,138,121,1) 28%,
    rgba(254,117,39,1)  45%,
    rgba(8,43,49,1)     53%,
    rgba(12,18,18,1)   100%
  );
}

/* Horizontal placement is set inline by place(); layers that are not
   individually positioned stay full-bleed from the left edge. */
#hero .layer {
  position: absolute;
  left: 0;
  will-change: transform, opacity, filter;
  transform-style: preserve-3d;
}

#hero canvas.pw {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* ---- z-order, taken from the original layer stack ---- */
#island-group { z-index: 6; }
#wave-2       { z-index: 7;  }
#ov-top       { z-index: 8;  }
#ov-bottom    { z-index: 9;  }
#btn-layer    { z-index: 10; }
#desc-layer   { z-index: 11; }
#discovery    { z-index: 12; }
#bokeh        { z-index: 13; }
#wave-1       { z-index: 14; mix-blend-mode: lighten; }
#intro-group  { z-index: 15; }
#scroll-hint  { z-index: 16; }

/* ---- full-bleed canvases ---- */
#wave-1, #wave-2, #bokeh {
  left: 0;
  width: 100%;
  pointer-events: none;
}
#wave-1, #wave-2 { top: 0; height: 100%; }
#bokeh { height: 60%; }

/* ---- island ---- */
#island-group {
  width: var(--i-groupW);
  height: var(--i-groupW);
  pointer-events: none;
}
#island-img {
  position: absolute;
  width: var(--i-imgW);
  height: var(--i-imgH);
  left: var(--i-imgX);
  top: var(--i-imgY);
  /* The image's settled frame offset in the original. */
  transform: translate(var(--i-imgDX), var(--i-imgDY));
  object-fit: contain;
}
/* The warm halo behind the island. */
#island-glow {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--i-glowY));
  width: var(--i-glowW);
  height: var(--i-glowW);
  margin-left: calc(var(--i-glowW) / -2);
  margin-top: calc(var(--i-glowW) / -2);
  border-radius: 300px;
  background: linear-gradient(
    rgba(240,198,16,1)   0%,
    rgba(225,108,97,1)  50%,
    rgba(222,90,113,0.8) 60%,
    rgba(222,90,113,0)  100%
  );
  box-shadow: 0 0 var(--i-glowB) #f0c610;
}

/* ---- gradient overlays ---- */
#ov-top, #ov-bottom {
  left: 0;
  width: 100%;
  height: var(--i-ovH);
  pointer-events: none;
}
#ov-top {
  top: 0;
  background: linear-gradient(0deg,
    rgba(254,117,39,0)    0%,
    rgba(254,117,39,0.22) 30%,
    rgba(8,43,49,0.75)   100%);
}
#ov-bottom {
  bottom: 0;
  background: linear-gradient(0deg,
    rgba(11,16,19,1)   0%,
    rgba(11,16,19,1)  30%,
    rgba(11,16,19,0) 100%);
}

/* ---- type ---- */
.title {
  font-family: 'Damion', cursive;
  font-weight: 400;
  font-size: calc(150px * var(--title-scale));
  line-height: calc(200px * var(--title-scale));
  padding: 0 calc(30px * var(--title-scale));
  white-space: nowrap;
  text-align: center;
}
.body-text {
  font-family: 'Roboto Mono', monospace;
  font-weight: 300;
  color: rgba(255,255,255,0.5);
  font-size: calc(20px * var(--body-scale));
  line-height: calc(30px * var(--body-scale));
}

#intro-group { width: calc(1000px * var(--scale)); pointer-events: none; }
#intro-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
#intro-sub {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + var(--sub-off)));
  max-width: 92vw;
  text-align: center;
}

#discovery { pointer-events: none; }
#desc-layer { width: min(var(--desc-w), 92vw); text-align: center; }

#btn-layer a {
  display: inline-block;
  font-family: 'Roboto Mono', monospace;
  font-weight: 300;
  font-size: calc(17px * var(--btn-scale));
  line-height: calc(50px * var(--btn-scale));
  padding: 0 calc(30px * var(--btn-scale));
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.2);
  background: transparent;
  transition: border-color .3s ease;
  white-space: nowrap;
}
#btn-layer a:hover { border-color: #fff; }

/* ---- scroll hint ---- */
#scroll-hint {
  width: calc(10px * var(--scale));
  height: calc(250px * var(--scale));
  pointer-events: none;
}
#hint-track {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: calc(250px * var(--scale));
  margin-left: -0.5px;
  background: rgba(255,255,255,0.2);
}
#hint-dot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: calc(50px * var(--scale));
  margin-left: -0.5px;
  border-radius: 10px;
  background: #fff;
  animation: hint 4s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes hint {
  0%   { transform: translateY(0)    scaleY(0); opacity: 1; }
  25%  { transform: translateY(30px) scaleY(1); opacity: 1; }
  75%  { transform: translateY(220px) scaleY(1); opacity: 1; }
  100% { transform: translateY(250px) scaleY(0); opacity: 1; }
}

/* ---- what follows the hero ---- */
#after {
  position: relative;
  z-index: 2;
  height: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #0b1013;
  color: rgba(255,255,255,0.55);
  font-size: 15px;
  line-height: 1.8;
}

@media (prefers-reduced-motion: reduce) {
  #hint-dot { animation: none; }
}