/* ==========================================================================
   Motion layer (driven by js/motion-core.js and js/motion-fx.js)

   Every rule here is scoped to html.has-motion, which is only present when
   JavaScript runs and the visitor has not asked for reduced motion. Without it
   the page is fully static and everything is visible.

   JavaScript only writes custom properties and classes. CSS owns every transform:
     --px --py --pr --ps   parallax, depth, drag, scale  (data-parallax, data-depth ...)
     --tx --ty --sx --sy   tilt and sheen                (data-tilt)
     --mx --my             magnetic buttons
     --sp                  scrub progress, 0 to 1         (data-scrub)
   Reveals use the independent `translate`, `scale`, `opacity` and `clip-path`
   properties, so a reveal and a parallax on the same element never fight.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
}

html.has-motion {
  scroll-behavior: auto; /* the engine eases anchor jumps itself */
}

/* ---- Page entrance ------------------------------------------------------ */
@keyframes gg-page-in {
  from {
    opacity: 0.01; /* not 0, so LCP is still recorded at first paint */
    translate: 0 10px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.has-motion main {
  animation: gg-page-in 0.6s var(--ease-out) both;
  overflow-x: clip; /* layers waiting to slide in from the side never cause a horizontal scrollbar */
}

/* ---- Scroll reveals ----------------------------------------------------- */
.has-motion [data-reveal],
.has-motion [data-stagger] > * {
  opacity: 0;
  translate: 0 32px;
  transition:
    opacity 0.8s var(--ease-out),
    translate 0.95s var(--ease-out),
    scale 0.95s var(--ease-out),
    clip-path 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms + var(--d, 0ms));
}

.has-motion [data-reveal="up"] {
  translate: 0 32px;
}

.has-motion [data-reveal="left"] {
  translate: -56px 0;
}

.has-motion [data-reveal="right"] {
  translate: 56px 0;
}

.has-motion [data-reveal="scale"] {
  translate: 0 28px;
  scale: 0.94;
}

.has-motion [data-reveal="mask"] {
  opacity: 1;
  translate: none;
  clip-path: inset(0 0 100% 0 round 1rem);
}

.has-motion [data-reveal="words"] {
  opacity: 1;
  translate: none;
}

.has-motion [data-reveal].is-in,
.has-motion [data-stagger] > .is-in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  clip-path: inset(-2rem round 1rem); /* roomy: shadows and focus rings are never cut off */
}

.has-motion .is-instant {
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}

.has-motion .is-done,
.has-motion [data-reveal].is-done,
.has-motion [data-stagger] > .is-done {
  clip-path: none;
  transition:
    opacity 0.3s ease,
    translate 0.35s var(--ease-out),
    scale 0.35s var(--ease-out),
    transform 0.35s var(--ease-out),
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background-color 0.2s ease;
  transition-delay: 0s;
}

/* Lite mode: plain, short fades */
.has-motion.is-lite [data-reveal],
.has-motion.is-lite [data-stagger] > * {
  translate: 0 12px;
  transition-duration: 0.5s;
  transition-delay: calc(var(--i, 0) * 40ms);
}

.has-motion.is-lite [data-reveal="scale"],
.has-motion.is-lite [data-reveal="left"],
.has-motion.is-lite [data-reveal="right"] {
  scale: 1;
  translate: 0 12px;
}

/* ---- Split-word headings ------------------------------------------------ */
.has-motion .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.has-motion .w__i {
  display: inline-block;
  translate: 0 110%;
  transition: translate 1s var(--ease-out);
  transition-delay: calc(var(--w, 0) * 55ms + 80ms);
}

.has-motion [data-split].is-in .w__i {
  translate: 0 0;
}

/* ---- Steps: line draws in ----------------------------------------------- */
.has-motion .steps > li {
  position: relative;
  border-top-color: rgba(24, 37, 27, 0.08);
}

.has-motion .steps > li::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gg-green);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.1s var(--ease-out) calc(var(--i, 0) * 160ms + 200ms);
}

.has-motion .steps > li.is-in::after {
  transform: scaleX(1);
}

.has-motion .steps > li::before {
  scale: 0.4;
  transition: scale 0.6s var(--ease-spring) calc(var(--i, 0) * 160ms + 300ms), background-color 0.4s ease;
}

.has-motion .steps > li.is-in::before {
  scale: 1;
}

/* Scrubbed steps: the line draws and each node lights up as it passes the reading line */
.has-motion .steps[data-scrub] > li::after {
  transition: transform 0.7s var(--ease-out);
}

.has-motion .steps[data-scrub] > li:not(.is-lit)::after {
  transform: scaleX(0);
}

.has-motion .steps[data-scrub] > li.is-lit::after {
  transform: scaleX(1);
}

.has-motion .steps[data-scrub] > li::before {
  background: var(--gg-forest);
}

