/* ============================================================
   PROMĚNNÉ
   ============================================================ */
:root {
  --green:        #0D725A;
  --green-dark:   #095e49;
  --green-deeper: #063d32;
  --green-light:  #e8f4f0;
  --cream:        #FAF7F2;
  --cream-warm:   #F4EDE2;
  --beige:        #EDE0CC;
  --beige-dark:   #D4BFA0;
  --gold:         #C9A84C;
  --gold-light:   #E8D090;
  --brown:        #5C3D1E;
  --brown-dark:   #3D2010;
  --text:         #2C1810;
  --text-mid:     #5a4030;
  --text-light:   #8a6a52;
  --white:        #ffffff;

  --font-script: 'Great Vibes', cursive;
  --font-serif:  'Cormorant Garamond', Georgia, serif;
  --font-sans:   'Raleway', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius:    .5rem;
  --shadow-sm: 0 2px 12px rgba(13,114,90,.09);
  --shadow-md: 0 6px 28px rgba(13,114,90,.13);
  --trans:     .2s ease;

  /* — rustikální paleta (béžová základna, zeleň, špetka starorůžové) — */
  --bg-beige:   #F2E9DB;   /* hlavní pozadí stránky */
  --bg-soft:    #F8F2E7;   /* světlejší střídavá sekce */
  --card:       #FFFCF7;   /* karty */
  --sage:       #9DB5A4;   /* listy eukalyptu */
  --sage-deep:  #7C9B89;
  --rose:       #C4AAAD;   /* starorůžová — jen jako doplněk */
  --rose-deep:  #A3888C;
  --line:       #E2D6C3;   /* vlasové linky */
  --shadow-soft: 0 2px 10px rgba(92,61,30,.05);
  --shadow-card: 0 8px 30px rgba(92,61,30,.09);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg-beige);
  color: var(--text);
  line-height: 1.7;
  font-size: 1rem;
  font-weight: 400;
}
img  { display: block; max-width: 100%; }
a    { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }

/* ============================================================
   NAVIGACE
   ============================================================ */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 1.25rem 2rem;
  transition: background var(--trans), box-shadow var(--trans), padding var(--trans);
}
#navbar.scrolled {
  background: var(--green);
  box-shadow: 0 2px 20px rgba(0,0,0,.18);
  padding: .75rem 2rem;
}

.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  font-family: var(--font-script);
  font-size: 1.9rem;
  color: var(--white);
  line-height: 1;
}

/* Desktop links */
.nav-links {
  display: flex;
  gap: 2.5rem;
}
.nav-link {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  position: relative;
  padding-bottom: .15rem;
  transition: color var(--trans);
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--gold-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--trans);
}
.nav-link:hover::after { transform: scaleX(1); }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: .3rem;
}
.hamburger span {
  display: block;
  width: 25px; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--trans), opacity var(--trans);
}
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: url('fotka.webp');
  background-size: cover;
  /* Fotka je na výšku (3:4), pár stojí v její spodní části.
     Na širokých displejích notebooků se ořezává vršek i spodek —
     s klasickým "center" zbyla z páru jen hlava. Posunutím na 78 %
     se ořízne víc z oblohy nahoře a pár zůstane celý v záběru.
     Na mobilu (svislý displej) je tahle hodnota bez účinku:
     tam se fotka ořezává jen do stran, ne shora dolů. */
  background-position: center 78%;
  background-color: var(--green-deeper); /* fallback bez fotky */
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(4, 22, 16, .48) 0%,
    rgba(4, 22, 16, .65) 100%
  );
}
.hero-content {
  position: relative;
  z-index: 2;
  color: var(--white);
  padding: 3rem 1.5rem 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.hero-eyebrow {
  margin-bottom: 1.6rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bg-beige);
  opacity: .9;
}
.hero-name {
  font-family: var(--font-script);
  font-weight: 400;              /* Great Vibes má jen jeden řez — bez tohohle ho prohlížeč uměle ztuční */
  font-size: clamp(3.6rem, 10.5vw, 6.6rem);
  line-height: 1.1;
  color: var(--white);
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}

/* Ozdobný oddělovač — eukalyptová větvička */
.hero-sprig {
  color: rgba(255,255,255,.8);
  margin: 1.8rem 0 2rem;
}
.hero-sprig svg { width: 118px; }

.hero-date {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 3vw, 1.45rem);
  font-weight: 300;
  letter-spacing: .1em;
  margin-bottom: .85rem;
}
.hero-place {
  font-size: .8rem;
  font-weight: 300;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}

/* Odpočet */
.countdown {
  display: flex;
  align-items: flex-end;
  gap: .2rem;
  margin-top: 3.2rem;
}
.cd-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 62px;
}
.cd-num {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5.5vw, 3rem);
  font-weight: 300;
  line-height: 1;
  color: var(--white);
}
.cd-lbl {
  font-size: .6rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-top: .25rem;
}
.cd-sep {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  color: var(--bg-beige);
  opacity: .6;
  padding-bottom: .5rem;
  line-height: 1;
}
.cd-done {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--bg-beige);
}

