*,*::before,*::after{box-sizing:border-box}
@font-face{
  font-family:"Space Grotesk";
  src:url("fonts/spacegrotesk-sk.woff2") format("woff2");
  font-weight:500 700;font-style:normal;font-display:swap;
}
:root{
  --bg:#02120c; --fg:#f2fff8; --muted:#a9d8c2;
  --mint:#3bf59a; --emerald:#10b981; --deep:#047857; --gold:#f5c96b; --gold2:#ffe6a3; --white:#ffffff;
  --card-w:min(72vw,360px);
  --px:0; --py:0; /* paralaxa -1..1 */
  --font:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
html{background:var(--bg);color:var(--fg);scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
body{margin:0;min-height:100dvh;overflow-x:hidden;overflow-x:clip;font-family:var(--font);font-weight:500;line-height:1.5;-webkit-font-smoothing:antialiased}
body.pre{overflow:hidden}
canvas#bubbles{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
canvas#fx{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;mix-blend-mode:screen}

/* ---------- intro ---------- */
.intro{position:fixed;inset:0;z-index:20;display:grid;place-items:center;text-align:center;
  background:radial-gradient(ellipse at 50% 40%,#0a4a30 0%,#04261a 45%,#02120c 100%);
  transition:opacity .9s ease,visibility .9s}
.intro.out{opacity:0;visibility:hidden;pointer-events:none}
.intro-inner{padding:24px;max-width:900px}
.intro-eyebrow{margin:0 0 10px;text-transform:uppercase;letter-spacing:.32em;font-size:12px;color:var(--gold2);font-weight:700}
.intro-title{margin:0;font-size:clamp(84px,24vw,240px);line-height:.85;letter-spacing:-.04em;font-weight:700;perspective:800px}
.intro-title span{display:inline-block;
  background:linear-gradient(180deg,#fff 0%,#d9ffe9 35%,var(--mint) 60%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 12px 30px rgba(59,245,154,.45));animation:letterIn .9s cubic-bezier(.2,.9,.2,1.2) both,shimmer 3s ease-in-out infinite}
.intro-title span:nth-child(1){animation-delay:.05s,0s}.intro-title span:nth-child(2){animation-delay:.15s,.2s}.intro-title span:nth-child(3){animation-delay:.25s,.4s}.intro-title span:nth-child(4){animation-delay:.35s,.6s}.intro-title span:nth-child(5){animation-delay:.45s,.8s}
@keyframes letterIn{from{opacity:0;transform:rotateX(-90deg) translateY(40px) scale(.6)}to{opacity:1;transform:none}}
@keyframes shimmer{0%,100%{filter:drop-shadow(0 12px 30px rgba(59,245,154,.45)) brightness(1)}50%{filter:drop-shadow(0 18px 44px rgba(245,201,107,.6)) brightness(1.25)}}
.intro-sub{margin:14px 0 30px;font-size:clamp(20px,4vw,34px);color:var(--fg)}
.enter{appearance:none;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:clamp(18px,3vw,24px);
  padding:18px 34px;border-radius:999px;color:#03140d;background:linear-gradient(135deg,var(--gold2),var(--gold) 40%,var(--mint));
  box-shadow:0 0 0 0 rgba(59,245,154,.6),0 20px 50px rgba(59,245,154,.35);animation:pulse 1.6s ease-out infinite;transition:transform .15s}
.enter:active{transform:scale(.96)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(59,245,154,.6),0 20px 50px rgba(59,245,154,.35)}100%{box-shadow:0 0 0 28px rgba(59,245,154,0),0 20px 50px rgba(59,245,154,.35)}}
.enter-quiet{display:block;margin:18px auto 0;appearance:none;border:0;background:none;color:var(--muted);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer}

/* ---------- pozadie ---------- */
.aurora{position:fixed;inset:-20%;z-index:0;pointer-events:none;filter:blur(70px);opacity:.7}
.aurora i{position:absolute;border-radius:50%;width:60vmax;height:60vmax;mix-blend-mode:screen;animation:drift 12s ease-in-out infinite alternate}
.aurora i:nth-child(1){background:radial-gradient(circle,var(--emerald),transparent 65%);top:-5%;left:-12%}
.aurora i:nth-child(2){background:radial-gradient(circle,var(--mint),transparent 65%);bottom:-15%;right:-8%;animation-duration:15s;opacity:.75}
.aurora i:nth-child(3){background:radial-gradient(circle,var(--gold),transparent 65%);top:45%;left:38%;animation-duration:17s;width:40vmax;height:40vmax;opacity:.5}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(14vw,-10vh,0) scale(1.2)}}

.shapes{position:fixed;inset:0;z-index:0;pointer-events:none;perspective:900px;overflow:hidden;
  transform:translate3d(calc(var(--px) * -18px),calc(var(--py) * -12px),0);transition:transform .15s linear}
.ring{position:absolute;border-radius:50%;
  background:conic-gradient(from 0deg,var(--mint),var(--gold),var(--emerald),var(--white),var(--mint));
  -webkit-mask:radial-gradient(circle,transparent calc(50% - 3px),#000 calc(50% - 2px));mask:radial-gradient(circle,transparent calc(50% - 3px),#000 calc(50% - 2px));
  opacity:.5;transform-style:preserve-3d;animation:spin 9s linear infinite}
.ring.r1{width:52vmin;height:52vmin;top:4%;left:-14vmin}
.ring.r2{width:80vmin;height:80vmin;bottom:-26vmin;right:-18vmin;animation-duration:14s;animation-direction:reverse}
.ring.r3{width:30vmin;height:30vmin;top:60%;left:8%;animation-duration:7s;opacity:.35}
@keyframes spin{from{transform:rotateX(66deg) rotateZ(0)}to{transform:rotateX(66deg) rotateZ(360deg)}}
.ice{position:absolute;width:70px;height:70px;transform-style:preserve-3d;animation:tumble 9s linear infinite;opacity:.6;--h:35px}
.ice.i1{top:14%;right:7%}
.ice.i2{bottom:14%;left:5%;animation-duration:12s;animation-delay:-4s;width:48px;height:48px;--h:24px}
.ice.i3{top:55%;right:12%;animation-duration:10s;animation-delay:-6s;width:38px;height:38px;--h:19px;opacity:.45}
.ice.i4{top:30%;left:18%;animation-duration:14s;animation-delay:-9s;width:30px;height:30px;--h:15px;opacity:.4}
.ice b{position:absolute;inset:0;border:1.5px solid rgba(255,255,255,.75);border-radius:6px;
  background:linear-gradient(135deg,rgba(255,255,255,.4),rgba(59,245,154,.2) 60%,rgba(255,255,255,.08))}
.ice b:nth-child(1){transform:translateZ(var(--h))}.ice b:nth-child(2){transform:rotateY(180deg) translateZ(var(--h))}
.ice b:nth-child(3){transform:rotateY(90deg) translateZ(var(--h))}.ice b:nth-child(4){transform:rotateY(-90deg) translateZ(var(--h))}
.ice b:nth-child(5){transform:rotateX(90deg) translateZ(var(--h))}.ice b:nth-child(6){transform:rotateX(-90deg) translateZ(var(--h))}
@keyframes tumble{from{transform:rotateX(0) rotateY(0) translateY(0)}50%{transform:rotateX(180deg) rotateY(160deg) translateY(-40px)}to{transform:rotateX(360deg) rotateY(360deg) translateY(0)}}

/* ---------- layout ---------- */
.scene{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:0 clamp(16px,4vw,40px) 80px}
section,header{padding:clamp(40px,8vw,90px) 0}
.h2{font-size:clamp(40px,8vw,84px);letter-spacing:-.03em;margin:0 0 6px;line-height:1;font-weight:700;
  background:linear-gradient(90deg,var(--white),var(--mint) 55%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 8px 24px rgba(59,245,154,.25))}
.lead{margin:0 0 28px;color:var(--muted);font-size:clamp(16px,2.2vw,20px)}
.green{color:var(--mint);font-style:normal;text-shadow:0 0 18px rgba(59,245,154,.6)}

/* ---------- hero ---------- */
.hero{min-height:92dvh;display:grid;align-content:center;justify-items:center;text-align:center;padding-top:clamp(60px,10vh,120px);position:relative;perspective:1000px}
.eyebrow{margin:0 0 14px;text-transform:uppercase;letter-spacing:.3em;font-size:12px;color:var(--gold2);font-weight:700}
.title{margin:0;font-size:clamp(96px,26vw,260px);line-height:.85;letter-spacing:-.05em;font-weight:700;perspective:900px}
.letters{display:inline-block;transform-style:preserve-3d;transform:rotateX(calc(var(--py) * -10deg)) rotateY(calc(var(--px) * 14deg));transition:transform .15s linear}
.letters span{display:inline-block;color:var(--white);
  text-shadow:0 1px 0 #d9ffe9,0 2px 0 #b9f5d3,0 3px 0 #8fe8b8,0 5px 0 #5fd99a,0 7px 0 #2fbf7c,0 10px 0 #1f9f66,0 14px 0 #147a4d,0 19px 0 #0d5636,0 30px 50px rgba(0,0,0,.6);
  animation:bounce 2.2s ease-in-out infinite}
.letters span:nth-child(2){animation-delay:.12s}.letters span:nth-child(3){animation-delay:.24s}.letters span:nth-child(4){animation-delay:.36s}.letters span:nth-child(5){animation-delay:.48s}
@keyframes bounce{0%,100%{transform:translateY(0) rotateX(0)}50%{transform:translateY(-14px) rotateX(8deg)}}
body.show .letters span{animation:letterIn .8s cubic-bezier(.2,.9,.2,1.2) both,bounce 2.2s ease-in-out .9s infinite}
body.show .letters span:nth-child(2){animation-delay:.1s,1s}body.show .letters span:nth-child(3){animation-delay:.2s,1.1s}body.show .letters span:nth-child(4){animation-delay:.3s,1.2s}body.show .letters span:nth-child(5){animation-delay:.4s,1.3s}
.sub{margin:22px 0 0;font-size:clamp(22px,4.2vw,38px);color:var(--fg);letter-spacing:-.01em}
.stats{list-style:none;display:flex;gap:clamp(14px,4vw,40px);margin:26px 0 0;padding:0;justify-content:center;flex-wrap:wrap}
.stats li{display:grid;justify-items:center;padding:12px 18px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);min-width:100px}
.stats b{font-size:clamp(28px,5vw,44px);line-height:1;color:var(--gold2)}
.stats span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-top:4px}
.cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:28px}
.btn{appearance:none;border:0;cursor:pointer;font:inherit;font-weight:700;text-decoration:none;font-size:16px;
  padding:15px 24px;border-radius:999px;color:#03140d;background:linear-gradient(135deg,var(--mint),var(--emerald));
  box-shadow:0 10px 30px rgba(59,245,154,.35),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(59,245,154,.45)}
