/* ============================================================
   HERO — Animated brand logo background (replaces hero-anim.mp4)
   Scoped to .la-stage / .la-* so it can't collide with site styles.
   Layout: sits in the .hero-bg layer of .hero-cine; the emblem +
   wordmark animate in the clear center between copy and CTAs.
   ============================================================ */

.la-stage{
  position:absolute;inset:0;z-index:0;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 90% at 50% 42%, #0a1f4a 0%, #061436 38%, #02091d 70%, #01040c 100%);
  overflow:hidden;
}
.la-stage canvas#laBg{position:absolute;inset:0;width:100%;height:100%;display:block}
.la-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 45%, rgba(0,0,0,0) 40%, rgba(1,4,12,.55) 100%)}

.la-logo-wrap{
  position:relative;
  width:min(40vmin,380px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}

/* ---- Reveal (build-in) ---- */
.la-reveal{opacity:0;transform:translateY(14px) scale(.96);filter:blur(6px);
  animation:laReveal 1.5s cubic-bezier(.22,.61,.36,1) forwards}
.la-d2{animation-delay:.35s}
.la-d3{animation-delay:.75s}
.la-d4{animation-delay:1.05s}
@keyframes laReveal{to{opacity:1;transform:none;filter:none}}

/* ---- Emblem ---- */
.la-emblem{position:relative;width:100%;aspect-ratio:1/1}
.la-emblem svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.la-real-logo{position:absolute;inset:4%;width:92%;height:92%;object-fit:contain;
  opacity:0;transition:opacity .6s ease;z-index:5;
  filter:drop-shadow(0 0 18px rgba(80,170,255,.55)) drop-shadow(0 0 46px rgba(30,110,230,.35))}

/* slow ring rotation (SVG fallback) */
.la-ring-rot{transform-origin:50% 50%;animation:laSpin 60s linear infinite}
@keyframes laSpin{to{transform:rotate(360deg)}}

/* DNA core breathing rotation (SVG fallback) */
.la-dna-core{transform-origin:50% 50%;animation:laCoreSpin 38s linear infinite}
@keyframes laCoreSpin{to{transform:rotate(360deg)}}

/* glow pulse behind emblem */
.la-glow{position:absolute;inset:-12%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(60,150,255,.45), rgba(20,70,160,.15) 45%, transparent 68%);
  animation:laPulse 6s ease-in-out infinite;filter:blur(2px)}
@keyframes laPulse{0%,100%{opacity:.55;transform:scale(.97)}50%{opacity:1;transform:scale(1.04)}}

/* light sweep across the emblem */
.la-sweep{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden;border-radius:50%}
.la-sweep::before{content:"";position:absolute;top:-40%;left:-60%;width:55%;height:180%;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0) 10%,rgba(200,230,255,.28) 50%,rgba(255,255,255,0) 90%,transparent);
  filter:blur(4px);
  animation:laSweep 7s ease-in-out infinite;animation-delay:1.6s}
@keyframes laSweep{0%{left:-60%;opacity:0}12%{opacity:1}38%{left:120%;opacity:0}100%{left:120%;opacity:0}}

/* ---- Wordmark ---- */
.la-wordmark{margin-top:4.5%;width:max-content;max-width:94vw;user-select:none}
.la-wm-main{
  font-family:Georgia,'Times New Roman',serif;font-weight:700;letter-spacing:.06em;white-space:nowrap;
  font-size:clamp(15px,3.2vmin,28px);line-height:1;margin:0;
  background:linear-gradient(180deg,#ffffff 0%,#cfe0f5 38%,#7e93ac 62%,#e9f1fb 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.la-wm-sub-row{display:flex;align-items:center;justify-content:center;gap:.7em;margin-top:.55em}
.la-wm-sub-row .la-line{height:1px;width:clamp(16px,5vmin,44px);
  background:linear-gradient(90deg,transparent,#8aa0bc)}
.la-wm-sub-row .la-line.r{background:linear-gradient(90deg,#8aa0bc,transparent)}
.la-wm-sub{font-family:Georgia,'Times New Roman',serif;font-weight:700;letter-spacing:.34em;text-indent:.34em;
  font-size:clamp(8px,1.6vmin,13px);
  background:linear-gradient(180deg,#e7eefb,#8497ad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.la-wm-tag{margin-top:.95em;font-weight:500;letter-spacing:.22em;text-indent:.22em;
  font-size:clamp(7px,1.4vmin,11px);color:#7f93ac}
.la-wm-tag .la-reg{font-size:.7em;vertical-align:top}

/* ---- Hero copy under the emblem ---- */
.la-hero-copy{margin:0 auto;max-width:660px;width:70vw;min-width:300px;
  font-size:clamp(14px,1.25vw,17px);line-height:1.7;color:rgba(226,234,248,.88);
  text-shadow:0 1px 14px rgba(0,0,0,.6)}

/* ---- CTAs and trust pills inside the stage ---- */
.la-stage .hero-cta{margin-top:2em}
.la-stage .pillars{margin-top:1.4em;width:max-content;max-width:92vw}

/* ---- Small screens ---- */
@media(max-width:680px){
  .la-logo-wrap{width:min(62vw,260px)}
}

@media (prefers-reduced-motion: reduce){
  .la-reveal{animation:none;opacity:1;transform:none;filter:none}
  .la-ring-rot,.la-dna-core,.la-glow,.la-sweep::before{animation:none}
  .la-glow{opacity:.7}
}