/* Šipka dolů */
.hero-arrow {
  position: absolute;
  left: 50%;
  bottom: 2.2rem;
  z-index: 2;
  color: rgba(255,255,255,.6);
  transition: color var(--trans);
  animation: bounce 2.2s ease-in-out infinite;
}
.hero-arrow:hover { color: var(--white); }
@keyframes bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 7px); }
}

/* nižší displeje – rozestupy zase stáhnout, ať se vše vejde */
@media (max-height: 760px) {
  .hero-content   { padding: 2rem 1.5rem 4rem; }
  .hero-eyebrow   { margin-bottom: 1rem; }
  .hero-sprig     { margin: 1rem 0 1.2rem; }
  .hero-date      { margin-bottom: .5rem; }
  .countdown      { margin-top: 1.8rem; }
}

/* ============================================================
   BOTANICKÉ DEKORACE (eukalyptové větvičky)
   ============================================================ */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* větvička nad nadpisem sekce — zrcadlená dvojice */
.title-sprig {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .1rem;
  color: var(--sage);
  margin-bottom: .4rem;
}
.title-sprig svg {
  width: 104px; height: auto;
  /* měkký vržený stín — dělá z ploché kresby předmět nad papírem */
  filter: drop-shadow(.5px 1.5px 1.5px rgba(63,85,70,.26));
}
.title-sprig svg:first-child { transform: scaleX(-1); }
.title-sprig::after {
  content: '';
  position: absolute;
  bottom: .2rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rose);
  opacity: .75;
}
.title-sprig { position: relative; }

/* ============================================================
   OBJEVOVÁNÍ OBSAHU PŘI SCROLLU
   Třídu .is-in přidává script.js, jakmile prvek najede do okna.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .85s ease, transform .85s cubic-bezier(.22,.9,.3,1);
}
.reveal.is-in { opacity: 1; transform: none; }

/* karty programu nalétnou ze své strany osy */
.tl-item.reveal              { transform: translate(-30px, 16px); }
.tl-item:nth-child(even).reveal { transform: translate( 30px, 16px); }

@media (max-width: 768px) {
  .tl-item.reveal,
  .tl-item:nth-child(even).reveal { transform: translate(16px, 16px); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ============================================================
   SEKCE — ZÁKLAD
   ============================================================ */
.section {
  position: relative;
  overflow: hidden;
  padding: 6rem 0;
}
.bg-beige     { background: var(--bg-beige); }
.bg-beige-alt { background: var(--bg-soft); }

.container,
.container--narrow { position: relative; z-index: 1; }

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.container--narrow {
  max-width: 620px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.section-header + .section-header,
.section-header.mt { margin-top: 5.5rem; }

.section-pre {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rose-deep);
  margin-bottom: .3rem;
}
.section-title {
  display: inline-block;
  position: relative;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 2.9rem);
  font-weight: 500;
  color: var(--green);
  line-height: 1.2;
  padding-bottom: 1.1rem;
}
/* dvojitá vlasová linka pod nadpisem */
.section-title::before,
.section-title::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 1px;
  background: var(--line);
}
.section-title::before { bottom: .55rem; width: 118%; }
.section-title::after  { bottom: .15rem; width: 72%; }

.section-desc {
  margin-top: 1.2rem;
  font-size: .95rem;
  color: var(--text-mid);
  line-height: 1.8;
}

/* ============================================================
   ÚVODNÍ SLOVO
   ============================================================ */
#uvod .section-title {
  font-size: clamp(1.6rem, 3.8vw, 2.3rem);
  max-width: 16em;
}
/* dvouřádkový nadpis — linky pod ním držíme kratší, ať nepřetékají */
#uvod .section-title::before { width: 92%; }
#uvod .section-title::after  { width: 58%; }
.intro-text {
  text-align: center;
  color: var(--text-mid);
}
.intro-text p + p { margin-top: 1.1rem; }
/* odkaz na web Ztracené Stodoly (úvod, mapa, zápatí) */
.venue-link {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.venue-link:hover { color: var(--green-dark); }
/* v tmavě zeleném zápatí by zelená splynula s pozadím */
.footer .venue-link { color: inherit; }
.footer .venue-link:hover { opacity: .75; }
.intro-text p {
  font-size: .97rem;
  line-height: 1.85;
}
.intro-lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 3.4vw, 1.6rem) !important;
  line-height: 1.5 !important;
  color: var(--green);
  margin-bottom: 1.6rem;
}
.intro-sign {
  font-family: var(--font-script);
  font-size: 1.8rem !important;
  color: var(--rose-deep);
  margin-top: 1.8rem !important;
}

/* ============================================================
   ČASOVÁ OSA — PROGRAM
   ============================================================ */
.timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    transparent,
    var(--sage) 6%,
    var(--sage) 94%,
    transparent
  );
}

