/* Ace of Fades — layout & components. Tokens live in variables.css.
   Sections are full-bleed; content aligns to .container. */

* { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Lenis owns scrolling when active — kill native smooth so they don't fight */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--color-ink);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

a { color: var(--color-brass); }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-brass);
  outline-offset: 3px;
  border-radius: 2px;
}

.muted { color: var(--color-cream-dim); }

.spade { width: 20px; height: 20px; fill: var(--color-red); flex: none; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  background: color-mix(in srgb, var(--color-ink) 85%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-line);
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-cream);
  text-decoration: none;
  min-height: 44px;
  white-space: nowrap;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.site-header nav a {
  color: var(--color-cream);
  text-decoration: none;
  font-weight: 500;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.site-header nav a:hover { color: var(--color-brass); }

/* animated underline on plain nav links */
.site-header nav a:not(.btn) { position: relative; }
.site-header nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 8px;
  width: 100%;
  height: 2px;
  background: var(--color-brass);
  transform: scaleX(0);
  transform-origin: right;
}
@media (prefers-reduced-motion: no-preference) {
  .site-header nav a:not(.btn)::after { transition: transform var(--dur) var(--ease-out); }
}
.site-header nav a:not(.btn):hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.wordmark .spade { transition: transform var(--dur) var(--ease-out); }
.wordmark:hover .spade { transform: rotate(-14deg) scale(1.12); }

/* ---------- buttons ---------- */
a.btn, button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  min-height: 48px;
  padding: var(--space-3) var(--space-8);
  background: var(--color-brass);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
/* transform is owned by the GSAP magnetic effect on fine pointers;
   CSS only handles color + touch press feedback */
@media (prefers-reduced-motion: no-preference) {
  a.btn, button.btn { transition: background-color 150ms ease-out; }
}
a.btn:hover, button.btn:hover { background: var(--color-brass-deep); }
@media (pointer: coarse) {
  a.btn:active, button.btn:active { transform: scale(0.97); }
}

a.btn-ghost {
  background: transparent;
  color: var(--color-cream);
  box-shadow: inset 0 0 0 1px var(--color-line);
}
a.btn-ghost:hover { background: var(--color-surface); }

a.btn-small { min-height: 40px; padding: var(--space-2) var(--space-4); }

/* ---------- sections ---------- */
main > section { padding-block: var(--space-24); }

.services, .booking, .info, .work {
  position: relative;
  overflow: hidden;
}

/* giant outlined watermark behind each section (parallaxed by GSAP) */
.section-ghost {
  position: absolute;
  top: var(--space-4);
  right: -2%;
  z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(7rem, 24vw, 22rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-line);
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  will-change: transform;
}
.services .container, .booking .container, .info .container, .work .container {
  position: relative;
  z-index: 1;
}

/* ---------- gallery (masonry columns, parallax-drifted) ---------- */
.gallery {
  columns: 2;
  column-gap: var(--space-4);
}
@media (min-width: 900px) {
  .gallery { columns: 3; column-gap: var(--space-6); }
}

.shot {
  margin: 0 0 var(--space-4);
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  break-inside: avoid;
  will-change: transform;
}
@media (min-width: 900px) {
  .shot { margin-bottom: var(--space-6); }
}
/* varied crops for rhythm */
.shot:nth-of-type(3n) { aspect-ratio: 1 / 1; }
.shot:nth-of-type(4n) { aspect-ratio: 4 / 5; }

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%; /* bias crops toward the head, not the cape */
  display: block;
  filter: grayscale(30%);
}
@media (prefers-reduced-motion: no-preference) {
  .shot img { transition: transform 600ms var(--ease-out), filter 600ms var(--ease); }
}
@media (hover: hover) {
  .shot:hover img { transform: scale(1.06); filter: grayscale(0%); }
}

h2 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 400;
  margin: 0 0 var(--space-12);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-cream);
}
h2::after {
  content: "";
  display: block;
  width: var(--space-16);
  height: var(--space-1);
  margin-top: var(--space-4);
  background: var(--color-brass);
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: max(560px, calc(100svh - var(--header-h) - 88px)); /* header + hero + marquee ≈ one viewport */
  display: grid;
  align-items: center;
  padding-block: var(--space-12);
}

/* faint brass halo — kept low so the black stays black */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 70% at 68% 45%,
    color-mix(in srgb, var(--color-brass) 7%, transparent),
    transparent 65%
  );
  pointer-events: none;
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-12);
  will-change: transform;
}

/* floating spade field behind the copy (Note2Self-style ambient motion) */
.hero-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-mote {
  position: absolute;
  width: var(--size);
  height: var(--size);
  color: var(--c);
  opacity: var(--op);
  transform: translate3d(
    calc(var(--hx, 0px) * var(--depth)),
    calc(var(--hy, 0px) * var(--depth)),
    0
  );
}
.hero-mote svg { display: block; width: 100%; height: 100%; fill: currentColor; }

