/* Grifko — náhľad. Tmavý a svetlý režim sú dva návrhy, nie inverzia. */

/* Vlastné písmo Grifka (nie vassweb Playfair + Inter): Literata = knižné nadpisy, Rubik = text a štítky (to isté písmo ako nápis loga B).
   Lokálne woff2, latin + latin-ext (ľ ď ť ĺ ŕ ň ő ű), OFL — licencie v assets/fonts/licencie/. */
@font-face { font-family: "Literata"; src: url("../fonts/literata.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("../fonts/literata-italic.woff2") format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("../fonts/rubik.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }

:root {
  --gutter: clamp(16px, 4.2vw, 88px);
  --maxw: min(100vw, 240vh);
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Rubik", system-ui, sans-serif;  /* štítky: Rubik v kapitálkach namiesto strojového písma */
  --marker: rgba(232, 69, 44, .22);        /* zvýrazňovač ako v učebnici — farba fajky z loga B */
  --ease: cubic-bezier(.22, .8, .24, 1);
}

/* ---------- tmavý: HUD cyan na hlbokej navy ---------- */
:root[data-theme="dark"] {
  --bg: #080b0e;
  --bg-2: #0b141a;
  --ink: #e3f1f5;
  --muted: #9cb4be;
  --accent: #54f0ff;
  --accent-ink: #54f0ff;
  --accent-soft: rgba(84, 240, 255, .16);
  --grifko-fajka: #FF5A3D;  /* logo B: na tmavom svetlejšia paradajková */
  --marker: rgba(255, 90, 61, .46);
  --line: rgba(84, 240, 255, .2);
  --card: rgba(13, 22, 28, .82);
  --card-edge: rgba(84, 240, 255, .32);
  --card-ink: #e3f1f5;
  --card-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(84, 240, 255, .06) inset;
  --scrim: rgba(8, 11, 14, .66);
  --topbar: rgba(8, 11, 14, .55);
  color-scheme: dark;
}

/* ---------- svetlý: atrament a petrolej na chladnom papieri ---------- */
:root[data-theme="light"] {
  --marker: rgba(232, 69, 44, .2);
  --bg: #f3f6f8;
  --bg-2: #e7eef2;
  --ink: #0c1a20;
  --muted: #405a66;
  --accent: #0a5566;        /* petrolej — tyrkys nikdy ako text na svetlom */
  --accent-ink: #0a5566;
  --accent-soft: rgba(10, 85, 102, .1);
  --grifko-fajka: #E8452C;  /* logo B: paradajková červená */
  --line: rgba(10, 85, 102, .2);
  --card: #ffffff;
  --card-edge: rgba(10, 85, 102, .18);
  --card-ink: #0c1a20;
  --card-shadow: 0 28px 50px -28px rgba(12, 40, 52, .35), 0 1px 0 rgba(255, 255, 255, .9) inset;
  --scrim: rgba(243, 246, 248, .78);
  --topbar: rgba(243, 246, 248, .7);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(16px, min(1.05vw, 1.9vh), 22px);
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  transition: background-color .35s ease, color .35s ease;
}
a { color: inherit; }
img { display: block; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 10px 14px; background: var(--ink); color: var(--bg); border-radius: 8px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- pozadie: 3D scéna (fixná, za textom) ---------- */
.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#scena { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.poster { position: absolute; inset: 0; display: none; place-items: center;
  background:
    radial-gradient(60% 50% at 70% 45%, var(--accent-soft), transparent 70%),
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 64px),
    var(--bg);
}
.poster img { display: none; }
/* plagát: bez WebGL, bez JavaScriptu alebo keď sa skript nenačíta — len mriežka a svetlo za textom; ikona nie je
   pevne v okne (text by cez ňu prechádzal), ale ako obrázok v úvode, kde má vlastné miesto */
html:not(.js) .poster, .no-webgl .poster { display: grid; }
.hero__icon { display: none; }
html:not(.js) .hero__icon, .no-webgl .hero__icon { display: block; position: absolute; right: max(var(--gutter), 9vw); top: 50%;
  transform: translateY(-50%); width: min(30vmin, 300px); height: auto; border-radius: 22%; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); }
@media (max-width: 860px) {
  html:not(.js) .hero__icon, .no-webgl .hero__icon { position: static; transform: none; width: min(22vmin, 120px); margin: 0 0 1.2em; }
}
html:not(.js) #scena, .no-webgl #scena { display: none; }

/* plynulé posúvanie (Lenis, ako Rise) */