.tl-item {
  position: relative;
  width: 50%;
  padding-right: 3.5rem;
  margin-bottom: 2.5rem;
}
.tl-item:nth-child(even) {
  margin-left: auto;
  padding-right: 0;
  padding-left: 3.5rem;
}
.tl-item:last-child { margin-bottom: 0; }

.tl-dot {
  position: absolute;
  top: 2rem;
  right: -1rem;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--bg-beige);
  border: 1px solid var(--sage);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.tl-item:nth-child(even) .tl-dot { right: auto; left: -1rem; }
.tl-dot span {
  font-family: var(--font-serif);
  font-size: .8rem;
  color: var(--green);
}

.tl-card {
  position: relative;
  background: var(--card);
  padding: 2.1rem 1.6rem 1.9rem;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: transform var(--trans), box-shadow var(--trans);
}
.tl-card:hover { transform: translateY(-3px); }

/* větvička v rohu karty */
.tl-corner {
  position: absolute;
  top: -26px;
  width: 112px; height: 112px;
  color: var(--sage);
  opacity: .9;
  filter: drop-shadow(.5px 1.5px 1.5px rgba(63,85,70,.2));
  pointer-events: none;
}
.tl-item .tl-corner            { left: -18px; transform: scaleX(-1); }
.tl-item:nth-child(even) .tl-corner { left: auto; right: -18px; transform: none; }
.tl-corner svg { width: 100%; height: 100%; display: block; }

.tl-time,
.tl-heading,
.tl-text,
/* Zkratky jako DJ: patkové písmo má klesající „J“, které uprostřed
   slova ruší. Vysázíme je bezpatkovým řezem, ať sedí na řádku. */
.abbr {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: .82em;
  letter-spacing: .05em;
}

.tl-rule { position: relative; z-index: 1; }

.tl-time {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  letter-spacing: .04em;
  color: var(--rose-deep);
}
.tl-heading {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--green);
  margin: .35rem 0 .8rem;
  line-height: 1.3;
}
.tl-rule {
  width: 46px;
  height: 1px;
  border: none;
  background: var(--rose);
  margin: 0 auto .8rem;
}
.tl-text {
  font-size: .9rem;
  color: var(--text-mid);
  line-height: 1.7;
}

/* ============================================================
   DŮLEŽITÉ INFORMACE
   ============================================================ */
.notices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
}
/* věta pod kartami, že web se hodí i po svatbě */
.notices-note {
  max-width: 34rem;
  margin: 3rem auto 0;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--text-mid);
}
.notice {
  position: relative;
  background: var(--card);
  padding: 2rem 1.5rem 1.75rem;
  box-shadow: var(--shadow-soft);
  text-align: center;
  transition: transform var(--trans), box-shadow var(--trans);
}
.notice::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid var(--line);
  pointer-events: none;
}
.notice:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}
.notice > * { position: relative; z-index: 1; }
.notice-icon { color: var(--green); line-height: 0; margin-bottom: .6rem; }
.notice-icon svg { width: 2.4rem; height: 2.4rem; }
.notice h3 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--green);
  margin-bottom: .5rem;
}
.notice-rule {
  width: 34px; height: 1px;
  border: none;
  background: var(--rose);
  margin: 0 auto .7rem;
}
.notice p {
  font-size: .85rem;
  color: var(--text-mid);
  line-height: 1.7;
}

/* ============================================================
   MAPA
   ============================================================ */
.map-wrap {
  position: relative;
  background: var(--card);
  padding: 10px;
  box-shadow: var(--shadow-card);
}
.map-wrap iframe {
  display: block;
  width: 100%; height: 420px;
  border: none;
}

/* Náhradní text, když prohlížeč (typicky Safari) mapu nepustí */
/* pozor: vlastní display by přebil vestavěné [hidden], proto výjimka */
.map-fallback[hidden] { display: none; }
.map-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 2rem 1.5rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.map-fallback-text {
  max-width: 34ch;
  font-size: .85rem;
  line-height: 1.7;
  color: var(--text-mid);
  text-align: center;
}

/* ── Adresa pod mapou ──────────────────────────────── */
.map-address {
  display: block;
  margin-top: 1.6rem;
  font-style: normal;
  text-align: center;
}
.map-place {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--green-deeper);
}
.map-street {
  display: block;
  margin-top: .35rem;
  font-family: var(--font-sans);
  font-size: .88rem;
  color: var(--text-mid);
}
.map-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  margin-top: 1.2rem;
}
.map-btn {
  display: inline-block;
  padding: .62rem 1.3rem;
  border: 1px solid var(--green);
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
  transition: background var(--trans), color var(--trans);
}
.map-btn:hover { background: var(--green); color: var(--card); }

