/* =========================================================
   ALL NIGHT PARTIES – drop oldal
   Csak ezek a színek szerepelnek. A #171717 pontosan a logó
   PNG háttérszíne, ezért nem látszik a logó doboza.
   ========================================================= */
:root {
  --bg: #171717;
  --surface: #1f1f1f;
  --line: #2e2e2e;
  --fg: #f2f2f2;
  --muted: #8c8c8c;

  --gutter: 16px;
  --section: 96px;
  --cta-h: 60px;
  --safe-b: env(safe-area-inset-bottom, 0px);

  --display: "Archivo", "Arial Black", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

html {
  background: var(--bg);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--display);
  font-stretch: 100%;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* Halvány filmszemcse az egész oldalon */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, p, ul, figure { margin: 0; padding: 0; }

:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }

/* ---------- Tipográfiai alapelemek ---------- */

/* Mono címke: NAP, ÓRA, szekciócímek – „belépőjegy” hatás */
.label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Széles, vastag display betű */
.hero__date,
.countdown__num,
.statement__text,
.marquee,
.cta {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 900;
  text-transform: uppercase;
}

/* Körvonalas betű – a logó „ALL·NIGHT” visszhangja.
   A kitöltés háttérszínű, a körvonal alá kerül (paint-order),
   így a betűk belső átfedései sem látszanak. */
.outline {
  color: var(--bg);
  -webkit-text-stroke: calc(var(--stroke, .022em) * 2) var(--fg);
  paint-order: stroke fill;
}

/* ---------- Hero ---------- */
.hero {
  /* pontosan egy képernyő (mobilon a rögzített CTA sávval együtt) */
  min-height: calc(100vh - var(--cta-h) - var(--safe-b));
  min-height: calc(100svh - var(--cta-h) - var(--safe-b));
  display: flex;
  flex-direction: column;
}

.hero__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3svh, 32px);
  padding: clamp(20px, 4svh, 48px) var(--gutter);
}

.hero__logo { width: min(80vw, 640px, 62svh); line-height: 0; }
.hero__logo img { width: 100%; height: auto; }

.hero__date {
  font-size: min(14vw, 13svh, 190px);
  line-height: .9;
  letter-spacing: .04em;
  /* a betűköz a sor végén is ott van – optikai középre igazítás */
  padding-left: .04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  --stroke: .02em;
}

/* ---------- Visszaszámláló ---------- */
.countdown {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  max-width: 1120px;
  font-variant-numeric: tabular-nums;
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
}
/* vékony vonalak a blokkok között */
.countdown__unit:nth-child(even) { border-left: 1px solid var(--line); }
.countdown__unit:nth-child(n + 3) { border-top: 1px solid var(--line); }

.countdown__num {
  position: relative;
  display: block;
  overflow: hidden;
  font-size: min(18vw, 9.5svh);
  line-height: 1;
  letter-spacing: .03em;
  padding-left: .03em;
  color: var(--fg);
}
.countdown__num > span { display: block; }

/* ---------- Futószalag ---------- */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 15px 0 14px;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .14em;
  white-space: nowrap;
}
.marquee__track {
  display: flex;
  width: max-content;
  /* az időtartamot a script.js állítja a szélességhez, hogy mindig egyformán lassú legyen */
  animation: marquee 30s linear infinite;
}
.marquee__track > span { flex: none; padding-right: 2.6em; }

@keyframes marquee {
  to { transform: translate3d(-50%, 0, 0); }
}

/* ---------- CTA ---------- */
/* Mobil: alul rögzített, teljes szélességű fehér sáv a hüvelykujj-zónában */
.cta-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
}

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8em;
  min-height: calc(var(--cta-h) + var(--safe-b));
  padding: 0 24px var(--safe-b);
  background: var(--fg);
  color: var(--bg);
  border: 1px solid var(--fg);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .12em;
  text-decoration: none;
  transition: background-color 150ms linear, color 150ms linear;
}
.cta:active { background: var(--bg); color: var(--fg); }
@media (hover: hover) {
  .cta:hover { background: var(--bg); color: var(--fg); }
}

