/* Homepage — Azuki placement (centered product stack) + DDL game chrome */

/* Homepage: full-bleed sections manage their own bands */
.page-home main {
  position: relative;
  padding: 0;
  overflow-x: clip;
}

.page-home main > * {
  position: relative;
  z-index: 1;
}

/* Pure black stage — no wood / diamond room textures, no fixed room layers */
.page-home {
  --home-black: #050403;
  /*
   * AAA section system (all content bands share these tokens):
   *   title → --section-title-to-lead → lead (1 or 2 lines) → --section-lead-to-media → media
   * Titles, leads, and gaps are identical so 1-line and 2-line copy feel coherent.
   */
  --section-title-size: clamp(1.85rem, 4.2vw, 2.65rem);
  --section-title-tracking: 0.045em;
  --section-title-to-lead: 0.75rem;
  --section-lead-to-media: 1.5rem;
  --section-pad-y: clamp(3rem, 6.5vw, 5rem);
  --section-lead-max: min(42rem, 92vw);
  /* Mobile inter-section air (shared so every band matches) */
  --mobile-section-pad-after: clamp(4.25rem, 12vw, 5.5rem);
  --mobile-section-pad-before: clamp(3.5rem, 10vw, 4.75rem);
  background: #050403 !important;
  background-image: none !important;
}

.page-home::before,
.page-home::after,
body.page-home::before,
body.page-home::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

html:has(body.page-home) {
  background: #050403 !important;
  background-image: none !important;
}

html:has(body.page-home)::before,
html:has(body.page-home)::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* Footer sits flush after community — no gap for textures to bleed through */
.page-home .site-footer {
  margin-top: 0;
}

/*
 * Hero — 100% zoom: full cluster visible under sticky nav.
 * Centered stack (logo → blurb → date → CTA → packs), no logo under the header.
 */
.home-hero {
  position: relative;
  width: 100%;
  /* Desktop may use dvh; mobile MUST use only svh (see mobile block) — dvh reflows mid-scroll on iOS */
  min-height: calc(100svh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
  max-height: none;
  padding:
    clamp(1rem, 2.5vh, 1.5rem)
    0
    clamp(0.5rem, 1.5vh, 1rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* whole cluster centered — space under header */
  overflow-x: hidden;
  overflow-y: hidden;
  box-sizing: border-box;
  /* Solid only — art is a normal <img.hero-bg-img>, not CSS background */
  background-color: #050403;
  background-image: none;
  transform: none !important;
  will-change: auto !important;
  isolation: auto;
}

/* Hero art as a normal replaced element (scrolls 1:1 with the section) */
.hero-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  border: 0;
  margin: 0;
  padding: 0;
  max-width: none;
  transform: none !important;
  will-change: auto !important;
  filter: none !important;
}

/*
 * TWO independent shade systems (Azuki):
 *   1) Background art — single top→bottom shade (0% black at top → 100% black at fold)
 *   2) Pack graphic  — its own bottom dissolve + lift shadow (on .hero-product)
 * Never paint a shared overlay on top of both.
 */
.home-hero::after {
  content: none;
  display: none;
}

/*
 * ── 1) Shade overlays only (art is on .home-hero background) ──
 * No <img>, no scale(), no will-change, no JS transforms — ever.
 * iOS was promoting filter/transform layers that scrolled out of sync.
 */
.hero-swirl-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  transform: none !important;
  will-change: auto !important;
  /* Darken the raw art (replaces old img filter brightness/saturate) */
  background:
    /* Exposure veil — matches prior img filter ~brightness(0.42) */
    linear-gradient(
      0deg,
      rgba(5, 4, 3, 0.58) 0%,
      rgba(5, 4, 3, 0.52) 100%
    );
}

.hero-swirl-bg img {
  display: none !important;
}

/*
 * BG shade stack (behind packs only):
 *   — Vertical: 0% black at top → ramps harder → 100% slightly above the fold
 *   — Sides: soft black rims back in
 */
.hero-swirl-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transform: none !important;
  background:
    /* Vertical intensity ramp — full black before the very bottom */
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(5, 4, 3, 0.06) 12%,
      rgba(5, 4, 3, 0.18) 28%,
      rgba(5, 4, 3, 0.38) 44%,
      rgba(5, 4, 3, 0.62) 58%,
      rgba(5, 4, 3, 0.86) 72%,
      #050403 84%,
      #050403 100%
    ),
    /* Side rims */
    linear-gradient(
      90deg,
      #050403 0%,
      rgba(5, 4, 3, 0.72) 3%,
      rgba(5, 4, 3, 0.32) 9%,
      transparent 18%,
      transparent 82%,
      rgba(5, 4, 3, 0.32) 91%,
      rgba(5, 4, 3, 0.72) 97%,
      #050403 100%
    );
}

/* Reinforce sides + slight top kiss without fighting the main ramp */
.hero-swirl-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transform: none !important;
  background:
    linear-gradient(
      90deg,
      rgba(5, 4, 3, 0.45) 0%,
      transparent 12%,
      transparent 88%,
      rgba(5, 4, 3, 0.45) 100%
    );
}

/* Keep dedicated vignette off — bg ::before/::after own the shade */
.hero-vignette {
  display: none;
}

/* Full cluster as one unit — centered in the hero under the nav */
.hero-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.45rem, 1.2vh, 0.75rem);
  flex: 0 1 auto;
  min-height: 0;
  max-height: 100%;
  transform: none;
  text-align: center;
}

/*
 * Sandwich cluster: Rise of the Pack · pitch · Preorder
 * Centered as one unit in the band between nav bottom and pack art top.
 */
.hero-copy,
.hero-copy-sandwich {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.55rem, 1.6vh, 0.95rem);
  text-align: center;
  width: 100%;
  max-width: min(44rem, 92vw);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
}

/* Legacy group hooks (if nested markup returns) */
.hero-copy-brand,
.hero-copy-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-inline: auto;
  text-align: center;
  gap: 0;
}

/* Rise of the Pack — fully visible under header */
.hero-set-lockup {
  display: block;
  width: min(260px, 54vw);
  height: auto;
  margin-inline: auto;
  transform: none !important;
  will-change: auto !important;
  /* One soft glow only — stacked filters promote extra iOS compositor layers */
  filter: drop-shadow(0 4px 18px rgba(232, 170, 60, 0.45))
    drop-shadow(0 2px 0 rgba(0, 0, 0, 0.4));
}

/* Pitch under the lockup — same prose token as section leads */
.hero-blurb {
  margin: 0 auto;
  width: 100%;
  max-width: min(42rem, 90vw);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-prose);
  line-height: var(--text-prose-lh);
  letter-spacing: 0.01em;
  color: #ead9b8;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  box-sizing: border-box;
}

/*
 * Desktop: lock exactly two lines so “play.” never hangs alone on a 3rd line.
 * Each line is max-content + margin auto so long nowrap lines stay optically centered.
 */
.hero-blurb-line {
  display: inline;
}

@media (min-width: 901px) {
  .hero-blurb {
    max-width: min(46rem, 70vw);
  }

  .hero-blurb-line {
    display: block;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    white-space: nowrap;
    text-align: center;
  }

  /* Desktop fold pin lives AFTER base .hero-product rules (see end of hero block). */
}

/*
 * Azuki-style volume badge: gold pill + side rails
 * (reference: SPECIAL COLLECTION / VOLUME 01)
 */
.hero-release {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: min(100%, 22rem);
  margin: 0;
  flex: 0 0 auto;
}

.hero-release-rail {
  flex: 1 1 auto;
  height: 2px;
  min-width: 1.25rem;
  max-width: 3.5rem;
  border-radius: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200, 150, 60, 0.25) 12%,
    rgba(232, 197, 106, 0.85) 50%,
    rgba(200, 150, 60, 0.25) 88%,
    transparent 100%
  );
  box-shadow: 0 0 8px rgba(212, 160, 44, 0.25);
}

.hero-release-rail:first-child {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200, 150, 60, 0.15) 20%,
    rgba(232, 197, 106, 0.9) 100%
  );
}

.hero-release-rail:last-child {
  background: linear-gradient(
    90deg,
    rgba(232, 197, 106, 0.9) 0%,
    rgba(200, 150, 60, 0.15) 80%,
    transparent 100%
  );
}

.hero-release-date {
  margin: 0;
  flex: 0 0 auto;
  position: relative;
  /* Angled ends (hex / volume badge) */
  clip-path: polygon(
    10px 0%,
    calc(100% - 10px) 0%,
    100% 50%,
    calc(100% - 10px) 100%,
    10px 100%,
    0% 50%
  );
  padding: 0.38rem 1.35rem 0.4rem;
  background: linear-gradient(
    180deg,
    #f0d48a 0%,
    #e0b84a 28%,
    #c49228 62%,
    #a67820 100%
  );
  box-shadow:
    0 2px 0 rgba(60, 32, 8, 0.55),
    0 6px 16px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 245, 200, 0.55),
    inset 0 -1px 0 rgba(80, 40, 8, 0.25);
}

.hero-release-date-inner {
  display: block;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(0.58rem, 1.05vw, 0.72rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a1006;
  text-shadow: 0 1px 0 rgba(255, 240, 180, 0.35);
  white-space: nowrap;
}

.hero-bleed-actions {
  display: flex;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: auto;
  max-width: 100%;
  position: relative;
  padding-bottom: 0.15rem;
  margin-bottom: 0;
}

/*
 * Pack graphic — sized to leave room for logo + blurb at 100% zoom
 * NOTE: do not use margin shorthand here — it clobbers desktop margin-top: auto.
 */
.hero-product {
  position: relative;
  z-index: 2;
  width: min(100%, 1100px);
  margin-inline: auto;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  flex: 0 1 auto;
  min-height: 0;
  line-height: 0;
  pointer-events: none;
  will-change: auto;
  box-shadow: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* Soft dissolve at bottom edge only */
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 72%,
    rgba(0, 0, 0, 0.8) 88%,
    rgba(0, 0, 0, 0.3) 96%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 72%,
    rgba(0, 0, 0, 0.8) 88%,
    rgba(0, 0, 0, 0.3) 96%,
    transparent 100%
  );
}