/* ── Galerie Ztracené Stodoly ─────────────────────── */
.gallery { margin-top: 4rem; }
.gallery-title {
  text-align: center;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--green-deeper);
  margin-bottom: 1.2rem;
}
.gallery-frame {
  position: relative;
  /* fotky ze stodoly mají většinou 1200 px, víc by se na ostrých
     displejích roztahovalo a rozmazalo */
  max-width: 600px;
  margin: 0 auto;
}
.gallery-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.gallery-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.gallery-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
/* fotky na výšku se neořezávají, ukážou se celé */
.gallery-slide img.is-portrait {
  object-fit: contain;
  background: var(--cream-warm);
}
.gallery-caption {
  padding: .8rem 1rem .9rem;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--text-mid);
}
/* šipky sedí svisle uprostřed fotky, ne uprostřed i s popiskem */
.gallery-nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .8rem;
  pointer-events: none;
}
.gallery-arrow {
  pointer-events: auto;
  width: 2.8rem; height: 2.8rem;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(255,252,247,.88);
  color: var(--green);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background var(--trans), color var(--trans), opacity var(--trans);
}
.gallery-arrow svg { width: 1.3rem; height: 1.3rem; }
.gallery-arrow:hover { background: var(--green); color: var(--card); }
.gallery-arrow:disabled { opacity: 0; pointer-events: none; }
.gallery-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .2rem;
  margin-top: 1rem;
}
.gallery-dot {
  width: 1.5rem; height: 1.5rem;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  cursor: pointer;
}
.gallery-dot::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 4px;
  background: var(--beige-dark);
  transition: width var(--trans), background var(--trans);
}
.gallery-dot.is-active::before { width: 20px; background: var(--green); }
.gallery-credit {
  margin-top: .5rem;
  text-align: center;
  font-size: .78rem;
  color: var(--text-light);
}

/* ============================================================
   INFORMAČNÍ BANNER
   ============================================================ */
.info-banner {
  position: relative;
  background: var(--card);
  box-shadow: var(--shadow-card);
  padding: 2.75rem 2rem 2.25rem;
  text-align: center;
}
.info-banner::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid var(--line);
  pointer-events: none;
}
.info-banner > * { position: relative; z-index: 1; }
.info-lead {
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--text-mid);
  max-width: 34rem;
  margin: 0 auto;
}
.info-lead strong { color: var(--green); font-weight: 600; }
.info-link {
  display: inline-block;
  margin-top: 1.5rem;
  padding: .75rem 1.7rem;
  border: 1px solid var(--green);
  font-family: var(--font-sans);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green);
  transition: background var(--trans), color var(--trans);
}
.info-link:hover { background: var(--green); color: var(--card); }
.info-sign {
  font-family: var(--font-script);
  font-size: 1.8rem;
  color: var(--rose-deep);
  margin-top: 1.4rem;
}

@media (max-width: 620px) {
  .info-banner { padding: 2rem 1.25rem 1.75rem; }
}

/* ============================================================
   ZÁPATÍ
   ============================================================ */
.footer {
  position: relative;
  overflow: hidden;
  background: var(--green-deeper);
  color: rgba(255,255,255,.75);
  text-align: center;
  padding: 3rem 1.5rem;
}
.footer > * { position: relative; z-index: 1; }
.footer-sprig {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .1rem;
  color: rgba(255,255,255,.45);
  margin-bottom: .6rem;
}
.footer-sprig svg { width: 70px; height: auto; }
.footer-sprig svg:first-child { transform: scaleX(-1); }
.footer-name {
  font-family: var(--font-script);
  font-size: 2.6rem;
  color: var(--white);
  margin-bottom: .4rem;
}
.footer-meta {
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bg-beige);
  opacity: .8;
}

/* ============================================================
   RESPONZIVITA
   ============================================================ */
@media (max-width: 768px) {
  .hamburger { display: flex; }

  .nav-links {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(72vw, 280px);
    background: var(--green);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    transform: translateX(100%);
    transition: transform .3s ease;
    box-shadow: -4px 0 30px rgba(0,0,0,.2);
  }
  .nav-links.open { transform: translateX(0); }

  .nav-link {
    font-size: .95rem;
    letter-spacing: .1em;
    color: var(--white);
  }

  .section { padding: 4rem 0; }

  .cd-item { min-width: 50px; }
  .cd-num  { font-size: 1.8rem; }
  .cd-sep  { font-size: 1.6rem; }

  .notices-grid { grid-template-columns: 1fr 1fr; }
  .map-wrap iframe { height: 280px; }
  .map-place  { font-size: 1.3rem; }
  .map-btn    { padding: .58rem 1rem; font-size: .68rem; }
  .gallery-arrow { width: 2.3rem; height: 2.3rem; }
  .gallery-caption { font-size: 1rem; }

  /* časová osa — jednosloupcová.
     Celou ji posuneme k levému okraji (šířka zůstává stejná),
     aby vpravo zbylo místo na větvičku v rohu karty. */
  .timeline {
    margin-left: -1.1rem;
    margin-right: 1.1rem;
  }
  .timeline::before { left: 1.05rem; }
  .tl-item,
  .tl-item:nth-child(even) {
    width: 100%;
    margin-left: 0;
    padding-left: 3.25rem;
    padding-right: 0;
  }
  .tl-dot,
  .tl-item:nth-child(even) .tl-dot { left: .05rem; right: auto; }
  .tl-item .tl-corner,
  .tl-item:nth-child(even) .tl-corner {
    left: auto; right: -14px;
    width: 78px; height: 78px;
    transform: none;
  }
  .tl-card { padding: 1.75rem 1.25rem 1.5rem; }

  .title-sprig svg { width: 70px; }
}