.btn.ghost{background:rgba(255,255,255,.06);color:var(--fg);border:1px solid rgba(255,255,255,.22);box-shadow:none}
.btn:focus-visible,.nav:focus-visible,.dot:focus-visible,.music:focus-visible,.petuch:focus-visible,.enter:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.glass{position:relative;width:110px;height:170px;margin-top:40px;filter:drop-shadow(0 20px 30px rgba(0,0,0,.5));animation:sway 2.4s ease-in-out infinite;
  transform-origin:50% 100%}
@keyframes sway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.glass .liquid{position:absolute;left:8px;right:8px;top:0;height:96px;border-radius:0 0 50px 50px/0 0 70px 70px;overflow:hidden;
  border:2px solid rgba(255,255,255,.55);border-top:2px solid rgba(255,255,255,.35);
  background:linear-gradient(180deg,rgba(255,255,255,.12) 0 26%,var(--mint) 26%,var(--emerald) 75%,var(--deep))}
.glass .liquid::after{content:"";position:absolute;left:12px;top:18px;width:8px;height:56px;border-radius:4px;background:rgba(255,255,255,.45)}
.glass .stem{position:absolute;left:50%;top:96px;width:8px;height:56px;margin-left:-4px;background:linear-gradient(90deg,rgba(255,255,255,.7),rgba(255,255,255,.15))}
.glass .foot{position:absolute;left:20px;right:20px;bottom:0;height:16px;border-radius:50%;background:linear-gradient(90deg,rgba(255,255,255,.65),rgba(255,255,255,.2))}