.hero-product-img {
  display: block;
  width: 100%;
  height: auto;
  /* Cap height so logo never collides with the sticky header */
  max-height: min(42vh, 440px);
  object-fit: contain;
  object-position: center bottom;
  margin-inline: auto;
  user-select: none;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.55));
  box-shadow: none;
}

/*
 * Desktop 100% zoom:
 *  - Pack fixed size, pinned to fold
 *  - Lockup + blurb + Preorder vertically centered in the band ABOVE the pack
 */
@media (min-width: 901px) {
  .home-hero {
    justify-content: stretch;
    align-items: stretch;
    padding-bottom: 0;
    padding-top: 0;
  }

  .home-hero .hero-stage {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    /* Center copy in the free band above the pack */
    justify-content: center;
    align-items: center;
    /* Reserve pack height so centering is between header and cards, not mid-pack */
    padding-top: 0.25rem;
    padding-bottom: min(42vh, 440px);
    gap: 0;
  }

  .home-hero .hero-copy,
  .home-hero .hero-copy-sandwich {
    flex: 0 0 auto;
    position: relative;
    z-index: 3;
    /* Sandwich: lockup · pitch · Preorder as one centered unit above pack */
    gap: clamp(0.55rem, 1.5vh, 0.95rem);
  }

  /* Pin bottom edge to fold; size stays base max-height (42vh / 440px) */
  .home-hero .hero-product {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin-inline: auto;
    margin-top: 0;
    margin-bottom: 0;
    width: min(100%, 1100px);
    max-width: min(100%, 1100px);
    padding-bottom: 0;
    /* Light bottom kiss only — heavy mask made art look higher than its box */
    -webkit-mask-image: linear-gradient(
      180deg,
      #000 0%,
      #000 88%,
      rgba(0, 0, 0, 0.85) 96%,
      transparent 100%
    );
    mask-image: linear-gradient(
      180deg,
      #000 0%,
      #000 88%,
      rgba(0, 0, 0, 0.85) 96%,
      transparent 100%
    );
  }

  .home-hero .hero-product-img {
    /* Explicit same size as base — never enlarge to fake placement */
    max-height: min(42vh, 440px);
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center bottom;
  }

}

/*
 * Hard lock: hero never moves relative to itself (any viewport).
 * Art is CSS background on .home-hero — scrolls with the document only.
 */
.home-hero,
.home-hero .hero-swirl-bg,
.home-hero .hero-swirl-bg::before,
.home-hero .hero-swirl-bg::after,
.home-hero .hero-stage,
.home-hero .hero-set-lockup,
.home-hero .hero-product,
.home-hero .hero-product-img,
.home-hero .hero-copy {
  transform: none !important;
  will-change: auto !important;
  transition: none !important;
  animation: none !important;
}

/* Legacy box container — removed from hero */
.box-stage,
.box-stage-cta,
.box-art {
  display: none !important;
}

/* Legacy class aliases so old selectors don’t break */
.home-hero-bleed { /* renamed to .home-hero */ }
.hero-bleed-content { display: contents; }
.hero-bleed-media,
.hero-bleed-scrim,
.hero-bleed-img,
.hero-main-art,
.hero-art-fade,
.hero-showcase {
  display: none !important;
}

/* Preorder — live shop CTA (opens in new tab) */
.btn-preorder,
.btn.btn-preorder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9.5rem;
  min-height: 44px;
  padding: 0.6rem 1.45rem;
  border-radius: 999px;
  border: none;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(180deg, #e84a42 0%, #d12e28 45%, #b8201c 100%);
  box-shadow:
    0 6px 18px rgba(180, 28, 22, 0.4),
    inset 0 1px 0 rgba(255, 220, 210, 0.28);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  opacity: 1;
  position: relative;
  transition:
    transform 0.15s ease,
    filter 0.15s ease,
    box-shadow 0.15s ease;
}

.btn-preorder:hover,
.btn.btn-preorder:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow:
    0 8px 22px rgba(180, 28, 22, 0.48),
    inset 0 1px 0 rgba(255, 220, 210, 0.32);
  color: #fff;
}

.btn-preorder:active,
.btn.btn-preorder:active {
  transform: translateY(0);
  filter: brightness(0.96);
}

.btn-preorder::after {
  content: none;
  display: none;
}

/* Legacy showcase classes kept for safety if referenced elsewhere */
.home-showcase { display: none; }
.showcase-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(0.9rem, 2vw, 1.35rem);
}

.showcase-brand {
  display: grid;
  gap: 0.15rem;
  justify-items: center;
}

.showcase-wordmark {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(0.78rem, 1.4vw, 0.92rem);
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #f0e0c0;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.75),
    0 0 12px rgba(0, 0, 0, 0.45);
}

.showcase-legends {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.4rem, 11vw, 5.6rem);
  letter-spacing: 0.06em;
  line-height: 0.94;
  color: #f8e6a8;
  text-shadow:
    0 3px 0 #120804,
    0 1px 0 rgba(255, 240, 180, 0.2),
    0 4px 16px rgba(0, 0, 0, 0.65),
    0 0 24px rgba(0, 0, 0, 0.35);
}

.showcase-product-line {
  margin: 0.35rem 0 0;
  font-family: var(--font-ui);
  font-size: clamp(0.72rem, 1.2vw, 0.84rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #e8d4b0;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.75),
    0 0 12px rgba(0, 0, 0, 0.4);
}

.showcase-set {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  margin-top: 0.15rem;
}

.showcase-set-name {
  margin: 0;
  font-family: var(--font-game);
  font-weight: 800;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f0c85a;
  text-shadow:
    0 2px 0 #1a0c04,
    0 0 14px rgba(0, 0, 0, 0.5);
}

.showcase-coming {
  margin: 0;
}

.showcase-coming-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 1.05rem;
  border-radius: 6px;
  border: 2px solid #5a3a14;
  background: linear-gradient(180deg, #e0b040, #b87818);
  color: #2a1608;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow:
    0 2px 0 #3a2208,
    inset 0 1px 0 rgba(255, 245, 200, 0.4);
}

/* Centered product visual */
.showcase-art {
  margin: 0.25rem 0 0;
  width: min(100%, 680px);
  display: grid;
  gap: 0.55rem;
  justify-items: center;
}

.showcase-art-frame {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 3px solid var(--wood-outer, #3a2412);
  background: linear-gradient(160deg, #2e1e14, #160f0a);
  box-shadow:
    0 0 0 1px #0e0a06,
    0 10px 0 rgba(0, 0, 0, 0.25),
    0 22px 48px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(232, 197, 106, 0.12);
  line-height: 0;
}

.showcase-art-frame::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(166, 124, 40, 0.32);
  border-radius: 10px;
  pointer-events: none;
  z-index: 2;
}

.showcase-art-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(18, 12, 8, 0.2) 0%, transparent 18%, transparent 70%, rgba(12, 8, 5, 0.55) 100%),
    radial-gradient(90% 80% at 50% 40%, transparent 45%, rgba(18, 12, 8, 0.35) 100%);
  border-radius: inherit;
}

.showcase-art picture,
.showcase-art-img {
  display: block;
  width: 100%;
  height: auto;
}

.showcase-art-img {
  position: relative;
  z-index: 1;
  object-fit: cover;
  object-position: center 30%;
  max-height: min(54vh, 520px);
  filter: saturate(0.9) contrast(1.03) brightness(0.95) sepia(0.08);
}

.showcase-actions {
  margin-top: 0.25rem;
  justify-content: center;
}

.showcase-actions .btn-primary {
  min-width: 11rem;
}

/* ── Shared section rhythm ── */
.home-section {
  padding-block: var(--section-pad-y);
}

/*
 * Unified section titles (Lead Your Pack / 111 Cards / Become a Legend / Community)
 * One size, weight, color, shadow — only white-space rules may differ per title.
 */
.page-home .about-title,
.page-home .gallery-title,
.page-home .gallery-title-oneline,
.page-home .legend-title,
.page-home .community-title {
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--section-title-size);
  letter-spacing: var(--section-title-tracking);
  color: #f8e6a8;
  text-shadow: 0 3px 0 #120804, 0 4px 14px rgba(0, 0, 0, 0.55);
  line-height: 1.1;
  text-align: center;
}

/*
 * Unified section leads — works for 1-line OR 2-line paragraphs.
 * Gap to media is always margin/gap on the lead block (not per-line), so
 * line count never changes the air under the copy.
 */
.page-home .about-lead,
.page-home .gallery-lead,
.page-home .legend-pitch,
.page-home .community-pitch {
  margin: 0;
  padding: 0;
  max-width: var(--section-lead-max);
  width: 100%;
  color: #ead9b8;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-prose);
  line-height: var(--text-prose-lh);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  text-align: center;
  box-sizing: border-box;
}

/*
 * Optional preferred line breaks inside a lead.
 * Mobile: inline (natural wrap). Desktop: each span is its own centered line.
 * No white-space:nowrap — long lines reflow safely; gap under lead is always
 * --section-lead-to-media regardless of 1 or 2 visual lines.
 */
.page-home .about-lead-line,
.page-home .section-lead-line {
  display: inline;
}

@media (min-width: 901px) {
  .page-home .about-lead-line,
  .page-home .section-lead-line {
    display: block;
    text-align: center;
  }
}

/* ── 2. About DDL TCG (pack hero feature) ── */
.home-about-section {
  text-align: center;
  background: #050403;
  border: none;
  /* Extra air under hero pack art before Lead Your Pack */
  padding-top: clamp(3.5rem, 8vw, 6rem);
  padding-bottom: var(--section-pad-y);
}

/*
 * Mobile: Lead Your Pack fills the viewport so the gallery section
 * stays below the fold (same “one band at a time” feel as desktop hero).
 */
@media (max-width: 900px) {
  .home-about-section {
    min-height: calc(100svh - var(--nav-h, 72px));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: clamp(2rem, 5vh, 3rem);
    padding-bottom: clamp(2.25rem, 6vh, 3.5rem);
  }

  .home-about-section .about-inner {
    width: 100%;
  }

  /* Softer plate scale so it fits one screen with title + copy */
  .home-about-section .about-art {
    width: min(100%, 420px);
  }

  .home-about-section .about-art-img {
    max-height: min(48svh, 420px);
  }
}

