/* =========================================================
   PETER PETRUŠ — case-study subpages
   Shared stylesheet (/projects/*, /sk/projekty/*)
   Tokens are kept identical to the home page.
   ========================================================= */
:root{
  color-scheme:dark;
  --bg:#08080C;
  --bg-soft:#0E0E15;
  --panel:rgba(255,255,255,.035);
  --panel-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.09);
  --text:#ECECEF;
  --muted:#8A8A93;
  --muted-2:#5E5E68;
  --accent:#22D3EE;
  --accent2:#6366F1;
  --ink:#03171b;
  --glow:rgba(34,211,238,.28);
  --font-display:"Space Grotesk",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(1.25rem,5vw,5rem);
  --maxw:1320px;
}
html.light{
  color-scheme:light;
  --bg:#F4F4F1;
  --bg-soft:#FFFFFF;
  --panel:rgba(255,255,255,.7);
  --panel-2:#FFFFFF;
  --line:rgba(0,0,0,.12);
  --text:#0C0C10;
  --muted:#3F3F47;
  --muted-2:#7A7A85;
  --accent:#0E7C96;
  --accent2:#4F46E5;
  --ink:#FFFFFF;
  --glow:rgba(14,124,150,.20);
}

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:1.6;overflow-x:hidden;
  transition:background .6s var(--ease),color .6s var(--ease);
}
@media (hover:hover){body{cursor:none}}
html.no-anim *,html.no-anim *::before,html.no-anim *::after{transition:none!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
::selection{background:var(--accent);color:var(--ink)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--font-display);font-weight:500;letter-spacing:-.025em;line-height:1.1}

/* ---------------- Custom cursor ---------------- */
.cursor,.cursor-dot{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  border-radius:50%;transform:translate(-50%,-50%);mix-blend-mode:difference;
}
.cursor{width:34px;height:34px;border:1px solid rgba(255,255,255,.7);transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease)}
.cursor-dot{width:5px;height:5px;background:#fff}
.cursor.is-hover{width:64px;height:64px;background:rgba(255,255,255,.10);border-color:transparent}
.cursor,.cursor-dot{opacity:0}
/* shown only once a real mouse has moved — never on touch, even if a phone claims (hover:hover) */
html.has-cursor .cursor,html.has-cursor .cursor-dot{opacity:1}
@media (hover:none){.cursor,.cursor-dot{display:none}}

/* ---------------- Shared bits ---------------- */
.wrap{max-width:var(--maxw);margin:0 auto}
.section{padding:clamp(3.5rem,8vh,6rem) var(--pad);border-top:1px solid var(--line)}
.eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;margin-bottom:2rem;
  font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--line)}
.eyebrow .idx{color:var(--accent);font-family:var(--font-display)}
.lead{color:var(--muted);font-size:clamp(1rem,1.3vw,1.12rem);max-width:60ch}
.prose p{color:var(--muted);max-width:68ch;margin-top:1rem}
.prose p:first-child{margin-top:0}
.prose strong{color:var(--text);font-weight:500}

.btn{
  display:inline-flex;align-items:center;gap:.5rem;padding:.95rem 1.7rem;border-radius:99px;
  font-size:.92rem;font-weight:500;line-height:1;white-space:nowrap;cursor:none;border:1px solid transparent;
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s,background .35s,color .35s;
}
@media (hover:none){.btn{cursor:pointer}}
.btn--primary{background:var(--accent);color:var(--ink);box-shadow:0 14px 40px var(--glow)}
.btn--primary:hover{transform:translateY(-3px);box-shadow:0 20px 54px var(--glow)}
.btn--ghost{border-color:var(--line);background:var(--panel);color:var(--text);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn--ghost:hover{transform:translateY(-3px);border-color:var(--text)}
.btn--sm{padding:.6rem 1.1rem;font-size:.8rem}

[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none}}

/* ---------------- Navigation ---------------- */
.nav{
  position:sticky;top:0;z-index:800;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1rem var(--pad);background:var(--bg);border-bottom:1px solid var(--line);
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .nav{background:transparent;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .nav::before{content:"";position:absolute;inset:0;background:var(--bg);opacity:.78;z-index:-1}
}
.nav__brand{font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--text)}
.nav__brand b{color:var(--accent)}
.nav__right{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem);font-size:.82rem}
.nav__links{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem)}
.nav__links a{color:var(--muted);transition:color .3s}
.nav__links a:hover{color:var(--text)}
@media (max-width:760px){.nav__links{display:none}}
.lang{display:flex;align-items:center;gap:.45rem;font-family:var(--font-display);font-size:.74rem;letter-spacing:.08em}
.lang a{color:var(--muted);opacity:.45;transition:color .3s,opacity .3s}
.lang a[aria-current="true"]{color:var(--accent);opacity:1}
.lang .sep{color:var(--muted-2)}
.theme-toggle{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--text);
  display:grid;place-items:center;cursor:none;flex-shrink:0;transition:transform .4s var(--ease),border-color .3s;
}
@media (hover:none){.theme-toggle{cursor:pointer}}
.theme-toggle:hover{transform:rotate(18deg) scale(1.08);border-color:var(--text)}
.theme-toggle svg{width:16px;height:16px;display:block}
.theme-toggle .moon{display:none}
html.light .theme-toggle .moon{display:block}
html.light .theme-toggle .sun{display:none}
.nav__cta{display:none}
@media (min-width:980px){.nav__cta{display:inline-flex}}

