*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#050610;color:#fff;line-height:1.6;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 18% 18%,rgba(0,217,255,.2),transparent 28%),radial-gradient(circle at 84% 18%,rgba(255,176,0,.16),transparent 25%),radial-gradient(circle at 70% 82%,rgba(255,43,214,.14),transparent 30%);pointer-events:none;z-index:-4}a{color:inherit}#fireworks{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:.85}.cursor-glow{position:fixed;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle,rgba(0,217,255,.15),transparent 65%);pointer-events:none;transform:translate(-50%,-50%);z-index:-1}.ambient{position:fixed;border-radius:999px;filter:blur(22px);opacity:.35;z-index:-3;animation:floaty 8s ease-in-out infinite alternate}.ambient-one{width:210px;height:210px;background:#00d9ff;left:7%;top:18%}.ambient-two{width:260px;height:260px;background:#ffb000;right:8%;bottom:12%;animation-delay:1.2s}@keyframes floaty{to{transform:translateY(35px) translateX(20px)}}.hero{min-height:98vh;position:relative;display:flex;align-items:center;background-size:cover;background-position:center;isolation:isolate}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,6,16,.92),rgba(4,6,16,.44)),linear-gradient(180deg,transparent 55%,#050610);z-index:-2}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,217,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,217,255,.08) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(black,transparent 82%);z-index:-1;animation:gridMove 12s linear infinite}@keyframes gridMove{to{background-position:56px 56px}}nav{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:18px 7%;z-index:5;background:linear-gradient(rgba(0,0,0,.55),transparent)}.logo-img{width:220px;max-width:42vw;filter:drop-shadow(0 0 18px rgba(0,217,255,.65))}.nav-links{display:flex;gap:20px;align-items:center}.nav-links a{text-decoration:none;font-weight:900;color:#f4f7ff}.nav-links a:hover{color:#52dcff}.nav-btn,.btn{display:inline-block;text-decoration:none;border-radius:999px;padding:12px 22px;font-weight:900;transition:.25s transform,.25s box-shadow}.nav-btn,.primary{background:linear-gradient(90deg,#ffb000,#ffd86b);color:#140900;box-shadow:0 0 30px rgba(255,176,0,.35)}.secondary{border:1px solid rgba(0,217,255,.62);background:rgba(0,217,255,.08);box-shadow:inset 0 0 20px rgba(0,217,255,.12)}.btn:hover,.nav-btn:hover{transform:translateY(-3px);box-shadow:0 0 34px rgba(0,217,255,.38),0 0 30px rgba(255,176,0,.25)}.hero-content{max-width:900px;padding:150px 7% 85px;position:relative;z-index:2}.badge,.eyebrow{color:#52dcff;text-transform:uppercase;letter-spacing:.18em;font-weight:900;font-size:13px;text-shadow:0 0 18px rgba(82,220,255,.8)}.hero h1{font-size:clamp(42px,7vw,92px);line-height:.96;margin:14px 0;background:linear-gradient(90deg,#fff,#bdf4ff,#ffd86b);-webkit-background-clip:text;background-clip:text;color:transparent}.lead{font-size:22px;max-width:720px;color:#e7e9ff}.buttons{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}.section{padding:88px 7%;position:relative}.section.dark{background:linear-gradient(180deg,#0b0d1a,#111426)}.section h2{font-size:clamp(30px,4.2vw,56px);line-height:1.05;margin:8px 0 30px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{position:relative;background:linear-gradient(180deg,rgba(23,26,45,.82),rgba(10,10,18,.88));border:1px solid rgba(82,220,255,.24);padding:30px;border-radius:30px;box-shadow:0 24px 70px rgba(0,0,0,.36);overflow:hidden;transition:.25s transform,.25s border-color}.card:before{content:"";position:absolute;inset:-1px;background:linear-gradient(120deg,transparent,rgba(0,217,255,.2),transparent);transform:translateX(-110%);transition:.55s}.card:hover{transform:translateY(-8px) rotateX(2deg);border-color:rgba(255,216,107,.6)}.card:hover:before{transform:translateX(110%)}.card-icon{font-size:38px;margin-bottom:12px;filter:drop-shadow(0 0 10px rgba(255,176,0,.5))}.card h3{font-size:25px;margin:0 0 12px;color:#ffd86b}.card p,.split p,.contact p{color:#d9dcf4}.split{display:grid;grid-template-columns:1.1fr .9fr;gap:42px;align-items:center}.checklist{list-style:none;padding:0;margin:0}.checklist li{margin:13px 0;background:rgba(255,255,255,.07);border:1px solid rgba(82,220,255,.16);padding:15px 18px;border-radius:16px;transition:.25s transform,.25s border-color}.checklist li:hover{transform:translateX(7px);border-color:rgba(255,216,107,.45)}.checklist li:before{content:'✓ ';color:#ffd86b;font-weight:900}.cta-card{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(0,217,255,.16),rgba(255,176,0,.18),rgba(255,43,214,.12));border:1px solid rgba(255,255,255,.18);border-radius:34px;padding:42px;box-shadow:0 30px 90px rgba(0,0,0,.38)}.cta-card:after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;background:url('assets/cocktail-icon.svg') center/contain no-repeat;opacity:.45;animation:pulse 2.8s ease-in-out infinite}@keyframes pulse{50%{transform:scale(1.08);opacity:.8}}.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.gallery img{width:100%;height:275px;object-fit:cover;border-radius:22px;border:1px solid rgba(82,220,255,.24);filter:saturate(1.12) contrast(1.04);transition:.25s transform,.25s filter,.25s box-shadow}.gallery img:hover{transform:scale(1.04);filter:saturate(1.32) contrast(1.08);box-shadow:0 0 40px rgba(0,217,255,.28)}.contact{background:radial-gradient(circle at top,rgba(0,217,255,.13),transparent 35%),linear-gradient(180deg,#111426,#050610)}.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:start}.contact-box{margin:28px 0 12px;display:grid;gap:12px}.contact-box a,.contact-box p{margin:0;background:rgba(255,255,255,.92);color:#111426;text-decoration:none;border-radius:16px;padding:15px 16px;font-weight:900;display:grid;gap:2px}.contact-box span{font-size:12px;text-transform:uppercase;letter-spacing:.12em;opacity:.62}.contact-box strong{font-size:18px}.contact-box a:hover{background:#ffd86b;transform:translateX(4px)}.note{font-size:14px;opacity:.75}.form-card{background:rgba(255,255,255,.07);border:1px solid rgba(82,220,255,.24);border-radius:30px;padding:26px;box-shadow:0 24px 80px rgba(0,0,0,.35);backdrop-filter:blur(12px);display:grid;gap:14px}.form-card label{font-weight:900;color:#eef7ff}.form-card input,.form-card select,.form-card textarea{width:100%;margin-top:7px;border:1px solid rgba(82,220,255,.24);background:rgba(0,0,0,.32);color:#fff;border-radius:14px;padding:13px 14px;font:inherit;outline:none}.form-card input:focus,.form-card select:focus,.form-card textarea:focus{border-color:#ffd86b;box-shadow:0 0 0 3px rgba(255,216,107,.15)}.form-card option{background:#111426}.form-btn{border:0;cursor:pointer;margin-top:8px}.footer-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}.footer-links a{background:rgba(255,255,255,.08);border:1px solid rgba(82,220,255,.22);border-radius:999px;padding:10px 16px;text-decoration:none;font-weight:900}.footer-links a:hover{background:rgba(255,176,0,.2);border-color:#ffd86b}footer{text-align:center;padding:34px 7%;color:#aaa;border-top:1px solid rgba(255,255,255,.1)}.reveal{opacity:0;transform:translateY(24px);transition:.75s ease}.reveal.visible{opacity:1;transform:translateY(0)}@media(max-width:920px){nav{padding:16px 5%}.nav-links a:not(.nav-btn){display:none}.hero-content,.section{padding-left:5%;padding-right:5%}.cards,.split,.gallery,.contact-grid{grid-template-columns:1fr}.gallery img{height:235px}.hero{min-height:86vh}.lead{font-size:18px}.logo-img{width:170px}.cta-card{padding:28px}}
/* Kalendář akcí */
.section-intro{max-width:780px;color:#d9dcf4;margin:-12px 0 28px}
.event-list{display:grid;gap:16px}
.event-card{display:grid;grid-template-columns:280px 1fr;gap:22px;align-items:center;background:linear-gradient(180deg,rgba(23,26,45,.82),rgba(10,10,18,.88));border:1px solid rgba(82,220,255,.24);border-radius:26px;padding:22px;box-shadow:0 24px 70px rgba(0,0,0,.28);position:relative;overflow:hidden;transition:.25s transform,.25s border-color}
.event-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(#00d9ff,#ffb000,#ff3bd4)}
.event-card:hover{transform:translateY(-5px);border-color:rgba(255,216,107,.58)}
.event-date{background:rgba(0,217,255,.08);border:1px solid rgba(82,220,255,.2);border-radius:20px;padding:18px}
.event-date strong{display:block;color:#ffd86b;font-size:20px;line-height:1.2;text-transform:capitalize}
.event-date span{display:block;margin-top:8px;color:#bdf4ff;font-weight:900}
.event-content h3{font-size:26px;margin:0 0 6px;color:#fff}
.event-place{font-weight:900;color:#bdf4ff!important;margin:0 0 4px}
.event-services{color:#d9dcf4!important;margin:0 0 4px}
.event-note{color:#ffd86b!important;margin:0;font-size:14px}
.empty-events{background:rgba(255,255,255,.07);border:1px solid rgba(82,220,255,.22);border-radius:18px;padding:18px;color:#d9dcf4}
/* Větší responzivita pro mobil */
@media(max-width:760px){
body{line-height:1.55}
nav{position:absolute;align-items:flex-start;gap:12px}
.logo-img{width:145px;max-width:48vw}
.nav-links{gap:10px;flex-wrap:wrap;justify-content:flex-end}
.nav-links .nav-btn{padding:10px 14px;font-size:14px}
.hero{min-height:88vh}
.hero-content{padding-top:135px;padding-bottom:64px}
.hero h1{font-size:clamp(36px,12vw,54px)}
.lead{font-size:17px}
.buttons{gap:10px}
.btn{width:100%;text-align:center}
.section{padding-top:62px;padding-bottom:62px}
.section h2{font-size:clamp(28px,9vw,40px)}
.cards{gap:16px}
.card{padding:22px;border-radius:22px}
.gallery{gap:10px}
.gallery img{height:210px;border-radius:16px}
.event-card{grid-template-columns:1fr;gap:12px;padding:18px;border-radius:22px}
.event-date{padding:14px}
.event-date strong{font-size:18px}
.event-content h3{font-size:22px}
.contact-grid{gap:20px}
.form-card{padding:18px;border-radius:22px}
.footer-links{display:grid;grid-template-columns:1fr 1fr}
.footer-links a{text-align:center}
}
@media(max-width:420px){
nav{padding:12px 4%}
.logo-img{width:125px}
.hero-content,.section{padding-left:4%;padding-right:4%}
.hero h1{font-size:34px}
.badge,.eyebrow{font-size:11px;letter-spacing:.14em}
.lead{font-size:16px}
.gallery img{height:185px}
.contact-box strong{font-size:16px;word-break:break-word}
.footer-links{grid-template-columns:1fr}
#fireworks{opacity:.55}
}
@media(prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important;scroll-behavior:auto!important}
#fireworks,.cursor-glow,.ambient{display:none!important}
}
/* Odznáček další akce */
.next-event-badge{
position:fixed;
right:22px;
top:96px;
z-index:20;
width:178px;
text-decoration:none;
background:linear-gradient(145deg,rgba(0,217,255,.18),rgba(255,176,0,.22),rgba(255,43,214,.14));
border:1px solid rgba(255,216,107,.5);
border-radius:24px;
padding:15px 16px;
box-shadow:0 0 34px rgba(0,217,255,.25),0 18px 60px rgba(0,0,0,.35);
backdrop-filter:blur(14px);
overflow:hidden;
transition:.25s transform,.25s box-shadow;
}
.next-event-badge:before{
content:"";
position:absolute;
inset:-80px;
background:conic-gradient(from 0deg,transparent,#00d9ff,transparent,#ffb000,transparent,#ff3bd4,transparent);
opacity:.32;
animation:spinGlow 5s linear infinite;
}
.next-event-badge>*{position:relative;z-index:1}
.next-event-badge:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 0 46px rgba(255,176,0,.28),0 0 38px rgba(0,217,255,.28)}
.next-event-badge small{display:block;color:#bdf4ff;text-transform:uppercase;letter-spacing:.16em;font-size:10px;font-weight:900}
.next-event-badge strong{display:block;color:#ffd86b;font-size:25px;line-height:1.05;margin:5px 0;text-shadow:0 0 16px rgba(255,176,0,.55)}
.next-event-badge em{display:block;color:#fff;font-style:normal;font-weight:900;font-size:13px;line-height:1.25}
.badge-pulse{position:absolute;right:13px;top:13px;width:10px;height:10px;border-radius:50%;background:#ff3bd4;box-shadow:0 0 0 0 rgba(255,59,212,.75);animation:pulseDot 1.25s infinite}
@keyframes pulseDot{70%{box-shadow:0 0 0 14px rgba(255,59,212,0)}100%{box-shadow:0 0 0 0 rgba(255,59,212,0)}}
@keyframes spinGlow{to{transform:rotate(360deg)}}
/* Interaktivní odkazy v kalendáři */
.event-clickable{cursor:pointer}
.event-link{
display:inline-block;
margin-top:10px;
color:#140900;
background:linear-gradient(90deg,#ffb000,#ffd86b);
border-radius:999px;
padding:9px 14px;
text-decoration:none;
font-weight:900;
box-shadow:0 0 20px rgba(255,176,0,.24);
}
.event-link:hover{transform:translateY(-2px);box-shadow:0 0 26px rgba(0,217,255,.24),0 0 24px rgba(255,176,0,.28)}
/* Slavnostnější hightech efekty */
.hero:after{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 15% 30%,rgba(255,176,0,.18),transparent 12%),
radial-gradient(circle at 78% 22%,rgba(0,217,255,.16),transparent 14%),
linear-gradient(180deg,transparent 55%,#050610);
z-index:-1;
pointer-events:none;
animation:heroCelebration 5s ease-in-out infinite alternate;
}
@keyframes heroCelebration{to{filter:hue-rotate(12deg) brightness(1.14)}}
.card-icon{animation:iconFloat 2.8s ease-in-out infinite alternate}
@keyframes iconFloat{to{transform:translateY(-5px) rotate(-3deg)}}
@media(max-width:760px){
.next-event-badge{
top:auto;
right:12px;
bottom:14px;
width:calc(100% - 24px);
display:grid;
grid-template-columns:auto 1fr;
column-gap:10px;
align-items:center;
padding:12px 14px;
border-radius:18px;
}
.next-event-badge small{grid-column:1 / -1}
.next-event-badge strong{font-size:22px;margin:0}
.next-event-badge em{font-size:13px}
footer{padding-bottom:92px}
}
/* Oprava odznáčku, aby nepřekrýval horní menu */
nav{z-index:80}
.next-event-badge{
top:auto!important;
bottom:24px!important;
right:24px!important;
z-index:30!important;
}
/* Dýchající stránka + větší interaktivita */
.logo-img{
animation:logoBreath 3.4s ease-in-out infinite;
transition:.28s transform,.28s filter;
}
.logo-wrap:hover .logo-img{
transform:scale(1.08) rotate(-1deg);
filter:drop-shadow(0 0 24px rgba(0,217,255,.9)) drop-shadow(0 0 18px rgba(255,176,0,.55));
}
@keyframes logoBreath{
0%,100%{filter:drop-shadow(0 0 14px rgba(0,217,255,.45));}
50%{filter:drop-shadow(0 0 26px rgba(0,217,255,.85)) drop-shadow(0 0 14px rgba(255,176,0,.35));}
}
.hero-content{
animation:softBreath 5.5s ease-in-out infinite;
}
@keyframes softBreath{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-6px)}
}
.card,.event-card,.form-card,.cta-card,.contact-box a,.contact-box p,.footer-links a{
will-change:transform;
}
.card:hover,.event-card:hover,.form-card:hover,.cta-card:hover{
transform:translateY(-8px) scale(1.01);
}
.contact-box a:hover,.footer-links a:hover{
transform:translateY(-3px) scale(1.02);
}
.btn,.nav-btn,.event-link{
position:relative;
overflow:hidden;
}
.btn:after,.nav-btn:after,.event-link:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
transform:translateX(-120%);
transition:.55s;
}
.btn:hover:after,.nav-btn:hover:after,.event-link:hover:after{
transform:translateX(120%);
}
.gallery img{
animation:imageBreath 6s ease-in-out infinite;
}
.gallery img:hover{
animation:none;
}
@keyframes imageBreath{
0%,100%{box-shadow:0 0 0 rgba(0,217,255,0)}
50%{box-shadow:0 0 24px rgba(0,217,255,.14)}
}
/* Odznáček při scrollu dolů jemně zmenšit, při hoveru znovu zvýraznit */
.next-event-badge.badge-compact{
transform:scale(.86);
opacity:.82;
}
.next-event-badge.badge-compact:hover{
transform:scale(1.02);
opacity:1;
}
@media(max-width:760px){
.next-event-badge{
bottom:12px!important;
right:12px!important;
}
.hero-content{
animation:none;
}
}
/* Více různorodých hightech efektů */
body{
background:
radial-gradient(circle at 20% 20%,rgba(0,217,255,.10),transparent 24%),
radial-gradient(circle at 80% 10%,rgba(255,176,0,.08),transparent 22%),
#050610;
}
/* Jemné skenovací linky přes stránku */
body:after{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:2;
background:linear-gradient(
to bottom,
transparent 0,
rgba(255,255,255,.025) 50%,
transparent 100%
);
background-size:100% 7px;
opacity:.38;
mix-blend-mode:screen;
}
/* Neonové částice na pozadí */
.neon-particle{
position:fixed;
width:6px;
height:6px;
border-radius:50%;
background:#00d9ff;
pointer-events:none;
z-index:-1;
box-shadow:0 0 18px #00d9ff;
animation:particleFloat 8s linear infinite;
}
.neon-particle:nth-child(2n){background:#ffb000;box-shadow:0 0 18px #ffb000}
.neon-particle:nth-child(3n){background:#ff3bd4;box-shadow:0 0 18px #ff3bd4}
@keyframes particleFloat{
0%{transform:translateY(110vh) scale(.6);opacity:0}
10%{opacity:.7}
90%{opacity:.7}
100%{transform:translateY(-20vh) scale(1.25);opacity:0}
}
/* Nadpis má jemný glitch efekt */
.hero h1{
position:relative;
}
.hero h1:hover{
animation:titleGlitch .65s steps(2,end);
}
@keyframes titleGlitch{
0%{text-shadow:2px 0 #00d9ff,-2px 0 #ff3bd4}
25%{transform:skewX(2deg);text-shadow:-3px 0 #00d9ff,3px 0 #ffb000}
50%{transform:skewX(-2deg)}
75%{text-shadow:3px 0 #ff3bd4,-3px 0 #00d9ff}
100%{transform:none;text-shadow:none}
}
/* Karty reagují na pohyb myši 3D náklonem */
.tilt-card{
transform-style:preserve-3d;
}
.tilt-card:hover h3,
.tilt-card:hover .card-icon{
transform:translateZ(18px);
}
/* Galerie má efekt světelného záblesku */
.gallery img{
position:relative;
}
.gallery img:hover{
outline:1px solid rgba(255,216,107,.6);
}
/* Kontakt formulář má jemný pulzující obrys */
.form-card{
animation:formAura 4.5s ease-in-out infinite;
}
@keyframes formAura{
0%,100%{box-shadow:0 24px 80px rgba(0,0,0,.35),0 0 0 rgba(0,217,255,0)}
50%{box-shadow:0 24px 80px rgba(0,0,0,.35),0 0 34px rgba(0,217,255,.18)}
}
/* Kliknutí vytvoří krátkou neonovou vlnu */
.click-ripple{
position:fixed;
width:18px;
height:18px;
border:2px solid #ffd86b;
border-radius:50%;
pointer-events:none;
z-index:999;
transform:translate(-50%,-50%);
animation:rippleOut .65s ease-out forwards;
box-shadow:0 0 20px rgba(255,216,107,.75);
}
@keyframes rippleOut{
to{width:130px;height:130px;opacity:0}
}
/* Bubliny jako připomínka bubble tea */
.bubble{
position:fixed;
bottom:-40px;
border-radius:50%;
border:1px solid rgba(255,255,255,.38);
background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.55),rgba(0,217,255,.08));
pointer-events:none;
z-index:-1;
animation:bubbleUp 9s linear infinite;
}
@keyframes bubbleUp{
0%{transform:translateY(0) translateX(0);opacity:0}
12%{opacity:.45}
88%{opacity:.45}
100%{transform:translateY(-115vh) translateX(35px);opacity:0}
}
/* CTA karta má slavnostní gradient v pohybu */
.cta-card{
background-size:220% 220%!important;
animation:ctaGradient 5s ease infinite, softBreath 5.5s ease-in-out infinite;
}
@keyframes ctaGradient{
0%,100%{background-position:0% 50%}
50%{background-position:100% 50%}
}
/* Mobil: ponechat efekty lehčí */
@media(max-width:760px){
body:after{opacity:.18}
.neon-particle{display:none}
.bubble{opacity:.45}
.form-card{animation:none}
}
/* Mega high-tech patička */
.site-footer{
position:relative;
overflow:hidden;
padding:0;
color:#d9dcf4;
background:
radial-gradient(circle at 18% 0%,rgba(0,217,255,.14),transparent 28%),
radial-gradient(circle at 88% 12%,rgba(255,176,0,.13),transparent 24%),
linear-gradient(180deg,#070914,#03040a);
border-top:1px solid rgba(82,220,255,.18);
}
.site-footer:before{
content:"";
position:absolute;
inset:0;
background-image:linear-gradient(rgba(0,217,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,217,255,.06) 1px,transparent 1px);
background-size:42px 42px;
mask-image:linear-gradient(transparent,black 18%,black 85%,transparent);
pointer-events:none;
}
.footer-shell{
position:relative;
display:grid;
grid-template-columns:1.1fr 2fr;
gap:34px;
padding:56px 7% 34px;
z-index:1;
}
.footer-logo{
width:210px;
max-width:70%;
filter:drop-shadow(0 0 20px rgba(0,217,255,.55));
animation:logoBreath 3.4s ease-in-out infinite;
}
.footer-brand p{
max-width:420px;
margin:18px 0 0;
color:#d9dcf4;
}
.footer-columns{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;
}
.footer-column{
background:rgba(255,255,255,.05);
border:1px solid rgba(82,220,255,.16);
border-radius:22px;
padding:20px;
backdrop-filter:blur(10px);
transition:.25s transform,.25s border-color,.25s box-shadow;
}
.footer-column:hover{
transform:translateY(-6px);
border-color:rgba(255,216,107,.55);
box-shadow:0 0 30px rgba(0,217,255,.14);
}
.footer-column h3{
margin:0 0 14px;
color:#ffd86b;
font-size:18px;
}
.footer-column-links{
display:grid;
gap:10px;
}
.footer-column-links a{
color:#eef7ff;
text-decoration:none;
font-weight:800;
opacity:.86;
transition:.2s transform,.2s color,.2s opacity;
}
.footer-column-links a:hover{
color:#52dcff;
opacity:1;
transform:translateX(6px);
}
.footer-bottom{
position:relative;
z-index:1;
display:flex;
justify-content:space-between;
align-items:center;
gap:18px;
padding:20px 7%;
border-top:1px solid rgba(255,255,255,.1);
}
.footer-bottom p{margin:0;color:#aaa}
.footer-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
}
.footer-actions a,.footer-actions button{
border:1px solid rgba(82,220,255,.25);
background:rgba(255,255,255,.08);
color:#fff;
border-radius:999px;
padding:10px 15px;
text-decoration:none;
font-weight:900;
cursor:pointer;
}
.footer-actions a:hover,.footer-actions button:hover{
background:linear-gradient(90deg,#ffb000,#ffd86b);
color:#120900;
}
/* Nové fíčury */
.scroll-progress{
position:fixed;
left:0;
top:0;
height:4px;
width:0;
background:linear-gradient(90deg,#00d9ff,#ffb000,#ff3bd4);
z-index:9999;
box-shadow:0 0 18px rgba(0,217,255,.75);
}
.status-hud{
margin-top:28px;
max-width:430px;
border:1px solid rgba(82,220,255,.3);
background:rgba(0,0,0,.28);
border-radius:22px;
padding:15px 18px;
backdrop-filter:blur(10px);
box-shadow:0 0 30px rgba(0,217,255,.12);
}
.status-hud span{
display:block;
color:#52dcff;
font-size:11px;
font-weight:900;
letter-spacing:.18em;
}
.status-hud strong{
display:block;
color:#ffd86b;
font-size:21px;
margin-top:4px;
}
.status-hud em{
color:#fff;
font-style:normal;
font-weight:800;
}
.quick-panel{
position:fixed;
left:22px;
bottom:24px;
z-index:35;
}
.quick-toggle{
width:56px;
height:56px;
border-radius:50%;
border:1px solid rgba(255,216,107,.55);
background:linear-gradient(135deg,#00d9ff,#ffb000,#ff3bd4);
color:#050610;
font-size:24px;
cursor:pointer;
box-shadow:0 0 30px rgba(0,217,255,.28);
animation:pulse 2.8s ease-in-out infinite;
}
.quick-menu{
position:absolute;
left:0;
bottom:68px;
display:grid;
gap:8px;
min-width:190px;
opacity:0;
transform:translateY(12px) scale(.96);
pointer-events:none;
transition:.25s;
}
.quick-panel.open .quick-menu{
opacity:1;
transform:translateY(0) scale(1);
pointer-events:auto;
}
.quick-menu a{
background:rgba(8,10,22,.86);
border:1px solid rgba(82,220,255,.24);
backdrop-filter:blur(12px);
color:#fff;
text-decoration:none;
font-weight:900;
border-radius:999px;
padding:11px 15px;
}
.quick-menu a:hover{
background:rgba(255,176,0,.24);
border-color:#ffd86b;
}
@media(max-width:900px){
.footer-shell{
grid-template-columns:1fr;
padding:42px 5% 26px;
}
.footer-columns{
grid-template-columns:1fr;
}
.footer-bottom{
align-items:flex-start;
flex-direction:column;
padding:18px 5% 104px;
}
.quick-panel{
left:12px;
bottom:12px;
}
.quick-toggle{
width:50px;
height:50px;
}
}
/* Footer logo: glitch + dýchání + interaktivní neon */
.footer-brand{
position:relative;
}
.footer-logo{
position:relative;
cursor:pointer;
transform-origin:center;
animation:footerLogoBreath 3.1s ease-in-out infinite;
transition:transform .28s ease,filter .28s ease,opacity .28s ease;
}
.footer-brand:before,
.footer-brand:after{
content:"";
position:absolute;
left:0;
top:0;
width:210px;
max-width:70%;
aspect-ratio:2.4/1;
background:url("assets/logo-johnnys-transparent.webp") left top/contain no-repeat;
pointer-events:none;
opacity:0;
mix-blend-mode:screen;
}
.footer-brand:before{
transform:translate(3px,-2px);
filter:hue-rotate(150deg) drop-shadow(0 0 18px rgba(0,217,255,.85));
}
.footer-brand:after{
transform:translate(-3px,2px);
filter:hue-rotate(310deg) drop-shadow(0 0 18px rgba(255,43,214,.75));
}
.footer-brand:hover .footer-logo{
transform:scale(1.08) rotate(-1deg);
filter:
drop-shadow(0 0 18px rgba(0,217,255,.95))
drop-shadow(0 0 28px rgba(255,176,0,.55))
drop-shadow(0 0 38px rgba(255,43,214,.35));
}
.footer-brand:hover:before{
opacity:.8;
animation:footerGlitchOne 1.2s ease-in-out infinite; opacity:.45;
}
.footer-brand:hover:after{
opacity:.75;
animation:footerGlitchTwo 1.4s ease-in-out infinite; opacity:.4;
}
@keyframes footerLogoBreath{
0%,100%{
transform:scale(1);
filter:drop-shadow(0 0 14px rgba(0,217,255,.42));
}
50%{
transform:scale(1.035);
filter:
drop-shadow(0 0 26px rgba(0,217,255,.82))
drop-shadow(0 0 18px rgba(255,176,0,.46));
}
}
@keyframes footerGlitchOne{
0%,100%{clip-path:inset(0 0 0 0);transform:translate(0,0);}
10%{clip-path:inset(0 0 80% 0);transform:translate(2px,-1px);}
20%{clip-path:inset(60% 0 10% 0);transform:translate(-2px,1px);}
30%{clip-path:inset(20% 0 50% 0);transform:translate(1px,2px);}
40%{clip-path:inset(0 0 70% 0);transform:translate(-1px,-1px);}
50%{clip-path:inset(50% 0 20% 0);transform:translate(2px,0);}
}
20%{clip-path:inset(34% 0 42% 0);transform:translate(-5px,1px)}
40%{clip-path:inset(62% 0 18% 0);transform:translate(6px,2px)}
60%{clip-path:inset(12% 0 68% 0);transform:translate(-3px,-3px)}
80%{clip-path:inset(78% 0 4% 0);transform:translate(3px,3px)}
100%{clip-path:inset(0 0 82% 0);transform:translate(4px,-2px)}
}
@keyframes footerGlitchTwo{
0%,100%{clip-path:inset(0 0 0 0);transform:translate(0,0);}
15%{clip-path:inset(70% 0 10% 0);transform:translate(-2px,1px);}
30%{clip-path:inset(10% 0 70% 0);transform:translate(2px,-1px);}
45%{clip-path:inset(40% 0 30% 0);transform:translate(-1px,2px);}
60%{clip-path:inset(0 0 60% 0);transform:translate(1px,-2px);}
}
25%{clip-path:inset(8% 0 70% 0);transform:translate(5px,-1px)}
50%{clip-path:inset(44% 0 36% 0);transform:translate(-6px,-2px)}
75%{clip-path:inset(24% 0 54% 0);transform:translate(3px,4px)}
100%{clip-path:inset(72% 0 8% 0);transform:translate(-4px,2px)}
}
/* Světelná linka přes logo */
.footer-brand .footer-logo{
animation-name:footerLogoBreath, footerLogoScan;
animation-duration:3.1s, 4.2s;
animation-timing-function:ease-in-out, linear;
animation-iteration-count:infinite, infinite;
}
@keyframes footerLogoScan{
0%,100%{opacity:1}
50%{opacity:.92}
}
/* Oprava mobilního překrývání rychlého menu a odpočtu */
@media(max-width:760px){
.next-event-badge{
left:12px!important;
right:12px!important;
bottom:76px!important;
width:auto!important;
z-index:32!important;
}
.quick-panel{
left:12px!important;
bottom:12px!important;
z-index:36!important;
}
.quick-menu{
bottom:62px!important;
}
.footer-bottom{
padding-bottom:150px!important;
}
}
@media(max-width:420px){
.next-event-badge{
bottom:72px!important;
padding:10px 12px;
}
.next-event-badge strong{
font-size:19px;
}
.quick-toggle{
width:48px;
height:48px;
}
}
/* Mobil: dole časovač, rychlé menu nad ním */
@media(max-width:760px){
.next-event-badge{
left:12px!important;
right:12px!important;
bottom:12px!important;
width:auto!important;
z-index:32!important;
}
.quick-panel{
left:12px!important;
bottom:96px!important;
z-index:36!important;
}
.quick-menu{
bottom:62px!important;
}
.footer-bottom{
padding-bottom:174px!important;
}
}
@media(max-width:420px){
.next-event-badge{
bottom:10px!important;
}
.quick-panel{
bottom:88px!important;
}
}
/* Přepínač viditelnosti floating widgetů */
.widget-visibility-toggle{
position:fixed;
right:24px;
bottom:112px;
z-index:42;
border:1px solid rgba(82,220,255,.35);
background:rgba(8,10,22,.82);
color:#fff;
border-radius:999px;
padding:11px 15px;
font-weight:900;
cursor:pointer;
backdrop-filter:blur(12px);
box-shadow:0 0 26px rgba(0,217,255,.18);
transition:.25s transform,.25s border-color,.25s background;
}
.widget-visibility-toggle:hover{
transform:translateY(-3px);
border-color:#ffd86b;
background:rgba(255,176,0,.22);
}
body.widgets-hidden .next-event-badge,
body.widgets-hidden .quick-panel{
opacity:0!important;
transform:translateY(16px) scale(.96)!important;
pointer-events:none!important;
}
body.widgets-hidden .widget-visibility-toggle{
background:linear-gradient(90deg,#ffb000,#ffd86b);
color:#140900;
}
@media(max-width:760px){
.widget-visibility-toggle{
right:12px;
bottom:156px;
padding:10px 13px;
font-size:13px;
}
body.widgets-hidden .widget-visibility-toggle{
bottom:14px;
}
}
.footer-logo{
animation:
footerLogoBreath 3.1s ease-in-out infinite,
footerFlicker 6s linear infinite;
}
@keyframes footerFlicker{
0%,100%{opacity:1}
96%{opacity:1}
97%{opacity:.92}
98%{opacity:1}
99%{opacity:.95}
}
/* FIX: glitch přesně na spodním logu, ne za ním */
.footer-brand{
position:relative!important;
display:inline-block;
overflow:hidden;
-webkit-mask-image:linear-gradient(#000,#000);
mask-image:linear-gradient(#000,#000);
}
.footer-logo{
position:relative;
z-index:2;
}
.footer-brand:before,
.footer-brand:after{
inset:0!important;
left:0!important;
top:0!important;
width:100%!important;
height:100%!important;
max-width:none!important;
background:url("assets/logo-johnnys-transparent.webp") left center/contain no-repeat!important;
}
.footer-brand:before{
transform:translate(1px,-1px)!important;
}
.footer-brand:after{
transform:translate(-1px,1px)!important;
}
@keyframes footerGlitchOne{
0%,100%{clip-path:inset(0 0 0 0);transform:translate(0,0)}
12%{clip-path:inset(8% 0 78% 0);transform:translate(1px,-1px)}
24%{clip-path:inset(62% 0 18% 0);transform:translate(-1px,1px)}
36%{clip-path:inset(30% 0 48% 0);transform:translate(1px,0)}
48%{clip-path:inset(72% 0 10% 0);transform:translate(-1px,-1px)}
}
@keyframes footerGlitchTwo{
0%,100%{clip-path:inset(0 0 0 0);transform:translate(0,0)}
15%{clip-path:inset(70% 0 12% 0);transform:translate(-1px,1px)}
30%{clip-path:inset(14% 0 68% 0);transform:translate(1px,-1px)}
45%{clip-path:inset(42% 0 35% 0);transform:translate(-1px,0)}
60%{clip-path:inset(4% 0 76% 0);transform:translate(1px,1px)}
}
.footer-brand:hover:before{
opacity:.32!important;
animation:footerGlitchOne 1.35s ease-in-out infinite!important;
}
.footer-brand:hover:after{
opacity:.28!important;
animation:footerGlitchTwo 1.55s ease-in-out infinite!important;
}
/* FIX: přepínač widgetů už nepřekrývá obsah.
Je schovaný v rychlém menu a po skrytí se zobrazí jen malý nenápadný čudlík. */
.widget-visibility-toggle{
display:none!important;
}
.widget-restore{
position:fixed;
right:14px;
bottom:14px;
z-index:60;
border:1px solid rgba(82,220,255,.38);
background:rgba(8,10,22,.86);
color:#fff;
border-radius:999px;
padding:10px 14px;
font-weight:900;
cursor:pointer;
backdrop-filter:blur(12px);
box-shadow:0 0 24px rgba(0,217,255,.18);
display:none;
}
body.widgets-hidden .widget-restore{
display:block;
}
.quick-hide-widgets{
border:1px solid rgba(255,216,107,.42)!important;
background:rgba(255,176,0,.16)!important;
}
body.widgets-hidden .quick-panel{
opacity:0!important;
transform:translateY(14px) scale(.96)!important;
pointer-events:none!important;
}
body.widgets-hidden .next-event-badge{
opacity:0!important;
transform:translateY(14px) scale(.96)!important;
pointer-events:none!important;
}
@media(max-width:760px){
.widget-restore{
right:12px;
bottom:12px;
padding:9px 12px;
font-size:13px;
}
}
.quick-menu button{
background:rgba(8,10,22,.86);
border:1px solid rgba(82,220,255,.24);
backdrop-filter:blur(12px);
color:#fff;
text-decoration:none;
font-weight:900;
border-radius:999px;
padding:11px 15px;
cursor:pointer;
text-align:left;
}
.quick-menu button:hover{
background:rgba(255,176,0,.24);
border-color:#ffd86b;
}
/* Premium intro / loading screen */
body.intro-active{
overflow:hidden;
}
.intro-screen{
position:fixed;
inset:0;
z-index:20000;
display:grid;
place-items:center;
background:
radial-gradient(circle at 50% 42%,rgba(0,217,255,.20),transparent 28%),
radial-gradient(circle at 58% 52%,rgba(255,176,0,.12),transparent 26%),
linear-gradient(135deg,#02030a,#080b18 48%,#03040a);
overflow:hidden;
transition:opacity .85s ease,visibility .85s ease;
}
.intro-screen.hidden{
opacity:0;
visibility:hidden;
pointer-events:none;
}
.intro-curtain{
position:absolute;
top:0;
bottom:0;
width:50.5%;
background:
linear-gradient(90deg,rgba(0,217,255,.10),transparent 18%,rgba(255,176,0,.06)),
linear-gradient(180deg,#050610,#101328,#050610);
box-shadow:inset 0 0 80px rgba(0,0,0,.65);
transition:transform 1.15s cubic-bezier(.76,0,.24,1);
}
.intro-left{left:0;border-right:1px solid rgba(82,220,255,.22)}
.intro-right{right:0;border-left:1px solid rgba(255,216,107,.18)}
.intro-screen.opening .intro-left{transform:translateX(-105%)}
.intro-screen.opening .intro-right{transform:translateX(105%)}
.intro-screen:before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(0,217,255,.055) 1px,transparent 1px),
linear-gradient(90deg,rgba(0,217,255,.055) 1px,transparent 1px);
background-size:46px 46px;
animation:introGrid 9s linear infinite;
mask-image:radial-gradient(circle at center,black,transparent 78%);
}
@keyframes introGrid{
to{background-position:46px 46px}
}
.intro-orbit{
position:absolute;
width:min(62vw,520px);
aspect-ratio:1;
border-radius:50%;
border:1px solid rgba(82,220,255,.20);
box-shadow:
0 0 55px rgba(0,217,255,.18),
inset 0 0 42px rgba(255,176,0,.09);
animation:introOrbit 8s linear infinite;
}
.intro-orbit:before,
.intro-orbit:after{
content:"";
position:absolute;
width:13px;
height:13px;
border-radius:50%;
background:#ffd86b;
box-shadow:0 0 22px #ffb000;
}
.intro-orbit:before{left:50%;top:-7px}
.intro-orbit:after{right:8%;bottom:12%;background:#00d9ff;box-shadow:0 0 22px #00d9ff}
@keyframes introOrbit{
to{transform:rotate(360deg)}
}
.intro-content{
position:relative;
z-index:2;
border:0;
background:rgba(255,255,255,.045);
border:1px solid rgba(82,220,255,.24);
border-radius:36px;
padding:42px 44px;
width:min(86vw,560px);
color:#fff;
text-align:center;
cursor:pointer;
backdrop-filter:blur(16px);
box-shadow:
0 30px 110px rgba(0,0,0,.45),
0 0 55px rgba(0,217,255,.18);
overflow:hidden;
animation:introBreath 3.2s ease-in-out infinite;
transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.intro-content:hover{
transform:translateY(-6px) scale(1.025);
border-color:rgba(255,216,107,.55);
box-shadow:
0 34px 120px rgba(0,0,0,.5),
0 0 70px rgba(0,217,255,.28),
0 0 48px rgba(255,176,0,.18);
}
@keyframes introBreath{
0%,100%{transform:scale(1)}
50%{transform:scale(1.025)}
}
.intro-logo{
width:min(82%,360px);
filter:
drop-shadow(0 0 20px rgba(0,217,255,.75))
drop-shadow(0 0 24px rgba(255,176,0,.35));
animation:introLogoFloat 3.4s ease-in-out infinite;
}
@keyframes introLogoFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-7px)}
}
.intro-motto{
display:block;
margin-top:20px;
font-size:clamp(22px,4vw,36px);
line-height:1.1;
font-weight:950;
background:linear-gradient(90deg,#fff,#bdf4ff,#ffd86b);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.intro-subtext{
display:inline-block;
margin-top:18px;
color:#bdf4ff;
font-size:13px;
text-transform:uppercase;
letter-spacing:.18em;
font-weight:900;
animation:introPulseText 1.5s ease-in-out infinite;
}
@keyframes introPulseText{
50%{opacity:.55}
}
.intro-scan{
position:absolute;
inset:0;
background:linear-gradient(115deg,transparent 0%,transparent 38%,rgba(255,255,255,.20) 50%,transparent 62%,transparent 100%);
transform:translateX(-120%);
animation:introScan 3.2s ease-in-out infinite;
}
@keyframes introScan{
45%,100%{transform:translateX(120%)}
}
.intro-screen.opening .intro-content{
transform:scale(.86);
opacity:0;
transition:.55s ease;
}
@media(max-width:760px){
.intro-content{
width:88vw;
padding:30px 22px;
border-radius:28px;
}
.intro-orbit{
width:82vw;
}
.intro-logo{
width:min(88%,300px);
}
}
@media(prefers-reduced-motion:reduce){
.intro-screen,
.intro-curtain,
.intro-content,
.intro-logo,
.intro-orbit,
.intro-scan,
.intro-subtext{
animation:none!important;
transition:none!important;
}
}
/* Spodní logo: jen efektová/glitch verze, bez původního plného obrázku */
.site-footer .footer-brand{
position:relative!important;
display:inline-block;
overflow:hidden;
-webkit-mask-image:linear-gradient(#000,#000);
mask-image:linear-gradient(#000,#000);
}
/* Originální obrázek drží pouze rozměr, ale vizuálně není vidět */
.site-footer .footer-logo{
opacity:0!important;
visibility:visible!important;
}
/* Efektové vrstvy jsou vidět pořád, ne jen na hover */
.site-footer .footer-brand:before,
.site-footer .footer-brand:after{
content:"";
position:absolute;
inset:0!important;
left:0!important;
top:0!important;
width:100%!important;
height:100%!important;
max-width:none!important;
background:url("assets/logo-johnnys-transparent.webp") left center/contain no-repeat!important;
pointer-events:none;
opacity:.72!important;
mix-blend-mode:screen;
}
.site-footer .footer-brand:before{
filter:
hue-rotate(150deg)
saturate(1.35)
drop-shadow(0 0 18px rgba(0,217,255,.95))
drop-shadow(0 0 28px rgba(0,217,255,.42));
animation:
footerEffectOnlyOne 2.1s ease-in-out infinite,
footerEffectBreath 3.4s ease-in-out infinite;
}
.site-footer .footer-brand:after{
filter:
hue-rotate(315deg)
saturate(1.2)
drop-shadow(0 0 16px rgba(255,43,214,.75))
drop-shadow(0 0 24px rgba(255,176,0,.38));
animation:
footerEffectOnlyTwo 2.55s ease-in-out infinite,
footerEffectBreath 3.9s ease-in-out infinite reverse;
}
/* Hover jen zesílí efekt, ale nepřidává původní obrázek */
.site-footer .footer-brand:hover .footer-logo{
opacity:0!important;
}
.site-footer .footer-brand:hover:before{
opacity:.9!important;
animation:
footerEffectOnlyOne 1.25s ease-in-out infinite,
footerEffectBreath 2.7s ease-in-out infinite;
}
.site-footer .footer-brand:hover:after{
opacity:.82!important;
animation:
footerEffectOnlyTwo 1.45s ease-in-out infinite,
footerEffectBreath 3s ease-in-out infinite reverse;
}
@keyframes footerEffectBreath{
0%,100%{
transform:scale(1) translate(0,0);
}
50%{
transform:scale(1.025) translate(0,-2px);
}
}
@keyframes footerEffectOnlyOne{
0%,100%{clip-path:inset(0 0 0 0);transform:translate(0,0)}
12%{clip-path:inset(7% 0 78% 0);transform:translate(1px,-1px)}
24%{clip-path:inset(62% 0 18% 0);transform:translate(-1px,1px)}
36%{clip-path:inset(30% 0 48% 0);transform:translate(1px,0)}
48%{clip-path:inset(72% 0 10% 0);transform:translate(-1px,-1px)}
60%{clip-path:inset(0 0 0 0);transform:translate(0,0)}
}
@keyframes footerEffectOnlyTwo{
0%,100%{clip-path:inset(0 0 0 0);transform:translate(0,0)}
15%{clip-path:inset(70% 0 12% 0);transform:translate(-1px,1px)}
30%{clip-path:inset(14% 0 68% 0);transform:translate(1px,-1px)}
45%{clip-path:inset(42% 0 35% 0);transform:translate(-1px,0)}
60%{clip-path:inset(4% 0 76% 0);transform:translate(1px,1px)}
72%{clip-path:inset(0 0 0 0);transform:translate(0,0)}
}
/* Malý scan efekt přes spodní logo */
.site-footer .footer-brand .footer-logo + *{
pointer-events:none;
}
.site-footer .footer-brand:focus-within:before,
.site-footer .footer-brand:focus-within:after{
opacity:1!important;
}
@media(prefers-reduced-motion:reduce){
.site-footer .footer-brand:before,
.site-footer .footer-brand:after{
animation:none!important;
}
}
/* FIX: symetrické spodní logo v patičce */
.site-footer .footer-brand{
position:relative!important;
display:flex!important;
justify-content:center!important;
align-items:center!important;
margin:0 auto!important;
width:fit-content;
max-width:100%;
overflow:hidden;
}
.site-footer .footer-brand:before,
.site-footer .footer-brand:after{
left:50%!important;
top:50%!important;
right:auto!important;
bottom:auto!important;
width:100%!important;
height:100%!important;
transform-origin:center!important;
background:url("assets/logo-johnnys-transparent.webp") center center/contain no-repeat!important;
}
/* Přirozenější animace efektového loga — drží střed */
.site-footer .footer-brand:before{
animation:
footerCenteredEffectOne 2.2s ease-in-out infinite,
footerCenteredBreath 3.4s ease-in-out infinite!important;
}
.site-footer .footer-brand:after{
animation:
footerCenteredEffectTwo 2.7s ease-in-out infinite,
footerCenteredBreath 3.9s ease-in-out infinite reverse!important;
}
@keyframes footerCenteredBreath{
0%,100%{transform:translate(-50%,-50%) scale(1)}
50%{transform:translate(-50%,-51%) scale(1.025)}
}
@keyframes footerCenteredEffectOne{
0%,100%{clip-path:inset(0 0 0 0);transform:translate(-50%,-50%)}
12%{clip-path:inset(7% 0 78% 0);transform:translate(calc(-50% + 1px),calc(-50% - 1px))}
24%{clip-path:inset(62% 0 18% 0);transform:translate(calc(-50% - 1px),calc(-50% + 1px))}
36%{clip-path:inset(30% 0 48% 0);transform:translate(calc(-50% + 1px),-50%)}
48%{clip-path:inset(72% 0 10% 0);transform:translate(calc(-50% - 1px),calc(-50% - 1px))}
60%{clip-path:inset(0 0 0 0);transform:translate(-50%,-50%)}
}
@keyframes footerCenteredEffectTwo{
0%,100%{clip-path:inset(0 0 0 0);transform:translate(-50%,-50%)}
15%{clip-path:inset(70% 0 12% 0);transform:translate(calc(-50% - 1px),calc(-50% + 1px))}
30%{clip-path:inset(14% 0 68% 0);transform:translate(calc(-50% + 1px),calc(-50% - 1px))}
45%{clip-path:inset(42% 0 35% 0);transform:translate(calc(-50% - 1px),-50%)}
60%{clip-path:inset(4% 0 76% 0);transform:translate(calc(-50% + 1px),calc(-50% + 1px))}
72%{clip-path:inset(0 0 0 0);transform:translate(-50%,-50%)}
}
/* Premium intro: více fade-in / fade-out efektů */
.intro-screen{
animation:introBackgroundFade 1.15s ease both;
}
@keyframes introBackgroundFade{
from{opacity:0;filter:blur(10px) brightness(.65)}
to{opacity:1;filter:blur(0) brightness(1)}
}
.intro-content{
opacity:0;
animation:
introCardFadeIn 1.05s cubic-bezier(.2,.8,.2,1) .25s forwards,
introBreath 3.2s ease-in-out 1.35s infinite!important;
}
@keyframes introCardFadeIn{
from{
opacity:0;
transform:translateY(24px) scale(.92);
filter:blur(10px);
}
to{
opacity:1;
transform:translateY(0) scale(1);
filter:blur(0);
}
}
.intro-logo{
opacity:0;
animation:
introLogoFadeIn .95s ease .55s forwards,
introLogoFloat 3.4s ease-in-out 1.5s infinite!important;
}
@keyframes introLogoFadeIn{
from{
opacity:0;
transform:translateY(14px) scale(.88);
filter:blur(8px) drop-shadow(0 0 0 rgba(0,217,255,0));
}
to{
opacity:1;
transform:translateY(0) scale(1);
filter:
blur(0)
drop-shadow(0 0 20px rgba(0,217,255,.75))
drop-shadow(0 0 24px rgba(255,176,0,.35));
}
}
.intro-motto{
opacity:0;
animation:introTextFadeIn .9s ease .9s forwards;
}
.intro-subtext{
opacity:0;
animation:
introTextFadeIn .9s ease 1.2s forwards,
introPulseText 1.5s ease-in-out 2.1s infinite!important;
}
@keyframes introTextFadeIn{
from{
opacity:0;
transform:translateY(12px);
filter:blur(6px);
}
to{
opacity:1;
transform:translateY(0);
filter:blur(0);
}
}
/* Při otevření stránky fade-out do stran + jemné rozostření */
.intro-screen.opening{
animation:introWholeFadeOut 1.05s ease .35s forwards;
}
@keyframes introWholeFadeOut{
from{opacity:1;filter:blur(0) brightness(1)}
to{opacity:0;filter:blur(12px) brightness(1.35)}
}
.intro-screen.opening .intro-content{
animation:introContentExit .62s ease forwards!important;
}
@keyframes introContentExit{
from{opacity:1;transform:scale(1);filter:blur(0)}
to{opacity:0;transform:scale(.82);filter:blur(12px)}
}
.intro-screen.opening .intro-orbit{
animation:introOrbitExit .9s ease forwards!important;
}
@keyframes introOrbitExit{
to{opacity:0;transform:rotate(90deg) scale(1.35);filter:blur(10px)}
}
/* Hlavní web po intru jemně naběhne */
body.intro-active main,
body.intro-active header.hero,
body.intro-active footer,
body.intro-active .quick-panel,
body.intro-active .next-event-badge{
opacity:0;
}
body:not(.intro-active) header.hero,
body:not(.intro-active) main,
body:not(.intro-active) footer{
animation:pageAfterIntroFade .85s ease both;
}
@keyframes pageAfterIntroFade{
from{opacity:0;transform:translateY(12px);filter:blur(8px)}
to{opacity:1;transform:translateY(0);filter:blur(0)}
}
@media(max-width:760px){
.site-footer .footer-brand{
justify-content:center!important;
width:100%;
}
}
/* =========================================================
FINÁLNÍ OPRAVA LOG — čisté a stabilní řešení
========================================================= */
/* Horní logo v navigaci */
.logo-wrap{
display:inline-flex;
align-items:center;
justify-content:center;
line-height:0;
}
.logo-img{
display:block!important;
width:220px;
max-width:42vw;
height:auto;
object-fit:contain;
}
/* Intro logo */
.intro-logo{
display:block!important;
margin:0 auto;
width:min(82%,360px);
max-height:240px;
object-fit:contain;
}
/* Patička: zruší staré pseudo-vrstvy na celém brand bloku */
.site-footer .footer-brand{
position:relative!important;
display:block!important;
width:100%!important;
max-width:460px;
margin:0!important;
overflow:visible!important;
text-align:left;
-webkit-mask-image:none!important;
mask-image:none!important;
}
.site-footer .footer-brand:before,
.site-footer .footer-brand:after{
content:none!important;
display:none!important;
}
/* Samostatný wrapper jen pro logo v patičce */
.footer-logo-effect{
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:230px;
max-width:78vw;
aspect-ratio:2.45/1;
overflow:hidden;
isolation:isolate;
margin:0 0 18px 0;
-webkit-mask-image:linear-gradient(#000,#000);
mask-image:linear-gradient(#000,#000);
}
/* Originální img drží rozměr, ale vizuálně je skryté */
.footer-logo-effect .footer-logo{
display:block!important;
width:100%!important;
max-width:none!important;
height:auto!important;
opacity:0!important;
visibility:visible!important;
animation:none!important;
filter:none!important;
pointer-events:none;
}
/* Efektové logo je přesně centrované ve wrapperu */
.footer-logo-effect:before,
.footer-logo-effect:after{
content:"";
position:absolute;
inset:0;
background:url("assets/logo-johnnys-transparent.webp") center center/contain no-repeat;
pointer-events:none;
mix-blend-mode:screen;
transform-origin:center;
}
.footer-logo-effect:before{
opacity:.76;
filter:
hue-rotate(150deg)
saturate(1.35)
drop-shadow(0 0 18px rgba(0,217,255,.95))
drop-shadow(0 0 28px rgba(0,217,255,.42));
animation:
footerLogoCleanGlitchA 2.4s ease-in-out infinite,
footerLogoCleanBreath 3.6s ease-in-out infinite;
}
.footer-logo-effect:after{
opacity:.58;
filter:
hue-rotate(315deg)
saturate(1.25)
drop-shadow(0 0 16px rgba(255,43,214,.70))
drop-shadow(0 0 22px rgba(255,176,0,.34));
animation:
footerLogoCleanGlitchB 3s ease-in-out infinite,
footerLogoCleanBreath 4.1s ease-in-out infinite reverse;
}
.footer-logo-effect:hover:before{
opacity:.92;
animation-duration:1.35s,2.8s;
}
.footer-logo-effect:hover:after{
opacity:.78;
animation-duration:1.6s,3.1s;
}
@keyframes footerLogoCleanBreath{
0%,100%{transform:scale(1)}
50%{transform:scale(1.025) translateY(-1px)}
}
@keyframes footerLogoCleanGlitchA{
0%,100%{clip-path:inset(0 0 0 0);translate:0 0}
10%{clip-path:inset(8% 0 78% 0);translate:1px -1px}
22%{clip-path:inset(62% 0 18% 0);translate:-1px 1px}
34%{clip-path:inset(30% 0 48% 0);translate:1px 0}
46%{clip-path:inset(72% 0 10% 0);translate:-1px -1px}
58%{clip-path:inset(0 0 0 0);translate:0 0}
}
@keyframes footerLogoCleanGlitchB{
0%,100%{clip-path:inset(0 0 0 0);translate:0 0}
14%{clip-path:inset(70% 0 12% 0);translate:-1px 1px}
28%{clip-path:inset(14% 0 68% 0);translate:1px -1px}
42%{clip-path:inset(42% 0 35% 0);translate:-1px 0}
56%{clip-path:inset(4% 0 76% 0);translate:1px 1px}
70%{clip-path:inset(0 0 0 0);translate:0 0}
}
/* Footer text pod logem drží normální layout */
.footer-brand p{
position:relative;
z-index:2;
margin:0!important;
}
/* Mobilní centrování */
@media(max-width:900px){
.site-footer .footer-brand{
max-width:none;
text-align:center;
}
.footer-logo-effect{
margin:0 auto 18px;
}
.logo-img{
width:170px;
}
}
@media(max-width:420px){
.logo-img{
width:135px;
}
.intro-logo{
width:min(88%,300px);
}
.footer-logo-effect{
width:210px;
}
}
@media(prefers-reduced-motion:reduce){
.footer-logo-effect:before,
.footer-logo-effect:after{
animation:none!important;
}
}
/* REVERT: footer logo back to clean effect-only version */
.footer-logo-effect{
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:220px;
max-width:80vw;
aspect-ratio:2.4/1;
margin:0 0 18px 0;
overflow:hidden;
}
.footer-logo-effect .footer-logo{
opacity:0!important;
}
.footer-logo-effect::before,
.footer-logo-effect::after{
content:"";
position:absolute;
inset:0;
background:url("assets/logo-johnnys-transparent.webp") center/contain no-repeat;
pointer-events:none;
}
.footer-logo-effect::before{
opacity:.7;
filter:drop-shadow(0 0 18px rgba(0,217,255,.9));
animation:footerSimpleA 2.2s ease-in-out infinite;
}
.footer-logo-effect::after{
opacity:.5;
filter:drop-shadow(0 0 16px rgba(255,176,0,.7));
animation:footerSimpleB 2.6s ease-in-out infinite;
}
@keyframes footerSimpleA{
0%,100%{transform:translate(0,0)}
50%{transform:translate(1px,-1px)}
}
@keyframes footerSimpleB{
0%,100%{transform:translate(0,0)}
50%{transform:translate(-1px,1px)}
}
/* =========================================================
POLISH: symetrické intro + lahodnější spodní logo + audio UI
========================================================= */
/* Zvukové tlačítko */
.sound-toggle{
position:fixed;
left:22px;
top:92px;
z-index:70;
border:1px solid rgba(82,220,255,.34);
background:rgba(8,10,22,.76);
color:#fff;
border-radius:999px;
padding:10px 14px;
font-weight:900;
cursor:pointer;
backdrop-filter:blur(12px);
box-shadow:0 0 24px rgba(0,217,255,.16);
transition:.25s transform,.25s background,.25s border-color;
}
.sound-toggle:hover{
transform:translateY(-2px);
border-color:#ffd86b;
background:rgba(255,176,0,.20);
}
.sound-toggle.sound-on{
background:linear-gradient(90deg,rgba(0,217,255,.28),rgba(255,176,0,.22));
border-color:rgba(255,216,107,.55);
}
/* Intro: přesně symetrické rozložení */
.intro-screen{
display:flex!important;
align-items:center!important;
justify-content:center!important;
padding:24px;
}
.intro-content{
display:flex!important;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
margin:auto!important;
width:min(90vw,620px)!important;
min-height:min(72vh,560px);
padding:46px 44px!important;
}
.intro-logo{
display:block!important;
margin:0 auto!important;
width:min(78%,360px)!important;
max-height:190px;
object-fit:contain;
object-position:center center!important;
}
.intro-motto{
max-width:520px;
margin-left:auto!important;
margin-right:auto!important;
text-align:center!important;
}
.intro-subtext{
margin-left:auto;
margin-right:auto;
}
/* Intro spodní panel s další akcí */
.intro-event{
margin-top:24px;
width:min(100%,460px);
display:grid;
grid-template-columns:1fr auto;
gap:14px;
align-items:center;
padding:14px 16px;
border-radius:22px;
border:1px solid rgba(82,220,255,.26);
background:linear-gradient(135deg,rgba(0,217,255,.10),rgba(255,176,0,.10));
box-shadow:0 0 28px rgba(0,217,255,.10);
opacity:0;
animation:introTextFadeIn .85s ease 1.35s forwards;
}
.intro-event small{
display:block;
color:#52dcff;
text-transform:uppercase;
letter-spacing:.16em;
font-size:10px;
font-weight:900;
}
.intro-event strong{
display:block;
color:#ffd86b;
font-size:20px;
line-height:1.15;
}
.intro-event span{
display:block;
color:#eef7ff;
font-size:13px;
font-weight:800;
}
.intro-event em{
font-style:normal;
color:#fff;
font-weight:950;
background:rgba(255,255,255,.08);
border-radius:999px;
padding:9px 12px;
}
/* Intro akce */
.intro-actions{
margin-top:18px;
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:12px;
opacity:0;
animation:introTextFadeIn .85s ease 1.55s forwards;
}
.intro-action-primary,
.intro-action-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:11px 18px;
border-radius:999px;
font-weight:950;
text-decoration:none;
}
.intro-action-primary{
background:linear-gradient(90deg,#ffb000,#ffd86b);
color:#140900;
box-shadow:0 0 24px rgba(255,176,0,.28);
}
.intro-action-secondary{
color:#fff;
border:1px solid rgba(82,220,255,.42);
background:rgba(0,217,255,.08);
}
.intro-action-primary:hover,
.intro-action-secondary:hover{
transform:translateY(-2px) scale(1.03);
}
/* Lahodnější spodní logo */
.footer-logo-effect{
position:relative!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:260px!important;
max-width:80vw!important;
aspect-ratio:2.45/1!important;
margin:0 0 18px 0!important;
overflow:visible!important;
isolation:isolate;
}
.footer-logo-effect .footer-logo{
display:block!important;
width:100%!important;
max-width:none!important;
opacity:0!important;
}
.footer-logo-effect:before,
.footer-logo-effect:after{
content:""!important;
position:absolute!important;
inset:0!important;
background:url("assets/logo-johnnys-transparent.webp") center center/contain no-repeat!important;
pointer-events:none;
transform-origin:center;
}
.footer-logo-effect:before{
opacity:.92!important;
filter:
drop-shadow(0 0 12px rgba(0,217,255,.80))
drop-shadow(0 0 28px rgba(0,217,255,.35))
drop-shadow(0 0 18px rgba(255,176,0,.25));
animation:footerSoftLogoBreath 4s ease-in-out infinite, footerSoftGlow 7s ease-in-out infinite;
}
.footer-logo-effect:after{
opacity:.32!important;
filter:
hue-rotate(280deg)
drop-shadow(0 0 16px rgba(255,43,214,.45))
drop-shadow(0 0 20px rgba(255,176,0,.25));
animation:footerSoftLogoDrift 5.5s ease-in-out infinite;
}
.footer-logo-effect:hover:before{
filter:
drop-shadow(0 0 18px rgba(0,217,255,.95))
drop-shadow(0 0 34px rgba(255,176,0,.48))
drop-shadow(0 0 28px rgba(255,43,214,.30));
}
@keyframes footerSoftLogoBreath{
0%,100%{transform:scale(1) translateY(0)}
50%{transform:scale(1.035) translateY(-2px)}
}
@keyframes footerSoftLogoDrift{
0%,100%{transform:translate(0,0) scale(1);opacity:.22}
50%{transform:translate(1px,-1px) scale(1.02);opacity:.38}
}
@keyframes footerSoftGlow{
0%,100%{opacity:.86}
50%{opacity:1}
}
/* Nerušivé vystředění patičky na mobilu */
@media(max-width:900px){
.footer-logo-effect{
margin:0 auto 18px!important;
}
.sound-toggle{
left:12px;
top:74px;
padding:9px 12px;
font-size:13px;
}
}
@media(max-width:760px){
.intro-content{
min-height:72vh;
padding:30px 22px!important;
}
.intro-event{
grid-template-columns:1fr;
text-align:center;
}
.intro-actions{
width:100%;
}
.intro-action-primary,
.intro-action-secondary{
width:100%;
}
}
/* FIX: spodní logo nebylo oříznuté */
.footer-logo-effect{
width:340px!important;
max-width:90vw!important;
min-height:155px!important;
aspect-ratio:auto!important;
overflow:visible!important;
margin:0 0 18px 0!important;
}
.footer-logo-effect .footer-logo{
width:100%!important;
height:auto!important;
}
.footer-logo-effect:before,
.footer-logo-effect:after{
inset:-22px!important;
background-size:contain!important;
background-position:center!important;
}
/* Zvuk defaultně působí jako zapnutý, ale browser ho spustí až po první interakci */
.sound-toggle.sound-on{
background:linear-gradient(90deg,rgba(0,217,255,.28),rgba(255,176,0,.24),rgba(255,43,214,.16));
border-color:rgba(255,216,107,.62);
}
.sound-toggle.sound-waiting{
animation:soundWaitingPulse 1.4s ease-in-out infinite;
}
@keyframes soundWaitingPulse{
50%{box-shadow:0 0 34px rgba(255,176,0,.35)}
}
@media(max-width:900px){
.footer-logo-effect{
width:300px!important;
min-height:135px!important;
margin:0 auto 18px!important;
}
}
@media(max-width:420px){
.footer-logo-effect{
width:255px!important;
min-height:118px!important;
}
}
/* FINAL: spodní logo klasické + jednoduchý 3D efekt */
.footer-logo-effect{
position:relative!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:310px!important;
max-width:88vw!important;
min-height:130px!important;
margin:0 0 18px 0!important;
overflow:visible!important;
perspective:900px;
isolation:isolate;
}
.footer-logo-effect:before,
.footer-logo-effect:after{
content:none!important;
display:none!important;
}
.footer-logo-effect .footer-logo{
display:block!important;
width:100%!important;
height:auto!important;
max-width:none!important;
opacity:1!important;
visibility:visible!important;
transform:rotateX(0deg) rotateY(0deg) translateZ(0);
filter:
drop-shadow(0 12px 18px rgba(0,0,0,.36))
drop-shadow(0 0 16px rgba(0,217,255,.42))
drop-shadow(0 0 18px rgba(255,176,0,.22));
transition:
transform .35s ease,
filter .35s ease;
animation:footerClassicLogoBreath 4.2s ease-in-out infinite;
}
.footer-logo-effect:hover .footer-logo{
transform:scale(1.05) rotate(-1deg);
filter:
drop-shadow(0 18px 24px rgba(0,0,0,.45))
drop-shadow(0 0 24px rgba(0,217,255,.70))
drop-shadow(0 0 28px rgba(255,176,0,.44));
}
@keyframes footerClassicLogoBreath{
0%,100%{transform:translateY(0) scale(1)}
50%{transform:translateY(-3px) scale(1.018)}
}
/* Ohnostroj trochu utlumený */
#fireworks{
opacity:.48!important;
}
/* Audio mixer v rychlém menu */
.quick-menu .music-panel-toggle{
border:1px solid rgba(255,216,107,.46)!important;
background:rgba(255,176,0,.16)!important;
}
.music-panel{
display:none;
gap:10px;
min-width:230px;
padding:14px;
border-radius:18px;
border:1px solid rgba(82,220,255,.24);
background:rgba(8,10,22,.92);
backdrop-filter:blur(14px);
box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.quick-panel.music-open .music-panel{
display:grid;
}
.music-panel label{
display:grid;
gap:6px;
color:#eef7ff;
font-weight:900;
font-size:13px;
}
.music-panel span{
display:flex;
justify-content:space-between;
gap:10px;
}
.music-panel output{
color:#ffd86b;
font-weight:950;
}
.music-panel input[type="range"]{
width:100%;
accent-color:#ffb000;
cursor:pointer;
}
.music-panel small{
color:#bdf4ff;
opacity:.75;
line-height:1.35;
}
@media(max-width:900px){
.footer-logo-effect{
margin:0 auto 18px!important;
width:280px!important;
min-height:118px!important;
}
}
@media(max-width:420px){
.footer-logo-effect{
width:235px!important;
min-height:104px!important;
}
#fireworks{
opacity:.34!important;
}
}
/* FIX: stabilní hover efekt (bez mizení) */
.footer-logo-effect{
transform-style:preserve-3d;
overflow:visible!important;
}
.footer-logo-effect .footer-logo{
backface-visibility:hidden;
}
.footer-logo-effect:hover .footer-logo{
transform:
perspective(600px)
rotateX(6deg)
rotateY(-6deg)
scale(1.05);
}
/* =========================================================
HARD FIX: spodní logo nesmí mizet při hoveru
Přepisuje všechny předchozí experimentální efekty.
========================================================= */
.site-footer .footer-logo-effect,
.footer-logo-effect{
position:relative!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:310px!important;
max-width:88vw!important;
min-height:auto!important;
aspect-ratio:auto!important;
margin:0 0 18px 0!important;
overflow:visible!important;
perspective:none!important;
transform-style:flat!important;
isolation:auto!important;
background:none!important;
}
/* Vypnout staré efektové pseudo-vrstvy, které logo překrývaly */
.site-footer .footer-logo-effect::before,
.site-footer .footer-logo-effect::after,
.footer-logo-effect::before,
.footer-logo-effect::after{
content:none!important;
display:none!important;
opacity:0!important;
visibility:hidden!important;
}
/* Logo je vždy viditelné */
.site-footer .footer-logo-effect .footer-logo,
.footer-logo-effect .footer-logo{
display:block!important;
position:relative!important;
z-index:5!important;
width:100%!important;
height:auto!important;
max-width:none!important;
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
backface-visibility:visible!important;
transform:none!important;
animation:footerLogoSafeBreath 4s ease-in-out infinite!important;
filter:
drop-shadow(0 12px 18px rgba(0,0,0,.36))
drop-shadow(0 0 16px rgba(0,217,255,.42))
drop-shadow(0 0 18px rgba(255,176,0,.22))!important;
transition:transform .28s ease, filter .28s ease!important;
}
/* Hover pouze bezpečný 2D efekt */
.site-footer .footer-logo-effect:hover .footer-logo,
.footer-logo-effect:hover .footer-logo{
opacity:1!important;
visibility:visible!important;
transform:scale(1.045) rotate(-1deg)!important;
filter:
drop-shadow(0 16px 24px rgba(0,0,0,.45))
drop-shadow(0 0 24px rgba(0,217,255,.70))
drop-shadow(0 0 28px rgba(255,176,0,.44))!important;
}
@keyframes footerLogoSafeBreath{
0%,100%{transform:translateY(0) scale(1)}
50%{transform:translateY(-2px) scale(1.012)}
}
@media(max-width:900px){
.site-footer .footer-logo-effect,
.footer-logo-effect{
margin:0 auto 18px!important;
width:280px!important;
}
}
@media(max-width:420px){
.site-footer .footer-logo-effect,
.footer-logo-effect{
width:235px!important;
}
}
/* =========================================================
FINAL CLEAN: spodní logo pouze glow (žádné animace)
========================================================= */
.footer-logo-effect,
.site-footer .footer-logo-effect{
perspective:none!important;
transform:none!important;
}
.footer-logo-effect .footer-logo,
.site-footer .footer-logo-effect .footer-logo{
animation:none!important;
transform:none!important;
opacity:1!important;
visibility:visible!important;
filter:
drop-shadow(0 0 14px rgba(0,217,255,.65))
drop-shadow(0 0 22px rgba(255,176,0,.35))
drop-shadow(0 8px 18px rgba(0,0,0,.45))!important;
transition:filter .25s ease!important;
}
/* jemné zesílení glow na hover (bez pohybu) */
.footer-logo-effect:hover .footer-logo,
.site-footer .footer-logo-effect:hover .footer-logo{
transform:none!important;
filter:
drop-shadow(0 0 18px rgba(0,217,255,.85))
drop-shadow(0 0 28px rgba(255,176,0,.55))
drop-shadow(0 10px 22px rgba(0,0,0,.55))!important;
}
/* =========================================================
ULTIMATE FIX: spodní logo je vždy viditelné
- žádné mizení při pohybu myši
- žádné pseudo vrstvy
- pouze stálý glow
========================================================= */
.site-footer .footer-brand{
overflow:visible!important;
}
.site-footer .footer-logo-effect,
.footer-logo-effect{
position:relative!important;
display:block!important;
width:320px!important;
max-width:88vw!important;
min-height:0!important;
height:auto!important;
aspect-ratio:auto!important;
margin:0 0 18px 0!important;
overflow:visible!important;
perspective:none!important;
transform:none!important;
transform-style:flat!important;
isolation:auto!important;
cursor:default!important;
opacity:1!important;
visibility:visible!important;
}
/* vypnout všechny staré efektové vrstvy */
.site-footer .footer-logo-effect::before,
.site-footer .footer-logo-effect::after,
.footer-logo-effect::before,
.footer-logo-effect::after{
content:none!important;
display:none!important;
opacity:0!important;
visibility:hidden!important;
animation:none!important;
transform:none!important;
background:none!important;
}
/* skutečný obrázek loga je vždy vidět */
.site-footer .footer-logo-effect img.footer-logo,
.footer-logo-effect img.footer-logo,
.site-footer .footer-logo-effect .footer-logo,
.footer-logo-effect .footer-logo{
display:block!important;
position:relative!important;
z-index:10!important;
width:100%!important;
height:auto!important;
max-width:none!important;
min-height:0!important;
opacity:1!important;
visibility:visible!important;
transform:none!important;
translate:none!important;
rotate:none!important;
scale:none!important;
animation:none!important;
transition:filter .22s ease!important;
backface-visibility:visible!important;
pointer-events:none!important;
filter:
drop-shadow(0 0 14px rgba(0,217,255,.72))
drop-shadow(0 0 22px rgba(255,176,0,.38))
drop-shadow(0 8px 18px rgba(0,0,0,.45))!important;
}
/* hover nesmí měnit pozici ani opacity, jen lehce zesílí glow */
.site-footer .footer-logo-effect:hover img.footer-logo,
.footer-logo-effect:hover img.footer-logo,
.site-footer .footer-logo-effect:hover .footer-logo,
.footer-logo-effect:hover .footer-logo{
opacity:1!important;
visibility:visible!important;
transform:none!important;
animation:none!important;
filter:
drop-shadow(0 0 18px rgba(0,217,255,.88))
drop-shadow(0 0 28px rgba(255,176,0,.55))
drop-shadow(0 10px 22px rgba(0,0,0,.55))!important;
}
@media(max-width:900px){
.site-footer .footer-logo-effect,
.footer-logo-effect{
width:280px!important;
margin:0 auto 18px!important;
}
}
@media(max-width:420px){
.site-footer .footer-logo-effect,
.footer-logo-effect{
width:235px!important;
}
}
/* =========================================================
CSS CLEAN FIX: spodní logo nikdy nezmizí ani při hoveru
na text pod logem nebo na okraji loga.
========================================================= */
/* Footer brand nesmí fungovat jako hover-trigger pro logo */
.site-footer .footer-brand,
.site-footer .footer-brand:hover,
.site-footer .footer-brand:focus,
.site-footer .footer-brand:focus-within{
overflow:visible!important;
-webkit-mask-image:none!important;
mask-image:none!important;
}
/* Staré pseudo-vrstvy na footer-brand úplně vypnout */
.site-footer .footer-brand::before,
.site-footer .footer-brand::after,
.site-footer .footer-brand:hover::before,
.site-footer .footer-brand:hover::after,
.site-footer .footer-brand:focus-within::before,
.site-footer .footer-brand:focus-within::after{
content:none!important;
display:none!important;
opacity:0!important;
visibility:hidden!important;
background:none!important;
animation:none!important;
transform:none!important;
}
/* Logo wrapper je čistý a nereaguje na hover rodiče */
.site-footer .footer-logo-effect,
.site-footer .footer-brand:hover .footer-logo-effect,
.site-footer .footer-brand p:hover ~ .footer-logo-effect{
position:relative!important;
display:block!important;
width:320px!important;
max-width:88vw!important;
height:auto!important;
min-height:0!important;
aspect-ratio:auto!important;
margin:0 0 18px 0!important;
overflow:visible!important;
opacity:1!important;
visibility:visible!important;
transform:none!important;
animation:none!important;
perspective:none!important;
transform-style:flat!important;
isolation:auto!important;
background:transparent!important;
}
/* Wrapper pseudo prvky vypnout ve všech stavech */
.site-footer .footer-logo-effect::before,
.site-footer .footer-logo-effect::after,
.site-footer .footer-logo-effect:hover::before,
.site-footer .footer-logo-effect:hover::after,
.site-footer .footer-brand:hover .footer-logo-effect::before,
.site-footer .footer-brand:hover .footer-logo-effect::after{
content:none!important;
display:none!important;
opacity:0!important;
visibility:hidden!important;
background:none!important;
animation:none!important;
transform:none!important;
}
/* Skutečné logo: vždy viditelné ve všech stavech, včetně hoveru na rodiči/textu */
.site-footer .footer-logo-effect > img.footer-logo,
.site-footer .footer-brand:hover .footer-logo-effect > img.footer-logo,
.site-footer .footer-logo-effect:hover > img.footer-logo,
.site-footer .footer-brand p:hover,
.site-footer .footer-brand p:hover ~ .footer-logo-effect > img.footer-logo{
opacity:1!important;
visibility:visible!important;
}
/* Samostatné pravidlo pro img, aby přebilo staré .footer-brand:hover .footer-logo */
.site-footer .footer-logo-effect > img.footer-logo,
.site-footer .footer-logo-effect:hover > img.footer-logo,
.site-footer .footer-brand:hover .footer-logo-effect > img.footer-logo,
.site-footer .footer-brand:focus-within .footer-logo-effect > img.footer-logo,
.site-footer .footer-brand .footer-logo-effect > img.footer-logo:hover{
display:block!important;
position:relative!important;
z-index:999!important;
width:100%!important;
height:auto!important;
max-width:none!important;
min-height:0!important;
opacity:1!important;
visibility:visible!important;
transform:none!important;
translate:none!important;
rotate:none!important;
scale:none!important;
animation:none!important;
backface-visibility:visible!important;
pointer-events:auto!important;
filter:
drop-shadow(0 0 14px rgba(0,217,255,.72))
drop-shadow(0 0 22px rgba(255,176,0,.38))
drop-shadow(0 8px 18px rgba(0,0,0,.45))!important;
transition:filter .22s ease!important;
}
/* Hover pouze na skutečném obrázku, bez opacity/transform změn */
.site-footer .footer-logo-effect > img.footer-logo:hover{
opacity:1!important;
visibility:visible!important;
transform:none!important;
filter:
drop-shadow(0 0 18px rgba(0,217,255,.88))
drop-shadow(0 0 28px rgba(255,176,0,.55))
drop-shadow(0 10px 22px rgba(0,0,0,.55))!important;
}
/* Text pod logem nesmí spouštět žádný logo efekt */
.site-footer .footer-brand p,
.site-footer .footer-brand p:hover{
position:relative!important;
z-index:2!important;
transform:none!important;
}
@media(max-width:900px){
.site-footer .footer-logo-effect{
width:280px!important;
margin:0 auto 18px!important;
}
}
@media(max-width:420px){
.site-footer .footer-logo-effect{
width:235px!important;
}
}
/* FINAL: odstranit glow spodního loga */
.site-footer .footer-logo-effect .footer-logo,
.footer-logo-effect .footer-logo{
filter:none!important;
}
/* =========================================================
AUDIT FIX 2026-05
Stabilizační finální override — nechává design, ale ruší konflikty.
========================================================= */
/* Intro už není button, ale div s role=button */
.intro-content{
appearance:none;
-webkit-appearance:none;
user-select:none;
}
/* Spodní logo: pouze čistý obrázek, bez glow, bez pseudo-vrstev, bez hover mizení */
.site-footer .footer-brand{
overflow:visible!important;
-webkit-mask-image:none!important;
mask-image:none!important;
}
.site-footer .footer-brand::before,
.site-footer .footer-brand::after,
.site-footer .footer-brand:hover::before,
.site-footer .footer-brand:hover::after,
.site-footer .footer-logo-effect::before,
.site-footer .footer-logo-effect::after,
.site-footer .footer-logo-effect:hover::before,
.site-footer .footer-logo-effect:hover::after{
content:none!important;
display:none!important;
opacity:0!important;
visibility:hidden!important;
animation:none!important;
transform:none!important;
background:none!important;
}
.site-footer .footer-logo-effect{
position:relative!important;
display:block!important;
width:320px!important;
max-width:88vw!important;
height:auto!important;
min-height:0!important;
aspect-ratio:auto!important;
margin:0 0 18px 0!important;
overflow:visible!important;
opacity:1!important;
visibility:visible!important;
transform:none!important;
animation:none!important;
perspective:none!important;
transform-style:flat!important;
background:transparent!important;
cursor:default!important;
}
.site-footer .footer-logo-effect > img.footer-logo,
.site-footer .footer-logo-effect:hover > img.footer-logo,
.site-footer .footer-brand:hover .footer-logo-effect > img.footer-logo,
.site-footer .footer-brand:focus-within .footer-logo-effect > img.footer-logo{
display:block!important;
position:relative!important;
z-index:20!important;
width:100%!important;
height:auto!important;
max-width:none!important;
opacity:1!important;
visibility:visible!important;
transform:none!important;
translate:none!important;
rotate:none!important;
scale:none!important;
animation:none!important;
transition:none!important;
filter:none!important;
pointer-events:auto!important;
backface-visibility:visible!important;
}
.site-footer .footer-brand p,
.site-footer .footer-brand p:hover{
position:relative!important;
z-index:2!important;
transform:none!important;
}
/* Widgety: tlačítko skrýt je jen v rychlém menu, ne plovoucí přes obsah */
.widget-visibility-toggle{
display:none!important;
}
/* Audio/mixer menu: aby se vešlo a nepřekrývalo obsah */
.music-panel{
max-width:min(86vw,260px);
}
@media(max-width:900px){
.site-footer .footer-logo-effect{
width:280px!important;
margin:0 auto 18px!important;
}
}
@media(max-width:420px){
.site-footer .footer-logo-effect{
width:235px!important;
}
}
/* TODAY EVENTS BOX */
.today-events-box{
margin:24px 0 22px;
padding:20px;
border-radius:24px;
border:1px solid rgba(255,216,107,.32);
background:
radial-gradient(circle at 10% 0%, rgba(255,216,107,.18), transparent 34%),
rgba(255,255,255,.06);
box-shadow:0 18px 60px rgba(0,0,0,.28);
}
.today-events-head{
display:flex;
align-items:center;
gap:12px;
margin-bottom:14px;
}
.today-dot{
width:14px;
height:14px;
border-radius:50%;
background:#ffd86b;
box-shadow:0 0 18px rgba(255,216,107,.85);
flex:0 0 14px;
}
.today-dot.muted{
background:rgba(255,255,255,.35);
box-shadow:none;
}
.today-events-head small{
display:block;
color:#bdf4ff;
text-transform:uppercase;
letter-spacing:.14em;
font-weight:900;
font-size:12px;
}
.today-events-head strong{
display:block;
color:#fff;
font-size:clamp(20px,3vw,30px);
line-height:1.1;
}
.today-events-list{
display:grid;
gap:10px;
}
.today-event-item{
display:grid;
grid-template-columns:84px 1fr auto;
gap:12px;
align-items:center;
padding:13px 14px;
border-radius:18px;
border:1px solid rgba(82,220,255,.18);
background:rgba(0,0,0,.22);
color:#fff;
text-decoration:none;
transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.today-event-item:hover{
transform:translateY(-2px);
border-color:rgba(255,216,107,.45);
background:rgba(255,255,255,.09);
}
.today-event-item span{
color:#ffd86b;
font-weight:900;
}
.today-event-item strong{
font-size:17px;
}
.today-event-item em{
color:#d9dcf4;
font-style:normal;
text-align:right;
}
@media(max-width:720px){
.today-event-item{
grid-template-columns:1fr;
gap:4px;
}
.today-event-item em{
text-align:left;
}
}
/* PERFORMANCE OPT V11 */
img{
max-width:100%;
height:auto;
}
.gallery img,
.event-card img,
.logo-img,
.admin-logo,
.sidebar-logo{
content-visibility:auto;
}
.gallery img{
aspect-ratio:4 / 3;
object-fit:cover;
background:rgba(255,255,255,.06);
}
#fireworks{
pointer-events:none;
will-change:contents;
contain:strict;
}
.neon-particle,
.float-shape,
.glow-cursor{
will-change:transform, opacity;
}
@media(max-width:720px){
.neon-particle:nth-child(n+10){
display:none;
}
.float-shape:nth-child(n+4){
display:none;
}
#fireworks{
opacity:.72;
}
.gallery{
grid-template-columns:1fr;
}
}
@media(prefers-reduced-motion:reduce){
#fireworks,
.neon-particle,
.float-shape,
.glow-cursor{
display:none!important;
}
*,
*::before,
*::after{
animation-duration:.001ms!important;
animation-iteration-count:1!important;
transition-duration:.001ms!important;
scroll-behavior:auto!important;
}
}
/* INTRO LOGO OPT V12 */
.intro-logo{
display:block;
width:min(82%,360px);
max-width:360px;
aspect-ratio:360 / 266;
object-fit:contain;
margin-inline:auto;
background:transparent!important;
border:0!important;
opacity:1;
transition:opacity .22s ease, filter .22s ease;
}
.intro-logo.is-loading{
opacity:.001;
}
.intro-logo.is-ready{
opacity:1;
}
.intro-logo.logo-load-failed{
opacity:0;
}
.intro-content:has(.intro-logo.logo-load-failed)::before{
content:"Johnny’s";
display:block;
font-size:clamp(42px,9vw,78px);
font-weight:950;
letter-spacing:.02em;
color:#fff;
text-shadow:0 0 28px rgba(0,217,255,.55),0 0 18px rgba(255,176,0,.32);
}
@media(max-width:720px){
.intro-logo{
width:min(78vw,300px);
max-width:300px;
filter:drop-shadow(0 0 12px rgba(0,217,255,.55));
animation:introLogoFloat 4.2s ease-in-out infinite;
}
.intro-content{
width:min(92vw,420px);
padding:28px 18px;
}
}
/* IOS INTRO LOGO FIX V13 */
.intro-logo{
background:transparent!important;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
transform:translateZ(0);
-webkit-transform:translateZ(0);
image-rendering:auto;
}
.intro-logo.ios-repainting{
opacity:.01;
}
@supports (-webkit-touch-callout:none){
.intro-logo{
/* iOS Safari can repaint transparent PNG/WebP badly when heavy filters are active after app switch. */
filter:drop-shadow(0 0 10px rgba(0,217,255,.35))!important;
animation:none!important;
will-change:auto!important;
}
.intro-content{
-webkit-transform:translateZ(0);
transform:translateZ(0);
}
}
/* override previous content-visibility for logo */
.logo-img,
.admin-logo,
.sidebar-logo,
.intro-logo{
content-visibility:visible!important;
}
/* PERFORMANCE V46 */
img{
max-width:100%;
height:auto;
}
.card,
.event-card,
.cta-card,
.gallery-card,
.service-card{
contain:layout paint;
}
@media (prefers-reduced-motion: reduce){
*,
*::before,
*::after{
animation-duration:.001ms!important;
animation-iteration-count:1!important;
scroll-behavior:auto!important;
transition-duration:.001ms!important;
}
}
@media (max-width:760px){
.neon-particle,
.bubble,
.click-ripple{
display:none!important;
}
}
/* PERFORMANCE V47 - smoother intro */
.intro-content{
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
animation:none!important;
will-change:transform, opacity;
}
.intro-logo{
filter:drop-shadow(0 0 12px rgba(0,217,255,.45))!important;
animation:none!important;
will-change:transform, opacity;
transform:translateZ(0);
}
.intro-screen:before,
.intro-orbit,
.intro-scan{
animation:none!important;
}
.intro-curtain{
will-change:transform;
box-shadow:inset 0 0 34px rgba(0,0,0,.45)!important;
}
@media(max-width:760px){
.intro-screen{
background:linear-gradient(135deg,#02030a,#080b18 52%,#03040a)!important;
}
.intro-content{
width:min(90vw,460px)!important;
padding:30px 24px!important;
border-radius:26px!important;
box-shadow:0 16px 54px rgba(0,0,0,.42)!important;
}
.intro-logo{
width:min(76%,300px)!important;
filter:none!important;
}
.intro-curtain,
.intro-screen:before,
.intro-orbit,
.intro-scan,
.cursor-glow,
.ambient,
#fireworks{
display:none!important;
}
}
/* PERFORMANCE V48 - less animation, safer CSS overrides */
:root{
--motion-fast:.14s;
--motion-normal:.22s;
}
/* Základní repaint ochrana pro velké sekce */
.hero,
.section,
.site-footer,
.card,
.event-card,
.cta-card,
.admin-card,
.panel{
content-visibility:auto;
contain-intrinsic-size:1px 720px;
}
/* Header/hero musí zůstat viditelný hned */
.hero,
.intro-screen{
content-visibility:visible;
contain-intrinsic-size:auto;
}
/* Intro: méně animací, žádný blur, žádné nekonečné efekty */
.intro-screen{
background:linear-gradient(135deg,#02030a,#080b18 52%,#03040a)!important;
transition:opacity .35s ease, visibility .35s ease!important;
}
.intro-content{
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
animation:none!important;
transform:none!important;
transition:opacity .22s ease, transform .22s ease!important;
box-shadow:0 18px 60px rgba(0,0,0,.42)!important;
}
.intro-content:hover{
transform:none!important;
}
.intro-logo{
animation:none!important;
filter:none!important;
transform:none!important;
}
.intro-subtext,
.intro-screen:before,
.intro-orbit,
.intro-scan{
animation:none!important;
}
.intro-curtain{
box-shadow:none!important;
transition:transform .45s cubic-bezier(.76,0,.24,1)!important;
}
.intro-screen.opening .intro-content{
transform:scale(.98)!important;
opacity:0!important;
}
/* Dekorace bez dopadu na telefony a slabší zařízení */
@media(max-width:900px), (prefers-reduced-motion: reduce){
.cursor-glow,
.ambient,
.neon-particle,
.bubble,
.click-ripple,
#fireworks{
display:none!important;
}
.hero-grid{
opacity:.18!important;
animation:none!important;
}
.card,
.event-card,
.cta-card,
.tilt-card{
transform:none!important;
}
}
/* Reduced motion napříč webem */
@media(prefers-reduced-motion: reduce){
html:focus-within{
scroll-behavior:auto!important;
}
*,
*::before,
*::after{
animation-duration:.001ms!important;
animation-iteration-count:1!important;
transition-duration:.001ms!important;
scroll-behavior:auto!important;
}
}