/* Escape Run — Vitrine / Teaser
   Palette et typo alignées sur le design system de l'app :
   - Fond noir #000, carte #292929, bordure #3a3a3a
   - Accent vert fluo #D6FF3F
   - Titres : Akzidenz Grotesk Bold (fallback Space Grotesk)
   - Texte  : Open Sauce Sans (fallback DM Sans) */

@font-face {
  font-family: "Akzidenz Grotesk BE";
  src: url("fonts/AkzidenzGroteskBE-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Akzidenz Grotesk BE";
  src: url("fonts/AkzidenzGroteskBE-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sauce Sans";
  src: url("fonts/OpenSauceSans-Regular.otf") format("opentype"),
       url("fonts/OpenSauceSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sauce Sans";
  src: url("fonts/OpenSauceSans-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sauce Sans";
  src: url("fonts/OpenSauceSans-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #000000;
  --surface: #0a0a0a;
  --card: #292929;
  --border: #3a3a3a;
  --text: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.55);
  --text-faint: rgba(255, 255, 255, 0.35);
  --accent: #d6ff3f;
  --title-font: "Akzidenz Grotesk BE", "Space Grotesk", system-ui, sans-serif;
  --body-font: "Open Sauce Sans", "DM Sans", system-ui, sans-serif;
  --tracking: -0.06em;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body-font);
  letter-spacing: var(--tracking);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background-image:
    radial-gradient(1200px 600px at 50% 0%, rgba(214, 255, 63, 0.06), transparent 60%),
    radial-gradient(900px 500px at 50% 100%, rgba(214, 255, 63, 0.04), transparent 60%);
}

/* Curtain reveal — two halves split horizontally on load */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}
.curtain span {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background: #000;
  will-change: transform;
  animation: curtain 1.1s cubic-bezier(.77,0,.18,1) 0.15s forwards;
}
.curtain span:first-child { top: 0; }
.curtain span:last-child  { bottom: 0; animation-name: curtainDown; }

@keyframes curtain     { to { transform: translateY(-100%); } }
@keyframes curtainDown { to { transform: translateY(100%); } }

/* Subtle film grain */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  z-index: 1;
}

/* Header */
.top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
}

.brand {
  font-family: var(--title-font);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: var(--tracking);
  color: var(--accent);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--title-font);
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(41, 41, 41, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(214, 255, 63, 0.8);
  animation: pulse 2.2s ease-out infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(214, 255, 63, 0.75); }
  70%  { box-shadow: 0 0 0 10px rgba(214, 255, 63, 0); }
  100% { box-shadow: 0 0 0 0 rgba(214, 255, 63, 0); }
}

/* Stage */
.stage {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 24px 24px 32px;
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

.eyebrow {
  font-family: var(--title-font);
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 32px;
  letter-spacing: 0.04em;
}

.headline {
  font-family: var(--title-font);
  font-weight: 700;
  font-size: clamp(52px, 14vw, 148px);
  line-height: 0.92;
  letter-spacing: var(--tracking);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.headline .line {
  display: block;
  padding-bottom: 0.06em;
}
.headline .inner {
  display: inline-block;
  will-change: transform, opacity, filter, letter-spacing;
}
.headline .accent { color: var(--accent); }

/* 1. COUREZ — one continuous glide from the left, single easing */
.headline .run { overflow: hidden; }
.headline .run .inner {
  opacity: 0;
  animation: runIn 1.5s cubic-bezier(.16,1,.3,1) 1.2s forwards;
}
@keyframes runIn {
  from { transform: translateX(-115%) skewX(-14deg); filter: blur(16px); opacity: 0; }
  to   { transform: translateX(0)     skewX(0);      filter: blur(0);    opacity: 1; }
}

/* 2. RÉSOLVEZ — scramble / decode (driven by JS) */
.headline .solve .inner {
  opacity: 0;
  transition: opacity 0.3s ease;
  font-variant-ligatures: none;
}

/* 3. EXPLOREZ — pixel / dither reveal (driven by JS building a tile mask) */
.headline .explore { position: relative; }
.headline .explore .inner {
  opacity: 0;
}
.headline .explore.ready .inner { opacity: 1; }

.pixel-mask {
  position: absolute;
  pointer-events: none;
  z-index: 3;
}
.pixel-mask span {
  position: absolute;
  background: var(--bg);
  transition: opacity 0.5s cubic-bezier(.4,.7,.2,1);
}
@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

.eyebrow {
  opacity: 0;
  transform: translateY(8px);
  animation: rise 0.9s 1.0s ease forwards;
}

.lede {
  max-width: 520px;
  margin: 36px auto 0;
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-dim);
  opacity: 0;
  transform: translateY(10px);
  animation: rise 1s 4.9s ease forwards;
}

/* Notify form */
.notify {
  margin-top: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  width: min(480px, 100%);
  opacity: 0;
  transform: translateY(10px);
  animation: rise 1s 5.15s ease forwards;
  transition: border-color 0.2s ease;
}
.notify:focus-within { border-color: rgba(214, 255, 63, 0.5); }

.notify input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text);
  font-family: var(--body-font);
  font-size: 15px;
  letter-spacing: var(--tracking);
  padding: 14px 4px;
}
.notify input::placeholder { color: var(--text-faint); }

