/* TH-E.Studio · round 2 *(Denis, 24.10: "more like a Notion or Apple style … this feels a bit too much"; "a glow
   source of light to kinda keep the identity"; "white when the system is white … dark when the system is dark")*.
   Apple's restraint carries the layout: whitespace, type first, quiet cards. The ceník's identity is kept in three
   things only: Flyn's orange as the one accent, his lamp as the page's one light source, and the jelly button. */
:root{
  color-scheme:light dark;
  --ground:#FBFBFD; --ground-2:#F5F5F7; --card:#FFFFFF;
  --ink:#1D1D1F; --ink-2:#6E6E73; --ink-3:#86868B;
  --hair:rgba(0,0,0,.08); --hair-2:rgba(0,0,0,.14);
  --accent:#D9622A; --accent-ink:#B4501F;
  --lamp:rgba(238,122,68,.22); --lamp-2:rgba(255,190,140,.10);
  --key:rgba(255,186,140,.30);
  --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 28px rgba(0,0,0,.07);
  --shadow-hi:0 2px 6px rgba(0,0,0,.05),0 18px 48px rgba(0,0,0,.11);
  --scrim:rgba(250,250,252,.72);
  /* on a white page the jelly is a shade deeper and carries white text *(Denis, 24.10)* */
  --jelly-hi:#E59A62; --jelly:#CC7642; --jelly-lo:#A3532A; --jelly-ink:#FFFFFF;
  --font:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --r:20px; --r-lg:28px; --pill:980px;
  --spring:cubic-bezier(.22,1.12,.36,1);
  --ease:cubic-bezier(.25,.1,.25,1);
  --wrap:1180px; --gut:clamp(20px,4vw,44px);
}
/* dark follows the system; ?theme=dark or ?theme=light forces one (for checking both) */
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --ground:#0C0B0A; --ground-2:#141210; --card:#171513;
    --ink:#F5F5F7; --ink-2:#A1A1A6; --ink-3:#7C7C80;
    --hair:rgba(255,255,255,.08); --hair-2:rgba(255,255,255,.16);
    --accent:#EE7A44; --accent-ink:#F29563;
    --lamp:rgba(238,122,68,.20); --lamp-2:rgba(238,122,68,.06);
    --key:rgba(238,122,68,.14);
    --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px rgba(0,0,0,.45);
    --shadow-hi:0 1px 0 rgba(255,255,255,.06) inset,0 20px 50px rgba(0,0,0,.6);
    --scrim:rgba(12,11,10,.72);
    --jelly-hi:#E2AD77; --jelly:#C99869; --jelly-lo:#A16133; --jelly-ink:#1A0F08;
  }
}
:root[data-theme=dark]{
    --ground:#0C0B0A; --ground-2:#141210; --card:#171513;
    --ink:#F5F5F7; --ink-2:#A1A1A6; --ink-3:#7C7C80;
    --hair:rgba(255,255,255,.08); --hair-2:rgba(255,255,255,.16);
    --accent:#EE7A44; --accent-ink:#F29563;
    --lamp:rgba(238,122,68,.20); --lamp-2:rgba(238,122,68,.06);
    --key:rgba(238,122,68,.14);
    --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px rgba(0,0,0,.45);
    --shadow-hi:0 1px 0 rgba(255,255,255,.06) inset,0 20px 50px rgba(0,0,0,.6);
    --scrim:rgba(12,11,10,.72);
    --jelly-hi:#E2AD77; --jelly:#C99869; --jelly-lo:#A16133; --jelly-ink:#1A0F08;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.53 var(--font);letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;transition:background .4s var(--ease)}
a{color:inherit}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
/* sides only: a section is also a .wrap, and a padding shorthand here zeroed its top */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.num{font-variant-numeric:tabular-nums}

/* ---------- the light: his key light from the top, and his lamp, which travels with him ---------- */
.keylight{position:absolute;inset:0 0 auto;height:120vh;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 60% 55% at 50% -8%,var(--key),transparent 70%)}
.lamp{position:fixed;left:0;top:0;width:900px;height:900px;margin:-450px 0 0 -450px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(closest-side,var(--lamp),var(--lamp-2) 38%,color-mix(in srgb,var(--lamp-2) 40%,transparent) 66%,transparent);opacity:0;will-change:transform,opacity;
  transition:opacity .8s var(--ease)}
/* no blend mode: he moves, and a blended moving layer recomposites the page under it (BRAIN/tools/web-3d.md) */
main,header,footer{position:relative;z-index:2}

