/* The approved opening stylesheet and imagery remain untouched. */
.underwater[hidden],.opening[hidden]{display:none}
.underwater{position:fixed;inset:0;z-index:1;overflow-x:hidden;overflow-y:auto;display:grid;align-items:center;min-height:100svh;padding:max(48px,env(safe-area-inset-top)) 26px max(48px,env(safe-area-inset-bottom));background:#042d44;color:#f2e6d7;opacity:0;transition:opacity 1.9s ease;isolation:isolate}
.depth-atmosphere{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% -18%,#2b738675 0%,#12455b55 40%,transparent 70%),linear-gradient(180deg,#103e55 0%,#062d44 44%,#031d32 100%)}
.light-rays{position:absolute;inset:-20% -30% -5%;background:conic-gradient(from 145deg at 50% 0%,transparent 0deg,#99daea0c 5deg,transparent 11deg,transparent 18deg,#9bdeee10 23deg,transparent 29deg,transparent 36deg,#9bdeee09 40deg,transparent 47deg,transparent 360deg);filter:blur(7px);transform-origin:50% 0;animation:ray-drift 24s ease-in-out infinite alternate;mask-image:linear-gradient(#000,transparent 95%);-webkit-mask-image:linear-gradient(#000,transparent 95%)}
.suspended-particles,.bubbles{position:absolute;inset:0}
.suspended-particles i{position:absolute;width:var(--size);height:var(--size);border-radius:50%;background:#c3e8ee;opacity:0;animation:particle-drift var(--duration) ease-in-out var(--delay) infinite}
.bubbles i{position:absolute;bottom:-16px;width:5px;height:5px;border:1px solid #b1e2f140;border-radius:50%;opacity:0;animation:bubble-rise 26s linear infinite}
.bubbles i:nth-child(1){left:19%;animation-delay:2s}.bubbles i:nth-child(2){left:81%;width:7px;height:7px;animation-delay:11s;animation-duration:31s}.bubbles i:nth-child(3){left:67%;width:3px;height:3px;animation-delay:20s;animation-duration:29s}
.underwater-intro{position:relative;text-align:center;width:100%;max-width:760px;margin:auto;opacity:0;transform:translateY(10px);transition:opacity .65s ease,transform .9s ease;text-shadow:0 2px 22px #001b3066}
.underwater-intro h2{font-family:OceanSerif,Georgia,serif;font-weight:400;line-height:1.16;letter-spacing:-.025em;font-size:clamp(2.1rem,8.8vw,3.8rem);text-wrap:balance;margin:0 auto;max-width:15ch;outline:none}
.underwater-intro p{font-style:italic;font-size:clamp(1.2rem,5vw,1.65rem);line-height:1.5;color:#c9dfe5;margin:24px 0 0}
body.is-diving .opening{z-index:2;pointer-events:none}
body.is-diving .opening .scenery{animation:surface-descent 1.9s cubic-bezier(.32,0,.28,1) both;will-change:transform,opacity}
body.is-diving .opening .invitation{animation:invitation-descent .9s ease both}
body.is-diving .underwater,body.is-submerged .underwater{opacity:1}
body.reveal-intro .underwater-intro{opacity:1;transform:translateY(0)}
@keyframes surface-descent{0%{transform:translateY(0);opacity:1}28%{opacity:.9}70%{opacity:.32}100%{transform:translateY(-52svh);opacity:0}}
@keyframes invitation-descent{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-22px)}}
@keyframes ray-drift{from{transform:rotate(-3deg);opacity:.65}to{transform:rotate(3deg);opacity:1}}
@keyframes particle-drift{0%{opacity:0;transform:translate3d(0,14px,0)}25%{opacity:.22}70%{opacity:.13}100%{opacity:0;transform:translate3d(12px,-35px,0)}}
@keyframes bubble-rise{0%{opacity:0;transform:translate3d(0,0,0)}8%{opacity:.26}70%{opacity:.18}100%{opacity:0;transform:translate3d(-16px,-92svh,0)}}
/* Feather only the moving surface boundary as it passes into the blue below. */
@media(prefers-reduced-motion:no-preference){
  body.is-diving .opening .scenery{
    -webkit-mask-image:linear-gradient(to bottom,#000 65%,rgba(0,0,0,.88) 74%,rgba(0,0,0,.5) 84%,rgba(0,0,0,.12) 94%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 65%,rgba(0,0,0,.88) 74%,rgba(0,0,0,.5) 84%,rgba(0,0,0,.12) 94%,transparent 100%);
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:top;mask-position:top;
    animation:surface-descent 1.9s cubic-bezier(.32,0,.28,1) both,surface-feather 1.9s linear both;
  }
  body.is-diving .opening .scenery::after{
    content:"";position:absolute;inset:62% -20px -20px;pointer-events:none;
    background:linear-gradient(to bottom,transparent,rgba(12,59,80,.18) 45%,rgba(6,45,68,.55));
    filter:blur(12px);animation:surface-haze 1.9s ease both;
  }
  @keyframes surface-feather{0%{-webkit-mask-size:100% 154%;mask-size:100% 154%}10%,100%{-webkit-mask-size:100% 100%;mask-size:100% 100%}}
  @keyframes surface-haze{0%,100%{opacity:0}22%,65%{opacity:.65}}
}
@media(prefers-reduced-motion:reduce){
  .underwater{transition:opacity .2s ease!important}
  body.is-diving .opening .scenery,body.is-diving .opening .invitation{animation:gentle-fade .2s ease both!important;transform:none;will-change:auto}
  .underwater-intro{transform:none;transition:opacity .2s ease!important}
  .light-rays{animation:none;transform:none;opacity:.7}
  .suspended-particles i{animation:none;opacity:.13}
  .bubbles{display:none}
  @keyframes gentle-fade{from{opacity:1}to{opacity:0}}
}