@media (max-width: 480px) {
  .countdown   { gap: .1rem; }
  .cd-item     { min-width: 40px; }
  .cd-num      { font-size: 1.5rem; }
  .cd-sep      { font-size: 1.3rem; padding-bottom: .35rem; }
  .notices-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ÚVODNÍ PSANÍČKO (pozvánka)
   ============================================================ */
body.env-locked { overflow: hidden; }

.envelope-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2rem 1.5rem;
  background:
    radial-gradient(circle at 50% 38%, #ffffff 0%, var(--cream-warm) 52%, var(--beige) 100%);
  transition: opacity .8s ease, visibility .8s ease;
}
.envelope-screen.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* Pozadí se rozplyne až chvíli poté, co se scéna začne zmenšovat —
   jinak by byl na okamžik vidět web i obálka zároveň. */
.envelope-screen.is-leaving {
  transition: opacity .75s ease .35s, visibility .75s ease .35s;
}

.env-stage {
  /* --ew šířka obálky, --eh její výška, --ch výška karty s videem */
  --ew: clamp(250px, 74vw, 400px);
  --eh: calc(var(--ew) * .66);
  --ch: min(calc(var(--ew) * .66), 30vh);   /* výška karty s videem (4:3) */
  perspective: 1400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  /* místo nahoře pro část karty, která vykoukne z obálky */
  padding-top: calc(var(--ch) * .82);
}

.envelope {
  position: relative;
  width: var(--ew);
  height: var(--eh);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: visible;
  /* POZOR: tady NESMÍ být transform-style: preserve-3d. V takovém
     kontextu prohlížeč nevykresluje potomky podle z-indexu, ale řadí
     je podle hloubky ve 3D — chlopeň se pak umí dostat před video
     bez ohledu na vrstvy. Chlopeň má vlastní perspektivu ve svém
     transformu, takže se pořád překlápí prostorově. */
  transform-style: flat;
  transition: transform .5s ease;
}
.envelope:hover  { transform: translateY(-6px); }
.envelope:focus-visible { outline: 2px solid var(--gold); outline-offset: 14px; border-radius: 4px; }
.envelope.is-open,
.envelope.is-open:hover { transform: translateY(7%); }

/* Zadní stěna obálky */
/* Zadní stěna je zároveň papírový vnitřek obálky — vidí se skrz
   ústí, jakmile se zvedne chlopeň a karta s videem vyjede ven. */
.env-back {
  position: absolute;
  inset: 0;
  background: linear-gradient(#EFE6CC, #E1D3AE);
  border-radius: 6px;
  box-shadow: 0 18px 50px rgba(6,61,50,.32);
  z-index: 1;
}

/* ── Karta s videem, která se vysune z obálky ────────────────
   Je na výšku (9:16), takže je vyšší než obálka. Spodní okraj
   zůstává schovaný za přední stěnou obálky (.env-front má z-index 3),
   horní část kouká ven. Před otevřením je průhledná. */
.env-letter {
  --cw: calc(var(--ch) * 4 / 3);
  position: absolute;
  left: calc(50% - var(--cw) / 2);
  /* Vysunutá karta končí přesně na horní hraně obálky — v tu chvíli
     se nikde nepřekrývají, takže se dá neviditelně prohodit vrstvení
     (do té doby je karta v obálce, potom před ní). */
  bottom: var(--eh);
  width: var(--cw);
  height: var(--ch);
  z-index: 2;
  overflow: hidden;
  /* Zaoblení odpovídá rohům, které má video samo v sobě (8,2 % šířky),
     takže se překryjí a černé rohy nikde nevykouknou. */
  border-radius: calc(var(--cw) * .078);
  background: #0b1f18;
  box-shadow: 0 10px 34px rgba(6,61,50,.34);
  transform-style: flat;          /* izoluje video od 3D scény obálky */
  /* Na začátku je karta celá zasunutá v obálce — schovaná za její
     přední stěnou. Není průhledná: jakmile se zvedne chlopeň, je
     v ústí vidět rovnou video, ne papír. */
  transform: translateY(100%);
  transition: transform 1.1s cubic-bezier(.22,.9,.3,1) .5s;
}
.envelope.is-open .env-letter { transform: translateY(0); }

/* ── Vytažení karty z obálky ─────────────────────────────────
   Karta vyroste zhruba na dvojnásobek obálky a vyjede nahoru,
   obálka se přitom posune dolů. Přesné hodnoty dopočítá script.js,
   protože závisí na velikosti okna. */
.env-letter.is-full {
  /* Vrstvení se během vyjíždění nemění (karta zůstává na z-indexu 2,
     tedy za přední stěnou obálky) — jinak by video v půlce animace
     přeskočilo z „za obálkou“ na „před obálkou“ a probliklo by to. */
  transform-origin: bottom center;   /* roste vzhůru, spodek zůstává v obálce */
  transition:
    transform 1.2s cubic-bezier(.45,0,.2,1),
    box-shadow 1.2s ease,
    opacity .55s ease;
  box-shadow: 0 22px 60px rgba(6,61,50,.4);
}
/* Obálka přitom klesne a nechá kartě prostor.
   Konkrétní posun nastavuje script.js, tady je jen jeho průběh. */
.envelope-screen.is-full .envelope,
.envelope-screen.is-full .envelope:hover {
  transition: transform 1.2s cubic-bezier(.45,0,.2,1);
}
.envelope-screen.is-full .env-hint,
.envelope-screen.is-full .env-title {
  animation: none;
  opacity: 0;
  transition: opacity .6s ease;
}

/* ── Poslední fáze: přes celou obrazovku a prolnutí do webu ── */
.envelope-screen.is-cela .env-letter {
  /* Karta jde dopředu až s malým zpožděním — do té doby stihne
     obálka vyblednout, takže ani tady nic neproblikne. */
  z-index: 60;
  border-radius: 0;   /* přes celou obrazovku bez zaoblení */
  box-shadow: none;
  transition:
    transform 1s cubic-bezier(.45,0,.2,1),
    border-radius 1s ease,
    box-shadow 1s ease,
    opacity .8s ease,
    z-index 0s linear .18s;
}
.envelope-screen.is-cela .env-back,
.envelope-screen.is-cela .env-front,
.envelope-screen.is-cela .env-flap,
.envelope-screen.is-cela .env-flap-in,
.envelope-screen.is-cela .env-seal,
.envelope-screen.is-cela .env-controls,
.envelope-screen.is-cela .env-pause { opacity: 0; transition: opacity .18s ease; }

/* přes celou obrazovku už scéna neodjíždí — karta se jen rozplyne */
.envelope-screen.is-cela.is-leaving .env-stage { transform: none; opacity: 1; }
.envelope-screen.is-cela.is-leaving .env-letter { opacity: 0; }
.envelope-screen.is-cela { transition: opacity .8s ease .15s, visibility .8s ease .15s; }

/* ── Barvy obálky ──────────────────────────────────────────────
   Zavřená je zelená. Jakmile se otevře, plocha pod vytaženou kartou
   se překlopí do papírové — vypadá to, jako bychom viděli dovnitř. */
.env-front .env-c3 { stop-color: #095a48; }
.env-front .env-c4 { stop-color: #0d7259; }
.env-front .env-c5 { stop-color: #138a6d; }
.env-front .env-c6 { stop-color: #0c6c56; }
.env-front .env-lines { stroke: #E8D090; }
.env-front stop,
.env-front .env-lines { transition: stop-color .9s ease, stroke .9s ease; }

/* Klik na video ho zastaví — tohle je ta značka, která se pak ukáže. */
.env-pause {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 2;
}
.env-letter.is-paused .env-pause { opacity: 1; }
.env-pause span {
  width: 4.4rem; height: 4.4rem;
  border-radius: 50%;
  background: rgba(255,255,255,.86);
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--green);
  padding-left: .28rem;
}
.env-letter.has-video { cursor: pointer; }

.env-photo,
.env-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.env-video { opacity: 0; transition: opacity .4s ease; }
.env-letter.has-video .env-video { opacity: 1; }

/* Fotka se pomalu přibližuje, aby to nebyl mrtvý obrázek,
   dokud není video hotové. */
.env-letter.no-video .env-photo {
  animation: env-kenburns 9s ease-out forwards;
}
@keyframes env-kenburns {
  from { transform: scale(1)    translate(0, 0); }
  to   { transform: scale(1.14) translate(-2%, -2%); }
}

/* Jména přes fotku — jen dokud tam není video. */
.env-cap {
  position: absolute;
  left: 0; right: 0; top: 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: 0 1rem;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
  opacity: 0;
  transition: opacity .6s ease 1.1s;
}
.envelope.is-open .env-letter.no-video .env-cap { opacity: 1; }
.env-cap-pre {
  font-family: var(--font-sans);
  font-size: .52rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .85;
}
.env-cap-name {
  font-family: var(--font-script);
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  line-height: 1.1;
}
.env-cap-date {
  font-family: var(--font-serif);
  font-size: .9rem;
  letter-spacing: .12em;
  opacity: .9;
}

/* ── Vzhled staré kamery přes video ──────────────────────────
   Všechno je jen kosmetika navrch: vrstva je průchozí pro myš,
   takže klik na video ho pořád zastaví. Do přehrávání nic nesahá. */
.env-film {
  position: absolute;
  inset: 0;
  z-index: 3;            /* nad videem, pod značkou pauzy (ta má 2 → viz níž) */
  pointer-events: none;  /* klíčové: klik projde na video */
  overflow: hidden;
  border-radius: inherit;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: clamp(.5rem, 1.7cqw, .72rem);
  letter-spacing: .08em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.75);
}
/* Aby písmo lišty rostlo s kartou, ne s velikostí okna. */
.env-letter { container-type: inline-size; }

/* teplý nádech starého filmu */
.film-tint {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,196,120,.13), rgba(120,80,40,.16));
  mix-blend-mode: soft-light;
}

/* zrno — jemný šum, který poskakuje po krocích jako u filmu */
.film-grain {
  position: absolute;
  inset: -30%;
  opacity: .3;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation: filmGrain .5s steps(1) infinite;
}
@keyframes filmGrain {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-4%, 3%); }
  40%  { transform: translate(3%, -5%); }
  60%  { transform: translate(-6%, -2%); }
  80%  { transform: translate(5%, 4%); }
  100% { transform: translate(0,0); }
}

/* svislé škrábance na filmu + pomalé kolísání jasu */
.film-scratch {
  position: absolute;
  inset: 0;
  opacity: .28;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(255,255,255,.55) 12% 12.25%, transparent 12.25% 100%),
    linear-gradient(90deg, transparent 0 47%, rgba(255,255,255,.4)  47% 47.2%,  transparent 47.2% 100%),
    linear-gradient(90deg, transparent 0 78%, rgba(0,0,0,.4)        78% 78.3%,  transparent 78.3% 100%);
  animation: filmScratch 3.1s steps(3) infinite, filmFlicker 2.4s ease-in-out infinite;
}
@keyframes filmScratch {
  0%   { transform: translateX(0);     }
  33%  { transform: translateX(-14%);  }
  66%  { transform: translateX(9%);    }
  100% { transform: translateX(0);     }
}
/* mírné blikání jasu — jako když projektoru kolísá lampa */
@keyframes filmFlicker {
  0%, 100% { opacity: .28; }
  45%      { opacity: .14; }
  70%      { opacity: .34; }
}

