/* HUD font WEBOS (serve.js ho vystavuje z ../WEBOS/public/fonts) */
@font-face { font-family:'nbarchitekt'; src:url('/fonts/nbarchitekt/NBArchitektStd-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'nbarchitekt'; src:url('/fonts/nbarchitekt/NBArchitektStd-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root { --bg:#0a0a0a; --fg:#f2f2f2; --mute:#8a8a8a; --dim:#5a5a5a; --line:#1f1f1f; --card:#121212; --accent:#C4FF00;
  --gutter:clamp(20px,5vw,72px); --hud:'nbarchitekt',ui-monospace,'Cascadia Mono',Consolas,monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
html.case-open { overflow:hidden; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased; }
::selection { background:var(--accent); color:#000; }
a { color:inherit; text-decoration:none; }
section { padding:clamp(80px,12vw,160px) var(--gutter); max-width:1400px; margin:0 auto; }
h1,h2,h3 { font-weight:500; letter-spacing:-.03em; margin:0; line-height:1.05; }
h1 { font-size:clamp(44px,8.4vw,128px); max-width:13ch; letter-spacing:-.045em; }
h2 { font-size:clamp(34px,5.4vw,72px); }
h3 { font-size:22px; letter-spacing:-.01em; }
p { margin:0; }
.lead { color:var(--mute); font-size:clamp(16px,1.5vw,19px); max-width:56ch; margin:0; }
.kicker { color:var(--accent); font:400 12px/1 var(--hud); letter-spacing:.22em; text-transform:uppercase; margin:0; }
.mono { font-family:var(--hud); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.label { color:var(--accent); margin:0 0 22px; display:flex; align-items:center; gap:12px; }
.label::before { content:''; width:28px; height:1px; background:currentColor; transform-origin:left; transform:scaleX(0); transition:transform .8s cubic-bezier(.2,.7,.1,1) .1s; }
.label.in::before { transform:scaleX(1); }

/* logo vlevo nahoře – pozici uvnitř boxu řeší samo logo (anchor/offset z loga) */
kinetic-logo { position:fixed; left:0; top:0; width:240px; height:105px; z-index:50; }

.nav { position:fixed; top:0; right:0; z-index:40; padding:22px var(--gutter); display:flex; align-items:center; gap:28px; }
.nav nav { display:flex; gap:26px; font-size:14px; background:rgba(10,10,10,.55); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); padding:10px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.06); }
.nav a { color:var(--mute); transition:color .2s; }
.nav a:hover { color:var(--fg); }
.status { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--mute); }
.status i { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 rgba(196,255,0,.6); animation:pulse 2.2s infinite; }
@keyframes pulse { 70% { box-shadow:0 0 0 8px rgba(196,255,0,0); } 100% { box-shadow:0 0 0 0 rgba(196,255,0,0); } }

/* ---- hero ---- */
.hero { position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:30px; padding-top:150px; padding-bottom:220px; max-width:none; }
.hero > .kicker, .hero > h1, .hero > .lead, .hero > .row { position:relative; z-index:1; }
.hero-bg { position:absolute; inset:0; overflow:hidden; opacity:0; transition:opacity 2s; pointer-events:none; }
.hero-bg.on { opacity:1; }
.hero-bg video { position:absolute; right:-5%; top:0; width:72%; height:100%; object-fit:cover; opacity:.32; filter:saturate(.8) contrast(1.1);
  -webkit-mask:radial-gradient(ellipse 70% 70% at 60% 50%, #000 30%, transparent 75%); mask:radial-gradient(ellipse 70% 70% at 60% 50%, #000 30%, transparent 75%); }
.hero-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom, transparent 60%, var(--bg)); }
.hero .lead { font-size:clamp(17px,1.6vw,21px); max-width:60ch; color:#a9a9a9; }
.row { display:flex; gap:12px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:999px; background:var(--fg); color:#000; font-weight:500; font-size:15px; line-height:1; font-family:inherit; border:1px solid var(--fg); cursor:pointer; transition:transform .2s, background .2s, border-color .2s, color .2s; }
.btn:hover { background:var(--accent); border-color:var(--accent); transform:translateY(-2px); }
.btn.ghost { background:transparent; color:var(--fg); border-color:#333; }
.btn.ghost:hover { border-color:var(--accent); color:var(--accent); background:transparent; }
.btn.done { border-color:var(--accent); color:var(--accent); }
.hero-meta { position:absolute; z-index:1; left:var(--gutter); right:var(--gutter); bottom:118px; display:grid; grid-template-columns:repeat(3,auto) 1fr; gap:clamp(20px,4vw,64px); align-items:end; font-size:14px; }
.hero-meta div { display:flex; flex-direction:column; gap:6px; }
.hero-meta .mono { color:var(--dim); font-size:10px; }
.scroll-cue { justify-self:end; color:var(--mute); animation:bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform:translateY(5px); } }

/* titulek hera najede zdola */
.split { clip-path:inset(0 0 100% 0); transform:translateY(.3em); transition:clip-path 1.1s cubic-bezier(.2,.7,.1,1), transform 1.1s cubic-bezier(.2,.7,.1,1); }
.split.in { clip-path:inset(0 0 -10% 0); transform:none; }

/* ---- ticker ---- */
.ticker { position:absolute; left:0; right:0; bottom:0; overflow:hidden; border-block:1px solid var(--line); padding:18px 0; white-space:nowrap; }
.ticker-track { display:inline-flex; animation:tick 40s linear infinite; }
.ticker span { font-size:clamp(20px,2.4vw,32px); letter-spacing:-.02em; padding-right:.6em; color:#d6d6d6; }
.ticker span:nth-child(2) { color:var(--dim); }
@keyframes tick { to { transform:translateX(-50%); } }

/* ---- sekce s hlavičkou ---- */
.head { display:flex; justify-content:space-between; align-items:flex-end; gap:32px 64px; flex-wrap:wrap; margin-bottom:64px; }

/* ---- práce ---- */
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:56px 28px; }
.card { cursor:pointer; outline:none; }
.card.wide { grid-column:1/-1; }
.media { position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:var(--card); border:1px solid var(--line); transition:transform .5s cubic-bezier(.2,.7,.1,1), border-color .3s; }
.card[data-work] .media { transform:perspective(1100px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)) scale(var(--sc,1)); transition:transform .35s cubic-bezier(.2,.7,.1,1), border-color .3s; }
.card:hover .media, .card:focus-visible .media { --sc:.985; border-color:#333; }
.card:focus-visible .media { outline:2px solid var(--accent); outline-offset:4px; }
.media video { width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s cubic-bezier(.2,.7,.1,1), filter .4s; filter:saturate(.85) brightness(.9); }
.card:hover .media video { transform:scale(1.04); filter:none; }
/* rámeček hledáčku + timecode + „otevřít“ */
.card[data-work] .media::before, .card[data-work] .media::after { content:''; position:absolute; width:22px; height:22px; border:1.5px solid var(--accent); z-index:2; opacity:0; transition:opacity .3s, transform .4s; pointer-events:none; }
.card[data-work] .media::before { left:16px; top:16px; border-right:0; border-bottom:0; transform:translate(6px,6px); }
.card[data-work] .media::after { right:16px; bottom:16px; border-left:0; border-top:0; transform:translate(-6px,-6px); }
.card:hover .media::before, .card:hover .media::after { opacity:1; transform:none; }
.tc, .open { position:absolute; z-index:2; padding:6px 10px; border-radius:6px; background:rgba(0,0,0,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-size:10px; }
.tc { left:16px; bottom:16px; color:#ddd; }
.tc:empty { display:none; }
.open { right:16px; top:16px; background:var(--accent); color:#000; opacity:0; transform:translateY(-6px); transition:opacity .3s, transform .3s; }
.card:hover .open { opacity:1; transform:none; }
.card-info { display:grid; grid-template-columns:auto 1fr auto; gap:6px 18px; align-items:start; margin-top:20px; }
.card-info .num { color:var(--accent); padding-top:6px; }
.card-info h3 { margin:0 0 6px; }
.card-info p { color:var(--mute); max-width:62ch; }
.card-info .tags { color:var(--dim); padding-top:6px; text-align:right; max-width:30ch; }

/* ---- služby ---- */
.svc { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.svc li { display:grid; grid-template-columns:60px minmax(200px,1.1fr) 1.4fr; gap:12px 32px; padding:36px 0; border-bottom:1px solid var(--line); position:relative; transition:padding .4s cubic-bezier(.2,.7,.1,1); }
.svc li::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(196,255,0,.06), transparent 60%); opacity:0; transition:opacity .4s; pointer-events:none; }
.svc li:hover { padding-left:14px; }
.svc li:hover::before { opacity:1; }
.svc .num { color:var(--accent); padding-top:8px; }
.svc h3 { font-size:clamp(24px,2.6vw,36px); letter-spacing:-.025em; }
.svc p { color:#b0b0b0; font-size:17px; }
.svc .tags { grid-column:3; color:var(--dim); }

/* ---- proces ---- */
.process h2 { margin-bottom:64px; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:s; }
.step { border:1px solid var(--line); border-radius:16px; padding:28px 24px 32px; background:linear-gradient(180deg,#101010,#0b0b0b); display:flex; flex-direction:column; gap:14px; min-height:260px; position:relative; overflow:hidden; }
.step .mono { color:var(--accent); }
.step h3 { font-size:28px; margin-top:auto; }
.step p { color:var(--mute); font-size:15px; }
.step::after { content:''; position:absolute; left:0; top:0; height:2px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .6s cubic-bezier(.2,.7,.1,1); }
.step:hover::after { transform:scaleX(1); }
.step::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s; background:radial-gradient(260px circle at var(--x,50%) var(--y,50%), rgba(196,255,0,.10), transparent 70%); }
.step:hover::before { opacity:1; }
.step > * { position:relative; }

/* ---- o mně ---- */
.about h2 { margin-bottom:56px; }
.about-body { display:grid; grid-template-columns:2fr 1fr; gap:72px; align-items:start; }
.big { font-size:clamp(22px,2.6vw,36px); line-height:1.3; letter-spacing:-.015em; margin:0; }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:40px; color:#a9a9a9; font-size:16px; }
dl { margin:0; display:grid; gap:20px; }
dl div { border-top:1px solid var(--line); padding-top:14px; }
dt { color:var(--dim); font:400 10px/1.4 var(--hud); letter-spacing:.14em; text-transform:uppercase; }
dd { margin:6px 0 0; }

/* ---- citát ---- */
.quote { padding-block:clamp(60px,9vw,120px); }
.quote blockquote { margin:0; border-left:2px solid var(--accent); padding-left:clamp(20px,4vw,48px); }
.quote p { font-size:clamp(28px,4.4vw,60px); line-height:1.1; letter-spacing:-.035em; max-width:22ch; }
.quote cite { display:block; margin-top:24px; color:var(--mute); font-style:normal; }
.quote .w { transition:color .45s, text-shadow .45s; }
.chapters .quote .w:not(.lit) { color:#262626; }
.chapters .quote .w.edge { color:var(--accent); text-shadow:0 0 30px rgba(196,255,0,.35); }

/* ---- FAQ ---- */
.faq .head { margin-bottom:40px; }
.faq-list { border-top:1px solid var(--line); }
details { border-bottom:1px solid var(--line); }
summary { list-style:none; cursor:pointer; padding:26px 48px 26px 0; font-size:clamp(19px,1.8vw,24px); letter-spacing:-.015em; position:relative; transition:color .2s; }
summary::-webkit-details-marker { display:none; }
summary::after { content:'+'; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-weight:300; font-size:28px; line-height:1; color:var(--accent); transition:transform .3s; }
details[open] summary::after { transform:translateY(-50%) rotate(45deg); }
summary:hover { color:var(--accent); }
details p { color:var(--mute); max-width:68ch; padding:0 0 28px; font-size:16px; }

/* ---- kontakt ---- */
.contact { display:flex; flex-direction:column; gap:28px; align-items:flex-start; border-top:1px solid var(--line); }
.contact .label { margin-bottom:0; }
.contact h2 { font-size:clamp(44px,9vw,140px); max-width:12ch; letter-spacing:-.05em; }
.mail-row { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.mail { font-size:clamp(22px,3.2vw,44px); letter-spacing:-.02em; border-bottom:2px solid var(--accent); padding-bottom:4px; transition:color .2s; }
.mail:hover { color:var(--accent); }
.socials { display:flex; gap:24px; color:var(--mute); }
.socials a:hover { color:var(--fg); }

footer { border-top:1px solid var(--line); overflow:hidden; align-self:stretch; margin-top:auto; margin-inline:calc(-1 * var(--gutter)); }
.foot-big { font-size:clamp(48px,13.5vw,240px); font-weight:600; letter-spacing:-.06em; line-height:.8; white-space:nowrap; padding:48px var(--gutter) 0; color:#151515; transition:color .6s; user-select:none; }
footer:hover .foot-big { color:#1c1c1c; }
.foot-row { display:flex; flex-wrap:wrap; gap:12px 32px; justify-content:space-between; padding:28px calc(var(--gutter) + 90px) 32px var(--gutter); color:var(--mute); font-size:13px; }
.foot-row .hint { color:#2c2c2c; transition:color .3s; }
.foot-row .hint:hover { color:var(--accent); }
.totop:hover { color:var(--fg); }

/* ---- reveal ---- */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.2,.7,.1,1), transform .9s cubic-bezier(.2,.7,.1,1); }
.reveal.in { opacity:1; transform:none; }
.grid .reveal:nth-child(3), .steps .reveal:nth-child(2), .svc .reveal:nth-child(2) { transition-delay:.08s; }
.steps .reveal:nth-child(3), .svc .reveal:nth-child(3) { transition-delay:.16s; }
.steps .reveal:nth-child(4), .svc .reveal:nth-child(4) { transition-delay:.24s; }

/* ---- detail projektu: video přes celou obrazovku, info najíždí přes něj (case.js) ----
   --p = kolik textu je vidět (0–1, video tmavne), --cover = zoom z celého snímku na výřez přes obrazovku */
.case { position:fixed; inset:0; z-index:70; background:#000; opacity:0; transition:opacity .4s; -webkit-touch-callout:none; --p:0; --cover:1; }
.case[hidden] { display:none; }
.case.in { opacity:1; }
.case-stage { position:absolute; inset:0; overflow:hidden; background:#000; }
.case-stage video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transform:scale(calc(var(--cover) * (1 + var(--p) * .06))); filter:brightness(calc(1 - var(--p) * .55)) saturate(calc(1 - var(--p) * .3)); transition:transform 1.1s cubic-bezier(.7,0,.15,1), filter .3s; }
.case.cinema .case-stage video { transform:none; filter:none; }
.case-shade { position:absolute; inset:0; pointer-events:none; transition:opacity .8s;
  background:linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.35) 38%, transparent 62%), linear-gradient(to bottom, rgba(0,0,0,.65), transparent 140px); }
.case.cinema .case-shade { opacity:0; }
.case-bar { position:absolute; left:0; right:0; top:0; z-index:3; display:flex; align-items:center; gap:20px; padding:16px var(--gutter); transition:opacity .5s, transform .5s; }
.case.cinema .case-bar { background:linear-gradient(to bottom, rgba(0,0,0,.7), transparent); }
.case.cinema.idle .case-bar { opacity:0; transform:translateY(-10px); }
.case.cinema.idle, .case.cinema.idle * { cursor:none; }
.case-idx { color:var(--accent); }
.case-bar-title { font-weight:500; white-space:nowrap; }
.case-ctrl { flex:1; display:flex; align-items:center; gap:14px; min-width:0; margin-left:12px; }
.case-ctrl button { background:rgba(20,20,20,.55); border:1px solid rgba(255,255,255,.14); color:var(--fg); border-radius:999px; height:36px; cursor:pointer; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:border-color .2s, color .2s; font:700 10px/1 var(--hud); letter-spacing:.12em; padding:0 14px; }
.case-ctrl button:hover { border-color:var(--accent); color:var(--accent); }
.cc-play { width:36px; padding:0 !important; display:grid; place-items:center; }
.cc-play span { width:10px; height:12px; border-inline:3px solid currentColor; }
.case.paused .cc-play span { width:0; height:0; border:0; border-left:11px solid currentColor; border-block:7px solid transparent; margin-left:3px; }
.cc-mute.off { color:var(--dim); text-decoration:line-through; }
.cc-time { color:#cfcfcf; white-space:nowrap; text-shadow:0 1px 6px #000; }
.cc-track { position:relative; flex:1; height:22px; cursor:pointer; min-width:60px; }
.cc-track::before, .cc-track i { content:''; position:absolute; left:0; right:0; top:10px; height:2px; background:rgba(255,255,255,.18); transform-origin:left; transition:top .15s, height .15s; }
.cc-track i { transform:scaleX(0); }
.cc-track .cc-buf { background:rgba(255,255,255,.3); }
.cc-track .cc-fill { background:var(--accent); }
.cc-track:hover::before, .cc-track:hover i { top:9px; height:4px; }
.case-nav { display:flex; gap:8px; }
.case-nav button { width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.14); background:rgba(20,20,20,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:var(--fg); font-size:18px; cursor:pointer; transition:border-color .2s, color .2s; }
.case-nav button:hover { border-color:var(--accent); color:var(--accent); }
.case-scroll { position:absolute; inset:0; z-index:2; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; transition:opacity .6s, transform .8s cubic-bezier(.7,0,.15,1); }
.case.cinema .case-scroll { opacity:0; transform:translateY(14vh); pointer-events:none; }
/* úvod = filmový plakát dole vlevo */
.case-hero { min-height:100%; display:flex; flex-direction:column; justify-content:flex-end; gap:18px; padding:120px var(--gutter) 56px; max-width:1400px; margin:0 auto; text-shadow:0 2px 24px rgba(0,0,0,.6); }
.case-tags { color:var(--accent); margin:0; }
.case-title { font-size:clamp(52px,10vw,160px); letter-spacing:-.055em; line-height:.9; transform:translateY(30px); opacity:0; transition:transform 1s cubic-bezier(.2,.8,.2,1) .1s, opacity .8s .1s; }
.case-lead { max-width:44ch; color:#e6e6e6; font-size:clamp(17px,1.5vw,21px); line-height:1.45; transform:translateY(20px); opacity:0; transition:transform 1s cubic-bezier(.2,.8,.2,1) .22s, opacity .8s .22s; }
.case.in .case-title, .case.in .case-lead { transform:none; opacity:1; }
.case-hints { display:flex; gap:28px; flex-wrap:wrap; color:#9a9a9a; margin-top:10px; }
.case-hints > span { display:flex; align-items:center; gap:10px; }
.hold-ico { width:16px; height:16px; border-radius:50%; border:1.5px solid var(--accent); position:relative; }
.hold-ico::after { content:''; position:absolute; inset:3px; border-radius:50%; background:var(--accent); animation:holdhint 2.4s ease-in-out infinite; }
@keyframes holdhint { 0%,100% { transform:scale(.3); opacity:.5; } 50% { transform:scale(1); opacity:1; } }
/* sklo s informacemi: nahoře průhledné, níž rozmazává video pod sebou */
.case-sheet { position:relative; isolation:isolate; }
.case-sheet::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(to bottom, rgba(6,6,6,0), rgba(6,6,6,.72) 200px); backdrop-filter:blur(26px) saturate(1.15); -webkit-backdrop-filter:blur(26px) saturate(1.15);
  -webkit-mask:linear-gradient(to bottom, transparent, #000 200px); mask:linear-gradient(to bottom, transparent, #000 200px); }
.case-inner { max-width:1400px; margin:0 auto; padding:120px var(--gutter) 96px; }
.case-cine-hint { position:absolute; left:50%; bottom:28px; z-index:3; translate:-50% 0; color:rgba(255,255,255,.55); opacity:0; transition:opacity .6s; pointer-events:none; text-shadow:0 1px 8px #000; white-space:nowrap; }
.case.cinema .case-cine-hint { opacity:1; }
.case.cinema.idle .case-cine-hint { opacity:0; }
.case-progress { position:absolute; left:0; right:0; bottom:0; height:2px; z-index:3; opacity:0; transition:opacity .6s; }
.case-progress i { position:absolute; inset:0; background:var(--accent); transform-origin:left; transform:scaleX(0); }
.case.cinema .case-progress { opacity:.9; }
.case-meta { grid-template-columns:repeat(5,1fr); gap:24px; margin:0 0 72px; }
.case-story { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; margin-bottom:80px; }
.case-story h3, .case-frames-head h3 { color:var(--accent); margin-bottom:16px; font-size:11px; letter-spacing:.14em; }
.case-story p { color:#b5b5b5; font-size:16.5px; line-height:1.65; }
.case-frames-head { display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap; color:var(--dim); font-size:13px; }
.case-frames { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; grid-auto-flow:dense; }
.frame { position:relative; aspect-ratio:16/9; border-radius:10px; border:1px solid var(--line); background:#111 center/cover no-repeat; cursor:pointer; overflow:hidden; padding:0; transition:transform .3s, border-color .3s; }
.frame:hover { transform:scale(1.03); border-color:var(--accent); z-index:1; }
.frame span, .frame em { position:absolute; bottom:8px; font-style:normal; font-size:9px; color:#fff; text-shadow:0 1px 4px #000; }
.frame span { left:10px; } .frame em { right:10px; color:var(--accent); }
.frame.loading { background-image:linear-gradient(100deg,#111 30%,#1b1b1b 50%,#111 70%) !important; background-size:200% 100% !important; animation:shim 1.2s linear infinite; }
@keyframes shim { to { background-position:-200% 0; } }
.frame:nth-child(1) { grid-column:span 2; grid-row:span 2; }
.frame:nth-child(6) { grid-column:3 / span 2; grid-row:span 2; }
.case-nextbig { display:flex; flex-direction:column; align-items:flex-start; gap:12px; width:100%; margin-top:96px; padding:48px 0 0; background:none; border:0; border-top:1px solid var(--line); color:var(--fg); cursor:pointer; text-align:left; font:inherit; }
.case-nextbig .mono { color:var(--mute); }
.case-nextbig b { font-size:clamp(40px,7vw,104px); font-weight:500; letter-spacing:-.05em; line-height:1; transition:color .3s, transform .4s; }
.case-nextbig:hover b { color:var(--accent); transform:translateX(12px); }

/* ---- drobnosti (extras.js) ---- */
.grain { position:fixed; inset:-50%; z-index:80; pointer-events:none; opacity:.05; animation:grain 1s steps(6) infinite;
  background-image: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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-4%)} 60%{transform:translate(-4%,-2%)} 80%{transform:translate(3%,3%)} }
.timecode { position:fixed; left:16px; bottom:18px; z-index:45; color:var(--dim); font-size:10px; display:flex; align-items:center; gap:8px; mix-blend-mode:difference; }
.timecode i { width:6px; height:6px; border-radius:50%; background:#ff3b3b; animation:blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity:0; } }
.toast { position:fixed; left:50%; bottom:84px; z-index:95; transform:translate(-50%,16px); opacity:0; transition:opacity .3s, transform .3s; background:#141414; border:1px solid #2a2a2a; color:var(--fg); padding:12px 18px; border-radius:12px; font:400 12px/1.4 var(--hud); letter-spacing:.06em; max-width:calc(100vw - 32px); box-shadow:0 10px 40px rgba(0,0,0,.6); }
.toast.on { opacity:1; transform:translate(-50%,0); }
.cursor { position:fixed; left:0; top:0; z-index:96; pointer-events:none; display:none; }
.has-cursor .cursor { display:block; }
.cursor span { position:absolute; left:0; top:0; translate:-50% -50%; width:10px; height:10px; border-radius:999px; background:var(--accent); mix-blend-mode:difference; transition:width .25s, height .25s, padding .25s, background .25s; display:flex; align-items:center; justify-content:center; white-space:nowrap; font:700 11px/1 var(--hud); letter-spacing:.12em; text-transform:uppercase; color:transparent; overflow:hidden; }
.cursor.hover span { width:34px; height:34px; background:rgba(196,255,0,.9); }
.cursor.big span { width:auto; height:auto; padding:12px 16px; color:#000; mix-blend-mode:normal; }
body.editing .cursor { display:none; }
.cursor .ring { position:absolute; left:0; top:0; width:48px; height:48px; translate:-50% -50%; rotate:-90deg; overflow:visible; opacity:0; transition:opacity .15s; }
.cursor .ring circle { fill:none; stroke:var(--accent); stroke-width:2.5; stroke-dasharray:126; stroke-dashoffset:126; }
.cursor.holding .ring { opacity:1; }
.cursor.holding .ring circle { animation:ringfill var(--hold,.45s) linear forwards; }
.cursor.holding span { width:6px; height:6px; }
@keyframes ringfill { to { stroke-dashoffset:0; } }
.case.cinema.idle ~ .cursor { opacity:0; }

/* Konami: režisérský střih */
html.director body::before, html.director body::after { content:''; position:fixed; left:0; right:0; height:11vh; background:#000; z-index:85; pointer-events:none; animation:bars .8s cubic-bezier(.2,.7,.1,1) both; }
html.director body::before { top:0; } html.director body::after { bottom:0; animation-name:bars2; }
@keyframes bars { from { transform:translateY(-100%); } } @keyframes bars2 { from { transform:translateY(100%); } }
html.director .grain { opacity:.16; }
html.director main { filter:contrast(1.12) saturate(.75) sepia(.12); }
html.rendering main { animation:noise .15s steps(2) infinite; }
@keyframes noise { 50% { filter:blur(.6px) contrast(1.4) brightness(1.1); } }
/* 7× logo: titulky */
.credits { position:fixed; inset:0; z-index:99; background:#000; overflow:hidden; cursor:pointer; animation:fade .5s both; }
.credits.out { animation:fade .5s reverse both; }
@keyframes fade { from { opacity:0; } }
.credits-roll { position:absolute; left:0; right:0; top:100%; text-align:center; animation:roll 22s linear forwards; }
@keyframes roll { to { transform:translateY(calc(-100% - 100vh)); } }
.credits p { margin:0 0 44px; display:flex; flex-direction:column; gap:8px; }
.credits p span { color:var(--mute); font-size:11px; }
.credits p b { font-size:clamp(22px,3vw,36px); font-weight:500; letter-spacing:-.02em; }
.credits p:first-child b, .credits p:nth-child(2) span { color:var(--accent); }
.credits-hint { position:absolute; right:24px; bottom:20px; color:#333; }

/* editor textů (tlačítko vpravo dole) */
.editor { position:fixed; right:16px; bottom:16px; z-index:90; display:flex; gap:8px; align-items:center; }
.ed-bar { display:flex; gap:8px; align-items:center; background:#161616; border:1px solid #2a2a2a; border-radius:999px; padding:6px 6px 6px 16px; }
.ed-bar[hidden] { display:none; }
.ed-hint { font-size:12px; color:var(--mute); }
.ed-btn { font:inherit; font-size:13px; background:#161616; color:var(--fg); border:1px solid #2a2a2a; border-radius:999px; padding:8px 14px; cursor:pointer; }
.ed-btn:hover { border-color:var(--accent); }
.ed-btn.primary { background:var(--accent); color:#000; border-color:var(--accent); }
body.editing [data-edit] { outline:1px dashed rgba(196,255,0,.45); outline-offset:4px; cursor:text; min-width:2ch; }
body.editing [data-edit]:focus { outline:2px solid var(--accent); }
body.editing .card { cursor:default; }
body.editing #edToggle { display:none; }
.ed-index { display:none; }
body.editing .ed-index { display:block; position:fixed; right:16px; top:76px; z-index:89; width:250px; max-height:calc(100vh - 170px); overflow:auto; background:#161616; border:1px solid #2a2a2a; border-radius:12px; font-size:13px; }
.ed-index-h { display:block; width:100%; text-align:left; font-size:10px; letter-spacing:.08em; color:var(--accent); background:none; border:0; padding:10px 14px; cursor:pointer; }
.ed-index.shut .ed-index-body { display:none; }
.ed-index-body { padding:0 14px 10px; }
.ed-index-body p { margin:0 0 10px; display:flex; flex-direction:column; gap:3px; }
.ed-index-body span { font-size:9px; color:var(--mute); }
body.editing .reveal, body.editing .split { opacity:1; transform:none; clip-path:none; }
body.editing .ticker-track { animation-play-state:paused; }

@media (max-width:900px) {
  .status { display:none; }
  .nav nav { gap:14px; padding:8px 14px; font-size:13px; }
  .nav nav a:nth-child(2), .nav nav a:nth-child(3) { display:none; }
  .hero-meta { grid-template-columns:1fr 1fr; position:relative !important; left:auto; right:auto; bottom:auto; margin-top:24px; width:100%; }
  .scroll-cue { display:none; }
  .hero { padding-bottom:80px; }
  .hero-bg video { width:100%; right:0; }
  .grid { grid-template-columns:1fr; }
  .card-info { grid-template-columns:auto 1fr; }
  .card-info .tags { grid-column:2; text-align:left; }
  .svc li { grid-template-columns:40px 1fr; }
  .svc p, .svc .tags { grid-column:2; }
  .steps { grid-template-columns:1fr 1fr; }
  .about-body { grid-template-columns:1fr; gap:40px; }
  .cols { grid-template-columns:1fr; }
  .case-meta { grid-template-columns:1fr 1fr; }
  .case-story { grid-template-columns:1fr; gap:32px; }
  .case-frames { grid-template-columns:1fr 1fr; }
  .frame:nth-child(6) { grid-column:span 2; grid-row:auto; }
  .ed-hint { display:none; }
  .timecode { display:none; }
}
@media (max-width:520px) { .steps { grid-template-columns:1fr; } .step { min-height:0; } }
@media (prefers-reduced-motion: reduce) {
  .reveal, .split { opacity:1; transform:none; clip-path:none; transition:none; }
  .ticker-track, .grain, .scroll-cue { animation:none; }
}

/* ===== WEBOS okno (webos-window.js): věrná miniatura úvodní obrazovky WEBOS =====
   Particly a skleněnou desku kreslí fixed canvas .ww-gl přes celou stránku (z-index 1), DOM tady = pozadí,
   paprsky a HUD. HUD text míchá color-dodge s canvasem → okno ani jeho předci nesmí mít stacking context
   (žádný transform/opacity/filter na .webos-card a výš; proto karta WEBOS nemá .reveal). */
.webos-window { aspect-ratio:auto; background:#030308; display:flex; flex-direction:column; border-color:#262630; }
.webos-card:hover .media, .webos-card:focus-visible .media { transform:none; outline:none; border-color:#3a3a48; }
.ww-chrome { height:38px; flex:none; display:flex; align-items:center; gap:14px; padding:0 14px; background:#0e0e12; border-bottom:1px solid #1d1d25; position:relative; z-index:2; }
.ww-dots { display:flex; gap:7px; }
.ww-dots i { width:11px; height:11px; border-radius:50%; background:#2a2a32; }
.webos-card:hover .ww-dots i:nth-child(1) { background:#ff5f57; } .webos-card:hover .ww-dots i:nth-child(2) { background:#febc2e; } .webos-card:hover .ww-dots i:nth-child(3) { background:#28c840; }
.ww-url { flex:1; max-width:420px; margin:0 auto; text-align:center; font-size:12px; color:#8a8a99; background:#16161c; border:1px solid #22222b; border-radius:8px; padding:5px 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ww-url b { color:#e8e8f0; font-weight:500; }
.ww-live { display:flex; align-items:center; gap:6px; font:400 10px/1 var(--hud); letter-spacing:.14em; color:#8a8a99; }
.ww-live i { width:6px; height:6px; border-radius:50%; background:#ff2d55; animation:blink 1.4s steps(2) infinite; }
.ww-view { --s:1; position:relative; aspect-ratio:16/9; background:radial-gradient(ellipse 80% 70% at 50% 40%, #0b0c16, #020205 75%); overflow:hidden; border-radius:0 0 17px 17px; }
/* duhové paprsky shora (jako VolumetricLight na WEBOS) */
.ww-rays { position:absolute; left:50%; top:-12%; width:150%; height:120%; translate:-50% 0; pointer-events:none; mix-blend-mode:screen; filter:blur(calc(10px * var(--s)));
  background:conic-gradient(from 118deg at 50% 0%, transparent 0deg,
    rgba(255,60,200,.0) 6deg, rgba(255,60,200,.45) 12deg, transparent 18deg, rgba(150,60,255,.5) 24deg, transparent 30deg,
    rgba(80,90,255,.55) 36deg, rgba(60,170,255,.35) 42deg, transparent 47deg, rgba(120,230,255,.7) 52deg, rgba(255,255,255,.75) 58deg,
    transparent 63deg, rgba(90,255,200,.45) 68deg, transparent 74deg, rgba(120,255,90,.5) 80deg, rgba(200,255,60,.35) 88deg, transparent 95deg,
    rgba(255,220,80,.3) 102deg, transparent 112deg, transparent 360deg);
  -webkit-mask:radial-gradient(ellipse 55% 75% at 50% 0%, #000 25%, transparent 78%); mask:radial-gradient(ellipse 55% 75% at 50% 0%, #000 25%, transparent 78%);
  transform-origin:50% 0; animation:ww-sway 13s ease-in-out infinite alternate; }
@keyframes ww-sway { from { rotate:-3deg; } to { rotate:4deg; } }
.ww-view::after { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.55)); }
.ww-gl { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.ww-gl.leaving { z-index:61; }
/* HUD jako na WEBOS – color-dodge bere barvu z particlů pod sebou + tichá kopie pro čitelnost na černém */
.ww-ui { position:absolute; inset:0; z-index:2; mix-blend-mode:color-dodge; color:#cfcfd8; font:400 calc(13px * var(--s))/1 var(--hud); letter-spacing:.08em; pointer-events:none; }
.ww-ui.ww-floor { mix-blend-mode:normal; opacity:.22; }
.ww-logo { position:absolute; left:3%; top:5.5%; font-size:calc(22px * var(--s)); letter-spacing:.18em; color:#eee; }
.ww-menu { position:absolute; left:3.2%; bottom:19%; display:flex; flex-direction:column; gap:calc(19px * var(--s)); }
.ww-menu b { font-weight:700; color:#8f8fff; margin-bottom:calc(4px * var(--s)); }
.ww-menu span:first-of-type { color:#fff; }
.ww-music { position:absolute; right:2.4%; top:4%; z-index:2; display:flex; align-items:center; gap:calc(12px * var(--s)); padding:calc(8px * var(--s)) calc(10px * var(--s)); border-radius:calc(10px * var(--s)); background:rgba(14,16,24,.55); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font:700 calc(12px * var(--s))/1 var(--hud); color:#e8e8f0; letter-spacing:.08em; }
.ww-music > span:first-child, .ww-music > span:last-child { border:1px solid rgba(255,255,255,.14); border-radius:calc(6px * var(--s)); padding:calc(5px * var(--s)) calc(7px * var(--s)); font-size:calc(10px * var(--s)); }
.ww-music em { font-style:normal; display:flex; align-items:center; gap:calc(5px * var(--s)); color:#6ad8ff; background:rgba(60,170,255,.14); border:1px solid rgba(60,170,255,.3); border-radius:calc(6px * var(--s)); padding:calc(4px * var(--s)) calc(7px * var(--s)); font-size:calc(10px * var(--s)); }
.ww-music em i { width:calc(5px * var(--s)); height:calc(5px * var(--s)); border-radius:50%; background:#6ad8ff; }
.ww-ask { position:absolute; left:2.8%; bottom:6%; z-index:2; padding:calc(11px * var(--s)) calc(26px * var(--s)); border-radius:999px; border:1.5px solid rgba(220,30,70,.75); background:rgba(40,4,12,.45); color:#f2e6ea; font:700 calc(11px * var(--s))/1 var(--hud); letter-spacing:.08em; box-shadow:0 0 calc(18px * var(--s)) rgba(220,30,70,.25); }
.ww-hint { position:absolute; left:50%; bottom:3.5%; translate:-50% 0; z-index:2; white-space:nowrap; font-size:calc(14px * var(--s)); color:rgba(230,230,240,.72); text-shadow:0 1px 6px rgba(0,0,0,.8); }
.ww-enter { position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:2; pointer-events:none; opacity:0; transition:opacity .35s, scale .35s; scale:.9; }
.ww-enter span { display:block; padding:calc(14px * var(--s)) calc(26px * var(--s)); border-radius:999px; background:var(--accent); color:#000; font:700 max(11px, calc(13px * var(--s)))/1 var(--hud); letter-spacing:.14em; box-shadow:0 0 40px rgba(196,255,0,.35); }
.webos-card:hover .ww-enter, .webos-card:focus-visible .ww-enter { opacity:1; scale:1; }
.webos-card:focus-visible { outline:2px solid var(--accent); outline-offset:6px; border-radius:18px; }
.ww-cover { position:fixed; inset:0; z-index:60; background:#030308; pointer-events:none; transition:clip-path .7s cubic-bezier(.7,0,.2,1); }
@media (max-width:700px) { .ww-menu, .ww-hint, .ww-music { display:none; } .ww-url { font-size:11px; } }

/* ===== kapitoly (chapters.js) – jen desktop s myší; bez třídy .chapters je to obyčejná rolovací stránka =====
   Každá .page = jedna obrazovka. Prvky .r na stránce přijedou postupně (--i) ze směru letu (--dir). */
.ch-ui { display:none; }
.chapters { scroll-behavior:auto; --charge:.65s; }
.chapters .ch-ui { display:block; }
.chapters .page { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding-block:100px 72px; }
.chapters .hero { padding-block:100px 200px; gap:24px; }
.chapters .head { margin-bottom:clamp(20px,3.5vh,40px); }
.chapters .label { margin-bottom:clamp(12px,2vh,22px); }
/* WEBOS a showreel: velikost podle výšky okna, aby se vešly celé */
.chapters .work-webos .webos-card { width:min(100%, calc((100vh - 360px) * 16 / 9)); margin-inline:auto; }
.chapters .work-webos .label { width:min(100%, calc((100vh - 360px) * 16 / 9)); margin-inline:auto; }
.chapters .work-wide .card { width:min(100%, calc((100vh - 290px) * 16 / 9)); margin-inline:auto; }
.chapters #prace .grid { width:min(100%, calc((100vh - 470px) * 16 / 9 * 2 + 28px)); margin-inline:auto; }
.chapters .grid { gap:28px; }
.chapters .svc li { padding-block:clamp(14px,2.4vh,30px); }
.chapters .process h2, .chapters .about h2 { margin-bottom:clamp(24px,4vh,56px); }
.chapters .step { min-height:clamp(200px,30vh,280px); }
.chapters .quote { padding-block:100px; }
.chapters .contact { padding-bottom:0; border-top:0; }
.chapters .contact h2 { font-size:clamp(44px,6.6vw,112px); }
.chapters .foot-big { font-size:clamp(48px,10vw,190px); padding-top:28px; }

/* přílet / odlet prvků */
.chapters .r { transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .95s cubic-bezier(.2,.9,.25,1.12), filter .7s;
  transition-delay:calc(var(--i, 0) * 70ms + 180ms); }
.chapters .page:not(.active) .r { opacity:0; transform:translateY(calc(var(--dir, 1) * 70px)) scale(.97); filter:blur(6px); transition-duration:.35s; transition-delay:0s; }
.chapters .page.active .r, .chapters .page.active .r.reveal { opacity:1; transform:none; filter:none; }
.chapters .split { clip-path:none; }
/* WEBOS karta nesmí dostat transform/opacity (color-dodge HUD) – „reaguje“ jen DNA (webos-window.js) a rámeček */
.chapters .webos-window { transition:box-shadow 1.2s, border-color 1.2s; }
.chapters .page.active .webos-window { box-shadow:0 30px 120px -40px rgba(120,255,170,.25); }

/* hloubka za myší (translate se skládá s transform příletu) */
.chapters .depth { translate:calc(var(--mx, 0) * var(--d, 0) * 1px) calc(var(--my, 0) * var(--d, 0) * .6px); transition-property:opacity, transform, filter, translate; }
.chapters .hero-bg video.depth { transition:translate 1.2s cubic-bezier(.2,.7,.2,1); }
.magnet { transition:translate .5s cubic-bezier(.2,.8,.2,1.3); }

/* světlo za myší */
.ch-spot { position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(640px circle at var(--sx, 50%) var(--sy, 50%), rgba(196,255,0,.045), transparent 65%); }

/* rejstřík kapitol vpravo: najet a nechat = přelet */
.ch-index { position:fixed; right:14px; top:50%; translate:0 -50%; z-index:45; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.ch-index button { display:flex; align-items:center; justify-content:flex-end; gap:10px; background:none; border:0; padding:5px 0 5px 24px; cursor:pointer; color:var(--mute); }
.ch-index button span { font-size:10px; opacity:0; translate:8px 0; transition:opacity .3s, translate .3s, color .3s; white-space:nowrap; text-shadow:0 1px 6px #000; }
.ch-index button i { width:12px; height:1.5px; background:#3a3a3a; position:relative; overflow:hidden; transition:width .35s cubic-bezier(.2,.8,.2,1.3), background .3s; }
.ch-index:hover button span:not(:empty), .ch-index button.active span { opacity:1; translate:0 0; }
.ch-index button:hover i { width:22px; background:#777; }
.ch-index button.active i { width:32px; background:var(--accent); }
.ch-index button.active span { color:var(--fg); }
/* části kapitoly (polo-kapitola): menší řádky, popisek vidět, když je kapitola aktivní */
.ch-index button.part { padding-block:3px; }
.ch-index button.part span { font-size:9px; color:#6a6a6a; }
.ch-index button.part i { width:7px; background:#2c2c2c; }
.ch-index button.part.in span { opacity:1; translate:0 0; }
.ch-index button.part.in i { background:#4a4a4a; }
.ch-index button.part.active span { color:var(--fg); }
.ch-index button.part.active i { width:22px; background:var(--accent); }
.ch-index button.in:not(.active):not(.part) i { background:#5a5a5a; }
.ch-index button.in:not(.part) span { opacity:1; translate:0 0; }
/* skupina kapitol (Práce): nadpis bez čárky, kapitoly pod ním pojmenované podle prací */
.ch-index button.group { padding:8px 0 2px 24px; cursor:pointer; }
.ch-index button.group span { font-size:10px; color:var(--accent); letter-spacing:.08em; }
.ch-index button.group.in span { opacity:1; translate:0 0; }
.ch-index button.sub span { font-size:10px; }
.ch-index button.charging i::after { content:''; position:absolute; inset:0; background:var(--accent); transform-origin:right; animation:chfill .26s linear forwards; }

/* brány nahoře / dole: myš v nich chvíli podrží → přelet */
.ch-edge { position:fixed; left:50%; z-index:46; translate:-50% 0; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; opacity:0; transition:opacity .35s, transform .35s cubic-bezier(.2,.8,.2,1.4); }
.ch-next { bottom:16px; transform:translateY(8px); }
.ch-prev { top:20px; transform:translateY(-8px); }
.near-next .ch-next, .near-prev .ch-prev, .ch-edge.charging { opacity:1; transform:none; }
.ch-edge span { font-size:10px; color:#cfcfcf; padding:9px 16px; border-radius:999px; background:rgba(12,12,12,.7); border:1px solid #2a2a2a; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); white-space:nowrap; transition:border-color .3s, color .3s; }
.ch-edge i { width:140px; height:2px; background:#2a2a2a; position:relative; overflow:hidden; border-radius:2px; }
.ch-edge i::after { content:''; position:absolute; inset:0; background:var(--accent); transform:scaleX(0); }
.ch-edge.charging span { border-color:var(--accent); color:var(--accent); }
.ch-edge.charging i::after { animation:chfill var(--charge) linear forwards; }
.ch-edge.charging { transform:scale(1.06); }
@keyframes chfill { from { transform:scaleX(0); } to { transform:scaleX(1); } }
/* záře u spodní/horní hrany, když se brána nabíjí */
.ch-glow { position:fixed; left:20%; right:20%; height:120px; z-index:44; pointer-events:none; opacity:0; transition:opacity .4s; }
.ch-glow.n { bottom:0; background:radial-gradient(50% 100% at 50% 100%, rgba(196,255,0,.13), transparent); }
.ch-glow.p { top:0; background:radial-gradient(50% 100% at 50% 0%, rgba(196,255,0,.11), transparent); }
.ch-next.charging ~ .ch-glow.n, .ch-prev.charging ~ .ch-glow.p { opacity:1; }
.chapters .scroll-cue { animation:none; }

/* FAQ otevírání podržením: proužek pod otázkou se plní */
.faq summary { background:linear-gradient(var(--accent), var(--accent)) left bottom / 0% 1px no-repeat; }
.faq summary.charging { background-size:100% 1px; transition:background-size .38s linear; }

@media (prefers-reduced-motion: reduce) { .chapters .r, .chapters .page:not(.active) .r { opacity:1; transform:none; filter:none; transition:none; } }

/* detail projektu – drobnosti */
.case.cinema.idle ~ .editor { opacity:0; pointer-events:none; }
.editor { transition:opacity .5s; }
@media (max-width:700px) {
  .case-bar { gap:10px; padding-inline:12px; }
  .case-bar-title, .cc-time, .cc-cine, .case-idx { display:none; }
  .case-ctrl { margin-left:0; gap:8px; }
  .case-nav button { width:36px; height:36px; }
  .case-hero { padding-bottom:40px; }
}

/* rohy hledáčku karty: dva rovné rámy (vlevo nahoře, vpravo dole), ramena jdou do ztracena skoro do poloviny hrany karty (46 %)
   a při najetí se z rohu vysunou (20 → 46 %). Tloušťka 2 px, konce rovné. */
.card[data-work] .media::before, .card[data-work] .media::after { left:14px; top:14px; right:14px; bottom:14px; width:auto; height:auto; border:0; border-radius:0; transform:none; transition:opacity .3s, background-size .6s cubic-bezier(.2,.7,.1,1); }
.card[data-work] .media::before { background: linear-gradient(90deg, var(--accent), transparent) 0 0 / 20% 2px no-repeat, linear-gradient(180deg, var(--accent), transparent) 0 0 / 2px 20% no-repeat; }
.card[data-work] .media::after { background: linear-gradient(270deg, var(--accent), transparent) 100% 100% / 20% 2px no-repeat, linear-gradient(0deg, var(--accent), transparent) 100% 100% / 2px 20% no-repeat; }
.card:hover .media::before { background-size: 46% 2px, 2px 46%; }
.card:hover .media::after { background-size: 46% 2px, 2px 46%; }
.tc { left:20px; bottom:20px; padding:7px 12px; border-radius:6px 6px 6px 12px; font-size:11px; background:rgba(0,0,0,.6); }
.open { right:20px; top:20px; padding:10px 16px; border-radius:6px 12px 6px 6px; font-size:12px; letter-spacing:.1em; box-shadow:0 6px 24px rgba(196,255,0,.3); }

/* během plynulého posunu uvnitř kapitoly (class .gliding) se vypnou věci, které zbytečně zatěžují každý snímek (kvůli 144/165 Hz monitorům) */
html.gliding .grain { animation-play-state:paused; }
html.gliding .nav nav { backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(10,10,10,.82); }
html.gliding .cursor span { mix-blend-mode:normal; }
html.gliding .media { transition:none; }
html.gliding .media video { transition:none; }