/* ============================================================
   GLOBAL — reset + база + fullscreen-каркас сцени.
   Один екран у viewport в один момент. Без вертикального скролу.
   ============================================================ */

@import "./tokens.css";
@import "./motion.css";

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  overflow: hidden; /* без лендинг-скролу — сцени повноекранні */
  overscroll-behavior: none;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--body-size);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* App-shell: сцена займає рівно viewport, з підтримкою mobile (dvh). */
#app {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
}

.stage {
  position: absolute;
  inset: 0;
  z-index: var(--z-scene);
}

/* Кожна сцена монтується у слот, який заповнює екран. */
.scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--sp-6);
  background: var(--bg);
  color: var(--fg);
}

/* Типографіка editorial за замовчуванням (сцена може перевизначати). */
.scene h1,
.scene .display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--title-size);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* Базова «жива» кнопка. Кожна сцена робить СВІЙ спосіб переходу —
   ця кнопка лише дефолт для привітань/службових екранів. */
.btn {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-400);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: var(--border-2) solid var(--c-ink-900);
  border-radius: var(--btn-radius);
  padding: var(--sp-3) var(--sp-6);
  cursor: pointer;
  box-shadow: var(--shadow-hard);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--c-ink-900); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--c-ink-900); }

/* Уніфікований фокус — важливо для accessibility. */
:where(a, button, [tabindex], input, select, textarea):focus-visible {
  outline: var(--border-3) solid var(--focus-ring);
  outline-offset: 2px;
}

/* Desktop-only gate: телефон не бачить жодної сцени, тільки заглушку. */
.desktop-blocker {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: none;
  place-items: center;
  padding: clamp(24px, 6vw, 64px);
  overflow: hidden;
  color: var(--c-paper-100);
  background:
    linear-gradient(90deg, rgba(255, 46, 154, .26) 0 30%, transparent 30%),
    linear-gradient(90deg, rgba(198, 255, 46, .09) 1px, transparent 1px) 0 0 / 54px 54px,
    linear-gradient(0deg, rgba(20, 240, 255, .06) 1px, transparent 1px) 0 0 / 54px 54px,
    radial-gradient(circle at 22% 20%, rgba(255, 46, 154, .38), transparent 34%),
    #07040d;
}

.desktop-blocker::before {
  content: "";
  position: absolute;
  inset: 20px;
  border: 4px solid rgba(255, 243, 215, .24);
  box-shadow: 14px 14px 0 rgba(20, 240, 255, .38);
  pointer-events: none;
}

.desktop-blocker__panel {
  position: relative;
  width: min(760px, calc(100vw - 48px));
  padding: clamp(28px, 7vw, 54px);
  background: rgba(7, 4, 13, .9);
  border: 4px solid var(--c-acid-lime);
  box-shadow: 14px 14px 0 var(--c-acid-magenta), 24px 24px 0 var(--c-acid-cyan);
  transform: rotate(-1deg);
}

.desktop-blocker__kicker,
.desktop-blocker__panel span {
  font-family: var(--font-mono);
  font-size: clamp(.72rem, 2.8vw, .9rem);
  font-weight: var(--fw-black);
  letter-spacing: .26em;
  text-transform: uppercase;
}

.desktop-blocker__kicker {
  display: inline-block;
  padding: .7em .9em;
  color: var(--c-ink-900);
  background: var(--c-acid-cyan);
  border: 3px solid var(--c-ink-900);
  box-shadow: 7px 7px 0 var(--c-acid-magenta);
}

.desktop-blocker__panel h1 {
  margin-top: clamp(22px, 5vw, 34px);
  max-width: 8ch;
  font-family: var(--font-display);
  font-size: clamp(2.65rem, 12.5vw, 6.2rem);
  font-weight: var(--fw-black);
  line-height: .82;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 7px 7px 0 var(--c-acid-magenta);
  overflow-wrap: anywhere;
}

.desktop-blocker__panel p:not(.desktop-blocker__kicker) {
  margin-top: clamp(18px, 4vw, 26px);
  max-width: 34rem;
  font-size: clamp(1rem, 4vw, 1.2rem);
  font-weight: 850;
  line-height: 1.38;
  color: rgba(255, 243, 215, .82);
}

