/* =====================================================================
   GLOW HOMEPAGE — CINEMA LAYER
   Built 29 May 2026 · sophisticated motion + editorial choreography
   Layered ON TOP of homepage-motion.css. Coexists with data-glow-reveal.
   ===================================================================== */

:root {
  --gc-ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --gc-ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --gc-ease-wipe:    cubic-bezier(0.86, 0, 0.07, 1);
  --gc-porcelain:    #F8F6F2;
  --gc-plum:         #5A2A35;
  --gc-ink:          #1A1613;
}

/* =====================================================================
   01 · CUSTOM CURSOR
   --------------------------------------------------------------------- */

/* When the cinema cursor is active we hide the OS pointer on the home. */
body.home-2026.gc-cursor-on,
body.home-2026.gc-cursor-on * {
  cursor: none !important;
}

.gc-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--gc-porcelain);
  pointer-events: none;
  z-index: 99998;
  mix-blend-mode: difference;
  transform: translate3d(-50%, -50%, 0) scale(1);
  transition:
    width 320ms var(--gc-ease-out),
    height 320ms var(--gc-ease-out),
    background 320ms var(--gc-ease-out),
    transform 320ms var(--gc-ease-out);
  will-change: transform;
  opacity: 0;
}

.gc-cursor.is-ready { opacity: 1; }

/* Ring + label state */
.gc-cursor__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gc-porcelain);
  opacity: 0;
  transition: opacity 220ms var(--gc-ease-out);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  line-height: 1;
}

.gc-cursor.is-ring {
  width: 56px;
  height: 56px;
  background: transparent;
  border: 1px solid var(--gc-porcelain);
}
.gc-cursor.is-ring .gc-cursor__label { opacity: 1; }

/* Hide on touch + small screens */
@media (hover: none), (max-width: 1023px) {
  .gc-cursor { display: none !important; }
  body.home-2026.gc-cursor-on,
  body.home-2026.gc-cursor-on * {
    cursor: auto !important;
  }
}

/* =====================================================================
   02 · HERO SPOTLIGHT — radial cursor-follow over .glow-hero--gh2026
   --------------------------------------------------------------------- */

.glow-hero--gh2026 .gc-hero-spotlight {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms var(--gc-ease-out);
  /* The gradient is positioned via JS-set CSS vars --mx, --my */
  background: radial-gradient(
    280px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.04) 35%,
    transparent 65%
  );
  mix-blend-mode: screen;
}
.glow-hero--gh2026.gc-spotlight-on .gc-hero-spotlight { opacity: 1; }

@media (hover: none), (max-width: 1023px) {
  .glow-hero--gh2026 .gc-hero-spotlight { display: none !important; }
}

/* =====================================================================
   03 · HERO SCRAMBLE + WORD WAVE
   --------------------------------------------------------------------- */

/* Scramble characters are inline spans we inject */
.gh2026__h1 .gc-scrambled {
  display: inline-block;
  white-space: pre;
}
.gh2026__h1 .gc-scrambled .gc-char {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  will-change: contents;
}

/* Word-wave wrapper (added once after scramble settles) */
.gh2026__h1 .gc-word {
  display: inline-block;
  transform: translate3d(0, 0, 0);
  transition: transform 700ms var(--gc-ease-out);
  will-change: transform;
}

/* =====================================================================
   04 · MAGNETIC CTAs — pure JS transform, but we set will-change here.
   The existing homepage-motion.js already does a tiny magnetic move on
   .gh-magnetic — we override by setting --gc-mx/--gc-my via JS.
   --------------------------------------------------------------------- */

.gc-magnetic {
  will-change: transform;
  transition: transform 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gc-magnetic.is-pulled {
  transition: transform 80ms linear;
}

/* =====================================================================
   05 · 3D TILT — .idx-card + .fb-card
   --------------------------------------------------------------------- */

@media (hover: hover) and (min-width: 1024px) {
  .idx-card, .fb-card {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 600ms var(--gc-ease-out), box-shadow 600ms var(--gc-ease-out);
  }
  .idx-card.gc-tilt-on, .fb-card.gc-tilt-on {
    transition: transform 80ms linear, box-shadow 600ms var(--gc-ease-out);
  }
  /* Inner depth layers */
  .idx-card__body,
  .fb-card__body {
    transform: translateZ(20px);
    transition: transform 600ms var(--gc-ease-out);
  }
  .idx-card__arrow,
  .fb-card__cta {
    transform: translateZ(30px);
    transition: transform 600ms var(--gc-ease-out);
  }
}

/* =====================================================================
   06 · BRAND TICKER VELOCITY — drive duration via CSS var
   --------------------------------------------------------------------- */

.gh2026-ticker__track {
  /* Allow JS to scale the base 56s via a multiplier */
  animation-duration: calc(56s * var(--gc-ticker-speed, 1)) !important;
}
.gh2026-ticker__track.gc-rev {
  animation-direction: reverse !important;
}

/* =====================================================================
   07 · GLOW 100 CAROUSEL ROTATION — JS-driven transforms.
   We only set up will-change + smooth transition fallback here.
   --------------------------------------------------------------------- */

.g100-2026__card {
  transition: transform 380ms var(--gc-ease-out);
  will-change: transform;
}
.g100-2026__card.gc-rotating {
  transition: transform 80ms linear;
}

/* =====================================================================
   08 · WORD-BY-WORD HEADLINE REVEAL
   --------------------------------------------------------------------- */

.gc-h2-split { display: block; }
.gc-h2-split .word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition:
    opacity 900ms var(--gc-ease-out),
    transform 900ms var(--gc-ease-out);
  will-change: transform, opacity;
}
.gc-h2-split.is-in .word { opacity: 1; transform: translate3d(0, 0, 0); }
.gc-h2-split .word + .word { margin-left: 0.25em; }

