/* FARKYNG v004 — Úvod (package C). Uses tokens.css + plates.css; no inline styles (CSP). */
.head{margin:0;font:inherit}
.scene img,.door-scene img{width:100%;height:100%;object-fit:cover}

/* ---------- 1 Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:flex-end;padding:120px var(--gutter) 90px;overflow:hidden;isolation:isolate}
.hero-poster,.hero-video{position:absolute;inset:0;width:100%;height:100%}
.hero-poster{z-index:-3}
.hero-poster img,.hero-video{object-fit:cover;width:100%;height:100%;object-position:0% 50%} /* vlevo kámen se symbolem, čakan a FARKYNG: ořezává se jen zprava, nikdy zleva (Farky 12. 10. 2026) */
.hero-video{z-index:-2;opacity:0;transition:opacity .8s ease}
.hero-video.is-playing{opacity:1}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 34% 40% at 72% 55%,rgba(8,10,12,.5),rgba(8,10,12,0) 100%),linear-gradient(90deg,transparent 42%,rgba(8,10,12,.35) 62%,rgba(8,10,12,.55)),linear-gradient(0deg,var(--night),transparent 22%)}
.hero-copy{width:min(46%,640px)}
.eyebrow{font:600 14px/1.3 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:#e7dccb;margin:0 0 18px;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.hero h1{margin:0}
.wordmark{width:100%;height:auto;filter:drop-shadow(0 10px 24px rgba(0,0,0,.6))}
.motto{font:600 14px/1.3 var(--ui);letter-spacing:.32em;color:var(--bronze-hi);margin:22px 0 34px;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.actions{display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.hero .btn--ghost{text-shadow:0 1px 8px rgba(0,0,0,.8)}

/* Hero v003 na šířku (Farky 12. 10. 2026): obraz celý (postava je důležitá), FARKYNG nad korouhví, motto a tlačítka pod ní.
   Obraz je ukotven vlevo (ořez jen zprava; svisle na střed). Pozice se počítají z geometrie plakátu 16:9 přes jednotky
   kontejneru: šířka obrazu W = max(100cqw, 177.78cqh), výška H = max(100cqh, 56.25cqw); bod (fx, fy) leží na
   fx·W, (100cqh - H)/2 + fy·H. Žerď ~0.52, hrot 0.18, látka 0.53–0.71 × 0.24–0.75. */
@media (min-width:761px) and (min-aspect-ratio:1/1){
  .hero{display:block;padding:0;container-type:size;height:100svh;min-height:560px}
  .hero::after{background:linear-gradient(180deg,rgba(8,10,12,.45),rgba(8,10,12,0) 22%),linear-gradient(0deg,var(--night),rgba(14,20,26,.55) 18%,rgba(14,20,26,0) 34%)}
  .hero-copy{position:absolute;inset:0;width:auto;margin:0;pointer-events:none;
    --W:max(100cqw,177.78cqh);--H:max(100cqh,56.25cqw);--x0:0px;--y0:calc((100cqh - var(--H)) / 2);
    --left:calc(var(--x0) + .535 * var(--W))}
  .hero-copy>*{position:absolute;left:var(--left);margin:0;pointer-events:auto}
  .hero h1{top:max(78px,calc(var(--y0) + .07 * var(--H)));width:calc(.19 * var(--W))}
  .hero .motto{top:calc(var(--y0) + .77 * var(--H))}
  .hero .eyebrow{top:calc(var(--y0) + .77 * var(--H) + 30px);color:var(--ivory-dim)}
  .hero .actions{top:calc(var(--y0) + .77 * var(--H) + 66px);gap:18px}
  .hero .btn{white-space:nowrap}
  .eyebrow,.motto{font-size:13px;letter-spacing:.2em}
}
/* užší obrazovky na šířku (4:3 až 3:2): vpravo od žerdi je málo místa — „Hudba ↓“ je v menu, nadtitulek a motto užší */
@media (min-width:761px) and (min-aspect-ratio:1/1) and (max-aspect-ratio:3/2){
  .hero .btn--ghost{display:none}
  .eyebrow,.motto{font-size:12px;letter-spacing:.12em}
}
@media (min-width:761px) and (max-aspect-ratio:1/1){
  /* tablet na výšku: hero má poměr plakátu 9:16 (bez ořezu), postava pod textem, kámen dole při posunutí */
  .hero{align-items:flex-start;justify-content:center;padding:120px var(--gutter) 0;min-height:max(100svh,177.78vw)}
  .hero-copy{width:min(80%,560px);margin:0;text-align:center}
  .hero::after{background:linear-gradient(180deg,rgba(8,10,12,.55),rgba(8,10,12,.4) 30%,transparent 48%),linear-gradient(0deg,var(--night),transparent 20%)}
  .actions{justify-content:center}
}

/* ---------- 2 Music teaser over scene MUSIC (C06) ---------- */
.teaser{position:relative;min-height:100svh;display:flex;align-items:center;padding:110px var(--gutter);overflow:hidden;isolation:isolate}
.teaser>.scene{position:absolute;inset:0;z-index:-2}
.teaser::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(14,20,26,.9) 0,rgba(14,20,26,.78) 34%,rgba(14,20,26,.25) 62%,rgba(14,20,26,0) 80%),
  linear-gradient(180deg,var(--night) 0,rgba(14,20,26,0) 18%,rgba(14,20,26,0) 82%,var(--night) 100%)}
.teaser-copy{display:grid;gap:22px;justify-items:start;max-width:640px}
.all{margin-top:6px}

/* ---------- 3 Door into the legend (D06) ---------- */
/* Copy sits on the floor (bottom-left) so the oil lamp and mug on the left table stay visible */
.door{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:0 var(--gutter) 4vh;overflow:hidden;isolation:isolate}
.door-scene{position:absolute;inset:0;z-index:-2;transform-origin:69% 52%;transition:transform 900ms cubic-bezier(.6,0,.9,.4)}
.door-scene picture{display:block;width:100%;height:100%}
.door-scene img{object-position:69% 50%}
.door::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--night) 0,rgba(14,20,26,0) 14%),radial-gradient(ellipse 60% 48% at 0% 100%,rgba(14,20,26,.9),rgba(14,20,26,.55) 55%,rgba(14,20,26,0) 100%),linear-gradient(0deg,rgba(14,20,26,.6) 0,rgba(14,20,26,0) 30%)}
.door-copy{max-width:560px;display:grid;gap:18px;justify-items:start}
.first-line{font:400 26px/1.5 var(--read);margin:0;color:var(--ivory);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.door.go .door-scene{transform:scale(2.5)}
.flash{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:0;background:radial-gradient(circle at 69% 52%,#ffe7b8,#d9a66f 40%,#3a2817);transition:opacity 500ms ease 400ms}
.flash.on{opacity:1}

/* ---------- 4 Return (END = D02) ---------- */
.return{position:relative;min-height:60svh;display:flex;align-items:flex-end;justify-content:center;padding:80px var(--gutter) 9vh;overflow:hidden;isolation:isolate;text-align:center}
.return>.scene{position:absolute;inset:0;z-index:-2}
.return>.scene img{object-position:50% 8%}
.return::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(14,20,26,.92) 0,rgba(14,20,26,.45) 45%,rgba(14,20,26,0) 75%),linear-gradient(180deg,var(--night) 0,rgba(14,20,26,0) 22%)}
.return-copy{display:grid;gap:30px;justify-items:center}
.return h2{margin:0;font:400 clamp(40px,6vw,84px)/1.1 var(--read);color:var(--ivory);text-shadow:0 2px 14px rgba(0,0,0,.7)}

/* ---------- Mobile ---------- */
@media (max-width:760px){
  .hero{align-items:flex-start;justify-content:center;padding:92px 20px 0;min-height:110svh}
  .hero-copy{width:100%;text-align:center}
  .hero::after{background:linear-gradient(180deg,rgba(8,10,12,.55),rgba(8,10,12,.4) 30%,transparent 48%),linear-gradient(0deg,var(--night),transparent 20%)}
  .actions{justify-content:center}

  /* The scene keeps running behind the whole track list under a gradient veil */
  .teaser{display:block;min-height:0;padding:58vw 20px 64px}
  .teaser>.scene img{object-position:50% 18%}
  .teaser::after{background:linear-gradient(180deg,var(--night) 0,rgba(14,20,26,.1) 10%,rgba(14,20,26,.25) 30%,rgba(14,20,26,.7) 50%,rgba(14,20,26,.78) 88%,var(--night) 100%)}
  .teaser-copy{gap:18px}

  .door{display:block;min-height:0;padding:0 0 64px}
  .door-scene{position:relative;inset:auto;aspect-ratio:4/3;transform-origin:61% 45%}
  .door-scene img{object-position:50% 50%}
  .door::after{inset:0 0 auto;aspect-ratio:4/3;background:linear-gradient(0deg,var(--night) 0,rgba(14,20,26,0) 35%)}
  .door-copy{position:relative;margin-top:-36px;padding:0 20px;gap:22px}
  .first-line{font-size:21px}
  .flash{background:radial-gradient(circle at 61% 30%,#ffe7b8,#d9a66f 40%,#3a2817)}

  .return{min-height:72svh;padding:60px 20px 56px}
  .return>.scene img{object-position:62% 20%}
}
@media (max-width:360px){
  .motto{letter-spacing:.2em;font-size:13px}
  .hero .btn--ghost{display:none} /* one action per row is enough at this width; the nav links Hudba */
  .hero::after{background:linear-gradient(180deg,rgba(8,10,12,.55),rgba(8,10,12,.45) 40%,transparent 64%),linear-gradient(0deg,var(--night),transparent 20%)}
}