/* per-mote placement lives here — markup stays clean */
.hero-mote:nth-of-type(1) { top: 10%; left: 56%; --size: 6rem;   --depth: 0.8; --op: 0.12; --fd: 9s;  --fdelay: -1s;   --c: var(--color-red); }
.hero-mote:nth-of-type(2) { top: 66%; left: 90%; --size: 4rem;   --depth: 1;   --op: 0.18; --fd: 11s; --fdelay: -4s;   --c: var(--color-line); }
.hero-mote:nth-of-type(3) { top: 78%; left: 16%; --size: 5rem;   --depth: 0.6; --op: 0.1;  --fd: 13s; --fdelay: -7s;   --c: var(--color-line); }
.hero-mote:nth-of-type(4) { top: 8%;  left: 20%; --size: 3rem;   --depth: 0.5; --op: 0.14; --fd: 10s; --fdelay: -2.5s; --c: var(--color-red); }
.hero-mote:nth-of-type(5) { top: 34%; left: 95%; --size: 3.5rem; --depth: 1;   --op: 0.16; --fd: 8s;  --fdelay: -5.5s; --c: var(--color-red); }
.hero-mote:nth-of-type(6) { top: 48%; left: 4%;  --size: 4.5rem; --depth: 0.7; --op: 0.1;  --fd: 12s; --fdelay: -3s;   --c: var(--color-line); }

@media (prefers-reduced-motion: no-preference) {
  .hero-mote {
    animation: mote-float var(--fd) var(--ease) var(--fdelay) infinite alternate;
    transition: transform var(--dur) var(--ease-out);
    will-change: transform;
  }
  .hero[data-pointer] .hero-mote { animation: none; }
}

@keyframes mote-float {
  from { translate: 0 0; }
  to   { translate: 0 -12px; }
}

.hero-kicker {
  margin: 0 0 var(--space-4);
  color: var(--color-brass);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0 0 var(--space-6);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(4rem, 11.5vw, 10rem);
  line-height: 0.88;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-cream);
}

.hero h1 .outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--color-cream);
}
@supports not (-webkit-text-stroke: 1px currentColor) {
  .hero h1 .outline { color: var(--color-cream); }
}

/* constant brass sheen sweeping through the outlined FADES */
@media (prefers-reduced-motion: no-preference) {
  .js-anim .hero h1 .outline {
    background: linear-gradient(
      110deg,
      transparent 42%,
      color-mix(in srgb, var(--color-brass) 85%, transparent) 50%,
      transparent 58%
    );
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: fades-sheen 3.8s var(--ease) infinite;
  }
}

@keyframes fades-sheen {
  0%   { background-position: 130% 0; }
  100% { background-position: -130% 0; }
}

.hero-sub {
  margin: 0 0 var(--space-8);
  max-width: var(--measure);
  font-size: 1.1875rem;
  color: var(--color-cream-dim);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* mobile: the card peeks in from the top-right, behind the copy */
.hero-copy { position: relative; z-index: 1; }
.hero-card {
  display: block;
  position: absolute;
  z-index: 0;
  top: 0;
  right: -14%;
  width: min(52vw, 230px);
  height: auto;
  opacity: 0.85;
  /* rotation/tilt is applied by GSAP so cursor tilt composes cleanly */
  filter: drop-shadow(0 40px 80px color-mix(in srgb, var(--color-ink) 90%, transparent));
}

@media (min-width: 900px) {
  .hero-inner { grid-template-columns: 1.15fr 0.85fr; }
  .hero-card {
    position: static;
    width: min(26vw, 380px);
    max-width: none;
    opacity: 1;
    justify-self: center;
  }
}

/* ---------- marquee ---------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--color-line);
  background: var(--color-surface);
  padding-block: var(--space-4);
}

.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.marquee-half {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding-right: var(--space-6);
}

.marquee-item {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 2.25rem;
  letter-spacing: 0.03em;
  color: var(--color-cream);
  white-space: nowrap;
}

.marquee .spade { width: 20px; height: 20px; }

@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee-scroll 22s linear infinite; }
}

@keyframes marquee-scroll {
  to { transform: translateX(-50%); }
}

/* ---------- services ---------- */
.price-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
}

@media (min-width: 820px) {
  .price-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-16);
  }
}

.price-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--color-line);
  border-radius: var(--radius);
}
@media (prefers-reduced-motion: no-preference) {
  .price-list li { transition: background-color var(--dur-fast) var(--ease); }
}
@media (hover: hover) {
  .price-list li:hover { background: var(--color-surface); }
  .price-list li:hover .service-name { transform: translateX(6px); }
  .price-list li:hover .price { transform: scale(1.08); }
}
@media (prefers-reduced-motion: no-preference) {
  .service-name, .price { transition: transform var(--dur) var(--ease-out); }
}

/* featured signature cut — spans both menu columns */
.price-list li.feature {
  grid-column: 1 / -1;
  flex-wrap: wrap;
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-brass) 40%, var(--color-line));
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin-bottom: var(--space-6);
}
.feature-tag {
  flex-basis: 100%;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brass);
  margin-bottom: var(--space-2);
}
.price-list li.feature .service-name { font-size: 1.5rem; }
.price-list li.feature .price { font-size: 2.5rem; }
@media (hover: hover) {
  .price-list li.feature:hover { background: var(--color-surface-raised); }
}

