/* =====================================================================
   boohooMAN Ambassador — THEMES
   Three switchable directions. Each remaps the shared tokens used by
   base.css and adds a few structural flourishes.
       A — BLACKOUT     stark mono, oversized condensed type
       B — EDITORIAL    white lookbook, blocky wide type, index rules
       C — DROP POSTER  acid accent, marquees, stickers, ticket reward
   ===================================================================== */

/* Reusable inverted block — flips local token scope so child
   components (which read var(--fg)/etc) adapt automatically. */
.block-invert {
  background: var(--i-bg);
  color: var(--i-fg);
  --bg: var(--i-bg);
  --fg: var(--i-fg);
  --muted: var(--i-muted);
  --line: var(--i-line);
  --accent: var(--i-accent);
  --accent-ink: var(--i-accent-ink);
  --surface: var(--i-surface);
}

/* show/hide per-direction decorations */
.only-a, .only-b, .only-c { display: none; }
[data-dir="a"] .only-a { display: revert; }
[data-dir="b"] .only-b { display: revert; }
[data-dir="c"] .only-c { display: revert; }

/* =====================================================================
   A — BLACKOUT  (default visual language)
   ===================================================================== */
[data-dir="a"] {
  --bg: #000; --fg: #fff;
  --muted: #8f8f8f; --line: rgba(255,255,255,.16); --line-strong: rgba(255,255,255,.85);
  --accent: #ffffff; --accent-ink: #000; --surface: #0d0d0d;
  --i-bg: #ffffff; --i-fg: #0a0a0a; --i-muted: #6b6b6b; --i-line: rgba(0,0,0,.14);
  --i-accent: #0a0a0a; --i-accent-ink: #fff; --i-surface: #f1f1ef;
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
}
[data-dir="a"] .section__title { letter-spacing: -.01em; }

/* =====================================================================
   B — EDITORIAL  (light lookbook)
   ===================================================================== */