.desktop-blocker__panel span {
  display: inline-block;
  margin-top: clamp(22px, 5vw, 34px);
  padding: .72em .9em;
  color: var(--c-ink-900);
  background: var(--c-acid-lime);
  border: 3px solid var(--c-ink-900);
  box-shadow: 7px 7px 0 var(--c-acid-cyan);
}

body.mobile-blocked #app,
body.mobile-blocked .stage,
body.mobile-blocked .devnav {
  display: none !important;
}

body.mobile-blocked .desktop-blocker {
  display: grid;
}

@media (max-width: 1023px),
       (max-height: 620px),
       ((pointer: coarse) and (max-width: 1180px)),
       ((orientation: portrait) and (max-width: 1180px)) {
  #app,
  .stage,
  .devnav {
    display: none !important;
  }

  .desktop-blocker {
    display: grid;
  }
}

@media (max-width: 520px) {
  .desktop-blocker {
    padding: 22px;
  }

  .desktop-blocker::before {
    inset: 20px;
    box-shadow: 10px 10px 0 rgba(20, 240, 255, .32);
  }

  .desktop-blocker__panel {
    width: min(100%, 350px);
    padding: 22px;
    box-shadow: 10px 10px 0 var(--c-acid-magenta), 18px 18px 0 var(--c-acid-cyan);
  }

  .desktop-blocker__panel h1 {
    max-width: 7.5ch;
    font-size: clamp(2.35rem, 11.2vw, 3.2rem);
    text-shadow: 5px 5px 0 var(--c-acid-magenta);
  }
}

/* Desktop scale bands: tablet-sized browser → ultrawide monitor. */
@media (min-width: 1024px) {
  .scene {
    padding:
      clamp(24px, 3vh, 64px)
      clamp(28px, 3vw, 96px);
  }
}

@media (min-width: 2400px) {
  :root {
    --body-size: 1.0625rem;
    --title-size: clamp(7rem, 7.4vw, 13rem);
  }

  .scene {
    padding-inline: max(72px, calc((100vw - 2560px) / 2 + 72px));
  }
}

@media (min-width: 3400px) {
  .scene {
    padding-inline: max(112px, calc((100vw - 3000px) / 2 + 112px));
  }
}

/* HUD (mute + прогрес) поверх сцен. */
.hud {
  position: fixed;
  z-index: var(--z-hud);
  display: flex;
  gap: var(--sp-3);
  align-items: center;
}
.hud--top-right { top: var(--sp-4); right: var(--sp-4); }
.hud--bottom {
  left: 50%;
  bottom: var(--sp-4);
  transform: translateX(-50%);
}

.hud__btn {
  font-size: var(--fs-300);
  color: var(--hud-fg);
  background: var(--hud-bg);
  border: var(--border-1) solid var(--surface-line);
  border-radius: var(--radius-pill);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.progress {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}
.progress__track {
  width: 140px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--progress-track);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  width: 0%;
  background: var(--progress-fill);
  transition: width var(--dur-base) var(--ease-out);
}
.progress__label {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  color: var(--muted);
}

/* Прихована навігація розробника — не для production-користувача. */
.devnav {
  position: fixed;
  z-index: var(--z-devnav);
  left: var(--sp-4);
  bottom: var(--sp-4);
  max-width: 280px;
  padding: var(--sp-3);
  background: var(--c-ink-900);
  border: var(--border-1) solid var(--c-acid-lime);
  border-radius: var(--radius-2);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  color: var(--fg);
}
.devnav[hidden] { display: none; }
.devnav select { width: 100%; margin-top: var(--sp-2); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Екран-привітання (кіноцитата) ---- */
.scene[data-variant="greeting"] { text-align: center; }
.greeting {
  max-width: 20ch;
  margin: 0 auto var(--sp-7);
}
.greeting__quote {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1.75rem, 5vw, 3.25rem);
  line-height: var(--lh-snug);
  color: var(--fg);
  text-transform: none;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.greeting__by {
  display: block;
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  color: var(--muted);
}
.greeting__author { color: var(--accent); font-weight: var(--fw-bold); }