/* ---------- ticker ---------- */
.ticker{overflow:hidden;white-space:nowrap;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);
  padding:12px 0;margin:0 calc(-1 * clamp(16px,4vw,40px));background:rgba(59,245,154,.06)}
.ticker-track{display:inline-block;animation:ticker 14s linear infinite;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:14px;color:var(--gold2)}
.ticker-track span{padding-right:.5em}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 3D karusel ---------- */
.gallery{text-align:center;overflow:hidden;margin-left:calc(-1 * clamp(16px,4vw,40px));margin-right:calc(-1 * clamp(16px,4vw,40px));padding-left:clamp(16px,4vw,40px);padding-right:clamp(16px,4vw,40px)}
.stage{position:relative;height:calc(var(--card-w) * 1.333 + 110px);perspective:1100px;perspective-origin:50% 35%;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;margin:10px 0 0}
.stage.drag{cursor:grabbing}
.ring3d{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.card{position:absolute;left:50%;top:10px;width:var(--card-w);margin:0 0 0 calc(var(--card-w) / -2);
  transform-style:preserve-3d;backface-visibility:hidden;
  border-radius:20px;background:#0b3324;
  box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.18) inset;transition:box-shadow .4s}
.card picture{display:block;border-radius:20px;overflow:hidden}
.card img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;pointer-events:none;transition:filter .4s}
.card::after{ /* odraz na podlahe */
  content:"";position:absolute;left:0;right:0;top:100%;height:60%;margin-top:6px;border-radius:20px;
  background:var(--refl) center top/100% auto no-repeat;transform:scaleY(-1);
  -webkit-mask:linear-gradient(to top,rgba(0,0,0,.45),transparent 80%);mask:linear-gradient(to top,rgba(0,0,0,.45),transparent 80%);
  pointer-events:none;opacity:.7}
