@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@700;800;900&display=swap');

/* V3.7 // cinematic navigation + corrected hero typography */

/* NAME // Vietnamese-safe, harder silhouette than Inter without losing diacritics */
.hero__copy h1{
  font-family:"Be Vietnam Pro","Inter",sans-serif!important;
  font-weight:900!important;
  letter-spacing:-.045em!important;
  line-height:.98!important;
  font-feature-settings:"kern" 1,"liga" 1!important;
  text-rendering:geometricPrecision;
  transform:scaleX(.985);
  transform-origin:left center;
}

/* PROFILE RECORD // wider, brighter outer siren bloom */
.portrait-console{
  overflow:visible!important;
}
.portrait-console__bezel{
  box-shadow:
    -8px 0 24px rgba(255,48,74,.18),
    8px 0 26px rgba(90,223,255,.18),
    0 0 34px rgba(151,220,255,.10),
    0 0 72px rgba(66,169,255,.07)!important;
}
@keyframes profileSirenAura{
  0%,100%{
    filter:drop-shadow(-12px 0 24px rgba(255,48,74,.48)) drop-shadow(12px 0 23px rgba(90,223,255,.30)) drop-shadow(0 0 22px rgba(151,220,255,.14));
  }
  24%{
    filter:drop-shadow(-23px 0 45px rgba(255,48,74,.92)) drop-shadow(9px 0 20px rgba(90,223,255,.20)) drop-shadow(-7px 0 72px rgba(255,48,74,.31)) drop-shadow(0 0 30px rgba(255,255,255,.08));
  }
  50%{
    filter:drop-shadow(-8px 0 20px rgba(255,48,74,.20)) drop-shadow(23px 0 46px rgba(90,223,255,.88)) drop-shadow(8px 0 74px rgba(90,223,255,.30)) drop-shadow(0 0 30px rgba(255,255,255,.08));
  }
  76%{
    filter:drop-shadow(-17px 0 34px rgba(255,48,74,.56)) drop-shadow(17px 0 35px rgba(90,223,255,.55)) drop-shadow(0 0 54px rgba(127,210,255,.20));
  }
}