/* ztmavené rohy */
.film-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 50%,
              transparent 42%, rgba(0,0,0,.28) 78%, rgba(0,0,0,.55) 100%);
}

/* Rohové značky hledáčku. Sedí hlouběji v obraze než nápisy,
   aby se s nimi REC ani datum nikde nepotkaly. */
.film-corners i {
  position: absolute;
  width: 6.5%; height: 5%;
  border: 1.5px solid rgba(255,255,255,.62);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
}
.film-corners i:nth-child(1) { top: 9%;    left: 7%;  border-right: 0; border-bottom: 0; }
.film-corners i:nth-child(2) { top: 9%;    right: 7%; border-left: 0;  border-bottom: 0; }
.film-corners i:nth-child(3) { bottom: 9%; left: 7%;  border-right: 0; border-top: 0; }
.film-corners i:nth-child(4) { bottom: 9%; right: 7%; border-left: 0;  border-top: 0; }

/* Nápisy kamery drží u okrajů, vně rámečku ze značek. */
.film-top,
.film-bottom {
  position: absolute;
  left: 3.5%; right: 3.5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.film-top    { top: 3.2%; }
.film-bottom { bottom: 3.2%; }

.film-rec {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-weight: 700;
}
.film-rec i {
  width: .8em; height: .8em;
  border-radius: 50%;
  background: #ff2f2f;
  box-shadow: 0 0 .55em rgba(255,47,47,.9);
  animation: filmRec 1.1s steps(1) infinite;
}
@keyframes filmRec { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .12; } }