/* ---------- header: a pill that floats over the page *(Denis, 24.10)*, as TH-E.iO's island does ---------- */
.top{position:sticky;top:0;z-index:30;display:flex;justify-content:center;padding:12px 16px 0;pointer-events:none}
.pill{pointer-events:auto;display:flex;align-items:center;gap:14px;max-width:100%;padding:6px 6px 6px 20px;border-radius:var(--pill);
  background:var(--scrim);backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);
  box-shadow:0 0 0 1px var(--hair),0 10px 36px -14px rgba(0,0,0,.22);transition:box-shadow .3s}
.top.scrolled .pill{box-shadow:0 0 0 1px var(--hair-2),0 14px 40px -12px rgba(0,0,0,.28)}
/* the house wordmark: the name bold, its ending light, both full ink (BRAIN/io/company-name.md, th-e.io) */
.mark{font-size:17px;line-height:1;text-decoration:none;color:var(--ink);white-space:nowrap}
.mark b{font-weight:700;letter-spacing:-.02em}
.mark span{font-weight:300;letter-spacing:.01em}
.nav{display:flex;gap:2px}
.nav a{padding:8px 13px;border-radius:var(--pill);text-decoration:none;color:var(--ink-2);font-size:14px;font-weight:500;transition:color .2s,background .2s}
.nav a:hover{color:var(--ink);background:var(--hair)}
.lang{display:flex;gap:2px;padding:3px;border-radius:var(--pill);background:var(--hair)}
.lang a{padding:4px 10px;border-radius:var(--pill);font-size:12px;font-weight:700;text-decoration:none;color:var(--ink-3)}
.lang a[aria-current]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
@media (max-width:760px){.nav{display:none}.pill{width:100%;justify-content:space-between}}

/* ---------- buttons: the jelly is the ceník's, smaller and quieter; the link is Apple's ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:var(--pill);font:600 16px/1 var(--font);
  text-decoration:none;cursor:pointer;border:0;transition:transform .5s var(--spring),box-shadow .3s,filter .3s}
.btn:active{transform:scale(.96)}
.jelly{color:var(--jelly-ink);text-shadow:0 1px 1px rgba(90,40,10,.18);background:linear-gradient(180deg,var(--jelly-hi),var(--jelly) 55%,var(--jelly-lo));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 5px rgba(90,40,10,.28),0 8px 22px -10px rgba(217,98,42,.6)}
.jelly:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 5px rgba(90,40,10,.28),0 14px 32px -12px rgba(217,98,42,.75)}
.link{display:inline-flex;align-items:center;gap:4px;color:var(--accent-ink);font-weight:600;text-decoration:none;font-size:17px}
.link:hover{text-decoration:underline}
.link::after{content:"›";font-size:1.2em;line-height:1;transform:translateY(-1px)}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(64px,11vw,132px) 0 0;text-align:center}
.eyebrow{display:block;font:600 14px/1.3 var(--font);letter-spacing:.01em;color:var(--accent-ink)}
.hero h1{margin:14px auto 0;max-width:14ch;font:700 clamp(44px,7.2vw,88px)/1.03 var(--font);letter-spacing:-.04em;text-wrap:balance}
.hero h1 .eyebrow{margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--ink-3)}
.lede{margin:22px auto 0;max-width:30em;font-size:clamp(18px,2vw,21px);line-height:1.45;color:var(--ink-2);text-wrap:balance}
.ctas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px;margin-top:32px}
.reel{position:relative;margin:clamp(48px,7vw,80px) auto 0;max-width:1080px}

/* ---------- a video tile: the thumbnail, a soft light that follows the pointer, a play disc ---------- */
.vid{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;cursor:pointer;padding:0;border:0;
  background:var(--ground-2) center/cover no-repeat;box-shadow:var(--shadow);transform:translateZ(0);
  transition:transform .6s var(--spring),box-shadow .4s var(--ease)}
.vid.tall{aspect-ratio:9/16}
.vid::before{content:"";position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .35s;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,214,180,.28),transparent 45%)}
.vid::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none}
.vid:hover{transform:translateY(-4px);box-shadow:var(--shadow-hi)}
.vid:hover::before{opacity:1}
.vid:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.play{position:absolute;left:50%;top:50%;z-index:2;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(0,0,0,.25);
  transition:transform .5s var(--spring),background .3s}
