/* ==========================================================================
   AdGenAi — enhancement layer
   Load AFTER styles.css. Same content, same layout; only motion + hover.
   Tweak the 4 tokens below to match your palette.
   ========================================================================== */

:root {
  --e-ink: #14110d;          /* fill colour used by button sweeps / progress bar */
  --e-paper: #f4efe5;        /* text colour on top of the fill */
  --e-fill: var(--e-ink);    /* change this to an accent if you want a coloured sweep */
  --e-ease: cubic-bezier(.22, 1, .36, 1);
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* animatable stop for the cursor-origin button fill */
@property --r {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

html { scroll-behavior: smooth; }

::selection { background: var(--e-fill); color: var(--e-paper); }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   KEYFRAMES (use individual transform props so they stack with your own
   transforms instead of replacing them)
   -------------------------------------------------------------------------- */
@keyframes e-spin     { to { rotate: 360deg; } }
@keyframes e-breathe  { 50% { scale: 1.05; } }
@keyframes e-bob      { 50% { translate: 0 -10px; } }
@keyframes e-wobble   { 0%, 100% { rotate: -2.5deg; } 50% { rotate: 2.5deg; } }
@keyframes e-nudge    { 50% { translate: 0 6px; } }
@keyframes e-nudge-d  { 50% { translate: 4px 4px; } }
@keyframes e-char-in  {
  from { translate: 0 .6em; rotate: 7deg; opacity: 0; filter: blur(8px); }
}
@keyframes e-header-in {
  from { translate: 0 -100%; opacity: 0; }
}
@keyframes e-fade-up {
  from { translate: 0 22px; opacity: 0; }
}
@keyframes e-modal-in {
  from { translate: 0 44px; scale: .95; opacity: 0; filter: blur(6px); }
}

/* --------------------------------------------------------------------------
   SCROLL PROGRESS BAR (element is created by enhance.js)
   -------------------------------------------------------------------------- */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--e-fill);
  transform-origin: 0 50%;
  scale: var(--p, 0) 1;
  z-index: 9999;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   HEADER — entrance, hide on scroll down, nav underline sweep
   -------------------------------------------------------------------------- */
.site-header {
  animation: e-header-in .9s var(--e-ease) .1s backwards;
  transition: translate .6s var(--e-ease), box-shadow .4s ease,
              background-color .4s ease, backdrop-filter .4s ease;
}
.site-header.is-scrolled { box-shadow: 0 14px 32px -22px rgba(20, 17, 13, .45); }
.site-header.is-hidden   { translate: 0 -110%; }

.brand-word, .brand-ai, .brand sup { display: inline-block; }
.brand sup { transition: rotate .8s var(--e-ease); }
.brand-ai  { transition: scale .5s var(--e-spring); }

.desktop-nav a,
.site-footer a:not(.brand) {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  padding-bottom: 3px;
  transition: background-size .55s var(--e-ease);
}

.header-cta span,
.contact-button span,
.all-services-link span {
  display: inline-block;
  transition: translate .45s var(--e-spring), rotate .45s var(--e-spring);
}

.menu-toggle span { transition: translate .4s var(--e-spring), scale .4s var(--e-spring); }

/* --------------------------------------------------------------------------
   BUTTONS — fill sweeps out from wherever the cursor entered
   -------------------------------------------------------------------------- */
.header-cta,
.round-link,
.contact-button,
.all-services-link,
.commerce-button,
.local-button {
  background-image: radial-gradient(
    circle at var(--bx, 50%) var(--by, 50%),
    var(--e-fill) calc(var(--r) - .6%),
    transparent var(--r)
  );
  transition: --r .7s var(--e-ease), color .35s ease .08s,
              border-color .35s ease, transform .4s var(--e-ease),
              scale .5s var(--e-spring);
}

.round-link { animation: e-nudge 2.4s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   HERO — letter-by-letter entrance, floating orbits, sticker, spinning stars
   -------------------------------------------------------------------------- */
.hero { --hx: 0; --hy: 0; --sy: 0; }

.word { display: inline-block; white-space: nowrap; }
.ch {
  display: inline-block;
  transition: translate .45s var(--e-spring), rotate .45s var(--e-spring);
}

/* hero plays on page load */
.hero-title .ch {
  animation: e-char-in 1s var(--e-ease) backwards;
  animation-delay: calc(var(--i, 0) * 38ms + .25s);
}
/* section headings play when they scroll into view */
.e-in .ch {
  animation: e-char-in .9s var(--e-ease) backwards;
  animation-delay: calc(var(--i, 0) * 26ms);
}

.hero-title em {
  display: inline-block;
  transition: rotate .6s var(--e-spring), scale .6s var(--e-spring);
}

.asterisk,
.contact-star,
.ticker b {
  display: inline-block;
  animation: e-spin 14s linear infinite;
}
.ticker b { animation-duration: 9s; }
.contact-star { transition: scale .6s var(--e-spring); }

.hero-orbit {
  animation: e-breathe 9s ease-in-out infinite;
  transition: translate 1s var(--e-ease);
}
.orbit-one {
  translate: calc(var(--hx) * 22px) calc(var(--hy) * 22px + var(--sy) * -.12px);
}
.orbit-two {
  translate: calc(var(--hx) * -30px) calc(var(--hy) * -30px + var(--sy) * -.2px);
  animation-delay: -4s;
  animation-direction: reverse;
}

.hero-sticker {
  translate: calc(var(--hx) * -16px) calc(var(--hy) * -16px);
  animation: e-wobble 7s ease-in-out infinite;
  transition: translate .8s var(--e-ease), scale .6s var(--e-spring);
}
.hero-sticker i {
  display: inline-block;
  animation: e-nudge-d 2.4s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   TICKER — skews with scroll speed, pauses on hover
   -------------------------------------------------------------------------- */
.ticker span {
  display: inline-block;
  transform: skewX(var(--skew, 0deg));
  transition: scale .4s var(--e-spring), opacity .3s ease;
}
.ticker:hover .ticker-track { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   HEADINGS — underline draws under the italic word when revealed
   -------------------------------------------------------------------------- */
.section-heading h2 em,
.process h2 em {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 0 2px;
  transition: background-size 1.2s var(--e-ease) .5s;
}
.section-heading.e-in h2 em,
.process h2.e-in em { background-size: 100% 2px; }

/* --------------------------------------------------------------------------
   PROJECT CARDS — 3D tilt, cursor shine, parallax depth, sibling dimming
   (all motion sits on children so your .reveal transitions are untouched)
   -------------------------------------------------------------------------- */
.project-visual {
  transform: perspective(1100px)
             rotateX(calc(var(--py, 0) * -3.5deg))
             rotateY(calc(var(--px, 0) * 4.5deg));
  transition: transform .45s var(--e-ease), translate .6s var(--e-ease),
              filter .5s ease, box-shadow .6s ease, scale .6s var(--e-ease);
}

.card-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, .38),
    transparent 60%
  );
  mix-blend-mode: overlay;
  z-index: 6;
}

.project-open {
  transition: rotate .55s var(--e-spring), scale .55s var(--e-spring),
              background-color .3s ease, color .3s ease;
}
.project-meta h3,
.project-type,
.project-number {
  transition: translate .55s var(--e-ease), opacity .4s ease;
}

/* parallax depth for the three spheres */
.product-orb { transition: translate .6s var(--e-ease); }
.orb-a { translate: calc(var(--px, 0) * 18px)  calc(var(--py, 0) * 14px); }
.orb-b { translate: calc(var(--px, 0) * -12px) calc(var(--py, 0) * -10px); }
.orb-c { translate: calc(var(--px, 0) * 24px)  calc(var(--py, 0) * -16px); }

.orb-art {
  animation: e-bob 5.5s ease-in-out infinite;
  transition: scale .6s var(--e-spring), rotate .6s var(--e-spring);
}
.orb-a .orb-art { animation-delay: -1s;   animation-duration: 5.5s; }
.orb-b .orb-art { animation-delay: -2.6s; animation-duration: 6.4s; }
.orb-c .orb-art { animation-delay: -4s;   animation-duration: 5s; }

/* other concept visuals */
.studio-sun {
  animation: e-bob 8s ease-in-out infinite;
  transition: scale .8s var(--e-spring), filter .6s ease;
}
.launch-can {
  animation: e-bob 4.8s ease-in-out infinite;
  transition: rotate .7s var(--e-spring), scale .7s var(--e-spring);
}
.local-photo { transition: scale .8s var(--e-spring), rotate .8s var(--e-spring); }

/* --------------------------------------------------------------------------
   SERVICES + PROCESS — row wipe, text slide, focus dimming
   -------------------------------------------------------------------------- */
.service-row { position: relative; isolation: isolate; }
.service-row::before {
  content: "";
  position: absolute;
  inset: 0 -1.2rem;
  background: rgba(20, 17, 13, .06);
  transform-origin: 0 50%;
  scale: 0 1;
  transition: scale .7s var(--e-ease);
  z-index: -1;
  pointer-events: none;
}

.service-row > div,
.process-step > div {
  transition: translate .6s var(--e-ease), opacity .45s ease;
}
.service-no,
.process-step > span {
  display: inline-block;
  transition: scale .55s var(--e-spring), translate .55s var(--e-spring);
}
.service-icon {
  display: inline-block;
  transition: translate .55s var(--e-spring), scale .55s var(--e-spring), rotate .55s var(--e-spring);
}

.service-row h3,
.process-step h3 {
  display: inline-block;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size .7s var(--e-ease);
}

.process-stamp {
  animation: e-wobble 9s ease-in-out infinite;
  transition: scale .7s var(--e-spring);
}

/* --------------------------------------------------------------------------
   MANIFESTO — words light up as you scroll (JS sets --o per word)
   -------------------------------------------------------------------------- */
.mw {
  display: inline-block;
  opacity: calc(.16 + .84 * var(--o, 1));
  transition: opacity .3s linear, -webkit-text-fill-color .55s ease;
}
.highlight-word {
  display: inline-block;
  transition: rotate .5s var(--e-spring), scale .5s var(--e-spring);
}
.outlined { transition: -webkit-text-fill-color .55s ease; }

.manifesto-bottom span { transition: translate .5s var(--e-ease); }

/* --------------------------------------------------------------------------
   PROJECT MODAL — springy open, staggered content
   -------------------------------------------------------------------------- */
.project-modal[aria-hidden="false"] .modal-panel,
.project-modal.is-open .modal-panel,
.project-modal.open .modal-panel {
  animation: e-modal-in .7s var(--e-ease) both;
}
.project-modal[aria-hidden="false"] .modal-panel > *,
.project-modal.is-open .modal-panel > *,
.project-modal.open .modal-panel > * {
  animation: e-fade-up .7s var(--e-ease) backwards;
}
.modal-panel > :nth-child(2) { animation-delay: .12s !important; }
.modal-panel > :nth-child(3) { animation-delay: .19s !important; }
.modal-panel > :nth-child(4) { animation-delay: .26s !important; }
.modal-panel > :nth-child(5) { animation-delay: .33s !important; }
.modal-panel > :nth-child(6) { animation-delay: .40s !important; }

.modal-close { transition: rotate .5s var(--e-spring), scale .5s var(--e-spring); }
.modal-tags > * { transition: translate .4s var(--e-spring), scale .4s var(--e-spring); }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.footer-brand { transition: scale .5s var(--e-spring); }

/* ==========================================================================
   HOVER STATES — only on devices that can actually hover
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {

  /* header + brand + nav */
  .brand:hover sup { rotate: 360deg; }
  .brand:hover .brand-ai { scale: 1.12; }
  .desktop-nav a:hover,
  .site-footer a:not(.brand):hover { background-size: 100% 1px; }
  .menu-toggle:hover span:first-child { translate: 5px 0; }
  .menu-toggle:hover span:last-child  { translate: -5px 0; }
  .footer-brand:hover { scale: 1.05; }

  /* buttons */
  .header-cta:hover,
  .round-link:hover,
  .contact-button:hover,
  .all-services-link:hover,
  .commerce-button:hover,
  .local-button:hover {
    --r: 150%;
    color: var(--e-paper);
  }
  .header-cta:hover span,
  .contact-button:hover span,
  .all-services-link:hover span { translate: 4px -4px; rotate: 45deg; }
  .round-link:hover { animation-play-state: paused; scale: 1.14; }

  /* hero */
  .ch:hover { translate: 0 -.07em; rotate: -5deg; }
  .hero-title em:hover { rotate: -3deg; scale: 1.05; }
  .hero-sticker:hover { scale: 1.1; animation-play-state: paused; }
  .contact-title:hover .contact-star { scale: 1.3; }

  /* ticker */
  .ticker span:hover { scale: 1.1; }
  .ticker:hover span:not(:hover) { opacity: .45; }

  /* project cards */
  .project-card:hover .project-visual {
    translate: 0 -10px;
    box-shadow: 0 34px 60px -28px rgba(20, 17, 13, .5);
  }
  .project-card:hover .card-shine { opacity: 1; }
  .project-card:hover .project-open { rotate: 45deg; scale: 1.14; }
  .project-card:hover .project-meta h3 { translate: 10px 0; }
  .project-card:hover .project-type { translate: -6px 0; }
  .project-card:hover .project-number { translate: 0 -3px; }

  .work-grid:has(.project-card:hover) .project-card:not(:hover) .project-visual {
    filter: saturate(.55) brightness(.96);
    scale: .985;
  }
  .work-grid:has(.project-card:hover) .project-card:not(:hover) .project-meta {
    opacity: .5;
  }

  .product-orb:hover .orb-art { scale: 1.14; rotate: -8deg; }
  .project-card:hover .studio-sun { scale: 1.14; filter: saturate(1.25); }
  .project-card:hover .launch-can { rotate: -6deg; scale: 1.06; }
  .project-card:hover .local-photo { scale: 1.04; rotate: -1.2deg; }

  /* services */
  .service-row:hover::before { scale: 1 1; }
  .service-row:hover > div { translate: 18px 0; }
  .service-row:hover .service-no { scale: 1.2; }
  .service-row:hover .service-icon { translate: 6px -6px; scale: 1.35; }
  .service-row:hover h3,
  .process-step:hover h3 { background-size: 100% 2px; }
  .service-list:has(.service-row:hover) .service-row:not(:hover) > div { opacity: .4; }

  /* process */
  .process-step:hover > div { translate: 14px 0; }
  .process-step:hover > span { scale: 1.18; translate: 0 -3px; }
  .process-steps:has(.process-step:hover) .process-step:not(:hover) > div { opacity: .4; }
  .process-stamp:hover { scale: 1.06; animation-play-state: paused; }

  /* manifesto */
  .outlined:hover,
  .outlined:hover .mw { -webkit-text-fill-color: var(--e-ink); }
  .highlight-word:hover { rotate: -1.5deg; scale: 1.06; }
  .manifesto-bottom span:hover { translate: 6px 0; }

  /* modal */
  .modal-close:hover { rotate: 90deg; scale: 1.12; }
  .modal-tags > *:hover { translate: 0 -3px; scale: 1.05; }
}

