html {
  scroll-behavior: smooth;
}

/* ============================================================
   FONT FACE — Ethnocentric (self-hosted, két változat)
   ============================================================ */
@font-face {
  font-family: "Ethnocentric";
  src: url("/fonts/ethnocentric.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Ethnocentric";
  src: url("/fonts/ethnocentric_it.otf") format("opentype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* Font rétegek */
  --font-display: "Ethnocentric", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Mono", monospace;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Színek */
  --color-brand: #0132AA;
  --color-accent: #06B6D4;
  --color-dark: #1A1A1D;
  --color-surface: #212127;
  --color-dark-border: #2a2a30;
  --color-text: #F0F0F2;
  --color-text-secondary: #9A9A9E;
  --color-text-muted: #68686C;

}

/* ============================================================
   VÁLTAKOZÓ VILÁGOS SZEKCIÓ-HÁTTÉR — újrahasználható segédosztályok
   Sorrend: section-white → section-blue → section-white → ...
   ============================================================ */

/* Fehér szekció (1., 3., … világos szekció) */
.section-white {
  background-color: #ffffff;
}

/* Halványkék szekció — brand-kék tónusú (2., 4., … világos szekció) */
.section-blue {
  background-color: #DCE5F2;
}

/* ============================================================
   SZEKCIÓ RÁCS-HÁTTÉR — újrahasználható segédosztályok
   ============================================================ */

/* Sötét szekciókhoz (#1A1A1D alap): halvány cián rácsot ad */
.section-grid-dark {
  background-image:
    linear-gradient(rgba(41, 82, 217, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41, 82, 217, 0.09) 1px, transparent 1px);
  background-size: 40px 40px;
  background-attachment: fixed;
}

/* Világos szekciókhoz (fehér alap): halvány brand-kék rácsot ad
   (egységes a section-grid-dark rácsával, hogy az átmeneteknél is folyamatos legyen) */
.section-grid-light {
  background-image:
    linear-gradient(rgba(41, 82, 217, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41, 82, 217, 0.09) 1px, transparent 1px);
  background-size: 40px 40px;
  background-attachment: fixed;
}

/* ============================================================
   GLOBÁLIS RÁCS-HULLÁM — minden oldal minden rácsos szekcióján
   A ::before egy KIEMELT rácsot rajzol, amit egy vízszintesen vándorló,
   lágy szélű gradiens-maszk modulál. A maszk a viewport szélességéhez (vw)
   van kötve -> EGYETLEN, összehangolt hullám fut végig. z-index:-1 + isolation:
   a hullám a tartalom mögött, csak a rács vonalait modulálja.
   ============================================================ */
.section-grid-dark,
.section-grid-light {
  position: relative;
  isolation: isolate;
}

.section-grid-dark::before,
.section-grid-light::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-size: 40px 40px;
  background-attachment: fixed;
  /* Lágy szélű, vándorló maszk-zóna (a széle sok fokozattal úszik fel/le) */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 30%,
    rgba(0,0,0,0.15) 37%,
    rgba(0,0,0,0.35) 41%,
    rgba(0,0,0,0.55) 44%,
    rgba(0,0,0,0.80) 47%,
    #000 50%,
    rgba(0,0,0,0.80) 53%,
    rgba(0,0,0,0.55) 56%,
    rgba(0,0,0,0.35) 59%,
    rgba(0,0,0,0.15) 63%,
    transparent 70%);
  mask-image: linear-gradient(90deg,
    transparent 30%,
    rgba(0,0,0,0.15) 37%,
    rgba(0,0,0,0.35) 41%,
    rgba(0,0,0,0.55) 44%,
    rgba(0,0,0,0.80) 47%,
    #000 50%,
    rgba(0,0,0,0.80) 53%,
    rgba(0,0,0,0.55) 56%,
    rgba(0,0,0,0.35) 59%,
    rgba(0,0,0,0.15) 63%,
    transparent 70%);
  -webkit-mask-size: 100vw 100%;
  mask-size: 100vw 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: grid-wave 8s linear infinite;
}

