.be-hero{position:relative;isolation:isolate;height:calc(100svh - 100px);min-height:520px;max-height:1000px;overflow:hidden;background:#030610}
.be-hero-city{position:absolute;inset:0;z-index:-3;background:url('../hero-city-clean.png') center/cover no-repeat;filter:brightness(.48)}
.be-light-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.be-side-character{position:absolute;bottom:-3%;height:100%;width:36%;object-fit:contain;object-position:center bottom;z-index:2;filter:drop-shadow(0 0 16px #00dcff40);pointer-events:none;animation:be-character-float 7s ease-in-out infinite}
.be-side-mia{left:-3%}.be-side-minato{right:-3%;animation-delay:-3s}
.be-center-title{position:absolute;left:50%;top:47%;width:76%;aspect-ratio:3/1;transform:translate(-50%,-50%);z-index:3;margin:0;perspective:900px;pointer-events:none}
.be-title-piece{position:absolute;inset:0;clip-path:var(--clip);animation:be-letter-pop 4s ease-in-out infinite;animation-delay:calc(-1 * var(--phase));transform-origin:center}
.be-title-piece img{width:100%;height:100%;display:block;object-fit:contain}
.be-motion-toggle{position:absolute;right:20px;bottom:20px;z-index:4;color:#fff;background:#030610c9;border:1px solid #5ddcff80;border-radius:4px;padding:10px 14px;font:inherit;font-size:13px;cursor:pointer}
.be-hero-scroll{position:absolute;bottom:20px;left:20px;color:#5ddcff;letter-spacing:.12em;font-size:12px;z-index:4}
.be-hero.is-paused *{animation-play-state:paused!important}
@keyframes be-letter-pop{0%,100%{transform:translateY(0) translateZ(0) rotateX(0)}50%{transform:translateY(-10px) translateZ(22px) rotateX(3deg)}}
@keyframes be-character-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(max-width:800px){.be-hero{min-height:600px;height:calc(100svh - 80px)}.be-side-character{height:78%;width:50%;bottom:0}.be-side-mia{left:-8%}.be-side-minato{right:-8%}.be-center-title{width:96%;top:34%}}
@media(max-width:480px){.be-hero{min-height:540px;max-height:760px}.be-side-character{height:69%;width:66%}.be-side-mia{left:-15%}.be-side-minato{right:-15%}.be-center-title{top:28%;width:100%}.be-motion-toggle{right:12px;bottom:16px;font-size:12px}.be-hero-scroll{left:12px;bottom:20px}}
@media(prefers-reduced-motion:reduce){.be-title-piece,.be-side-character{animation:none}}

/* Independent glyph assets */
.be-center-title{aspect-ratio:auto;width:65%;top:47%;filter:drop-shadow(0 3px 6px #000)}
.be-title-row{display:flex;align-items:center;justify-content:center;gap:0;line-height:0}
.be-title-row+.be-title-row{margin-top:-4%}
.be-title-glyph{display:block;position:relative;flex:1;min-width:0;animation:be-letter-pop 4s ease-in-out infinite;animation-delay:calc(-1 * var(--phase));will-change:transform}
.be-title-glyph img{width:100%;height:auto;display:block}
.glyph-be{flex:1.65}.glyph-dash{flex:.75}
.be-title-row:nth-child(2){padding-inline:5%}
@media(max-width:800px){.be-center-title{width:90%;top:30%}}
@media(max-width:480px){.be-center-title{width:96%;top:25%}}
@media(prefers-reduced-motion:reduce){.be-title-glyph{animation:none}}

/* Sequential title entrance */
.be-center-title{width:76%;aspect-ratio:3/1;perspective:1000px;pointer-events:auto}
.be-center-title.is-restarting .be-title-glyph{animation:none!important}
.be-title-row{position:absolute;left:9%;right:9%;top:0;height:58%;gap:0}
.be-title-row:nth-child(2){top:43%;height:58%;padding-inline:0;left:16%;right:12%;margin-top:0}
.be-title-glyph{height:100%;animation:be-title-entrance .8s cubic-bezier(.16,.8,.24,1) var(--entrance-delay) both;transform-origin:center;will-change:auto}
.be-title-glyph+.be-title-glyph{margin-left:-5%}
.be-title-glyph img{width:100%;height:100%;object-fit:contain}
@keyframes be-title-entrance{0%{opacity:0;transform:translateZ(-550px) scale(.25);filter:blur(8px)}25%{opacity:1}72%{transform:translateZ(90px) scale(1.08);filter:blur(0)}100%{opacity:1;transform:translateZ(0) scale(1);filter:blur(0)}}
@media(max-width:800px){.be-center-title{width:96%;top:30%}}
@media(max-width:480px){.be-center-title{width:100%;top:25%}}
@media(prefers-reduced-motion:reduce){.be-title-glyph{animation:none;opacity:1;transform:none;filter:none}}


/* Individually reconstructed bordered assets */
.be-center-title{aspect-ratio:2.5/1}
.be-title-row{left:0;right:0;height:72%;top:0}
.be-title-row:nth-child(2){left:8%;right:6%;top:32%;height:72%}
.be-title-glyph+.be-title-glyph{margin-left:-11%}
.glyph-be{flex:1.4}.glyph-dash{flex:.8}

/* Whole original logo: one zoom, then hold */
.be-center-title{aspect-ratio:3/1}
.be-whole-logo{display:block;width:100%;height:100%;object-fit:contain;transform-origin:center;animation:be-whole-zoom 1.35s cubic-bezier(.16,.75,.25,1) both}
.be-center-title.is-restarting .be-whole-logo{animation:none!important}
@keyframes be-whole-zoom{0%{opacity:0;transform:scale(.08);filter:blur(9px)}18%{opacity:1}72%{opacity:1;transform:scale(1.1);filter:blur(0)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.be-whole-logo{animation:none;opacity:1;transform:none;filter:none}}