/* ---------- horná lišta ---------- */
.topbar {
  position: fixed; z-index: 20; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 18px;
  padding: 14px var(--gutter);
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  background: linear-gradient(var(--topbar), transparent);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.brand { color: var(--ink); }
.brand__logo { height: 34px; width: auto; aspect-ratio: 282 / 92; flex: none; display: block; }
.jump { margin-left: auto; display: flex; gap: clamp(14px, 2vw, 34px); }
.jump a { font: 500 .78rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--muted); padding: 8px 0; }
.jump a:hover { color: var(--accent-ink); }
.theme { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--accent-soft);
  color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: transform .2s var(--ease); }
.theme:hover { transform: rotate(-12deg); }
.theme svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.theme__moon { fill: currentColor !important; stroke: none !important; }
[data-theme="dark"] .theme__moon { display: none; }
[data-theme="light"] .theme__sun { display: none; }

/* ---------- kapitoly (rytmus Rise: ~78 % okna, záver 86 %) ---------- */
main { position: relative; z-index: 2; }
.chapter { position: relative; min-height: 78lvh; display: flex; }
.chapter--hero { min-height: 100lvh; }
.chapter--end { min-height: 86lvh; }
/* záver: obsah pri spodku kapitoly, aby bol na konci stránky celý pod hornou lištou aj nad pätičkou */
.chapter--end .chapter__inner { justify-content: flex-end; padding-bottom: clamp(16px, 3vh, 40px); }
.chapter__inner { width: min(100% - 2 * var(--gutter), var(--maxw) - 2 * var(--gutter)); margin-inline: auto;
  padding-block: clamp(84px, 11vh, 150px) clamp(28px, 6vh, 90px); will-change: opacity; }

.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 1.4em;
  font: 500 .78rem/1.3 var(--mono); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.eyebrow__i { color: var(--accent-ink); white-space: nowrap; }
.eyebrow__line { width: 26px; height: 1px; background: currentColor; opacity: .5; flex: none; }
.eyebrow--c { }

.title, .hero__title { font-family: var(--serif); font-weight: 500; letter-spacing: -.028em; line-height: 1.06; margin: 0; color: var(--ink); text-wrap: balance; }
.title { font-size: clamp(2.3rem, min(5.1vw, 9.6vh), 8.2rem); max-width: 12.5ch; }
.hero__title { font-size: clamp(2.7rem, min(6.4vw, 11.8vh), 10rem); max-width: 12.5ch; }
/* zvýraznené slovo: kurzíva Literaty + pás zvýrazňovača (nie farebné/žiariace posledné slovo ako na ostatných weboch) */
.title em, .hero__title em { font-style: italic; color: var(--ink); letter-spacing: -.012em; padding: 0 .06em; margin: 0 -.06em;
  background: linear-gradient(transparent 60%, var(--marker) 60%, var(--marker) 90%, transparent 90%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.lead, .body { max-width: 42ch; color: var(--ink); opacity: .88; margin: 0; font-size: clamp(1.05rem, min(1.2vw, 2.1vh), 1.55rem); }
.lead { margin-top: 1.4em; }

.badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; margin: 2em 0 0; padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--accent-soft); font: 600 .78rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); animation: pulz 2.4s ease-in-out infinite; }
@keyframes pulz { 50% { box-shadow: 0 0 0 9px transparent; } }

/* úvod: text vľavo, logo z častíc vpravo */
.chapter--hero .chapter__inner { display: flex; flex-direction: column; justify-content: center; }
.scrollhint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); margin: 0;
  font: 500 .72rem/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.scrollhint::after { content: ""; display: block; width: 1px; height: 34px; margin: 10px auto 0; background: linear-gradient(var(--muted), transparent); animation: kvapka 2s ease-in-out infinite; }