/* ---------------- Case-study hero ---------------- */
.cs-hero{position:relative;padding:clamp(2rem,5vh,3.5rem) var(--pad) clamp(3rem,7vh,5rem);overflow:hidden}
.cs-hero::before{
  content:"";position:absolute;left:50%;top:-30%;transform:translateX(-50%);
  width:min(120vw,1100px);aspect-ratio:2/1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,var(--glow),transparent 65%);filter:blur(60px);opacity:.75;
}
.cs-hero__inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto}
.crumb{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.76rem;color:var(--muted-2);margin-bottom:2.4rem;list-style:none}
.crumb a{color:var(--muted);transition:color .3s}
.crumb a:hover{color:var(--accent)}
.cs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:clamp(2rem,4vw,3.5rem);align-items:center}
.kicker{
  display:inline-flex;align-items:center;gap:.7rem;padding:.45rem .9rem .45rem .7rem;
  border:1px solid var(--line);border-radius:99px;background:var(--panel);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.cs-hero h1{font-size:clamp(2.3rem,5.6vw,4.4rem);font-weight:600;letter-spacing:-.04em;line-height:1;margin:1.4rem 0 0}
.cs-hero h1 .grad{background:linear-gradient(100deg,var(--text) 30%,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.cs-hero .lead{margin-top:1.4rem}
.cs-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem;list-style:none}
.cs-meta li{padding:.34rem .8rem;border:1px solid var(--line);border-radius:99px;background:var(--panel);font-size:.74rem;color:var(--muted)}
.cs-meta b{color:var(--text);font-weight:500}
.cs-cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2.2rem}

/* Project artwork (same SVG as the home-page card) */
.art{
  position:relative;aspect-ratio:16/10;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  background:radial-gradient(ellipse 70% 80% at 50% 110%,var(--glow),transparent 70%),var(--bg-soft);
  box-shadow:0 40px 90px rgba(0,0,0,.35);
}
.art svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.art .a-line{stroke:var(--line)}
.art .a-muted{fill:var(--muted-2)}
.art .a-text{fill:var(--text)}
.art .a-acc{fill:var(--accent)}
.art .a-acc-s{stroke:var(--accent)}
.art .a-acc2{fill:var(--accent2)}
.art .a-panel{fill:var(--panel-2);stroke:var(--line)}
.art .a-gauge{animation:ppGauge 1.6s var(--ease) .3s both}
@keyframes ppGauge{from{stroke-dashoffset:352}}
/* SEO / AIO bars fill on load */
.art .a-bar{transform-box:fill-box;transform-origin:left center;animation:ppBarIn 1.2s var(--ease) .35s both}
.art .a-bar--2{animation-delay:.55s}
@keyframes ppBarIn{from{transform:scaleX(0)}}
/* check dots tick over one after another */
.art .a-dots circle{animation:ppTick 4.2s ease-in-out infinite}
.art .a-dots circle:nth-child(2){animation-delay:.5s}
.art .a-dots circle:nth-child(3){animation-delay:1s}
@keyframes ppTick{0%,55%,100%{opacity:1}25%{opacity:.22}}
/* catalogue rows slide in, coin and banknote drift */
.art .a-row{animation:ppRowIn .7s var(--ease) both}
.art .a-row:nth-of-type(2){animation-delay:.12s}
.art .a-row:nth-of-type(3){animation-delay:.24s}
.art .a-row:nth-of-type(4){animation-delay:.36s}
@keyframes ppRowIn{from{opacity:0;transform:translateX(-8px)}}
.art .a-coin{animation:ppDrift 6s ease-in-out infinite}
.art .a-note{animation:ppDrift 7.5s ease-in-out infinite reverse}
.art .a-ring{transform-box:fill-box;transform-origin:center;animation:ppSpin 24s linear infinite}
.art .a-orb{animation:ppOrb 5s ease-in-out infinite}
@keyframes ppOrb{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes ppDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes ppSpin{to{transform:rotate(360deg)}}

/* ---------------- Content blocks ---------------- */
.head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.5rem;margin-bottom:2.6rem}
.head h2{font-size:clamp(1.7rem,3.4vw,2.8rem);max-width:20ch;line-height:1.08}
.head p{color:var(--muted);max-width:36ch}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1rem}
.tile{
  border:1px solid var(--line);border-radius:20px;padding:clamp(1.4rem,2.2vw,1.9rem);background:var(--panel);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:transform .45s var(--ease),border-color .45s,background .45s;
}
.tile:hover{transform:translateY(-5px);border-color:var(--accent);background:var(--panel-2)}
.tile .tag{font-family:var(--font-display);color:var(--accent);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.tile h3{font-size:1.15rem;margin:.9rem 0 .5rem}
.tile p{color:var(--muted);font-size:.93rem}
.tile--step{background:linear-gradient(170deg,var(--panel-2),transparent)}
.tile--last{border-color:var(--accent);background:linear-gradient(170deg,var(--glow),transparent)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin-top:2.2rem}
.stat{border:1px solid var(--line);border-radius:18px;padding:1.4rem 1.5rem;background:var(--panel)}
.stat b{display:block;font-family:var(--font-display);font-size:2rem;font-weight:500;line-height:1;color:var(--accent)}
.stat small{display:block;margin-top:.6rem;color:var(--muted);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:.7rem;max-width:900px}
.faq details{border:1px solid var(--line);border-radius:16px;background:var(--panel);transition:border-color .3s,background .3s}
.faq details[open]{border-color:var(--accent);background:var(--panel-2)}
.faq summary{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.1rem 1.4rem;font-family:var(--font-display);font-size:1rem;cursor:none;list-style:none;
}
@media (hover:none){.faq summary{cursor:pointer}}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 1.4rem 1.3rem;color:var(--muted);font-size:.95rem;max-width:72ch}

