/* ===========================================================
   Hidden in H2O — Interactive Journey (scrollytelling)
   =========================================================== */

.journey-body{ background:var(--beige); }

/* ---------- ambient floating bubbles (whole page) ---------- */
.bubble-field{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:1;
}
.bubble{
  position:absolute;
  bottom:-60px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(59,167,245,0.15) 70%);
  border:1px solid rgba(255,255,255,0.5);
  animation:rise linear infinite;
}
@keyframes rise{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:0.8; }
  90%{ opacity:0.6; }
  100%{ transform:translateY(-110vh) translateX(20px); opacity:0; }
}

/* ---------- Intro ---------- */
.journey-intro{
  min-height:92vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  background:
    radial-gradient(circle at 20% 20%, rgba(59,167,245,0.25), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(230,0,126,0.15), transparent 50%),
    linear-gradient(180deg, #EAF6FF 0%, var(--beige) 100%);
  padding:40px 24px;
  overflow:hidden;
}
.journey-intro h1{
  font-size:clamp(2rem, 5vw, 4.2rem);
  color:var(--navy);
  max-width:none;
  line-height:1.1;
  white-space:nowrap;
}
.journey-intro h1 span{ color:var(--magenta); }
.journey-intro p.subtitle{
  max-width:640px;
  font-size:1.15rem;
  color:#3c4a63;
  margin:22px 0 34px;
}
.scroll-cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.bounce-arrow{
  font-size:1.8rem;
  color:var(--water-blue);
  animation:bounceArrow 1.6s ease-in-out infinite;
}
@keyframes bounceArrow{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(14px); }
}

.mascot-intro{
  position:absolute;
  right:6%;
  bottom:6%;
  width:150px;
  height:262px;
  object-fit:contain;
  object-position:center;
  background:#F8F1CF;
  border:4px solid rgba(255,255,255,.72);
  border-radius:26px;
  box-shadow:var(--shadow-soft);
  animation:float 4s ease-in-out infinite;
}
@keyframes float{
  0%,100%{ transform:translateY(0) rotate(-2deg); }
  50%{ transform:translateY(-16px) rotate(2deg); }
}

/* ---------- Track wrapper & river ribbon ---------- */
.journey-track{
  position:relative;
  padding:40px 0 20px;
  z-index:2;
}
.river-bg{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:320px;
  height:100%;
  z-index:0;
  pointer-events:none;
}
.river-bg svg{ width:100%; height:100%; }

.particle-path{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:320px;
  height:100%;
  z-index:3;
  pointer-events:none;
}
.particle{
  position:absolute;
  width:22px;
  height:22px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, var(--gray-yellow) 45%, var(--magenta) 100%);
  box-shadow:0 0 18px 6px rgba(230,0,126,0.55), 0 0 30px 10px rgba(59,167,245,0.35);
  offset-rotate:0deg;
  transition:opacity .4s ease;
}
.particle.hidden-particle{ opacity:0; }

/* ---------- Stage layout ---------- */
.stage{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 340px 1fr;
  align-items:center;
  min-height:78vh;
  padding:40px 32px;
  gap:20px;
  max-width:1300px;
  margin:0 auto;
}
.stage-media, .stage-info{
  opacity:0;
  transform:translateY(50px);
  transition:opacity .8s ease, transform .8s ease;
}
.stage.in-view .stage-media{ opacity:1; transform:translateY(0); }
.stage.in-view .stage-info{ opacity:1; transform:translateY(0); transition-delay:.15s; }

.stage-left{ direction:ltr; }
.stage-left .stage-media{ grid-column:1; }
.stage-left .stage-info{ grid-column:3; }
.stage-right .stage-media{ grid-column:3; }
.stage-right .stage-info{ grid-column:1; }