.film-time { font-variant-numeric: tabular-nums; }
.film-mode {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-weight: 700;
}
.film-date { letter-spacing: .18em; }

/* baterie — obdélníček s kontaktem a zbývajícím nábojem */
.film-batt {
  position: relative;
  display: inline-block;
  width: 2.1em; height: 1em;
  border: 1.5px solid rgba(255,255,255,.85);
  border-radius: 2px;
}
.film-batt::before {   /* kontakt vpravo */
  content: '';
  position: absolute;
  top: 25%; right: -.34em;
  width: .26em; height: 50%;
  background: rgba(255,255,255,.85);
}
.film-batt::after {    /* zbývající náboj */
  content: '';
  position: absolute;
  inset: .16em;
  width: 55%;
  background: rgba(255,255,255,.85);
}

/* Značka pauzy musí zůstat nad kamerovou vrstvou. */
.env-pause { z-index: 4; }

/* V poslední fázi, kdy se karta roztáhne přes obrazovku a prolne
   do webu, kamerové prvky zhasnou spolu s obálkou. */
.envelope-screen.is-cela .env-film { opacity: 0; transition: opacity .18s ease; }

/* Přední strana obálky (SVG) */
#uvod,
#informace,
#program { scroll-margin-top: 90px; }

.env-front {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 3;
}

/* Horní chlopeň (SVG) */
/* Chlopeň má dvě strany: zvenku zelenou, zevnitř papírovou.
   Obě se otáčejí úplně stejně a leží na sobě; papírová je zavřená
   průhledná a při otevření se prolne navrch. Žádné 3D triky —
   funguje to spolehlivě ve všech prohlížečích. */
