/* Life of Damon — Cinematic Upgrade Layer
 * ----------------------------------------------------------------------------
 * Loaded AFTER theme.css (see functions.php), so these rules win on source
 * order. Translates the high-end / cinematic direction onto the existing
 * .lod-* hooks: depth + elevation, a warm signature accent, film grain +
 * vignette, refined fluid type, and eased motion. Purely additive — no markup
 * or content changes. Scroll-reveal/parallax classes are driven by motion.js.
 */

:root {
  /* Signature accent — warm cinematic gold (the one premium spark) */
  --lod-accent:        #e8b04b;
  --lod-accent-strong: #f4c868;
  --lod-accent-deep:   #9a6b22;
  --lod-accent-soft:   rgba(232, 176, 75, 0.14);
  --lod-accent-line:   rgba(232, 176, 75, 0.42);

  /* Raised surfaces — replace flat planes */
  --lod-surface:   #121212;
  --lod-surface-2: #161514;
  --lod-hairline:  rgba(255, 255, 255, 0.07);

  /* Elevation + glow */
  --lod-elev-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --lod-elev-2: 0 16px 44px rgba(0, 0, 0, 0.45);
  --lod-elev-3: 0 34px 90px rgba(0, 0, 0, 0.55);
  --lod-glow:   0 22px 60px rgba(232, 176, 75, 0.10);

  /* Radius — soften the brutalist 90° corners */
  --lod-radius-sm: 8px;
  --lod-radius:    12px;
  --lod-radius-lg: 18px;

  /* Motion — Emil-style out-quint, no bounce */
  --lod-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lod-dur:  0.45s;
}

/* ============================================================
   Atmosphere — edge vignette + fine film grain over the canvas
============================================================ */
body.lod-reset::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(135% 100% at 50% -8%, rgba(10, 10, 10, 0) 56%, rgba(0, 0, 0, 0.55) 100%);
}
body.lod-reset::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.05;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html { scroll-behavior: smooth; }

/* Lenis smooth-scroll (initialized in motion.js, only when motion is allowed) */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ============================================================
   Signature accent — used sparingly: labels, numbers, links, focus
============================================================ */
.lod-eyebrow { color: var(--lod-accent); }

.lod-niche-n,
.lod-niche-tile .lod-mono:first-child,
.lod-stat-key { color: var(--lod-accent); }

.lod-inline-link {
  text-decoration-color: var(--lod-accent-line);
  text-underline-offset: 4px;
  transition: color var(--lod-dur) var(--lod-ease);
}
.lod-inline-link:hover { color: var(--lod-accent-strong); opacity: 1; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
.lod-btn:focus-visible {
  outline: 2px solid var(--lod-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   Refined fluid display type — relax the aggressive tracking
============================================================ */
.lod-hero-home-title {
  font-size: clamp(56px, 10.5vw, 132px) !important;
  letter-spacing: -0.045em;
  line-height: 0.86;
}
.lod-section-title {
  font-size: clamp(34px, 5.6vw, 72px) !important;
  letter-spacing: -0.035em;
}
.lod-hero-home-lede {
  color: var(--lod-text-secondary);
  line-height: 1.65;
}

/* ============================================================
   Buttons — gentle radius, eased motion, lift + accent on hover
============================================================ */
.lod-btn,
.wp-block-button.lod-btn .wp-block-button__link,
.lod-btn > .wp-block-button__link {
  border-radius: var(--lod-radius-sm) !important;
  transition: background var(--lod-dur) var(--lod-ease),
              color var(--lod-dur) var(--lod-ease),
              border-color var(--lod-dur) var(--lod-ease),
              box-shadow var(--lod-dur) var(--lod-ease),
              transform var(--lod-dur) var(--lod-ease) !important;
}
.lod-btn--light:hover,
.wp-block-button.lod-btn--light .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: var(--lod-elev-2);
  opacity: 1;
}
.lod-btn--ghost:hover,
.wp-block-button.lod-btn--ghost .wp-block-button__link:hover {
  border-color: var(--lod-accent) !important;
  background: var(--lod-accent) !important;
  color: var(--lod-bg-primary) !important;
}
.lod-btn--outline:hover,
.wp-block-button.lod-btn--outline .wp-block-button__link:hover {
  border-color: var(--lod-accent-line) !important;
  color: var(--lod-accent-strong) !important;
  background: var(--lod-accent-soft) !important;
}

/* ============================================================
   Depth — flat bordered planes become raised, rounded surfaces
============================================================ */
.lod-niche-tile,
.lod-merch-card,
.lod-affiliate-card,
.lod-creator-code-card,
.lod-start-here,
.lod-channel-item,
.lod-response-card,
.lod-value-cell {
  background: var(--lod-surface);
  border: 1px solid var(--lod-hairline);
  border-radius: var(--lod-radius);
  box-shadow: var(--lod-elev-2);
  transition: transform var(--lod-dur) var(--lod-ease),
              box-shadow var(--lod-dur) var(--lod-ease),
              border-color var(--lod-dur) var(--lod-ease);
  overflow: hidden;
}
.lod-niche-tile:hover,
.lod-merch-card:hover,
.lod-affiliate-card:hover,
.lod-creator-code-card:hover,
.lod-start-here:hover,
.lod-channel-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--lod-elev-3), var(--lod-glow);
  border-color: var(--lod-accent-line);
}