.card figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 14px;font-size:16px;font-weight:700;color:var(--white);border-radius:0 0 20px 20px;
  background:linear-gradient(180deg,transparent,rgba(3,20,13,.9));opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.card.front figcaption{opacity:1;transform:none}
.card.front{box-shadow:0 40px 80px rgba(0,0,0,.6),0 0 0 2px var(--gold) inset,0 0 60px rgba(245,201,107,.45)}
.card:not(.front) img{filter:brightness(.5) saturate(.8)}
.floor{position:absolute;left:0;right:0;bottom:-10px;height:120px;transform:translateX(-50%);pointer-events:none;
  transform:none;background:radial-gradient(ellipse at 50% 50%,rgba(59,245,154,.28),transparent 60%);filter:blur(10px)}
.controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px}
.nav{appearance:none;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:var(--fg);
  width:48px;height:48px;border-radius:50%;font-size:28px;line-height:1;cursor:pointer;font-family:inherit;transition:background .2s}
.nav:hover{background:rgba(59,245,154,.2)}
.dots{display:flex;gap:10px}
.dot{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.3);cursor:pointer;transition:transform .2s,background .2s}
.dot[aria-selected="true"]{background:var(--gold);transform:scale(1.4)}
.hint{color:var(--muted);font-size:13px;margin:16px 0 0}

/* ---------- chvalospev ---------- */
.ode{text-align:center}
.ode .paper{text-align:left;max-width:760px;margin:0 auto;padding:clamp(24px,4vw,44px);border-radius:28px;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 60px rgba(0,0,0,.4),0 0 80px rgba(59,245,154,.08);backdrop-filter:blur(10px);font-size:clamp(17px,2.3vw,21px)}
.ode p{margin:0 0 1em}.ode p:last-child{margin:0}
.ode strong{color:var(--gold2)}
.ode .toast{font-weight:700;color:var(--white);border-top:1px solid rgba(255,255,255,.14);padding-top:1em;margin-top:1.2em;font-size:1.1em}

/* ---------- básnička ---------- */
.poem{text-align:center}
.stanzas{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;max-width:920px;margin:0 auto;perspective:1000px}
.stanza{margin:0;padding:24px 14px;border-radius:20px;font-size:clamp(15px,1.9vw,17px);line-height:1.65;
  background:rgba(2,18,12,.75);border:1px solid rgba(59,245,154,.3);box-shadow:0 20px 40px rgba(0,0,0,.35);
  transition:transform .5s,border-color .5s,box-shadow .5s}
.stanza p{margin:0}
.stanza:hover{transform:rotateX(5deg) rotateY(-5deg) translateY(-6px) scale(1.03);border-color:var(--gold);box-shadow:0 30px 50px rgba(0,0,0,.45),0 0 40px rgba(245,201,107,.3)}
.stanza:nth-child(3n){border-color:rgba(245,201,107,.4)}

