/* Exhibition v2 — design tokens isolated from the rest of the app.
   Fonts are loaded from the Tilda CDN (same URLs as the legacy CSS).
   Colors mirror what the original landing uses. */

@font-face {
  font-family: 'MTSWide';
  src: url('https://static.tildacdn.com/tild6534-3130-4335-a565-306166356633/MTSWide-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MTSWide';
  src: url('https://static.tildacdn.com/tild3531-6231-4838-b934-653434646338/MTSWide-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PlatformLC';
  src: url('https://static.tildacdn.com/tild3461-6530-4131-b766-313839363331/PlatformLC-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PlatformLC';
  src: url('https://static.tildacdn.com/tild3731-6266-4339-a438-303162316664/PlatformLC-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

.exhibition {
  --ex-bg: #f5f0e8;          /* warm cream paper background */
  --ex-bg-card: #ffffff;
  --ex-bg-dark: #171717;
  --ex-text: #171717;
  --ex-text-muted: #5b5b5b;
  --ex-text-faint: #a1a1a1;
  --ex-accent: #e91c28;       /* primary red — buttons, accents */
  --ex-accent-hover: #bf1822;
  --ex-coral: #fa876b;        /* secondary warm */
  --ex-border: #e6dfd2;

  background: var(--ex-bg);
  color: var(--ex-text);
  font-family: 'PlatformLC', system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.exhibition .ex-display {
  font-family: 'MTSWide', system-ui, sans-serif;
  letter-spacing: -0.01em;
}

.exhibition .ex-body {
  font-family: 'PlatformLC', system-ui, sans-serif;
  font-weight: 400;
}

/* Fade-in on scroll — class hooks driven by <FadeInSections /> client component.
   No styles apply until JS adds .ex-fade-target, so no-JS users see the page
   normally (no FOUC). */
.exhibition .ex-fade-target {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.exhibition .ex-fade-target.ex-fade-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .exhibition .ex-fade-target {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ─── Hero intro animations (pure CSS, no JS dependency) ───
   Rendered with the first paint — no flash-of-unanimated then jump
   when JS loads. Transform-only to avoid layout thrash. */
@keyframes ex-hero-image-in   { from { transform: translateX(30%); } }
@keyframes ex-hero-kicker-in  { from { transform: translateY(-50px) rotate(8deg); } }
@keyframes ex-hero-wordmark-in{ from { transform: scale(0.92); } }
@keyframes ex-hero-sticker-in { from { transform: scale(0.5) rotate(-12deg); } }
@keyframes ex-hero-fade-up    { from { transform: translateY(20px); } }
@keyframes ex-hero-band-in    { from { transform: translateY(100%); } }

[data-hero] [data-anim="image"]    { animation: ex-hero-image-in    1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s    both; }
[data-hero] [data-anim="kicker"]   { animation: ex-hero-kicker-in   0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; }
[data-hero] [data-anim="wordmark"] { animation: ex-hero-wordmark-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.4s  both; }
[data-hero] [data-anim="sticker"]  { animation: ex-hero-sticker-in  0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.75s both; }
[data-hero] [data-anim="tagline"]  { animation: ex-hero-fade-up     0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.95s both; }
[data-hero] [data-anim="cta"]      { animation: ex-hero-fade-up     0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.05s both; }
[data-hero] [data-anim="band"]     { animation: ex-hero-band-in     0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s  both; }

@media (prefers-reduced-motion: reduce) {
  [data-hero] [data-anim] { animation: none !important; }
}

/* ── Background noise overlay (Nicoff-style) ── */
/* Subtle film-grain texture applied as a fixed overlay across the whole
   exhibition wrapper. SVG turbulence via data URI = zero network requests.
   Pointer-events disabled so clicks pass through to underlying content. */
.exhibition {
  position: relative;
}
.exhibition::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  mix-blend-mode: overlay;
}

/* Subtle pulse for the hero CTA — gentle scale + shadow throb so it draws
   the eye without being distracting. Honors prefers-reduced-motion. */
@keyframes ex-cta-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 8px 20px -8px rgba(233, 28, 40, 0.5);
  }
  50% {
    transform: scale(1.035);
    box-shadow: 0 12px 28px -8px rgba(233, 28, 40, 0.65);
  }
}
.exhibition .ex-cta-pulse {
  animation: ex-cta-pulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .exhibition .ex-cta-pulse {
    animation: none;
  }
}