/* ============================================================
   Vize pro Šlapanice — vizeproslapanice.cz
   Barvy: pozadí #00C6C3, akcent (rámečky) #FF0069
   ============================================================ */

:root{
  --teal:        #00C6C3;
  --teal-deep:   #039C99;
  --teal-darker: #05716F;
  --ink:         #05302E;
  --ink-soft:    #0a4b48;
  --pink:        #FF0069;
  --pink-lift:   #ff3d8c;
  --cream:       #FFF7F2;
  --white:       #ffffff;

  --font-display: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shell: 1240px;
  --pad: clamp(1.15rem, 4vw, 3rem);

  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 30px;

  --shadow-sm: 0 6px 18px rgba(3, 44, 42, .16);
  --shadow-md: 0 18px 44px rgba(3, 44, 42, .22);
  --shadow-lg: 0 34px 80px rgba(3, 44, 42, .30);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  background: var(--teal);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body{
  margin:0;
  font-family: var(--font-body);
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.62;
  color: var(--ink);
  background: transparent;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked{ overflow:hidden; }

img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }
button{ font:inherit; color:inherit; }
a{ color:inherit; }

::selection{ background: var(--pink); color:#fff; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:1rem; top:-4rem; z-index:200;
  background: var(--ink); color:#fff; padding:.7rem 1.1rem;
  border-radius: var(--r-sm); font-weight:600; text-decoration:none;
  transition: top .2s var(--ease);
}
.skip-link:focus{ top:1rem; }

:focus-visible{
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}

.shell{
  width:100%;
  max-width: var(--shell);
  margin-inline:auto;
  padding-inline: var(--pad);
}

/* ============================================================
   VRSTVY POZADÍ
   ============================================================ */

.backdrop{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0;
  pointer-events:none;
}
.backdrop--fx{ z-index:1; }

.grain{
  position:fixed; inset:-50%;
  z-index:2;
  pointer-events:none;
  opacity:.16;
  mix-blend-mode: overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation: grainShift 6s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)} 100%{transform:translate(0,0)}
}

.spotlight{
  position:fixed; inset:0; z-index:2;
  pointer-events:none; opacity:0;
  transition: opacity .5s var(--ease);
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
              rgba(255,255,255,.20), rgba(255,255,255,0) 65%);
  mix-blend-mode: soft-light;
}
body.has-pointer .spotlight{ opacity:1; }

.progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:60;
  background: rgba(5,48,46,.12);
}
.progress i{
  display:block; height:100%; width:0;
  background: linear-gradient(90deg, var(--pink), var(--pink-lift));
  box-shadow: 0 0 14px rgba(255,0,105,.75);
}

/* ============================================================
   HLAVIČKA
   ============================================================ */

.site-header{
  position:sticky; top:0; z-index:50;
  padding-block: clamp(.7rem, 1.6vw, 1.1rem);
  transition: background .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s var(--ease);
}
.site-header.is-stuck{
  background: rgba(0,198,195,.78);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: 0 1px 0 rgba(5,48,46,.12), 0 12px 34px rgba(3,44,42,.14);
}

.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}

.wordmark{
  display:inline-flex; align-items:center; gap:.6rem;
  text-decoration:none; color:var(--ink);
}
.wordmark__mark{
  display:grid; place-items:center;
  width:2.6rem; height:2.6rem;
  border-radius: 10px;
  background: var(--pink);
  color:#fff;
  font-family: var(--font-display);
  font-weight:900; font-size:1.45rem; line-height:1;
  box-shadow: var(--shadow-sm);
  transition: transform .5s var(--ease), border-radius .5s var(--ease);
}
.wordmark:hover .wordmark__mark{ transform: rotate(-8deg) scale(1.06); border-radius:16px; }
.wordmark__text{
  display:grid; font-family:var(--font-display);
  font-weight:800; line-height:.98; letter-spacing:-.02em;
}
.wordmark__l1{ font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; opacity:.72; font-weight:700; }
.wordmark__l2{ font-size:1.28rem; }

