/*
Theme Name: Hopley 2026
Theme URI: https://hopley.cz/
Author: Cirko Hopley
Description: Jednostránková šablona pro Cirko Hopley (CZ homepage + německá stránka Zirkustheater). Obsah je přímo v šablonách, v administraci se needituje.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: hopley
*/

/* ---------- Tokens ---------- */
:root{
  --blue:#18A7E4;
  --blue-deep:#0B6FA4;
  --navy:#0A3D5E;
  --navy-2:#082F49;
  --yellow:#FBCE2F;
  --yellow-2:#FFE07A;
  --ink:#10151B;
  --ink-2:#3A4550;
  --muted:#6B7783;
  --paper:#FFFFFF;
  --cream:#FFF8E6;
  --line:#E6ECF1;
  --radius:18px;
  --shadow:0 20px 50px -20px rgba(10,61,94,.35);
  --font-head:"Mulish",system-ui,sans-serif;
  --font-body:"Open Sans",system-ui,sans-serif;
  --wrap:min(1180px, calc(100% - 40px));
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);color:var(--ink-2);background:var(--paper);line-height:1.65;font-size:17px;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);line-height:1.1;margin:0}
p{margin:0 0 1em}
.wrap{width:var(--wrap);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;padding:.85em 1.6em;border-radius:999px;font-family:var(--font-head);font-weight:800;font-size:17px;text-decoration:none;border:0;cursor:pointer;transition:transform .25s var(--ease-back),box-shadow .25s,background .25s,color .25s}
.btn svg{width:18px;height:18px;transition:transform .25s var(--ease-out)}
.btn:hover svg{transform:translateX(3px)}
.btn--yellow{background:var(--yellow);color:var(--ink);box-shadow:0 10px 24px -10px rgba(251,206,47,.9)}
.btn--yellow:hover{transform:translateY(-2px);background:var(--yellow-2)}
.btn--ghost{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);backdrop-filter:blur(6px)}
.btn--ghost:hover{background:#fff;color:var(--blue-deep)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{transform:translateY(-2px);background:var(--blue-deep)}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:50;transition:background .35s,box-shadow .35s,padding .35s;padding:18px 0}
.site-header .bar{width:min(1320px,calc(100% - 32px));margin-inline:auto;display:flex;align-items:center;gap:28px}
.logo img{height:58px;width:auto;transition:height .35s var(--ease-out)}
.nav{margin-left:auto}
.nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav a{display:block;padding:8px 14px;border-radius:999px;text-decoration:none;font-family:var(--font-head);font-weight:800;font-size:15.5px;color:#fff;transition:background .2s,color .2s}
.nav a:hover{background:rgba(255,255,255,.16)}
.nav a.is-active{background:#fff;color:var(--blue-deep)}
.nav .lang{font-size:13px;letter-spacing:.06em;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.socials{display:flex;gap:6px}
.socials a{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;color:#fff;transition:background .2s,transform .2s}
.socials a:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.socials svg{width:19px;height:19px}
.site-header.is-scrolled{background:rgba(16,140,198,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 10px 30px -18px rgba(0,0,0,.5);padding:8px 0}
.site-header.is-scrolled .logo img{height:44px}
.burger{display:none;margin-left:auto;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.16);cursor:pointer;position:relative}
.burger span{position:absolute;left:13px;right:13px;height:2.5px;border-radius:2px;background:#fff;transition:transform .3s var(--ease-out),opacity .2s}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:22px}.burger span:nth-child(3){top:28px}
.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-open .burger span:nth-child(2){opacity:0}
.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:96px 0 120px;color:#fff;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 50% 38%, #3CC1F5 0%, var(--blue) 42%, #0E8CC6 100%)}
/* slowly turning tent stripes */
.hero__rays{position:absolute;left:50%;top:44%;width:240vmax;height:240vmax;translate:-50% -50%;z-index:-2;opacity:.11;
  background:repeating-conic-gradient(from 0deg,#fff 0deg 7.5deg,transparent 7.5deg 15deg);
  -webkit-mask:radial-gradient(circle,transparent 9%,#000 22%,transparent 62%);mask:radial-gradient(circle,transparent 9%,#000 22%,transparent 62%);
  animation:spin 160s linear infinite}
.hero__glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 32% at var(--gx,50%) var(--gy,40%),rgba(255,255,255,.22),transparent 70%)}
.hero__dots{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero__dots i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--yellow);opacity:.0;animation:twinkle 6s ease-in-out infinite}

/* the stage keeps the original geometry (840 × 648) and scales with --u */
.stage{--u:calc(min(840px, 94vw, (100svh - 450px) * 1.424) / 840);position:relative;width:calc(840 * var(--u));height:calc(590 * var(--u))}
.layer{position:absolute;inset:0;will-change:transform;transform:translate3d(calc(var(--px,0) * var(--d) * 1px),calc(var(--py,0) * var(--d) * 1px),0)}
.circle{position:absolute;left:calc(121 * var(--u));top:calc(0 * var(--u));width:calc(577 * var(--u));height:calc(577 * var(--u))}
.circle img{width:100%;height:100%}
.chair{position:absolute;left:calc(206 * var(--u));top:calc(36 * var(--u));width:calc(427 * var(--u));z-index:2}
.chair img{width:100%;filter:drop-shadow(0 calc(24 * var(--u)) calc(22 * var(--u)) rgba(0,40,70,.35))}
.chair .bob{animation:bob 5.5s ease-in-out infinite}

/* orbit: arm rotates around the circle centre, front half passes in front of the chair */
.orbit{position:absolute;left:calc(409.5 * var(--u));top:calc(288.5 * var(--u));width:0;height:0}
.arm{position:absolute;left:0;top:0;width:0;height:0;animation:orbit 30s linear infinite,depth-z 30s step-end infinite;animation-delay:var(--delay),var(--delay)}
.throw{position:absolute;left:0;top:0;transform:translate(calc(var(--r,205) * var(--u)),0)}
.depth{transform:translate(-50%,-50%);animation:depth 30s ease-in-out infinite;animation-delay:var(--delay)}
.depth img{width:calc(var(--w) * .62 * var(--u));max-width:none;filter:drop-shadow(0 calc(10 * var(--u)) calc(12 * var(--u)) rgba(0,40,70,.3))}

.hero__title{text-align:center;position:relative;z-index:3;margin-top:calc(var(--title-pull, 4) * 1px)}
.hero__kicker{display:inline-block;font-family:var(--font-head);font-weight:800;font-size:clamp(15px,1.6vw,20px);letter-spacing:.22em;text-transform:uppercase;color:#fff;margin:0 0 6px;text-shadow:0 2px 10px rgba(8,47,73,.35)}
.hero h1{color:#fff;font-weight:900;font-size:clamp(52px,8.4vw,112px);letter-spacing:-.02em;line-height:.95;text-shadow:0 6px 0 rgba(8,47,73,.18)}
.hero h1 .ch{display:inline-block}
.hero__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.hero__wave{position:absolute;left:0;right:0;bottom:-1px;z-index:4;line-height:0;pointer-events:none}
.hero__wave svg{width:100%;height:clamp(70px,10vw,150px)}

/* ---- Intro choreography (only when JS is on) ---- */
.js .hero .circle{transform:scale(0);opacity:0}
.js .hero .chair{transform:translateY(-120vh) rotate(-28deg)}
.js .hero .throw{transform:translate(0,0) scale(.2);opacity:0}
.js .hero .hero__kicker,.js .hero .hero__cta{opacity:0;transform:translateY(16px)}
.js .hero h1 .ch{opacity:0;transform:translateY(.6em) rotate(8deg) scale(.6)}
.js .hero .hero__rays{opacity:0}

.hero.is-in .circle{transform:none;opacity:1;transition:transform 1s var(--ease-back),opacity .4s}
.hero.is-in .chair{transform:none;transition:transform 1.15s cubic-bezier(.22,1.45,.4,1) .35s}
.hero.is-in .throw{transform:translate(calc(var(--r,205) * var(--u)),0) scale(1);opacity:1;transition:transform 1.1s var(--ease-back) calc(1.15s + var(--i) * .13s),opacity .3s calc(1.15s + var(--i) * .13s)}
.hero.is-in .hero__kicker{opacity:1;transform:none;transition:all .7s var(--ease-out) 1.2s}
.hero.is-in h1 .ch{opacity:1;transform:none;transition:transform .8s var(--ease-back) calc(1.3s + var(--c) * .045s),opacity .3s calc(1.3s + var(--c) * .045s)}
.hero.is-in .hero__cta{opacity:1;transform:none;transition:all .8s var(--ease-out) 2s}
.hero.is-in .hero__rays{opacity:.08;transition:opacity 2.5s ease .6s}
.hero.is-in .hero__dots i{animation-play-state:running}

@keyframes spin{to{rotate:360deg}}
@keyframes orbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes depth-z{0%{z-index:3}50%{z-index:1}}
@keyframes depth{0%,100%{scale:1}25%{scale:1.1}75%{scale:.84}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(calc(-10 * var(--u))) rotate(-1.4deg)}}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.85;transform:scale(1)}}

/* ---------- Sections ---------- */
section,footer{position:relative;overflow-x:clip}
.section{padding:clamp(80px,10vw,140px) 0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:800;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-deep);margin-bottom:14px}
.eyebrow::before{content:"";width:28px;height:3px;border-radius:2px;background:var(--yellow)}
.h2{font-size:clamp(36px,5vw,58px);font-weight:900;letter-spacing:-.02em;margin-bottom:22px}
.lead{font-family:var(--font-head);font-weight:700;font-size:clamp(19px,1.8vw,23px);color:var(--ink);line-height:1.4}
.ghost{position:absolute;top:clamp(30px,5vw,70px);font-family:var(--font-head);font-weight:900;font-size:clamp(70px,13vw,190px);line-height:1;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:2px rgba(24,167,228,.13);pointer-events:none;white-space:nowrap;user-select:none;z-index:-1}
.ghost--l{left:-1vw}.ghost--r{right:-1vw}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:center}
.prose h3{font-size:24px;font-weight:900;margin:1.3em 0 .4em}
.prose strong{color:var(--ink)}
.prose a{color:var(--blue-deep);font-weight:700;text-decoration-thickness:2px;text-underline-offset:3px}

/* show */
.show{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,5vw,80px);align-items:start}
.show__media{position:sticky;top:110px}
.photo{position:relative;border-radius:var(--radius);overflow:visible}
.photo img{border-radius:var(--radius);width:100%;aspect-ratio:4/5;object-fit:cover;box-shadow:var(--shadow)}
.photo::before{content:"";position:absolute;inset:auto -18px -18px auto;width:62%;height:62%;border-radius:var(--radius);background:var(--yellow);z-index:-1}
.photo--dots::after{content:"";position:absolute;top:-26px;left:-26px;width:130px;height:130px;background:radial-gradient(var(--blue) 2.2px,transparent 2.6px) 0 0/18px 18px;opacity:.55;z-index:-1}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 26px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--cream);color:var(--ink);font-family:var(--font-head);font-weight:800;font-size:14px;box-shadow:inset 0 0 0 1.5px #F6E2A2}
.badge svg{width:18px;height:18px;color:#D9A400}
.credits{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border-radius:14px;overflow:hidden;margin-top:28px;border:1px solid var(--line)}
.credits div{background:#fff;padding:14px 18px}
.credits dt{font-family:var(--font-head);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--muted)}
.credits dd{margin:2px 0 0;font-family:var(--font-head);font-weight:800;color:var(--ink)}

/* about */
.about{background:linear-gradient(180deg,#fff 0%,#F2FAFE 100%)}
.composite img{width:100%;height:auto}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.pillar{background:#fff;border-radius:14px;padding:16px;box-shadow:0 8px 24px -16px rgba(10,61,94,.4);text-align:center;font-family:var(--font-head);font-weight:800;color:var(--ink)}
.pillar b{display:block;font-size:26px;line-height:1;margin-bottom:6px}

/* tour */
.tour{background:var(--navy);color:#CFE6F3;overflow:hidden;isolation:isolate}
.tour .h2,.tour h3{color:#fff}
.tour .eyebrow{color:var(--yellow)}
.tour .ghost{-webkit-text-stroke-color:rgba(255,255,255,.07)}
.tour__grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(36px,5vw,80px);align-items:start}
.tour__next{display:flex;gap:16px;align-items:center;background:var(--yellow);color:var(--ink);border-radius:16px;padding:18px 20px;margin:6px 0 24px;font-family:var(--font-head)}
.tour__next .pulse{flex:none;width:14px;height:14px;border-radius:50%;background:#E5484D;box-shadow:0 0 0 0 rgba(229,72,77,.6);animation:pulse 1.8s infinite}
.tour__next small{display:block;font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:12px;opacity:.7}
.tour__next strong{font-size:19px;font-weight:900}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}}
.dates{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.12)}
.dates li{display:grid;grid-template-columns:minmax(150px,200px) 1fr auto;gap:16px;align-items:center;padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.12);transition:background .2s}
.dates li:hover{background:rgba(255,255,255,.04)}
.dates time{font-family:var(--font-head);font-weight:900;color:#fff;font-size:15.5px;line-height:1.35}
.dates .place{font-family:var(--font-head);font-weight:800;color:#fff;line-height:1.3}
.dates .ev{display:block;font-family:var(--font-body);font-weight:400;font-size:14.5px;color:#9FC4D9}
.cc{font-family:var(--font-head);font-weight:900;font-size:12px;letter-spacing:.08em;padding:4px 8px;border-radius:6px;background:rgba(255,255,255,.1);color:#fff}
.dates li.is-past{opacity:.42}
.dates li.is-past time{text-decoration:line-through;text-decoration-thickness:1px}
.dates li.is-now,.dates li.is-next{background:rgba(251,206,47,.1)}
.dates li.is-now time,.dates li.is-next time{color:var(--yellow)}
.dates li.is-hidden{display:none}
.tag{display:inline-block;margin:2px 0 2px 8px;padding:2px 8px;border-radius:999px;background:var(--yellow);color:var(--ink);font-family:var(--font-head);font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}
.toggle-past{margin-top:18px;background:none;border:0;color:#fff;font-family:var(--font-head);font-weight:800;cursor:pointer;padding:8px 0;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--yellow);text-decoration-thickness:2px}
.tour .composite{position:sticky;top:110px}

/* gallery */
.gallery{padding:clamp(70px,8vw,110px) 0;background:#fff}
.gallery__head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:30px}
.gallery__nav{display:flex;gap:10px}
.icon-btn{width:52px;height:52px;border-radius:50%;border:0;background:var(--ink);color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .2s var(--ease-back),background .2s}
.icon-btn:hover{transform:scale(1.07);background:var(--blue-deep)}
.icon-btn svg{width:22px;height:22px}
.track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(20px,calc((100vw - 1180px)/2));padding:6px max(20px,calc((100vw - 1180px)/2)) 24px;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.track button{flex:none;scroll-snap-align:start;border:0;padding:0;background:none;cursor:zoom-in;border-radius:16px;overflow:hidden;position:relative;height:clamp(260px,34vw,420px);box-shadow:0 18px 40px -24px rgba(10,61,94,.6)}
.track img{height:100%;width:auto;max-width:none;transition:transform .7s var(--ease-out)}
.track button:hover img{transform:scale(1.05)}
.track button::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 60%,rgba(0,0,0,.25))}
.lightbox{border:0;padding:0;background:transparent;max-width:min(1200px,94vw);max-height:92vh}
.lightbox::backdrop{background:rgba(5,20,32,.88);backdrop-filter:blur(6px)}
.lightbox img{max-height:86vh;width:auto;border-radius:12px}
.lightbox__bar{display:flex;justify-content:center;gap:10px;margin-top:12px}
.lightbox .icon-btn{background:rgba(255,255,255,.14)}

/* chapiteau */
.tent{background:var(--cream);overflow:hidden;isolation:isolate}
.tent .ghost{-webkit-text-stroke-color:rgba(217,164,0,.16)}
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0 30px}
.spec{background:#fff;border-radius:16px;padding:18px;box-shadow:0 10px 26px -18px rgba(120,90,0,.45)}
.spec b{display:block;font-family:var(--font-head);font-weight:900;font-size:clamp(28px,3vw,38px);color:var(--ink);line-height:1}
.spec span{font-size:14px;color:var(--muted)}
.spec--wide{grid-column:span 3;display:flex;gap:30px;align-items:flex-start}
.spec--wide div{flex:1}

/* founder */
.founder .composite{position:sticky;top:110px}
.founder blockquote{margin:28px 0 0;padding:22px 26px;border-radius:16px;background:#F2FAFE;font-family:var(--font-head);font-weight:800;font-style:italic;font-size:21px;color:var(--ink);position:relative}
.founder blockquote::before{content:"“";position:absolute;top:-28px;left:14px;font-size:90px;color:var(--yellow);font-style:normal;line-height:1}

/* social band */
.social-band{background:var(--blue);color:#fff;padding:clamp(56px,7vw,90px) 0;overflow:hidden;position:relative;isolation:isolate}
.social-band::before{content:"";position:absolute;inset:-50%;z-index:-1;opacity:.1;background:repeating-conic-gradient(from 0deg at 85% 50%,#fff 0 7.5deg,transparent 7.5deg 15deg)}
.social-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.social-band h2{color:#fff;font-size:clamp(28px,3.6vw,42px);font-weight:900}
.social-band p{margin:.4em 0 0;color:#DDF3FD}
.social-band .row{display:flex;gap:12px;flex-wrap:wrap}

/* footer / contact */
.contact{background:var(--navy-2);color:#B9D6E6;padding:clamp(80px,9vw,120px) 0 40px}
.contact h2,.contact h3{color:#fff}
.contact__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(36px,6vw,90px)}
.contact__list{list-style:none;padding:0;margin:26px 0;display:grid;gap:16px}
.contact__list li{display:flex;gap:14px;align-items:flex-start}
.contact__list svg{flex:none;width:44px;height:44px;padding:11px;border-radius:12px;background:rgba(255,255,255,.07);color:var(--yellow)}
.contact__list small{display:block;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#7FA6BC}
.contact__list a,.contact__list span{color:#fff;font-family:var(--font-head);font-weight:800;font-size:19px;text-decoration:none}
.contact__list a:hover{color:var(--yellow)}
.contact .socials a{background:rgba(255,255,255,.07)}
.form{background:var(--blue);border-radius:22px;padding:clamp(26px,4vw,44px);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.form h3{font-size:30px;font-weight:900;margin-bottom:20px}
.field{display:block;margin-bottom:16px}
.field span{display:block;font-family:var(--font-head);font-weight:800;font-size:14px;color:#E6F6FD;margin-bottom:6px}
.field input,.field textarea{width:100%;font:inherit;font-size:16px;color:#fff;background:rgba(5,60,95,.28);border:1.5px solid rgba(255,255,255,.25);border-radius:12px;padding:12px 14px;transition:border-color .2s,background .2s}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.55)}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--yellow);background:rgba(5,60,95,.4)}
.field textarea{min-height:130px;resize:vertical}
.form small{display:block;color:#E6F6FD;font-size:13.5px;margin:4px 0 20px}
.form small a{color:#fff;font-weight:700}
.form__ok{display:none;margin-top:14px;font-family:var(--font-head);font-weight:800;color:#fff}
.legal{margin-top:70px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:#7FA6BC}
.legal a{color:#B9D6E6}

/* reveal */
.js [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--rd,0s)}
.js [data-reveal].in{opacity:1;transform:none}


/* ================= v2 ================= */
:root{--font-hand:"Caveat","Comic Sans MS",cursive;--red:#E5484D}
@property --sr{syntax:'<length>';inherits:false;initial-value:0px}
@property --sx{syntax:'<percentage>';inherits:false;initial-value:16%}
@property --sy{syntax:'<percentage>';inherits:false;initial-value:-8%}

.progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--yellow),#fff 80%);z-index:60;pointer-events:none}

/* lights-on intro: the ring is dark, a follow-spot finds the stage, then the house lights come up */
.hero__dark,.hero__hint{display:none}
.js .hero__dark{display:block;position:absolute;inset:0;z-index:6;pointer-events:none;--sr:0px;
  background:radial-gradient(circle at var(--sx) var(--sy),rgba(255,246,210,.16) 0,rgba(255,246,210,.05) calc(var(--sr) * .75),rgba(3,14,24,.965) var(--sr))}
.hero.lights .hero__dark{animation:lights 2.5s cubic-bezier(.65,0,.3,1) forwards}
@keyframes lights{
  0%{--sr:0px;--sx:16%;--sy:-8%}
  18%{--sr:150px;--sx:24%;--sy:22%}
  52%{--sr:175px;--sx:50%;--sy:40%}
  66%{--sr:200px;--sx:50%;--sy:40%;opacity:1}
  100%{--sr:2400px;--sx:50%;--sy:40%;opacity:0}}
.js .hero__hint{display:block;position:absolute;left:50%;top:40%;translate:-50% -50%;z-index:7;pointer-events:none;white-space:nowrap;font-family:var(--font-hand);font-weight:700;font-size:clamp(30px,4vw,52px);color:#FFF3C4;text-shadow:0 0 24px rgba(255,214,90,.6);opacity:0}
.hero.lights .hero__hint{animation:hint 1.9s ease .15s forwards}
@keyframes hint{0%{opacity:0;transform:translateY(10px)}30%,62%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
.seen .hero__dark,.seen .hero__hint{display:none!important}

/* marquee bulbs around the circle */
.bulbs{position:absolute;left:calc(409.5 * var(--u));top:calc(288.5 * var(--u));width:0;height:0}
.bulbs i{position:absolute;left:0;top:0;width:calc(13 * var(--u));height:calc(13 * var(--u));margin:calc(-6.5 * var(--u));border-radius:50%;background:#FFF6D5;
  box-shadow:0 0 calc(12 * var(--u)) calc(3 * var(--u)) rgba(255,210,80,.75);transform:rotate(var(--a)) translateX(calc(318 * var(--u)));
  animation:bulb 1.8s ease-in-out infinite;animation-delay:calc(var(--k) * -.0643s)}
@keyframes bulb{0%,100%{opacity:1}50%{opacity:.28;box-shadow:0 0 0 0 rgba(255,210,80,0)}}
.hero__confetti{position:absolute;inset:0;z-index:4;pointer-events:none}
.hero__confetti i{position:absolute;left:0;top:0;width:10px;height:14px;border-radius:2px}

/* shine on buttons */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .7s var(--ease-out)}
.btn:hover::before{left:130%}

/* highlighter on headings */
.hl{background:linear-gradient(transparent 60%,var(--yellow) 60%,var(--yellow) 90%,transparent 90%) no-repeat 0 0/0% 100%;padding:0 .08em;transition:background-size 1.1s var(--ease-out) .35s}
.in .hl,.hl.in,html:not(.js) .hl{background-size:100% 100%}
.tour .hl{background-image:linear-gradient(transparent 62%,rgba(251,206,47,.55) 62%,rgba(251,206,47,.55) 90%,transparent 90%)}

/* handwritten notes */
.note{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-hand);font-weight:700;font-size:27px;line-height:1;color:var(--blue-deep);rotate:-3deg;margin:6px 0 0}
.note svg{width:46px;height:34px;flex:none}

/* ticker */
.ticker-wrap{position:relative;z-index:5;margin-top:-62px;padding:18px 0;overflow-x:clip}
.ticker{width:104%;margin-left:-2%;transform:rotate(-1.8deg);background:var(--yellow);padding:15px 0;overflow:hidden;box-shadow:0 16px 34px -20px rgba(0,0,0,.45)}
.ticker__run{display:flex;width:max-content;animation:ticker 42s linear infinite}
.ticker:hover .ticker__run{animation-play-state:paused}
.ticker span{display:flex;align-items:center;gap:30px;padding-right:30px;white-space:nowrap;font-family:var(--font-head);font-weight:900;font-size:clamp(18px,2vw,25px);color:var(--ink);letter-spacing:-.01em}
.ticker span::after{content:"✦";color:var(--blue-deep);font-size:.8em}
@keyframes ticker{to{transform:translateX(-50%)}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:30px}
.stat{background:#fff;border-radius:16px;padding:18px 14px;text-align:center;box-shadow:0 10px 28px -18px rgba(10,61,94,.45)}
.stat b{display:block;font-family:var(--font-head);font-weight:900;font-size:clamp(32px,3.4vw,44px);line-height:1;color:var(--blue-deep);font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:6px;font-size:13.5px;line-height:1.3;color:var(--muted)}

/* press */
.press{background:var(--cream);overflow:hidden;isolation:isolate}
.press .ghost{-webkit-text-stroke-color:rgba(217,164,0,.16)}
.quotes{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:auto auto;gap:18px;margin-top:10px}
.quote{margin:0;background:#fff;border-radius:20px;padding:30px 30px 26px;position:relative;box-shadow:0 18px 40px -26px rgba(120,90,0,.5);display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.quote::before{content:"“";position:absolute;top:-6px;right:22px;font-family:var(--font-head);font-weight:900;font-size:120px;line-height:1;color:var(--yellow)}
.quote blockquote{margin:0;font-family:var(--font-head);font-weight:800;font-size:clamp(19px,1.7vw,23px);line-height:1.35;color:var(--ink);position:relative}
.quote--big{grid-row:span 2;min-height:420px;background:linear-gradient(180deg,rgba(10,61,94,.80),rgba(8,47,73,.96) 70%),url(../../uploads/2023/08/M_S-C3-108.jpg) center/cover var(--navy);box-shadow:0 26px 50px -26px rgba(10,61,94,.7)}
.quote--big blockquote{color:#fff;font-size:clamp(28px,3vw,42px);line-height:1.15;letter-spacing:-.01em}
.quote--big figcaption{color:#B9D6E6}.quote--big figcaption a{color:var(--yellow)}
.quote--poem blockquote{font-family:var(--font-hand);font-weight:700;font-size:clamp(28px,2.5vw,34px);line-height:1.1}
.quote figcaption{font-size:14.5px;color:var(--muted);line-height:1.45}
.quote figcaption b{display:block;font-family:var(--font-head);font-weight:900;font-size:16px;color:inherit}
.quote--big figcaption b{color:#fff}
.quote figcaption a{color:var(--blue-deep);font-weight:700}
.quote.quote--big figcaption a{color:var(--yellow)}
.quote--wide{grid-column:1/-1;flex-direction:row;align-items:flex-end;gap:40px;padding:34px 40px}
.quote--wide blockquote{flex:1;font-size:clamp(20px,1.9vw,26px)}
.quote--wide figcaption{flex:none;min-width:150px}
.quote:not(.quote--big) blockquote{padding-right:52px}
.awards{display:flex;flex-wrap:wrap;gap:16px;margin-top:34px;justify-content:center}
.award{display:flex;align-items:center;gap:14px;padding:12px 22px 12px 14px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px #F1DC98}
.award svg{width:46px;height:46px;flex:none;color:#C99700}
.award b{display:block;font-family:var(--font-head);font-weight:900;color:var(--ink);line-height:1.2}
.award span{font-size:13.5px;color:var(--muted)}

/* steps for organisers */
.steps{background:#fff}
.steps__list{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:st;position:relative}
.steps__list::before{content:"";position:absolute;left:34px;right:calc(25% - 20px);top:34px;border-top:3px dashed rgba(24,167,228,.35);z-index:0}
.steps__list li{position:relative;z-index:1;counter-increment:st}
.steps__list li::before{content:counter(st);display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--yellow);font-family:var(--font-head);font-weight:900;font-size:28px;color:var(--ink);box-shadow:0 0 0 8px #fff,0 12px 24px -10px rgba(217,164,0,.8);margin-bottom:18px;transition:transform .4s var(--ease-back)}
.steps__list li:hover::before{transform:rotate(-10deg) scale(1.08)}
.steps__list h3{font-size:21px;font-weight:900;margin-bottom:6px}
.steps__list p{font-size:15.5px;margin:0}
.steps__cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:42px}

/* video */
.video{display:block;position:relative;width:100%;margin:22px 0 6px;padding:0;border:0;border-radius:16px;overflow:hidden;cursor:pointer;aspect-ratio:16/9;background:var(--navy);box-shadow:var(--shadow)}
.video img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out),opacity .3s;opacity:.85}
.video:hover img{transform:scale(1.04);opacity:1}
.video__play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 10px rgba(251,206,47,.3);transition:transform .3s var(--ease-back)}
.video__play::after{content:"";position:absolute;left:30px;top:24px;border-left:22px solid var(--ink);border-top:14px solid transparent;border-bottom:14px solid transparent}
.video:hover .video__play{transform:scale(1.1)}
.video__label{position:absolute;left:16px;bottom:14px;right:16px;text-align:left;color:#fff;font-family:var(--font-head);font-weight:800;font-size:15px;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ticket notches on the "next stop" box */
.tour__next{padding-left:30px;-webkit-mask:radial-gradient(circle 12px at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 12px at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat}

/* polaroid gallery */
.track{gap:28px;padding-top:26px;padding-bottom:44px}
.track button{background:#fff;padding:12px 12px 50px;border-radius:4px;overflow:visible;box-shadow:0 20px 38px -20px rgba(10,61,94,.6),0 2px 6px rgba(0,0,0,.08);rotate:var(--tilt,-2deg);transition:rotate .45s var(--ease-back),translate .45s var(--ease-back),box-shadow .3s}
.track button:nth-child(even){--tilt:2.2deg}
.track button:nth-child(3n){--tilt:-1deg}
.track button:hover{rotate:0deg;translate:0 -10px}
.track button:hover img{transform:none}
.track img{border-radius:2px}
.track button::after{content:attr(data-cap);inset:auto 0 10px 0;background:none;text-align:center;font-family:var(--font-hand);font-weight:700;font-size:25px;line-height:1;color:var(--ink-2)}
.track button::before{content:"";position:absolute;top:-12px;left:50%;width:84px;height:24px;margin-left:-42px;background:rgba(251,206,47,.75);rotate:-3deg;z-index:2}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .nav,.site-header .socials{display:none}
  .burger{display:block}
  .menu-open .nav{display:block;position:fixed;inset:0;background:rgba(10,61,94,.97);backdrop-filter:blur(10px);z-index:-1;padding:110px 24px 40px}
  .menu-open .nav ul{flex-direction:column;gap:6px}
  .menu-open .nav a{font-size:28px;padding:10px 16px}
  .menu-open .site-header .socials{display:flex;position:fixed;left:24px;bottom:30px}
}
@media (max-width:900px){
  .grid-2,.show,.tour__grid,.contact__grid{grid-template-columns:1fr}
  .show__media,.tour .composite,.founder .composite{position:relative;top:0}
  .about .composite,.founder .composite{order:-1}
  .dates li{grid-template-columns:1fr auto;gap:4px 12px}
  .dates time{grid-column:1/-1}
  .spec{padding:14px}
  .spec b{font-size:26px}
  .spec span{font-size:13px}
}
@media (max-width:600px){
  body{font-size:16px}
  .logo img{height:46px}
  .hero{padding:96px 0 130px}
  .stage{--u:calc(min(840px, 118vw, (100svh - 360px) * 1.424) / 840)}
  .hero__title{--title-pull:0}
  .credits{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
  .gallery__head{flex-direction:column;align-items:flex-start}
}

@media (max-width:900px){
  .quotes{grid-template-columns:1fr}
  .quote--big{grid-row:auto}
  .quote--wide{flex-direction:column;align-items:stretch;gap:20px;padding:30px 30px 26px}
  .steps__list{grid-template-columns:1fr 1fr;gap:30px 18px}
  .steps__list::before{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .steps__list{grid-template-columns:1fr}
  .steps__list li{display:grid;grid-template-columns:68px 1fr;column-gap:18px}
  .steps__list li::before{grid-row:span 2;margin:0}
  .ticker-wrap{margin-top:-48px}
  .note{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  .hero__dark,.hero__hint{display:none!important}
  .ticker__run{animation:none!important}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important}
  .arm{animation:none!important;transform:rotate(calc(var(--i) * 72deg + 20deg))}
}

/* ================= WordPress ================= */
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}
.admin-bar .progress{top:32px}
@media (max-width:782px){.admin-bar .progress{top:46px}}
html{margin-top:0!important}
.admin-bar{padding-top:32px}
@media (max-width:782px){.admin-bar{padding-top:46px}}

/* Contact Form 7 inside the blue form card */
.form .wpcf7 form p{margin:0 0 16px}
.form .wpcf7 label{display:block;font-family:var(--font-head);font-weight:800;font-size:14px;color:#E6F6FD}
.form .wpcf7 label span:not(.wpcf7-form-control-wrap){color:var(--yellow)}
.form .wpcf7 label br{display:none}
.form .wpcf7-form-control-wrap{display:block;margin-top:6px}
.form .wpcf7 input:not([type=submit]):not([type=checkbox]),.form .wpcf7 textarea{width:100%;font:inherit;font-size:16px;color:#fff;background:rgba(5,60,95,.28);border:1.5px solid rgba(255,255,255,.25);border-radius:12px;padding:12px 14px;transition:border-color .2s,background .2s}
.form .wpcf7 input::placeholder,.form .wpcf7 textarea::placeholder{color:rgba(255,255,255,.55)}
.form .wpcf7 input:focus,.form .wpcf7 textarea:focus{outline:0;border-color:var(--yellow);background:rgba(5,60,95,.4)}
.form .wpcf7 textarea{min-height:130px;height:150px;resize:vertical}
.form .wpcf7 .ds_podminky p,.form .wpcf7 small{font-size:13.5px;color:#E6F6FD;margin:4px 0 20px}
.form .wpcf7 a{color:#fff;font-weight:700}
.form .wpcf7-submit{display:inline-flex;align-items:center;padding:.85em 1.6em;border-radius:999px;font-family:var(--font-head);font-weight:800;font-size:17px;border:0;cursor:pointer;background:var(--yellow);color:var(--ink);box-shadow:0 10px 24px -10px rgba(251,206,47,.9);transition:transform .25s var(--ease-back),background .25s}
.form .wpcf7-submit:hover{transform:translateY(-2px);background:var(--yellow-2)}
.form .wpcf7-spinner{margin:0 0 0 12px;vertical-align:middle}
.form .wpcf7-not-valid-tip{color:var(--yellow-2);font-size:13px;font-weight:600;margin-top:4px}
.form .wpcf7 form .wpcf7-response-output{margin:16px 0 0;padding:10px 14px;border-radius:10px;border-width:1.5px;color:#fff;font-size:14.5px}

/* inner pages (privacy policy etc.) */
.inner{padding:150px 0 100px;background:linear-gradient(180deg,#F2FAFE,#fff 320px)}
.inner .wrap{max-width:820px}
.inner h1{font-size:clamp(34px,5vw,54px);font-weight:900;margin-bottom:28px}
.inner .entry h2{font-size:28px;margin:1.6em 0 .5em}
.inner .entry h3{font-size:21px;margin:1.4em 0 .4em}
.inner .entry a{color:var(--blue-deep);font-weight:700}
.inner .entry ul,.inner .entry ol{padding-left:1.3em}
body.is-inner .site-header{background:rgba(16,140,198,.95);padding:8px 0}
body.is-inner .site-header .logo img{height:44px}