/* Empty niche tiles read as intentional cards, not bare boxes */
.lod-niche-tile {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(232, 176, 75, 0.06), rgba(18, 18, 18, 0) 60%),
    linear-gradient(180deg, var(--lod-surface-2), var(--lod-surface));
  min-height: 168px;
  padding: 22px;
}

/* Stats — one elevated panel with hairline cell dividers */
.lod-stats-strip {
  background: linear-gradient(180deg, var(--lod-surface-2), var(--lod-surface)) !important;
  border: 1px solid var(--lod-hairline);
  border-radius: var(--lod-radius-lg);
  box-shadow: var(--lod-elev-2);
  overflow: hidden;
}
.lod-stat-val { letter-spacing: -0.04em; }

/* Merch + portrait imagery treatment */
.lod-merch-card-img,
.lod-bio-portrait,
.lod-start-here-thumb,
.lod-live-thumb {
  border-radius: var(--lod-radius-sm);
  filter: saturate(1.05) contrast(1.04);
  transition: transform var(--lod-dur) var(--lod-ease), filter var(--lod-dur) var(--lod-ease);
}
.lod-merch-card:hover .lod-merch-card-img { transform: scale(1.04); }
.lod-bio-portrait {
  background: linear-gradient(160deg, var(--lod-surface-2), #0c0c0c);
  box-shadow: var(--lod-elev-2);
}

/* ============================================================
   Sections — softer hairlines + a faint top sheen for depth
============================================================ */
.lod-section { border-bottom: 1px solid var(--lod-hairline); }
.lod-section-head .lod-section-title { position: relative; }

/* Soften + grade the heavy brick overlays so imagery can breathe */
.lod-hero-home::before {
  background: linear-gradient(118deg, rgba(10, 10, 10, 0.34) 0%, rgba(10, 10, 10, 0.62) 55%, rgba(10, 10, 10, 0.8) 100%) !important;
}
.lod-section--brick::before {
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.58), rgba(10, 10, 10, 0.84)) !important;
}
.lod-live-banner::before {
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.62), rgba(10, 10, 10, 0.88)) !important;
}
.lod-sponsors-hero::before,
.lod-contact-hero::before {
  background: linear-gradient(160deg, rgba(10, 10, 10, 0.42), rgba(10, 10, 10, 0.82)) !important;
}

/* Warm accent glow behind the hero logo mark — cinematic key light */
.lod-hero-home::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(46% 58% at 80% 42%, rgba(232, 176, 75, 0.12), rgba(10, 10, 10, 0) 70%);
}
.lod-hero-home-mark,
.lod-hero-home-logo {
  filter: drop-shadow(0 0 44px rgba(232, 176, 75, 0.22));
}

/* ============================================================
   Nav — frosted glass over the canvas
============================================================ */
.lod-nav-wrap {
  background: rgba(10, 10, 10, 0.55) !important;
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
  /* No bottom hairline — the nav blends straight into the page below it. */
  border-bottom: 0;
}
.lod-nav-pill a:hover { color: var(--lod-accent-strong); }
.lod-brand-mark-img { filter: drop-shadow(0 0 14px rgba(232, 176, 75, 0.18)); }

/* ============================================================
   Global eased transitions on the common interactive bits
============================================================ */
.lod-inline-link,
.lod-niche-platform-item,
.lod-channel-item,
.lod-mini-cart,
.lod-account-link { transition: all var(--lod-dur) var(--lod-ease); }