.nav{ display:flex; align-items:center; gap:.35rem; }
.nav a{
  position:relative;
  padding:.55rem .95rem;
  font-weight:600; font-size:.98rem;
  text-decoration:none; border-radius:999px;
  transition: color .3s var(--ease), background .3s var(--ease);
}
.nav a::after{
  content:''; position:absolute; left:.95rem; right:.95rem; bottom:.34rem;
  height:2px; background: var(--pink); border-radius:2px;
  transform: scaleX(0); transform-origin:left; transition: transform .4s var(--ease);
}
.nav a:hover::after, .nav a.is-active::after{ transform: scaleX(1); }
.nav a.is-active{ color: var(--ink); }

.nav-toggle{
  display:none;
  width:2.9rem; height:2.9rem;
  border:2px solid var(--ink); background:transparent;
  border-radius:12px; cursor:pointer;
  align-items:center; justify-content:center;
}
.nav-toggle__bars{ display:grid; gap:5px; width:20px; }
.nav-toggle__bars i{ display:block; height:2.5px; background:var(--ink); border-radius:2px; transition: transform .35s var(--ease), opacity .25s; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

/* ============================================================
   TYPOGRAFIE / SPOLEČNÉ
   ============================================================ */

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  margin:0 0 1.1rem;
  font-family: var(--font-display);
  font-size:.82rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color: var(--ink); opacity:.8;
}
.dot{
  width:.5rem; height:.5rem; border-radius:50%;
  background: var(--pink);
  box-shadow: 0 0 0 0 rgba(255,0,105,.6);
  animation: pulse 2.6s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,0,105,.55) }
  70%{ box-shadow:0 0 0 12px rgba(255,0,105,0) }
  100%{ box-shadow:0 0 0 0 rgba(255,0,105,0) }
}

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.7rem;
  font-family: var(--font-display);
  font-weight:800; font-size:1.02rem; letter-spacing:-.01em;
  text-decoration:none; border-radius:999px;
  border:2.5px solid var(--ink);
  cursor:pointer;
  transition: transform .35s var(--ease), background .35s var(--ease),
              color .35s var(--ease), box-shadow .35s var(--ease);
  will-change: transform;
}
.btn__icon{ width:1.15em; height:1.15em; fill:currentColor; }
.btn--primary{ background: var(--ink); color:var(--white); box-shadow: var(--shadow-sm); }
.btn--primary:hover{ background: var(--pink); border-color: var(--pink); box-shadow: 0 14px 34px rgba(255,0,105,.42); }
.btn--ghost{ background: transparent; color: var(--ink); }
.btn--ghost:hover{ background: var(--ink); color: var(--white); }

/* ============================================================
   HERO
   ============================================================ */

.hero{
  position:relative;
  padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(4rem, 9vw, 7rem);
}
.hero__inner{
  display:grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items:center;
}

/* velikost nadpisu se odvíjí od šířky sloupce, ne od okna,
   takže se nejdelší slovo („ŠLAPANICE“) nikdy neusekne */
.hero__copy{ container-type: inline-size; }

.hero__title{
  margin:0 0 1.6rem;
  font-family: var(--font-display);
  font-weight:900;
  font-size: clamp(2.6rem, 5.6vw, 5.8rem);   /* záloha pro starší prohlížeče */
  line-height:.88;
  letter-spacing:-.045em;
  text-transform:uppercase;
}
.hero__title .ln{ display:block; overflow:hidden; padding-bottom:.04em; }
.hero__title .ln__i{
  display:block;
  transform: translateY(105%) rotate(4deg);
  opacity:0;
  animation: lineUp 1.05s var(--ease) forwards;
  animation-delay: calc(var(--d,0) * 105ms + 120ms);
}
@keyframes lineUp{ to{ transform:none; opacity:1; } }

@supports (container-type: inline-size){
  .hero__title{ font-size: clamp(2.6rem, 15cqw, 6.8rem); }
}

.ln__i--accent{
  color: var(--white);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 6px 6px 0 rgba(255,0,105,.95);
}

