/* Cozy Cove's entrance palette, with a static glow and no extra canvas or GPU pass. */
.home-intro{position:fixed;inset:0;z-index:1000;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;border:0;padding:40px 24px;overflow:auto;color:#f1f8ff;background:#0787b2 url('/assets/home/ocean-fallback.webp') center top/cover no-repeat;transition:opacity .9s ease;text-align:center;font-family:var(--font-readable)}
.home-intro[open]{display:grid;place-items:center}
.home-intro::backdrop{background:transparent}
body:has(.home-intro[open]){overflow:hidden}
body:has(.home-intro[open]) :is(.home-header .site-brand,.home-header .site-nav,.home-header .site-menu-toggle,.surface-copy>.eyebrow,.hero-line,.surface-intro,.dive-button-wrap,.surface-bottom>*){animation-play-state:paused}
.home-intro-content{width:min(480px,100%);margin:auto}
.home-intro-logo{display:block;width:clamp(160px,28vw,215px);height:auto;margin:0 auto 34px;filter:drop-shadow(0 0 10px #168aff70)}
.home-intro h2{margin:0;color:#f1f8ff;font:300 clamp(27px,4.2vw,40px)/1.35 var(--font-brand);letter-spacing:-.025em;text-wrap:balance}
.home-intro-subtitle{margin:18px 0 27px;color:#a2bdd0;font-size:14px;line-height:1.7}
.home-intro .intro-sound{display:inline-flex;justify-content:center;gap:10px;width:auto;min-width:144px;height:44px;padding:0 18px;margin-bottom:25px;border-radius:999px;font:500 14px var(--font-readable);background:#13384e;border-color:#a6d4ee40}
.home-intro .intro-sound:hover{background:#204f68}
.home-intro .intro-sound:active{background:#0c2538;transform:translateY(1px)}
.intro-enter{display:flex;align-items:center;justify-content:center;gap:20px;width:100%;min-height:64px;border:1px solid #d3f5ff8c;border-radius:18px;padding:16px 26px;background:linear-gradient(120deg,#d0e7ff,#afa9ec);color:#122d49;font:600 18px var(--font-readable);box-shadow:0 0 24px #3777ff2e,inset 0 1px 0 #ffffff91;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s}
.intro-enter:not(:disabled):hover{background:linear-gradient(120deg,#e3f5ff,#c9c1ff);transform:translateY(-2px);box-shadow:0 6px 30px #3777ff45}
.intro-enter:not(:disabled):active{transform:translateY(1px);box-shadow:0 0 12px #3777ff2e}
.intro-enter:disabled{opacity:.5;cursor:progress}
.intro-enter svg{width:22px;height:22px}
.home-intro progress{display:block;appearance:none;width:100%;height:3px;margin-top:20px;border:0;border-radius:4px;overflow:hidden;background:#6eacd122;accent-color:#72e8df}
.home-intro progress::-webkit-progress-bar{background:#6eacd122}
.home-intro progress::-webkit-progress-value{background:linear-gradient(90deg,#167cfa,#72e8df)}
.home-intro progress::-moz-progress-bar{background:linear-gradient(90deg,#167cfa,#72e8df)}
.home-intro [data-home-load-status]{min-height:2.5em;margin:10px 0 0;color:#89acc2;font-size:12px;line-height:1.6}
.home-intro :focus-visible{outline:3px solid #9eeaff;outline-offset:5px}
@keyframes intro-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:600px){.home-intro{padding:28px 24px}.home-intro-logo{margin-bottom:28px}.home-intro h2{font-size:27px}.home-intro-subtitle{font-size:13px}}
@media(prefers-reduced-motion:reduce){.home-intro-content{animation:none}.intro-enter{transition:none}}

.home-intro-content{text-shadow:0 1px 12px #041323cc,0 0 2px #04132399}
.home-intro-subtitle,.home-intro [data-home-load-status]{color:#fff;text-shadow:0 1px 3px #041323,0 0 14px #041323e6}
.home-intro h2{text-shadow:0 2px 16px #041323cc,0 0 3px #04132399}

.home-intro.is-leaving{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.home-intro{transition:none}}

/* Loading status and progress live inside the Jump in button */
.intro-enter{position:relative;overflow:hidden;flex-direction:column;gap:0;min-height:76px;padding:12px 26px 17px}
.intro-enter-text{display:flex;flex-direction:column;align-items:center;gap:3px}
.intro-enter-label{display:inline-flex;align-items:center;gap:14px}
.home-intro .intro-enter [data-home-load-status]{min-height:0;margin:0;color:#35557a;text-shadow:none;font:500 12px/1.4 var(--font-readable)}
.home-intro .intro-enter progress{position:absolute;left:0;right:0;bottom:0;width:100%;height:5px;margin:0;border-radius:0;background:#122d4926}
.home-intro .intro-enter progress::-webkit-progress-bar{background:#122d4926}
.intro-enter:disabled{opacity:.85}

/* Sun-lit logo: stacked white copies trail away from the light (after the textlight-effect pen) */
.home-intro{overflow-x:hidden}
.home-intro .home-intro-logo{width:clamp(250px,46vw,380px);aspect-ratio:810/710;height:auto;margin-bottom:44px;filter:none}
.logo-light{position:relative}
.logo-light>img{position:relative;z-index:1;display:block;width:100%;height:100%;filter:drop-shadow(0 1px 1px #0a3a5ccc) drop-shadow(0 4px 14px #0a3a5c80)}
.logo-light-rays{position:absolute;inset:0;z-index:0;pointer-events:none}
.logo-light-copy{position:absolute;inset:0;-webkit-mask:url('/assets/site/tap-oceans-logo-white.svg') center/contain no-repeat;mask:url('/assets/site/tap-oceans-logo-white.svg') center/contain no-repeat;
  background:rgb(calc(225 - var(--index) * 1.8),calc(247 - var(--index) * 1.4),255);
  opacity:min(.9,calc(1.3 / var(--index)));
  transform:translate(calc(var(--index) * var(--horizontal) * .22rem * var(--spread)),calc(var(--index) * var(--vertical) * .22rem * var(--spread))) scale(calc(1 + var(--index) * .006 * var(--spread)));
  will-change:transform}
@media(prefers-reduced-motion:reduce){.logo-light-copy{will-change:auto}}

/* Entrance: a calm, staggered reveal. Logo surfaces, the light fans out, then text and buttons follow. */
@property --spread{syntax:'<number>';inherits:true;initial-value:1}
@keyframes intro-logo{from{opacity:0;transform:translateY(22px) scale(.94);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes intro-rays{from{--spread:0;opacity:0}to{--spread:1;opacity:1}}
@keyframes intro-rise{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes intro-sheen{0%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(330%) skewX(-18deg)}}
.logo-light>img{animation:intro-logo 1.5s cubic-bezier(.16,1,.3,1) .15s backwards}
.logo-light-rays{animation:intro-rays 2.4s cubic-bezier(.22,.8,.3,1) .55s backwards}
.home-intro h2{animation:intro-rise 1.3s cubic-bezier(.16,1,.3,1) .8s backwards}
.home-intro-subtitle{animation:intro-rise 1.2s cubic-bezier(.16,1,.3,1) 1.1s backwards}
.home-intro .intro-sound{animation:intro-rise 1.1s cubic-bezier(.16,1,.3,1) 1.3s backwards}
.home-intro .intro-enter{animation:intro-rise 1.2s cubic-bezier(.16,1,.3,1) 1.5s backwards}
.intro-enter::after{content:"";position:absolute;inset:0 auto 0 0;width:38%;background:linear-gradient(100deg,transparent,#fff9 50%,transparent);transform:translateX(-130%) skewX(-18deg);pointer-events:none;animation:intro-sheen 1.4s ease-in-out 2.6s 1 both}
.intro-enter:disabled::after{display:none}
@media(prefers-reduced-motion:reduce){.logo-light>img,.logo-light-rays,.home-intro h2,.home-intro-subtitle,.home-intro .intro-sound,.home-intro .intro-enter,.intro-enter::after{animation:none}}