/* A single motion language: drifting light, gentle depth, precise connections. */
:root{--motion-ease:cubic-bezier(.16,1,.3,1)}
.hero{--dive:0;--pointer-x:0px;--pointer-y:0px;--hero-shift:0px;--hero-opacity:1;--depth-opacity:0}
.hero-image{animation:water-drift 16s ease-in-out infinite alternate;will-change:transform}
.ocean-light{position:absolute;inset:-4%;z-index:-2;pointer-events:none;background:url('assets/deep-ocean.webp') center 35%/cover;mix-blend-mode:screen;opacity:.24;mask-image:linear-gradient(#000 0%,#000b 24%,transparent 72%);animation:light-drift 9s ease-in-out infinite alternate;will-change:transform,opacity}
.hero-shade{z-index:-1}
.hero:after{content:'';position:absolute;inset:0;pointer-events:none;background:#061322;opacity:var(--depth-opacity);z-index:-1}
.motion-active .hero-content{transform:translateY(calc(-50% + var(--hero-shift)));opacity:var(--hero-opacity);will-change:transform,opacity}
.motion-active .hero-content>*{animation:surface-arrival 1.3s var(--motion-ease) both}
.motion-active .hero-content h1{animation-delay:.1s}.motion-active .hero-positioning{animation-delay:.25s}
.dive-link span{animation:dive-cue 3s ease-in-out infinite}
.desktop-nav a:not(.nav-contact){position:relative}.desktop-nav a:not(.nav-contact):after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--motion-ease)}.desktop-nav a:hover:after,.desktop-nav a:focus-visible:after{transform:scaleX(1)}
.text-link span,.nav-contact span,.back-top span{display:inline-block;transition:transform .3s var(--motion-ease)}.text-link:hover span,.nav-contact:hover span{transform:translate(3px,-3px)}.back-top:hover span{transform:translateY(-4px)}
.motion-active .intro-grid h2{--chapter-progress:0}
.motion-active .intro-grid h2>.muted{display:inline-block;opacity:calc(.28 + var(--chapter-progress)*.72);transform:translateY(calc((1 - var(--chapter-progress))*16px));transition:opacity .15s linear,transform .15s linear}
.direction-figure svg{overflow:visible}.motion-active .direction-figure svg [data-draw]{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--motion-ease);transition-delay:var(--draw-delay,0ms)}
.motion-active .direction-row.diagram-visible svg [data-draw]{stroke-dashoffset:0}
.motion-active .direction-figure svg circle:not([data-draw]){opacity:.2;transition:opacity .8s ease 1s}.motion-active .diagram-visible .direction-figure svg circle:not([data-draw]){opacity:1}
.direction-figure{transition:transform .7s var(--motion-ease)}.direction-row:hover .direction-figure{transform:translateY(-5px)}
.section-arrival .section-label>span:first-child{animation:chapter-signal 1.3s ease-out}.direction-row.section-arrival .tiny-label{animation:chapter-signal 1.3s ease-out}
.exploration-grid article{transition:background .4s ease,box-shadow .4s ease}.exploration-grid article:hover{background:#0c263b;box-shadow:inset 0 2px #8edce970}
@keyframes water-drift{0%{transform:translate3d(calc(var(--pointer-x)*-.35),calc(var(--pointer-y)*-.35),0) scale(1.035)}50%{transform:translate3d(calc(var(--pointer-x)*-.35 - .6%),calc(var(--pointer-y)*-.35 - .4%),0) scale(1.065)}100%{transform:translate3d(calc(var(--pointer-x)*-.35 + .5%),calc(var(--pointer-y)*-.35 - .8%),0) scale(1.09)}}
@keyframes light-drift{0%{opacity:.12;transform:translate3d(var(--pointer-x),var(--pointer-y),0) scale(1.015)}45%{opacity:.28;transform:translate3d(calc(var(--pointer-x) - 1.3%),calc(var(--pointer-y) + .6%),0) scale(1.055)}100%{opacity:.17;transform:translate3d(calc(var(--pointer-x) + 1.4%),calc(var(--pointer-y) - .7%),0) scale(1.025)}}
@keyframes surface-arrival{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes dive-cue{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(6px);opacity:1}}
@keyframes chapter-signal{0%{color:#fff;text-shadow:0 0 18px #8edce9}100%{color:var(--accent);text-shadow:0 0 0 transparent}}
.motion-paused .hero-image,.motion-paused .ocean-light,.motion-paused .dive-link span,.motion-out-of-view .hero-image,.motion-out-of-view .ocean-light,.motion-out-of-view .dive-link span{animation-play-state:paused}
.motion-paused .hero-content{transform:translateY(-50%);opacity:1}.motion-paused .hero:after{opacity:0}.motion-paused .hero-content>*{animation:none}.motion-paused .intro-grid h2>.muted{opacity:1;transform:none}.motion-paused .reveal-ready{opacity:1;transform:none;transition:none}.motion-paused .direction-figure svg [data-draw]{stroke-dashoffset:0;transition:none}.motion-paused .direction-figure svg circle{opacity:1!important}.motion-paused .section-arrival *{animation:none!important}.motion-paused .direction-row:hover .direction-figure{transform:none}
@media(max-width:700px){.hero-bottom{flex-wrap:wrap;row-gap:20px}.hero-bottom .dive-link{position:absolute;right:0;bottom:0;max-width:155px}.hero-bottom p{margin-bottom:0}.ocean-light{animation-duration:12s;opacity:.14}.motion-active .hero-content{transform:translateY(calc(-50% + var(--hero-shift)*.35))}.direction-figure{display:none}}
@media(prefers-reduced-motion:reduce){.ocean-light{display:none}.hero-image{transform:none;animation:none}.motion-active .hero-content{transform:translateY(-50%);opacity:1}.hero:after{opacity:0}.motion-active .intro-grid h2>.muted{opacity:1;transform:none}.motion-active .direction-figure svg [data-draw]{stroke-dashoffset:0}.direction-row:hover .direction-figure{transform:none}}
