/* ============================================================
   SHIP OR DIE — hero scene + scroll choreography
   Driven by CSS vars set on #top by sod/scene.js:
   --p  overall progress 0..1
   --storm 0..1   --rain 0..1   --flash 0..1
   --pirate-x/-y/-rot   --splash 0..1
   --ship-op  --die-op  --cue-op
   ============================================================ */

#top {
  position: relative;
  height: 3240px;            /* tall scroll track */
  background: var(--bg-deep);
}

.hero-stage {
  position: sticky;
  top: 0;
  height: 900px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 6%, #0a1a2b 0%, #061321 38%, var(--bg-deep) 72%);
}

/* ---------------- sky ---------------- */
.sky { position: absolute; inset: 0; z-index: 1; }

.stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(243,230,201,.9), transparent),
    radial-gradient(1.5px 1.5px at 28% 30%, rgba(243,230,201,.7), transparent),
    radial-gradient(1.5px 1.5px at 47% 12%, rgba(243,230,201,.8), transparent),
    radial-gradient(1.5px 1.5px at 64% 26%, rgba(243,230,201,.6), transparent),
    radial-gradient(1.5px 1.5px at 78% 14%, rgba(243,230,201,.85), transparent),
    radial-gradient(1.5px 1.5px at 88% 32%, rgba(243,230,201,.6), transparent),
    radial-gradient(1.5px 1.5px at 8% 40%, rgba(243,230,201,.55), transparent),
    radial-gradient(1.5px 1.5px at 38% 44%, rgba(243,230,201,.5), transparent),
    radial-gradient(1.5px 1.5px at 71% 42%, rgba(243,230,201,.5), transparent);
  opacity: calc(0.9 - var(--storm) * 0.75);
  transition: opacity .3s;
}

.moon {
  position: absolute;
  top: 81px; right: 13vw;
  width: 120px; height: 120px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 36%, #fbf3da 0%, #efe1bb 46%, #d9c79a 72%, #c4b487 100%);
  box-shadow:
    0 0 0 10px rgba(243,230,201,0.06),
    0 0 60px 18px rgba(243,230,201,0.20),
    inset -14px -10px 0 rgba(150,135,98,0.30);
  image-rendering: pixelated;
  opacity: calc(1 - var(--storm) * 0.55);
  filter: brightness(calc(1 - var(--storm) * 0.25));
  z-index: 1;
}
/* moon craters */
.moon::before, .moon::after {
  content: ""; position: absolute; border-radius: 50%;
  background: rgba(168,150,107,0.45);
}
.moon::before { width: 22px; height: 22px; top: 30px; left: 26px; }
.moon::after  { width: 14px; height: 14px; top: 64px; left: 60px; box-shadow: 18px -34px 0 -3px rgba(168,150,107,0.4); }

.cloud {
  position: absolute;
  z-index: 2;
  background: #0c1d2e;
  box-shadow:
    0 0 0 0 #0c1d2e,
    -34px 14px 0 -6px #0c1d2e,
    34px 12px 0 -4px #0c1d2e,
    -64px 20px 0 -10px #0b1a29,
    64px 18px 0 -8px #0b1a29;
  opacity: calc(0.5 + var(--storm) * 0.45);
  filter: brightness(calc(1 + var(--storm) * 0.1));
}
.cloud-1 { width: 140px; height: 34px; border-radius: 30px; top: 108px; left: 14vw; animation: cloudDrift 46s linear infinite; }
.cloud-2 { width: 110px; height: 28px; border-radius: 26px; top: 180px; right: 26vw; animation: cloudDrift 62s linear infinite reverse; }
@keyframes cloudDrift { to { transform: translateX(60px); } }

/* ---------------- storm overlay ---------------- */
.storm {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,16,28,0) 0%, rgba(8,16,28,.35) 55%, rgba(4,9,16,.7) 100%),
    radial-gradient(120% 80% at 50% 0%, rgba(20,36,54,.5), transparent 60%);
  opacity: var(--storm);
  transition: opacity .25s;
}
.storm-flash {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background:
    radial-gradient(70% 60% at 60% 18%, rgba(220,235,255,.9), rgba(180,210,240,.25) 30%, transparent 60%);
  mix-blend-mode: screen;
  opacity: var(--flash, 0);
}
.storm-bolt {
  position: absolute; top: 0; left: 0; right: 0; height: 540px; z-index: 6; pointer-events: none;
  background: url("https://www.ship-or-die.com/landing/pirate/storm-bg.png") center top / cover no-repeat;
  mix-blend-mode: screen;
  opacity: calc(var(--flash, 0) * 0.9);
}

