/* =============================================================
   Scenes 1-5: Storm → Rainbow
   ============================================================= */

/* ====== ACT 1 — BECALMED ====== */
.act--becalmed {
  background: linear-gradient(180deg, #f5efe4 0%, #e8dfcc 100%);
  min-height: 100vh;
  display: grid;
  place-items: center;
}
.becalmed-wrap {
  position: relative;
  width: 100%;
  text-align: center;
  z-index: 2;
}
.becalmed-title {
  display: block;
}
.becalmed-title em {
  font-style: italic;
  color: var(--lw-terra);
  font-variation-settings: "opsz" 144;
}
.becalmed-sub {
  margin-top: 32px;
  font-family: var(--lw-font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--lw-ink-3);
}

.horizon {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50vh;
  background:
    linear-gradient(180deg, transparent 0%, rgba(200,180,140,0.15) 60%, rgba(160,140,100,0.3) 100%);
  z-index: 1;
}
.horizon::after {
  content: "";
  position: absolute;
  bottom: 30%;
  left: 0; right: 0;
  height: 1px;
  background: var(--lw-ink-3);
  opacity: .2;
}
.tiny-boat {
  position: absolute;
  bottom: calc(30% + 2px);
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  animation: tiny-boat-sway 4s ease-in-out infinite;
}
@keyframes tiny-boat-sway {
  0%,100% { transform: translateX(-50%) rotate(-2deg); }
  50%     { transform: translateX(-50%) rotate(2deg); }
}

.scroll-hint {
  position: absolute;
  bottom: 40px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--lw-font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--lw-ink-3);
  animation: scroll-hint 2s ease-in-out infinite;
}
@keyframes scroll-hint {
  0%,100% { transform: translateX(-50%) translateY(0); opacity: 0.5; }
  50%     { transform: translateX(-50%) translateY(8px); opacity: 1; }
}

/* ====== ACT 2 — THE STORM BREAKS ====== */
.act--storm {
  background: #0a0e14;
  min-height: 200vh; /* tall so scroll timeline has range */
  color: var(--lw-paper);
  view-timeline-name: --storm;
  view-timeline-axis: block;
  position: relative;
}
.storm-sky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background:
    radial-gradient(ellipse 1200px 600px at 50% -20%, rgba(80,90,120,.5), transparent 60%),
    linear-gradient(180deg, #1a2030 0%, #0a0e14 50%, #050608 100%);
  animation: sky-darken linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 60%;
}
@keyframes sky-darken {
  from { filter: brightness(1.2) saturate(0.8); }
  to   { filter: brightness(0.4) saturate(1.2); }
}

/* Rain — CSS generated streaks */
.rain {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.rain-layer {
  position: absolute;
  inset: -10% -5%;
  background-image:
    linear-gradient(180deg, transparent 0%, rgba(180,200,230,0.35) 50%, transparent 100%);
  background-size: 1px 60px;
  background-repeat: repeat;
  animation: rain-fall 0.5s linear infinite;
  opacity: 0;
}
.rain-layer-2 {
  background-size: 1px 80px;
  animation-duration: 0.7s;
  transform: translateX(10px) rotate(3deg);
}
.rain-layer-3 {
  background-size: 1px 100px;
  animation-duration: 0.4s;
  transform: translateX(-10px) rotate(-2deg);
}
@keyframes rain-fall {
  from { background-position: 0 0; }
  to   { background-position: 0 60px; }
}
.act--storm .rain-layer {
  animation:
    rain-fall 0.5s linear infinite,
    rain-reveal linear both;
  animation-timeline: auto, view();
  animation-range: auto, entry 10% cover 40%;
}
@keyframes rain-reveal {
  from { opacity: 0; }
  to   { opacity: 0.8; }
}

/* Lightning */
.lightning {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0);
  pointer-events: none;
  animation: flash linear both;
  animation-timeline: view();
  animation-range: cover 30% cover 55%;
}
@keyframes flash {
  0%,20%   { background: rgba(255,255,255,0); }
  21%,24%  { background: rgba(255,255,255,0.95); }
  25%      { background: rgba(255,255,255,0.1); }
  27%,28%  { background: rgba(255,255,255,1); }
  29%,100% { background: rgba(255,255,255,0); }
}

/* Lightning bolt SVG */
.bolt {
  position: absolute;
  top: 10%; left: 40%;
  width: 180px;
  opacity: 0;
  filter: drop-shadow(0 0 40px #fff) drop-shadow(0 0 20px #a0c8ff);
  animation: bolt-strike linear both;
  animation-timeline: view();
  animation-range: cover 30% cover 55%;
}
@keyframes bolt-strike {
  0%,40%    { opacity: 0; }
  41%,44%   { opacity: 1; }
  45%       { opacity: 0; }
  60%,64%   { opacity: 1; }
  65%,100%  { opacity: 0; }
}

/* Boat, tossed on waves */
.boat-scene {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  perspective: 1200px;
}
.boat {
  position: absolute;
  bottom: 40%;
  left: 50%;
  width: 260px;
  transform-origin: 50% 90%;
  animation: boat-toss linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 80%;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5));
}
@keyframes boat-toss {
  0%   { transform: translateX(-50%) translateY(40px) rotate(-2deg) rotateX(0deg); }
  20%  { transform: translateX(-50%) translateY(20px) rotate(8deg) rotateX(10deg); }
  40%  { transform: translateX(-70%) translateY(-20px) rotate(-12deg) rotateX(-5deg); }
  60%  { transform: translateX(-30%) translateY(10px) rotate(15deg) rotateX(12deg); }
  80%  { transform: translateX(-50%) translateY(-40px) rotate(-8deg) rotateX(-8deg); }
  100% { transform: translateX(-50%) translateY(-100px) rotate(5deg) rotateX(5deg); }
}