.hero__lead{
  margin:0 0 2rem;
  max-width: 34ch;
  font-size: clamp(1.05rem, 1rem + .45vw, 1.3rem);
  color: var(--ink-soft);
}
.hero__lead strong{ color: var(--ink); font-weight:700; }

.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:2.6rem; }

.facts{
  display:flex; flex-wrap:wrap; gap: clamp(1.2rem, 3vw, 2.6rem);
  margin:0; padding-top:1.6rem;
  border-top:2px dashed rgba(5,48,46,.28);
}
.fact dt{
  font-size:.74rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; opacity:.7;
}
.fact dd{
  margin:.15rem 0 0;
  font-family: var(--font-display); font-weight:900;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem);
  line-height:1; letter-spacing:-.03em;
}
.fact__soon{ color: var(--pink); }

/* telefon / hlavní video */
.hero__media{ position:relative; display:flex; justify-content:center; }

.phone{
  position:relative;
  width:min(340px, 78vw);
  padding:0; border:0; background:none; cursor:pointer;
  transform-style: preserve-3d;
  transition: transform .5s var(--ease);
}
.phone__frame{
  position:relative; display:block;
  aspect-ratio: 9/16;
  border-radius: 34px;
  overflow:hidden;
  border: 7px solid var(--pink);
  background: var(--ink);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.25) inset;
}
.phone__poster{
  width:100%; height:100%; object-fit:cover;
  transition: transform .8s var(--ease), filter .5s var(--ease);
}
.phone:hover .phone__poster{ transform: scale(1.05); }
.phone__shade{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(5,48,46,0) 42%, rgba(5,48,46,.82) 100%);
}
.phone__label{
  position:absolute; left:1.15rem; right:1.15rem; bottom:1.1rem;
  display:grid; gap:.15rem; text-align:left; color:#fff;
}
.phone__eyebrow{
  font-size:.7rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color: #ffd9e7;
}
.phone__title{
  font-family: var(--font-display); font-weight:800;
  font-size:1.28rem; line-height:1.15; letter-spacing:-.02em;
}

