:root{--ink:#060a1d;--blue:#3548e8;--blue-light:#6f83ff;--white:#f5f6fb}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--ink)}
body{font-family:"DM Sans",sans-serif;color:var(--white);overflow:hidden}
.intro-stage{position:relative;width:100%;min-height:100svh;display:grid;place-items:center;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 50% 43%,#17215b 0,#0d1438 24%,#080d26 55%,#060a1d 82%)}
.intro-stage::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,transparent 49.95%,rgba(95,119,255,.06) 50%,transparent 50.05%),linear-gradient(transparent 49.95%,rgba(95,119,255,.04) 50%,transparent 50.05%)}
.intro-grid{position:absolute;inset:0;z-index:-1;opacity:.26;background:linear-gradient(rgba(88,112,236,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(88,112,236,.05) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(circle,#000,transparent 74%)}
.intro-halo{position:absolute;top:-48%;left:50%;width:90vw;height:90vw;transform:translateX(-50%);z-index:-1;background:radial-gradient(circle,rgba(70,89,235,.24),transparent 64%);filter:blur(18px)}
.intro-orbit{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);border:1px solid rgba(77,102,226,.13);border-radius:50%;z-index:-1}
.orbit-a{width:min(98vw,1520px);aspect-ratio:1}.orbit-b{width:min(72vw,1100px);aspect-ratio:1}.orbit-c{width:min(48vw,730px);aspect-ratio:1}
.intro-status{position:absolute;top:3%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:15px;color:#a8b6ff;font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:700;letter-spacing:.38em;white-space:nowrap}
.intro-status i{width:11px;height:11px;border-radius:50%;background:var(--blue);box-shadow:0 0 25px var(--blue)}
.intro-content{width:min(900px,90vw);display:flex;flex-direction:column;align-items:center;position:relative;z-index:2}
.nexus-logo-card{position:relative;width:min(860px,90vw);height:300px;display:flex;align-items:center;justify-content:center;gap:32px;border:2px solid rgba(53,72,232,.78);border-radius:34px;background:linear-gradient(135deg,rgba(6,10,29,.9),rgba(12,18,58,.72));box-shadow:0 0 0 17px rgba(53,72,232,.055),0 32px 90px rgba(53,72,232,.28),inset 0 0 80px rgba(53,72,232,.2);overflow:hidden}
.nexus-logo-card::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(70,92,241,.21),transparent 68%)}
.logo-scan{position:absolute;left:12%;right:12%;height:1px;top:20%;background:linear-gradient(90deg,transparent,#617bff,transparent);box-shadow:0 0 18px #617bff;animation:scan 4.5s ease-in-out infinite}
.logo-wordmark{width:380px;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;font-family:"Barlow Condensed",sans-serif;font-size:128px;font-weight:900;font-style:italic;line-height:.75;letter-spacing:-.13em;white-space:nowrap;transform:scaleX(1.03)}
.logo-wordmark span{display:inline-block;color:var(--white);text-shadow:0 0 28px rgba(255,255,255,.08);transform:skewX(-2deg)}
.logo-wordmark .accent-letter{position:relative;color:var(--blue);font-size:1.08em;text-shadow:0 0 32px rgba(53,72,232,.46);z-index:2}
.logo-wordmark .accent-letter::before,.logo-wordmark .accent-letter::after{content:"";position:absolute;left:46%;width:8px;height:46%;background:var(--blue);transform:translateX(-50%) skewX(-16deg);box-shadow:0 0 18px rgba(53,72,232,.5);z-index:-1}
.logo-wordmark .accent-letter::before{top:-2%}.logo-wordmark .accent-letter::after{bottom:-2%;transform:translateX(-50%) skewX(16deg)}
.logo-divider{height:155px;width:6px;background:var(--blue);box-shadow:0 0 22px rgba(80,107,245,.6);z-index:1}
.logo-copy{width:285px;display:flex;flex-direction:column;align-items:flex-start;font-family:"Barlow Condensed",sans-serif;font-weight:800;line-height:.82;letter-spacing:.055em;z-index:1}
.logo-copy strong{font-size:69px;color:var(--white)}.logo-copy span{font-size:53px;color:var(--blue)}.logo-copy small{font-size:49px;color:var(--white)}
.intro-signature{font-family:"Barlow Condensed",sans-serif;font-size:clamp(28px,4.2vw,55px);font-weight:800;letter-spacing:.015em;margin:48px 0 32px;text-align:center}.intro-signature strong{color:var(--blue)}
.solution-promise{margin:-18px 0 29px;font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:600;letter-spacing:.22em;color:#8792ba;text-align:center}.solution-promise strong{color:#bcc6ef}
.enter-button{position:relative;width:285px;height:60px;padding:0 7px 0 25px;display:flex;align-items:center;gap:12px;border:1px solid #758bff;background:linear-gradient(110deg,#3e55d9,#6077ff);box-shadow:0 16px 50px rgba(61,83,220,.4);color:#fff;font-family:"Barlow Condensed",sans-serif;font-size:16px;font-weight:700;letter-spacing:.16em;cursor:pointer;overflow:hidden;transition:transform .3s,box-shadow .3s}
.enter-button::before{content:"";position:absolute;width:30px;height:30px;left:50%;top:50%;border:1px solid rgba(255,255,255,.7);border-radius:50%;transform:translate(-50%,-50%) scale(0);opacity:0}
.enter-button:hover{transform:translateY(-3px);box-shadow:0 22px 65px rgba(61,83,220,.56)}.enter-button:hover::before{animation:buttonPulse 1.3s ease-out infinite}
.enter-button span{flex:1}.enter-button b{width:45px;height:45px;display:grid;place-items:center;background:rgba(4,8,28,.3);font-family:"DM Sans",sans-serif;font-size:17px}
.intro-foot{position:absolute;bottom:28px;font-family:"Barlow Condensed",sans-serif;font-size:10px;letter-spacing:.25em;color:#536086}.intro-foot.left{left:34px}.intro-foot.right{right:34px}.intro-foot.right::before{content:"";display:inline-block;width:6px;height:6px;margin-right:10px;border-radius:50%;background:#51d6b0;box-shadow:0 0 10px #51d6b0}
@keyframes scan{0%,100%{top:16%;opacity:.2}50%{top:83%;opacity:.9}}@keyframes buttonPulse{0%{opacity:.8;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(12)}}

/* Point d’impact, deux courants de vague, puis bascule */
.impact-transition{position:fixed;inset:0;z-index:100;pointer-events:none;visibility:hidden;overflow:hidden}
.impact-transition.active{visibility:visible}
.impact-point{position:absolute;left:var(--impact-x,50%);top:var(--impact-y,50%);width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 16px 7px #89a0ff,0 0 45px 18px rgba(76,104,255,.8);opacity:0;transform:translate(-50%,-50%) scale(.2)}
.active .impact-point{animation:impact .42s ease-out forwards}
.impact-ring{position:absolute;left:var(--impact-x,50%);top:var(--impact-y,50%);width:30px;height:30px;border:2px solid rgba(185,200,255,.9);border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.2)}
.active .ring-one{animation:ringOut .8s .08s ease-out forwards}.active .ring-two{animation:ringOut 1s .16s ease-out forwards}.active .ring-three{animation:ringOut 1.15s .22s ease-out forwards}
.logo-current{position:absolute;left:var(--logo-x,50%);top:var(--logo-y,42%);width:min(900px,92vw);height:min(340px,48vw);border:2px solid rgba(122,142,255,.78);border-radius:42% 58% 47% 53% / 54% 43% 57% 46%;opacity:0;transform:translate(-50%,-50%) scale(.78);box-shadow:0 0 30px rgba(69,93,246,.45),inset 0 0 24px rgba(82,106,255,.18)}
.logo-current::before{content:"";position:absolute;inset:-11px;border:1px solid rgba(94,119,255,.36);border-radius:56% 44% 61% 39% / 45% 61% 39% 55%}
.active .current-one{animation:currentWrap 1.15s .24s cubic-bezier(.25,.7,.2,1) forwards}
.active .current-two{animation:currentWrap 1.25s .36s cubic-bezier(.25,.7,.2,1) forwards;transform:translate(-50%,-50%) scale(.7) rotate(4deg)}
.active .current-three{animation:currentWrap 1.35s .46s cubic-bezier(.25,.7,.2,1) forwards;transform:translate(-50%,-50%) scale(.64) rotate(-5deg)}
.wave{position:absolute;left:-20vw;width:140vw;height:54vh;border-radius:50%;background:linear-gradient(180deg,rgba(99,124,255,.18),#152568 27%,#08102e 70%);box-shadow:inset 0 15px 45px rgba(112,139,255,.36),0 -10px 45px rgba(75,104,255,.3);transform:translateY(70vh) rotate(0);opacity:0}
.wave-one{bottom:-34vh}.wave-two{top:-36vh;background:linear-gradient(0deg,rgba(99,124,255,.2),#20317d 27%,#08102e 70%);transform:translateY(-70vh)}
.active .wave-one{animation:waveUp 1.35s .38s cubic-bezier(.66,0,.22,1) forwards}.active .wave-two{animation:waveDown 1.35s .48s cubic-bezier(.66,0,.22,1) forwards}
.transition-flash{position:absolute;inset:0;background:radial-gradient(circle at var(--impact-x,50%) var(--impact-y,50%),#90a6ff 0,#273a9a 18%,#070c24 65%);opacity:0}.active .transition-flash{animation:flashIn .75s 1.05s ease forwards}
.transition-n{position:absolute;left:50%;top:50%;font-family:"Barlow Condensed",sans-serif;font-size:100px;font-weight:900;font-style:italic;color:white;opacity:0;transform:translate(-50%,-50%) scale(.65);text-shadow:0 0 35px #647dff}.active .transition-n{animation:nIn .55s 1.23s ease forwards}
@keyframes impact{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.8)}100%{opacity:0;transform:translate(-50%,-50%) scale(.4)}}@keyframes ringOut{0%{opacity:.85;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(13)}}@keyframes currentWrap{0%{opacity:0;transform:translate(-50%,-50%) scale(.72) rotate(-3deg)}28%{opacity:.95}70%{opacity:.72;transform:translate(-50%,-50%) scale(1.03) rotate(3deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.7) rotate(-2deg);border-radius:50%}}@keyframes waveUp{0%{opacity:0;transform:translateY(70vh) rotate(-4deg)}18%{opacity:1}100%{opacity:1;transform:translateY(-31vh) rotate(2deg);border-radius:44% 56% 0 0}}@keyframes waveDown{0%{opacity:0;transform:translateY(-70vh) rotate(4deg)}18%{opacity:1}100%{opacity:1;transform:translateY(31vh) rotate(-2deg);border-radius:0 0 56% 44%}}@keyframes flashIn{to{opacity:1}}@keyframes nIn{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(max-width:720px){.intro-status{top:6%;font-size:9px;letter-spacing:.25em}.nexus-logo-card{height:220px;gap:14px;border-radius:23px}.logo-wordmark{width:220px;font-size:76px}.logo-divider{width:4px;height:105px}.logo-copy{width:180px}.logo-copy strong{font-size:46px}.logo-copy span{font-size:34px}.logo-copy small{font-size:32px}.intro-signature{margin-top:38px}.intro-foot{display:none}.orbit-a{width:160vw}.orbit-b{width:115vw}}
@media(max-width:430px){.nexus-logo-card{width:94vw;height:195px;gap:9px}.logo-wordmark{width:175px;font-size:62px}.logo-divider{height:92px}.logo-copy{width:137px}.logo-copy strong{font-size:37px}.logo-copy span{font-size:27px}.logo-copy small{font-size:25px}.enter-button{width:260px}.intro-signature{font-size:32px}}
@media(prefers-reduced-motion:reduce){.logo-scan,.enter-button:hover::before{animation:none}}

/* CMS reference: near-black navy, pure white and electric indigo */
:root{--ink:#03071c;--blue:#303be8;--blue-light:#5261ff;--white:#f7f7f8}
.intro-stage{background:radial-gradient(circle at 50% 42%,#111a58 0,#080f35 29%,#030821 58%,#020617 86%)}
.intro-halo{background:radial-gradient(circle,rgba(48,59,232,.32),transparent 64%)}
.nexus-logo-card{background:#02071c;border-color:rgba(48,59,232,.92);box-shadow:0 0 0 17px rgba(48,59,232,.055),0 32px 95px rgba(48,59,232,.34),inset 0 0 70px rgba(48,59,232,.12)}
.nexus-logo-card::before{background:radial-gradient(ellipse at center,rgba(48,59,232,.13),transparent 65%)}
.logo-wordmark{font-family:"Russo One",sans-serif;font-style:normal;font-size:112px;font-weight:400;letter-spacing:-.16em;transform:scaleX(1.06)}
.logo-wordmark span{color:#f7f7f8;transform:skewX(0);text-shadow:0 0 18px rgba(255,255,255,.08)}
.logo-wordmark .accent-letter{color:#303be8;font-size:1.1em;text-shadow:0 0 28px rgba(48,59,232,.54);transform:scaleX(.92)}
.logo-wordmark .accent-letter::before,.logo-wordmark .accent-letter::after{display:none}
.logo-copy{font-family:"Russo One",sans-serif;font-weight:400;line-height:.88;letter-spacing:.015em}
.logo-copy strong{font-size:57px}.logo-copy span{font-size:42px;color:#303be8}.logo-copy small{font-size:38px}
.logo-divider{background:#303be8;box-shadow:0 0 18px rgba(48,59,232,.7)}

/* A single large water drop grows behind the logo */
.water-drop{position:absolute;left:var(--drop-x,50%);top:var(--drop-y,70%);width:18px;height:18px;z-index:1;border-radius:50% 50% 52% 48% / 58% 58% 42% 42%;opacity:0;transform:translate(-50%,-50%) scale(.15);background:radial-gradient(circle at 35% 24%,rgba(185,197,255,.9) 0 2%,rgba(82,97,255,.72) 10%,rgba(48,59,232,.9) 35%,rgba(14,25,88,.96) 68%,#03071c 100%);box-shadow:0 0 28px rgba(82,97,255,.9),0 0 80px rgba(48,59,232,.52),inset -18px -20px 35px rgba(2,7,28,.72);will-change:transform,border-radius,opacity}
.water-drop::before{content:"";position:absolute;inset:8%;border-radius:inherit;border:1px solid rgba(187,199,255,.28);box-shadow:inset 9px 10px 22px rgba(255,255,255,.1)}
.water-highlight{position:absolute;left:24%;top:17%;width:20%;height:11%;border-radius:50%;background:rgba(235,239,255,.75);filter:blur(4px);transform:rotate(-24deg)}
.water-ring{position:absolute;left:50%;top:50%;width:100%;height:100%;border:2px solid rgba(112,129,255,.58);border-radius:50%;transform:translate(-50%,-50%);opacity:0}
.drop-active .water-drop{animation:dropBehindLogo 1.52s cubic-bezier(.22,.72,.22,1) forwards}
.drop-active .water-ring-one{animation:dropRing 1s .26s ease-out forwards}.drop-active .water-ring-two{animation:dropRing 1.18s .4s ease-out forwards}
.drop-active .intro-content{z-index:3}.drop-active .nexus-logo-card{animation:logoRefraction 1.25s .12s ease-in-out both}
@keyframes dropBehindLogo{0%{opacity:0;transform:translate(-50%,-50%) scale(.15);border-radius:50%}12%{opacity:1;transform:translate(-50%,-50%) scale(2)}35%{left:50%;top:43%;width:26vmax;height:26vmax;transform:translate(-50%,-50%) scale(1);border-radius:44% 56% 61% 39% / 57% 42% 58% 43%}62%{left:50%;top:43%;width:35vmax;height:35vmax;border-radius:57% 43% 48% 52% / 45% 59% 41% 55%}100%{left:50%;top:50%;width:110vmax;height:110vmax;opacity:1;transform:translate(-50%,-50%) scale(1.35);border-radius:50%}}
@keyframes dropRing{0%{opacity:.75;transform:translate(-50%,-50%) scale(.45)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.4)}}
@keyframes logoRefraction{0%,100%{filter:none;transform:scale(1)}42%{filter:brightness(1.16) saturate(1.15);transform:scale(1.012)}60%{filter:brightness(.92) saturate(1.3);transform:scale(.998)}}
.impact-transition{background:transparent}.transition-flash{background:radial-gradient(circle at 50% 50%,rgba(48,59,232,.62),#03071c 72%)}
.active .transition-flash{animation:flashIn .42s 1.35s ease forwards}.active .transition-n{animation:nIn .4s 1.46s ease forwards}
.impact-transition .logo-current,.impact-transition .wave{display:none}
@media(max-width:720px){.logo-wordmark{font-size:67px;width:220px}.logo-copy strong{font-size:40px}.logo-copy span{font-size:29px}.logo-copy small{font-size:27px}}
@media(max-width:430px){.logo-wordmark{font-size:54px;width:173px}.logo-copy strong{font-size:32px}.logo-copy span{font-size:23px}.logo-copy small{font-size:21px}}

/* Slower, organic liquid motion */
.drop-active .water-drop{animation:dropBehindLogo 3.6s cubic-bezier(.18,.64,.22,1) forwards}
.drop-active .water-ring-one{animation:dropRing 2.2s .42s cubic-bezier(.18,.55,.2,1) forwards}
.drop-active .water-ring-two{animation:dropRing 2.65s .72s cubic-bezier(.18,.55,.2,1) forwards}
.drop-active .nexus-logo-card{animation:logoRefraction 3s .3s ease-in-out both}
.active .impact-point{animation:impact .72s ease-out forwards}
.active .ring-one{animation:ringOut 1.65s .12s ease-out forwards}
.active .ring-two{animation:ringOut 2s .3s ease-out forwards}
.active .ring-three{animation:ringOut 2.35s .48s ease-out forwards}
.active .transition-flash{animation:flashIn .72s 3.18s ease forwards}
.active .transition-n{animation:nIn .6s 3.38s ease forwards}
@keyframes dropBehindLogo{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.1);border-radius:50%}
  8%{opacity:.72;transform:translate(-50%,-50%) scale(.85);border-radius:48% 52% 49% 51% / 54% 47% 53% 46%}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.45);border-radius:44% 56% 54% 46% / 58% 43% 57% 42%}
  32%{left:46%;top:47%;width:20vmax;height:22vmax;transform:translate(-50%,-50%) scale(1);border-radius:41% 59% 48% 52% / 55% 44% 56% 45%}
  46%{left:52%;top:42%;width:29vmax;height:27vmax;border-radius:55% 45% 60% 40% / 43% 58% 42% 57%}
  60%{left:48%;top:45%;width:38vmax;height:36vmax;border-radius:47% 53% 44% 56% / 59% 46% 54% 41%}
  74%{left:51%;top:47%;width:55vmax;height:52vmax;border-radius:56% 44% 52% 48% / 46% 55% 45% 54%}
  88%{left:50%;top:49%;width:82vmax;height:80vmax;border-radius:49% 51% 47% 53% / 52% 48% 52% 48%}
  100%{left:50%;top:50%;width:125vmax;height:125vmax;opacity:1;transform:translate(-50%,-50%) scale(1.25);border-radius:50%}
}
@keyframes dropRing{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}18%{opacity:.58}65%{opacity:.3}100%{opacity:0;transform:translate(-50%,-50%) scale(3.25)}}
@keyframes logoRefraction{0%,100%{filter:none;transform:scale(1)}22%{filter:brightness(1.06) saturate(1.08);transform:scale(1.004)}42%{filter:brightness(1.13) saturate(1.18);transform:scale(1.009)}62%{filter:brightness(.98) saturate(1.25);transform:scale(1.003)}80%{filter:brightness(1.05) saturate(1.12);transform:scale(1.006)}}

/* Symmetrical falling drop and concentric impact behind the logo */
.water-drop{left:var(--drop-x,50%);top:-90px;width:58px;height:72px;opacity:0;border-radius:52% 48% 50% 50% / 61% 61% 39% 39%;transform:translate(-50%,-50%) scale(.72);background:radial-gradient(circle at 34% 24%,rgba(247,249,255,.94) 0 4%,rgba(142,159,255,.82) 13%,rgba(57,71,222,.92) 43%,rgba(12,21,78,.98) 78%,#03071c 100%);box-shadow:0 0 24px rgba(113,132,255,.8),0 0 55px rgba(48,59,232,.42),inset -10px -13px 19px rgba(2,7,28,.66)}
.water-drop::before{inset:7%;border-radius:inherit}
.water-highlight{left:25%;top:16%;width:25%;height:14%}
.drop-active .water-drop{animation:fallingDrop 2.05s cubic-bezier(.34,.03,.46,.98) forwards}
.screen-ripple{position:absolute;left:var(--drop-x,50%);top:var(--drop-y,43%);z-index:1;width:90px;height:90px;border:2px solid rgba(145,161,255,.78);border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.12);box-shadow:0 0 18px rgba(70,91,244,.55),inset 0 0 15px rgba(84,104,255,.18)}
.screen-ripple::after{content:"";position:absolute;inset:10px;border:1px solid rgba(213,220,255,.35);border-radius:50%}
.drop-active .screen-ripple-one{animation:symmetricRipple 2.05s 1.42s cubic-bezier(.12,.54,.18,1) forwards}
.drop-active .screen-ripple-two{animation:symmetricRipple 2.35s 1.62s cubic-bezier(.12,.54,.18,1) forwards}
.drop-active .screen-ripple-three{animation:symmetricRipple 2.65s 1.82s cubic-bezier(.12,.54,.18,1) forwards}
.water-flood{position:absolute;left:var(--drop-x,50%);top:var(--drop-y,43%);z-index:1;width:72px;height:72px;border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.1);background:radial-gradient(circle,rgba(67,83,228,.72),#121f69 44%,#03071c 78%);box-shadow:0 0 70px rgba(48,59,232,.48)}
.drop-active .water-flood{animation:symmetricFlood 2.15s 2.25s cubic-bezier(.22,.63,.19,1) forwards}
.drop-active .nexus-logo-card{animation:logoRefraction 3.4s 1.25s ease-in-out both}
@keyframes fallingDrop{
  0%{top:-90px;opacity:0;transform:translate(-50%,-50%) scale(.72)}
  10%{opacity:1}
  72%{top:calc(var(--drop-y,43%) - 46px);height:72px;transform:translate(-50%,-50%) scale(1)}
  86%{top:var(--drop-y,43%);height:32px;width:76px;border-radius:50%;opacity:1;transform:translate(-50%,-50%) scale(1.18,.55)}
  100%{top:var(--drop-y,43%);height:8px;width:118px;border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(1.45,.22)}
}
@keyframes symmetricRipple{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.12)}
  12%{opacity:.9}
  58%{opacity:.48}
  100%{opacity:0;transform:translate(-50%,-50%) scale(10)}
}
@keyframes symmetricFlood{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}
  12%{opacity:.35}
  38%{opacity:.68}
  100%{opacity:1;transform:translate(-50%,-50%) scale(32)}
}
.impact-transition .impact-point,.impact-transition .impact-ring{display:none}
.active .transition-flash{animation:flashIn .68s 4.05s ease forwards}
.active .transition-n{animation:nIn .55s 4.2s ease forwards}

/* Foreground water test: the complete liquid sequence passes over the logo */
.water-drop,.screen-ripple,.water-flood{z-index:5}
.drop-active .intro-content{z-index:3}
.water-drop{backdrop-filter:blur(1.5px) saturate(1.15)}
.screen-ripple{mix-blend-mode:screen}
.water-flood{background:radial-gradient(circle,rgba(83,99,239,.56),rgba(30,44,126,.86) 46%,#03071c 80%)}

/* Ripple-only sequence. Water and transition originate from the N. */
.water-drop{display:none}
.drop-active .screen-ripple-one{animation:symmetricRipple 2.15s .08s cubic-bezier(.12,.54,.18,1) forwards}
.drop-active .screen-ripple-two{animation:symmetricRipple 2.45s .28s cubic-bezier(.12,.54,.18,1) forwards}
.drop-active .screen-ripple-three{animation:symmetricRipple 2.75s .5s cubic-bezier(.12,.54,.18,1) forwards}
.drop-active .water-flood{animation:symmetricFlood 2.35s 1.15s cubic-bezier(.22,.63,.19,1) forwards}
.water-n{position:absolute;left:var(--drop-x,50%);top:var(--drop-y,43%);z-index:7;font-family:"Russo One",sans-serif;font-size:92px;color:#fff;opacity:0;transform:translate(-50%,-50%) scale(.55);text-shadow:0 0 18px #fff,0 0 48px #5261ff;pointer-events:none}
.drop-active .water-n{animation:waterNOrigin 2.2s 1.15s ease forwards}
.drop-active .nexus-logo-card{animation:logoRefraction 3.2s .15s ease-in-out both}
.impact-transition .transition-n{display:none}
.active .transition-flash{animation:flashIn .6s 3.32s ease forwards}
@keyframes waterNOrigin{0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}18%{opacity:1;transform:translate(-50%,-50%) scale(1)}68%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}

/* The N leads the transition; the original scene disappears under the first waves. */
.drop-active .water-n{animation:waterNOrigin 2.75s .12s ease forwards}
.drop-active .water-flood{animation:symmetricFlood 2.75s .48s cubic-bezier(.2,.62,.18,1) forwards}
.drop-active .intro-content,.drop-active .intro-status,.drop-active .intro-foot{animation:hideOriginalScene .55s .5s ease forwards}
.drop-active .intro-orbit,.drop-active .intro-grid,.drop-active .intro-halo{animation:hideOriginalScene .7s .62s ease forwards}
.water-flood{background:radial-gradient(circle,rgba(83,99,239,.94),rgba(25,39,121,.98) 43%,#03071c 78%)}
.active .transition-flash{animation:flashIn .5s 3.12s ease forwards}
@keyframes hideOriginalScene{to{opacity:0;visibility:hidden}}