/* ==========================================================================
   REDUCED MOTION — respect the OS setting
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .project-visual { transform: none; }
  .scroll-progress { display: none; }
}


/* ==========================================================================
   HERO MAGIC STAGE
   Fills the empty space under the hero text with an animated orbit of your
   own services around a glowing "AI" core. Built by enhance.js (no HTML edit).
   Change --e-accent if you want a different glow colour.
   ========================================================================== */
:root { --e-accent: #e4573f; }

@keyframes e-ring    { to { rotate: calc(360deg * var(--sign, 1)); } }
@keyframes e-counter { to { rotate: calc(-360deg * var(--sign, 1)); } }
@keyframes e-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--e-accent) 50%, transparent); }
  100% { box-shadow: 0 0 0 46px transparent; }
}
@keyframes e-burst {
  0%   { scale: 1; }
  35%  { scale: 1.35; }
  100% { scale: 1; }
}

.hero { position: relative; }

/* the existing hero circles now carry a glowing dot that travels around them */
.hero-orbit {
  animation: e-breathe 9s ease-in-out infinite, e-spin 46s linear infinite;
}
.orbit-two {
  animation-duration: 9s, 70s;
  animation-delay: -4s, -10s;
  animation-direction: reverse;
}
.hero-orbit::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  translate: -50% -50%;
  background: var(--e-accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--e-accent) 18%, transparent),
              0 0 24px var(--e-accent);
}
.orbit-two::after {
  background: var(--e-ink);
  box-shadow: 0 0 0 6px rgba(20, 17, 13, .08);
}