.play{
  position:absolute; top:50%; left:50%;
  translate:-50% -50%;
  display:grid; place-items:center;
  width:3.6rem; height:3.6rem;
  border-radius:50%;
  background: rgba(255,255,255,.92);
  color: var(--pink);
  box-shadow: 0 10px 30px rgba(3,44,42,.4);
  transition: transform .45s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.play svg{ width:1.5rem; height:1.5rem; fill:currentColor; margin-left:2px; }
.play--lg{ width:5rem; height:5rem; }
.play--lg svg{ width:2rem; height:2rem; }
.play::after{
  content:''; position:absolute; inset:-6px;
  border-radius:50%; border:2px solid rgba(255,255,255,.55);
  animation: ring 2.6s var(--ease-io) infinite;
}
@keyframes ring{
  0%{ transform:scale(.85); opacity:.9 }
  70%{ transform:scale(1.45); opacity:0 }
  100%{ opacity:0 }
}
.phone:hover .play, .card__btn:hover .play{
  transform: scale(1.12); background: var(--pink); color:#fff;
}

.stamp{
  position:absolute; z-index:3;
  top:-1.6rem; right:-.6rem;
  width: clamp(96px, 13vw, 132px); aspect-ratio:1;
  display:grid; place-items:center;
  border-radius:50%;
  background: var(--ink);
  box-shadow: var(--shadow-md);
  animation: spin 22s linear infinite;
}
.stamp svg{ width:100%; height:100%; }
.stamp text{
  font-family: var(--font-display);
  font-size:8.4px; font-weight:700; letter-spacing:.2em;
  fill: var(--white); text-transform:uppercase;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.scroll-cue{
  position:absolute; left:50%; bottom:1.2rem; translate:-50% 0;
  width:26px; height:42px; border:2.5px solid var(--ink); border-radius:999px;
  display:grid; place-items:start center; padding-top:6px;
  opacity:.65; transition: opacity .3s;
}
.scroll-cue:hover{ opacity:1; }
.scroll-cue i{
  width:3.5px; height:8px; border-radius:2px; background: var(--ink);
  animation: cue 1.8s var(--ease-io) infinite;
}
@keyframes cue{
  0%{ transform:translateY(0); opacity:0 }
  30%{ opacity:1 }
  70%{ transform:translateY(15px); opacity:0 }
  100%{ opacity:0 }
}

/* ============================================================
   BĚŽÍCÍ PÁS
   ============================================================ */

.marquee{
  position:relative;
  background: var(--pink);
  color:#fff;
  padding-block:.85rem;
  overflow:hidden;
  transform: rotate(-1.3deg) scale(1.04);
  box-shadow: var(--shadow-md);
  margin-block: clamp(1rem, 3vw, 2.5rem);
}
.marquee__track{ display:flex; width:max-content; animation: slide 34s linear infinite; }
.marquee__set{
  display:inline-flex; align-items:center;
  font-family: var(--font-display); font-weight:800;
  font-size: clamp(1.15rem, 2.6vw, 1.9rem);
  letter-spacing:-.01em; text-transform:uppercase;
  white-space:nowrap; padding-right:0;
}
.marquee__set i{ font-style:normal; padding-inline:1.1rem; opacity:.7; }
@keyframes slide{ to{ transform: translateX(-50%); } }
.marquee:hover .marquee__track{ animation-play-state: paused; }

/* ============================================================
   SEKCE
   ============================================================ */

.section{ padding-block: clamp(3.5rem, 8vw, 7rem); position:relative; }

.section__head{ max-width: 52rem; margin-bottom: clamp(2.2rem, 5vw, 3.6rem); }
.section__title{
  margin:0 0 1rem;
  font-family: var(--font-display); font-weight:900;
  font-size: clamp(2.3rem, 1.6rem + 3.6vw, 4.6rem);
  line-height:.95; letter-spacing:-.038em;
}
.section__title em{
  font-style:normal; color: var(--white);
  -webkit-text-stroke: 1.6px var(--ink);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 rgba(255,0,105,.9);
}
.section__lead{ margin:0; max-width:46ch; color: var(--ink-soft); }

/* ---------- mřížka videí ---------- */

.grid{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: clamp(1.1rem, 2.4vw, 1.9rem);
}

.card__btn{
  display:grid; gap:.85rem;
  width:100%; padding:0; border:0; background:none;
  text-align:left; cursor:pointer;
  transition: transform .45s var(--ease);
  will-change: transform;
}
.card__frame{
  position:relative; display:block;
  aspect-ratio: 9/16;
  border-radius: var(--r-md);
  overflow:hidden;
  border:5px solid var(--pink);
  background: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.card__frame img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .8s var(--ease), filter .5s var(--ease);
}
.card__btn:hover .card__frame{ box-shadow: 0 22px 50px rgba(255,0,105,.36), var(--shadow-md); }
.card__btn:hover .card__frame img{ transform: scale(1.07); }

.card__shade{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(5,48,46,.42) 0%, rgba(5,48,46,0) 34%, rgba(5,48,46,0) 60%, rgba(5,48,46,.7) 100%);
}
.card__num{
  position:absolute; top:.6rem; left:.7rem;
  font-family: var(--font-display); font-weight:900;
  font-size:1.5rem; line-height:1; color:#fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
  opacity:.95;
}
.card__time{
  position:absolute; top:.7rem; right:.7rem;
  padding:.2rem .5rem;
  font-size:.72rem; font-weight:700;
  font-variant-numeric: tabular-nums;
  color:#fff; background: rgba(5,48,46,.6);
  border-radius:999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.card__title{
  font-family: var(--font-display); font-weight:800;
  font-size:1.02rem; line-height:1.22; letter-spacing:-.015em;
  color: var(--ink);
  transition: color .3s var(--ease);
}
.card__btn:hover .card__title{ color: var(--pink); }

/* ---------- připravujeme ---------- */

.section--next{ padding-bottom: clamp(4rem, 9vw, 8rem); }

.cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.2rem, 2.6vw, 2rem);
}

