/* Fluid motion layer: progressive enhancement, native scrolling, readable text. */
:root{--water-ease:cubic-bezier(.18,.72,.14,1);--water-x:50%;--water-y:35%}
@view-transition{navigation:auto}
::view-transition-old(root){animation:water-page-out .52s cubic-bezier(.4,0,.9,.4) both}
::view-transition-new(root){animation:water-page-in .85s var(--water-ease) both}
@keyframes water-page-in{from{opacity:0;clip-path:ellipse(85% 18% at 50% 110%);transform:translateY(24px)}to{opacity:1;clip-path:ellipse(150% 150% at 50% 50%);transform:translateY(0)}}
@keyframes water-page-out{to{opacity:0;transform:translateY(-16px)}}
.water-atmosphere{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:.58;contain:strict}
.water-atmosphere::before,.water-atmosphere::after{content:"";position:absolute;inset:-35%;border-radius:42% 58% 60% 40% / 45% 35% 65% 55%;background:radial-gradient(ellipse at 25% 35%,#4bceec16,transparent 45%),conic-gradient(from 25deg at 60% 40%,transparent 20%,#a4eaf01a 31%,transparent 40%,#d1fa7510 62%,transparent 75%);filter:blur(24px);will-change:transform}
.motion-enabled .water-atmosphere::before{animation:water-current 26s ease-in-out infinite alternate}
.motion-enabled .water-atmosphere::after{animation:water-current 32s ease-in-out -12s infinite alternate-reverse;opacity:.65;background:radial-gradient(ellipse at 60% 40%,#75ccdf1c,transparent 44%),conic-gradient(from 170deg,transparent,#b9e9f016,transparent 60%)}
@keyframes water-current{0%{transform:translate3d(-4%,-3%,0) rotate(-12deg) scale(.94)}50%{transform:translate3d(4%,4%,0) rotate(6deg) scale(1.05)}100%{transform:translate3d(-2%,7%,0) rotate(19deg) scale(1.1)}}
main,footer{position:relative}.scroll-progress{height:3px;background:linear-gradient(90deg,#77d4e6,#c5fb8a,#b7f6ff);box-shadow:0 0 15px #9df6e666}
.motion-enabled .water-reveal{transition:opacity 1s var(--water-ease) var(--reveal-delay,0ms),translate 1.1s var(--water-ease) var(--reveal-delay,0ms),filter .8s var(--water-ease) var(--reveal-delay,0ms),box-shadow .35s,transform .5s!important}
.motion-enabled .water-reveal.reveal-pending{opacity:0;translate:0 38px;filter:blur(3px)}
.motion-enabled .water-reveal:not(.reveal-pending){filter:blur(0)}
.water-surface{position:relative;isolation:isolate;overflow:hidden}
.water-surface::after{content:"";position:absolute;inset:-100%;border-radius:45%;pointer-events:none;z-index:1;opacity:0;background:radial-gradient(ellipse at var(--water-x) var(--water-y),#b8f3ff26,transparent 32%),linear-gradient(112deg,transparent 40%,#ffffff22 49%,transparent 58%);transform:translateX(-25%) rotate(-8deg);transition:opacity .65s,transform 1.3s var(--water-ease)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.water-surface:hover::after{opacity:1;transform:translateX(18%) rotate(8deg)}.project-card:hover{transform:translateY(-6px);box-shadow:0 22px 55px #2b536b22}.project-card:hover .card-image img{transform:scale(1.035)}.button:hover{border-radius:18px 11px 18px 11px}}
.project-hero{position:relative;isolation:isolate;display:block;min-height:640px;overflow:hidden;padding:65px 6% 75px;background:#0c1b26}
.project-hero-copy{position:relative;z-index:2;max-width:690px}.project-hero h1{text-wrap:balance;font-size:clamp(38px,4.8vw,68px);max-width:670px}.project-deck{max-width:600px;color:#e0eaf0;text-shadow:0 1px 15px #07141ddd}.project-status{max-width:570px}.project-banner{position:absolute;inset:0;max-width:none!important;width:100%;border:0;border-radius:0;box-shadow:none;z-index:0;overflow:hidden;background:#0c1b26}.project-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#07151cf7 0%,#081820db 32%,#08182060 64%,#07151c10 100%),linear-gradient(0deg,#07151cbb,transparent 30%);pointer-events:none}.project-banner img{height:100%;max-height:none!important;width:100%;object-fit:cover;object-position:center}.project-banner figcaption{position:absolute;right:6%;bottom:15px;z-index:1;color:#d6e9f0;font-size:12px;text-shadow:0 1px 6px #000}
.motion-enabled .project-banner img{animation:water-banner-arrive 1.6s var(--water-ease) both}
@keyframes water-banner-arrive{from{transform:scale(1.045);opacity:.5}to{transform:scale(1);opacity:1}}
.project-card .card-image img{object-fit:cover;aspect-ratio:16/9}.project-card .card-image{background:#0e2230}.original-project-art{margin:35px 0;padding:20px;border:1px solid #bdd0d9;border-radius:20px;background:#ffffff8c}.original-project-art img{display:block;max-width:100%;height:auto;max-height:400px;margin:auto}.original-project-art figcaption{font-size:13px;color:#607480;margin-top:14px}.campaign-phase{display:grid;grid-template-columns:44px 1fr;gap:20px;margin:24px 0;padding:25px;border:1px solid #bcd5de;border-radius:24px;background:linear-gradient(135deg,#ffffffdd,#dfedf366);backdrop-filter:blur(14px)}.campaign-phase h3{font-size:22px;line-height:1.35;margin:0 0 14px;color:#1b4053}.campaign-phase p{font-size:17px;line-height:1.8;margin:0}.phase-number{color:#3e7083;border-bottom:1px solid #92becb;height:37px;font-size:17px}.phase-note{font-size:14px;color:#5d7381;line-height:1.6}
@media(max-width:700px){.project-hero{min-height:650px;padding:35px 6% 240px}.project-hero h1{font-size:38px;letter-spacing:-1px}.project-deck{font-size:17px}.project-banner img{object-position:65% bottom}.project-banner::after{background:linear-gradient(180deg,#07151cf2 0%,#07151ce0 45%,#07151c35 85%,#07151c60)}.project-banner figcaption{font-size:12px;left:6%;right:auto;bottom:10px}.campaign-phase{grid-template-columns:1fr;gap:12px;padding:20px}.phase-number{width:35px}.water-atmosphere{opacity:.35}.water-atmosphere::before,.water-atmosphere::after{filter:none}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none!important}.water-atmosphere{display:none}.water-surface::after{display:none}.water-reveal,.reveal-pending{opacity:1!important;translate:none!important;filter:none!important;transition:none!important}.project-banner img{animation:none!important}.water-surface::after{transition:none!important}}
/* Moving light across the darker hero surfaces evokes refracted water. */
.hero,.journal-intro,.project-cta{position:relative;isolation:isolate;overflow:hidden}
.hero::before,.journal-intro::before,.project-cta::before{content:"";position:absolute;inset:-30%;pointer-events:none;z-index:-1;background:repeating-radial-gradient(ellipse at 70% 20%,transparent 0 9%,#b9eeff09 10%,transparent 11% 20%);opacity:.8;transform:rotate(-12deg)}
.motion-enabled .hero::before,.motion-enabled .journal-intro::before,.motion-enabled .project-cta::before{animation:water-caustics 15s ease-in-out infinite alternate}
@keyframes water-caustics{from{transform:translate3d(-3%,-2%,0) rotate(-12deg) scale(1)}to{transform:translate3d(5%,4%,0) rotate(3deg) scale(1.15)}}
@media(prefers-reduced-motion:reduce){.hero::before,.journal-intro::before,.project-cta::before{animation:none!important}}
/* Hero-only WebGL refraction keeps typography and controls outside the effect. */
.liquid-canvas{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:0;opacity:0;transition:opacity .6s ease}
.liquid-ready>.liquid-canvas{opacity:1}.liquid-canvas[hidden]{display:none}.article-banner{position:relative}.article-banner figcaption{position:relative;z-index:1}.hero> :not(.liquid-canvas),.journal-intro> :not(.liquid-canvas){position:relative;z-index:1}
/* Keep text on the compositor-friendly reveal path; refraction belongs to imagery. */
.motion-enabled .water-reveal{transition:opacity .85s var(--water-ease) var(--reveal-delay,0ms),translate 1s var(--water-ease) var(--reveal-delay,0ms),box-shadow .35s,transform .5s!important;filter:none!important}
.motion-enabled .water-reveal.reveal-pending{filter:none!important}
.motion-suspended *, .motion-suspended *::before,.motion-suspended *::after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.liquid-canvas{display:none!important}}