/* A rács vonalai a hullám-zónában cián (#06B6D4) felé fénylenek fel —
   EGYSÉGESEN minden szekción (sötét ÉS világos), azonos opacitással. */
.section-grid-dark::before,
.section-grid-light::before {
  background-image:
    linear-gradient(rgba(6, 182, 212, 0.50) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 182, 212, 0.50) 1px, transparent 1px);
}

/* A maszk-zóna vízszintesen, balról jobbra vándorol; kívülről kívülre halad,
   így a loop zökkenőmentes. A rács NEM mozdul, csak a láthatósága moduláció. */
@keyframes grid-wave {
  from { -webkit-mask-position: -100vw 0; mask-position: -100vw 0; }
  to   { -webkit-mask-position: 100vw 0; mask-position: 100vw 0; }
}

/* Mobil: nyugodtabb tempó + szélesebb kivilágított sáv (~1.5x: 30-70% -> 20-80%) */
@media (max-width: 600px) {
  .section-grid-dark::before,
  .section-grid-light::before {
    animation-duration: 12s;
    -webkit-mask-image: linear-gradient(90deg,
      transparent 20%,
      rgba(0,0,0,0.15) 30%,
      rgba(0,0,0,0.35) 36%,
      rgba(0,0,0,0.55) 41%,
      rgba(0,0,0,0.80) 45%,
      #000 50%,
      rgba(0,0,0,0.80) 55%,
      rgba(0,0,0,0.55) 59%,
      rgba(0,0,0,0.35) 64%,
      rgba(0,0,0,0.15) 70%,
      transparent 80%);
    mask-image: linear-gradient(90deg,
      transparent 20%,
      rgba(0,0,0,0.15) 30%,
      rgba(0,0,0,0.35) 36%,
      rgba(0,0,0,0.55) 41%,
      rgba(0,0,0,0.80) 45%,
      #000 50%,
      rgba(0,0,0,0.80) 55%,
      rgba(0,0,0,0.55) 59%,
      rgba(0,0,0,0.35) 64%,
      rgba(0,0,0,0.15) 70%,
      transparent 80%);
  }
}

/* Csökkentett mozgás: nincs hullám — csak az alap statikus rács marad */
@media (prefers-reduced-motion: reduce) {
  .section-grid-dark::before,
  .section-grid-light::before {
    display: none;
  }
}

/* ============================================================
   SZEKCIÓ-ÁTMENETI SÁV — folytonos rács + hullám (KÖZÖS, minden oldalra)
   A szekciók közötti színátmeneti divekre tegyük rá a .grid-fade osztályt
   (a saját szín-gradiens hátterük MELLÉ). A ::before adja a folytonos
   alaprácsot, a ::after a vw-szinkron vándorló hullámot (ugyanaz a grid-wave,
   mint a szekciókban) -> a rács és a hullám megszakítás nélkül átfut az
   átmeneteken, pont mint a főoldalon.
   Szín-logika: a hullám színe EGYSÉGESEN cián (#06B6D4) minden átmeneti sávban
   (a szekciók hullámával azonos), a --dark / --light módosítótól függetlenül.
   ============================================================ */
.grid-fade {
  position: relative;
  pointer-events: none;
}

/* Folytonos alaprács (maszk nélkül, fixed -> fázisban a szekciók rácsával) */
.grid-fade::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(41, 82, 217, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41, 82, 217, 0.09) 1px, transparent 1px);
  background-size: 40px 40px;
  background-attachment: fixed;
}

