/* Scoped cinematic brand banner. Each scene has its own exclusive visibility state. */
.brand-motion{container-type:inline-size;position:relative;isolation:isolate;overflow:visible;clip-path:inset(0 round 16px);min-width:0;aspect-ratio:1.05;border-radius:16px;background:#061326;color:#f5f9ff;box-shadow:0 26px 65px #06132630;font-family:Arial,sans-serif}.brand-motion *{box-sizing:border-box}.np-glow{position:absolute;inset:-25%;background:radial-gradient(ellipse at 70% 35%,#165fd970,transparent 50%),radial-gradient(ellipse at 20% 80%,#00d6e930,transparent 45%);transform:rotate(12deg) scale(1.15)}.np-grid{position:absolute;inset:0;background-image:linear-gradient(#b0d6ff08 1px,transparent 1px),linear-gradient(90deg,#b0d6ff08 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse,black,transparent 80%);transform:perspective(500px) rotateX(16deg) scale(1.2)}.np-circuit{position:absolute;inset:0;width:100%;height:100%;color:#51bdff;opacity:.25;stroke-width:1}.np-circuit path{stroke-dasharray:900;stroke-dashoffset:0}.np-top,.np-bottom{position:absolute;left:7%;right:7%;display:flex;align-items:center;justify-content:space-between;z-index:3}.np-top{top:7%;font-size:9px;letter-spacing:.13em;color:#aac4e6;gap:12px}.np-top i{display:inline-block;width:5px;height:5px;background:#49d9f9;border-radius:50%;margin-right:7px;box-shadow:0 0 12px #49d9f9}.np-count{white-space:nowrap;color:#50ceff;font-variant-numeric:tabular-nums}.np-content{position:absolute;inset:18% 4% 19%;display:none;flex-direction:column;justify-content:center;align-items:center;gap:14px;z-index:2}.np-symbol{height:105px;width:98px;color:#72dbff;filter:drop-shadow(0 0 15px #2499ff88)}.np-symbol svg{width:100%;height:100%}.np-label{font-size:11px;letter-spacing:.26em;color:#74cfff;line-height:1.2}.np-word{font-size:clamp(22px,6.5cqw,39px);font-weight:750;letter-spacing:-.055em;line-height:1.15;white-space:nowrap;text-align:center}.np-word span{color:#4ad5ff}.np-tagline{font-size:11px;color:#99afcd;text-align:center;line-height:1.5}.np-final{position:absolute;inset:20% 8% 20%;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:25px}.np-logo-plate{background:linear-gradient(120deg,#fff,#dbeaff);border-radius:8px;padding:8px 16px;box-shadow:0 0 50px #4b9fff30}.np-logo-plate img{display:block;width:100%;height:auto}.np-final-title{font-size:clamp(25px,8cqw,43px);line-height:1.12;letter-spacing:-.045em;font-weight:400}.np-final-title strong{color:#6bd8ff;font-weight:700}.np-final>span{font-size:8px;letter-spacing:.16em;color:#9ab5d9}.np-bottom{bottom:6%;gap:18px;justify-content:flex-end}.np-replay{font:11px Arial,sans-serif;color:#a9c8ef;background:transparent;border:0;padding:7px 0;cursor:pointer;white-space:nowrap}.np-replay:hover{color:white}.np-replay span{font-size:9px;margin-left:3px}.brand-motion[data-state="final"] .np-content{display:none}.brand-motion[data-state="final"] .np-final{display:flex}.brand-motion[data-state="final"] .np-circuit{opacity:.12}.brand-motion[data-state="word"] .np-symbol{position:absolute;top:calc(50% - 97px);left:calc(50% - 49px);height:105px;width:98px;opacity:.07;z-index:-1;box-shadow:none}.brand-motion[data-state="word"] .np-label{height:105px;display:flex;align-items:center;justify-content:center;letter-spacing:normal}.np-letter{font-size:96px;font-weight:750;line-height:1;color:#74cfff;text-shadow:0 0 28px #2499ff55}.brand-motion[data-motion="running"] .np-content.np-hit .np-word{animation:np-reveal .45s ease-out both}.brand-motion[data-motion="running"] .np-content.np-hit .np-label{animation:np-label .45s ease-out both}@keyframes np-reveal{from{opacity:0;transform:translateY(12px) scale(.96);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}@keyframes np-label{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}@keyframes np-draw{to{stroke-dashoffset:0}}@keyframes np-drift{from{transform:rotate(-15deg) scale(.85)}to{transform:rotate(12deg) scale(1.15)}}@media(max-width:800px){.brand-motion{aspect-ratio:1;max-height:430px}.np-word{font-size:7cqw}.np-final-title{font-size:8cqw}.np-top{font-size:8px}.np-final{gap:14px}}@media(prefers-reduced-motion:reduce){.brand-motion *{animation:none!important;transition:none!important}}

.np-symbol{background:linear-gradient(145deg,#fff,#cce8ff);border-radius:18%;padding:9px;box-shadow:0 0 32px #3fbaff45;filter:none;flex-shrink:0}.np-symbol svg{display:block;overflow:hidden}

/* Final frame is the no-JS fallback. Motion only runs under explicit script state. */
.brand-motion:not([data-motion]) .np-content{display:none}
.brand-motion:not([data-motion]) .np-final{display:flex}
.brand-motion:not([data-motion]) .np-bottom{display:none}
.brand-motion[data-motion="running"] .np-content{display:flex}
.brand-motion[data-motion="running"] .np-final{display:none}
.brand-motion[data-motion="running"] .np-glow{animation:np-drift 8s ease-in-out both}
.brand-motion[data-motion="running"] .np-circuit path{stroke-dashoffset:900;animation:np-draw 2.4s ease forwards}
.brand-motion:not([data-motion="running"]) .np-circuit{opacity:.12}
.np-controls{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;max-width:100%}
.np-controls button{max-width:100%;min-width:0;min-height:36px;white-space:normal;line-height:1.35}
.np-skip{font:11px/1.35 Arial,sans-serif;color:#c6dcf7;background:transparent;border:1px solid #729bc077;border-radius:4px;padding:7px 9px;cursor:pointer}
.np-skip:hover{color:#fff;background:#ffffff0d;border-color:#a9c8ef}
.np-skip[hidden]{display:none}
.np-replay:disabled{opacity:.65;cursor:default}
.np-controls button:focus-visible,.np-replay:focus-visible,.brand-motion:focus-visible{outline:2px solid #8bddff;outline-offset:4px}
@media(max-width:360px){.brand-motion{aspect-ratio:auto;width:100%;height:300px}.np-final{inset:18% 8% 24%;gap:12px}.np-controls{gap:6px}.np-controls button{font-size:10px}.np-skip{padding-inline:7px}}
@media(prefers-reduced-motion:reduce){.brand-motion .np-content{display:none!important}.brand-motion .np-final{display:flex!important}.brand-motion .np-circuit path{stroke-dashoffset:0!important}}

/* A decorative banner must never scroll when a keyboard control receives focus. */
@supports (overflow:clip){.brand-motion{overflow:clip;clip-path:none}}
@supports not (overflow:clip){.brand-motion:focus-visible{outline-offset:-4px}}