/* Storm title */
.storm-title-wrap {
  position: absolute;
  top: 15%; left: 0; right: 0;
  text-align: center;
  color: var(--lw-paper);
  z-index: 3;
  animation: storm-title-in linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}
@keyframes storm-title-in {
  from { opacity: 0; transform: translateY(40px); letter-spacing: 0.3em; }
  to   { opacity: 1; transform: translateY(0);    letter-spacing: -0.03em; }
}

/* Waves — stacked SVG */
.waves {
  position: absolute;
  bottom: 0; left: -10%; right: -10%;
  height: 45%;
  filter: url(#wave-displace);
}
.wave {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  width: 120%;
  animation: wave-roll 6s ease-in-out infinite;
}
.wave-2 { bottom: -10px; opacity: .6; animation-duration: 8s; animation-direction: reverse; }
.wave-3 { bottom: -20px; opacity: .4; animation-duration: 10s; }
@keyframes wave-roll {
  0%,100% { transform: translateX(0) scaleY(1); }
  50%     { transform: translateX(-5%) scaleY(1.1); }
}

/* ====== ACT 3 — THE WAVE ====== */
.act--wave {
  background: linear-gradient(180deg, #050608 0%, #0d1620 50%, #1a2838 100%);
  color: var(--lw-paper);
  padding: 200px 0;
  min-height: 150vh;
  position: relative;
  overflow: hidden;
}
.wave-giant {
  position: absolute;
  bottom: -5%;
  left: 50%;
  transform: translateX(-50%);
  width: 150%;
  filter: url(#wave-displace);
  animation: wave-rise linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 80%;
}
@keyframes wave-rise {
  from { transform: translateX(-50%) translateY(60%) scale(0.8); }
  to   { transform: translateX(-50%) translateY(-10%) scale(1.3); }
}
.wave-copy {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
  padding: 80px 48px;
  text-align: center;
}
.morphing-path {
  animation: path-morph 8s ease-in-out infinite alternate;
}
@keyframes path-morph {
  0%   { d: path("M 0,100 Q 250,20 500,100 T 1000,100 L 1000,300 L 0,300 Z"); }
  50%  { d: path("M 0,100 Q 250,180 500,80 T 1000,130 L 1000,300 L 0,300 Z"); }
  100% { d: path("M 0,90 Q 250,40 500,140 T 1000,70 L 1000,300 L 0,300 Z"); }
}

/* ====== ACT 4 — THE BREAK (void + spotlight) ====== */
.act--break {
  background: #000;
  color: #fff;
  min-height: 100vh;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  --mx: 50%;
  --my: 50%;
}
.break-mask {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle 120px at var(--mx) var(--my), rgba(255,220,160,0.25) 0%, rgba(255,180,110,0.1) 30%, transparent 60%),
    radial-gradient(circle 420px at var(--mx) var(--my), transparent 0%, transparent 30%, rgba(0,0,0,0.55) 65%, #000 95%);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: normal;
  transition: background 120ms linear;
}
.break-copy {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--lw-paper);
}
.break-copy .tiny {
  font-family: var(--lw-font-mono);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  opacity: 0.4;
  margin-bottom: 24px;
}
.break-copy em {
  color: var(--lw-terra);
  font-style: italic;
}

/* ====== ACT 5 — LIGHT RETURNS (rainbow) ====== */
.act--rainbow {
  background: linear-gradient(180deg, #000 0%, #1a0f1a 30%, #4a2340 55%, #c65d3a 75%, #f5efe4 100%);
  min-height: 200vh;
  color: var(--lw-paper);
  view-timeline-name: --rainbow;
  position: relative;
  overflow: hidden;
}
.rainbow-sky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.rainbow-arc {
  position: absolute;
  bottom: -80%;
  left: 50%;
  transform: translateX(-50%);
  width: 180vh;
  height: 180vh;
  border-radius: 50%;
  /* symmetric arc, no angle sweep — appears at top of a giant circle */
  background:
    conic-gradient(
      from 180deg at 50% 100%,
      transparent 0deg,
      transparent 155deg,
      #c65d3a 157deg 162deg,
      #d89945 162deg 167deg,
      #e8c65a 167deg 172deg,
      #7ba05b 172deg 178deg,
      #3a5a78 178deg 184deg,
      #4a2d5a 184deg 189deg,
      #9c3a70 189deg 194deg,
      transparent 196deg,
      transparent 360deg
    );
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 49%, #000 50%, #000 63%, transparent 64%);
          mask: radial-gradient(circle at 50% 100%, transparent 49%, #000 50%, #000 63%, transparent 64%);
  animation: rainbow-sweep linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 60%;
  filter: saturate(1.6) contrast(1.2);
  z-index: 1;
}
@keyframes rainbow-sweep {
  from { opacity: 1; transform: translateX(-50%) scale(0.85); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}
.rainbow-title {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 0 24px;
}
.rainbow-sun {
  display: none;
}