/* ---------- Mondat ---------- */
.statement {
  padding: var(--section) var(--gutter) 0;
}
/* Plakátblokk: minden sor pontosan kitölti a szélességet (a betűméretet a script.js számolja) */
.statement__text {
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
  line-height: .9;
  letter-spacing: 0;
}
.statement__text .fit {
  display: block;
  white-space: nowrap;
  font-size: 7.5vw; /* tartalék, amíg a script.js ki nem számolja */
}
.statement__text .fit > span { display: inline-block; }
.statement__text .fit + .fit { margin-top: .04em; }
.statement__text .fit.fit--draw {
  --stroke: max(1.2px, .02em);
  margin-top: clamp(44px, 12vw, 120px);
}

/* Beúszás, amikor a blokk a képernyő közepére ér (csak ha fut a JavaScript).
   A kivágás (clip-path) kicsit túlnyúlik a betűkön, hogy az ékezetek se vágódjanak le. */
.js .statement__text {
  --start: 300ms; /* várakozás, mielőtt a sorok beugranak */
}
.js .statement__text .fit > span {
  will-change: transform, clip-path;
}

/* 1–2. sor: alulról, egy rejtett sávból csúszik elő */
.js .statement__text .fit--up { --d: 0ms; }
.js .statement__text .fit--later { --d: 130ms; }
.js .statement__text .fit--up > span {
  transform: translate3d(0, 70%, 0);
  clip-path: polygon(-5% 100%, 105% 100%, 105% 100%, -5% 100%);
  transition:
    transform 900ms cubic-bezier(.16, 1, .3, 1) calc(var(--start) + var(--d)),
    clip-path 900ms cubic-bezier(.16, 1, .3, 1) calc(var(--start) + var(--d));
}

/* YET.: nagyobb méretből „rácsapódik” a helyére, mint egy pecsét */
.js .statement__text .fit--yet > span {
  opacity: 0;
  transform: scale(1.6);
  transition:
    opacity 260ms linear calc(var(--start) + 380ms),
    transform 650ms cubic-bezier(.2, 1.4, .4, 1) calc(var(--start) + 380ms);
}

/* VISSZATÉRÜNK.: a körvonal balról jobbra kirajzolódik */
.js .statement__text .fit--draw > span {
  clip-path: polygon(-5% -40%, -5% -40%, -5% 140%, -5% 140%);
  transition: clip-path 1100ms cubic-bezier(.65, 0, .35, 1) calc(var(--start) + 900ms);
}

.js .statement.is-in .statement__text .fit > span {
  opacity: 1;
  transform: none;
  clip-path: polygon(-5% -40%, 105% -40%, 105% 140%, -5% 140%);
}

/* ---------- Galéria ---------- */
/* halvány elválasztó vonal a szöveg és a galéria között (ugyanolyan, mint a láblécben) */
.gallery {
  margin-top: calc(var(--section) * .75);
  padding-top: calc(var(--section) * .75);
  border-top: 1px solid var(--line);
}

.gallery__title {
  padding: 0 var(--gutter) 20px;
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(22px, 6vw, 40px);
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg);
}

/* A fotók fekvők (3:2), ezért minden cella 3:2 arányú – így semmi lényeges nem vágódik le.
   A sormagasság = oszlopszélesség ÷ 1,5. A kiemelt képek 2×2 cellát foglalnak, ami szintén 3:2.
   A minta 12 képenként ismétlődik, így bővítéskor is rendezett marad. */
.gallery { container-type: inline-size; }

.gallery__grid {
  --cols: 2;
  --grid-w: 100vw;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-auto-rows: calc((var(--grid-w) - (var(--cols) - 1) * 2px) / var(--cols) / 1.5);
  grid-auto-flow: dense;
  gap: 2px;
}
@supports (width: 1cqw) {
  .gallery__grid { --grid-w: 100cqw; }
}

.g-item:nth-child(12n + 1),
.g-item:nth-child(12n + 6) { grid-column: span 2; grid-row: span 2; }

.g-item {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
.g-item.is-in { opacity: 1; }

.g-btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
}

.g-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ha egy kép még nincs feltöltve: szürke helykitöltő dobozt mutatunk */
.g-item.is-missing img { visibility: hidden; }
.g-item.is-missing .g-btn::after {
  content: attr(data-n);
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--muted);
}

/* ---------- Lábléc ---------- */
.footer {
  padding-top: var(--section);
  /* a rögzített CTA ne takarja el a lábléc tartalmát */
  padding-bottom: calc(var(--cta-h) + var(--safe-b));
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px var(--gutter) 24px;
  border-top: 1px solid var(--line);
}