/* Bottom navigation between projects */
.more{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1rem;margin-top:2.2rem}
.more a{
  display:flex;flex-direction:column;gap:.35rem;border:1px solid var(--line);border-radius:18px;
  padding:1.4rem 1.6rem;background:var(--panel);transition:transform .4s var(--ease),border-color .3s,background .3s;
}
.more a:hover{transform:translateY(-4px);border-color:var(--accent);background:var(--panel-2)}
.more .t{font-family:var(--font-display);font-size:1.05rem}
.more .d{color:var(--muted);font-size:.85rem}

/* Legal page */
.legal h2{font-size:clamp(1.3rem,2.4vw,1.9rem);margin-bottom:1.4rem}
.legal .prose p{font-size:.98rem}
.legal code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;padding:.1rem .35rem;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.facts{list-style:none;display:grid;gap:.5rem;margin:1.4rem 0;max-width:640px}
.facts li{display:flex;flex-wrap:wrap;gap:.3rem 1rem;justify-content:space-between;padding:.7rem 1.1rem;border:1px solid var(--line);border-radius:12px;background:var(--panel);font-size:.92rem}
.facts span{color:var(--muted)}
.facts b{font-weight:500}

/* Contact strip */
.contact{position:relative;padding:clamp(4rem,10vh,7rem) var(--pad);border-top:1px solid var(--line);overflow:hidden;text-align:center}
.contact__glow{position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(90vw,900px);aspect-ratio:2/1;background:radial-gradient(ellipse at 50% 0%,var(--glow),transparent 65%);filter:blur(50px);opacity:.6;pointer-events:none}
.contact__inner{position:relative;z-index:2;max-width:900px;margin:0 auto}
.contact h2{font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:600;letter-spacing:-.03em;line-height:1.05}
.contact h2 .ac{color:var(--accent)}
.contact__cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}

/* Footer */
.footer{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.4rem;
  padding:1.8rem var(--pad);border-top:1px solid var(--line);font-size:.78rem;color:var(--muted);
}
.footer__meta{display:flex;flex-direction:column;gap:.4rem}
.footer__links{display:flex;gap:1.6rem;flex-wrap:wrap}
.footer__links a{color:var(--muted);transition:color .3s}
.footer__links a:hover{color:var(--text)}
.footer__links .footer__cta{color:var(--accent)}
.footer__badge{display:inline-flex;line-height:0;border-radius:8px;opacity:.9;transition:opacity .3s var(--ease)}
.footer__badge:hover{opacity:1}
.footer__badge img{height:auto;max-width:100%}
/* badge variant follows the theme: light artwork on dark, dark artwork on light */
.footer__badge .b-dark{display:none}
html.light .footer__badge .b-light{display:none}
html.light .footer__badge .b-dark{display:block}