.about-inner {
  max-width: min(720px, 92vw);
  margin-inline: auto;
  display: grid;
  justify-items: center;
  gap: var(--section-lead-to-media);
}

/*
 * ════════════════════════════════════════════════════════════════
 * Pack hero plate — restored theatrical stack + anti-shake mobile
 *
 * Look (same as early good version):
 *   feathered edges · outer auras · plate brass glow · sheen sweep · breath
 *
 * Why mobile shook (root cause — not “animation bad”):
 *   iOS re-rasterizes any large <img> when `filter` changes every frame
 *   (brightness / saturate / drop-shadow). Pairing that with scale() made
 *   the whole plate jitter.
 *
 * Fix (keep the look):
 *   • Image/media: GPU transform scale ONLY (no filter animation on <img>)
 *   • Brightness: soft-light white overlay, opacity pulse (not milky gold)
 *   • Gold lift: static drop-shadow on img + plate glow + sheen
 *   • Mobile auras: opacity only (no animated blur/translate)
 *   • Mobile plate: static shadow (no box-shadow keyframe thrash)
 * ════════════════════════════════════════════════════════════════
 */
.about-art {
  --about-edge: #050403;
  --about-plate: #0a0604;
  position: relative;
  width: min(100%, 560px);
  margin: 0 auto;
  line-height: 0;
  isolation: isolate;
  overflow: visible;
}

/* ── Outer ambient ── */
.about-art-aura {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 42%;
  will-change: opacity, transform;
}

.about-art-aura:not(.about-art-aura--ember) {
  inset: -12% -16% -8%;
  background:
    radial-gradient(ellipse 58% 52% at 50% 44%, rgba(255, 190, 80, 0.28), transparent 70%),
    radial-gradient(ellipse 72% 62% at 50% 72%, rgba(180, 90, 28, 0.18), transparent 74%);
  filter: blur(30px);
  opacity: 0.55;
  animation: aboutAuraBreathe 8s ease-in-out infinite;
}

.about-art-aura--ember {
  inset: -4% -8% -10%;
  background:
    radial-gradient(ellipse 48% 40% at 28% 62%, rgba(230, 100, 36, 0.22), transparent 68%),
    radial-gradient(ellipse 46% 38% at 74% 34%, rgba(255, 170, 55, 0.16), transparent 65%);
  filter: blur(24px);
  opacity: 0.4;
  animation: aboutAuraEmber 10s ease-in-out infinite;
}

/* ── Brass bezel plate ── */
.about-art-plate {
  position: relative;
  z-index: 1;
  border-radius: 16px;
  border: 2px solid rgba(232, 197, 106, 0.52);
  outline: 3px solid rgba(40, 24, 10, 0.85);
  outline-offset: 0;
  overflow: hidden;
  background: var(--about-plate);
  box-shadow:
    0 0 0 1px rgba(255, 220, 150, 0.16),
    0 0 18px rgba(200, 140, 40, 0.22),
    0 0 40px rgba(140, 70, 20, 0.14),
    0 20px 44px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 230, 170, 0.2);
  animation: aboutPlateGlow 7.5s ease-in-out infinite;
}

/*
 * Media window — FIXED feather mask (never scales).
 * Breath zooms the <img> inside with enough overscan so corners never
 * hard-clip against the plate/mask (that was the red-circle bug).
 */
.about-art-media {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 13px;
  background: var(--about-plate);
  /* Lighter edge mask — soft corners without heavy black falloff */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 1.6%, #000 98.4%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 1.4%, #000 98.4%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, #000 1.6%, #000 98.4%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 1.4%, #000 98.4%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transform: translateZ(0);
  animation: none; /* fixed window — img breathes inside */
}

.about-art picture,
.about-art-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

.about-art-img {
  padding: 0;
  margin: 0;
  max-height: min(78vh, 860px);
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center center;
  user-select: none;
  box-sizing: border-box;
  /*
   * Breath = scale only (no filter thrash).
   * Base overscan ≥1.08 so at peak scale the photo still covers past the
   * feather mask — corners stay soft, never square-clipped.
   */
  transform: scale(1.08) translateZ(0);
  transform-origin: center center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  filter: drop-shadow(0 0 14px rgba(232, 184, 74, 0.22));
  animation: aboutImgBreath 8s ease-in-out infinite;
  will-change: transform;
}

/* Brightness breath without filter thrash (soft-light white — not milky gold wash) */
.about-art-bright {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: 13px;
  background: #fff8e8;
  mix-blend-mode: soft-light;
  opacity: 0;
  animation: aboutBrightPulse 8s ease-in-out infinite;
  will-change: opacity;
}

/* Edge feather dissolve — turned down so art reads cleaner */
.about-art-edge {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: 13px;
  background:
    radial-gradient(ellipse 48% 42% at 0% 0%, rgba(5, 4, 3, 0.42) 0%, rgba(5, 4, 3, 0.14) 38%, transparent 68%),
    radial-gradient(ellipse 48% 42% at 100% 0%, rgba(5, 4, 3, 0.42) 0%, rgba(5, 4, 3, 0.14) 38%, transparent 68%),
    radial-gradient(ellipse 48% 42% at 0% 100%, rgba(5, 4, 3, 0.48) 0%, rgba(5, 4, 3, 0.16) 40%, transparent 70%),
    radial-gradient(ellipse 48% 42% at 100% 100%, rgba(5, 4, 3, 0.48) 0%, rgba(5, 4, 3, 0.16) 40%, transparent 70%),
    linear-gradient(90deg, rgba(5, 4, 3, 0.22) 0%, transparent 7%, transparent 93%, rgba(5, 4, 3, 0.22) 100%),
    linear-gradient(180deg, rgba(5, 4, 3, 0.16) 0%, transparent 8%, transparent 90%, rgba(5, 4, 3, 0.28) 100%);
  box-shadow:
    inset 0 0 18px 6px rgba(5, 4, 3, 0.2),
    inset 0 0 36px 12px rgba(5, 4, 3, 0.12),
    inset 0 0 0 1px rgba(5, 4, 3, 0.18);
  mix-blend-mode: multiply;
  opacity: 0.72;
}

/* Clean cinematic sheen */
.about-art-sheen {
  position: absolute;
  z-index: 4;
  inset: -12% -45%;
  pointer-events: none;
  background: linear-gradient(
    108deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 236, 180, 0) 44%,
    rgba(255, 230, 160, 0.1) 49%,
    rgba(255, 245, 210, 0.18) 50.5%,
    rgba(255, 220, 140, 0.09) 52%,
    transparent 58%,
    transparent 100%
  );
  mix-blend-mode: soft-light;
  transform: translateX(-55%) skewX(-12deg);
  animation: aboutSheenSweep 11s ease-in-out infinite;
  will-change: transform, opacity;
}

/* Pocket vignette — lighter so the art isn’t boxed in black */
.about-art-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: 13px;
  background:
    radial-gradient(ellipse 82% 78% at 50% 42%, transparent 52%, rgba(5, 4, 3, 0.08) 82%, rgba(5, 4, 3, 0.2) 100%),
    linear-gradient(180deg, rgba(255, 200, 120, 0.04) 0%, transparent 16%, transparent 78%, rgba(5, 4, 3, 0.14) 100%);
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.12),
    inset 0 -14px 24px rgba(0, 0, 0, 0.1);
  animation: aboutVignetteBreathe 8s ease-in-out infinite;
}

/* Brass lip */
.about-art-bezel {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 220, 150, 0.14),
    inset 0 1px 0 rgba(255, 236, 190, 0.28),
    inset 0 -1px 0 rgba(40, 22, 8, 0.45),
    inset 0 0 18px rgba(0, 0, 0, 0.2);
}

/* ── Keyframes ── */
/* Img scale stays above ~1.07 so feather window never shows hard corners */
@keyframes aboutImgBreath {
  0%,
  100% {
    transform: scale(1.08) translateZ(0);
  }
  50% {
    transform: scale(1.12) translateZ(0);
  }
}

@keyframes aboutBrightPulse {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 0.28;
  }
}

@keyframes aboutAuraBreathe {
  0%,
  100% {
    opacity: 0.48;
    transform: scale(0.98);
  }
  50% {
    opacity: 0.78;
    transform: scale(1.05);
  }
}

@keyframes aboutAuraEmber {
  0%,
  100% {
    opacity: 0.36;
    transform: scale(1.01) translate(0, 0);
  }
  33% {
    opacity: 0.62;
    transform: scale(1.06) translate(1.5%, -1%);
  }
  66% {
    opacity: 0.48;
    transform: scale(1) translate(-1.2%, 1.2%);
  }
}

@keyframes aboutAuraOpacityOnly {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.75;
  }
}

@keyframes aboutPlateGlow {
  0%,
  100% {
    border-color: rgba(232, 197, 106, 0.5);
    box-shadow:
      0 0 0 1px rgba(255, 220, 150, 0.14),
      0 0 16px rgba(200, 140, 40, 0.2),
      0 0 36px rgba(140, 70, 20, 0.14),
      0 20px 44px rgba(0, 0, 0, 0.58),
      inset 0 1px 0 rgba(255, 230, 170, 0.16);
  }
  50% {
    border-color: rgba(245, 215, 140, 0.7);
    box-shadow:
      0 0 0 1px rgba(255, 230, 170, 0.26),
      0 0 26px rgba(220, 160, 50, 0.34),
      0 0 52px rgba(160, 80, 24, 0.22),
      0 20px 44px rgba(0, 0, 0, 0.58),
      inset 0 1px 0 rgba(255, 236, 190, 0.28);
  }
}

@keyframes aboutSheenSweep {
  0%,
  18% {
    transform: translateX(-58%) skewX(-12deg);
    opacity: 0;
  }
  28% {
    opacity: 0.75;
  }
  42% {
    opacity: 0.45;
  }
  52%,
  100% {
    transform: translateX(62%) skewX(-12deg);
    opacity: 0;
  }
}

