/* Home page only: animated logo intro, top-left brand, hero sizing. */
/* ============ animated logo intro (overlay version) ============ */
.intro{
  position:fixed;inset:0;z-index:400;overflow:hidden;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  transition:background .9s ease;
}
body.intro-lock{overflow:hidden}
.intro.fly{background:var(--bg-0);pointer-events:none}
.intro.fly .logo-stage{
  transform:translate(calc(-50vw + 120px), calc(-50vh + 60px)) scale(.14);
  opacity:0;
}
.logo-stage{transition:transform 1s cubic-bezier(.6,.05,.25,1), opacity .35s ease .75s}
.intro.fly .wordmark{opacity:0;transition:opacity .3s ease}
.intro.done{display:none}
/* top-left brand */
.home-brand{
  position:fixed;top:20px;left:24px;z-index:210;display:flex;align-items:center;gap:10px;
  opacity:0;pointer-events:none;transition:opacity .5s ease .55s;text-decoration:none;
}
.home-brand img{height:30px;width:auto}
.home-brand span{font-weight:800;letter-spacing:.16em;font-size:.8rem;color:var(--ink)}
.home-brand span em{font-style:normal;color:var(--accent)}
html.ready .home-brand{opacity:1;pointer-events:auto}
.logo-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:7vh}
.logo-stack{position:relative;width:min(32vh,222px);aspect-ratio:222/310}
.logo-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.layer-black{
  opacity:0;transform:translateX(-26vw);
  animation:slideInL 2.4s cubic-bezier(.55,0,.12,1) forwards;
  animation-delay:.5s;
}
.layer-blue{
  opacity:0;transform:translateX(26vw);
  animation:slideInR 2.4s cubic-bezier(.55,0,.12,1) forwards;
  animation-delay:.5s;
}
@keyframes slideInL{
  0%{opacity:0;transform:translateX(-26vw)}
  25%{opacity:1}
  100%{opacity:1;transform:translateX(0)}
}
@keyframes slideInR{
  0%{opacity:0;transform:translateX(26vw)}
  25%{opacity:1}
  100%{opacity:1;transform:translateX(0)}
}
.wordmark{
  margin:0;line-height:0;
  opacity:0;transform:translateY(22px);
  animation:riseIn 1.2s cubic-bezier(.3,.4,.15,1) forwards;
  animation-delay:3.05s;
}
.wordmark img{width:min(72vw,470px);height:auto;display:block}
@keyframes riseIn{to{opacity:1;transform:translateY(0)}}
.menu-btn{left:auto;right:22px}

/* hamburger appears only after the intro sequence (shared styles live in styles.css) */
.menu-btn{opacity:0;pointer-events:none;transition:opacity .5s ease}
html.ready .menu-btn{opacity:1;pointer-events:auto}

/* skip animation for visitors who already saw it, and for reduced motion */
html.seen .layer-black,html.seen .layer-blue{animation:none;transform:none;opacity:1}
html.seen .wordmark{animation:none;opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .layer-black,.layer-blue{animation:none;transform:none;opacity:1}
  .wordmark{animation:none;opacity:1;transform:none}
}
@media(max-width:640px){
  .logo-stack{width:min(27vh,170px)}
}

/* backdrop behind the floating logo + menu button once the page scrolls,
   so content doesn't run underneath them (sits below the open menu) */
body::before{
  content:"";position:fixed;top:0;left:0;right:0;height:76px;z-index:140;
  background:var(--nav-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);opacity:0;pointer-events:none;transition:opacity .25s ease;
}
html.scrolled body::before{opacity:1}
body.menu-open::before{opacity:0}

/* no top nav on the home page, so each section is a full screen */
html.screens{--nav-h:0px}

/* hero headline fits on set lines */
.hero .headline-xl{font-size:clamp(2.3rem,4.5vw,3.55rem)}
.hero .hero-grid{grid-template-columns:1.2fr .8fr}
@media(min-width:900px){.nowrap-desk{white-space:nowrap}}
@media(max-width:900px){.hero .hero-grid{grid-template-columns:1fr}}

/* home: hold the blue panel's cards until the logo intro has finished */
html:not(.ready) .bp-stat{animation:none;opacity:0}