/*
 * Readability studies for the A2 crossover hero.
 * Loaded only by the two comparison pages; the original A2 page is untouched.
 */

.hero-readability-variant {
  --hero-paper: #f6f0e5;
  --hero-paper-soft: #e9dfcf;
  --hero-ink: #11100e;
}

.hero-readability-variant .hero-cross-type::before,
.hero-readability-variant .hero-cross-type::after {
  position: absolute;
  z-index: 0;
  content: "";
  pointer-events: none;
}

.hero-readability-variant .hero-cross-artist,
.hero-readability-variant .hero-cross-exhibition,
.hero-readability-variant .hero-cross-meta {
  position: relative;
}

.hero-readability-variant .hero-cross-exhibition {
  position: absolute;
}

.hero-readability-variant .hero-cross-meta {
  position: absolute;
  isolation: isolate;
}

.hero-readability-variant .hero-cross-meta::before {
  position: absolute;
  inset: -13px -34px -13px -12px;
  z-index: -1;
  content: "";
  pointer-events: none;
}

/*
 * Variant 01 — Paper haze
 * A frameless, uneven wash of warm paper keeps the poster-like black type.
 */
.variant-paper-haze .hero-overlay {
  opacity: 0.36;
}

.variant-paper-haze .hero-cross-type::before {
  inset: -3% -7% -4% -8%;
  background:
    radial-gradient(ellipse 43% 27% at 43% 52%, rgba(246, 240, 229, 0.96) 0 45%, rgba(246, 240, 229, 0.72) 68%, transparent 100%),
    radial-gradient(ellipse 17% 48% at 61% 47%, rgba(233, 223, 207, 0.9) 0 42%, rgba(246, 240, 229, 0.62) 69%, transparent 100%),
    radial-gradient(ellipse 24% 22% at 73% 61%, rgba(246, 240, 229, 0.72) 0 38%, rgba(246, 240, 229, 0.24) 68%, transparent 100%),
    radial-gradient(ellipse 15% 18% at 18% 63%, rgba(246, 240, 229, 0.66) 0 34%, rgba(246, 240, 229, 0.2) 66%, transparent 100%);
  filter: blur(clamp(6px, 0.7vw, 11px));
  opacity: 0.96;
  transform: rotate(-1.8deg) scale(1.02, 0.98);
}

