@font-face{font-family:Anton;src:url(../fonts/anton-400.woff2) format('woff2');font-display:block}
@font-face{font-family:Mono;src:url(../fonts/monaspace-400.woff2) format('woff2');font-weight:400;font-display:block}
@font-face{font-family:Mono;src:url(../fonts/monaspace-500.woff2) format('woff2');font-weight:500;font-display:block}
@font-face{font-family:Mono;src:url(../fonts/monaspace-600.woff2) format('woff2');font-weight:600;font-display:block}
@font-face{font-family:Geist;src:url(../fonts/geist-400.woff2) format('woff2');font-weight:400;font-display:block}
:root{--bg:#0E0E0D;--tx:#F6F4F0;--mut:#8C877F;--ac:#F2EC0F;--card:#1C1C1A;--ln:#e7e3dc24;--grid:rgba(231,227,220,.14);--tick:rgba(231,227,220,.35);--e:cubic-bezier(.76,0,.24,1);--pad:60px}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--tx);font-family:Geist,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.mono{font:500 12px/1.4 Mono,ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}

/* ---------- navigace ---------- */
.nav{position:fixed;inset:0 0 auto;height:80px;z-index:20;display:flex;align-items:center;padding:0 40px;background:rgba(14,14,13,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--ln)}
.brand{width:92px;color:var(--ac)}
.brand svg{display:block;width:100%;height:auto;fill:currentColor}
.links{position:absolute;left:calc(50% - 240px);display:flex;gap:36px}
.links a{position:relative;font:500 12px/1 Mono;letter-spacing:.08em;text-transform:uppercase}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--ac);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--e)}
.links a:hover::after{transform:none}
.nav .btn{margin-left:auto}
.burger{display:none}