.has-motion .steps[data-scrub] > li.is-lit::before {
  background: var(--gg-green);
  color: var(--gg-on-green);
  scale: 1.15;
}

/* ---- Parallax layers: one transform owner, fed by custom properties ------- */
.has-motion [data-parallax],
.has-motion [data-parallax-x],
.has-motion [data-rotate],
.has-motion [data-parallax-scale],
.has-motion [data-centre-scale],
.has-motion [data-depth],
.has-motion [data-drag],
.has-motion [data-parallax-img] > .ph,
.has-motion [data-parallax-img] > img {
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(var(--pr, 0deg)) scale(var(--ps, 1));
}

.has-motion [data-parallax-scale] {
  transform-origin: 50% 0;
}

.has-motion .is-live {
  will-change: transform; /* only while the layer is near the viewport */
}

/* The engine measures natural positions with every layer transform switched off */
.is-measuring [data-parallax],
.is-measuring [data-parallax-x],
.is-measuring [data-rotate],
.is-measuring [data-parallax-scale],
.is-measuring [data-centre-scale],
.is-measuring [data-depth],
.is-measuring [data-drag],
.is-measuring [data-parallax-img] > .ph,
.is-measuring [data-parallax-img] > img,
.is-measuring .marquee__track,
.is-measuring [data-tilt] {
  transform: none !important;
}

.has-motion [data-parallax-img] > .ph,
.has-motion [data-parallax-img] > img {
  position: absolute;
  left: 0;
  right: 0;
  top: -12%;
  bottom: -12%;
  height: auto;
  min-height: 0;
}

/* ---- Scrubs (data-scrub) -------------------------------------------------- */
.has-motion [data-scrub] {
  --sp: 0;
}

.has-motion.is-lite [data-scrub] {
  --sp: 1;
}

/* fill: words go from muted to full as the block scrolls through */
.has-motion [data-scrub="fill"] .sw {
  opacity: clamp(0.5, calc(0.5 + (var(--sp, 0) * var(--wn, 1) * 1.15 - var(--wi, 0)) * 0.5), 1);
}

/* grow: the green shape expands from the centre; headline settles; buttons arrive last */
.cta-shape {
  display: none;
}

.has-motion .final-cta[data-scrub="grow"] {
  background: transparent;
}

.has-motion .final-cta[data-scrub="grow"] .cta-shape {
  display: block;
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: var(--gg-green);
  clip-path: circle(calc(var(--sp, 0) * 85%) at 50% 60%);
}

.has-motion .final-cta[data-scrub="grow"] h2 {
  scale: calc(0.92 + var(--sp, 0) * 0.08);
}

.has-motion .final-cta[data-scrub="grow"] .btn-row {
  opacity: clamp(0, calc((var(--sp, 0) - 0.55) * 3), 1);
}

/* ---- Tilt with a light sheen (fine pointers) ------------------------------ */
.has-motion [data-tilt] {
  position: relative;
  transform:
    perspective(900px)
    translate3d(var(--px, 0px), var(--py, 0px), 0)
    rotateX(var(--ty, 0deg))
    rotateY(var(--tx, 0deg))
    scale(var(--ps, 1));
}

.sheen {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .has-motion .card:hover,
  .has-motion .plan:hover {
    border-color: var(--gg-green);
  }

  .has-motion [data-tilt] > .sheen {
    display: block;
    position: absolute;
    inset: 0;
    margin: 0 !important;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at var(--sx, 50%) var(--sy, 0%), rgba(255, 255, 255, 0.28), transparent 55%);
    opacity: var(--so, 0);
    transition: opacity 0.3s ease;
  }

  .has-motion .is-tilting {
    transition: transform 0.12s linear, box-shadow 0.3s ease !important;
    box-shadow: 0 18px 40px rgba(24, 37, 27, 0.12);
  }
}

/* ---- Magnetic buttons --------------------------------------------------- */
.has-motion .is-magnetic {
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition:
    transform 0.45s var(--ease-spring),
    background-color var(--ease),
    color var(--ease),
    border-color var(--ease);
}

.has-motion .is-magnetic:hover {
  transition:
    transform 0.15s linear,
    background-color var(--ease),
    color var(--ease),
    border-color var(--ease);
}

/* ---- Chips and icon tiles ----------------------------------------------- */
.has-motion .chips a {
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.35s var(--ease-spring);
}

.has-motion .chips a:hover {
  transform: translateY(-3px);
}

.has-motion .icon-badge {
  transition: transform 0.5s var(--ease-spring), background-color 0.3s ease;
}

.has-motion a.card:hover .icon-badge,
.has-motion .card:hover > .icon-badge {
  transform: rotate(-8deg) scale(1.08);
}

/* Split cards: the round badge pops and turns in with its card */
.has-motion .split .icon-badge {
  scale: 0;
  rotate: -90deg;
  transition: scale 0.7s var(--ease-spring) 0.35s, rotate 0.8s var(--ease-spring) 0.35s, background-color 0.3s ease;
}