.footer__social { display: flex; gap: 4px; margin-left: -10px; }
.footer__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--fg);
  transition: color 150ms linear;
}
.footer__social svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: miter;
  stroke-linecap: square;
}
.footer__social svg .dot { fill: currentColor; stroke: none; }
@media (hover: hover) {
  .footer__social a:hover { color: var(--muted); }
}
.footer__copy { text-transform: none; letter-spacing: .08em; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--surface);
  overscroll-behavior: contain;
  /* a húzás csak lapoz, a háttérben lévő oldal nem görög el (iPhone-on sem) */
  touch-action: none;
}
.lightbox[hidden] { display: none; }

.lightbox__stage {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 64px 0 88px;
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 200ms linear, transform 200ms var(--ease);
}
.lightbox__img.is-switching { opacity: 0; }
.lightbox__img.is-missing {
  width: min(86vw, 640px);
  aspect-ratio: 4 / 5;
  height: auto;
  background: var(--bg);
  border: 1px solid var(--line);
}

.lightbox__count {
  position: absolute;
  top: 0;
  left: var(--gutter);
  height: 64px;
  display: flex;
  align-items: center;
}

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--fg);
  transition: background-color 150ms linear, color 150ms linear, border-color 150ms linear;
}
.lightbox__btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
}
.lightbox__btn:active { background: var(--fg); color: var(--bg); border-color: var(--fg); }
@media (hover: hover) {
  .lightbox__btn:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
}

.lightbox__close { top: 8px; right: 8px; }
.lightbox__prev { bottom: calc(20px + var(--safe-b)); left: var(--gutter); }
.lightbox__next { bottom: calc(20px + var(--safe-b)); right: var(--gutter); }

/* ---------- Betöltési animáció: egymás után, alulról ---------- */
.rise {
  animation: rise 600ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}
.rise--2 { --i: 1; }
.rise--3 { --i: 2; }
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 28px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Tablet ---------- */
@media (min-width: 600px) {
  .label { font-size: 12px; }

  .countdown { grid-template-columns: repeat(4, 1fr); }
  .countdown__unit:nth-child(n) { border-top: 0; border-left: 0; }
  .countdown__unit + .countdown__unit { border-left: 1px solid var(--line); }
  .countdown__num { font-size: min(10.4vw, 160px, 14svh); }

  .gallery__grid { --cols: 3; }
  .g-item:nth-child(n) { grid-column: auto; grid-row: auto; }
  .g-item:nth-child(12n + 1),
  .g-item:nth-child(12n + 8) { grid-column: span 2; grid-row: span 2; }
}

/* ---------- Gép ---------- */
@media (min-width: 768px) {
  :root { --gutter: 32px; --section: 144px; --cta-h: 0px; }

  .marquee { font-size: 18px; padding: 18px 0 17px; }

  .cta-wrap {
    position: static;
    display: flex;
    justify-content: center;
    padding: 64px var(--gutter) 0;
  }
  .cta {
    min-height: 64px;
    padding: 0 44px;
    font-size: 15px;
  }

  .footer { padding-bottom: 0; }
  .footer__bottom { padding-bottom: 32px; }

  .lightbox__stage { padding: 72px 96px; }
  .lightbox__count { height: 72px; }
  .lightbox__close { top: 12px; right: 12px; }
  .lightbox__prev,
  .lightbox__next { top: 50%; bottom: auto; transform: translateY(-50%); }
  .lightbox__prev { left: 24px; }
  .lightbox__next { right: 24px; }
}

@media (min-width: 1024px) {
  .gallery__grid {
    --cols: 4;
    --grid-w: calc(min(100vw, 1600px) - 2 * var(--gutter));
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--gutter);
  }
  @supports (width: 1cqw) {
    .gallery__grid { --grid-w: calc(min(100cqw, 1600px) - 2 * var(--gutter)); }
  }
  .g-item:nth-child(n) { grid-column: auto; grid-row: auto; }
  .g-item:nth-child(12n + 1),
  .g-item:nth-child(12n + 8),
  .g-item:nth-child(12n + 11),
  .g-item:nth-child(12n + 12) { grid-column: span 2; grid-row: span 2; }
}

/* ---------- Kikapcsolt animáció: minden áll ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .g-item { opacity: 1; }
  .js .statement__text .fit > span { opacity: 1; transform: none; clip-path: none; }
}