@keyframes aboutVignetteBreathe {
  0%,
  100% {
    opacity: 0.92;
  }
  50% {
    opacity: 1;
  }
}

/*
 * Mobile anti-shake: keep sheen + breath + feather.
 * Drop only the expensive filter/box-shadow thrash.
 */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  body.page-home .about-art {
    contain: none !important;
    overflow: visible;
  }

  /* Fixed feather window — same as desktop */
  body.page-home .about-art-media {
    animation: none !important;
    transform: translateZ(0) !important;
  }

  body.page-home .about-art-img {
    /* Scale-only breath; keep overscan so corners stay feathered */
    animation: aboutImgBreathMobile 9s ease-in-out infinite !important;
    filter: drop-shadow(0 0 12px rgba(232, 184, 74, 0.2)) !important;
    will-change: transform !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
  }

  body.page-home .about-art-bright {
    display: block !important;
    animation: aboutBrightPulse 9s ease-in-out infinite !important;
    will-change: opacity !important;
  }

  body.page-home .about-art-sheen {
    display: block !important;
    animation: aboutSheenSweep 12s ease-in-out infinite !important;
  }

  body.page-home .about-art-plate {
    /* Static premium frame — animated box-shadow was a major jank source */
    animation: none !important;
    overflow: hidden !important;
  }

  body.page-home .about-art-aura,
  body.page-home .about-art-aura--ember {
    /* Opacity only — no scale / blur keyframes */
    animation: aboutAuraOpacityOnly 8s ease-in-out infinite !important;
    transform: none !important;
    filter: blur(28px) !important;
    will-change: opacity !important;
  }

  body.page-home .about-art-aura--ember {
    animation-duration: 9.5s !important;
    animation-direction: reverse !important;
  }

  body.page-home .about-art-vignette {
    animation: aboutVignetteBreathe 8s ease-in-out infinite !important;
  }

  body.page-home .about-art-live,
  body.page-home .about-art-rim {
    display: none !important;
    animation: none !important;
  }
}

/* Mobile: slightly gentler zoom, still overscans past feather */
@keyframes aboutImgBreathMobile {
  0%,
  100% {
    transform: scale(1.09) translateZ(0);
  }
  50% {
    transform: scale(1.125) translateZ(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-art-aura,
  .about-art-aura--ember,
  .about-art-plate,
  .about-art-media,
  .about-art-img,
  .about-art-bright,
  .about-art-sheen,
  .about-art-vignette {
    animation: none !important;
    will-change: auto !important;
  }

  .about-art-sheen {
    display: none;
  }

  .about-art-bright {
    opacity: 0.12;
  }

  .about-art-media {
    transform: none;
  }

  .about-art-img {
    transform: scale(1.08) translateZ(0);
    filter: drop-shadow(0 0 14px rgba(232, 184, 74, 0.22));
  }
}

.about-copy {
  display: grid;
  justify-items: center;
  gap: var(--section-title-to-lead);
  max-width: var(--section-lead-max);
  width: 100%;
  order: -1; /* text above image even if markup order changes */
}

.about-kicker {
  display: none; /* no longer used — title carries the section */
}

/* ── 3. Gallery block — title → lead → 3-up carousel → View Full Gallery ── */
.home-gallery-section,
.home-gallery-black {
  text-align: center;
  background: #050403;
  border-block: none;
  box-shadow: none;
  padding-block: var(--section-pad-y);
  margin-top: 0;
}

.gallery-block {
  display: grid;
  justify-items: center;
  gap: 0;
  max-width: min(1180px, 96vw);
  margin-inline: auto;
}

.gallery-head {
  display: grid;
  justify-items: center;
  gap: var(--section-title-to-lead);
  margin-bottom: var(--section-lead-to-media);
  width: 100%;
  max-width: var(--section-lead-max);
}

/* Always one line — scales down on narrow viewports instead of wrapping */
.page-home .gallery-title-oneline {
  max-width: none;
  white-space: nowrap;
  /* Keep max aligned with other section titles; only min shrinks for long label */
  font-size: clamp(1.2rem, 5.2vw, 2.65rem);
  margin: 0 0 var(--section-title-to-lead);
}

.page-home .gallery-lead {
  margin: 0 auto var(--section-lead-to-media);
}

.gallery-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.15rem;
  padding: 0.55rem 1.15rem 0.6rem;
  border-radius: 10px;
  border: 2px solid #5a3a14;
  background: linear-gradient(180deg, #3a2818, #1e140e);
  color: #f0e4cc;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 3px 0 #0e0a06, inset 0 1px 0 rgba(255, 210, 140, 0.1);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.gallery-link:hover {
  color: #f8e6a8;
  border-color: var(--brass-edge, #a67c28);
  transform: translateY(-1px);
}

.gallery-link-below {
  margin-top: var(--section-lead-to-media);
}

/* Fluid infinite marquee (cards + community) */
.card-marquee,
.community-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 0; /* lead → media gap owned by section head rules */
}

.marquee-viewport {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  width: max-content;
  will-change: transform;
  animation: marqueeScroll 55s linear infinite;
}

.community-marquee-track {
  animation-duration: 70s;
  gap: 0.85rem;
}

.card-marquee:hover .marquee-track,
.community-marquee:hover .marquee-track,
.marquee-track.is-paused {
  animation-play-state: paused;
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
    padding: 0 1rem;
  }
}

.marquee-card {
  flex: none;
  width: min(168px, 38vw);
  aspect-ratio: var(--card-ratio, 546 / 743);
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #2a1c12;
  background: #0e0a07;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  text-decoration: none;
  line-height: 0;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.marquee-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.marquee-card:hover {
  transform: translateY(-4px) scale(1.03);
  border-color: rgba(200, 150, 70, 0.65);
  z-index: 2;
}

.marquee-photo {
  flex: none;
  width: min(220px, 48vw);
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 3px solid #3a2412;
  background: #1a120c;
  line-height: 0;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}

.marquee-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Azuki-style stage: pure black, soft radial glow, no wood chrome */
.card-showcase {
  /* MUST match .azuki-slide width at each breakpoint */
  --azuki-card-w: min(230px, 40vw);
  /*
   * Stage height = full center card (portrait aspect × JS CENTER_SCALE 1.22)
   * + small pad so drop-shadow / subpixel scale never clips.
   * --azuki-card-w must stay in sync with slide width or cards crop square.
   */
  --azuki-stage-h: calc(var(--azuki-card-w) * 743 / 546 * 1.22 + 12px);
  max-width: min(1180px, 100%);
  width: 100%;
  margin: 0 auto;
  text-align: center;
  /* No top padding — lead → media gap is only --section-lead-to-media on .gallery-lead */
  padding: 0 0.5rem 0.35rem;
  border-radius: 0;
  border: none;
  background:
    radial-gradient(ellipse 55% 50% at 50% 42%, rgba(80, 55, 28, 0.22), transparent 70%),
    transparent;
  box-shadow: none;
  position: relative;
  overflow: visible;
}

.card-showcase::before,
.card-showcase::after {
  display: none;
}

.card-showcase > * {
  position: relative;
  z-index: 2;
}

.card-showcase.is-empty .card-showcase-stage,
.card-showcase.is-empty .card-showcase-meta,
.card-showcase.is-empty .card-showcase-dots {
  display: none;
}

.gallery-status {
  margin: 0 0 0.5rem;
  color: var(--dim);
}

.gallery-status[hidden] {
  display: none !important;
  margin: 0;
  height: 0;
  overflow: hidden;
}

/* Azuki track — smooth GPU step, center scale pop, clean fades */
.card-showcase-stage {
  /* Must match JS TRANSITION_MS */
  --carousel-ms: 820ms;
  --carousel-ease: cubic-bezier(0.33, 0.0, 0.2, 1);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.25rem;
  min-height: var(--azuki-stage-h);
  height: var(--azuki-stage-h);
}

.card-showcase-viewport {
  position: relative;
  width: 100%;
  min-height: var(--azuki-stage-h);
  height: var(--azuki-stage-h);
  overflow: hidden;
  /* Soft side dissolve */
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 4%,
    #000 96%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 4%,
    #000 96%,
    transparent 100%
  );
}

/*
 * Slot stage — full viewport width; cards are absolutely positioned.
 * JS places each card at a precomputed X so visual edge gaps stay equal
 * even when the center card is larger.
 */
.card-showcase-track,
.azuki-track {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: var(--azuki-stage-h);
  margin: 0;
  padding: 0;
  overflow: visible;
  transform: none;
  gap: 0;
}

.azuki-track--slots {
  min-height: var(--azuki-stage-h);
  height: 100%;
}

.card-showcase-stage .home-arrow {
  position: relative;
  z-index: 6;
}

/*
 * Each slide is a fixed layout box. Transform (translate + scale) is owned by JS.
 * Opacity/role classes only style chrome; positions come from inline transform.
 */
.azuki-slide {
  position: absolute;
  left: 50%;
  top: 50%;
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: default;
  pointer-events: none;
  display: block;
  width: min(230px, 40vw);
  /* JS sets: translate3d(x, -50%, 0) scale(s) */
  transform: translate3d(-50%, -50%, 0) scale(0.9);
  transform-origin: center center;
  opacity: 0;
  backface-visibility: hidden;
  will-change: transform, opacity;
  transition:
    transform var(--carousel-ms) var(--carousel-ease),
    opacity var(--carousel-ms) var(--carousel-ease);
}

.azuki-slide-frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--card-ratio, 546 / 743);
  border-radius: 12px;
  overflow: hidden;
  background: #0a0705;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.48);
  line-height: 0;
  transition: box-shadow var(--carousel-ms) var(--carousel-ease);
}

/* Same print-bleed crop as Card Gallery (112% oversize, centered) */
.azuki-slide-frame img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 112%;
  height: 112%;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: center center;
  transform: translate(-50%, -50%);
  backface-visibility: hidden;
}

.azuki-slide.is-center {
  z-index: 4;
}

.azuki-slide.is-center .azuki-slide-frame {
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.58),
    0 4px 12px rgba(0, 0, 0, 0.35);
}

