/* @flattened: tokens/fonts.css */
/* Webfonts — Lélek Kalandok design system
   Downloaded from Google Fonts (OFL licensed): Cormorant Garamond, Karla, Caveat.
   latin + latin-ext subsets (Hungarian ő/ű supported). */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-500-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-500-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/karla-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/karla-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/karla-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/karla-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/karla-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/karla-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/caveat-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/caveat-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/caveat-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/caveat-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* @flattened: tokens/colors.css */
/* ─────────────────────────────────────────────
   Lélek Kalandok — color tokens
   "Föld energiák": zöld · bézs · krém
   Derived from brand photo (olive jumper, cream,
   warm wood) + old logo green.
   ───────────────────────────────────────────── */
:root {
  /* Base — greens (moha → zsálya) */
  --green-950: #222B1B;
  --green-900: #2E3824;
  --green-700: #47543A;
  --green-600: #556442;
  --green-500: #66754B;
  --green-400: #7E8C63;
  --green-300: #A3AF8B;
  --green-200: #C7CDB3;
  --green-100: #E3E7D3;

  /* Base — creams & sands */
  --cream-25:  #FDFBF4;
  --cream-50:  #FAF6EB;
  --cream-100: #F4EEDD;
  --sand-200:  #EAE0C8;
  --sand-300:  #DACDAE;
  --sand-400:  #C2B18C;

  /* Base — earth browns */
  --brown-700: #6B5335;
  --brown-500: #8B7250;
  --brown-300: #B49B78;

  /* Semantic — surfaces */
  --surface-page: var(--cream-50);
  --surface-card: var(--cream-25);
  --surface-tint: var(--green-100);
  --surface-sand: var(--cream-100);
  --surface-deep: var(--green-900);

  /* Semantic — text
     A muted/faint értékek SZÁMÍTOTT WCAG AA-értékek (2026-07-10) — ne világosítsd:
     muted #61684F = 5.40:1 krémen, 4.62:1 a zöld tint-felületen (min. 4.5:1);
     faint #656E50 = 4.99:1 krémen, 4.65:1 homokon (13px-es szövegen is használt).
     A korábbi #71775F (4.32) és #989D86 (2.59) mérve megbukott. QA-gate őrzi. */
  --text-heading: var(--green-950);
  --text-body: #3C4331;
  --text-muted: #61684F;
  --text-faint: #656E50;
  --text-on-deep: var(--cream-100);
  --text-on-deep-muted: #C3C9AF;
  --text-on-accent: var(--cream-25);

  /* Semantic — interactive */
  --accent: var(--green-600);
  --accent-hover: var(--green-700);
  --accent-press: var(--green-900);
  --accent-soft: var(--green-100);
  --accent-soft-hover: #D9DEC5;
  --link: var(--green-700);
  /* Fókusz-gyűrű: TELÍTETT szín — a régi rgba(…,0.45) krémre komponálva 1.81:1 volt,
     gyakorlatilag láthatatlan (nem-szöveg minimum: 3:1). green-600 = 5.91:1 krémen.
     Sötét (surface-deep) konténerben a base.css világos gyűrűre vált. */
  --focus-ring: var(--green-600);

  /* Semantic — lines */
  --border-soft: rgba(60, 67, 49, 0.14);
  --border-strong: rgba(60, 67, 49, 0.30);
  --border-on-deep: rgba(244, 238, 221, 0.22);
}

/* @flattened: tokens/typography.css */
/* ─────────────────────────────────────────────
   Lélek Kalandok — typography tokens
   Display: Cormorant Garamond (organikus szerif)
   Body:    Karla (meleg humanista sans)
   Accent:  Caveat (kézírás — jegyzetek, kiemelés)
   All faces ship latin-ext → ő ű ✓
   ───────────────────────────────────────────── */
:root {
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Karla', 'Segoe UI', system-ui, sans-serif;
  --font-accent: 'Caveat', 'Segoe Script', cursive;

  /* Scale (ratio ≈ 1.26; body base 17px) */
  --text-xs: 13px;
  --text-sm: 15px;
  --text-base: 17px;
  --text-lg: 20px;
  --text-xl: 25px;
  --text-2xl: 32px;
  --text-3xl: 40px;
  --text-4xl: 52px;
  --text-5xl: 68px;

  /* Line heights */
  --leading-tight: 1.08;   /* display headlines */
  --leading-snug: 1.25;    /* subheads */
  --leading-body: 1.65;    /* running text */

  /* Tracking */
  --tracking-display: 0.01em;
  --tracking-body: 0;
  --tracking-caps: 0.18em; /* section eyebrows, buttons */

  /* Weights */
  --weight-display: 500;   /* Cormorant reads best at 500–600 */
  --weight-display-strong: 600;
  --weight-body: 400;
  --weight-body-medium: 500;
  --weight-body-bold: 700;
  --weight-accent: 500;
}

/* @flattened: tokens/spacing.css */
/* ─────────────────────────────────────────────
   Lélek Kalandok — spacing, radii, shadows, motion
   ───────────────────────────────────────────── */
:root {
  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radii — soft, organic */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  /* Organic blob — for image masks & decorative surfaces */
  --radius-organic: 58% 42% 55% 45% / 52% 48% 44% 56%;

  /* Shadows — warm, diffuse, never harsh */
  --shadow-card: 0 1px 2px rgba(46, 56, 36, 0.05), 0 10px 30px -12px rgba(46, 56, 36, 0.16);
  --shadow-lift: 0 2px 4px rgba(46, 56, 36, 0.06), 0 18px 44px -14px rgba(46, 56, 36, 0.22);
  --shadow-inset-soft: inset 0 0 0 1px rgba(60, 67, 49, 0.08);

  /* Motion — slow, breathing, no bounces */
  --dur-fast: 160ms; /* @kind other */
  --dur: 260ms; /* @kind other */
  --dur-slow: 600ms; /* @kind other */
  --ease-soft: cubic-bezier(0.33, 0.1, 0.22, 1); /* @kind other */
}