/* ============================================================
   Brick + neon LED sign — lean into the brand identity, refined.
   The 力 mark glows like a real sign; the brick gets cinematic light +
   a warm/cool grade; niche labels pick up a neon spark.
============================================================ */

/* The hero sign glows like neon — tight white core → warm gold bloom */
.lod-hero-home-logo,
.lod-hero-home-mark img {
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 8px var(--lod-accent-strong))
    drop-shadow(0 0 24px var(--lod-accent))
    drop-shadow(0 0 56px rgba(232, 176, 75, 0.55));
  animation: lodNeonFlicker 7s linear infinite;
}
@keyframes lodNeonFlicker {
  0%, 88%, 100% { opacity: 1; }
  89% { opacity: 0.78; }
  90% { opacity: 1; }
  93% { opacity: 0.86; }
  94% { opacity: 1; }
}

/* Warm key light from the sign + cool shadow grade across the brick */
.lod-hero-home::before {
  background:
    radial-gradient(60% 70% at 80% 32%, rgba(232, 176, 75, 0.12), rgba(10, 10, 10, 0) 55%),
    linear-gradient(118deg, rgba(10, 10, 10, 0.30) 0%, rgba(8, 10, 12, 0.62) 55%, rgba(8, 9, 11, 0.84) 100%) !important;
}
.lod-hero-home::after {
  background: radial-gradient(46% 58% at 80% 40%, rgba(232, 176, 75, 0.16), rgba(10, 10, 10, 0) 70%) !important;
}

/* Brick-band sections: subtle warm wash so the wall reads lit, not flat */
.lod-section--brick::before {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(232, 176, 75, 0.06), rgba(10, 10, 10, 0) 60%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.58), rgba(10, 10, 10, 0.86)) !important;
}

/* Niche tiles read as little lit signs */
.lod-niche-n { text-shadow: 0 0 14px rgba(232, 176, 75, 0.45); }
.lod-niche-tile:hover .lod-niche-label,
.lod-niche-tile:hover .lod-niche-n {
  color: var(--lod-accent-strong);
  text-shadow: 0 0 16px rgba(244, 200, 104, 0.5);
}

/* Hero title: faint sign-lit depth */
.lod-hero-home-title { text-shadow: 0 2px 60px rgba(0, 0, 0, 0.5); }

/* Live indicator gets a neon bloom */
.lod-live-dot { box-shadow: 0 0 10px rgba(255, 45, 45, 0.7); }

/* ============================================================
   Per-page polish — forms, placeholders, niche tabs, codes
============================================================ */

/* Cinematic form fields (Contact + Sponsor inquiry) */
.lod-contact input,
.lod-contact textarea,
.lod-contact select,
.lod-contact-form input,
.lod-contact-form textarea,
.lod-sponsor-inquiry input,
.lod-sponsor-inquiry textarea {
  background: var(--lod-surface) !important;
  border: 1px solid var(--lod-hairline) !important;
  border-radius: var(--lod-radius-sm) !important;
  color: var(--lod-text-primary) !important;
  transition: border-color 0.3s var(--lod-ease), box-shadow 0.3s var(--lod-ease) !important;
}
.lod-contact input:focus,
.lod-contact textarea:focus,
.lod-contact select:focus,
.lod-contact-form input:focus,
.lod-contact-form textarea:focus,
.lod-sponsor-inquiry input:focus,
.lod-sponsor-inquiry textarea:focus {
  border-color: var(--lod-accent) !important;
  box-shadow: 0 0 0 3px var(--lod-accent-soft), 0 0 18px rgba(232, 176, 75, 0.12) !important;
  outline: none !important;
}
.lod-contact ::placeholder,
.lod-contact-form ::placeholder { color: var(--lod-text-muted); }