/* ---- stage ---- */
.magic-stage {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: clamp(320px, 52vh, 470px);
  margin-top: clamp(2rem, 6vh, 4.5rem);
  touch-action: pan-y;
  user-select: none;
}
.magic-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}
.magic-fit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.magic-system {
  position: relative;
  height: 100%;
  aspect-ratio: 1;
  translate: calc(var(--hx, 0) * -14px) calc(var(--hy, 0) * -10px);
  transition: translate .9s var(--e-ease);
}

/* rings */
.magic-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--d);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1px dashed rgba(20, 17, 13, .28);
  pointer-events: none;
  animation: e-ring var(--dur, 30s) linear infinite;
  transition: opacity 1s ease, scale 1.3s var(--e-spring);
}
.magic-ring.ring-2 { border-style: solid; border-color: color-mix(in srgb, var(--e-accent) 38%, transparent); transition-delay: .15s; }
.magic-ring.ring-3 { border-color: rgba(20, 17, 13, .18); transition-delay: .3s; }

.magic-ring::before {                     /* small planet riding each ring */
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  translate: -50% -50%;
  background: var(--e-accent);
}
.ring-2::before { background: var(--e-ink); }

.magic-slot  { position: absolute; inset: 0; rotate: var(--a, 0deg); pointer-events: none; }
.magic-chip  {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  rotate: calc(var(--a, 0deg) * -1);
}

