/* ============================================================
   MICRO-INTERACTIONS — light-follow, tilt, magnetic, ripple,
   reveal upgrade, navigation motion
   Layered ON TOP of existing styles; nothing replaced.

   SPECIFICITY CONTRACT (why rules look unusual here):
   - base components.css sets hover transforms on plain classes
     (.service-card:hover → translateY(-6px), .stat-tile:hover →
     translateY(-4px), .btn:hover → translateY(-2px)).
   - .tilt-host therefore does NOT declare a blanket transform
     (a (0,1,0) rule would lose on hover and, worse, would beat
     the .reveal entrance which is also (0,1,0) but earlier).
     Tilt transforms are scoped: :not(.reveal) at rest,
     .is-visible after reveal, and hover-scoped composites that
     COMBINE the base lift with tilt so both coexist.
   - .magnetic never declares transitions (it would clobber the
     base button transition lists); js/motion/magnetic.js lerps
     --mgx/--mgy every frame, and the base transform transition
     smooths it for free.
   ============================================================ */

/* ------------------------------------------------------------
   1. LIGHT-FOLLOW — a soft light source follows the cursor
      across glass surfaces (JS sets --lx/--ly/--lit).
      .glass-tile/.service-card are intentionally EXCLUDED:
      .service-card already owns ::after (its gradient wash), so
      its light-follow uses a .tile-light child injected by
      js/motion/card-effects.js instead.
      ------------------------------------------------------------ */
.glass-panel, .glass-card, .card, .doc-item, .notice-item, .leader-card, .stat-tile {
  --lx: 50%;
  --ly: 50%;
  --lit: 0;
  position: relative;
}
.glass-panel::after, .glass-card::after,
.card::after, .doc-item::after, .notice-item::after,
.leader-card::after, .stat-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--lit);
  transition: opacity var(--motion-normal) var(--ease-soft);
  background: radial-gradient(320px circle at var(--lx) var(--ly),
    rgba(200, 169, 81, 0.16),
    rgba(20, 108, 110, 0.10) 42%,
    transparent 68%);
  mix-blend-mode: soft-light;
}

/* Service-tile light-follow (injected child; keeps base ::after intact) */
.service-card .tile-light {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--lit, 0);
  transition: opacity var(--motion-normal) var(--ease-soft);
  background: radial-gradient(340px circle at var(--lx, 50%) var(--ly, 50%),
    rgba(200, 169, 81, 0.30),
    rgba(46, 143, 145, 0.14) 45%,
    transparent 70%);
  mix-blend-mode: soft-light;
}

/* ------------------------------------------------------------
   2. 3D TILT — composes with base hover lifts
      ------------------------------------------------------------ */
.tilt-host {
  transform-style: preserve-3d;
  will-change: transform;
}
/* resting tilt for non-reveal hosts (hero visual, images, stats) */
.tilt-host:not(.reveal) {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
             translateZ(calc(var(--tz, 0) * 1px));
}
/* resting tilt for reveal hosts — only AFTER the entrance finished
   (.reveal.is-visible is (0,2,0); this matches it and loads later) */
.tilt-host.is-visible {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
             translateZ(calc(var(--tz, 0) * 1px));
}
/* hosts without a base transform transition get one */
.hero-visual.tilt-host, .leader-card.tilt-host, .stat-tile.tilt-host,
#intro-grid img.tilt-host {
  transition: transform 0.25s var(--ease-fluid),
              box-shadow var(--dur-fast, .18s) var(--ease-out);
}
/* HOVER COMPOSITES: base lift + tilt together
   (.service-card:hover alone would otherwise REPLACE the tilt) */
.service-card.tilt-host:hover {
  transform: perspective(900px) translateY(-6px)
             rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
             translateZ(calc(var(--tz, 0) * 1px));
}
.stat-tile.tilt-host:hover {
  transform: perspective(900px) translateY(-4px)
             rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
             translateZ(calc(var(--tz, 0) * 1px));
}
.tilt-host:hover { z-index: 2; }

/* inner parallax-within-card (base :hover .icon rule overrides on hover) */
.tilt-host .icon,
.tilt-host .card-icon { transform: translateZ(18px); }
.tilt-host h3 { transform: translateZ(10px); }