.env-flap,
.env-flap-in {
  position: absolute;
  left: 0; top: 0;
  display: block;
  width: 100%;
  height: calc(var(--eh) * .60);
  transform-origin: top center;
  transform: perspective(900px) rotateX(0deg);
  transition: transform .8s cubic-bezier(.6,.05,.3,1);
}

/* Každá strana chlopně má svou vrstvu natrvalo — nic se za běhu
   nepřehazuje. Zelený líc je nad obálkou (aby zavřenou obálku
   uzavíral), papírový rub je pod kartou s videem (aby přes ni nikdy
   nepřekryl). Prostřídají se pouhým prolnutím ve chvíli, kdy je
   chlopeň postavená na hranu, takže si toho nikdo nevšimne. */
.env-flap    { z-index: 5; opacity: 1; }
.env-flap-in { z-index: 0; opacity: 0; }

.envelope.is-open .env-flap,
.envelope.is-open .env-flap-in { transform: perspective(900px) rotateX(180deg); }
/* Prolnutí líce a rubu řídí script.js — zelený líc se navíc úplně
   odstraní ze scény, aby se nemohl objevit před videem. */
.env-flap,
.env-flap-in { transition: transform .8s cubic-bezier(.6,.05,.3,1), opacity .16s linear; }

/* Vosková pečeť */
.env-seal {
  position: absolute;
  left: 50%;
  top: calc(var(--eh) * .60);
  width: clamp(76px, 23vw, 106px);
  height: clamp(76px, 23vw, 106px);
  transform: translate(-50%, -50%);
  z-index: 6;
  filter: drop-shadow(0 7px 12px rgba(6,61,50,.45));
  transition: transform .5s ease, opacity .45s ease;
}
.env-seal svg { display: block; width: 100%; height: 100%; }
.envelope.is-open .env-seal {
  transform: translate(-50%, -50%) scale(.35) rotate(-28deg);
  opacity: 0;
}

/* Jména pod obálkou — stejná úprava jako na náhledovém obrázku. */
.env-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity .5s ease;
}
.env-title-sprig {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .1rem;
  color: var(--sage);
  margin-bottom: .45rem;
}
.env-title-sprig svg {
  width: 104px; height: auto;
  filter: drop-shadow(.5px 1.5px 1.5px rgba(63,85,70,.26));
}
.env-title-sprig svg:first-child { transform: scaleX(-1); }
.env-name {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.2rem, 7vw, 3.1rem);
  line-height: 1.1;
  color: var(--green);
  margin-bottom: .7rem;
}

.env-hint {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-style: italic;
  letter-spacing: .02em;
  line-height: 1.5;
  max-width: 24rem;
  text-align: center;
  color: var(--text-mid);
  animation: envPulse 2.4s ease-in-out infinite;
  transition: opacity .4s ease;
}
/* animation musí zhasnout taky — jinak by přebila opacity: 0 */
.envelope-screen.is-opening .env-hint { animation: none; opacity: 0; }
.envelope-screen.is-opening .env-title { opacity: 0; }

/* Odchod: obálka i s kartou klesne, zmenší se a vybledne. */
.env-stage {
  transition: transform 1.1s cubic-bezier(.4,0,.35,1), opacity .9s ease .15s;
}
.envelope-screen.is-leaving .env-stage {
  transform: translateY(16vh) scale(.55);
  opacity: 0;
}

/* Přeskočit / zvuk */
.env-controls {
  position: absolute;
  left: 0; right: 0;
  bottom: 1.6rem;
  display: flex;
  justify-content: center;
  gap: .6rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
.envelope-screen.is-playing .env-controls { opacity: 1; pointer-events: auto; }
.envelope-screen.is-leaving  .env-controls { opacity: 0; pointer-events: none; }
.env-skip,
.env-sound {
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(255,255,255,.75);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .55rem 1.2rem;
  cursor: pointer;
  transition: background var(--trans), color var(--trans);
}
.env-skip:hover,
.env-sound:hover { background: var(--green); color: #fff; border-color: var(--green); }

/* ── Poděkování po svatbě (místo obálky) ─────────────── */
.env-thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 30rem;
  text-align: center;
  transition: transform .75s ease, opacity .6s ease;
}
.env-thanks[hidden] { display: none; }
.env-thanks-text {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--text-mid);
}
.env-enter {
  margin-top: 1.8rem;
  padding: .8rem 1.8rem;
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--green);
  border: 1px solid var(--green);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--trans);
}
.env-enter:hover { background: var(--green-dark); border-color: var(--green-dark); }
.envelope-screen.is-leaving .env-thanks { transform: translateY(3vh); opacity: 0; }
@keyframes envPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

@media (max-width: 480px) {
  .env-stage { gap: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .envelope, .env-letter, .env-flap, .env-seal, .env-cap,
  .env-stage, .envelope-screen { transition-duration: .01ms !important; }
  .env-letter.no-video .env-photo { animation: none; }
  .env-hint { animation: none; opacity: .8; }
  /* kamerový efekt: nechat obraz, ale bez pohybu a blikání */
  .film-grain, .film-scratch, .film-rec i { animation: none; }
}