.card-next{
  position:relative; overflow:hidden;
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  border-radius: var(--r-lg);
  border: 3px solid var(--pink);
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: var(--shadow-sm);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease);
}
.card-next:hover{
  transform: translateY(-6px);
  background: rgba(255,255,255,.24);
  box-shadow: 0 26px 56px rgba(255,0,105,.28), var(--shadow-md);
}
.card-next__tag{
  display:inline-block; margin-bottom:1rem;
  padding:.34rem .85rem;
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background: var(--pink); border-radius:999px;
}
.card-next h3{
  margin:0 0 .6rem;
  font-family: var(--font-display); font-weight:900;
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.7rem);
  line-height:1; letter-spacing:-.035em;
}
.card-next p{ margin:0 0 1.8rem; max-width:38ch; color: var(--ink-soft); }

.card-next__bars{ display:grid; gap:.6rem; }
.card-next__bars i{
  display:block; height:9px; border-radius:999px;
  background: rgba(5,48,46,.16);
  position:relative; overflow:hidden;
}
.card-next__bars i::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, var(--pink), var(--pink-lift));
  border-radius:999px;
  transform-origin:left;
  animation: fill 3.4s var(--ease-io) infinite alternate;
}
.card-next__bars i:nth-child(1)::after{ animation-delay:0s;   scale:.72 1; }
.card-next__bars i:nth-child(2)::after{ animation-delay:.35s; scale:.5 1; }
.card-next__bars i:nth-child(3)::after{ animation-delay:.7s;  scale:.86 1; }
.card-next__bars i:nth-child(4)::after{ animation-delay:1.05s; scale:.34 1; }
@keyframes fill{ from{ opacity:.55 } to{ opacity:1 } }

.card-next__faces{ display:flex; }
.card-next__faces i{
  width:3rem; height:3rem; border-radius:50%;
  border:3px solid var(--teal);
  background: linear-gradient(145deg, var(--pink), var(--ink));
  margin-left:-.85rem;
  opacity:.85;
  animation: bob 3.6s var(--ease-io) infinite alternate;
}
.card-next__faces i:first-child{ margin-left:0; }
.card-next__faces i:nth-child(2){ animation-delay:.2s }
.card-next__faces i:nth-child(3){ animation-delay:.4s }
.card-next__faces i:nth-child(4){ animation-delay:.6s }
.card-next__faces i:nth-child(5){ animation-delay:.8s; background: rgba(5,48,46,.22); }
@keyframes bob{ from{ transform:translateY(0) } to{ transform:translateY(-7px) } }

/* ============================================================
   PATIČKA
   ============================================================ */