.play svg{width:22px;height:22px;margin-left:3px;fill:#1D1D1F}
.vid:hover .play{transform:scale(1.1);background:#fff}
.reel .vid{border-radius:var(--r-lg)}
.reel .play{width:84px;height:84px;margin:-42px 0 0 -42px}
.reel .play svg{width:28px;height:28px}

/* ---------- sections ---------- */
/* each section gets the screen to itself *(Denis, 24.10: "so the person can see the section without being distracted")* */
section{position:relative;padding-top:clamp(128px,18vw,250px)}
.head{max-width:700px;margin-bottom:clamp(40px,5.5vw,76px)}
.head.center{margin-left:auto;margin-right:auto;text-align:center}
h2{margin:10px 0 0;font:700 clamp(34px,5vw,56px)/1.06 var(--font);letter-spacing:-.035em;text-wrap:balance}
.head p{margin:16px 0 0;color:var(--ink-2);font-size:clamp(17px,1.8vw,20px);text-wrap:pretty}

.statement{text-align:center}
.statement h2{max-width:17ch;margin:0 auto;font-size:clamp(34px,5.6vw,64px)}
.statement h2 span{color:var(--ink-3)}

/* ---------- the work: one film large in the middle, its neighbours smaller, dimmer and set back, the whole row moving
   with weight; the far ones travel a little slower *(Denis, 24.10: "one would be always primary … those on the sides
   a little bit dim … smaller, and a little bit in the background")*. Most watched first. ---------- */
.rail{--cw:min(66%,760px)}
@media (max-width:760px){.rail{--cw:84%}}
.work{position:relative;height:clamp(240px,40vw,520px);touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}
.work:focus-visible{outline:3px solid var(--accent);outline-offset:8px;border-radius:var(--r)}
.work .tile{position:absolute;top:0;left:50%;width:var(--cw);margin:0 0 0 calc(var(--cw) / -2);transform-origin:50% 38%;
  transition:transform var(--td,.9s) cubic-bezier(.2,.85,.25,1),opacity var(--td,.9s) cubic-bezier(.2,.85,.25,1);will-change:transform,opacity}
.work .tile::after{content:"";position:absolute;inset:0;border-radius:var(--r);background:var(--ground);opacity:var(--shade,0);pointer-events:none;
  transition:opacity var(--td,.9s) cubic-bezier(.2,.85,.25,1)}
.work.drag .tile,.work.drag .tile::after{transition:none}
.work .tile:not(.on) .vid{cursor:pointer;box-shadow:none}
.work .tile:not(.on) .play{opacity:0;transform:scale(.8)}
.work .tile figcaption{transition:opacity .5s var(--ease)}
.work .tile:not(.on) figcaption{opacity:0}
.work .tile:not(.on) .vid:hover{transform:none}
.rail-nav{display:flex;justify-content:center;gap:10px;margin-top:22px}
.arrow{width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:var(--ink);background:var(--hair);
  transition:background .2s,opacity .2s,transform .5s var(--spring)}
.arrow:hover{background:var(--hair-2)}
.arrow:active{transform:scale(.92)}
.arrow:disabled{opacity:.35;cursor:default}
.arrow svg{width:20px;height:20px}
.dots{display:flex;align-items:center;gap:6px;margin:0 8px}
.dots i{width:6px;height:6px;border-radius:3px;background:var(--hair-2);transition:width .5s var(--spring),background .3s}
.dots i.on{width:20px;background:var(--accent)}
.tile{margin:0}
.tile figcaption{padding:14px 2px 0}
.tile b{display:block;font-size:17px;font-weight:600;letter-spacing:-.018em;line-height:1.3;text-wrap:pretty}
.tile figcaption span{display:block;margin-top:3px;font-size:14px;color:var(--ink-3)}


/* ---------- the offer: two quiet cards; the lead one carries his light along its top ---------- */
.offer{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(16px,2vw,24px)}
@media (max-width:860px){.offer{grid-template-columns:1fr}}
.card{position:relative;padding:clamp(28px,3.4vw,44px);border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow);overflow:hidden;
  transition:transform .6s var(--spring),box-shadow .4s}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),var(--lamp),transparent 50%)}
.card:hover::before{opacity:1}
.card.lead::after{content:"";position:absolute;left:12%;right:12%;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);box-shadow:0 0 18px var(--accent)}
.badge{display:inline-block;padding:5px 11px;border-radius:var(--pill);font:600 12px/1.2 var(--font);color:var(--accent-ink);background:var(--lamp-2);
  border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.card h3{position:relative;margin:16px 0 0;font:700 clamp(30px,3.4vw,40px)/1.05 var(--font);letter-spacing:-.035em}
.card .sub{position:relative;margin:10px 0 0;color:var(--ink-2);font-size:17px}
.card ul{position:relative;list-style:none;margin:26px 0 0;padding:24px 0 0;border-top:1px solid var(--hair);display:grid;gap:13px}
.card li{display:flex;gap:12px;align-items:baseline}
.card li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent);transform:translateY(-2px);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
.extras{margin-top:clamp(16px,2vw,24px);display:flex;flex-wrap:wrap;align-items:center;gap:10px 10px}
.extras h4{margin:0 8px 0 0;font:600 15px/1.3 var(--font);color:var(--ink-2)}
.extras span{padding:8px 14px;border-radius:var(--pill);background:var(--card);box-shadow:0 0 0 1px var(--hair);font-size:14.5px;font-weight:500}
.offer-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:clamp(30px,4vw,44px)}
.offer-cta p{margin:0;color:var(--ink-3);font-size:15px;max-width:36ch}