.azuki-slide.is-prev,
.azuki-slide.is-next {
  z-index: 2;
}

.azuki-slide.is-prev2,
.azuki-slide.is-next2 {
  z-index: 1;
}

.azuki-slide.is-far {
  z-index: 0;
  pointer-events: none;
}

.card-showcase.is-sliding .azuki-track,
.card-showcase.is-sliding .azuki-slide {
  pointer-events: none;
}

/* Captions live on slides */
.card-showcase-meta {
  display: none;
}

.card-showcase-tier,
.card-showcase-name,
.card-showcase-credit {
  display: none;
}

.card-showcase-dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.card-dot {
  appearance: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(200, 180, 140, 0.35);
  background: rgba(255, 255, 255, 0.12);
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.card-dot.is-active {
  background: #f0d080;
  border-color: rgba(240, 208, 128, 0.6);
  transform: scale(1.15);
}

/* Azuki-style circular chevrons */
.home-arrow {
  appearance: none;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(12, 10, 8, 0.72);
  color: #f0e4cc;
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  z-index: 5;
}

/* Hover only on real mice — iOS sticky :hover left the arrow yellow after tap */
@media (hover: hover) and (pointer: fine) {
  .home-arrow:hover {
    border-color: rgba(240, 208, 128, 0.45);
    background: rgba(24, 18, 12, 0.9);
    transform: scale(1.06);
    color: #f8e6a8;
  }
}

.home-arrow:active {
  transform: scale(0.98);
  /* brief press only — no sticky gold on touch */
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(12, 10, 8, 0.72);
  color: #f0e4cc;
}

/* Never keep a selected/focused gold look after a tap */
.home-arrow:focus,
.home-arrow:focus-visible {
  outline: none;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(12, 10, 8, 0.72);
  color: #f0e4cc;
  transform: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Keyboard users still get a subtle ring without the gold fill */
@media (hover: hover) and (pointer: fine) {
  .home-arrow:focus-visible {
    outline: 2px solid rgba(240, 208, 128, 0.55);
    outline-offset: 2px;
  }
}

/* Touch/coarse: force default chrome even if UA sticks :hover */
@media (hover: none), (pointer: coarse) {
  .home-arrow:hover,
  .home-arrow:focus,
  .home-arrow:focus-visible,
  .home-arrow:active {
    border-color: rgba(255, 255, 255, 0.14) !important;
    background: rgba(12, 10, 8, 0.72) !important;
    color: #f0e4cc !important;
    transform: none !important;
  }
}

/* JS toggles this after an arrow tap to kill sticky hover paint */
.card-showcase.arrows-just-used .home-arrow,
.card-showcase.arrows-just-used .home-arrow:hover,
.card-showcase.arrows-just-used .home-arrow:focus,
.card-showcase.arrows-just-used .home-arrow:active {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(12, 10, 8, 0.72) !important;
  color: #f0e4cc !important;
  transform: none !important;
}

/* ── 3. Play It First + waitlist + 4-turn play demo ── */
.home-legend-section {
  text-align: center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 20%, rgba(40, 24, 12, 0.35), transparent 65%),
    linear-gradient(180deg, #0a0705 0%, #100b07 40%, #0c0805 100%);
  border-top: 1px solid rgba(60, 40, 20, 0.5);
  /* Override .home-section padding-block so top spacing is intentional */
  padding-top: clamp(3.75rem, 9vw, 5.75rem);
  padding-bottom: var(--section-pad-y);
}

/*
 * Mobile section rhythm — same gap at every band join:
 *   Gallery → Play It First → Join the Community
 */
@media (max-width: 900px) {
  body.page-home section.home-gallery-section.home-gallery-black {
    padding-bottom: var(--mobile-section-pad-after) !important;
  }

  body.page-home section.home-legend-section {
    padding-top: var(--mobile-section-pad-before) !important;
    padding-bottom: var(--mobile-section-pad-after) !important;
  }

  body.page-home section.home-community-section {
    padding-top: var(--mobile-section-pad-before) !important;
  }

  body.page-home .gallery-link-below {
    margin-top: 1.65rem !important;
    margin-bottom: 0 !important;
  }
}

.legend-inner {
  max-width: min(72rem, 96vw);
  margin-inline: auto;
  display: grid;
  justify-items: center;
  gap: 0; /* spacing owned by title / pitch / demo */
  width: 100%;
}

/* Mini board — player seat (Play side A order: creatures → spells → hero → hand) */
.play-demo {
  width: min(820px, 100%);
  margin: 0;
  display: grid;
  gap: 0;
  justify-items: center;
}

.play-demo-board {
  position: relative;
  width: 100%;
  padding: 0.75rem 0.75rem 0.9rem;
  border-radius: 16px;
  border: 3px solid #5a3a1e;
  background:
    radial-gradient(ellipse 70% 50% at 50% 45%, rgba(60, 36, 16, 0.35), transparent 65%),
    linear-gradient(180deg, #1a120c 0%, #0e0a07 50%, #14100c 100%);
  box-shadow:
    0 0 0 1px #0e0a06,
    0 14px 40px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(232, 184, 74, 0.08);
  overflow: hidden;
  transition: opacity 0.28s ease, box-shadow 0.35s ease;
}

.play-demo-board.is-your-turn {
  box-shadow:
    0 0 0 1px #0e0a06,
    0 0 0 2px rgba(245, 200, 66, 0.28),
    0 14px 40px rgba(0, 0, 0, 0.55),
    inset 0 -28px 50px -28px rgba(245, 200, 66, 0.14);
}

.play-demo-board.is-victory-glow {
  box-shadow:
    0 0 0 1px #0e0a06,
    0 0 0 2px rgba(255, 200, 80, 0.4),
    0 0 36px rgba(255, 160, 40, 0.25),
    0 14px 40px rgba(0, 0, 0, 0.55);
}

.play-demo-player .pd-battle-line {
  margin-top: 0.1rem;
  margin-bottom: 0.4rem;
}

/* Creatures (front) then spells (back) — equal zone geometry */
.play-demo-player .pd-creature-row {
  margin-top: 0.15rem;
  margin-bottom: 0.2rem;
}

.play-demo-player .pd-spell-row {
  margin-top: 0.1rem;
  margin-bottom: 0.35rem;
}

.pd-strip {
  display: flex;
  justify-content: center;
  gap: 0.28rem;
  min-height: 2.4rem;
  margin-bottom: 0.35rem;
}

.pd-you-hand {
  margin-top: 0.35rem;
  margin-bottom: 0;
  min-height: 3.4rem;
}

.pd-hand-card {
  width: 28px;
  height: 38px;
  border-radius: 3px;
  border: 1px solid #3a2818;
  /* Same 112% bleed crop as face cards */
  background: #1a120c center / 112% 112% no-repeat;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1), opacity 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.pd-you-hand .pd-hand-card {
  width: 36px;
  height: 50px;
  border-radius: 4px;
}

.pd-hand-card.is-playing {
  transform: translateY(-28px) scale(1.14);
  z-index: 4;
  opacity: 0.92;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(240, 193, 74, 0.45);
  animation: pdHandPlay 0.32s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.pd-hand-card.is-drawing {
  animation: pdHandDraw 0.35s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

@keyframes pdHandPlay {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  55% { transform: translateY(-32px) scale(1.16); opacity: 1; }
  100% { transform: translateY(-22px) scale(1.05); opacity: 0.35; }
}

@keyframes pdHandDraw {
  0% { transform: translate(40px, -18px) scale(0.7) rotate(8deg); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

.pd-hud {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.15rem 0.35rem 0.4rem;
}

.pd-hero {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 5.5rem;
}

.pd-hero-label {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 2px solid #c9842e;
  background: #1e140e;
  color: #f0d9a0;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.pd-you-hud .pd-hero-label {
  border-color: #e8b84a;
}

.pd-hero.is-hit .pd-hero-label {
  animation: pdHeroHit 0.42s ease;
}

@keyframes pdHeroHit {
  0%, 100% { transform: scale(1); box-shadow: none; }
  40% {
    transform: scale(1.1);
    box-shadow: 0 0 16px rgba(255, 80, 40, 0.55);
    border-color: #e07040;
  }
}

.pd-hero-hp {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 1.05rem;
  color: #e8b84a;
  letter-spacing: 0.02em;
}

.pd-hero-hp small {
  font-size: 0.7rem;
  color: #8a7058;
  font-weight: 600;
  margin-left: 0.1rem;
}

.pd-mana {
  display: flex;
  gap: 0.22rem;
  flex-wrap: wrap;
  justify-content: center;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.pd-mana.is-spend {
  filter: brightness(1.25);
  transform: scale(1.06);
}

.pd-crystal {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  transform: rotate(45deg);
  border: 1px solid rgba(200, 150, 70, 0.45);
  background: rgba(40, 28, 16, 0.8);
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pd-crystal.is-on {
  background: linear-gradient(135deg, #f0c14a, #c9842e);
  border-color: #f0d080;
  box-shadow: 0 0 8px rgba(240, 193, 74, 0.35);
}

.pd-piles {
  display: grid;
  gap: 0.1rem;
  text-align: right;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: #8a7058;
  font-family: var(--font-ui);
  font-weight: 700;
}

.pd-piles b {
  color: #c9b090;
  font-weight: 800;
}

.pd-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
  max-width: 420px;
  margin: 0.2rem auto;
  min-height: 4.5rem;
}

/* Creature + spell rows same width/height (equal zone boxes) */
.pd-creature-row,
.pd-spell-row {
  max-width: 420px;
  min-height: 4.5rem;
}

.pd-slot {
  position: relative;
  aspect-ratio: 0.72;
  border-radius: 6px;
  border: 1.5px dashed rgba(240, 160, 50, 0.22);
  background:
    repeating-linear-gradient(135deg, rgba(255, 160, 40, 0.04) 0 6px, transparent 6px 12px),
    rgba(18, 10, 5, 0.75);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.pd-spell-row .pd-slot {
  border-color: rgba(100, 80, 140, 0.4);
  background:
    repeating-linear-gradient(135deg, rgba(140, 100, 220, 0.05) 0 6px, transparent 6px 12px),
    rgba(12, 10, 18, 0.85);
}

.pd-slot.is-filled {
  border-style: solid;
  border-color: rgba(200, 150, 70, 0.55);
  background: #120c08;
}

.pd-slot.is-place-ready {
  outline: 2px dashed rgba(120, 220, 140, 0.85);
  outline-offset: -3px;
  background: rgba(120, 220, 140, 0.1);
  animation: pdPlacePulse 0.9s ease-in-out infinite;
}

.pd-slot.is-summoning {
  animation: pdSummonPop 0.42s cubic-bezier(0.2, 0.9, 0.25, 1) both;
  z-index: 3;
}

.pd-slot.is-taunt {
  border-color: #f0c14a;
  box-shadow: 0 0 0 1px rgba(240, 193, 74, 0.4), 0 0 14px rgba(240, 193, 74, 0.28);
}

.pd-slot.is-taunt-flash {
  animation: pdTauntFlash 0.55s ease;
}

.pd-slot.is-taunt-pulse {
  animation: pdTauntPulse 0.5s ease;
}

.pd-slot.is-rush {
  border-color: #e07040;
  box-shadow: 0 0 12px rgba(224, 112, 64, 0.35);
}

.pd-slot.is-rush-flash {
  animation: pdRushFlash 0.5s ease;
}

.pd-slot.is-ready-attack {
  box-shadow: 0 0 0 2px rgba(255, 180, 50, 0.55), 0 0 16px rgba(255, 140, 40, 0.35);
  transform: translateY(-2px);
}

.pd-slot.is-attacking {
  animation: pdAtkLunge 0.52s cubic-bezier(0.2, 0.85, 0.25, 1);
  z-index: 4;
  overflow: visible;
}

.pd-slot.is-spell.is-filled {
  border-color: rgba(160, 110, 220, 0.55);
}

.pd-slot.is-trap.is-filled {
  border-color: rgba(140, 100, 200, 0.55);
  box-shadow: 0 0 10px rgba(120, 80, 200, 0.25);
}

.pd-slot.is-trap-set {
  animation: pdTrapSet 0.4s ease;
}

.pd-slot.is-trap-flip {
  animation: pdTrapFlip 0.48s ease;
  z-index: 4;
}

.pd-slot.is-casting {
  animation: pdCastPulse 0.55s ease;
  z-index: 4;
  box-shadow: 0 0 0 2px rgba(160, 100, 255, 0.55), 0 0 18px rgba(140, 80, 255, 0.4);
}

.pd-slot.is-resolving {
  animation: pdDie 0.28s ease forwards;
}

@keyframes pdTrapSet {
  0% { transform: scale(0.85) rotate(-4deg); filter: brightness(0.7); }
  60% { transform: scale(1.05); filter: brightness(1.1); }
  100% { transform: none; filter: none; }
}

@keyframes pdTrapFlip {
  0% { transform: scaleX(1); }
  40% { transform: scaleX(0.08) scaleY(1.05); filter: brightness(1.4); }
  100% { transform: scaleX(1); filter: brightness(1.2); }
}

.pd-slot.is-hit {
  animation: pdSlotHit 0.5s ease;
}

.pd-slot.is-dying {
  animation: pdDie 0.55s ease forwards;
}

@keyframes pdPlacePulse {
  0%, 100% { outline-color: rgba(120, 220, 140, 0.55); }
  50% { outline-color: rgba(160, 255, 180, 0.95); }
}

@keyframes pdSummonPop {
  0% { transform: scale(0.55) translateY(12px); opacity: 0.2; }
  55% { transform: scale(1.08) translateY(-2px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes pdAtkLunge {
  0% { transform: translateY(0) scale(1); }
  28% { transform: translateY(4px) scale(0.97); }
  55% { transform: translateY(-18px) scale(1.06); filter: brightness(1.15); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes pdTauntFlash {
  0%, 100% { box-shadow: 0 0 0 1px rgba(240, 193, 74, 0.4), 0 0 12px rgba(240, 193, 74, 0.2); }
  40% { box-shadow: 0 0 0 3px rgba(240, 193, 74, 0.85), 0 0 22px rgba(240, 193, 74, 0.55); }
}

@keyframes pdTauntPulse {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.05); filter: brightness(1.12); }
}

@keyframes pdRushFlash {
  0%, 100% { filter: brightness(1); }
  35% { filter: brightness(1.35) saturate(1.2); box-shadow: 0 0 18px rgba(255, 100, 40, 0.55); }
}

@keyframes pdCastPulse {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.08); filter: brightness(1.2) hue-rotate(-10deg); }
}

@keyframes pdSlotHit {
  0%, 100% { filter: brightness(1); }
  35% { filter: brightness(1.5) saturate(0.5); box-shadow: 0 0 16px rgba(255, 80, 40, 0.5); }
}

@keyframes pdDie {
  to { opacity: 0; transform: scale(0.7); }
}

/* Board slot art: face crop */
.pd-slot img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 112%;
  height: 112%;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: center center;
  transform: translate(-50%, -50%);
}

/* Trap / card-back fills — same crop as faces so border matches Chico */
.pd-slot.is-trap img {
  width: 112%;
  height: 112%;
}

.pd-slot-stats {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  display: flex;
  justify-content: space-between;
  font-size: 0.58rem;
  font-weight: 800;
  font-family: var(--font-ui);
  color: #f8e6a8;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
  z-index: 1;
}

.pd-battle-line {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.35rem 0;
  position: relative;
}

.pd-battle-line::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 140, 30, 0.45), transparent);
}

.pd-battle-pill {
  position: relative;
  z-index: 1;
  padding: 0.28rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 160, 40, 0.4);
  background: #120805;
  color: #ffc14a;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.pd-battle-pill.is-pulse {
  animation: pdTurnPulse 0.42s ease;
}

@keyframes pdTurnPulse {
  0% { transform: scale(0.92); }
  45% { transform: scale(1.08); box-shadow: 0 0 16px rgba(255, 180, 50, 0.45); border-color: #ffc14a; }
  100% { transform: scale(1); }
}

.pd-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}

/* Attack / spell beams (Play #fxArrows vibe, simplified) */
.pd-fx-beam {
  position: absolute;
  width: 5px;
  transform: translateX(-50%);
  border-radius: 3px;
  pointer-events: none;
  transform-origin: bottom center;
  animation: pdBeamUp 0.5s cubic-bezier(0.2, 0.85, 0.25, 1) forwards;
}

.pd-fx-beam-atk {
  background: linear-gradient(0deg, transparent, #ff9a28 35%, #fff3c8 70%, transparent);
  box-shadow: 0 0 10px rgba(255, 140, 40, 0.65);
}

.pd-fx-beam-spell {
  background: linear-gradient(0deg, transparent, #c07bf0 30%, #f6ecff 70%, transparent);
  box-shadow: 0 0 12px rgba(160, 100, 255, 0.7);
  width: 6px;
}

@keyframes pdBeamUp {
  0% { opacity: 0; transform: translateX(-50%) scaleY(0.15); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scaleY(1); }
}

.pd-fx-dmg {
  position: absolute;
  transform: translate(-50%, 0);
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 0.85rem;
  color: #ffb040;
  text-shadow: 0 1px 3px #000, 0 0 10px rgba(255, 100, 30, 0.6);
  animation: pdDmgFloat 0.55s ease forwards;
  pointer-events: none;
  white-space: nowrap;
}

@keyframes pdDmgFloat {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(0.8); }
  25% { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -14px) scale(1); }
}

.pd-fx-burst {
  position: absolute;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 236, 255, 0.95) 0%, rgba(160, 100, 255, 0.45) 45%, transparent 70%);
  animation: pdBurst 0.5s ease forwards;
  pointer-events: none;
}

.pd-fx-burst-trap {
  background: radial-gradient(circle, rgba(255, 220, 140, 0.95) 0%, rgba(180, 80, 255, 0.5) 45%, transparent 70%);
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
}

.pd-fx-impact {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  border: 2px solid rgba(255, 180, 60, 0.85);
  box-shadow: 0 0 14px rgba(255, 120, 30, 0.55);
  animation: pdImpact 0.45s ease forwards;
  pointer-events: none;
}

.pd-fx-impact-spell {
  border-color: rgba(200, 140, 255, 0.9);
  box-shadow: 0 0 14px rgba(160, 100, 255, 0.55);
}

.pd-fx-ring {
  position: absolute;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 200, 80, 0.7);
  animation: pdRing 0.55s ease forwards;
  pointer-events: none;
}

.pd-fx-dmg-you {
  color: #ff7a55;
}

@keyframes pdBurst {
  0% { opacity: 0; transform: scale(0.3); }
  35% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.6); }
}

@keyframes pdImpact {
  0% { opacity: 0; transform: scale(0.4); }
  30% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(1.8); }
}