.service-name {
  font-weight: 700;
  font-size: 1.125rem;
}
.service-name small {
  display: block;
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--color-cream-dim);
  margin-top: var(--space-1);
}

.leader {
  flex: 1;
  min-width: var(--space-6);
}

.price {
  font-family: var(--font-display);
  font-size: 1.75rem;
  letter-spacing: 0.02em;
  color: var(--color-brass);
}

.services-note {
  margin: var(--space-8) 0 0;
  color: var(--color-cream-dim);
  max-width: var(--measure);
}

/* ---------- booking (full-bleed surface band) ---------- */
.booking {
  background: var(--color-surface);
  border-block: 1px solid var(--color-line);
}

.booking-sub {
  margin: 0 0 var(--space-8);
  max-width: var(--measure);
  color: var(--color-cream-dim);
}

.booking-widget {
  background: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  min-height: 480px;
  overflow: hidden;
}

/* fallback panel shown until Cal.com link is configured */
.booking-fallback {
  min-height: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-8);
}
.booking-fallback .spade { width: 32px; height: 32px; }
.booking-fallback h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.booking-fallback p {
  margin: 0;
  max-width: var(--measure);
  color: var(--color-cream-dim);
}
.booking-fallback-text { padding: var(--space-8); }

/* ---------- info ---------- */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-8);
}

.info-block h3 {
  margin: 0 0 var(--space-2);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brass);
}
.info-block p { margin: 0; }

/* ---------- social icons ---------- */
.social-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.social-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--color-line);
  color: var(--color-cream);
}
.social-btn svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .social-btn { transition: color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-out); }
}
.social-btn:hover {
  color: var(--color-brass);
  box-shadow: inset 0 0 0 1px var(--color-brass);
  transform: translateY(-2px);
}
.social-btn:active { transform: translateY(0) scale(0.92); }

/* ---------- footer ---------- */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-6);
  border-top: 1px solid var(--color-line);
  color: var(--color-cream-dim);
  font-size: 0.9375rem;
}
.site-footer .social-row { margin-top: 0; }

/* giant outline wordmark closing the page */
.footer-word {
  font-family: var(--font-display);
  font-size: clamp(3rem, 11vw, 9rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-line);
  white-space: nowrap;
  user-select: none;
  max-width: 100%;
  overflow: hidden;
}
.site-footer .spade { width: 14px; height: 14px; vertical-align: -2px; }
.site-footer p { margin: 0; display: inline-flex; align-items: center; gap: var(--space-2); }

/* ---------- motion (GSAP owns entrances/reveals; CSS keeps the rest) ---------- */
/* masked char reveal for the hero headline */
.hero h1 { overflow: hidden; }
.hero h1 .char { display: inline-block; }
.hero h1 .h1-line { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  /* brass underline sweeps in once the heading finishes typing */
  .js-anim h2.reveal::after {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 700ms var(--ease-out) 100ms;
  }
  .js-anim h2.reveal.typed::after { transform: scaleX(1); }

  /* typewriter caret (headings type on view, N2S-style) */
  .type-caret {
    display: inline-block;
    width: 0.08em;
    height: 0.8em;
    margin-left: 0.08em;
    background: var(--color-brass);
    animation: caret-blink 900ms steps(1) infinite;
  }
  h2.typed .type-caret {
    animation: none;
    opacity: 0;
    transition: opacity 400ms var(--ease) 900ms;
  }
}

@keyframes caret-blink {
  50% { opacity: 0; }
}

/* GSAP drives the marquee when available (velocity-reactive) */
.marquee-track.gsap-driven { animation: none; }

/* scroll hint pinned to the hero's bottom edge */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: var(--space-6);
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-cream-dim);
}
.hero-scroll .spade { width: 12px; height: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .hero-scroll .spade { animation: scroll-nudge 1.6s var(--ease) infinite alternate; }
}
@keyframes scroll-nudge {
  from { translate: 0 0; }
  to   { translate: 0 5px; }
}

/* film grain so the black reads as texture, not emptiness */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0.05;
  transform: translateZ(0); /* own compositor layer — never repaints on scroll */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- small screens ---------- */
@media (max-width: 600px) {
  main > section { padding-block: var(--space-16); }
  .container { padding-inline: var(--space-4); }
  .site-header nav { gap: var(--space-3); }
  .wordmark { font-size: 0.9375rem; }
  /* keep the header to what matters on a phone: brand + book */
  .site-header nav a[href="#info"] { display: none; }
  .hero { min-height: calc(92svh - var(--header-h)); }
  .hero-actions .btn { flex: 1; }
  .marquee-item { font-size: 1.5rem; }
  .price-list li { flex-wrap: wrap; }
  .leader { display: none; }
  .price { margin-left: auto; }
  .price-list li.feature { padding: var(--space-6); }
  .section-ghost { top: var(--space-2); opacity: 0.45; }
}