/* Contemporary scroll-scrubbed motion system */

:root {
  --motion: cubic-bezier(0.16, 1, 0.3, 1);
  --cursor-glow: radial-gradient(
    circle 300px at 65vw 40vh,
    rgba(200, 245, 66, 0.09) 0%,
    rgba(255, 255, 255, 0.035) 40%,
    transparent 68%
  );
}

/* Note: do not kill .reveal / hero motion on prefers-reduced-motion —
   Windows “Animation effects: Off” sets that flag and would wipe the site. */

/* Film grain — contemporary agency polish */
.page-grain {
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Pointer glow lives in background layers only (see body / sections / hero) */

/* Floating fireflies */
.fireflies {
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  overflow: hidden;
}

.firefly {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #eaff9a;
  box-shadow:
    0 0 6px 2px rgba(200, 245, 66, 0.85),
    0 0 22px 10px rgba(200, 245, 66, 0.35),
    0 0 48px 20px rgba(200, 245, 66, 0.12);
  will-change: transform, opacity;
  mix-blend-mode: screen;
}

/* ----- Progress ----- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #8fbf1f, var(--accent), #f2ff9e);
  pointer-events: none;
}

main {
  position: relative;
  z-index: 2;
}

/* ----- Hero mesh ----- */
.hero__mesh {
  position: absolute;
  inset: -10%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 45% 40% at var(--mx, 70%) var(--my, 40%), rgba(200, 245, 66, 0.16), transparent 60%),
    radial-gradient(ellipse 35% 30% at calc(var(--mx, 70%) - 18%) calc(var(--my, 40%) + 12%), rgba(255, 180, 84, 0.08), transparent 55%);
  filter: blur(8px);
  opacity: 0.9;
  transition: opacity 1s var(--motion);
}

/* Word masks */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.w-inner {
  display: inline-block;
  will-change: transform, opacity;
}

.hero__brand > span:not(.w) .w-inner {
  color: var(--accent);
}

/* ----- Scrubbed reveals (driven by --p) ----- */
.reveal {
  --p: 0;
  --skew: 0deg;
  opacity: calc(0.001 + var(--p) * 0.999);
  transform:
    translate3d(0, calc((1 - var(--p)) * 64px), 0)
    skewY(var(--skew))
    scale(calc(0.92 + var(--p) * 0.08));
  filter: blur(calc((1 - var(--p)) * 1.25px));
  will-change: transform, opacity, filter;
}

.reveal--left {
  transform:
    translate3d(calc((1 - var(--p)) * -48px), calc((1 - var(--p)) * 32px), 0)
    skewY(var(--skew))
    scale(calc(0.94 + var(--p) * 0.06));
}

.reveal--right {
  transform:
    translate3d(calc((1 - var(--p)) * 48px), calc((1 - var(--p)) * 32px), 0)
    skewY(var(--skew))
    scale(calc(0.94 + var(--p) * 0.06));
}

.reveal--scale {
  transform:
    translate3d(0, calc((1 - var(--p)) * 48px), 0)
    skewY(var(--skew))
    scale(calc(0.88 + var(--p) * 0.12));
  clip-path: inset(calc((1 - var(--p)) * 14%) round 1.1rem);
}

/* Project media wipe */
.project.reveal .project__media,
.showcase__main.reveal,
figure.reveal {
  clip-path: inset(0 0 calc((1 - var(--p)) * 100%) 0 round 0);
}

.project.reveal .project__media img,
.showcase__main.reveal img,
figure.reveal img {
  transform: translate3d(0, var(--py, 0px), 0) scale(calc(1.14 - var(--p) * 0.14));
  transition: none;
}

/* List cascade tied to parent --p */
.why__col.reveal .li-rise {
  opacity: calc(var(--p) * 1);
  transform: translate3d(0, calc((1 - var(--p)) * (12 + var(--li-i, 0) * 5) * 1px), 0);
  transition: none;
  filter: blur(calc((1 - var(--p)) * 1px));
}

/* 3D tilt vars — only while fully revealed */
.why__col,
.project,
.process__step,
.contact__card {
  transform-style: preserve-3d;
  transition: border-color 0.7s var(--motion), box-shadow 0.8s var(--motion);
}

.why__col.is-tilting,
.project.is-tilting,
.process__step.is-tilting,
.contact__card.is-tilting {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, -6px, 0);
  border-color: rgba(200, 245, 66, 0.35);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.35);
  filter: none;
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .feature {
    transition: border-color 0.7s var(--motion), transform 0.8s var(--motion);
  }

  .feature:hover {
    border-top-color: var(--accent);
    transform: translate3d(0, -2px, 0);
  }
}

/* Buttons */
.btn {
  transition:
    background 0.55s var(--motion),
    border-color 0.55s var(--motion),
    box-shadow 0.7s var(--motion),
    color 0.45s var(--motion);
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    box-shadow: 0 16px 40px rgba(200, 245, 66, 0.25);
  }
}

/* Nav */
.site-nav a {
  position: relative;
  transition: color 0.5s var(--motion);
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  width: 100%;
  height: 1.5px;
  border-radius: 999px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s var(--motion);
}

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

.site-nav a.is-active {
  color: var(--ink);
}

.site-header {
  transition: background 0.7s var(--motion), border-color 0.7s var(--motion), box-shadow 0.7s var(--motion);
}

.site-header.is-scrolled {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
}

/* Eyebrow */
.section__eyebrow {
  position: relative;
  padding-left: 1.85rem;
}

.section__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.15rem;
  height: 1.5px;
  border-radius: 999px;
  background: var(--accent);
  transform: translateY(-50%) scaleX(calc(var(--p, 0)));
  transform-origin: left center;
  box-shadow: 0 0 14px rgba(200, 245, 66, 0.45);
}

.hero__brand > span:not(.w) .w-inner {
  color: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection {
  background: rgba(200, 245, 66, 0.3);
  color: var(--ink);
}