/* ------------------------------------------------------------
   3. MAGNETIC — transform only; smoothing comes from the JS lerp
      plus each control's own base transform transition.
      ------------------------------------------------------------ */
.magnetic { will-change: transform; }
.magnetic.magnetic {
  transform: translate3d(calc(var(--mgx, 0) * 1px), calc(var(--mgy, 0) * 1px), 0)
             translateY(var(--mlift, 0px));
}
/* preserve the base .btn hover lift while magnetic */
.btn.magnetic:hover { --mlift: -2px; }
.btn.magnetic:active { --mlift: 0px; }

/* ------------------------------------------------------------
   4. CLICK RIPPLE
      ------------------------------------------------------------ */
.ripple-host { position: relative; overflow: hidden; }
.click-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  background: radial-gradient(circle, var(--ripple-color) 0%, transparent 65%);
  animation: clickRipple 0.65s var(--ease-out-expo) forwards;
}
.btn-primary .click-ripple { background: radial-gradient(circle, rgba(255,255,255,0.45) 0%, transparent 65%); }
.btn-accent .click-ripple  { background: radial-gradient(circle, rgba(7,26,27,0.28) 0%, transparent 65%); }
@keyframes clickRipple {
  from { transform: scale(0.6); opacity: 0.85; }
  to   { transform: scale(16);  opacity: 0; }
}

/* ------------------------------------------------------------
   5. BUTTON LIQUID SHEEN — light sweep on hover
      ------------------------------------------------------------ */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.22) 48%,
    transparent 62%);
  transform: translateX(-130%);
  transition: transform var(--motion-slow) var(--ease-fluid);
  pointer-events: none;
}
.btn:hover::before { transform: translateX(130%); }

/* ------------------------------------------------------------
   6. NAVIGATION MOTION
      ------------------------------------------------------------ */
/* underline for plain items (parent items keep their ::after arrow) */
.main-nav li:not(.has-sub) > a {
  position: relative;
  transition: color var(--motion-fast) var(--ease-soft),
              background var(--motion-fast) var(--ease-soft);
}
.main-nav li:not(.has-sub) > a::after {
  content: "";
  position: absolute;
  left: 0.8rem; right: 0.8rem; bottom: 0.28rem;
  height: 1.5px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--motion-normal) var(--ease-fluid);
}
.main-nav li:not(.has-sub) > a:hover::after,
.main-nav li:not(.has-sub) > a[aria-current="page"]::after { transform: scaleX(1); }

/* hover bridge: keeps :hover alive across the 8px gap below parent
   items so dropdowns don't flicker shut (replaces old JS grace) */
.main-nav .has-sub { position: relative; }
.main-nav .has-sub::after {
  content: "";
  position: absolute;
  left: -6px; right: -6px;
  top: 100%;
  height: 9px; /* covers the 8px gap below the item, 1px overlap */
}

