:root {
  color-scheme: dark;
  --ink-900: #11131c;
  --ink-700: #2a2e3f;
  --ink-500: #3e435c;
  --lime: #93d14f;
  --lime-bright: #a1e657;
  --white: #ebedf5;
  --muted: rgba(235, 237, 245, 0.7);
  --line: rgba(235, 237, 245, 0.26);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--ink-900);
}

body {
  min-width: 320px;
  min-height: 100svh;
  margin: 0;
  overflow: hidden;
  background: var(--ink-900);
  color: var(--white);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
a {
  font: inherit;
}

button {
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

.experience {
  position: relative;
  width: 100%;
  min-height: 100svh;
  isolation: isolate;
  overflow: clip;
}

.video-stage,
.video-layer,
.video-vignette,
.motion-overlay {
  position: fixed;
  inset: 0;
}

/* Az alapháttér a betöltővideó ELSŐ KOCKÁJA (üres, sötét akna) — így a lap már a videók
   betöltése előtt is a helyszínen áll, és a betöltőanimáció ebből nő ki, ugrás nélkül. */
.video-stage {
  z-index: -2;
  background:
    radial-gradient(circle at 50% 40%, rgba(42, 46, 63, 0.35), rgba(17, 19, 28, 0.85) 72%),
    url("../assets/poster.jpg") center center / cover no-repeat,
    var(--ink-900);
  transition: filter 380ms var(--ease-out), transform 380ms var(--ease-out);
}

.video-layer {
  overflow: hidden;
}

/* PARKOLÓ LÉLEGZET (user, 2026-08-14: "nagy a kontraszt a videó menése és
   stoppolása közt … pulzáljon a fénye a szálaknak").
   A megállóban a videó 0,12× tempóra lassul, ez a réteg pedig 7 másodperces
   ciklusban finoman világosodik és alig észrevehetően nagyít. Együtt a kép
   ÉL, de a néző mégis egy helyben áll. */
body.video-parkol .video-layer {
  animation: parkolo-lelegzet 8s ease-in-out infinite;
  will-change: filter;
}

/* NINCS `transform: scale` (user, 2026-08-14: "közelítesz-távolítasz, szuper
   ötlet, de remeg a kép, nem szép, szaggat"). A videó nagyítása minden képkockán
   újramintavételezést kér, attól szaggat. A fényerő/telítettség viszont
   pixelenkénti szűrő — geometriát nem mozgat, ezért tökéletesen sima. */
@keyframes parkolo-lelegzet {
  0%, 100% { filter: brightness(0.96) saturate(0.96) contrast(1); }
  50%      { filter: brightness(1.20) saturate(1.18) contrast(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  body.video-parkol .video-layer { animation: none; }
}

.video-segment {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* User, 2026-08-14: "a TELJES videót akarom a háttérbe" — a `cover` levágta a
     szélét/tetejét. A `contain` az egész kockát megmutatja, arányhelyesen. */
  object-fit: contain;
  object-position: center center;
  opacity: 0;
  transition: opacity 620ms var(--ease-out);
}

.video-segment.is-visible {
  opacity: 1;
}

/* SZÖVEGOLVASHATÓSÁGI SCRIM (user, 2026-08-14: "szövegek láthatósága és jól
   olvashatósága ELSŐDLEGES"). A videó világos, mozgó felületei alatt a fehér
   szöveg elveszik, ezért a videó fölé egyenletes sötétítés kerül, plusz a
   szélek/alsó sáv erősebb lefogása. A diák EFÖLÖTT ülnek (z-index 20). */
.video-vignette {
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 6, 12, 0.6), rgba(4, 6, 12, 0.12) 26%, rgba(4, 6, 12, 0.12) 74%, rgba(4, 6, 12, 0.55)),
    linear-gradient(0deg, rgba(6, 8, 15, 0.72), rgba(6, 8, 15, 0.2) 42%, rgba(6, 8, 15, 0.45)),
    rgba(8, 10, 17, 0.42);
}

/* A sötétítés NEM az első kockától van kint (user, 2026-08-17): a betöltővideó
   tiszta, és a vignetta akkor kezd beúszni, amikor a kapu-panel megjelenik —
   ugyanazzal a `--kapu-ido` ütemmel, tehát a kettő együtt ér célba. Belépés
   után végig kint marad. */
.video-vignette {
  opacity: 0;
  transition: opacity var(--kapu-ido, 2.4s) ease-out;
}
html:has(.entry-gate.is-visible) .video-vignette,
body.is-entered .video-vignette {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .video-vignette { transition: none; }
}

.motion-overlay {
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, var(--lime-bright) 0%, rgba(235, 237, 245, 0.95) 14%, rgba(147, 209, 79, 0.18) 39%, transparent 68%);
}

/* A JS a `document.body`-ra teszi az `is-warping` osztályt, `.experience` elem
   pedig NINCS az index.html-ben — ezért ez a két szabály eddig sosem futott le.
   A szelektor javítva, hogy a menüből ugrásnál tényleg legyen fény-warp. */
body.is-warping .video-stage {
  filter: blur(9px) brightness(1.35) saturate(1.3);
  transform: scale(1.045);
}

body.is-warping .motion-overlay {
  animation: warp-flash 620ms var(--ease-out) both;
}

/* ÁTKÖTŐ FÁTYOL — csak ott, ahol a kép TÉNYLEG ugrik.
   MÉRT OK (2026-08-14): a szegmensek szomszédos határkockái szinte azonosak
   (átlagos eltérés 2,6–16), ezért az előre haladó lánc tiszta keresztúsztatással
   folytonos. Visszalépésnél és menüből ugrásnál viszont nem szomszédos pontok
   kerülnek egymás mellé — ott az eltérés 20–48, amit fade nem tud elrejteni.
   Ilyenkor ez a fátyol sötétít át, és a váltás a sötétben történik meg. */
.video-atkotes {
  position: fixed;
  inset: 0;
  z-index: 2;               /* a videó és a vignetta fölött, a diák (20) alatt */
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 45%, rgba(6, 8, 15, 0.62), rgba(3, 4, 10, 0.94) 68%);
  transition: opacity 300ms var(--ease-out);
}

.video-atkotes.is-on {
  opacity: 1;
}

@keyframes warp-flash {
  0% { opacity: 0; transform: scale(0.7); }
  24% { opacity: 1; transform: scale(1.12); }
  52% { opacity: 0.82; transform: scale(1.35); }
  100% { opacity: 0; transform: scale(1.75); }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.noscript-message {
  position: fixed;
  z-index: 100;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  background: var(--ink-700);
  text-align: center;
}

@media (max-width: 575px) {
  /* A 16:9-es videó középső, körülbelül 26%-os sávját tartjuk a mobilképen. */
  .video-segment {
    inset: 0 auto 0 50%;
    width: 384.615vw;
    max-width: none;
    transform: translateX(-50%);
  }

  .video-vignette {
    background:
      linear-gradient(90deg, rgba(4, 6, 12, 0.7), transparent 30%, transparent 70%, rgba(4, 6, 12, 0.7)),
      linear-gradient(0deg, rgba(6, 8, 15, 0.58), transparent 38%, rgba(6, 8, 15, 0.3));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}