/* animations.css — cinematic overlay layers (dawn glow, fog prologue, scroll
   hint, waterline flash) and scroll-reveal transitions. These drive the
   "Beneath the Surface" intro. Visual design + timing preserved verbatim. */

/* ---------- sun glow (dawn) ---------- */
#sunGlow{
  position:fixed;z-index:3;pointer-events:none;will-change:opacity,transform;
  width:110vmin;height:110vmin;right:-30vmin;top:-38vmin;border-radius:50%;
  background:radial-gradient(circle, rgba(255,240,200,.85) 0%, rgba(255,226,150,.35) 32%, rgba(255,220,140,.12) 55%, transparent 72%);
  opacity:0;filter:blur(2px);
}

/* ---------- fog prologue: layered canvas mist ---------- */
#mist{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,#E8F1F3 0%,#D9E9ED 55%,#C9E0E6 100%);}
.fogc{position:absolute;left:-25%;top:-25%;width:150%;height:150%;
  background-repeat:repeat;will-change:transform,opacity;}

#prologue{
  position:fixed;inset:0;z-index:4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;pointer-events:none;text-align:center;padding:0 24px;
}
#prologue img{width:min(34vw,180px);filter:drop-shadow(0 18px 44px rgba(6,34,43,.28))}
#prologue h1{
  font-family:var(--display);font-weight:800;color:#123840;
  font-size:clamp(30px,6.4vw,58px);letter-spacing:-.02em;line-height:1.02;
}
#prologue .sub{color:#3E6A72;font-size:clamp(13px,2.4vw,17px);font-weight:500;letter-spacing:.14em;text-transform:uppercase}

/* ---------- scroll hint ---------- */
#scrollHint{
  position:fixed;bottom:max(26px, env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  z-index:4;color:#3E6A72;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;
}
#scrollHint::after{
  content:'';width:1px;height:34px;
  background:linear-gradient(#3E6A72,transparent);
  animation:hint 1.8s ease-in-out infinite;
}
@keyframes hint{0%,100%{opacity:.25;transform:scaleY(.6);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}

/* ---------- waterline flash ---------- */
#flash{position:fixed;inset:0;z-index:5;background:#eafcff;opacity:0;pointer-events:none}

/* ---------- scroll reveal ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

@media (prefers-reduced-motion: reduce){
  .rv{transition:none;opacity:1;transform:none}
  #scrollHint::after{animation:none}
}