/* BOOT // SPD system handshake */
.boot__panel{position:relative;overflow:hidden!important}
.boot__panel::after{
  content:"";
  position:absolute;
  left:0;right:0;top:-16%;height:12%;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(90,223,255,.06),rgba(90,223,255,.30),rgba(255,255,255,.10),transparent);
  opacity:0;
  animation:bootScanner 2.7s cubic-bezier(.42,0,.58,1) infinite;
}
.boot-sequence{display:grid;gap:7px;margin:14px 0 10px;text-align:left;min-width:min(380px,76vw)}
.boot-sequence__row{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;color:#66869b;font:700 9px "Space Mono",monospace;letter-spacing:.08em;transition:color .18s,text-shadow .18s,opacity .18s;opacity:.58}
.boot-sequence__row b{font-weight:700;color:#527184;transition:color .18s,text-shadow .18s}
.boot-sequence__row.is-online{color:#b9d8e9;opacity:1}
.boot-sequence__row.is-online b{color:#63f3ba;text-shadow:0 0 9px rgba(57,231,166,.34)}
.boot-sequence__track{height:2px;background:rgba(116,207,255,.09);overflow:hidden;margin-top:2px}
.boot-sequence__track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#ff304a,#e6f7ff 48%,#58ddff);box-shadow:0 0 12px rgba(90,223,255,.55);transition:width 1.35s cubic-bezier(.2,.8,.2,1)}
.boot-sequence.is-running .boot-sequence__track i{width:100%}
body:not(.boot-sequence-ready) #enterSystem:not([hidden]){opacity:0!important;pointer-events:none!important;transform:translateY(5px)!important}
body.boot-sequence-ready #enterSystem:not([hidden]){animation:bootUnlock .5s cubic-bezier(.18,.82,.24,1) both}
@keyframes bootScanner{0%,12%{top:-16%;opacity:0}22%{opacity:.65}68%{top:110%;opacity:.32}76%,100%{top:110%;opacity:0}}
@keyframes bootUnlock{0%{opacity:0;transform:translateY(6px);filter:brightness(.6)}55%{filter:brightness(1.35);box-shadow:0 0 18px rgba(90,223,255,.18)}100%{opacity:1;transform:none;filter:none}}

/* NAVIGATION // target lock instead of plain scroll */
.nav-signal-flash{
  position:fixed;z-index:9998;left:0;right:0;top:0;height:2px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,#ff304a 24%,#eefaff 50%,#58ddff 76%,transparent);
  box-shadow:0 0 14px rgba(90,223,255,.42),0 0 18px rgba(255,48,74,.28);
  transform:translateX(-100%);
}
.nav-signal-flash.is-active{animation:navSignalFlash .52s cubic-bezier(.18,.8,.22,1) both}
@keyframes navSignalFlash{0%{opacity:0;transform:translateX(-100%)}14%{opacity:1}100%{opacity:0;transform:translateX(100%)}}
.section-lock{animation:sectionTargetLock .72s cubic-bezier(.18,.82,.22,1) both}
@keyframes sectionTargetLock{
  0%{filter:brightness(.82);box-shadow:0 0 0 rgba(90,223,255,0)}
  28%{filter:brightness(1.12);box-shadow:0 0 0 1px rgba(90,223,255,.18),0 0 30px rgba(90,223,255,.08)}
  58%{box-shadow:0 0 0 1px rgba(255,48,74,.10),0 0 18px rgba(255,48,74,.05)}
  100%{filter:none;box-shadow:none}
}

/* CINEMATIC SECTION REVEAL // frame -> label -> content -> telemetry */
.cinematic-stage .cinematic-item{opacity:0;transform:translateY(9px);filter:brightness(.72);transition:opacity .46s ease,transform .55s cubic-bezier(.16,.8,.25,1),filter .5s ease}
.cinematic-stage.is-cinematic-visible .cinematic-item{opacity:1;transform:none;filter:none}
.cinematic-stage.is-cinematic-visible .cinematic-item:nth-child(1){transition-delay:.02s}
.cinematic-stage.is-cinematic-visible .cinematic-item:nth-child(2){transition-delay:.10s}
.cinematic-stage.is-cinematic-visible .cinematic-item:nth-child(3){transition-delay:.18s}
.cinematic-stage.is-cinematic-visible .cinematic-item:nth-child(4){transition-delay:.26s}
.cinematic-stage.is-cinematic-visible .cinematic-item:nth-child(5){transition-delay:.34s}
.mock-hero-main.cinematic-stage .mock-hero-line{transition-delay:.04s!important}
.mock-hero-main.cinematic-stage .hero-copy-row{transition-delay:.12s!important}
.mock-hero-main.cinematic-stage .connect-panel{transition-delay:.22s!important}
.mock-hero-main.cinematic-stage .telemetry-strip{transition-delay:.30s!important}

/* MICRO ACK // tactile console confirmation */
.btn.is-ack,.chip.is-ack,.player-controls button.is-ack,.site-favorite.is-ack,.social-card.is-ack,.footer-socials a.is-ack{
  animation:consoleAck .28s cubic-bezier(.2,.8,.2,1)!important;
}
@keyframes consoleAck{
  0%{filter:brightness(1)}
  34%{filter:brightness(1.55);box-shadow:0 0 18px rgba(90,223,255,.24),inset 0 0 12px rgba(255,255,255,.06)}
  100%{filter:brightness(1)}
}

body.reduced-motion .boot__panel::after,
body.reduced-motion .nav-signal-flash,
body.reduced-motion .section-lock,
body.reduced-motion .btn.is-ack,
body.reduced-motion .chip.is-ack,
body.reduced-motion .player-controls button.is-ack,
body.reduced-motion .site-favorite.is-ack,
body.reduced-motion .social-card.is-ack,
body.reduced-motion .footer-socials a.is-ack{animation:none!important}
body.reduced-motion .cinematic-stage .cinematic-item{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
body.reduced-motion .boot-sequence__track i{transition:none!important;width:100%!important}

@media(max-width:820px){
  .hero__copy h1{letter-spacing:-.035em!important;transform:none}
  .portrait-console__bezel{box-shadow:-5px 0 18px rgba(255,48,74,.14),5px 0 18px rgba(90,223,255,.14),0 0 28px rgba(151,220,255,.08)!important}
  .boot-sequence{min-width:min(320px,78vw)}
}