/* dropdown entrance + per-item stagger (replays on every open) */
.main-nav .sub-menu { transform-origin: top center; }
.main-nav .sub-menu li { opacity: 0; }
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu {
  animation: dropIn var(--motion-normal) var(--ease-out-expo) both;
}
.main-nav li:hover > .sub-menu li,
.main-nav li:focus-within > .sub-menu li {
  animation: dropItem var(--motion-normal) var(--ease-out-expo) forwards;
}
.main-nav li:hover > .sub-menu li:nth-child(1),
.main-nav li:focus-within > .sub-menu li:nth-child(1) { animation-delay: 0.03s; }
.main-nav li:hover > .sub-menu li:nth-child(2),
.main-nav li:focus-within > .sub-menu li:nth-child(2) { animation-delay: 0.06s; }
.main-nav li:hover > .sub-menu li:nth-child(3),
.main-nav li:focus-within > .sub-menu li:nth-child(3) { animation-delay: 0.09s; }
.main-nav li:hover > .sub-menu li:nth-child(4),
.main-nav li:focus-within > .sub-menu li:nth-child(4) { animation-delay: 0.12s; }
.main-nav li:hover > .sub-menu li:nth-child(5),
.main-nav li:focus-within > .sub-menu li:nth-child(5) { animation-delay: 0.15s; }
.main-nav li:hover > .sub-menu li:nth-child(6),
.main-nav li:focus-within > .sub-menu li:nth-child(6) { animation-delay: 0.18s; }
.main-nav li:hover > .sub-menu li:nth-child(7),
.main-nav li:focus-within > .sub-menu li:nth-child(7) { animation-delay: 0.21s; }
.main-nav li:hover > .sub-menu li:nth-child(8),
.main-nav li:focus-within > .sub-menu li:nth-child(8) { animation-delay: 0.24s; }
@keyframes dropIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: none; }
}
@keyframes dropItem {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   7. MOBILE DRAWER — item cascade + liquid hover fill
      ------------------------------------------------------------ */
.mobile-drawer.active .mobile-nav li {
  animation: drawerItem var(--motion-normal) var(--ease-out-expo) both;
}
.mobile-drawer.active .mobile-nav > ul > li:nth-child(1) { animation-delay: 0.04s; }
.mobile-drawer.active .mobile-nav > ul > li:nth-child(2) { animation-delay: 0.07s; }
.mobile-drawer.active .mobile-nav > ul > li:nth-child(3) { animation-delay: 0.10s; }
.mobile-drawer.active .mobile-nav > ul > li:nth-child(4) { animation-delay: 0.13s; }
.mobile-drawer.active .mobile-nav > ul > li:nth-child(5) { animation-delay: 0.16s; }
.mobile-drawer.active .mobile-nav > ul > li:nth-child(6) { animation-delay: 0.19s; }
.mobile-drawer.active .mobile-nav > ul > li:nth-child(7) { animation-delay: 0.22s; }
@keyframes drawerItem {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}
.mobile-nav a, .mobile-nav .accordion-toggle {
  position: relative;
  overflow: hidden;
  transition: color var(--motion-fast) var(--ease-soft),
              padding-left var(--motion-fast) var(--ease-fluid);
}
.mobile-nav a::before, .mobile-nav .accordion-toggle::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleY(0);
  transition: transform var(--motion-normal) var(--ease-fluid);
}
.mobile-nav a:hover, .mobile-nav .accordion-toggle:hover { padding-left: 1.15rem; }
.mobile-nav a:hover::before, .mobile-nav .accordion-toggle:hover::before { transform: scaleY(1); }
.mobile-nav .nav-glow {
  background: linear-gradient(90deg, rgba(200,169,81,0.12), transparent 70%);
}

/* ------------------------------------------------------------
   8. STAGGERED REVEAL — delay applies only until revealed
      (afterwards it would delay every hover transition)
      ------------------------------------------------------------ */
.stagger-item:not(.is-visible) {
  transition-delay: calc(var(--stagger, 0) * 60ms);
}

/* ------------------------------------------------------------
   9. REVEAL UPGRADE — blur + rise entrance
      ------------------------------------------------------------ */
.reveal, .reveal-left, .reveal-right, .reveal-scale {
  filter: blur(4px);
}
.reveal.is-visible, .reveal-left.is-visible,
.reveal-right.is-visible, .reveal-scale.is-visible {
  filter: blur(0);
  transition:
    opacity var(--motion-slow, .6s) var(--ease-out-expo, ease),
    transform var(--motion-slow, .6s) var(--ease-out-expo, ease),
    filter var(--motion-slow, .6s) var(--ease-out-expo, ease),
    box-shadow var(--motion-slow, .6s) var(--ease-soft, ease);
}

/* tabular figures for animated counters */
.stat-num, .f-num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   10. REDUCED MOTION — kill the layer
      ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .tilt-host, .magnetic { transform: none !important; transition: none !important; }
  .glass-panel::after, .glass-card::after,
  .card::after, .doc-item::after, .notice-item::after,
  .leader-card::after, .stat-tile::after,
  .service-card .tile-light { display: none; }
  .btn::before { display: none; }
  .click-ripple, .liquid-burst { display: none; }
  .reveal, .reveal-left, .reveal-right, .reveal-scale { filter: none; }
  .main-nav .sub-menu li { opacity: 1; animation: none; }
  .mobile-drawer.active .mobile-nav li { animation: none; opacity: 1; }
  .main-nav li:not(.has-sub) > a::after { transition: none; }
}