@keyframes pdRing {
  0% { opacity: 0.9; transform: scale(0.35); }
  100% { opacity: 0; transform: scale(1.7); }
}

@media (max-width: 520px) {
  .pd-row {
    max-width: 100%;
    gap: 0.22rem;
    min-height: 3.8rem;
  }
  .pd-creature-row,
  .pd-spell-row {
    min-height: 3.8rem;
  }
  .pd-hud { gap: 0.35rem; }
  .pd-piles { font-size: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pd-slot.is-attacking,
  .pd-slot.is-hit,
  .pd-slot.is-dying,
  .pd-slot.is-summoning,
  .pd-slot.is-place-ready,
  .pd-slot.is-casting,
  .pd-slot.is-taunt-flash,
  .pd-slot.is-taunt-pulse,
  .pd-slot.is-rush-flash,
  .pd-slot.is-trap-set,
  .pd-slot.is-trap-flip,
  .pd-hand-card.is-playing,
  .pd-hand-card.is-drawing,
  .pd-battle-pill.is-pulse,
  .pd-hero.is-hit .pd-hero-label,
  .pd-fx-beam,
  .pd-fx-dmg,
  .pd-fx-burst,
  .pd-fx-impact,
  .pd-fx-ring {
    animation: none;
  }
}

/* Title + pitch use shared .page-home section tokens; only margins here */
.page-home .legend-title {
  margin: 0 0 var(--section-title-to-lead);
}

.page-home .legend-pitch {
  margin: 0 0 var(--section-title-to-lead);
}

.legend-actions {
  display: none; /* Play Beta removed from Become a Legend */
}

/* ── Waitlist (Become a Legend) ── */
.waitlist {
  width: 100%;
  max-width: min(28rem, 92vw);
  margin: 0 0 var(--section-lead-to-media);
  display: grid;
  justify-items: stretch;
  gap: 0.55rem;
  box-sizing: border-box;
}

.waitlist-label {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e8d4a8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.waitlist-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  box-sizing: border-box;
}

.waitlist-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  height: 46px;
  min-height: 46px;
  max-height: 46px;
  padding: 0 0.95rem;
  margin: 0;
  border-radius: 12px;
  border: 2px solid rgba(90, 58, 20, 0.95);
  background: linear-gradient(180deg, #1a120c 0%, #0e0a07 100%);
  color: #f5ebd4;
  font-family: var(--font-body);
  font-weight: 500;
  /* 16px minimum — smaller fonts trigger iOS focus zoom and layout thrash */
  font-size: 16px;
  line-height: 1.2;
  box-sizing: border-box;
  box-shadow:
    0 2px 0 #0a0704,
    inset 0 1px 0 rgba(255, 220, 150, 0.06);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.waitlist-input::placeholder {
  color: rgba(200, 175, 130, 0.45);
}

.waitlist-input:focus {
  border-color: rgba(212, 160, 44, 0.85);
  box-shadow:
    0 0 0 3px rgba(212, 160, 44, 0.18),
    0 2px 0 #0a0704,
    inset 0 1px 0 rgba(255, 220, 150, 0.1);
}

.waitlist-btn {
  flex: 0 0 auto;
  height: 46px;
  min-height: 46px;
  max-height: 46px;
  padding: 0 1rem;
  margin: 0;
  border-radius: 12px;
  border: 2px solid #8a6420;
  background: linear-gradient(180deg, #f0d48a 0%, #d4a02c 45%, #a67820 100%);
  color: #1a1006;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow:
    0 3px 0 #4a300c,
    inset 0 1px 0 rgba(255, 245, 200, 0.55);
  transition: transform 0.12s ease, filter 0.12s ease;
}

.waitlist-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.waitlist-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #4a300c, inset 0 1px 0 rgba(255, 245, 200, 0.4);
}

.waitlist-btn:disabled {
  opacity: 0.65;
  cursor: wait;
  transform: none;
  filter: none;
}

.waitlist-status {
  margin: 0;
  min-height: 1.25em;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: #c9b090;
  text-align: center;
}

.waitlist-status.is-ok {
  color: #8fd48a;
}

.waitlist-status.is-err {
  color: #e08a78;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Stack field + CTA on narrow phones — fixed control heights (no flex-grow blowout) */
@media (max-width: 520px) {
  .waitlist {
    max-width: min(22rem, 92vw);
    padding-inline: 0;
  }

  .waitlist-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .waitlist-input {
    flex: 0 0 auto;
    width: 100%;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    font-size: 16px;
  }

  .waitlist-btn {
    flex: 0 0 auto;
    width: 100%;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    font-size: 0.75rem;
  }
}

/* Autoplay-only carousel: no arrows / no interactive dots chrome */
.card-showcase .home-arrow,
.card-showcase-stage .home-arrow {
  display: none !important;
  pointer-events: none !important;
}

.card-showcase-dots {
  pointer-events: none;
}

.card-showcase-stage {
  grid-template-columns: 1fr; /* was auto 1fr auto for arrows */
  gap: 0;
}

/* ── 4. Community (centered head + fluid photo marquee) ── */
.home-community-section {
  text-align: center;
  border-top: 1px solid rgba(60, 40, 20, 0.45);
  background: linear-gradient(180deg, #0c0805 0%, #100b07 50%, #0a0705 100%);
  padding-top: var(--section-pad-y);
  /* Extra bottom buffer after Follow on X before footer */
  padding-bottom: clamp(3.75rem, 9vw, 6rem);
  overflow: hidden;
}

.community-marquee {
  margin-top: 0;
}

.community-inner {
  max-width: var(--section-lead-max);
  margin-inline: auto;
  display: grid;
  justify-items: center;
  gap: var(--section-title-to-lead);
  margin-bottom: var(--section-lead-to-media);
  width: 100%;
}

.page-home .community-title {
  margin: 0;
}

.page-home .community-pitch {
  margin: 0;
}

.community-socials {
  margin-top: 0.35rem;
}

.community-social {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.15rem;
  min-height: 44px;
  border-radius: 8px;
  border: 2px solid #5a3a14;
  background: linear-gradient(180deg, #3a2818, #1e140e);
  color: var(--bone);
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
  box-shadow: 0 2px 0 #0e0a06, inset 0 1px 0 rgba(255, 210, 140, 0.08);
}

.community-social:hover {
  color: var(--gold-soft);
  border-color: var(--brass-edge, #a67c28);
}

/* Follow on X — sits under the community marquee, buffer before footer */
.community-follow-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--section-lead-to-media);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: 0.25rem;
}

/* X brand button (black plate + white mark) */
.btn-x-follow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.6rem 1.25rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #000;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.btn-x-follow:hover {
  background: #141414;
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
  transform: translateY(-1px);
}

.btn-x-follow:active {
  transform: translateY(0);
}

.btn-x-follow .x-logo {
  flex: none;
  display: block;
}

.btn-x-follow-sm {
  min-height: 38px;
  padding: 0.42rem 0.9rem;
  font-size: 0.82rem;
  gap: 0.4rem;
  border-radius: 8px;
}

.community-rail-wrap {
  overflow: hidden;
}

.community-rail {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.35rem;
  max-width: 1100px;
  margin-inline: auto;
}

/* Looping stage: prev2 | prev | center | next | next2 */
.community-track.community-stage,
.community-stage {
  position: relative;
  height: min(280px, 58vw);
  min-height: 200px;
  overflow: visible;
  display: block;
  padding: 0;
}

.community-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  appearance: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  width: min(240px, 52vw);
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 3px solid var(--wood-outer, #3a2412);
  background: #1a120c;
  line-height: 0;
  transform: translate(-50%, -50%);
  transition:
    transform 0.4s cubic-bezier(0.25, 0.8, 0.3, 1),
    opacity 0.35s ease,
    filter 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
  box-shadow:
    0 0 0 1px #0e0a06,
    0 8px 0 rgba(0, 0, 0, 0.2),
    0 12px 24px rgba(0, 0, 0, 0.4);
}

.community-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.03) saturate(0.92) sepia(0.06);
}

/* Center hero photo */
.community-slide.is-center {
  z-index: 5;
  opacity: 1;
  filter: none;
  transform: translate(-50%, -50%) scale(1.06);
  border-color: #a67c28;
  box-shadow:
    0 0 0 1px #0e0a06,
    0 12px 0 rgba(0, 0, 0, 0.25),
    0 18px 36px rgba(0, 0, 0, 0.5),
    0 0 0 2px rgba(212, 160, 44, 0.28);
}

/* Immediate neighbors */
.community-slide.is-prev {
  z-index: 3;
  opacity: 0.55;
  filter: brightness(0.7);
  transform: translate(calc(-50% - min(200px, 42vw)), -50%) scale(0.88);
}

.community-slide.is-next {
  z-index: 3;
  opacity: 0.55;
  filter: brightness(0.7);
  transform: translate(calc(-50% + min(200px, 42vw)), -50%) scale(0.88);
}

/* Outer peeks */
.community-slide.is-prev2 {
  z-index: 1;
  opacity: 0.28;
  filter: brightness(0.55);
  transform: translate(calc(-50% - min(360px, 72vw)), -50%) scale(0.78);
}

.community-slide.is-next2 {
  z-index: 1;
  opacity: 0.28;
  filter: brightness(0.55);
  transform: translate(calc(-50% + min(360px, 72vw)), -50%) scale(0.78);
}

.community-slide.is-prev:hover,
.community-slide.is-next:hover {
  opacity: 0.8;
  filter: brightness(0.85);
}

@media (max-width: 720px) {
  .community-stage {
    height: min(240px, 62vw);
  }

  .community-slide {
    width: min(200px, 56vw);
  }

  .community-slide.is-prev {
    transform: translate(calc(-50% - min(150px, 38vw)), -50%) scale(0.84);
  }

  .community-slide.is-next {
    transform: translate(calc(-50% + min(150px, 38vw)), -50%) scale(0.84);
  }

  .community-slide.is-prev2,
  .community-slide.is-next2 {
    opacity: 0.18;
  }

  .community-slide.is-prev2 {
    transform: translate(calc(-50% - min(280px, 70vw)), -50%) scale(0.72);
  }

  .community-slide.is-next2 {
    transform: translate(calc(-50% + min(280px, 70vw)), -50%) scale(0.72);
  }
}

@media (max-width: 420px) {
  .community-slide.is-prev2,
  .community-slide.is-next2 {
    display: none;
  }

  .community-slide.is-prev {
    transform: translate(calc(-50% - 38vw), -50%) scale(0.8);
    opacity: 0.4;
  }

  .community-slide.is-next {
    transform: translate(calc(-50% + 38vw), -50%) scale(0.8);
    opacity: 0.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .community-slide {
    transition: none;
  }
}

/* ── Responsive ── */
@media (max-width: 720px) {
  .showcase-actions,
  .legend-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .showcase-actions .btn,
  .legend-actions .btn {
    width: 100%;
  }

  .showcase-art {
    width: 100%;
  }

  .showcase-art-img {
    max-height: min(46vh, 400px);
  }

  .card-showcase {
    --azuki-card-w: min(168px, 42vw);
  }

  .card-showcase-stage,
  .card-showcase-viewport,
  .card-showcase-track,
  .azuki-track {
    min-height: var(--azuki-stage-h);
    height: var(--azuki-stage-h);
  }

  .azuki-slide {
    width: min(168px, 42vw);
  }

  /*
   * Mobile hero (same idea as desktop):
   *   • Pack pinned to fold
   *   • Lockup + blurb + Preorder sandwiched tight
   *   • That group centered in the band between header and pack
   *
   * CRITICAL: use ONLY svh — never dvh. iOS dynamic viewport height changes
   * while the URL bar shows/hides on scroll, which resizes the hero and
   * re-crops object-fit:cover / background-size:cover → looks like parallax.
   */
  .home-hero {
    height: calc(100svh - var(--nav-h) - env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(100svh - var(--nav-h) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: none !important;
    padding: 0;
    justify-content: stretch;
    align-items: stretch;
    overflow: hidden;
    background-image: none !important;
  }

  .hero-bg-img {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
  }

  .hero-swirl-bg {
    inset: 0;
    overflow: hidden;
  }

  .hero-stage {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    margin: 0;
    /* Reserve pack height so copy centers above cards, not over them (svh only) */
    padding: 0.35rem 0.75rem min(38svh, 340px);
    gap: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: none !important;
  }

  /* One tight sandwich: lockup → pitch → Preorder */
  .hero-copy,
  .hero-copy-sandwich {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: min(100%, 92vw);
    min-height: 0;
    gap: clamp(0.4rem, 1.5vh, 0.7rem);
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 3;
  }

  .hero-set-lockup {
    width: min(200px, 54vw);
    flex: 0 0 auto;
  }

  .hero-release {
    width: min(100%, 18rem);
    margin: 0;
    flex: 0 0 auto;
  }

  .hero-release-date {
    padding: 0.32rem 1.1rem 0.34rem;
  }

  .hero-release-date-inner {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
  }

  .hero-bleed-actions {
    width: auto;
    margin: 0;
    padding-bottom: 0;
    flex: 0 0 auto;
  }

  /* Pack art — lifted more; copy band unchanged */
  .hero-product {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3rem; /* higher off the fold; copy centering padding unchanged */
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0;
    align-self: stretch;
    -webkit-mask-image: linear-gradient(
      180deg,
      #000 0%,
      #000 78%,
      rgba(0, 0, 0, 0.85) 92%,
      rgba(0, 0, 0, 0.4) 98%,
      transparent 100%
    );
    mask-image: linear-gradient(
      180deg,
      #000 0%,
      #000 78%,
      rgba(0, 0, 0, 0.85) 92%,
      rgba(0, 0, 0, 0.4) 98%,
      transparent 100%
    );
  }

  .hero-product-img {
    display: block;
    width: min(100%, 460px);
    max-height: min(38svh, 340px);
    height: auto;
    margin: 0 auto;
    object-fit: contain;
    object-position: center bottom;
  }

  /* Compact pill — never full-bleed width on phones */
  .btn-preorder,
  .btn.btn-preorder {
    width: auto !important;
    max-width: none;
    min-width: 7.25rem;
    min-height: 36px !important;
    padding: 0.45rem 1.15rem !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.08em;
  }

  /* Keep gallery inside shared section pad; only shrink the long title to fit */
  .page-home .gallery-title-oneline {
    white-space: nowrap !important;
    max-width: none !important;
    font-size: clamp(1.15rem, 5.8vw, 1.85rem);
    margin: 0 0 var(--section-title-to-lead);
  }

  .page-home .gallery-lead {
    margin: 0 auto var(--section-lead-to-media);
  }
}

/* Short phones: still pin pack to fold; slightly smaller lockup/art */
@media (max-width: 720px) and (max-height: 700px) {
  .hero-set-lockup {
    width: min(168px, 48vw);
  }

  .hero-stage {
    padding-bottom: min(34svh, 280px);
  }

  .hero-product-img {
    max-height: min(34svh, 280px);
  }

  .hero-copy {
    gap: clamp(0.32rem, 1.2vh, 0.6rem);
  }

  .hero-copy-cta {
    gap: 0.32rem;
  }
}

@media (max-width: 420px) {
  .hero-set-lockup {
    width: min(160px, 52vw);
  }

  .hero-stage {
    padding-bottom: min(36svh, 270px);
  }

  .hero-product-img {
    max-height: min(36svh, 270px);
    width: min(100%, 100%);
  }

  .btn-preorder,
  .btn.btn-preorder {
    min-height: 34px !important;
    padding: 0.4rem 1rem !important;
    font-size: 0.68rem !important;
  }

  .page-home .gallery-title-oneline {
    font-size: clamp(1.1rem, 6.2vw, 1.55rem);
  }
}

/* Extra-tall phones: let pack art use more of the lower stage */
@media (max-width: 720px) and (min-height: 780px) {
  .hero-stage {
    padding-bottom: min(42svh, 380px);
  }

  .hero-product-img {
    max-height: min(42svh, 380px);
  }

  .hero-set-lockup {
    width: min(210px, 52vw);
  }
}

@media (max-width: 420px) {
  .card-showcase-stage .home-arrow {
    width: 40px;
    height: 40px;
  }

  /* Peek opacity is set inline by the slot carousel JS */

  .showcase-legends {
    font-size: clamp(2.8rem, 16vw, 3.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .azuki-track,
  .azuki-slide,
  .community-slide {
    transition: none !important;
  }
}

@media (min-width: 1100px) {
  .azuki-slide {
    width: 250px;
  }

  /* Keep stage height in lockstep with the wider desktop slides */
  .card-showcase {
    --azuki-card-w: 250px;
  }

  .card-showcase-stage,
  .card-showcase-viewport,
  .card-showcase-track,
  .azuki-track {
    min-height: var(--azuki-stage-h);
    height: var(--azuki-stage-h);
  }
}

/* Very small phones: slightly smaller cards + matching stage */
@media (max-width: 420px) {
  .card-showcase {
    --azuki-card-w: min(150px, 40vw);
  }

  .azuki-slide {
    width: min(150px, 40vw);
  }
}

/*
 * ════════════════════════════════════════════════════════════════
 * MOBILE HOME = 100% STATIC DOCUMENT SCROLL
 *
 * Meaning: when the user scrolls, EVERY pixel of the page moves
 * together. No fixed backgrounds, no sticky chrome, no parallax,
 * no filter/GPU layers lagging, no CSS translate on scroll.
 * translate3d(0,0,0) on the hero is FORBIDDEN (creates an iOS
 * independent scroll layer that looks like parallax).
 * ════════════════════════════════════════════════════════════════
 */
@media (max-width: 900px), (hover: none), (pointer: coarse) {
  html {
    scroll-behavior: auto !important;
  }

  html:has(body.page-home),
  body.page-home {
    background: #050403 !important;
    background-image: none !important;
    background-attachment: scroll !important;
    scroll-behavior: auto !important;
    /* Normal document scroll only */
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: auto !important;
  }

  /* Kill every fixed room layer (base.css paints these sitewide) */
  html:has(body.page-home)::before,
  html:has(body.page-home)::after,
  body.page-home::before,
  body.page-home::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    background: none !important;
    background-image: none !important;
    position: static !important;
    pointer-events: none !important;
  }

  /* Header scrolls away with the page — sticky is relative motion */
  body.page-home .site-header,
  html body.page-home header.site-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: #1e140e !important;
    transform: none !important;
    will-change: auto !important;
    z-index: 10 !important;
  }

  body.page-home .site-header::before,
  body.page-home .site-header::after {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
    filter: none !important;
  }

  /* Nothing on the homepage may use fixed attachment */
  body.page-home,
  body.page-home * {
    background-attachment: scroll !important;
  }

  /*
   * Hero height LOCKED to small viewport (svh) so it never resizes mid-scroll.
   * Art is a normal <img.hero-bg-img>, not CSS background (cover re-crop bug).
   */
  body.page-home .home-hero {
    height: calc(100svh - var(--nav-h) - env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(100svh - var(--nav-h) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: none !important;
    background-color: #050403 !important;
    background-image: none !important;
    background-attachment: scroll !important;
    -webkit-transform: none !important;
    transform: none !important;
    translate: none !important;
    will-change: auto !important;
    filter: none !important;
    -webkit-filter: none !important;
    isolation: auto !important;
    contain: none !important;
    perspective: none !important;
    overflow: hidden !important;
  }

  body.page-home .hero-bg-img {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    -webkit-transform: none !important;
    transform: none !important;
    translate: none !important;
    will-change: auto !important;
    filter: none !important;
    -webkit-filter: none !important;
    animation: none !important;
    transition: none !important;
    /* Prevent iOS from promoting this img to a separate scroll layer */
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    pointer-events: none !important;
  }

  body.page-home .hero-swirl-bg,
  body.page-home .hero-swirl-bg::before,
  body.page-home .hero-swirl-bg::after,
  body.page-home .hero-stage,
  body.page-home .hero-copy,
  body.page-home .hero-copy-brand,
  body.page-home .hero-copy-cta,
  body.page-home .hero-set-lockup,
  body.page-home .hero-product,
  body.page-home .hero-product-img,
  body.page-home .hero-blurb,
  body.page-home .hero-bleed-actions,
  body.page-home .btn-preorder {
    -webkit-transform: none !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
    will-change: auto !important;
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    transition: none !important;
    perspective: none !important;
  }

  body.page-home .hero-product {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* Freeze marquees — continuous motion is not allowed on mobile home */
  body.page-home .marquee-track,
  body.page-home .community-marquee-track,
  body.page-home .card-marquee .marquee-track {
    animation: none !important;
    -webkit-transform: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  /*
   * Card carousel MUST stay fluid on mobile (same 820ms ease as desktop).
   * Earlier static-scroll pass set transition:none here and made slides jump.
   * Hero stays static; only the intentional gallery animation is restored.
   */
  body.page-home .azuki-slide {
    will-change: transform, opacity !important;
    transition:
      transform var(--carousel-ms, 820ms) var(--carousel-ease, cubic-bezier(0.33, 0, 0.2, 1)) !important,
      opacity var(--carousel-ms, 820ms) var(--carousel-ease, cubic-bezier(0.33, 0, 0.2, 1)) !important;
  }

  body.page-home .azuki-slide-frame {
    transition: box-shadow var(--carousel-ms, 820ms) var(--carousel-ease, cubic-bezier(0.33, 0, 0.2, 1)) !important;
  }
}