@keyframes kvapka { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* „do rohov": popis hore na jednej strane, nadpis dole na druhej, motív v strede */
.corners { display: grid; grid-template-rows: auto 1fr auto; min-height: 100%; }
.corners__top { justify-self: end; max-width: 46ch; }
.corners .title { grid-row: 3; justify-self: start; }
.corners--flip .corners__top { justify-self: start; }
.corners--flip .title { justify-self: end; text-align: right; }

.centered { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.title--c { max-width: 13ch; }  /* Literata je širšia ako Playfair — záver ostáva na 2 riadky */
.body--c { margin: 1.4em 0 0; }
.badge--c { margin-inline: 0; }

.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .65em; font-size: clamp(1.05rem, min(1.2vw, 2.1vh), 1.5rem); }
.facts li { display: flex; gap: .7em; align-items: baseline; }
.facts li::before { content: ""; flex: none; width: .55em; height: .55em; border-radius: 2px; transform: rotate(45deg) translateY(-.08em); background: var(--accent); }

/* ---------- balíček lekcií (podľa sekcie cards-cascade, prerobené na lekcie) ---------- */
.deck { position: relative; height: calc(100lvh + 17 * 15vh); }
.deck__stage { position: sticky; top: 0; height: 100lvh; overflow: clip; width: min(100%, var(--maxw)); margin-inline: auto; }
.deck__intro { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); width: min(40%, 34rem); }
.deck__intro .title { font-size: clamp(2.3rem, min(4.6vw, 9vh), 7.5rem); }
.deck__intro .body { margin-top: 1.2em; }
.deck__count { margin: 1.6em 0 0; font: 600 .9rem/1 var(--mono); letter-spacing: .2em; color: var(--muted); }
.deck__count span { color: var(--accent-ink); }
.deck__cards { list-style: none; margin: 0; padding: 0; position: absolute; left: 67%; top: 50%; width: 0; height: 0;
  perspective: var(--persp, 1600px); perspective-origin: 50% 30%; transform-style: preserve-3d; }
.card {
  position: absolute; left: calc(var(--cw) / -2); top: calc(var(--ch) / -2); width: var(--cw); height: var(--ch);
  display: grid; grid-template-rows: auto auto 1fr auto; gap: .5em; padding: calc(var(--cw) * .08);
  border-radius: calc(var(--cw) * .07); background: var(--card); color: var(--card-ink);
  border: 1px solid var(--card-edge); box-shadow: var(--card-shadow);
  will-change: transform, opacity; backface-visibility: hidden; transform-origin: 50% 100%;
  font-size: calc(var(--cw) * .052);
}
[data-theme="dark"] .card { background:
  radial-gradient(120% 80% at 100% 0%, rgba(84, 240, 255, .12), transparent 60%),
  linear-gradient(180deg, #111d24, #090f13); }
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,calc(var(--sheen, .3) * .16)), transparent 45%); }
.card__mod { font: 600 max(11px, .74em)/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.card__code { font-family: var(--serif); font-size: 2.4em; line-height: 1; color: var(--accent-ink); font-style: italic; }
.card__title { align-self: end; font-family: var(--serif); font-size: 1.62em; line-height: 1.12; font-weight: 500; text-wrap: balance; }
.card__meta { font: 600 max(11px, .74em)/1.35 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  padding-top: .9em; border-top: 1px solid var(--line); }

/* ---------- pätička ---------- */
.foot { position: relative; z-index: 2; padding: clamp(28px, 5vh, 72px) var(--gutter) 24px; background: var(--bg); font-size: .9rem; color: var(--muted); }
/* pätička je nepriehľadná (častice za ňou nepresvitajú cez údaje firmy), prechod len tenkým závojom nad ňou */
.foot::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 36px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.foot__grid { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr; gap: 32px; max-width: calc(var(--maxw) - 2 * var(--gutter)); margin-inline: auto; border-top: 1px solid var(--line); padding-top: 32px; }
.foot p { margin: 0 0 .6em; }
.foot__brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--serif); font-size: 1.1rem; flex-wrap: wrap; }
.foot__logo { height: 28px; width: auto; aspect-ratio: 282 / 92; display: block; }
.foot__h { font: 600 .72rem/1 var(--mono) !important; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); margin-bottom: 1em !important; }
.foot a { color: var(--accent-ink); }
.foot__copy { max-width: calc(var(--maxw) - 2 * var(--gutter)); margin: 28px auto 0 !important; font-size: .8rem; }

