/* Compliance terms: IntersectionObserver adding a `.animate` class. IntersectionObserver` watches each step element — when it enters the viewport at 40% threshold. JetBrains Mono" (Google Fonts */
:root{--burnt-coral:#cf6a2a;--smoked-tangerine:#a3511e;--fairy-lagoon:#1a6b6e;--deep-grotto:#0a2a2f;--abyss-black:#0c1a1e;--cream-shell:#fdf6ee;--surface-sky:#d4eef5;--coral-glow:#ff9d5c;--surface-gradient:linear-gradient(180deg,#d4eef5 0%,#7ec8c8 35%,#1a6b6e 65%,#0a2a2f 100%);--polyp:radial-gradient(circle at 30% 30%,#ff9d5c,#cf6a2a 60%,#a3511e);--glow:0 0 20px rgba(255,157,92,.4),0 0 60px rgba(255,157,92,.1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;overflow-x:hidden;background:#0c1a1e;color:#fdf6ee;font-family:"Nunito Sans",Inter,Avenir,system-ui,sans-serif;font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.75}button{font:inherit}.fish-symbols{position:absolute;width:0;height:0;overflow:hidden}section{position:relative;isolation:isolate}h1,h2,h3{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-weight:600;letter-spacing:.04em;margin:0}.section-title{font-size:clamp(1.8rem,4vw,3rem);margin:0 0 2rem;color:#fdf6ee}.section-title span{display:inline-block;opacity:0;transform:translateY(14px) rotate(2deg)}.section-title.animate span{animation:letterReveal .5s forwards;animation-delay:calc(var(--i)*40ms)}@keyframes letterReveal{to{opacity:1;transform:translateY(0) rotate(0)}}code{font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace;font-size:.9em;background:rgba(207,106,42,.08);border-radius:4px;padding:2px 6px;color:#ffccad;border:1px solid rgba(255,157,92,.18)}
.surface{height:100vh;overflow:hidden;background:var(--surface-gradient);display:flex;align-items:center;justify-content:center}.surface:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 16%,rgba(253,246,238,.62),transparent 23%),radial-gradient(circle at 68% 34%,rgba(255,157,92,.15),transparent 18%),linear-gradient(90deg,rgba(255,255,255,.08),transparent 18%,rgba(255,255,255,.05) 40%,transparent 61%);mix-blend-mode:soft-light}.surface-glimmer{position:absolute;inset:-15%;background:repeating-linear-gradient(100deg,transparent 0 42px,rgba(253,246,238,.14) 44px 47px,transparent 50px 110px);filter:blur(7px);animation:glimmer 14s linear infinite;opacity:.6}@keyframes glimmer{to{transform:translateX(130px) translateY(40px)}}.hero-content{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;gap:1.4rem;text-align:center;padding:2rem}.wordmark{font-size:clamp(3rem,8vw,6.5rem);color:#fdf6ee;text-shadow:0 8px 35px rgba(12,26,30,.35),0 0 32px rgba(255,157,92,.22)}.wordmark span{display:inline-block;animation:drift 4s ease-in-out infinite;animation-delay:calc(var(--i)*.15s)}@keyframes drift{0%,100%{transform:translateY(-4px)}50%{transform:translateY(4px)}}.hero-line{max-width:30rem;margin:0;color:rgba(253,246,238,.9);text-shadow:0 2px 16px rgba(10,42,47,.38)}.chevron-down{width:54px;height:54px;border:1px solid rgba(255,157,92,.24);border-radius:50%;background:rgba(253,246,238,.08);color:#ff9d5c;display:grid;place-items:center;cursor:pointer;box-shadow:var(--glow);animation:chevronPulse 2s ease-in-out infinite}.chevron-down svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}@keyframes chevronPulse{50%{transform:translateY(8px);box-shadow:0 0 26px rgba(255,157,92,.58),0 0 76px rgba(255,157,92,.16)}}
.hero-fish{position:absolute;z-index:3;width:80px;height:58px;color:#cf6a2a;fill:currentColor;filter:drop-shadow(0 0 9px rgba(255,157,92,.38));transition:transform .3s ease}.hero-fish:hover{transform:scale(1.08)}.fish-1{top:64%;left:-140px;width:118px;opacity:.58;animation:swim 30s linear infinite}.fish-2{top:70%;left:-160px;width:76px;color:#ff9d5c;opacity:.62;animation:swim 24s linear infinite 3s}.fish-3{top:55%;left:-180px;width:104px;opacity:.38;animation:swim 35s linear infinite 7s}.fish-4{top:78%;left:-150px;width:62px;color:#ff9d5c;opacity:.5;animation:swim 28s linear infinite 1s}.fish-5{top:61%;left:-130px;width:92px;opacity:.44;animation:swim 22s linear infinite 10s}@keyframes swim{to{translate:calc(100vw + 300px) 0}}
.shallows{min-height:100vh;background:#1a6b6e;overflow:hidden;padding:12vh 2rem;display:flex;align-items:center}.shallows:before,.reef:before,.grotto:before{content:"";position:absolute;left:0;right:0;bottom:-60px;height:120px;z-index:3;pointer-events:none}.shallows:before{background:linear-gradient(180deg,transparent,#1a6b6e)}.section-content{width:min(42rem,calc(100% - 2rem));margin:0 auto;position:relative;z-index:4}.intro-text,.grotto-content p{margin:0 0 1.5rem;opacity:0;transform:translateY(24px);transition:opacity .85s ease,transform .85s ease}.intro-text.revealed,.grotto-content p.revealed{opacity:1;transform:translateY(0)}.marginal-fish svg{position:absolute;width:24px;height:18px;fill:#ff9d5c;opacity:.34;animation:marginSwim 16s linear infinite}.marginal-fish svg:nth-child(1){left:8%;top:22%}.marginal-fish svg:nth-child(2){right:10%;top:58%;animation-duration:21s}.marginal-fish svg:nth-child(3){left:13%;bottom:16%;animation-duration:19s}@keyframes marginSwim{50%{transform:translateX(44px) translateY(-18px)}}
.bubbles,.dust{position:absolute;inset:0;overflow:hidden;pointer-events:none}.bubbles span{position:absolute;bottom:-24px;border-radius:50%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);animation:rise var(--dur,15s) ease-in infinite;animation-delay:var(--delay,0s);left:var(--left,50%);width:var(--size,8px);height:var(--size,8px)}.bubbles span:nth-child(1){--left:8%;--size:6px;--dur:12s}.bubbles span:nth-child(2){--left:16%;--size:10px;--dur:18s;--delay:2s}.bubbles span:nth-child(3){--left:24%;--size:5px;--dur:15s;--delay:4s}.bubbles span:nth-child(4){--left:32%;--size:14px;--dur:20s;--delay:1s}.bubbles span:nth-child(5){--left:41%;--size:7px;--dur:13s;--delay:6s}.bubbles span:nth-child(6){--left:52%;--size:16px;--dur:19s;--delay:3s}.bubbles span:nth-child(7){--left:61%;--size:4px;--dur:11s;--delay:5s}.bubbles span:nth-child(8){--left:70%;--size:12px;--dur:17s;--delay:2s}.bubbles span:nth-child(9){--left:79%;--size:7px;--dur:14s;--delay:7s}.bubbles span:nth-child(10){--left:90%;--size:9px;--dur:16s}.bubbles span:nth-child(11){--left:14%;--size:8px;--dur:15s;--delay:9s}.bubbles span:nth-child(12){--left:36%;--size:5px;--dur:12s;--delay:8s}.bubbles span:nth-child(13){--left:48%;--size:11px;--dur:19s;--delay:4s}.bubbles span:nth-child(14){--left:66%;--size:6px;--dur:13s;--delay:10s}.bubbles span:nth-child(15){--left:84%;--size:15px;--dur:20s;--delay:5s}.bubbles span:nth-child(16){--left:95%;--size:5px;--dur:14s;--delay:1s}.bubbles span:nth-child(17){--left:28%;--size:8px;--dur:18s;--delay:6s}.bubbles span:nth-child(18){--left:74%;--size:6px;--dur:15s;--delay:11s}@keyframes rise{0%{bottom:-24px;opacity:0;transform:translateX(0)}10%{opacity:.6}42%{transform:translateX(34px)}72%{transform:translateX(-21px)}100%{bottom:105%;opacity:0;transform:translateX(16px)}}.dust span{position:absolute;width:3px;height:3px;border-radius:50%;background:#ff9d5c;box-shadow:0 0 4px rgba(255,157,92,.6);opacity:.5;animation:dustPulse 5s ease-in-out infinite}.dust span:nth-child(1){left:12%;top:35%}.dust span:nth-child(2){left:25%;top:72%;animation-delay:1s}.dust span:nth-child(3){left:42%;top:22%;animation-delay:2s}.dust span:nth-child(4){left:58%;top:66%;animation-delay:3s}.dust span:nth-child(5){left:69%;top:31%;animation-delay:1.5s}.dust span:nth-child(6){left:82%;top:55%;animation-delay:2.6s}.dust span:nth-child(7){left:91%;top:22%;animation-delay:.4s}.dust span:nth-child(8){left:36%;top:48%;animation-delay:3.4s}.dust span:nth-child(9){left:18%;top:15%;animation-delay:4s}@keyframes dustPulse{50%{opacity:1;transform:translateY(-18px)}}
.reef{min-height:150vh;background:#1a6b6e;overflow:hidden;padding:10vh 2rem 14vh}.reef:before{background:linear-gradient(180deg,transparent,#0a2a2f)}.reef-content{max-width:52rem}.tutorial-step{max-width:42rem;margin:0 auto 8vh;background:rgba(255,245,235,.12);backdrop-filter:blur(8px);border:1px solid rgba(255,180,120,.2);border-radius:24px;padding:2rem 2.25rem;opacity:0;transform:translateY(30px);max-height:80px;overflow:hidden;transition:all .8s cubic-bezier(.34,1.56,.64,1);box-shadow:0 16px 70px rgba(12,26,30,.18)}.tutorial-step.revealed{opacity:1;transform:translateY(0);max-height:600px}.step-indicator{width:48px;height:48px;border-radius:50%;background:var(--polyp);box-shadow:var(--glow);display:inline-grid;place-items:center;color:#fdf6ee;font-family:"Cormorant Garamond",Georgia,serif;font-size:1.5rem;margin-bottom:1rem}.tutorial-step h3{font-size:1.45rem;margin:0 0 .8rem}.tutorial-step p{margin:.3rem 0 1rem}.tutorial-step ul{list-style:none;padding:0;margin:0 0 1rem}.tutorial-step li{display:flex;gap:.65rem;align-items:flex-start;margin:.55rem 0}.tutorial-step li svg{flex:0 0 22px;width:22px;height:17px;fill:#ff9d5c;margin-top:.35rem;transition:transform .3s ease}.tutorial-step li:hover svg{transform:scale(1.08)}.reef-photo{width:min(480px,90%);height:260px;border-radius:24px;border:1px solid rgba(207,106,42,.25);margin:2rem auto 8vh;filter:saturate(.6) sepia(.15);background:radial-gradient(ellipse at 48% 48%,#ff9d5c 0 7%,#cf6a2a 8% 20%,transparent 21%),radial-gradient(ellipse at 58% 50%,#fdf6ee 0 4%,transparent 5%),radial-gradient(ellipse at 50% 50%,#a3511e 0 28%,transparent 29%),linear-gradient(135deg,#0a2a2f,#1a6b6e 45%,#d4eef5);position:relative;overflow:hidden;opacity:.78}.reef-photo:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 80%,rgba(207,106,42,.35),transparent 26%),radial-gradient(circle at 80% 24%,rgba(255,157,92,.28),transparent 22%),linear-gradient(90deg,rgba(12,26,30,.45),transparent 40%,rgba(12,26,30,.35))}.photo-two{margin-left:auto;margin-right:4vw;transform:rotate(1.5deg)}.photo-one{margin-left:4vw;transform:rotate(-1.5deg)}
.grotto{min-height:100vh;background:#0a2a2f;color:#fdf6ee;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:12vh 2rem}.grotto:before{background:linear-gradient(180deg,transparent,#0c1a1e)}.grotto:after{content:"";position:absolute;inset:0;background:rgba(10,42,47,.85);z-index:1}.grotto-photo{position:absolute;inset:6%;border-radius:36px;opacity:.15;mix-blend-mode:luminosity;background:radial-gradient(ellipse at 72% 42%,#ff9d5c 0 5%,#cf6a2a 6% 14%,transparent 15%),radial-gradient(circle at 30% 70%,#d4eef5 0 5%,transparent 7%),radial-gradient(circle at 18% 28%,#cf6a2a 0 8%,transparent 10%),linear-gradient(125deg,#0c1a1e,#1a6b6e 45%,#a3511e);filter:saturate(.6) sepia(.15);border:1px solid rgba(207,106,42,.25)}.grotto-content{max-width:42rem;position:relative;z-index:4}.grotto .section-title{color:#ff9d5c}.coral{position:absolute;top:18%;height:60%;width:140px;z-index:2;fill:none;stroke:#cf6a2a;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:.2}.coral path+path{stroke-width:3}.coral-left{left:0}.coral-right{right:0}
.abyss{height:60vh;background:#0c1a1e;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}.abyss:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(255,157,92,.08),transparent 26%)}.abyss-content{position:relative;z-index:2}.abyss-text{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:clamp(1.35rem,3vw,2.1rem);color:#ff9d5c;margin:0 0 1rem}.typewriter{display:inline-block;white-space:nowrap;overflow:hidden;border-right:2px solid #ff9d5c;width:0;animation:typewrite 3.2s steps(28,end) forwards,caret .8s step-end infinite}@keyframes typewrite{to{width:28ch}}@keyframes caret{50%{border-color:transparent}}.abyss-signature{font-family:"Cormorant Garamond",Georgia,serif;font-size:2rem;letter-spacing:.04em;color:#ff9d5c;text-shadow:0 0 20px rgba(255,157,92,.45),0 0 60px rgba(255,157,92,.16);opacity:0;animation:glowIn 1s ease 3.5s forwards}@keyframes glowIn{to{opacity:1}}
@media (max-width:768px){body{font-size:1.05rem}.fish-4,.fish-5{display:none}.hero-fish{width:68px}.section-content{width:calc(100% - 2rem);margin-inline:1rem}.shallows,.reef,.grotto{padding-left:0;padding-right:0}.tutorial-step{margin-inline:1rem;padding:1.4rem;max-width:none}.bubbles span:nth-child(n+11){display:none}.reef-photo{width:calc(100% - 2rem);height:210px}.coral{width:80px;opacity:.14}.hero-line{font-size:.95rem}}@media (max-width:480px){.wordmark{font-size:clamp(3rem,16vw,4.4rem)}.section-title{font-size:clamp(1.8rem,10vw,2.4rem)}.tutorial-step{border-radius:18px}.typewriter{max-width:calc(100vw - 2rem)}}