/* Richer media placeholders (live embeds, video thumbs, empty slots) */
.lod-thumb {
  background:
    radial-gradient(circle at 50% 42%, rgba(232, 176, 75, 0.07), rgba(10, 10, 10, 0) 58%),
    linear-gradient(180deg, #171614, #0b0b0b) !important;
  border-radius: var(--lod-radius-sm);
  color: var(--lod-text-muted);
}
.lod-thumb::after { box-shadow: inset 0 0 0 1px var(--lod-hairline), inset 0 0 60px rgba(0, 0, 0, 0.5); }

/* Niche tabs — accent + neon underline on the active lane */
.lod-niche-tab.is-active,
.lod-niche-tab[aria-selected="true"] { color: var(--lod-accent-strong) !important; }
.lod-niche-tab.is-active::after,
.lod-niche-tab[aria-selected="true"]::after {
  background: var(--lod-accent) !important;
  box-shadow: 0 0 12px var(--lod-accent);
}

/* Codes glow like little LED signs */
.lod-creator-code-card-code,
.lod-affiliate-code-value {
  color: var(--lod-accent-strong) !important;
  text-shadow: 0 0 18px rgba(232, 176, 75, 0.40);
}

/* Empty WooCommerce shop — make the bare state intentional */
.woocommerce-info,
.woocommerce-no-products-found {
  background: var(--lod-surface);
  border: 1px solid var(--lod-hairline);
  border-radius: var(--lod-radius);
  box-shadow: var(--lod-elev-1);
  color: var(--lod-text-secondary);
  padding: 22px 26px;
}

/* Media embeds never flash white — dark frames + posters */
.lod-live-frame,
.lod-lazy-embed,
.lod-lazy-embed-poster,
.lod-niche-featured-video,
.lod-start-here-video {
  background: linear-gradient(180deg, #171614, #0b0b0b) !important;
  border-radius: var(--lod-radius-sm);
  overflow: hidden;
}
.lod-lazy-embed-poster img,
.lod-live-thumb img,
.lod-niche-featured-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Hide genuinely empty poster images so the dark frame shows instead of a
   broken-image icon (scoped to embeds so lazy data-src imgs are untouched). */
.lod-lazy-embed-poster img[src=""],
.lod-lazy-embed-poster img:not([src]),
.lod-live-thumb img[src=""],
.lod-live-thumb img:not([src]) { display: none; }

/* Lazy-embed play button — neon ring */
.lod-lazy-embed-play {
  border: 1px solid var(--lod-accent-line) !important;
  box-shadow: 0 0 24px rgba(232, 176, 75, 0.25);
  transition: transform var(--lod-dur) var(--lod-ease), box-shadow var(--lod-dur) var(--lod-ease);
}
.lod-lazy-embed-trigger:hover .lod-lazy-embed-play {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 0 34px rgba(232, 176, 75, 0.4);
}

/* ============================================================
   Scroll-reveal — .lod-motion is set in <head> (only when motion is allowed);
   a 1.5s failsafe removes it if motion.js fails, so content is never stuck
   hidden. Hidden by SELECTOR (not a JS-added class) to avoid any flash.
   Keep this list in sync with REVEAL in motion.js.
============================================================ */
.lod-motion .lod-section-head,
.lod-motion .lod-niche-tile,
.lod-motion .lod-stats-strip,
.lod-motion .lod-merch-card,
.lod-motion .lod-bio-grid,
.lod-motion .lod-affiliate-card,
.lod-motion .lod-start-here,
.lod-motion .lod-live-grid,
.lod-motion .lod-value-cell,
.lod-motion .lod-creator-code-card,
.lod-motion .lod-channel-item,
.lod-motion .lod-hero-home-title,
.lod-motion .lod-hero-home-lede,
.lod-motion .lod-hero-home-ctas {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--lod-ease), transform 0.85s var(--lod-ease);
  will-change: opacity, transform;
}
.lod-motion .is-in {
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================================
   Footer — a designed bottom-of-page moment (was unstyled by cinematic)
============================================================ */
.lod-footer {
  padding: 56px 48px !important;
  background: linear-gradient(180deg, var(--lod-surface-2), #090909);
  border-top: 1px solid var(--lod-accent-line) !important;
  box-shadow: 0 -1px 0 rgba(232, 176, 75, 0.18), 0 -30px 70px rgba(232, 176, 75, 0.04);
  flex-wrap: wrap;
  gap: 20px 28px;
}
.lod-footer-mark {
  filter: invert(1) drop-shadow(0 0 10px rgba(232, 176, 75, 0.4)) !important;
  opacity: 0.95 !important;
}
.lod-footer-copy { color: var(--lod-text-secondary); }
.lod-footer-glyph {
  color: var(--lod-accent-strong);
  text-shadow: 0 0 16px rgba(232, 176, 75, 0.45);
}
.lod-footer-nav { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; }
.lod-footer-nav a {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lod-text-muted);
  transition: color var(--lod-dur) var(--lod-ease);
}
.lod-footer-nav a:hover { color: var(--lod-accent-strong); }
.lod-footer-back { color: var(--lod-text-secondary); transition: color var(--lod-dur) var(--lod-ease); }
.lod-footer-back:hover { color: var(--lod-accent-strong) !important; }

/* ============================================================
   Per-niche neon — override the accent vars per lane so EVERY rule that
   reads var(--lod-accent*) recolors automatically (tabs, panels, tiles,
   eyebrows, numbers, hover borders, the active-tab glow). Fitness keeps gold.
============================================================ */
[data-niche="gaming"],
#lod-niche-panel-gaming {
  --lod-accent: #28e0c8;
  --lod-accent-strong: #5cf0dd;
  --lod-accent-line: rgba(40, 224, 200, 0.42);
  --lod-accent-soft: rgba(40, 224, 200, 0.14);
}
[data-niche="hobbies"],
#lod-niche-panel-hobbies {
  --lod-accent: #ff6a3d;
  --lod-accent-strong: #ff8a63;
  --lod-accent-line: rgba(255, 106, 61, 0.42);
  --lod-accent-soft: rgba(255, 106, 61, 0.14);
}
[data-niche="designs"],
#lod-niche-panel-designs {
  --lod-accent: #b06bff;
  --lod-accent-strong: #c690ff;
  --lod-accent-line: rgba(176, 107, 255, 0.42);
  --lod-accent-soft: rgba(176, 107, 255, 0.14);
}
/* Per-niche tile number + glow recolor with the lane */
.lod-niche-tile[data-niche] .lod-niche-n {
  color: var(--lod-accent);
  text-shadow: 0 0 16px var(--lod-accent-line);
}
.lod-niche-tile[data-niche] {
  background:
    radial-gradient(120% 90% at 100% 0%, var(--lod-accent-soft), rgba(18, 18, 18, 0) 60%),
    linear-gradient(180deg, var(--lod-surface-2), var(--lod-surface));
}