/* ---------------- rain ---------------- */
.rain {
  position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden;
  mask-image: linear-gradient(180deg, black 0%, black 70%, transparent 100%);
  opacity: var(--rain, 0);
  transition: opacity .32s steps(4, end);
}
.rain span {
  position: absolute;
  width: 1.5px;
  height: var(--h, 16px);
  left: var(--x, 0);
  top: var(--t, -10%);
  opacity: var(--o, .45);
  background: linear-gradient(180deg, transparent, #d8f0f6);
  box-shadow: 0 0 6px rgba(216,240,246,.48);
  transform: rotate(20deg);
  animation: rainDrop var(--dur,720ms) linear infinite;
  animation-delay: var(--delay, 0ms);
}
@keyframes rainDrop { to { translate: var(--drift,-20vw) 1062px; } }

/* ---------------- sea ---------------- */
.seascape { position: absolute; left: 0; right: 0; bottom: 0; height: 504px; z-index: 4; }

.wave {
  position: absolute; left: -10%; right: -10%; bottom: 0;
  background-repeat: repeat-x;
  background-position: bottom center;
  image-rendering: pixelated;
}
.wave-back {
  bottom: 63px;
  height: 234px;
  opacity: .8;
  background-image: url("https://www.ship-or-die.com/landing/pirate/wave-tile.png");
  background-size: auto 100%;
  filter: brightness(.7) saturate(.85);
  animation: waveRoll 18s linear infinite;
}
.wave-front {
  bottom: 0;
  height: 234px;
  background-image: url("https://www.ship-or-die.com/landing/pirate/wave-tile.png");
  background-size: auto 100%;
  animation: waveRoll 11s linear infinite reverse;
}
@keyframes waveRoll { to { background-position-x: 512px; } }

.sea-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 144px; z-index: 5;
  background: linear-gradient(180deg, #071624 0%, #04101b 100%);
}

/* ---------------- ship (right side) ---------------- */
.ship-wrap {
  position: absolute;
  right: max(0px, calc(50% - 46rem));
  bottom: 99px;
  width: min(720px, 53vw);
  z-index: 5;
  --bob-amp: calc(8px + var(--storm) * 22px);
  --tilt: calc(1.5deg + var(--storm) * 3deg);
}
.ship {
  width: 100%;
  transform-origin: 50% 90%;
  animation: shipBob 4.2s ease-in-out infinite;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.45));
}
@keyframes shipBob {
  0%,100% { transform: translateY(0) rotate(calc(var(--tilt) * -1)); }
  50%     { transform: translateY(calc(var(--bob-amp) * -1)) rotate(var(--tilt)); }
}
.ship svg, .ship img { width: 100%; height: auto; display: block; }
.ship-image { image-rendering: pixelated; }

/* crew sprites riding the deck */
.crew-mate {
  position: absolute;
  height: auto;
  image-rendering: pixelated;
  z-index: 6;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.5));
  animation: crewIdle 3.4s ease-in-out infinite;
}
@keyframes crewIdle { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-3px);} }
.captain-mate {
  position: absolute;
  height: auto;
  image-rendering: pixelated;
  z-index: 7;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.55));
}

/* the doomed plank pirate */
.plank-pirate {
  position: absolute;
  z-index: 6;
  width: 62px; height: 62px;
  left: 50%;
  bottom: 198px;
  opacity: var(--slacker-op, 0);
  transform:
    translateX(calc(-50% + var(--pirate-x, 0px)))
    translateY(var(--pirate-y, 0px))
    rotate(var(--pirate-rot, 0deg));
  transform-origin: 50% 100%;
  will-change: transform;
}
.splash {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 135px;
  width: 120px; height: 60px;
  transform: translateX(calc(-50% + var(--splash-x, 150px))) scale(var(--splash-scale, .6));
  transform-origin: 50% 100%;
  opacity: var(--splash, 0);
}