.notify button {
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: var(--tracking);
  color: #000;
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  padding: 14px 22px;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.notify button:hover { filter: brightness(1.05); }
.notify button:active { transform: scale(0.97); }
.notify.sent { border-color: rgba(214, 255, 63, 0.5); }
.notify.sent button { background: transparent; color: var(--accent); }

.fineprint {
  margin-top: 18px;
  font-size: 12px;
  color: var(--text-faint);
  opacity: 0;
  transform: translateY(8px);
  animation: rise 1s 5.4s ease forwards;
}

.top .brand, .top .status {
  opacity: 0;
  transform: translateY(-8px);
  animation: rise 0.9s 1.0s ease forwards;
}
.top .status { animation-delay: 1.1s; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Footer */
.bottom {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  font-family: var(--title-font);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.bottom .sep { opacity: 0.5; }

/* Responsive tightening — everything must fit 100svh, no scroll */
@media (max-width: 720px) {
  .top { padding: 14px 18px; }
  .brand { font-size: 13px; }
  .status { font-size: 10px; padding: 6px 11px; gap: 7px; }
  .stage { padding: 12px 18px 16px; }
  .eyebrow { margin: 0 0 16px; font-size: 10px; }
  .headline { font-size: clamp(42px, 14.5vw, 84px); line-height: 0.95; gap: 0; }
  .lede { font-size: 14px; line-height: 1.5; margin-top: 22px; padding: 0 4px; }
  .notify { margin-top: 22px; flex-direction: column; border-radius: 18px; padding: 8px; gap: 8px; width: 100%; }
  .notify input { width: 100%; text-align: center; padding: 13px; font-size: 16px; }
  .notify button { width: 100%; padding: 14px; }
  .fineprint { margin-top: 12px; font-size: 11px; padding: 0 16px; }
  .bottom { padding: 12px 16px; font-size: 10px; }
}

/* Short viewports — drop optional elements */
@media (max-height: 720px) and (max-width: 720px) {
  .eyebrow { margin-bottom: 12px; }
  .headline { font-size: clamp(38px, 13vw, 72px); }
  .lede { margin-top: 18px; }
  .notify { margin-top: 18px; }
  .fineprint { display: none; }
}

@media (max-height: 620px) {
  .eyebrow { display: none; }
  .lede { margin-top: 14px; font-size: 13px; }
  .notify { margin-top: 14px; }
}

@media (max-width: 380px) {
  .top { padding: 12px 14px; }
  .status span:not(.dot) { display: none; }
  .status { padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .headline .explore .inner { opacity: 1; }
  .pixel-mask { display: none; }
  .headline .inner,
  .headline .run .inner,
  .headline .solve .inner,
  .headline .explore .inner,
  .headline .line,
  .lede, .notify, .fineprint, .eyebrow,
  .top .brand, .top .status {
    opacity: 1;
    transform: none;
    animation: none;
    filter: none;
    letter-spacing: var(--tracking);
  }
  .curtain span { animation: none; transform: translateY(-100%); }
  .curtain span:last-child { transform: translateY(100%); }
  .dot { animation: none; }
}