/* ── RESET & BASE ── */
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --red:    #C01228;
  --red-m:  #D4122E;
  --bg:     #080809;
  --card-bg:#0d0d10;
  --serif:  'Playfair Display', Georgia, serif;
  --sans:   'Plus Jakarta Sans', sans-serif;

  /* Motion curves — Emil-style */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);   /* strong ease-out, expressive */
  --ease-snap: cubic-bezier(0.23, 1, 0.32, 1);  /* snappy, for press/hover */
  --ease-shine:cubic-bezier(0.65, 0, 0.35, 1);  /* deliberate sweep */
}

html, body {
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-family: var(--sans);
  color: #fff;
  overflow-x: hidden;
}

/* ── SCENE (fixed background) ── */
.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.scene-grid { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.065) 1px, transparent 1px); background-size: 40px 40px; }
.scene-glow { position: absolute; top: -200px; left: 50%; transform: translateX(-62%); width: 900px; height: 600px; background: radial-gradient(ellipse at center, rgba(192,18,40,0.34) 0%, rgba(192,18,40,0.10) 38%, transparent 72%); filter: blur(2px); }
.scene-vignette { position: absolute; inset: 0; background: linear-gradient(to right, rgba(8,8,9,0.6) 0%, transparent 12%, transparent 88%, rgba(8,8,9,0.6) 100%), linear-gradient(to bottom, transparent 50%, rgba(8,8,9,0.98) 100%); }
.scene-grain { position: absolute; inset: -50%; width: 200%; height: 200%; opacity: 0.036; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23g)'/%3E%3C/svg%3E"); animation: grain 8s steps(10) infinite; }

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-2%, -3%); }
  20% { transform: translate(3%, 1%); }
  30% { transform: translate(-1%, 4%); }
  40% { transform: translate(4%, -1%); }
  50% { transform: translate(-3%, 2%); }
  60% { transform: translate(1%, -4%); }
  70% { transform: translate(-4%, 3%); }
  80% { transform: translate(2%, -2%); }
  90% { transform: translate(-2%, 4%); }
}

/* ── REVEAL ANIMATION ── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.reveal.visible { opacity: 1; transform: none; }
.d1 { transition-delay: 40ms; }
.d2 { transition-delay: 90ms; }
.d3 { transition-delay: 140ms; }
.d4 { transition-delay: 190ms; }

/* ── SHARED SECTION LABEL ── */
.section-label { display: flex; align-items: center; gap: 14px; margin-bottom: 52px; justify-content: center; }
.lline { flex: 1; max-width: 120px; height: 1px; background: linear-gradient(to right, transparent, rgba(255,255,255,0.1)); }
.lline.r { background: linear-gradient(to left, transparent, rgba(255,255,255,0.1)); }
.ldot { width: 4px; height: 4px; border-radius: 50%; background: var(--red); opacity: 0.7; }
.ltxt { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.25); }

/* ── SHARED FADE-UP ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── ACCESSIBILITY: focus visible ── */
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--red-m);
  outline-offset: 3px;
}

/* ── ACCESSIBILITY: reduced motion ──
   Respeta usuarios con vestibular sensitivity (mareo, vértigo).
   Desactiva grain, reveals y animaciones de larga duración. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .scene-grain { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .tbar { transition: none !important; width: var(--pct, 100%) !important; }
}