.stage-media{
  position:relative;
  aspect-ratio:1/1;
  border-radius:32px;
  box-shadow:var(--shadow-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin:0;
}
.stage-media > img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.stage.in-view .stage-media > img{ transform:scale(1.035); }
.stage-media figcaption{
  position:absolute;
  left:18px;
  right:18px;
  bottom:16px;
  padding:10px 13px;
  border-radius:12px;
  background:rgba(30,42,68,.82);
  color:#fff;
  font-size:.76rem;
  font-weight:700;
  text-align:center;
  backdrop-filter:blur(4px);
}

.stage-info{
  background:#fff;
  border-radius:var(--radius-lg);
  padding:30px 32px;
  box-shadow:var(--shadow-card);
  position:relative;
}
.stage-num{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:600;
  color:#fff;
  background:var(--magenta);
  width:34px;height:34px;
  border-radius:50%;
  text-align:center;
  line-height:34px;
  margin-bottom:10px;
  font-size:0.95rem;
}
.stage-info h2{
  font-size:1.7rem;
  color:var(--navy);
  margin-bottom:10px;
}
.stage-info p{ color:#3c4a63; }

.fun-fact{
  margin-top:16px;
  background:var(--pink);
  color:var(--navy);
  padding:14px 18px;
  border-radius:16px;
  font-size:0.92rem;
  font-weight:600;
  position:relative;
}
.fun-fact::before{ content:"✨ Fun Fact: "; color:var(--magenta); }

/* ---------- otter guide ---------- */
.otter-guide{
  position:absolute;
  bottom:-78px;
  display:flex;
  align-items:flex-end;
  gap:8px;
  max-width:270px;
}
.stage-left .otter-guide{ right:12px; }
.stage-right .otter-guide{ left:12px; }
.otter-guide img{
  width:96px;
  height:126px;
  flex:none;
  object-fit:contain;
  object-position:center;
  padding:3px;
  background:#fff;
  border:3px solid #fff;
  border-radius:16px;
  box-shadow:var(--shadow-soft);
  animation:float 3.6s ease-in-out infinite;
}
.speech-bubble{
  background:#fff;
  border:2px solid var(--water-blue);
  border-radius:16px;
  padding:8px 12px;
  font-size:0.82rem;
  font-weight:700;
  color:var(--navy);
  position:relative;
  box-shadow:var(--shadow-soft);
  max-width:170px;
}

/* ---------- Stage specific illustration backgrounds ---------- */
.media-1,.media-2,.media-3,.media-4,.media-5,.media-6,.media-7{ background:#DDECF5; }

/* crack animation stage 1 */
.crack-line{ stroke-dasharray:60; stroke-dashoffset:60; animation:drawCrack 2.5s ease forwards infinite alternate; }
@keyframes drawCrack{ to{ stroke-dashoffset:0; } }

/* sun rays stage 2 */
.sun-rays{ transform-origin:center; animation:spin 12s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.floating-particle{ animation:driftAway 3s ease-in-out infinite; }
@keyframes driftAway{
  0%,100%{ transform:translate(0,0); opacity:1; }
  50%{ transform:translate(14px,-18px); opacity:0.6; }
}

/* rain stage 3 */
.raindrop{ animation:fall 1.1s linear infinite; }
@keyframes fall{ 0%{ transform:translateY(-10px); opacity:0;} 20%{opacity:1;} 100%{ transform:translateY(70px); opacity:0; } }

/* river fish stage 4 */
.fish{ animation:swim 4s ease-in-out infinite; }
@keyframes swim{ 0%,100%{ transform:translateX(0);} 50%{ transform:translateX(18px);} }
.ripple-ring{ animation:rippleGrow 3s ease-out infinite; transform-origin:center; }
@keyframes rippleGrow{ 0%{ transform:scale(0.6); opacity:0.6;} 100%{ transform:scale(1.5); opacity:0;} }

/* filtration stage 5 */
.filter-particle{ animation:flowThrough 3.2s linear infinite; }
@keyframes flowThrough{ 0%{ transform:translateY(-60px); opacity:0;} 15%{opacity:1;} 100%{ transform:translateY(60px); opacity:0;} }
.compare-row{ display:flex; justify-content:space-between; margin-top:14px; font-weight:700; font-size:0.9rem; }
.compare-row .ok{ color:#2e8b3f; }
.compare-row .warn{ color:var(--magenta); }

/* pipe flow stage 6 */
.flow-line{ stroke-dasharray:10 8; animation:flowLine 1.4s linear infinite; }
@keyframes flowLine{ to{ stroke-dashoffset:-36; } }

/* final droplet stage 7 */
.fade-particle{ animation:particleFade 3s ease-in-out infinite; }
@keyframes particleFade{ 0%,100%{ opacity:0.9;} 50%{ opacity:0.15;} }
.clean-drop{ animation:dropAppear 3s ease-in-out infinite; }
@keyframes dropAppear{ 0%,100%{ opacity:0.1; transform:scale(0.85);} 50%{ opacity:1; transform:scale(1);} }

/* ---------- Ending ---------- */
.journey-ending{
  position:relative;
  z-index:2;
  text-align:center;
  padding:100px 24px 120px;
  background:linear-gradient(180deg, var(--beige) 0%, #BFE4FF 100%);
}
.journey-ending h2{
  font-size:clamp(2rem, 5vw, 3rem);
  color:var(--navy);
  margin-bottom:18px;
}
.journey-ending p{
  max-width:600px;
  margin:0 auto 40px;
  color:#3c4a63;
  font-size:1.1rem;
}
.ending-buttons{
  display:flex;
  gap:22px;
  justify-content:center;
  flex-wrap:wrap;
}
.ending-buttons .btn{ font-size:1rem; padding:18px 34px; }

@media (max-width:900px){
  .journey-intro h1{ white-space:normal; }
  .mascot-intro{
    position:relative;
    right:auto;
    bottom:auto;
    width:112px;
    height:196px;
    margin-top:28px;
  }
  .stage{ grid-template-columns:1fr; min-height:auto; padding:60px 24px; gap:26px; }
  .stage-left .stage-media,.stage-right .stage-media,
  .stage-left .stage-info,.stage-right .stage-info{ grid-column:1; }
  .river-bg,.particle-path{ width:120px; opacity:0.5; }
  .otter-guide{ position:static; margin-top:22px; max-width:none; }
  .stage-left .otter-guide,.stage-right .otter-guide{ right:auto; left:auto; }
}