/* PitArena výloha – 1920×1080 stage scaled to any screen. Readable from 3–5 m. */
:root{
  --red:#ce1212; --red2:#ff2a2a; --ink:#0b0b0c; --white:#fff; --mute:#c9c9c9;
  --cond:'Barlow Condensed',Arial Narrow,sans-serif; --sans:'Barlow',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;background:#000;overflow:hidden;cursor:none}
#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:center;background:var(--ink);overflow:hidden;color:#fff;font-family:var(--sans)}
#layers{position:absolute;inset:0}
.scene{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.scene.on{opacity:1}

/* media */
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene.on .bg.kb{animation:kb var(--dur,12s) linear forwards}
.scene.on .bg.kb.r{animation-name:kbr}
@keyframes kb{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.16) translate(-1.5%,-1%)}}
@keyframes kbr{from{transform:scale(1.16) translate(-1.5%,0)}to{transform:scale(1.04) translate(0,0)}}
.shade-l{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,9,.94) 0%,rgba(8,8,9,.82) 38%,rgba(8,8,9,.15) 70%,rgba(8,8,9,0) 100%)}
.shade-b{position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,8,9,.92) 0%,rgba(8,8,9,.35) 45%,rgba(8,8,9,0) 70%)}
.shade-all{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(8,8,9,.86) 0%,rgba(8,8,9,.7) 55%,rgba(8,8,9,.5) 100%)}
.shade-t{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,9,.55) 0%,rgba(8,8,9,0) 22%)}

/* chrome */
#chrome{position:absolute;top:44px;left:64px;right:64px;display:flex;justify-content:space-between;align-items:flex-start;z-index:5;pointer-events:none}
.brand{height:200px;filter:drop-shadow(0 4px 18px rgba(0,0,0,.6))}
.clock{font:600 44px/1 var(--cond);letter-spacing:.04em;text-shadow:0 2px 12px rgba(0,0,0,.7);opacity:.9}
#progress{position:absolute;left:0;right:0;bottom:0;height:8px;background:rgba(255,255,255,.08);z-index:5}
#progress i{display:block;height:100%;width:0;background:var(--red)}

