/* ==========================================================================
   motion.css — load sequence for the nav + page headers
   Load this LAST, after styles.css and home.css.

   Everything here uses animation-fill-mode: backwards, so elements sit at
   opacity 1 by default. If animations don't run — old browser, CSS blocked,
   reduced-motion — the page simply appears, fully visible. Nothing hides.
   ========================================================================== */

@keyframes bgRise{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:none}
}
@keyframes bgCell{
  0%{opacity:0;transform:scale(.35)}
  62%{opacity:1;transform:scale(1.18)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes bgSweep{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
@keyframes bgGlow{
  0%{box-shadow:0 0 0 0 rgba(77,159,255,0)}
  40%{box-shadow:0 0 0 4px rgba(77,159,255,.16)}
  100%{box-shadow:0 0 0 0 rgba(77,159,255,0)}
}

/* ---------- logo: nine cells light up in sequence ---------- */
.brand svg rect{
  transform-box:fill-box;
  transform-origin:center;
  animation:bgCell .5s cubic-bezier(.34,1.4,.5,1) backwards;
}
.brand svg rect:nth-of-type(1){animation-delay:.06s}
.brand svg rect:nth-of-type(2){animation-delay:.10s}
.brand svg rect:nth-of-type(3){animation-delay:.14s}
.brand svg rect:nth-of-type(4){animation-delay:.10s}
.brand svg rect:nth-of-type(5){animation-delay:.14s}
.brand svg rect:nth-of-type(6){animation-delay:.18s}
.brand svg rect:nth-of-type(7){animation-delay:.14s}
.brand svg rect:nth-of-type(8){animation-delay:.18s}
.brand svg rect:nth-of-type(9){animation-delay:.22s}

.brand-word{animation:bgRise .5s cubic-bezier(.22,.8,.26,1) .3s backwards}

/* ---------- nav links stagger in behind the logo ---------- */
.nav-links a{
  position:relative;
  animation:bgRise .5s cubic-bezier(.22,.8,.26,1) backwards;
}
.nav-links a:nth-child(1){animation-delay:.40s}
.nav-links a:nth-child(2){animation-delay:.46s}
.nav-links a:nth-child(3){animation-delay:.52s}
.nav-links a:nth-child(4){animation-delay:.58s}
.nav-links a:nth-child(5){animation-delay:.64s}
.nav-links a:nth-child(6){animation-delay:.70s}
.nav-links a:nth-child(7){animation-delay:.76s}

/* underline that sweeps out from the left on hover.
   Geometry matches the existing .active underline in styles.css (-8px / 2px)
   so hover and active states sit on exactly the same line. */
.nav-links a::after{
  content:'';position:absolute;left:0;right:0;bottom:-8px;height:2px;
  background:var(--signal);border-radius:2px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .28s cubic-bezier(.22,.8,.26,1);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after{transform:scaleX(1)}

/* the current page keeps its underline permanently */
.nav-links a.active{color:var(--paper)}
.nav-links a.active::after{
  transform:scaleX(1);
  background:var(--signal);
  animation:bgSweep .45s cubic-bezier(.22,.8,.26,1) .82s backwards;
}

.nav-wa{animation:bgRise .5s cubic-bezier(.22,.8,.26,1) .74s backwards}
.nav-cta{animation:bgRise .5s cubic-bezier(.22,.8,.26,1) .80s backwards}
.menu-btn{animation:bgRise .5s cubic-bezier(.22,.8,.26,1) .44s backwards}

/* one quiet pulse on the main call to action, once the rest has settled */
.nav-cta{animation:bgRise .5s cubic-bezier(.22,.8,.26,1) .80s backwards,
                   bgGlow 1.5s ease-out 1.45s 1}

/* ---------- nav condenses as you scroll ---------- */
.nav{transition:background .3s,border-color .3s,padding .3s cubic-bezier(.22,.8,.26,1)}
.nav.scrolled{padding-top:12px;padding-bottom:12px}
.nav .brand svg{transition:transform .3s cubic-bezier(.22,.8,.26,1)}
.nav.scrolled .brand svg{transform:scale(.86)}

/* ---------- homepage hero ----------
   The index hero has no .rv classes (it sits above the fold and never got
   the scroll-reveal treatment), so it's animated directly here. */
.hero-inner .eyebrow{animation:bgRise .6s cubic-bezier(.22,.8,.26,1) .34s backwards}
.hero h1{animation:bgRise .8s cubic-bezier(.22,.8,.26,1) .44s backwards}
.hero-sub{animation:bgRise .65s cubic-bezier(.22,.8,.26,1) .60s backwards}
.hero-actions{animation:bgRise .6s cubic-bezier(.22,.8,.26,1) .72s backwards}
.trust-inner > *{animation:bgRise .6s cubic-bezier(.22,.8,.26,1) backwards}
.trust-inner > *:nth-child(1){animation-delay:.86s}
.trust-inner > *:nth-child(2){animation-delay:.94s}
.trust-inner > *:nth-child(3){animation-delay:1.02s}

/* ---------- page headers: staggered rise ----------
   These piggyback on the existing .rv / .in reveal, so there's no second
   system to fight with — we're only adding delays and a little more travel. */
.page-hero .rv,
.hero-inner .rv{transform:translateY(26px)}
.page-hero .rv.in,
.hero-inner .rv.in{transform:none}

.page-hero .eyebrow.rv,
.hero-inner .eyebrow.rv{transition-delay:.30s}
.page-hero h1.rv,
.hero-inner h1.rv{transition-delay:.40s;transition-duration:.75s}
.page-hero .section-sub.rv,
.hero-inner .hero-sub.rv{transition-delay:.56s}
.hero-inner .hero-actions.rv{transition-delay:.68s}

/* the services page opens straight into the packages band — give its
   heading the same staggered entrance the other page headers get */
.pkgs-head .rv{transform:translateY(26px)}
.pkgs-head .rv.in{transform:none}
.pkgs-head .eyebrow.rv{transition-delay:.30s}
.pkgs-head h2.rv{transition-delay:.40s;transition-duration:.75s}
.pkgs-head .section-sub.rv{transition-delay:.54s}

/* the letter's opening line on Why BlueGrid gets its own beat */
.letter-body p.lead.rv{transition-delay:.68s;transition-duration:.8s}

@media(max-width:900px){
  /* mobile: same sequence, tightened up so it doesn't feel slow */
  .brand-word{animation-delay:.24s}
  .menu-btn{animation-delay:.34s}
  .nav-cta{animation-delay:.40s,1.1s}
  .nav-wa{animation-delay:.36s}
  .page-hero .eyebrow.rv,.hero-inner .eyebrow.rv{transition-delay:.22s}
  .page-hero h1.rv,.hero-inner h1.rv{transition-delay:.30s}
  .page-hero .section-sub.rv,.hero-inner .hero-sub.rv{transition-delay:.42s}
  .hero-inner .hero-actions.rv{transition-delay:.50s}
}

/* ---------- respect reduced motion: no sequence at all ---------- */
@media(prefers-reduced-motion:reduce){
  .brand svg rect,.brand-word,.nav-links a,.nav-wa,.nav-cta,.menu-btn,
  .hero-inner .eyebrow,.hero h1,.hero-sub,.hero-actions,.trust-inner > *{
    animation:none !important
  }
  .nav,.nav.scrolled,.nav .brand svg,.nav.scrolled .brand svg{transition:none}
  .nav-links a::after{transition:none}
  .page-hero .rv,.hero-inner .rv,.pkgs-head .rv{transform:none}
  .page-hero .rv,.hero-inner .rv,.pkgs-head .rv,
  .letter-body p.lead.rv{transition-delay:0s !important}
}