/* Vándorló hullám (::after), a globális grid-wave-vel szinkronban */
.grid-fade::after {
  content: '';
  position: absolute;
  inset: 0;
  background-size: 40px 40px;
  background-attachment: fixed;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 30%,
    rgba(0,0,0,0.15) 37%,
    rgba(0,0,0,0.35) 41%,
    rgba(0,0,0,0.55) 44%,
    rgba(0,0,0,0.80) 47%,
    #000 50%,
    rgba(0,0,0,0.80) 53%,
    rgba(0,0,0,0.55) 56%,
    rgba(0,0,0,0.35) 59%,
    rgba(0,0,0,0.15) 63%,
    transparent 70%);
  mask-image: linear-gradient(90deg,
    transparent 30%,
    rgba(0,0,0,0.15) 37%,
    rgba(0,0,0,0.35) 41%,
    rgba(0,0,0,0.55) 44%,
    rgba(0,0,0,0.80) 47%,
    #000 50%,
    rgba(0,0,0,0.80) 53%,
    rgba(0,0,0,0.55) 56%,
    rgba(0,0,0,0.35) 59%,
    rgba(0,0,0,0.15) 63%,
    transparent 70%);
  -webkit-mask-size: 100vw 100%;
  mask-size: 100vw 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: grid-wave 8s linear infinite;
}

/* A hullám színe EGYSÉGESEN cián (#06B6D4) MINDEN átmeneti sávban, függetlenül
   a --dark / --light módosítótól. Így a hullám színe az egész oldalon folyamatosan
   cián, a világos<->világos szekcióhatároknál sem vált vissza sötétre.
   (A .grid-fade--dark / --light módosítók a HTML-ben maradhatnak; a hullám színét
   már nem befolyásolják. A szekciók háttérszín-átmenetét a divek saját gradiense adja.) */
.grid-fade::after {
  background-image:
    linear-gradient(rgba(6, 182, 212, 0.50) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 182, 212, 0.50) 1px, transparent 1px);
}

/* Mobil: nyugodtabb tempó (mint a szekcióknál) */
@media (max-width: 600px) {
  /* Nyugodtabb tempó + szélesebb kivilágított sáv (~1.5x: 30-70% -> 20-80%) */
  .grid-fade::after {
    animation-duration: 12s;
    -webkit-mask-image: linear-gradient(90deg,
      transparent 20%,
      rgba(0,0,0,0.15) 30%,
      rgba(0,0,0,0.35) 36%,
      rgba(0,0,0,0.55) 41%,
      rgba(0,0,0,0.80) 45%,
      #000 50%,
      rgba(0,0,0,0.80) 55%,
      rgba(0,0,0,0.55) 59%,
      rgba(0,0,0,0.35) 64%,
      rgba(0,0,0,0.15) 70%,
      transparent 80%);
    mask-image: linear-gradient(90deg,
      transparent 20%,
      rgba(0,0,0,0.15) 30%,
      rgba(0,0,0,0.35) 36%,
      rgba(0,0,0,0.55) 41%,
      rgba(0,0,0,0.80) 45%,
      #000 50%,
      rgba(0,0,0,0.80) 55%,
      rgba(0,0,0,0.55) 59%,
      rgba(0,0,0,0.35) 64%,
      rgba(0,0,0,0.15) 70%,
      transparent 80%);
  }
}

/* Csökkentett mozgás: nincs vándorló hullám, csak a folytonos alaprács marad */
@media (prefers-reduced-motion: reduce) {
  .grid-fade::after { display: none; }
}

/* ============================================================
   KÉP NÉGYOLDALAS FADE — KÖZÖS maszk (hero- és bevezető-képek, minden oldal)
   A wrapper kapja a .img-fade osztályt, benne az <img>. A wrapper adjon
   magasságot (pl. aspect-ratio), az <img> object-fit: cover, középre igazítva.
   Így a kép mind a négy oldalán beleolvad a háttérbe, keret/border nélkül.
   ============================================================ */
.img-fade {
  position: relative;
  overflow: hidden;
  mask-image:
    linear-gradient(to right,  transparent 0%, black 20%, black 80%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, black 20%, black 80%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
  -webkit-mask-composite: source-in;
}

.img-fade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Mobil: valamivel szűkebb halványítási zóna */
@media (max-width: 860px) {
  .img-fade {
    mask-image:
      linear-gradient(to right,  transparent 0%, black 12%, black 88%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
    -webkit-mask-image:
      linear-gradient(to right,  transparent 0%, black 12%, black 88%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  }
}

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

/* ============================================================
   BASE
   ============================================================ */
body {
  font-family: var(--font-body);
  color: #1a1a1a;
  line-height: 1.6;
}