/* Motion and colour layer. Loaded after every other stylesheet.
   Animations only run under .motion-ok (set by js/home.js unless the visitor prefers reduced motion);
   cursor effects are only wired up on devices with a fine pointer. */

:root {
  --ah-violet: #c4b8ff; /* supporting tone for gradients only */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

::selection { background: var(--ah-green); color: var(--ah-navy); }

/* ---------- Gradient text on dark backgrounds ---------- */
.tone-soft {
  background: linear-gradient(100deg, var(--ah-green) 0%, var(--ah-violet) 40%, rgba(255, 255, 255, .78) 70%, var(--ah-green) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.motion-ok .tone-soft { animation: shimmer 14s linear infinite alternate; }
@keyframes shimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* ---------- Hero: aurora, grain, cursor glow ---------- */
.home-hero { overflow: hidden; isolation: isolate; }
.home-hero::before {
  content: ""; position: absolute; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(30% 40% at 20% 30%, rgba(2, 229, 212, .30), transparent 70%),
    radial-gradient(28% 38% at 78% 22%, rgba(196, 184, 255, .26), transparent 70%),
    radial-gradient(38% 46% at 62% 88%, rgba(2, 229, 212, .16), transparent 70%);
  filter: blur(30px);
  mix-blend-mode: screen;
}
.motion-ok .home-hero::before { animation: aurora 20s ease-in-out infinite alternate; }
@keyframes aurora {
  0% { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(4%, 3%, 0) rotate(7deg) scale(1.08); }
  100% { transform: translate3d(-2%, 6%, 0) rotate(-5deg) scale(1.03); }
}
.home-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-glow {
  position: absolute; left: 0; top: 0; z-index: -1; width: 560px; height: 560px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(2, 229, 212, .30) 0%, rgba(196, 184, 255, .14) 40%, transparent 68%);
  mix-blend-mode: screen; opacity: 0; transition: opacity .8s ease;
  transform: translate3d(var(--gx, -9999px), var(--gy, -9999px), 0) translate(-50%, -50%);
}
.home-hero.is-glowing .hero-glow { opacity: 1; }

/* ---------- Hero entrance ---------- */
.motion-ok .home-hero-inner > *:not(.home-hero-title),
.motion-ok .report-hero > div > *:not(.home-hero-title) { animation: fadeUp 1s var(--ease-out) both; }
.motion-ok .home-hero-inner > :nth-child(1), .motion-ok .report-hero > div > :nth-child(1) { animation-delay: .05s; }
.motion-ok .home-hero-inner > :nth-child(3), .motion-ok .report-hero > div > :nth-child(3) { animation-delay: .65s; }
.motion-ok .home-hero-inner > :nth-child(4), .motion-ok .report-hero > div > :nth-child(4) { animation-delay: .8s; }
.motion-ok .report-cover { animation: coverIn 1.4s var(--ease-out) .4s both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes coverIn { from { opacity: 0; transform: translateY(40px) rotate(4deg); } to { opacity: 1; transform: rotate(-3deg); } }

/* Words rise into place (spans added by js/home.js) */
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .1em; margin-bottom: -.1em; }
.w-inner { display: inline-block; }
.motion-ok .w-inner { transform: translateY(110%); animation: wordUp 1.1s var(--ease-out) forwards; animation-delay: calc(var(--i) * 55ms + 250ms); }
@keyframes wordUp { to { transform: none; } }
.motion-ok .home-hero-title .tone-soft { animation: softIn 1.3s var(--ease-out) .1s both, shimmer 14s linear 1.4s infinite alternate; }
@keyframes softIn { from { opacity: 0; filter: blur(10px); transform: translateY(18px); } to { opacity: 1; filter: none; transform: none; } }

/* ---------- Scroll reveals ---------- */
.js-reveal [data-reveal] {
  transition: opacity 1s var(--ease-out) var(--reveal-delay, 0ms), transform 1s var(--ease-out) var(--reveal-delay, 0ms);
}
.motion-ok [data-reveal-img] { clip-path: inset(8% 8% 8% 8% round var(--radius-lg)); transition: clip-path 1.4s var(--ease-out); }
.motion-ok [data-reveal-img].is-visible { clip-path: inset(0 0 0 0 round 0); }
.motion-ok [data-reveal-img]:not(.is-visible) img { transform: scale(1.18); }
.motion-ok [data-reveal-img] img { transition: transform 1.6s var(--ease-out); }

/* ---------- Life-cycle stages light up in turn ---------- */
.stage-list { position: relative; }
.stage-list::before {
  content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 1px;
  background: linear-gradient(90deg, var(--ah-green), var(--ah-violet) 60%, transparent);
  transform-origin: left; transform: scaleX(0); transition: transform 1.8s var(--ease-out);
}
.stage-list.lit::before, .stage-list:not(.js-stages)::before { transform: scaleX(1); }
.motion-ok .stage-list.js-stages li { opacity: .25; transition: opacity .9s var(--ease-out), border-color .9s ease; }
.motion-ok .stage-list.lit li { opacity: 1; border-left-color: rgba(2, 229, 212, .5); }
.motion-ok .stage-list.lit li:nth-child(2) { transition-delay: .3s; }
.motion-ok .stage-list.lit li:nth-child(3) { transition-delay: .6s; }
.motion-ok .stage-list.lit li:nth-child(4) { transition-delay: .9s; }
.stage-list li:hover { border-left-color: var(--ah-green); }
.stage-list li:hover .stage-num { text-shadow: 0 0 24px rgba(2, 229, 212, .6); }

/* ---------- Dark panels drift too ---------- */
.dark-panel, .contact-panel { position: relative; overflow: hidden; isolation: isolate; }
.dark-panel::before, .contact-panel::before {
  content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(25% 35% at 85% 15%, rgba(2, 229, 212, .16), transparent 70%),
    radial-gradient(30% 40% at 10% 90%, rgba(196, 184, 255, .14), transparent 70%);
  filter: blur(20px);
}
.motion-ok .dark-panel::before, .motion-ok .contact-panel::before { animation: aurora 26s ease-in-out infinite alternate; }

/* ---------- Cursor spotlight + tilt ---------- */
.spot { position: relative; }
.spot::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .20), transparent 60%);
}
.spot-light::before { background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(2, 229, 212, .16), transparent 60%); }
.spot:hover::before { opacity: 1; }
.audience-grid a, .enquiry-grid a, .case-feature { position: relative; }
.audience-grid a > *, .enquiry-grid a > *, .leader-card > * { position: relative; z-index: 2; }

.tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease-out); will-change: transform; }
.js-reveal [data-reveal].tilt.is-visible { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease-out), opacity 1s var(--ease-out); }
.tilt.is-tilting { transition: transform .15s linear; }

/* ---------- Buttons: magnetic pull, sheen, glow ---------- */
.btn { position: relative; overflow: hidden; transform: translate(var(--tx, 0), var(--ty, 0)); transition: opacity .2s, transform .4s var(--ease-out), box-shadow .4s ease; }
.btn.is-magnet { transition: opacity .2s, transform .12s linear, box-shadow .4s ease; }
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg); transition: left .7s var(--ease-out);
}
.btn:hover::after { left: 130%; }
.btn:hover { opacity: 1; }
.btn-pill:not(.btn-light):hover, .btn-primary:hover { box-shadow: 0 10px 30px rgba(2, 229, 212, .28), 0 0 0 1px rgba(2, 229, 212, .4) inset; }
.btn-light:hover { box-shadow: 0 10px 30px rgba(2, 229, 212, .35); }
.arrow-btn { transform: translate(var(--tx, 0), var(--ty, 0)); transition: background .2s, transform .4s var(--ease-out); }
.pill-list a:hover { border-color: rgba(2, 229, 212, .7); box-shadow: 0 0 24px rgba(2, 229, 212, .25); }

/* ---------- Nav ---------- */
.site-nav { transition: background .35s ease, box-shadow .35s ease, border-color .35s ease; }
.site-nav.is-scrolled {
  background: rgba(255, 255, 255, .78); border-bottom-color: transparent;
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  box-shadow: 0 8px 30px rgba(32, 21, 69, .08);
}
@media (min-width: 769px) {
  .site-nav-links > a:not(.btn), .site-nav-dropdown > a { position: relative; }
  .site-nav-links > a:not(.btn)::after, .site-nav-dropdown > a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--ah-green), var(--ah-violet));
    transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out);
  }
  .site-nav-links > a:not(.btn):hover::after, .site-nav-dropdown:hover > a::after { transform: scaleX(1); transform-origin: left; }
  .site-nav-links > a:not(.btn):hover, .site-nav-dropdown > a:hover { color: inherit; }

  .site-nav-submenu {
    display: block; opacity: 0; visibility: hidden; transform: translateY(10px);
    box-shadow: 0 20px 40px rgba(32, 21, 69, .12);
    transition: opacity .3s ease, transform .4s var(--ease-out), visibility 0s linear .4s;
  }
  .site-nav-dropdown:hover .site-nav-submenu, .site-nav-dropdown:focus-within .site-nav-submenu {
    opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .4s var(--ease-out), visibility 0s;
  }
  .site-nav-submenu a { transition: color .2s, padding-left .3s var(--ease-out); }
  .site-nav-submenu a:hover { color: var(--color-accent); padding-left: 22px; }
}

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--ah-green), var(--ah-violet));
  transform-origin: left; transform: scaleX(var(--p, 0));
}

/* ---------- Card rail drag ---------- */
.card-rail.is-draggable { cursor: grab; }
.card-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.card-rail.is-dragging a { pointer-events: none; }

/* ---------- Reduced motion: switch everything off ---------- */
@media (prefers-reduced-motion: reduce) {
  .home-hero::before, .dark-panel::before, .contact-panel::before, .tone-soft { animation: none !important; }
  .hero-glow, .scroll-progress { display: none; }
  .tilt, .btn, .arrow-btn { transform: none !important; }
  .btn::after { display: none; }
}