.has-motion .split.is-in .icon-badge {
  scale: 1;
  rotate: 0deg;
}

/* ---- Header: progress bar (very top of the window), condense, scrollspy ----- */
.scroll-progress {
  display: none;
}

.has-motion .scroll-progress {
  display: block;
  position: fixed;
  z-index: 60;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gg-green-dark), var(--gg-green));
  opacity: 0;
  transition: opacity 0.2s ease;
  transform: scaleX(var(--sp, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}

.has-motion .scroll-progress.is-on {
  opacity: 1;
}

.has-motion .site-nav a {
  position: relative;
}

.has-motion .site-nav a::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--gg-green);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.35s var(--ease-out);
}

.has-motion .site-nav a:hover::after,
.has-motion .site-nav a.is-active::after {
  transform: scaleX(1);
}

/* ---- Audience switch: sliding pill -------------------------------------- */
.has-motion .audience-switch.is-sliding {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.has-motion .audience-switch.is-sliding::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: var(--radius-pill);
  background: var(--gg-ink);
  transition: transform 0.45s var(--ease-spring);
}

.has-motion .audience-switch.is-sliding[data-active="1"]::before {
  transform: translateX(100%);
}

.has-motion .audience-switch.is-sliding a {
  position: relative;
  z-index: 1;
  background: transparent;
  color: var(--gg-ink);
  transition: color 0.3s ease;
}

.has-motion .audience-switch.is-sliding a:hover {
  background: transparent;
}

.has-motion .audience-switch.is-sliding[data-active="0"] a:nth-child(1),
.has-motion .audience-switch.is-sliding[data-active="1"] a:nth-child(2) {
  color: var(--gg-white);
}

/* ---- Page wipe between audiences ---------------------------------------- */
.page-veil {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--gg-green);
  transform: translate3d(0, 100%, 0);
  transition: transform 0.42s cubic-bezier(0.7, 0, 0.3, 1);
  pointer-events: none;
}

.is-leaving .page-veil {
  transform: none;
}

/* ---- FAQ --------------------------------------------------------------- */
.has-motion .faq details {
  overflow: hidden;
}

.has-motion .faq summary::after {
  transition: transform 0.35s var(--ease-spring);
}

.has-motion .faq details.is-closing summary::after {
  transform: rotate(45deg);
}

/* ---- Marquee ------------------------------------------------------------- */
.has-motion .marquee-band {
  display: block;
  overflow: hidden;
  overflow: clip;
  padding-block: var(--space-6);
}

.has-motion .marquee {
  rotate: -1.6deg;
}

/* both rows lean the same way, with clear space between them, so they never cross */
.has-motion .marquee--outline {
  margin-top: var(--space-2);
}

.has-motion .marquee__track {
  transform: translate3d(var(--px, 0px), 0, 0) skewX(var(--sk, 0deg));
}

/* ---- Draggable pieces ----------------------------------------------------- */
.has-motion .is-draggable {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.has-motion .is-dragging {
  cursor: grabbing;
  z-index: 8;
  scale: 1.08;
}

@keyframes gg-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

.has-motion .deck-avatar {
  animation: gg-bob 6s ease-in-out infinite;
}

.has-motion .deck-tags li {
  animation: gg-bob 7s ease-in-out infinite;
}

.has-motion .deck-tags li:nth-child(2) { animation-delay: -2.2s; }
.has-motion .deck-tags li:nth-child(3) { animation-delay: -4.4s; }

.has-motion .demo__float {
  animation: gg-bob 6s ease-in-out infinite;
}

.has-motion .demo__float--2 {
  animation-delay: -3s;
}

/* ---- "Free" badge and highlighter ----------------------------------------- */
@keyframes gg-spin {
  to { rotate: 360deg; }
}

.has-motion .statement__ring {
  transform-box: view-box;
  animation: gg-spin 18s linear infinite;
}

.has-motion .statement__badge {
  transition: scale 0.5s var(--ease-spring);
}

.has-motion .statement:hover .statement__badge {
  scale: 1.1;
}

.has-motion .statement:hover .statement__ring {
  animation-duration: 6s;
}


/* ---- Decorative layers never cause a horizontal scrollbar ------------------- */
.hero-panel,
.final-cta,
.statement,
.panel-photo,
.band-dark,
.who {
  overflow: clip;
}

/* ---- Safety nets -------------------------------------------------------- */
@media print {
  .has-motion [data-reveal],
  .has-motion [data-stagger] > *,
  .has-motion .w__i,
  .has-motion .sw {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    clip-path: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage__pulse,
  .stage__photo,
  .stage__photo > img,
  .stage__orbit,
  .orbit__chip,
  .stage-card,
  .stage-pill,
  .deck-avatar,
  .deck-tags li,
  .statement__ring,
  .demo__float {
    animation: none !important;
  }
}