/* Společný základ obou návrhů: písmo, barvy, zúžení, tlačítka, zvuk, efekty. */
@font-face{font-family:"Roboto Black";font-weight:900;font-display:swap;src:url(fonts/Roboto-Black.ttf) format("truetype")}

:root{--cern:#0a0708;--uhel:#130f0f;--popel:#2e2422;--krev:#c1272d;--ohen:#ff5a1e;--zhava:#ffa33c;--chrom:#e4e8ed;--ocel:#a39b97}
*{box-sizing:border-box}
html{background:var(--cern);color:var(--chrom);-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth}
body{margin:0;font:900 16px/1.5 "Roboto Black",Roboto,Arial,sans-serif;overflow-x:hidden;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

/* Jediné písmo je Roboto Black; zúžení na 70 % šířky při 100 % výšky (zadání kapely). */
.t{text-transform:uppercase;line-height:.92;margin:0}
.sq{width:142.857%;margin-left:-21.4285%;transform:scaleX(.7);transform-origin:50% 0}
p{margin:0 0 1em}
.txt{color:var(--ocel);font-size:16px;line-height:1.55}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;text-transform:uppercase;font-size:17px;letter-spacing:.03em;background:var(--krev);color:#fff;border-radius:2px;transition:background .25s,transform .25s,box-shadow .25s}
.btn:hover{background:var(--ohen);transform:translateY(-1px);box-shadow:0 8px 24px rgba(255,90,30,.25)}
.btn.o{background:rgba(10,7,8,.35);border:2px solid var(--chrom)}
.btn.o:hover{background:var(--chrom);color:var(--cern);box-shadow:none}
.stitek{font-size:13px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--ocel);margin:0 0 10px;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.stitek.zar{color:var(--zhava)}
.linka{width:56px;height:3px;background:var(--krev);margin:14px 0 18px}

/* Fotky: nikdy neoříznout členy kapely — kontejner drží poměr fotky. */
.foto{position:relative;aspect-ratio:4/3;overflow:hidden;background:#000 center/cover no-repeat}
.foto.sirsi{aspect-ratio:3/2}
.foto img{width:100%;height:100%;object-fit:cover}

/* Zvuk: tlačítko nahoře vedle menu, aby nezakrývalo obsah ani tlačítka dole. Nikdy nehraje samo. */
#zvuk{position:fixed;right:64px;top:calc(12px + env(safe-area-inset-top));z-index:50;display:flex;align-items:center;gap:9px;height:44px;padding:0 14px;border:1px solid var(--popel);border-radius:24px;background:rgba(10,7,8,.85);font-size:13px;text-transform:uppercase;letter-spacing:.06em;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;transition:border-color .25s}
#zvuk:hover{border-color:var(--ocel)}
#zvuk i{width:10px;height:10px;border-radius:50%;background:var(--ocel);transition:background .3s,box-shadow .3s}
#zvuk.on i{background:var(--ohen);box-shadow:0 0 10px var(--ohen);animation:tep 1.4s ease-in-out infinite}
@keyframes tep{50%{box-shadow:0 0 18px var(--ohen)}}

/* Efekty, střídmě: filmové zrno, vyjetí bloků při rolování, pomalý nájezd úvodní fotky. */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.07;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat}
/* Pohyb: výrazný, ale jednou. Věci vjedou jednou, pak stojí. */
.js .rv,.js .stag>*{opacity:0;transform:translateY(56px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.js .rv-l{transform:translateX(-110px)}
.js .rv-r{transform:translateX(110px)}
/* Fotka se odkryje zleva: přes ni leží černá clona, která odjede doprava.
   Ořez (clip-path) na samotném sledovaném prvku nejde, prohlížeč by ho
   pak považoval za neviditelný a fotka by se nikdy neukázala. */
.js .rv-f{opacity:1;transform:none}
.js .rv-f::before{content:"";position:absolute;inset:0;z-index:2;background:var(--cern);transform-origin:100% 50%;transition:transform 1.3s cubic-bezier(.2,.7,.2,1)}
.js .rv-f.in::before{transform:scaleX(0)}
.js .rv.in,.js .stag.in>*{opacity:1;transform:none}
.js .stag>*:nth-child(2){transition-delay:.12s}
.js .stag>*:nth-child(3){transition-delay:.24s}
.js .stag>*:nth-child(4){transition-delay:.36s}
.js .stag>*:nth-child(5){transition-delay:.48s}
.js .stag>*:nth-child(6){transition-delay:.6s}
.js .stag>*:nth-child(n+7){transition-delay:.72s}
/* Co je vidět už při načtení, vjede až po úvodních textech (efekty.js dá třídu .hned). */
.js .rv.hned,.js .stag.hned>*{transition-delay:1.1s}
.js .stag.hned>*:nth-child(2){transition-delay:1.22s}
.js .stag.hned>*:nth-child(3){transition-delay:1.34s}
.js .stag.hned>*:nth-child(4){transition-delay:1.46s}
.js .stag.hned>*:nth-child(5){transition-delay:1.58s}
.js .stag.hned>*:nth-child(6){transition-delay:1.7s}
.js .stag.hned>*:nth-child(n+7){transition-delay:1.82s}
/* Úvod se hýbe hned po načtení, bez čekání na rolování. Fotka se začne odkrývat
   hned, texty vjedou až po ní, o 0,5 s později (Martin 11. 9. 2026). */
.vjezd>*{animation:vjezd 1s cubic-bezier(.2,.7,.2,1) .5s both}
.vjezd>*:nth-child(2){animation-delay:.65s}
.vjezd>*:nth-child(3){animation-delay:.8s}
.vjezd>*:nth-child(4){animation-delay:.95s}
.vjezd>*:nth-child(5){animation-delay:1.1s}
@keyframes vjezd{from{opacity:0;transform:translateY(44px)}}
/* Zúžený nadpis (.sq) si při vjezdu musí zúžení nechat, jinak by se smrskával. */
.vjezd>.sq{animation-name:vjezd-sq}
@keyframes vjezd-sq{from{opacity:0;transform:translateY(44px) scaleX(.7)}}
.najezd{animation:odkryt 1.3s cubic-bezier(.2,.7,.2,1) both}
.najezd img{animation:najezd 16s ease-out both}
@keyframes odkryt{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes najezd{from{transform:scale(1.08)}to{transform:scale(1)}}
.zar-cara{height:1px;background:linear-gradient(90deg,transparent,var(--krev) 30%,var(--ohen) 50%,var(--krev) 70%,transparent)}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv,.js .stag>*,.js .rv-f{opacity:1;transform:none;clip-path:none}
  .js .rv-f::before{display:none}
}