/* ========================================
   AMACCA — Flagship Motion Layer
   Loaded after styles.css on all standard pages.

   Authoring rule: no-motion-first. Base state (no JS, reduced
   motion, old browser) is the final resting state. Animated and
   hidden states live only inside
   @media (prefers-reduced-motion: no-preference) and html.js scope.
   ======================================== */

/* ----------------------------------------
   1. Split-text line-mask headline reveals
   Elements opt in with [data-split]. motion.js splits them into
   .line spans wrapped in .line-mask after fonts load.
   ---------------------------------------- */
.line-mask {
  display: block;
  overflow: hidden;
}

/* SplitText writes an inline text-align on its line divs; follow the
   page's alignment instead */
[data-split] .line {
  text-align: inherit !important;
}

/* Desktop-only: mobile renders headings instantly (mobile-lean budget,
   protects mobile LCP). Hide until split + animated. html.no-gsap (set
   by main.js when the vendor bundle failed) force-reveals as a safety net. */
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  html.js:not(.no-gsap) [data-split]:not(.split-ready) {
    opacity: 0;
  }
}

/* ----------------------------------------
   2. Hero mesh + grain canvas
   A positioned layer behind hero content. Static gradients in brand
   colours + feTurbulence film grain. Zero animation cost.
   ---------------------------------------- */
.hero-mesh-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(55% 55% at 12% 18%, rgba(232, 151, 44, 0.10), transparent 62%),
    radial-gradient(45% 45% at 85% 24%, rgba(42, 157, 143, 0.09), transparent 58%),
    radial-gradient(60% 50% at 55% 100%, rgba(232, 151, 44, 0.06), transparent 60%);
}

.hero-mesh-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Slow drift of the mesh — desktop, motion-allowed only */
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  .hero-mesh-layer {
    background-size: 160% 160%;
    animation: meshDrift 26s ease-in-out infinite alternate;
  }

  @keyframes meshDrift {
    from { background-position: 0% 0%, 100% 0%, 50% 100%; }
    to   { background-position: 14% 8%, 86% 12%, 42% 88%; }
  }
}

/* ----------------------------------------
   3. Sticky-stacking cards
   .stack-cards wraps N .stack-card children. Desktop: cards pin and
   stack over each other as you scroll; motion.js adds a subtle
   scale-back on covered cards. Mobile / reduced motion: plain list.
   ---------------------------------------- */
.stack-cards {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 1024px) {
  .stack-cards {
    gap: var(--space-xl);
  }

  .stack-cards .stack-card {
    position: sticky;
    top: 110px;
    transform-origin: center top;
  }

  /* Slight cascade so stacked edges peek */
  .stack-cards .stack-card:nth-child(2) { top: 122px; }
  .stack-cards .stack-card:nth-child(3) { top: 134px; }
  .stack-cards .stack-card:nth-child(4) { top: 146px; }
  .stack-cards .stack-card:nth-child(5) { top: 158px; }
  .stack-cards .stack-card:nth-child(6) { top: 170px; }
}

/* Stacked cards must be opaque or the pile reads as a smear */
.stack-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* ----------------------------------------
   4. Client logo wall
   Real image marks + styled CSS wordmarks, uniform optical weight.
   ---------------------------------------- */
.logo-wall {
  padding: var(--space-xl) 0 var(--space-2xl);
}

.logo-wall-label {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

.logo-wall-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md) var(--space-lg);
  max-width: 1040px;
  margin: 0 auto;
}

/* Desktop: fixed six-across grid so the wall reads as two clean rows */
@media (min-width: 1024px) {
  .logo-wall-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    justify-items: center;
    gap: var(--space-lg) 32px;
    max-width: 1140px;
  }
}

/* Compact two-up wall on phones */
@media (max-width: 640px) {
  .logo-wall {
    padding: var(--space-lg) 0 var(--space-xl);
  }

  .logo-wall-grid {
    gap: 8px 20px;
  }

  .logo-item {
    min-height: 40px;
  }

  .logo-item img {
    max-height: 30px;
  }

  .logo-word--caps { font-size: 12px; }
  .logo-word--serif { font-size: 17px; }
  .logo-word--dot { font-size: 13px; }
}

.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 4px 8px;
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity 0.3s var(--ease), filter 0.3s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .logo-item:hover {
    opacity: 1;
    filter: none;
  }
}

.logo-item img {
  max-height: 44px;
  max-width: 200px;
  width: auto;
  object-fit: contain;
}

/* Wordmark treatments — three alternating voices so the wall reads
   like a logo row, not a text list */
.logo-word {
  white-space: nowrap;
  color: var(--text-secondary);
  line-height: 1;
}

.logo-word--caps {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.logo-word--serif {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 21px;
  letter-spacing: 0.01em;
}

.logo-word--dot {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.03em;
}

.logo-word--dot::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: 2px;
  background: var(--electric);
}

.logo-item:nth-child(even) .logo-word--dot::after {
  background: var(--copper);
}

/* ----------------------------------------
   5. Magnetic CTAs — desktop only; GSAP moves them, CSS just hints
   ---------------------------------------- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-magnetic] {
    will-change: transform;
  }
}