/* ============================================================================
   DIA-VÁZ — a közös keret minden diához.
   Ez a fájl adja a DIA-SPEC.md-ben rögzített kemény szabályokat:
   egy dia = pontosan egy képernyő, semmi nem lóghat ki, közös szélességi sáv.
   A diák egyedi stílusai a slides-01..04.css fájlokban vannak.
   ============================================================================ */

:root {
  /* KÖZÖS SZÉLESSÉGI SÁV — a felső menü ÉS minden dia ezt használja,
     így semmi nem lóghat túl a menün. */
  --content-w: 1180px;
  --content-pad: clamp(24px, 4vw, 64px);
  /* A fix felső menü magassága. Minden dia ennyivel lejjebb kezd. */
  --nav-h: 72px;
  --slide-gap-top: 32px;

  --ink-900: #11131C;
  --ink-700: #2A2E3F;
  --lime: #93D14F;
  --lime-hi: #A1E657;
  --paper: #EBEDF5;
}

/* --- a diák rétege: a videó FÖLÖTT ül, de nem takarja el teljesen ------------ */
.slides-layer {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;           /* csak az aktív dia kap egeret */
}

/* --- EGY DIA = EGY KÉPERNYŐ ------------------------------------------------- */
.slide {
  position: absolute;
  inset: 0;
  height: 100svh;
  /* KEMÉNY SZABÁLY: itt semmi nem lóghat ki. Ha a tartalom több, az a dia hibája. */
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: calc(var(--nav-h) + var(--slide-gap-top)) var(--content-pad) clamp(28px, 5vh, 56px);
  box-sizing: border-box;

  /* alapállapot: kint van, alul */
  opacity: 0;
  transform: translateY(64px) scale(0.99);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 520ms cubic-bezier(.22, 1, .36, 1),
    transform 620ms cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear 620ms;
}

/* AKTÍV: beült a helyére */
.slide.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s, 0s, 0s;
}

/* KIMENŐ FELFELÉ (lefelé görgetéskor a régi dia így távozik) */
.slide.is-leaving-up {
  opacity: 0;
  transform: translateY(-60px) scale(0.98);
}

/* KIMENŐ LEFELÉ (felfelé görgetéskor) */
.slide.is-leaving-down {
  opacity: 0;
  transform: translateY(60px) scale(0.98);
}

/* ÉRKEZŐ FELÜLRŐL (felfelé görgetéskor az előző dia onnan jön vissza) */
.slide.is-entering-from-top {
  transform: translateY(-64px) scale(0.99);
}

/* --- a dia belső sávja: MINDEN tartalom ebben, középre zárva ---------------- */
.slide__inner {
  width: 100%;
  max-width: var(--content-w);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 2.2vh, 28px);
}

/* --- ELEMEK EGYENKÉNTI BEÜLÉSE (stagger) ----------------------------------- */
/* A dián belül minden [data-reveal] elem sorban ül be, 70 ms különbséggel. */
.slide [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 460ms ease-out, transform 520ms cubic-bezier(.22, 1, .36, 1);
}
.slide.is-active [data-reveal] {
  opacity: 1;
  transform: none;
}
.slide.is-active [data-reveal]:nth-child(1)  { transition-delay: 120ms; }
.slide.is-active [data-reveal]:nth-child(2)  { transition-delay: 190ms; }
.slide.is-active [data-reveal]:nth-child(3)  { transition-delay: 260ms; }
.slide.is-active [data-reveal]:nth-child(4)  { transition-delay: 330ms; }
.slide.is-active [data-reveal]:nth-child(5)  { transition-delay: 400ms; }
.slide.is-active [data-reveal]:nth-child(6)  { transition-delay: 470ms; }
.slide.is-active [data-reveal]:nth-child(7)  { transition-delay: 540ms; }
.slide.is-active [data-reveal]:nth-child(8)  { transition-delay: 610ms; }
.slide.is-active [data-reveal]:nth-child(n+9) { transition-delay: 680ms; }

/* --- TÖBBÜTEMŰ MEGÁLLÓ: az elemek görgetésenként egyenként jönnek ----------- */
/* Ha a dián data-beats van, a gyerekek csak akkor látszanak, ha a beat elérte őket. */
.slide[data-beats] [data-beat] { opacity: 0; transform: translateY(24px); }
.slide[data-beats] [data-beat].is-in { opacity: 1; transform: none; }

/* --- FELSŐ MENÜ: UGYANAZ a sáv, mint a diáké -------------------------------- */
.top-nav {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(100% - 2 * var(--content-pad), var(--content-w));
  height: var(--nav-h);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: clamp(16px, 2vw, 28px);
  box-sizing: border-box;
}

/* --- GÖRGETÉS-JELZŐ: középen alul, sosem lóghat ki a széleken --------------- */
.scroll-cue {
  position: fixed;
  left: 50%;
  bottom: clamp(16px, 3vh, 32px);
  transform: translateX(-50%);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 2 * var(--content-pad));
  white-space: nowrap;
  transition: opacity 320ms ease-out;
}
.scroll-cue.is-hidden { opacity: 0; pointer-events: none; }
.scroll-cue__arrow { animation: cue-bob 1.8s ease-in-out infinite; }

@keyframes cue-bob {
  0%, 100% { transform: translateY(0); opacity: .7; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* --- MOBIL: a videóból csak a középső ~26% látszik, a tartalom is oda kerül -- */
@media (max-width: 767px) {
  :root { --nav-h: 60px; --content-pad: 18px; }
  .slide { padding-top: calc(var(--nav-h) + 16px); }
  .slide__inner { gap: 12px; }
}

/* --- ALACSONY ABLAK: sűrítés, hogy 900px alatt is kiférjen ------------------ */
@media (max-height: 900px) {
  :root { --slide-gap-top: 20px; }
  .slide__inner { gap: clamp(10px, 1.6vh, 20px); }
}

/* --- MOZGÁSCSÖKKENTÉS ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .slide,
  .slide [data-reveal] {
    transition: opacity 120ms linear !important;
    transform: none !important;
  }
  .scroll-cue__arrow { animation: none; }
}

/* --- NYOMTATÁS / PDF: a diák egymás alatt, videó nélkül --------------------- */
@media print {
  .slides-layer { position: static; pointer-events: auto; }
  .slide {
    position: static;
    height: auto;
    min-height: 0;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    overflow: visible;
    page-break-after: always;
    break-after: page;
    padding: 24pt;
  }
  .slide [data-reveal] { opacity: 1 !important; transform: none !important; }
  .top-nav, .scroll-cue, video, .video-layer, .video-stage { display: none !important; }
}