/* ---------- tlačítko (MN5qLNWDJ: padding 6 6 6 22, gap 18, box 40, wipe .55 s) ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:18px;padding:6px 6px 6px 22px;overflow:hidden;font:600 13px/1 Mono;letter-spacing:.06em;text-transform:uppercase;background:var(--ac);color:var(--bg);white-space:nowrap}
.btn .w{position:absolute;inset:0;background:var(--tx);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--e)}
.btn .l{position:relative;z-index:1}
.btn .b{position:relative;z-index:1;width:40px;height:40px;overflow:hidden;background:var(--bg);color:var(--tx);transition:color .55s var(--e)}
.btn .b svg{position:absolute;top:10px;left:10px;width:20px;height:20px;transition:transform .55s var(--e)}
.btn .b .a2{transform:translate(-40px,40px)}
.btn:hover .w,.btn:focus-visible .w{transform:none}
.btn:hover .b{color:var(--ac)}
.btn:hover .a1,.btn:focus-visible .a1{transform:translate(40px,-40px)}
.btn:hover .a2,.btn:focus-visible .a2{transform:none}
.btn.g{background:transparent;color:var(--tx);box-shadow:inset 0 0 0 1px var(--ln)}
.btn.g .w{background:var(--ac)}
.btn.g .l{transition:color .55s var(--e)}
.btn.g:hover .l{color:var(--bg)}
.btn.g .b{background:var(--ac);color:var(--bg)}
.btn.g:hover .b{color:var(--bg)}
.btn:focus-visible{outline:2px solid var(--ac);outline-offset:3px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;height:1002px;overflow:hidden}
.bp{position:absolute;inset:0;pointer-events:none}
.bp svg{position:absolute;inset:0;width:100%;height:100%}
.bp path{stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0}
.go .bp path{stroke-dashoffset:0;opacity:1;transition:stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1) var(--d),opacity 1.6s cubic-bezier(.65,0,.35,1) var(--d)}
.dim{position:absolute;left:24px;bottom:20px;display:flex;align-items:center;gap:10px;font:400 11px/1 Mono;letter-spacing:.08em;color:var(--ac);white-space:nowrap;opacity:0;transform:translateY(8px)}
.dim i{width:40px;height:1px;background:var(--ac)}
.go .dim{opacity:1;transform:none;transition:opacity .6s ease 1.28s,transform .6s ease 1.28s}
.in{position:relative;padding:0 var(--pad);height:100%}
.meta{position:absolute;left:var(--pad);right:var(--pad);top:128px;display:flex;justify-content:space-between;align-items:center;transform:translateY(20px)}
.go .meta{transform:none;transition:transform .8s var(--e) .2s}
.scr{font:400 12px/1.3 Mono;letter-spacing:.08em;color:var(--mut);white-space:pre;cursor:default;text-transform:uppercase}
.est{color:var(--mut)}
.pas{position:absolute;left:var(--pad);right:var(--pad);top:189px;height:300px;display:flex;gap:12px;align-items:flex-end;overflow:hidden}
.f{position:relative;flex:1 0 0;width:1px;overflow:hidden;background:var(--card);transform:translateY(var(--y0))}
.go .f{transform:none;transition:transform 1.2s var(--e) calc(.35s + var(--i)*.09s)}
.f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:transform .8s cubic-bezier(.22,1,.36,1),filter .8s cubic-bezier(.22,1,.36,1)}
.f:hover img{transform:scale(1.12);filter:grayscale(0)}
.f .mono{position:absolute;left:10px;bottom:8px;font-size:10px;color:var(--tx)}
.f.a{background:var(--ac);color:var(--bg);padding:14px;display:flex;flex-direction:column;justify-content:space-between}
.f.a svg{width:32px;height:32px;animation:spin 8s linear infinite}
.f.a p{font:400 26px/1 Anton;text-transform:uppercase}
@keyframes spin{to{transform:rotate(360deg)}}
h1{position:absolute;left:var(--pad);top:533px;font:400 150px/1 Anton;letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap}
h1 .c{display:inline-block;opacity:.001;filter:blur(10px);transform:translateY(140px) rotate(12deg)}
.go h1 .c{opacity:1;filter:blur(0);transform:none;transition:opacity .5s ease,filter 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.25,1.12,.4,1);transition-delay:calc(.7s + var(--i)*.05s)}
.spod{position:absolute;left:var(--pad);right:var(--pad);top:858px;display:flex;justify-content:space-between;align-items:flex-end;transform:translateY(30px)}
.go .spod{transform:none;transition:transform .9s var(--e) 1.3s}
.lead{width:500px;font-size:22px;line-height:1.45;letter-spacing:-.01em}
.akce{display:flex;gap:12px}

/* ---------- scroll pravítko (fixed 48×420, top 180, right 20) ---------- */
.ruler{position:fixed;top:180px;right:20px;width:48px;height:420px;z-index:9;display:flex;justify-content:flex-end;pointer-events:none}
.ruler .col{position:relative;height:100%;width:24px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}
.ruler .col span{display:block;height:1px;width:8px;background:var(--tick)}
.ruler .col span.m5{width:16px}
.ruler .col span.m10{width:24px;background:var(--mut)}
.ruler .col .pr{position:absolute;right:0;top:0;width:2px;height:100%;background:var(--ac);transform-origin:top;transform:scaleY(0)}
.ruler .lab{position:absolute;right:34px;bottom:0;font:400 10px/1 Mono;letter-spacing:.08em;color:var(--mut);writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- pásky ---------- */
.pasky{position:relative;height:296px;padding:60px 0;overflow:hidden}
.paska{position:absolute;left:50%;width:1700px;margin-left:-850px;height:88px;padding:0 18px;overflow:hidden;font:400 46px/1 Anton;text-transform:uppercase;cursor:grab;touch-action:pan-y;user-select:none}
.paska.drag{cursor:grabbing}
.paska .trk{display:flex;align-items:center;gap:36px;height:100%;width:max-content;white-space:nowrap;will-change:transform}
.paska svg{width:36px;height:36px;flex:none}
.paska.y{top:84px;background:var(--ac);color:var(--bg);z-index:2;transform:rotate(-3deg)}
.paska.w{top:132px;background:var(--tx);color:var(--bg);z-index:1;transform:rotate(2deg)}


/* ---------- mobil (Framer phone < 810: padding 88/20, sloupce mřížky 6, fotky 4, pravítko skryté) ---------- */
/* tablet = šablona (předvolba nadpisu 112 px při 160 px na desktopu → u nás 105 při 150) */
@media (min-width:810px) and (max-width:1199.98px){h1{font-size:105px}}
@media (max-width:809.98px){
  :root{--pad:20px}
  .nav{padding:0 20px;height:72px}
  .brand{width:78px}
  .links,.nav .btn{display:none}
  .burger{display:grid;place-items:center;margin-left:auto;width:44px;height:44px;border:1px solid var(--ln);background:transparent;cursor:pointer}
  .burger i{display:block;width:18px;height:1.5px;background:var(--tx);box-shadow:0 6px 0 var(--tx),0 -6px 0 var(--tx)}
  .hero{height:auto;min-height:0}
  .in{padding:96px 20px 64px;display:flex;flex-direction:column;gap:0}
  .meta,.pas,h1,.spod{position:relative;left:auto;right:auto;top:auto}
  .meta{flex-direction:column;align-items:flex-start;gap:8px}
  .pas{height:168px;margin-top:40px;gap:8px}
  .f:nth-child(n+5){display:none}
  .f.a{padding:8px}.f.a svg{width:22px;height:22px}.f.a p{font-size:15px}
  h1{margin-top:28px;font-size:clamp(52px,15vw,66px);line-height:1.04;white-space:normal}
  .spod{margin-top:26px;flex-direction:column;align-items:flex-start;gap:26px}
  .lead{width:auto;font-size:17px}
  .akce{flex-direction:column;align-items:flex-start}
  .dim{left:20px;bottom:22px}
  .ruler{display:none}
  .pasky{height:200px}.paska{height:56px;font-size:26px;width:1100px;margin-left:-550px}.paska .trk{gap:20px}.paska svg{width:22px;height:22px}.paska.y{top:52px}.paska.w{top:92px}
}
@media (prefers-reduced-motion:reduce){
  .bp path{stroke-dashoffset:0!important;opacity:1!important;transition:none!important}
  .dim,.meta,.f,h1 .c,.spod{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}
  .f.a svg{animation:none}
}

/* ---------- kurzor (port eZy6bssRj: Crosshair 36 px, stisk 20 px plný, View 104 px nad galerií; spring bounce .2 / .4 s) ---------- */
@media (hover:hover) and (pointer:fine){
  html.cur,html.cur *{cursor:none!important}
}
.cursor{position:fixed;left:0;top:0;z-index:100;pointer-events:none;width:0;height:0;opacity:0;transition:opacity .2s}
html.cur .cursor.on{opacity:1}
.cursor .c{position:absolute;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;border:1px solid var(--ac);border-radius:100px;background:rgba(242,236,15,0);display:grid;place-items:center;overflow:hidden;
  transition:width .4s cubic-bezier(.34,1.3,.64,1),height .4s cubic-bezier(.34,1.3,.64,1),margin .4s cubic-bezier(.34,1.3,.64,1),background-color .4s cubic-bezier(.34,1.3,.64,1)}
.cursor svg{width:16px;height:16px;color:var(--ac);transition:opacity .2s}
.cursor .v{position:absolute;font:600 12px/1 Mono;letter-spacing:.08em;text-transform:uppercase;color:var(--bg);opacity:0;transition:opacity .2s}
.cursor.down .c{width:20px;height:20px;margin:-10px 0 0 -10px;background:var(--ac)}
.cursor.down svg{opacity:0}
.cursor.view .c{width:104px;height:104px;margin:-52px 0 0 -52px;background:var(--ac)}
.cursor.view svg{opacity:0}
.cursor.view .v{opacity:1}
@media (hover:none),(pointer:coarse),(max-width:809.98px){.cursor{display:none}}