/* ---------- how it runs: four quiet columns on his line of light, which fills as you scroll ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);position:relative}
.steps::before,.steps::after{content:"";position:absolute;left:0;right:0;top:15px;height:2px;border-radius:2px}
.steps::before{background:var(--hair)}
.steps::after{right:auto;width:calc(var(--fill,0) * 100%);background:linear-gradient(90deg,var(--accent),#F4B183);box-shadow:0 0 14px var(--accent);transition:width .2s linear}
.steps li{position:relative;padding-top:48px}
.steps .dot{position:absolute;top:0;left:0;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;z-index:1;
  font:700 13px/1 var(--font);background:var(--card);box-shadow:0 0 0 1px var(--hair-2),0 0 0 6px var(--ground);color:var(--ink-2);transition:all .5s var(--spring)}
.steps li.lit .dot{color:var(--jelly-ink);background:linear-gradient(180deg,var(--jelly-hi),var(--jelly) 55%,var(--jelly-lo));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 6px var(--ground),0 6px 18px -4px rgba(238,122,68,.7)}
.steps b{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em}
.steps p{margin:8px 0 0;color:var(--ink-2);font-size:15.5px}
@media (max-width:860px){
  .steps{grid-template-columns:1fr;gap:30px}
  .steps::before,.steps::after{left:15px;right:auto;top:6px;bottom:6px;width:2px;height:auto}
  .steps::after{height:calc(var(--fill,0) * (100% - 12px));bottom:auto;background:linear-gradient(180deg,var(--accent),#F4B183)}
  .steps li{padding:0 0 0 56px}
}

/* ---------- contact ---------- */
.contact{padding-bottom:clamp(128px,18vw,250px)}
.contact .card{text-align:center;padding:clamp(44px,7vw,88px) clamp(22px,4vw,48px)}
.contact h2{max-width:15ch;margin:10px auto 0;position:relative}
.contact .card > p{position:relative;max-width:40ch;margin:16px auto 0;color:var(--ink-2);font-size:18px}
.contact .ctas{position:relative}
.contact .social{position:relative;margin-top:34px;padding-top:30px;border-top:1px solid var(--hair)}

footer{border-top:1px solid var(--hair);padding:24px 0 34px;color:var(--ink-3);font-size:13px}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:8px 18px}
footer a{text-decoration:none;color:var(--ink-2)}
footer a:hover{color:var(--ink)}

/* ---------- the player: big, centred, the page dimmed behind it *(Denis, 24.10: "super small")* ---------- */
.player{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:clamp(12px,4vw,56px);
  background:rgba(8,7,6,.78);backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.player.open{opacity:1;pointer-events:auto}
.player .frame{position:relative;width:min(92vw,calc((100vh - 140px) * 16 / 9),1600px);aspect-ratio:16/9;border-radius:clamp(12px,1.6vw,22px);overflow:hidden;
  background:#000;box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);transform:scale(.94);transition:transform .6s var(--spring)}
.player.tall .frame{width:min(92vw,calc((100vh - 140px) * 9 / 16));aspect-ratio:9/16}
.player.open .frame{transform:none}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player .cap{margin-top:16px;color:rgba(255,255,255,.82);font-weight:600;text-align:center;max-width:90vw}
.player .x{position:absolute;top:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px);width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;transition:background .2s}
.player .x:hover{background:rgba(255,255,255,.26)}
.player .x svg{width:20px;height:20px}
.player .box{display:flex;flex-direction:column;align-items:center}

/* ---------- Flyn: his canvas window travels with him; a tap target sits over his head ---------- */
.flyn3d{position:fixed;left:0;top:0;z-index:25;pointer-events:none;will-change:transform}
.flyn-hit{position:fixed;left:0;top:0;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;z-index:26;cursor:pointer}

/* arrivals: one spring, slight, once, a little after the one before */
.rise{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform 1s var(--spring);transition-delay:var(--d,0s)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none;transition:none}
  .btn,.vid,.card,.play,.player .frame{transition:none}
  .work .tile{transition:none}
}

/* the channels as icons *(Denis, 24.10: "all of the ones that we have")* */
.social{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.social a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--hair);color:var(--ink-2);transition:background .2s,color .2s,transform .5s var(--spring)}
.social a:hover{background:var(--accent);color:#fff;transform:translateY(-2px)}
.social svg{width:20px;height:20px;fill:currentColor}