.ocean-intro{position:fixed;inset:0;z-index:10000;overflow:hidden;background:radial-gradient(ellipse at 50% -30%,#8ef2ff 0%,#167aa8 28%,#063b62 56%,#010d23 100%);color:white;isolation:isolate;animation:intro-reveal 1.2s ease-out both;touch-action:manipulation}
.intro-water{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.intro-rays{position:absolute;inset:-60%;background:repeating-conic-gradient(from 165deg at 50% 0%,transparent 0deg 8deg,#8fefff14 10deg 13deg,transparent 16deg 26deg);transform-origin:50% 0%;animation:intro-rays 9s ease-in-out both;pointer-events:none}
.intro-hunter,.intro-prey{position:absolute;left:0;top:43%;object-fit:contain;pointer-events:none;will-change:transform,opacity}
.intro-hunter{width:46vw;filter:brightness(0);z-index:3;animation:intro-hunt 9s linear both}
.intro-prey{width:clamp(38px,7vw,100px);filter:brightness(.12);z-index:2;animation:intro-prey 9s linear both}
.intro-title{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:2;pointer-events:none;font:1000 clamp(64px,14vw,190px)/.82 'Trebuchet MS',sans-serif;letter-spacing:-.065em;text-align:center;animation:intro-title 9s ease both}
.intro-title span:first-child{color:#ffdd43;text-shadow:0 4px 0 #df8a00,0 8px 0 #9a4a09,0 13px 25px #0009}
.intro-title span:last-child{color:#45d8ff;text-shadow:0 4px 0 #008bc6,0 8px 0 #064879,0 13px 25px #0009}
.intro-controls{position:absolute;z-index:5;bottom:max(28px,env(safe-area-inset-bottom));left:24px;right:24px;display:flex;justify-content:space-between;gap:16px}
.intro-controls button{font:700 15px/1.3 'Trebuchet MS',sans-serif;color:#e0f9ff;background:#031b35b8;border:1px solid #87dfff70;border-radius:30px;padding:13px 20px;cursor:pointer;min-height:48px}
.intro-controls button:focus-visible{outline:3px solid #ffe37b;outline-offset:4px}
.ocean-intro::after{content:'';position:absolute;inset:0;background:#031a47;z-index:3;pointer-events:none;animation:intro-deep 9s ease both}
.intro-title{z-index:4}
@keyframes intro-deep{0%,44%{opacity:0}63%,100%{opacity:1}}
.ocean-intro.intro-out{opacity:0;transition:opacity .5s ease;pointer-events:none}
@keyframes intro-reveal{from{filter:brightness(1.7);transform:scale(1.06)}to{filter:brightness(1);transform:scale(1)}}
@keyframes intro-rays{from{transform:rotate(-8deg) translateY(15%)}to{transform:rotate(6deg) translateY(-7%)}}
@keyframes intro-hunt{0%,10%{transform:translate(-110%,-50%) rotate(-3deg);opacity:0}18%{opacity:1}32%{transform:translate(3vw,-50%) rotate(2deg)}38%{transform:translate(8vw,-50%)}43%{transform:translate(26vw,-50%) rotate(-2deg);opacity:1}48%{transform:translate(30vw,-50%);opacity:1}60%,100%{transform:translate(45vw,-50%);opacity:0}}
@keyframes intro-prey{0%,14%{transform:translate(54vw,-50%);opacity:0}20%{opacity:1}35%{transform:translate(60vw,-35%)}40%{transform:translate(62vw,-50%);opacity:1}44%{transform:translate(65vw,-50%) scale(.65);opacity:1}45%,100%{transform:translate(66vw,-50%) scale(0);opacity:0}}
@keyframes intro-title{0%,64%{opacity:0;transform:translateY(12px) scale(.94)}86%,100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ocean-intro,.intro-rays,.intro-hunter,.intro-prey,.intro-title{animation:none}.intro-hunter,.intro-prey{display:none}.intro-title{opacity:1}.intro-rays{display:none}}
@media(prefers-reduced-motion:reduce){.ocean-intro::after{animation:none;opacity:1}}