/* marketing kit — AkaiCon landing + past-years pages.
   Layered on top of tanuki/tanuki.css; uses tokens only.
   Exhaustive values: see the handoff in tanuki-wp/landing-pages/handoff-2026-07-14/.
   Class prefix: .akai-*   (reuses .tk-btn/.tk-badge/.tk-card from components.css)

   NOTE: this file is copied into assets/tanuki/ alongside tanuki.css and its
   SVG textures at build time — texture url()s below are SIBLING references
   (e.g. "scanlines.svg"), not "../../tanuki/...". */

/* ============================================================
   LANDING / COMING SOON — .akai-landing
   ============================================================ */
/* Fixed-height splash: the whole landing is exactly one viewport tall and never
   scrolls; header + action bar are flex:none, the hero flexes to fill the middle. */
.akai-landing { height: 100vh; overflow: hidden; display: flex; flex-direction: column; background: #120607; }
/* Subtract the WP admin bar so the pinned action bar isn't pushed below the fold. */
.admin-bar .akai-landing { height: calc(100vh - 32px); }
@media screen and (max-width: 782px) { .admin-bar .akai-landing { height: calc(100vh - 46px); } }

.akai-hero {
  position: relative;
  flex: 1;
  min-height: 0;             /* allow the flex child to bound the image height */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #120607;        /* always-dark backdrop; do NOT bind to a flipping token — blends with the art in both themes */
}
.akai-hero__img {
  display: block;
  max-width: 100%;           /* scale to fit the hero as the window resizes — no fixed cap; gutters blend with the art */
  max-height: 100%;
  width: auto;
  height: auto;
  margin: auto;
}
.akai-hero__scan {
  position: absolute; inset: 0; pointer-events: none;
  background: url("scanlines.svg") repeat; background-size: 100% 4px; opacity: .12;
}
[data-theme="dark"] .akai-hero__scan { opacity: .4; }

.akai-actionbar {
  flex: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 18px 24px; padding: 20px 40px; background: var(--bg); border-top: var(--bw-3) solid var(--akai-red);
}
/* Groups the kicker + social chips together on the right so they stay a unit
   when the bar wraps (the CTA on the left is the other flex child). */
.akai-actionbar__right { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
/* The CTA is an <a>; a site-level link color was overriding .tk-btn--danger's
   own text to an unreadable gray on the red fill. Force readable cream. */
.akai-actionbar .tk-btn--danger { color: #FFF8EC; }

.akai-kicker { font-family: var(--font-pixel, "DotGothic16"); font-size: 12px; letter-spacing: .22em; color: var(--akai-red); }
[data-theme="dark"] .akai-kicker { color: var(--neon-cyan); }
.akai-kicker::after { content: "_"; animation: akaiBlink 1s steps(1) infinite; }
@keyframes akaiBlink { 50% { opacity: 0; } }

.akai-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* The default .tk-badge is tuned for UI tags (12px --font-ui, 4px/10px pad,
   2px radius). The handoff spec's social chips use the pixel font at 11px
   with a roomier 7px/12px pad and a 4px (--r-2) radius — border width and
   letter-spacing already match .tk-badge's defaults (--bw-2 / .12em), so
   only these four properties need the override. */
.akai-chips .tk-badge {
  font-family: var(--font-pixel, "DotGothic16");
  font-size: 11px;
  padding: 7px 12px;
  border-radius: var(--r-2);
  /* Outlined + readable in BOTH themes (the action bar flips light/dark).
     Overrides the filled .tk-badge--red/--purple, whose --ink-on-pastel text
     is an unreadable mid-gray on a saturated fill in dark mode. */
  background: transparent;
  color: var(--fg);
  border-color: var(--border-strong);
}
/* Twitch keeps a brand-purple accent on the border; text stays readable. */
.akai-chips .tk-badge--purple { color: var(--fg); border-color: #9146FF; }

/* In-nav theme toggle — sits inside .akai-nav__right on both pages
   (was position:fixed top-right floating button pre-v2). */
.akai-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-pixel, "DotGothic16"); font-size: 11px; letter-spacing: .12em; cursor: pointer;
  padding: 7px 12px; border: var(--bw-3) solid var(--border-strong); border-radius: var(--r-2);
  background: transparent; color: var(--fg); box-shadow: 3px 3px 0 0 var(--border-strong);
}
.akai-toggle__glyph::before { content: "☀"; }
[data-theme="dark"] .akai-toggle__glyph::before { content: "☾"; }
.akai-toggle__label::before { content: "LIGHT"; }
[data-theme="dark"] .akai-toggle__label::before { content: "DARK"; }

@media (prefers-reduced-motion: reduce) { .akai-kicker::after { animation: none; } }

/* ============================================================
   PAST YEARS — .akai-marquee, .akai-nav, .akai-page-head,
   .akai-video-grid, .akai-video-card, .akai-footer, .akai-halftone
   ============================================================ */

/* Marquee bar — always-dark stage. Hardcoded #14100E/#F4ECDC in BOTH
   modes (never bound to --bg/--fg — stage surfaces don't flip). */
.akai-marquee { background: #14100E; color: #F4ECDC; overflow: hidden; white-space: nowrap; }
.akai-marquee__track {
  display: inline-block;
  padding: 9px 0;
  font-family: var(--font-pixel, "DotGothic16");
  font-size: 12px;
  letter-spacing: .22em;
  will-change: transform;
  animation: akaiMarquee 70s linear infinite;
}
/* Seamless loop: the track holds the item group repeated an even number of times
   (see akai_marquee() helper); -50% shifts it exactly one half, which is identical
   to the other half. The group is repeated enough that one half exceeds any viewport,
   so there is never a gap. */
@keyframes akaiMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Per-item colors alternate gold / cream / cyan (always-dark stage — fixed literals). */
.akai-marquee__item--gold  { color: #FFC93C; }
.akai-marquee__item--cream { color: #F4ECDC; }
.akai-marquee__item--cyan  { color: #3FE0D0; }
.akai-marquee__sep { color: #F4ECDC; opacity: .45; padding: 0 16px; }

/* Sticky nav — shared by Landing and Past Years (not Past-Years-only). */
.akai-nav {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 32px; background: var(--bg); border-bottom: var(--bw-3) solid var(--border-strong);
}
.akai-nav__brand { display: inline-flex; align-items: center; gap: 10px; }
.akai-nav__brand img { display: block; height: 38px; width: auto; }
/* Wordmark + subtag are stacked inside an unclassed wrapper span
   (see handoff markup) — style that wrapper via the child combinator. */
.akai-nav__brand > span { display: flex; flex-direction: column; line-height: 1; }
.akai-nav__wordmark { font-family: var(--font-display); font-size: 17px; color: var(--fg); }
.akai-nav__subtag { font-family: var(--font-pixel, "DotGothic16"); font-size: 9px; color: var(--akai-red); letter-spacing: .1em; margin-top: 3px; }

/* Right-aligned nav group — holds the theme toggle alone (Landing) or
   [toggle, "Back home" link] (Past Years). */
.akai-nav__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Header */
.akai-page-head { max-width: 1240px; margin: 0 auto; padding: 72px 32px 40px; }
.akai-page-head .tk-badge {
  border-width: var(--bw-3);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-hard);
  font-family: var(--font-pixel, "DotGothic16");
  font-size: 12px;
  letter-spacing: .2em;
  padding: 6px 14px;
  margin-bottom: 24px;
}
.akai-page-head__title {
  font-family: var(--font-display);
  font-size: 76px;
  line-height: .98;
  letter-spacing: -.01em;
  margin: 0 0 20px;
  color: var(--fg);
  text-wrap: balance;
}
.akai-accent { color: var(--akai-red); }
.akai-page-head__sub {
  max-width: 680px;
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.6;
  color: var(--fg-muted);
  margin: 0;
}

/* Video grid */
.akai-video-grid { max-width: 1240px; margin: 0 auto; padding: 16px 32px 96px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 28px; }
.akai-video-grid--empty { display: block; padding: 16px 32px 96px; text-align: center; color: var(--fg-muted); }
.akai-video-card { background: var(--bg); border: var(--bw-3) solid var(--border-strong); border-radius: 6px;
  box-shadow: var(--shadow-hard); overflow: hidden; }
.akai-video-card__frame { aspect-ratio: 16 / 9; background: #14100E; }
.akai-video-card__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Footer — always-dark stage. Hardcoded #14100E/#F4ECDC in BOTH modes. */
.akai-footer { background: #14100E; color: #F4ECDC; padding: 40px 32px; }
.akai-footer__inner {
  max-width: 1240px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  font-family: var(--font-pixel, "DotGothic16");
  font-size: 12px;
  letter-spacing: .1em;
}

/* Halftone texture — sibling ref (copied alongside marketing.css at build time). */
.akai-halftone { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url("halftone.svg"); background-size: 340px; opacity: .5; }
[data-theme="dark"] .akai-halftone { opacity: .14; filter: invert(1); }
.akai-py-content { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) { .akai-marquee__track { animation: none; } }

/* Mobile — both pages (Landing + Past Years) share this one breakpoint. */
@media (max-width: 640px) {
  /* Nav — shared */
  .akai-nav { padding: 10px 16px; }
  .akai-nav__subtag { display: none; }

  /* Landing — action bar */
  .akai-actionbar { flex-direction: column; align-items: stretch; padding: 14px 16px; gap: 12px; }
  .akai-actionbar .tk-btn { justify-content: center; font-size: 15px; padding: 13px 20px; }

  /* Landing — socials: hide kicker, center + force 3-per-row chips */
  .akai-kicker { display: none; }
  .akai-chips { width: 100%; justify-content: center; }
  .akai-chips .tk-badge { flex: 0 0 calc((100% - 16px) / 3); text-align: center; padding: 8px 4px; font-size: 10px; }

  /* Past Years — header, grid, footer */
  .akai-page-head { padding: 44px 18px 28px; }
  .akai-page-head__title { font-size: 46px; }
  .akai-video-grid { padding: 12px 16px 72px; grid-template-columns: 1fr; gap: 20px; }
  .akai-footer { padding: 28px 20px; }
}