/* type */
.kicker{display:inline-block;font:800 34px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--red);padding:12px 20px 10px;transform:skewX(-10deg)}
.kicker span{display:inline-block;transform:skewX(10deg)}
h1.t{font:900 132px/.92 var(--cond);text-transform:uppercase;letter-spacing:-.005em;margin-top:30px}
p.lead{font:500 44px/1.28 var(--sans);color:#eee;margin-top:34px;max-width:900px}
.anim>*{opacity:0;transform:translateY(40px)}
.scene.on .anim>*{animation:up .8s cubic-bezier(.2,.8,.2,1) forwards}
.scene.on .anim>*:nth-child(2){animation-delay:.35s}
.scene.on .anim>*:nth-child(3){animation-delay:.7s}
.scene.on .anim>*:nth-child(4){animation-delay:1.05s}
.scene.on .anim>*:nth-child(5){animation-delay:1.4s}
@keyframes up{to{opacity:1;transform:none}}

/* layout blocks */
.left{position:absolute;left:110px;top:250px;width:1000px}
.bottom{position:absolute;left:110px;right:110px;bottom:110px}

/* ATMO: lines appear one by one, big */
.atmo .lines{position:absolute;left:110px;bottom:120px}
.atmo .ln{font:900 150px/.95 var(--cond);text-transform:uppercase;opacity:0;transform:translateX(-60px);text-shadow:0 6px 30px rgba(0,0,0,.6)}
.atmo .ln:last-child{color:var(--red2)}
.scene.on.atmo .ln{animation:inx .7s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes inx{to{opacity:1;transform:none}}

/* FACT */
.fact .series{font:800 38px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--red2)}
.fact .series:before{content:"";display:inline-block;width:70px;height:6px;background:var(--red);vertical-align:middle;margin-right:22px;transform:translateY(-4px)}
.fact .big{font:900 300px/.85 var(--cond);letter-spacing:-.02em;margin-top:30px;white-space:nowrap}
.fact .big small{font-size:96px;letter-spacing:.02em;margin-left:22px;color:var(--red2)}
.fact .src{font:500 26px/1 var(--sans);color:#8d8d8d;margin-top:40px}

/* REVIEW */
.review .card{position:absolute;left:110px;top:260px;width:1060px}
.review .stars{font-size:70px;letter-spacing:8px;color:#ffc61a;line-height:1}
.review .score{font:800 40px/1 var(--cond);letter-spacing:.06em;margin-top:18px;color:#ddd;text-transform:uppercase}
.review .score b{color:#fff;font-size:56px}
.review blockquote{font:600 54px/1.24 var(--sans);margin-top:44px;position:relative}
.review blockquote:before{content:"";position:absolute;left:-46px;top:8px;bottom:8px;width:10px;background:var(--red)}
.review .who{font:700 34px/1.2 var(--sans);margin-top:40px}
.review .who span{display:block;font-weight:500;font-size:28px;color:#9a9a9a;margin-top:6px}

/* OFFER */
.offer .price{display:flex;align-items:baseline;gap:22px;margin-top:40px}
.offer .price b{font:900 96px/1 var(--cond);color:#fff;background:var(--red);padding:10px 26px 4px;transform:skewX(-8deg);display:inline-block}
.offer .price span{font:500 32px/1.2 var(--sans);color:#ccc}
.qrbox{position:absolute;right:110px;bottom:110px;display:flex;align-items:center;gap:30px;opacity:0}
.scene.on .qrbox{animation:up .8s 1.6s cubic-bezier(.2,.8,.2,1) forwards}
.qrbox .qr{width:250px;height:250px;background:#fff;padding:14px;border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.qrbox .qr img{width:100%;height:100%;display:block}
.qrbox .ql{font:700 34px/1.25 var(--sans);text-align:right;text-shadow:0 2px 14px rgba(0,0,0,.8)}
.qrbox .ql:after{content:"→";display:block;font:900 70px/1 var(--cond);color:var(--red2);margin-top:6px}

/* LIST (season) */
.list .rows{margin-top:20px}
.list .row{display:flex;align-items:baseline;gap:40px;padding:13px 0;border-bottom:2px solid rgba(255,255,255,.14);font:800 56px/1 var(--cond);text-transform:uppercase}
.list .row b{color:var(--red2);width:200px;font-weight:900}
.list .rows .row{opacity:0;transform:translateX(-40px)}
.scene.on.list .rows .row{animation:inx .6s cubic-bezier(.2,.8,.2,1) forwards}
.list .foot{font:500 36px/1.3 var(--sans);color:#ddd;margin-top:34px;max-width:1000px}

/* STORE */
.store .wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.store .status{font:900 160px/.9 var(--cond);text-transform:uppercase}
.store .status.open{color:#fff}
.store .status.open em{font-style:normal;color:#38d26b}
.store .status.closed em{font-style:normal;color:var(--red2)}
.store .status.unknown em{font-style:normal;color:#f2c230}
.store .sub{font:600 52px/1.2 var(--sans);margin-top:30px}
.store .meta{display:flex;gap:70px;margin-top:70px;font:700 40px/1.2 var(--sans)}
.store .meta div span{display:block;font:800 30px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--red2);margin-bottom:12px}
.dot{display:inline-block;width:34px;height:34px;border-radius:50%;background:#38d26b;margin-right:26px;vertical-align:middle;box-shadow:0 0 0 0 rgba(56,210,107,.7);animation:pulse 1.8s infinite;transform:translateY(-14px)}
.closed .dot{background:var(--red);animation:none}
@keyframes pulse{70%{box-shadow:0 0 0 28px rgba(56,210,107,0)}100%{box-shadow:0 0 0 0 rgba(56,210,107,0)}}

/* debug/preview badge */
#dbg{position:absolute;right:20px;bottom:20px;z-index:9;font:600 18px var(--sans);background:rgba(0,0,0,.6);padding:6px 10px;border-radius:6px;display:none}