[data-dir="b"] {
  --bg: #f4f3ef; --fg: #0a0a0a;
  --muted: #6f6e69; --line: rgba(0,0,0,.16); --line-strong: rgba(0,0,0,.85);
  --accent: #0a0a0a; --accent-ink: #f4f3ef; --surface: #e7e6e0;
  --i-bg: #0a0a0a; --i-fg: #ffffff; --i-muted: #9a9a9a; --i-line: rgba(255,255,255,.18);
  --i-accent: #ffffff; --i-accent-ink: #0a0a0a; --i-surface: #161616;
  --font-display: 'Archivo Black', 'Archivo', sans-serif;
}
[data-dir="b"] .display { line-height: .92; letter-spacing: -.03em; }
[data-dir="b"] .hero h1 { letter-spacing: -.04em; font-size: clamp(50px, 11vw, 190px); }
/* hero + transparent header sit over a dark photo, so chrome goes light in B */
[data-dir="b"] .hdr:not(.is-stuck) { color: #fff; }
[data-dir="b"] .hero .btn, [data-dir="b"] .hdr:not(.is-stuck) .btn { background: #fff; color: #0a0a0a; border-color: #fff; }
[data-dir="b"] .hero .btn:hover, [data-dir="b"] .hdr:not(.is-stuck) .btn:hover { background: #0a0a0a; color: #fff; border-color: #0a0a0a; }
[data-dir="b"] .insta__handle .at { color: var(--fg); -webkit-text-stroke: 0; }
[data-dir="b"] .guide { background: var(--surface); border-color: transparent; }
[data-dir="b"] .guide:hover { background: var(--accent); color: var(--accent-ink); }
/* editorial: scrim a touch lighter, content sits in a tinted plate */
[data-dir="b"] .hero__scrim { background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.1) 55%, rgba(0,0,0,.78) 100%); }

/* =====================================================================
   C — DROP POSTER  (acid)
   ===================================================================== */
[data-dir="c"] {
  --bg: #0a0a0a; --fg: #ffffff;
  --muted: #8f8f8f; --line: rgba(255,255,255,.2); --line-strong: var(--acid);
  --acid: #d8ff3e;
  --accent: #d8ff3e; --accent-ink: #0a0a0a; --surface: #141414;
  --i-bg: #d8ff3e; --i-fg: #0a0a0a; --i-muted: #3a4416; --i-line: rgba(0,0,0,.28);
  --i-accent: #0a0a0a; --i-accent-ink: #d8ff3e; --i-surface: #c9ee2c;
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
}
[data-dir="c"] .hero h1 { color: #fff; }
[data-dir="c"] .hero h1 .l2 { color: var(--acid); }
[data-dir="c"] .hero__eyebrow { color: var(--acid); opacity: 1; }
[data-dir="c"] .section__title { color: var(--fg); }
[data-dir="c"] .reward__amt .big { color: var(--acid); }
[data-dir="c"] .tier__amt { color: var(--acid); }
[data-dir="c"] .insta__handle .at { color: var(--acid); }
[data-dir="c"] .step__n { background: var(--acid); color: #000; }
[data-dir="c"] .guide:hover { background: var(--acid); color: #000; }
[data-dir="c"] .guide__glyph { color: var(--acid); }
[data-dir="c"] .guide:hover .guide__glyph { color: #000; }
[data-dir="c"] .btn { background: var(--acid); color: #000; border-color: var(--acid); }
[data-dir="c"] .btn--ghost { background: transparent; color: var(--fg); border-color: var(--acid); }
[data-dir="c"] .btn--ghost:hover { background: var(--acid); color: #000; }
[data-dir="c"] .faq__q:hover { color: var(--acid); }
[data-dir="c"] .faq__list li::before { color: var(--acid); }
/* on acid (inverted) blocks, the primary button must go dark, not acid-on-acid */
[data-dir="c"] .block-invert .btn { background: #000; color: var(--acid); border-color: #000; }
[data-dir="c"] .block-invert .btn:hover { background: #1a1a1a; }
[data-dir="c"] .block-invert .btn--ghost { background: transparent; color: #000; border-color: #000; }
[data-dir="c"] .block-invert .btn--ghost:hover { background: #000; color: var(--acid); }

/* sticker badge — only in C */
.sticker {
  position: absolute; z-index: 3;
  display: none; place-items: center; text-align: center;
  width: clamp(116px, 13vw, 176px); aspect-ratio: 1; border-radius: 50%;
  background: var(--acid); color: #000;
  font-family: var(--font-display); text-transform: uppercase; line-height: .85;
  font-size: clamp(15px, 1.7vw, 23px);
  transform: rotate(-12deg);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.hero .sticker { right: clamp(20px, 6vw, 96px); top: clamp(120px, 18vh, 220px); }
[data-dir="c"] .hero .sticker { display: grid; }
@media (max-width: 720px){ .hero .sticker { width: 104px; top: 96px; right: 16px; } }

/* ticket-style reward card — only in C */
[data-dir="c"] .reward { align-items: stretch; }
[data-dir="c"] .ticket {
  border: 2px dashed var(--acid); padding: clamp(24px,3vw,40px);
  position: relative; background: #0f0f0f;
}
[data-dir="c"] .ticket::before, [data-dir="c"] .ticket::after {
  content: ''; position: absolute; width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg); top: 50%; transform: translateY(-50%);
}
[data-dir="c"] .ticket::before { left: -16px; }
[data-dir="c"] .ticket::after { right: -16px; }

/* =====================================================================
   small shared niceties that read the theme
   ===================================================================== */
.tag-pill {
  display: inline-block; padding: 7px 14px; border: 2px solid var(--accent);
  color: var(--accent); font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; font-size: 11px; border-radius: 999px;
}
[data-dir="b"] .tag-pill { color: var(--fg); border-color: var(--fg); }