/* service pills (stay upright while the rings turn) */
.magic-chip-in {
  display: inline-block;
  padding: .6rem 1rem;
  border: 1px solid var(--e-ink);
  border-radius: 999px;
  background: rgba(244, 239, 229, .82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--e-ink);
  font: 500 .7rem/1 "DM Mono", ui-monospace, monospace;
  letter-spacing: .1em;
  white-space: nowrap;
  pointer-events: auto;
  cursor: default;
  animation: e-counter var(--dur, 30s) linear infinite;
  transition: background-color .35s ease, color .35s ease,
              border-color .35s ease, scale .5s var(--e-spring),
              box-shadow .4s ease;
}
.magic-ring:hover,
.magic-ring:hover .magic-chip-in { animation-play-state: paused; }

.magic-chip-in:hover {
  scale: 1.14;
  background: var(--e-accent);
  border-color: var(--e-accent);
  color: var(--e-paper);
  box-shadow: 0 12px 28px -12px var(--e-accent);
}

/* core */
.magic-core {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: clamp(58px, 17%, 88px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--e-accent);
  color: var(--e-ink);
  font: 800 clamp(1.35rem, 3.2vh, 2rem)/1 "Manrope", sans-serif;
  letter-spacing: -.04em;
  pointer-events: auto;
  cursor: pointer;
  animation: e-pulse 2.8s ease-out infinite;
  transition: opacity .8s ease, scale .9s var(--e-spring), rotate .6s var(--e-spring);
}
.magic-core sup {
  position: absolute;
  top: 6px;
  right: 7px;
  font-size: .38em;
  font-weight: 700;
  letter-spacing: 0;
}
.magic-core:hover { rotate: -8deg; scale: 1.1; }
.magic-core.is-burst { animation: e-pulse 2.8s ease-out infinite, e-burst .6s var(--e-ease); }

/* entrance: only hidden once JS has built the stage */
.magic-stage:not(.is-live) .magic-ring { opacity: 0; scale: .7; }
.magic-stage:not(.is-live) .magic-core { opacity: 0; scale: .3; }

@media (max-width: 640px) {
  .magic-stage { height: clamp(300px, 46vh, 400px); }
  .magic-chip-in { padding: .5rem .8rem; font-size: .62rem; }
}