/* @flattened: tokens/motion.css */
/* ─────────────────────────────────────────────
   Lélek Kalandok — scroll-reveal + kézírás-animáció
   Kapu: html.lk-anim — a héj <head>-beli inline guardja teszi fel, KIZÁRÓLAG
   akkor, ha fut a JS ÉS a látogató nem kért csökkentett mozgást. Ha a reveal.js
   nem tölt be, a guard 2,5 mp után leveszi az osztályt — a tartalom SOSEM
   ragadhat rejtve. JS nélkül (és reduced-motion mellett) minden azonnal látszik.
   ───────────────────────────────────────────── */
:root {
  --rv-dur: 700ms;
  --rv-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rv-dist: 18px;
}

/* A rejtett alapállapot a `translate` KÜLÖN tulajdonságot használja (nem a
   transform-ot): így komponálódik a kártyák inline hover-transformjával és a
   kézírás-elemek inline rotate()-jével, nem ütközik velük. Ha egy régi böngésző
   nem ismeri a translate-et, az elem csak halványodik — az is korrekt. */
html.lk-anim [data-reveal] {
  opacity: 0;
  translate: 0 var(--rv-dist);
  transition:
    opacity var(--rv-dur) var(--rv-ease),
    translate var(--rv-dur) var(--rv-ease);
  transition-delay: var(--rv-delay, 0ms);
}
html.lk-anim [data-reveal].lk-in {
  opacity: 1;
  translate: none;
}

/* Kézírás (Caveat) — „tollvonás": a szavak egy lágy élű maszk mögül húzódnak
   elő balról jobbra, szavanként késleltetve, mintha élőben írnák őket.
   Az elem maga nem csúszik (az nem lenne toll-szerű) — csak a maszk animál. */
html.lk-anim [data-reveal="hand"] {
  opacity: 1;
  translate: none;
}
@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
  html.lk-anim [data-reveal="hand"] .lk-hand-w {
    display: inline-block;
    /* A kurzív Caveat tintája túlnyúlik a betűdobozon (záró betűk hurka, ékezetek,
       „:)"), a maszk pedig a border-boxra vág — padding tágítja a festő-területet,
       az egyenlő negatív margó visszahúzza a layoutot (elrendezés változatlan),
       így a maszknak levegője van a tinta körül, és a szóvégek nem vágódnak le. */
    padding: 0.5em 0.45em;
    margin: -0.5em -0.45em;
    -webkit-mask-image: linear-gradient(105deg, #000 45%, transparent 55%);
    mask-image: linear-gradient(105deg, #000 45%, transparent 55%);
    -webkit-mask-size: 220% 100%;
    mask-size: 220% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  html.lk-anim [data-reveal="hand"].lk-in .lk-hand-w {
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
    transition:
      -webkit-mask-position 620ms cubic-bezier(0.45, 0.05, 0.55, 0.95),
      mask-position 620ms cubic-bezier(0.45, 0.05, 0.55, 0.95);
    transition-delay: calc(var(--rv-delay, 0ms) + var(--wi, 0) * 280ms);
  }
}

/* Dekoratív spirál (Lélekutazás-szekció): görgetéshez kötött, nagyon lassú
   elfordulás — CSS scroll-driven animation, ahol a böngésző támogatja;
   máshol egyszerűen áll. Csak dekoratív (aria-hidden) elemen használjuk. */
/* A forgás időzítése NEM lehet sima view(): a spirál egy overflow:hidden szekcióban
   ül, ami maga is scroll-konténer — a view() ahhoz mérné magát (sosem görget → a
   forgás beragad). Ezért a SZEKCIÓ (.lk-vt-source) kap nevesített view-timeline-t
   (az ő legközelebbi scrollere már a viewport), és a spirál azt követi. */
@supports (animation-timeline: view()) {
  html.lk-anim .lk-vt-source {
    view-timeline-name: --lk-vt;
  }
  html.lk-anim .lk-scroll-spin {
    animation: lk-scroll-spin linear both;
    animation-timeline: --lk-vt;
  }
}
@keyframes lk-scroll-spin {
  from { transform: rotate(-14deg); }
  to { transform: rotate(10deg); }
}

/* @flattened: tokens/base.css */
/* ─────────────────────────────────────────────
   Lélek Kalandok — base element defaults
   (kept minimal on purpose)
   ───────────────────────────────────────────── */
/* Vízszintes „elhúzhatóság" gát: semmi ne lóghasson túl a viewporton, és a lap
   SOHA ne legyen oldalirányban görgethető/elhúzható (mobilon ez zavaró volt).
   `clip` — NEM `hidden` —, hogy a sticky fejléc ne törjön el (a clip nem hoz létre
   görgetési konténert). Régi Safari (<16) egyszerűen figyelmen kívül hagyja. */
html, body {
  max-width: 100%;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--green-200);
  color: var(--green-950);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Sötét (surface-deep) konténerekben a zöld gyűrű beleolvadna a háttérbe (1.93:1) —
   világos zsálya gyűrű kell (green-200 = 7.50:1 a mély zöldön). A lábléc és a
   lélekutazás-szekció a két sötét felület; a kiemelt árkártya gyűrűje a kártya
   SZÉLÉN KÍVÜL, a világos szekcióháttéren rajzolódik, arra a zöld jó. */
footer :focus-visible,
#lelekutazas :focus-visible {
  outline-color: var(--green-200);
}