/* ============================================================
   Mobile polish — the cinematic layer added width-agnostic depth + fixed
   grain + glass nav with no mobile dial-back; tune it here.
============================================================ */
@media (max-width: 767px) {
  /* Lighter grain; keep the drawer above the atmosphere layers */
  body.lod-reset::after { opacity: 0.03; }
  .lod-mobile-menu-drawer { z-index: 10000; }

  /* Cheaper nav blur — lean on opacity */
  .lod-nav-wrap {
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    background: rgba(10, 10, 10, 0.72) !important;
  }

  /* Stat values fit a 2-up grid without clipping */
  .lod-stats-strip .lod-stat-val { font-size: 38px; }

  /* Per-page hero titles get the same relaxed tracking + a smaller size */
  .lod-shop-hero-title,
  .lod-sponsors-hero-title,
  .lod-contact-hero-title,
  .lod-pick-head-title,
  .lod-niche-panel-title,
  .lod-creator-code-title,
  .lod-bundle-title {
    font-size: 46px;
    letter-spacing: -0.035em;
    line-height: 0.92;
  }

  /* Creator code never clips in the rounded card */
  .lod-creator-code-card-code { font-size: 44px; word-break: break-word; }

  /* Lighter elevation so stacked cards don't muddy together */
  .lod-niche-tile,
  .lod-merch-card,
  .lod-affiliate-card,
  .lod-creator-code-card,
  .lod-start-here,
  .lod-channel-item,
  .lod-response-card,
  .lod-value-cell { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }

  /* Niche tiles aren't tall, empty boxes when single-column */
  .lod-niche-tile { min-height: 0; padding: 18px 20px; }

  /* Niche tabs scroll instead of cramped wrap */
  .lod-niche-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lod-niche-tabs::-webkit-scrollbar { display: none; }
  .lod-niche-tab { white-space: nowrap; }

  /* Form fields + footer breathing room */
  .lod-contact input,
  .lod-contact textarea,
  .lod-contact select { max-width: 100%; }
  .lod-footer { padding: 40px 20px !important; }
  .lod-footer-nav { gap: 16px 22px; }
}

/* ============================================================
   Sponsor / affiliate brand cards — each card carries its partner's logo +
   brand color via an inline --brand var; everything recolors off it and falls
   back to the site gold when no brand color is set.
============================================================ */
.lod-affiliate-card,
.lod-creator-code-card { --brand-accent: var(--brand, var(--lod-accent)); }

/* Per-brand font — only affiliate cards that set --brand-font (mirrors --brand color) */
.lod-affiliate-card[style*="--brand-font"],
.lod-affiliate-card[style*="--brand-font"] * {
  font-family: var(--brand-font) !important;
}