/* ---------- kohút ---------- */
.rooster{text-align:center;position:relative}
.spotlight{position:absolute;left:50%;top:40%;width:min(520px,90vw);height:min(520px,90vw);transform:translate(-50%,-30%);pointer-events:none;
  background:radial-gradient(circle,rgba(245,201,107,.28),rgba(59,245,154,.12) 40%,transparent 65%);filter:blur(8px);animation:spot 3s ease-in-out infinite}
@keyframes spot{0%,100%{transform:translate(-50%,-30%) scale(1)}50%{transform:translate(-50%,-30%) scale(1.15)}}
.petuch{appearance:none;border:0;background:none;cursor:pointer;position:relative;padding:44px 20px 10px;font-family:inherit}
.petuch .bird{display:block;font-size:clamp(120px,30vw,240px);line-height:1;filter:drop-shadow(0 24px 34px rgba(0,0,0,.55));
  animation:strut 1s ease-in-out infinite;transform-origin:50% 100%}
@keyframes strut{0%,100%{transform:rotate(-4deg) translateY(0)}25%{transform:rotate(0) translateY(-10px)}50%{transform:rotate(4deg) translateY(0)}75%{transform:rotate(0) translateY(-10px)}}
.petuch.crow .bird{animation:crow .9s ease-out}
@keyframes crow{0%{transform:scale(1) rotate(0)}30%{transform:scale(1.3) rotate(-12deg) translateY(-30px)}60%{transform:scale(1.2) rotate(10deg) translateY(-20px)}100%{transform:scale(1) rotate(0)}}
.bubble{position:absolute;left:50%;top:0;transform:translate(-50%,10px) scale(.8);opacity:0;
  padding:10px 16px;border-radius:16px;background:var(--white);color:#03140d;font-weight:700;font-size:18px;white-space:nowrap;
  transition:opacity .25s,transform .25s;pointer-events:none}
.bubble::after{content:"";position:absolute;left:50%;bottom:-8px;margin-left:-8px;border:8px solid transparent;border-top-color:var(--white);border-bottom:0}
.bubble.show{opacity:1;transform:translate(-50%,0) scale(1)}

/* ---------- hudba ---------- */
.music{position:fixed;right:14px;top:14px;z-index:5;display:flex;align-items:center;gap:10px;
  appearance:none;border:1px solid rgba(255,255,255,.22);background:rgba(2,18,12,.75);backdrop-filter:blur(8px);
  color:var(--fg);padding:8px 14px 8px 10px;border-radius:999px;cursor:pointer;font:inherit;font-weight:700;font-size:13px}
.music .bars{display:flex;align-items:flex-end;gap:2px;height:16px}
.music .bars i{width:3px;height:4px;background:var(--mint);border-radius:2px;transition:height .2s}
.music[aria-pressed="true"] .bars i{animation:eq .5s ease-in-out infinite alternate}
.music .bars i:nth-child(2){animation-delay:-.2s}.music .bars i:nth-child(3){animation-delay:-.4s}.music .bars i:nth-child(4){animation-delay:-.1s}
@keyframes eq{from{height:4px}to{height:16px}}

.foot-note{text-align:center;color:var(--muted);font-size:13px;padding-top:20px}
.big-toast{font-size:clamp(32px,7vw,72px);font-weight:700;letter-spacing:-.03em;margin:0 0 20px;color:var(--white);
  text-shadow:0 0 30px rgba(59,245,154,.6),0 10px 30px rgba(0,0,0,.5)}

@media (max-width:600px){
  .stats{gap:8px;flex-wrap:nowrap}
  .stats li{flex:1 1 0;min-width:0;padding:10px 6px}
  .stats span{font-size:10px;letter-spacing:.08em;text-align:center}
  .music .music-label{display:none}
  .music{padding:10px}
  .spotlight{width:360px;height:360px}
}
@media (prefers-reduced-motion:reduce){
  .aurora i,.ring,.ice,.letters span,.glass,.petuch .bird,.music .bars i,.ticker-track,.spotlight,.enter,.intro-title span{animation:none}
  .stanza,.letters,.shapes{transition:none}
}