/* ---------- mobil ---------- */
@media (max-width: 860px) {
  .jump { display: none; }
  .theme { margin-left: auto; }
  .brand__logo { height: 30px; }
  .chapter { min-height: 82svh; }
  .chapter--end .chapter__inner { justify-content: flex-end; padding-bottom: 72px; }
  .chapter--hero { min-height: 100svh; }
  .chapter--hero .chapter__inner { justify-content: flex-end; padding-bottom: 92px; }
  .corners { grid-template-rows: auto 1fr auto; }
  .corners__top, .corners--flip .corners__top { justify-self: stretch; }
  .corners .title, .corners--flip .title { justify-self: start; text-align: left; }
  .corners__top, .lead, .facts { background: var(--scrim); padding: 14px 16px; border-radius: 14px;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .corners__top .body, .corners__top .facts { background: none; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .eyebrow { letter-spacing: .16em; font-size: .72rem; }
  .title { font-size: clamp(2.4rem, 11vw, 3.6rem); }
  .hero__title { font-size: clamp(2.5rem, 11.5vw, 4.2rem); }  /* Literata je širšia — kurzíva s pásom ostáva v okraji */
  .foot__grid { grid-template-columns: 1fr; gap: 22px; }
}
/* balíček na výšku telefónu: úvod hore, karty dole (naležato ostáva vedľa seba ako na počítači) */
@media (max-width: 860px) and (max-aspect-ratio: 5/4) {
  .deck__intro { top: 76px; transform: none; width: auto; right: var(--gutter); }
  .deck__intro .title { font-size: clamp(2rem, 9vw, 3rem); }
  .deck__intro .body { font-size: 1rem; }
  .deck__count { margin-top: .8em; }
  .deck__cards { left: 50%; top: 66%; }
}
@media (max-width: 860px) and (min-aspect-ratio: 5/4) {
  .deck__intro { width: min(46%, 30rem); }
  .deck__intro .title { font-size: clamp(1.7rem, 4.4vw, 2.6rem); }
  .deck__intro .body { font-size: .95rem; }
  .deck__cards { left: 72%; top: 54%; }
  .hero__title { font-size: clamp(2.2rem, 7vw, 3.4rem); }
  .title { font-size: clamp(2rem, 6vw, 3rem); }
}
/* telefón na výšku: kapitola = jedna obrazovka (s dosadaním na kotvy je to jeden pokojný záber na kapitolu
   a motív má medzi popisom a nadpisom dosť miesta — na 390×664 asi 2× väčší než pri 82svh) */
@media (max-width: 860px) and (max-aspect-ratio: 5/4) {
  .chapter { min-height: 100svh; }
  /* balíček: karta = 40 % výšky okna posunu (na počítači 15 %) — bežný švih prstom = jedna karta, nič sa nepreskočí */
  .deck { height: calc(100lvh + 17 * 40svh); }
}
/* veľmi nízke okno (375×553, 320×568): v úvode bez odznaku a nápisu „Posúvajte" (odznak je aj v závere), aby sa logo zmestilo */
@media (max-width: 860px) and (max-height: 600px) and (max-aspect-ratio: 5/4) {
  .chapter--hero .badge, .scrollhint { display: none; }
  .chapter--hero .chapter__inner { padding-bottom: 24px; }
  .chapter--hero .eyebrow { margin-bottom: .9em; }
  .chapter--hero .hero__title { font-size: clamp(2.1rem, 10vw, 2.5rem); }
  .chapter--hero .lead { font-size: .92rem; line-height: 1.45; margin-top: .8em; padding: 10px 14px; }
}
/* nízke okno telefónu (Safari s lištami): kratší úvod, aby zostalo miesto na logo nad textom */
@media (max-width: 860px) and (max-height: 760px) and (max-aspect-ratio: 5/4) {
  .chapter--hero .chapter__inner { padding-bottom: 64px; }
  .chapter--hero .lead { font-size: .98rem; margin-top: 1em; }
  .chapter--hero .badge { margin-top: 1.2em; }
  .scrollhint { bottom: 12px; }
  .scrollhint::after { height: 22px; margin-top: 6px; }
}
/* nadpis sa nikdy nestratí v mraku častíc: tenký obrys farbou pozadia */
.title, .hero__title { text-shadow: 0 0 .5em var(--bg), 0 0 .15em var(--bg); }
[data-theme="dark"] .title em, [data-theme="dark"] .hero__title em { text-shadow: 0 0 .15em var(--bg), 0 0 34px rgba(84, 240, 255, .35); }

/* ---------- balíček bez skriptu: obyčajná mriežka kariet ---------- */
html:not(.deck-on) .deck { height: auto; }
html:not(.deck-on) .deck__stage { position: relative; height: auto; overflow: visible; padding: clamp(84px, 11vh, 150px) var(--gutter) 40px; }
html:not(.deck-on) .deck__intro { position: static; transform: none; width: auto; max-width: 40rem; }
html:not(.deck-on) .deck__count { display: none; }
html:not(.deck-on) .deck__cards { position: static; width: auto; height: auto; perspective: none; transform-style: flat; margin-top: 32px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 16px; }
html:not(.deck-on) .card { position: relative; left: auto; top: auto; width: auto; height: auto; min-height: 210px; padding: 20px; border-radius: 18px; font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}