/* Brand logos */
.lod-affiliate-logo {
  display: block;
  height: 30px;
  width: 170px;
  max-width: 100%;
  margin-bottom: 16px;
  background-color: var(--brand-accent, var(--lod-accent));
  -webkit-mask: var(--logo) no-repeat left center;
  -webkit-mask-size: contain;
  mask: var(--logo) no-repeat left center;
  mask-size: contain;
}
.lod-creator-code-logo {
  display: block;
  height: 36px;
  width: auto;
  margin-bottom: 18px;
  filter: drop-shadow(0 0 16px var(--brand, rgba(232, 176, 75, 0.4)));
}

/* Brand-colored top seam + hover */
.lod-affiliate-card,
.lod-creator-code-card { border-top: 2px solid var(--brand-accent); }
.lod-affiliate-card:hover,
.lod-creator-code-card:hover {
  border-color: var(--brand-accent);
  box-shadow: var(--lod-elev-3), 0 22px 60px color-mix(in srgb, var(--brand-accent) 22%, transparent);
}

/* Brand-colored code glow */
.lod-affiliate-card .lod-affiliate-code-value,
.lod-creator-code-card .lod-creator-code-card-code {
  color: var(--brand-accent) !important;
  text-shadow: 0 0 20px color-mix(in srgb, var(--brand-accent) 45%, transparent);
}
.lod-creator-code-card .lod-creator-code-card-badge { color: var(--brand-accent); }

/* Brand-colored FILLED CTA — solid brand fill + dark text reads clearly on
   the dark card (the bright brand colors carry high contrast against #0a0a0a). */
.lod-affiliate-card .lod-btn--cta,
.lod-creator-code-card-actions a.lod-btn--light {
  background: var(--brand-accent) !important;
  color: #0a0a0a !important;
  border: 1px solid var(--brand-accent) !important;
  font-weight: 700;
}
.lod-affiliate-card .lod-btn--cta:hover,
.lod-creator-code-card-actions a.lod-btn--light:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--brand-accent) 38%, transparent);
}

/* ============================================================
   Creator-code card -> full-width horizontal card (everything INSIDE the box,
   like the affiliate cards): [logo + intro] [code] [buttons].
============================================================ */
.lod-creator-code-card {
  display: grid !important;
  grid-template-columns: 1.4fr 1.1fr auto;
  align-items: center;
  gap: 40px;
  width: 100%;
  padding: 40px 44px !important;
}
/* Whole Fortnite card uses the Fortnite-style font. Luckiest Guy is thick +
   rounded, so it needs POSITIVE tracking — without it short words like "IN"
   glob together (the theme's display type uses negative tracking). */
.lod-creator-code-card,
.lod-creator-code-card * {
  font-family: "Luckiest Guy", var(--lod-font-display) !important;
  letter-spacing: 0.04em !important;
}
.lod-cc-left .lod-creator-code-copy { line-height: 1.85; }

.lod-cc-left { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; min-width: 0; }
.lod-cc-left .lod-creator-code-title { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; margin: 0; }
.lod-cc-left .lod-creator-code-copy { font-size: 13.5px; line-height: 1.6; margin: 0; }
.lod-cc-left .lod-creator-code-logo { margin: 0 0 4px; }
.lod-cc-mid { min-width: 0; }
.lod-cc-mid .lod-creator-code-card-label { margin: 0 0 8px; }
.lod-cc-mid .lod-creator-code-card-code {
  font-family: "Luckiest Guy", var(--lod-font-display);
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1;
  letter-spacing: 0.012em;
  margin: 0;
}
.lod-cc-mid .lod-creator-code-card-foot { margin: 12px 0 0; }
.lod-creator-code-card .lod-creator-code-card-actions {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 180px;
  align-self: center;
}
.lod-creator-code-card .lod-creator-code-card-actions .lod-btn { width: 100%; white-space: nowrap; flex: 0 0 auto; }

@media (max-width: 900px) {
  .lod-creator-code-card { grid-template-columns: 1fr; gap: 22px; padding: 28px !important; }
  .lod-creator-code-card .lod-creator-code-card-actions { flex-direction: row; min-width: 0; }
  .lod-creator-code-card .lod-creator-code-card-actions .lod-btn { width: auto; flex: 1; }
}

/* ============================================================
   Reduced motion — honor the user setting
============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}