/* =====================================================================
   09 · COUNT-UP — no specific CSS needed, JS swaps text node.
   --------------------------------------------------------------------- */

.gc-counter { font-variant-numeric: tabular-nums; }

/* =====================================================================
   10 · IMAGE CLIP-PATH REVEALS
   --------------------------------------------------------------------- */

/* clip-path reveal disabled 29 May 2026 — left card images clipped to nothing */
.idx-card__img.gc-clip,
.fyg-card__img.gc-clip,
.fb-card__img.gc-clip {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  transition:
    clip-path 1100ms var(--gc-ease-out),
    -webkit-clip-path 1100ms var(--gc-ease-out),
    transform 700ms var(--gc-ease-out),
    filter 1400ms ease;
}
.idx-card__img.gc-clip.is-in,
.fyg-card__img.gc-clip.is-in,
.fb-card__img.gc-clip.is-in {
  clip-path: inset(0 0 0% 0);
  -webkit-clip-path: inset(0 0 0% 0);
}

/* =====================================================================
   11 · PAGE-ENTER VEIL
   --------------------------------------------------------------------- */

.gc-veil {
  /* Disabled 29 May 2026 — veil was blocking the page. Kill it entirely. */
  display: none !important;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--gc-porcelain);
  align-items: center;
  justify-content: center;
  transform: translate3d(0, 0, 0);
  transition: transform 900ms var(--gc-ease-wipe);
  will-change: transform;
}
.gc-veil__mark {
  font-family: 'Canela', 'Canela Text', 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.8rem, 6vw, 4.4rem);
  letter-spacing: 0.04em;
  color: var(--gc-plum);
  text-transform: uppercase;
  transition: opacity 500ms ease;
  opacity: 0;
  animation: gc-veil-fade-in 360ms ease forwards;
}
.gc-veil.is-leaving { transform: translate3d(0, -100%, 0); }
.gc-veil.is-leaving .gc-veil__mark { opacity: 0; }

@keyframes gc-veil-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* =====================================================================
   12 · EDITORIAL HAIRLINE DIVIDER
   --------------------------------------------------------------------- */

.gc-divider {
  display: block;
  width: 0;
  height: 1px;
  margin: 0 0 clamp(1.25rem, 2.2vw, 2rem);
  background: linear-gradient(to right, rgba(248,246,242,0.0) 0%, var(--gc-porcelain) 18%, var(--gc-plum) 100%);
  transition: width 1200ms var(--gc-ease-out);
  transform-origin: left center;
  will-change: width;
  opacity: 0.85;
}
.gc-divider.is-in { width: 100%; }

/* On the dark idx-section (cream bg) and fyg-section the gradient reads.
   On dark sections we tone it differently. */
.g100-2026 .gc-divider,
.featured-brands .gc-divider {
  background: linear-gradient(to right, rgba(90,42,53,0.0) 0%, rgba(90,42,53,0.45) 30%, var(--gc-plum) 100%);
}

/* =====================================================================
   GLOBAL REDUCED-MOTION KILL
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .gc-cursor, .gc-hero-spotlight, .gc-veil { display: none !important; }
  body.home-2026.gc-cursor-on,
  body.home-2026.gc-cursor-on * {
    cursor: auto !important;
  }
  .gc-h2-split .word { opacity: 1 !important; transform: none !important; }
  .idx-card__img.gc-clip,
  .fyg-card__img.gc-clip,
  .fb-card__img.gc-clip {
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }
  .gh2026-ticker__track { animation-duration: 56s !important; animation-direction: normal !important; }
  .gc-divider { width: 100% !important; transition: none !important; }
  .idx-card, .fb-card, .g100-2026__card, .gc-magnetic {
    transform: none !important;
    transition: none !important;
  }
}

/* =====================================================================
   COEXISTENCE — quiet the legacy cursor label from homepage-motion.js
   so our new cursor can lead. We do this by zeroing out its opacity
   when our cursor is active; the JS still positions it but it's hidden.
   --------------------------------------------------------------------- */
body.home-2026.gc-cursor-on .gh-cursor-label {
  opacity: 0 !important;
  visibility: hidden !important;
}