.site-footer{
  position:relative;
  border-top: 3px solid rgba(5,48,46,.2);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.footer-inner{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:1.4rem;
}
.footer-nav{ display:flex; flex-wrap:wrap; gap:1.2rem; }
.footer-nav a{ font-weight:600; text-decoration:none; border-bottom:2px solid transparent; transition:border-color .3s; }
.footer-nav a:hover{ border-color: var(--pink); }
.footer-note{ margin:0; display:grid; text-align:right; font-size:.9rem; }
.footer-note__dim{ opacity:.68; }

/* ============================================================
   PŘEHRÁVAČ
   ============================================================ */

.lightbox{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; }
.lightbox[hidden]{ display:none; }

.lightbox__backdrop{
  position:absolute; inset:0;
  background: rgba(3,32,31,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity:0; transition: opacity .4s var(--ease);
}
.lightbox.is-open .lightbox__backdrop{ opacity:1; }

.lightbox__panel{
  position:relative;
  display:grid; gap:1rem;
  padding: clamp(.8rem, 2vw, 1.5rem);
  width:min(100%, 1100px);
  opacity:0; transform: translateY(24px) scale(.96);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.lightbox.is-open .lightbox__panel{ opacity:1; transform:none; }

.lightbox__stage{
  display:grid; place-items:center;
  max-height: min(74vh, 900px);
}
.lightbox__video{
  max-height: min(74vh, 900px);
  max-width:100%;
  width:auto;
  border-radius: var(--r-md);
  border:5px solid var(--pink);
  background:#000;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

.lightbox__bar{ text-align:center; color:#fff; display:grid; gap:.2rem; }
.lightbox__index{
  font-size:.76rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color: #ffc0d8;
}
.lightbox__title{
  margin:0;
  font-family: var(--font-display); font-weight:800;
  font-size: clamp(1.15rem, 1rem + .9vw, 1.7rem);
  letter-spacing:-.02em;
}

.lightbox__nav, .lightbox__close{
  position:absolute;
  display:grid; place-items:center;
  border-radius:50%; cursor:pointer;
  border:2px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.1);
  color:#fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .3s var(--ease), transform .3s var(--ease), border-color .3s;
}
.lightbox__nav svg, .lightbox__close svg{
  width:1.4rem; height:1.4rem;
  fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
}
.lightbox__nav:hover, .lightbox__close:hover{
  background: var(--pink); border-color: var(--pink); transform: scale(1.08);
}
.lightbox__nav{ width:3.2rem; height:3.2rem; top:calc(50% - 3rem); }
.lightbox__nav--prev{ left: clamp(.4rem, 2vw, 1.5rem); }
.lightbox__nav--next{ right: clamp(.4rem, 2vw, 1.5rem); }
.lightbox__close{ width:2.9rem; height:2.9rem; top: clamp(.4rem, 1.6vw, 1rem); right: clamp(.4rem, 2vw, 1.5rem); }

/* ============================================================
   ODHALOVÁNÍ PŘI SCROLLU
   ============================================================ */

.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--d,0) * 90ms);
}
.reveal--rise{ transform: translateY(46px) scale(.97); }
.reveal.is-in{ opacity:1; transform:none; }
.no-js .reveal{ opacity:1; transform:none; }

/* ============================================================
   RESPONZIVITA
   ============================================================ */

@media (max-width: 980px){
  .hero__inner{ grid-template-columns:1fr; text-align:left; }
  .hero__title{ font-size: clamp(3rem, 12.5vw, 7rem); }
  .hero__media{ order:-1; }
  .hero__lead{ max-width:none; }
  .stamp{ top:-1rem; right:0; }
  .scroll-cue{ display:none; }
}

@media (max-width: 760px){
  .nav{
    position:absolute; top:calc(100% + .5rem); right: var(--pad); left: var(--pad);
    flex-direction:column; align-items:stretch; gap:.2rem;
    padding:.7rem;
    background: rgba(255,255,255,.92);
    border:2px solid var(--ink);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    opacity:0; visibility:hidden; transform: translateY(-10px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .nav.is-open{ opacity:1; visibility:visible; transform:none; }
  .nav a{ padding:.8rem 1rem; font-size:1.05rem; }
  .nav a::after{ display:none; }
  .nav-toggle{ display:inline-grid; }
  .site-header{ position:sticky; }

  .grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:1rem; }
  .card__frame{ border-width:4px; }
  .card__title{ font-size:.92rem; }
  .card__num{ font-size:1.2rem; }
  .play{ width:2.8rem; height:2.8rem; }
  .play svg{ width:1.15rem; height:1.15rem; }

  .footer-inner{ flex-direction:column; align-items:flex-start; }
  .footer-note{ text-align:left; }

  .lightbox__nav{ width:2.7rem; height:2.7rem; top:auto; bottom:.6rem; }
  .lightbox__nav--prev{ left:1.5rem; }
  .lightbox__nav--next{ right:1.5rem; }
  .lightbox__stage, .lightbox__video{ max-height:64vh; }
}

@media (max-width: 420px){
  .grid{ grid-template-columns: repeat(2, 1fr); }
  .hero__actions .btn{ width:100%; justify-content:center; }
}

/* ============================================================
   OMEZENÍ POHYBU
   ============================================================ */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__title .ln__i{ opacity:1; transform:none; }
  .grain{ display:none; }
}