.variant-paper-haze .hero-cross-type::after {
  inset: 2% -2% 3% -3%;
  background:
    repeating-linear-gradient(14deg, rgba(92, 75, 46, 0.08) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(101deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 7px);
  mask-image:
    radial-gradient(ellipse 40% 25% at 42% 52%, #000 0 46%, rgba(0, 0, 0, 0.64) 70%, transparent 100%),
    radial-gradient(ellipse 15% 44% at 61% 47%, #000 0 43%, rgba(0, 0, 0, 0.58) 70%, transparent 100%);
  mix-blend-mode: multiply;
  opacity: 0.22;
  transform: rotate(-1.4deg);
}

.variant-paper-haze .hero-cross-artist {
  color: #171511;
  text-shadow: 0 1px 0 rgba(255, 253, 248, 0.34);
}

.variant-paper-haze .hero-cross-exhibition {
  color: rgba(246, 240, 229, 0.2);
  -webkit-text-stroke-color: #765f2e;
  -webkit-text-stroke-width: clamp(1.2px, 0.014em, 2.4px);
  filter: drop-shadow(0 1px 0 rgba(255, 253, 248, 0.72));
}

.variant-paper-haze .hero-cross-kana {
  -webkit-text-stroke-width: 1.2px;
}

.variant-paper-haze .hero-cross-meta::before {
  background: radial-gradient(ellipse at 18% 50%, rgba(246, 240, 229, 0.94) 0%, rgba(246, 240, 229, 0.68) 44%, rgba(246, 240, 229, 0.18) 72%, transparent 100%);
  filter: blur(5px);
  transform: skewX(-5deg);
}

/*
 * Variant 02 — Sumi veil
 * Asymmetric ink blooms create a dark stage for warm-white crossover type.
 */
.variant-sumi-veil .hero-overlay {
  opacity: 0.34;
}

.variant-sumi-veil .hero-cross-type::before {
  inset: -4% -8% -5% -9%;
  background:
    radial-gradient(ellipse 44% 28% at 42% 52%, rgba(10, 9, 8, 0.98) 0 47%, rgba(14, 13, 11, 0.82) 69%, transparent 100%),
    radial-gradient(ellipse 18% 49% at 61% 47%, rgba(8, 8, 7, 0.96) 0 44%, rgba(13, 12, 11, 0.76) 70%, transparent 100%),
    radial-gradient(ellipse 24% 23% at 74% 62%, rgba(14, 13, 11, 0.82) 0 40%, rgba(10, 9, 8, 0.28) 69%, transparent 100%),
    radial-gradient(ellipse 16% 18% at 17% 64%, rgba(8, 8, 7, 0.74) 0 38%, rgba(10, 9, 8, 0.22) 67%, transparent 100%);
  filter: blur(clamp(5px, 0.65vw, 10px)) contrast(1.08);
  mix-blend-mode: multiply;
  opacity: 0.96;
  transform: rotate(-2.2deg) scale(1.02, 0.98);
}

.variant-sumi-veil .hero-cross-type::after {
  inset: 1% -3% 2% -4%;
  background:
    radial-gradient(circle at 7% 34%, rgba(16, 15, 13, 0.6) 0 1.2%, transparent 2.3%),
    radial-gradient(circle at 13% 71%, rgba(9, 9, 8, 0.7) 0 0.9%, transparent 2%),
    radial-gradient(circle at 86% 25%, rgba(13, 12, 11, 0.62) 0 1.1%, transparent 2.2%),
    radial-gradient(circle at 94% 67%, rgba(8, 8, 7, 0.56) 0 0.8%, transparent 1.9%),
    repeating-linear-gradient(8deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 6px);
  mask-image:
    radial-gradient(ellipse 41% 26% at 42% 52%, #000 0 47%, rgba(0, 0, 0, 0.72) 70%, transparent 100%),
    radial-gradient(ellipse 16% 45% at 61% 47%, #000 0 44%, rgba(0, 0, 0, 0.66) 70%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0.7;
  transform: rotate(1.6deg);
}

.variant-sumi-veil .hero-cross-artist {
  color: var(--hero-paper);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16),
    0 9px 30px rgba(0, 0, 0, 0.22);
}

.variant-sumi-veil .hero-cross-exhibition {
  color: rgba(246, 240, 229, 0.045);
  -webkit-text-stroke-color: rgba(246, 240, 229, 0.78);
  -webkit-text-stroke-width: clamp(1.2px, 0.014em, 2.4px);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.variant-sumi-veil .hero-cross-kana {
  -webkit-text-stroke-color: rgba(246, 240, 229, 0.9);
  -webkit-text-stroke-width: 1.2px;
}

.variant-sumi-veil .hero-cross-meta {
  border-left-color: rgba(246, 240, 229, 0.76);
  color: var(--hero-paper);
}

.variant-sumi-veil .hero-cross-meta::before {
  background: radial-gradient(ellipse at 18% 50%, rgba(13, 12, 11, 0.92) 0%, rgba(13, 12, 11, 0.68) 44%, rgba(13, 12, 11, 0.2) 72%, transparent 100%);
  filter: blur(5px);
  transform: skewX(-5deg);
}

.variant-sumi-veil .hero-cross-label {
  color: rgba(246, 240, 229, 0.7);
}

.variant-sumi-veil .hero-cross-meta .hero-copy {
  color: var(--hero-paper);
}

@media (max-width: 759px) {
  .variant-paper-haze .hero-cross-type::before {
    inset: 2% -25% 1% -27%;
    background:
      radial-gradient(ellipse 43% 25% at 42% 51%, rgba(246, 240, 229, 0.98) 0 46%, rgba(246, 240, 229, 0.74) 70%, transparent 100%),
      radial-gradient(ellipse 19% 47% at 61% 47%, rgba(233, 223, 207, 0.92) 0 44%, rgba(246, 240, 229, 0.6) 70%, transparent 100%),
      radial-gradient(ellipse 24% 20% at 73% 61%, rgba(246, 240, 229, 0.68) 0 38%, rgba(246, 240, 229, 0.18) 68%, transparent 100%);
    transform: rotate(-3.2deg) scale(1.02, 0.96);
  }

  .variant-paper-haze .hero-cross-type::after {
    inset: 8% -17% 7% -19%;
  }

  .variant-sumi-veil .hero-cross-type::before {
    inset: 1% -26% 0 -28%;
    background:
      radial-gradient(ellipse 44% 26% at 42% 51%, rgba(9, 9, 8, 0.98) 0 47%, rgba(14, 13, 11, 0.82) 70%, transparent 100%),
      radial-gradient(ellipse 19% 48% at 61% 47%, rgba(8, 8, 7, 0.97) 0 45%, rgba(12, 11, 10, 0.72) 70%, transparent 100%),
      radial-gradient(ellipse 25% 21% at 74% 61%, rgba(14, 13, 11, 0.76) 0 40%, rgba(10, 9, 8, 0.2) 69%, transparent 100%);
    transform: rotate(-3.4deg) scale(1.02, 0.96);
  }

  .variant-sumi-veil .hero-cross-type::after {
    inset: 7% -18% 6% -20%;
  }

  .hero-readability-variant .hero-cross-meta::before {
    inset: -11px -22px -11px -10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-readability-variant .hero-cross-type::before,
  .hero-readability-variant .hero-cross-type::after {
    animation: none;
  }
}