/* ---------------- top nav ---------------- */
.hero-nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem clamp(1.25rem, 4vw, 2.5rem);
}
.brand { display: inline-flex; align-items: center; gap: .6rem; }
.brand-mark {
  width: 34px; height: 34px; flex: none; display: block;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.brand-text { display:flex; align-items:baseline; gap:.85rem; flex-wrap:wrap; }
.brand strong { font-family:'Pirata One', serif; font-weight:400; font-size: 1.7rem; letter-spacing:.01em; color: var(--bone); line-height:1; white-space:nowrap; }
.brand small { display:none; font-size:.6rem; letter-spacing:.18em; color: var(--mute-4); line-height:1; text-transform:uppercase; }
.hero-nav-actions { display: flex; align-items: center; gap: .5rem; }
@media (min-width:640px){
  .brand-mark { width:48px;height:48px; }
  .brand strong { font-size: 2.1rem; }
  .brand small { display:block; }
}

/* ---------------- hero copy (left column) ---------------- */
.hero-copy {
  position: absolute; inset: 0; z-index: 15;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  text-align: left;
  padding: 0 clamp(1.25rem, 5vw, 3.75rem);
  pointer-events: none;
}
.ship-copy { opacity: var(--ship-op, 1); }
.ship-copy h1 {
  margin: 0;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(5rem, 17vw, 15rem);
  line-height: .8;
  letter-spacing: .005em;
  color: var(--bone);
  text-shadow: 0 6px 0 rgba(0,0,0,.5), 0 0 40px rgba(212,165,86,.18);
}
.launch-copy {
  display: block;
  margin-top: .6rem;
  font-family: 'Geist Mono', monospace;
  font-weight: 500;
  font-size: clamp(1.2rem, 3vw, 2.6rem);
  letter-spacing: .01em;
  text-transform: none;
  color: var(--bone-soft);
}
.scroll-cue {
  position: absolute;
  left: clamp(20rem, 41vw, 47rem);
  top: 47%;
  z-index: 16;
  display: flex; align-items: center; gap: .85rem;
  opacity: var(--cue-op, 1);
  pointer-events: none;
}
.scroll-cue__hand {
  width: 44px; height: 44px;
  image-rendering: pixelated;
  animation: cueBob 1.6s ease-in-out infinite;
}
@keyframes cueBob { 0%,100%{ transform: translateY(-5px);} 50%{ transform: translateY(5px);} }
.scroll-cue span {
  font-family: 'Geist Mono', monospace;
  font-size: clamp(1.05rem, 1.6vw, 1.5rem);
  letter-spacing: .02em;
  color: var(--mute-3);
  text-transform: lowercase;
}

/* the DIE consequence copy crossfades in, same left column */
.consequence-copy {
  position: absolute;
  left: 0; right: auto; top: 50%;
  transform: translateY(-50%);
  padding: 0 clamp(1.25rem, 5vw, 3.75rem);
  display: flex; flex-direction: column; align-items: flex-start; gap: .8rem;
  opacity: var(--die-op, 0);
}
.consequence-copy strong {
  display: flex; flex-direction: column; align-items: flex-start; line-height: .8;
  font-weight: 400;
}
.consequence-copy__or {
  font-family: 'Pirata One', serif;
  font-size: clamp(1.6rem, 4vw, 3rem);
  color: var(--mute-3);
  letter-spacing: .04em;
}
.consequence-copy__die {
  font-family: 'Anton', sans-serif;
  font-size: clamp(5rem, 17vw, 15rem);
  color: var(--red);
  letter-spacing: .005em;
  text-shadow: 0 6px 0 rgba(0,0,0,.6), 0 0 50px rgba(226,105,94,.4);
}
.consequence-copy > span {
  font-family: 'Geist Mono', monospace;
  font-size: clamp(.9rem, 2vw, 1.4rem);
  letter-spacing: .04em;
  text-transform: none;
  color: var(--bone-soft);
}

/* ---------------- activity feed toast ---------------- */
.activity-toast {
  position: absolute; left: clamp(1rem, 4vw, 2.5rem); bottom: clamp(1.25rem, 45px, 2.5rem);
  z-index: 25;
  display: flex; align-items: center; gap: .8rem;
  max-width: 22rem;
  padding: .7rem .9rem;
  background: rgba(27,13,19,.82);
  border: 1px solid var(--red-btn);
  box-shadow: 0 14px 30px rgba(0,0,0,.4);
  backdrop-filter: blur(2px);
}
.activity-toast::after {
  content: ""; position: absolute; top: 8px; right: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff3b3b; box-shadow: 0 0 8px 2px rgba(255,59,59,.6);
  animation: livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }
.activity-toast img { width: 34px; height: 34px; flex:none; image-rendering:pixelated; }
.activity-toast__body { font-family:'Geist Mono',monospace; }
.activity-toast__text { font-size:.78rem; line-height:1.4; color: var(--bone-soft); }
.activity-toast__text b { color: var(--bone); }
.activity-toast__time { margin-top:.25rem; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color: var(--mute-4); }
@media (max-width: 700px){ .scroll-cue{ display:none; } .activity-toast{ max-width: 16rem; } }

@media (prefers-reduced-motion: reduce) {
  .ship, .cloud-1, .cloud-2, .wave-back, .wave-front, .scroll-cue__hand { animation: none !important; }
}