/* ============================================================
   2x50 = 100  ·  Michal & Hanka  ·  18. 9. 2027
   Paleta a typografie laděné do sedmdesátých let.
   ============================================================ */

:root{
  --cream:    #F5E6C8;
  --cream-2:  #EBD5AC;
  --brown:    #2A1B10;
  --brown-2:  #46301C;
  --burnt:    #C4551F;
  --gold:     #E5A32B;
  --avocado:  #7A8B3C;
  --teal:     #2C7A73;
  --rust:     #8E2F14;
  --pink:     #D97A6C;
  --ink:      #35220F;

  --shadow: 0 10px 0 rgba(42,27,16,.18);
  --radius: 22px;
  --rsvp-h: 76px;

  --font-display: 'Righteous', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

html,body{ height:100%; }

body{
  margin:0;
  font-family:var(--font-body);
  background:var(--brown);
  color:var(--ink);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-menu{ overflow:auto; background:var(--cream); }

button{ font-family:inherit; }

/* ---------- obrazovky ---------- */
.screen{
  position:fixed; inset:0;
  display:none;
  overflow:hidden;
}
.screen.is-active{ display:block; }

/* ---------- paprsky (70s sunburst) ---------- */
.rays{
  position:absolute; inset:-30%;
  background:repeating-conic-gradient(from 0deg at 50% 45%,
    rgba(229,163,43,.16) 0deg 7deg,
    rgba(0,0,0,0) 7deg 14deg);
  animation:spin 90s linear infinite;
  pointer-events:none;
}
.rays--dim{ opacity:.5; }
.rays--light{
  position:fixed;
  background:repeating-conic-gradient(from 0deg at 50% 0%,
    rgba(196,85,31,.10) 0deg 6deg,
    rgba(0,0,0,0) 6deg 12deg);
  animation-duration:140s;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  .rays{ animation:none; }
}

/* ============================================================
   ÚVODNÍ OBRAZOVKA
   ============================================================ */
.gate{
  background:
    radial-gradient(circle at 50% 38%, #5A3A1E 0%, var(--brown) 62%);
}
.gate-inner{
  position:relative; z-index:2;
  height:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; padding:24px;
}
.gate-kicker{
  font-size:clamp(.8rem,2.6vw,1rem);
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); margin:0 0 18px; font-weight:600;
}
.gate-logo{
  font-family:var(--font-display);
  display:flex; flex-direction:column; align-items:center;
  line-height:.86; margin-bottom:6px;
}
.gate-sum{
  font-size:clamp(1.6rem,6vw,2.8rem);
  color:var(--cream);
  letter-spacing:.06em;
  margin-bottom:.12em;
}
.gate-hundred{
  font-size:clamp(6rem,28vw,16rem);
  color:var(--gold);
  text-shadow:
    4px 4px 0 var(--burnt),
    8px 8px 0 var(--rust);
}
.gate-date{
  font-size:clamp(.95rem,3.2vw,1.2rem);
  color:var(--cream-2); margin:14px 0 34px; font-weight:600;
}
.btn-start{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-display);
  font-size:clamp(1.05rem,3.6vw,1.4rem);
  color:var(--brown); background:var(--gold);
  border:none; border-radius:999px;
  padding:16px 38px; cursor:pointer;
  box-shadow:0 6px 0 var(--rust);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn-start:hover{ transform:translateY(-2px); box-shadow:0 8px 0 var(--rust); }
.btn-start:active{ transform:translateY(4px); box-shadow:0 2px 0 var(--rust); }
.btn-start-ico{ font-size:.8em; }
.gate-note{
  margin:20px 0 0; font-size:.85rem;
  color:rgba(245,230,200,.55);
}

/* ============================================================
   INTRO
   ============================================================ */
.intro{ background:radial-gradient(circle at 50% 45%, #4A2F17 0%, var(--brown) 70%); }

.number-field{ position:absolute; inset:0; z-index:1; }

.big-number{
  position:absolute;
  font-family:var(--font-display);
  font-size:clamp(6rem,22vw,17rem);
  line-height:1;
  transform:translate(-50%,-50%) scale(.55) rotate(var(--rot,0deg));
  opacity:0;
  will-change:transform,opacity;
  transition:opacity .45s ease, transform .55s cubic-bezier(.2,.9,.3,1.2);
  pointer-events:none;
  user-select:none;
}
.big-number.is-in{
  opacity:.92;
  transform:translate(-50%,-50%) scale(1) rotate(var(--rot,0deg));
}
.big-number.is-out{
  opacity:0;
  transform:translate(-50%,-50%) scale(1.45) rotate(var(--rot,0deg));
}

/* ---------- obličeje ---------- */
.faces{
  position:absolute; z-index:3;
  left:50%; top:45%;
  transform:translate(-50%,-50%);
  display:flex; gap:clamp(14px,5vw,54px);
  align-items:center;
}
.face{ margin:0; text-align:center; }
.face-ring{
  width:clamp(112px,26vw,210px);
  aspect-ratio:1;
  border-radius:50%;
  padding:7px;
  background:conic-gradient(var(--gold),var(--burnt),var(--avocado),var(--teal),var(--gold));
  box-shadow:0 0 0 6px rgba(42,27,16,.55), 0 14px 34px rgba(0,0,0,.45);
}
.face-stack{
  position:relative;
  width:100%; height:100%;
  border-radius:50%;
  overflow:hidden;
  background:var(--cream-2);
}
.face-stack img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .9s ease;
}
.face-stack img.is-on{ opacity:1; }
.face figcaption{
  margin-top:12px;
  font-family:var(--font-display);
  font-size:clamp(.9rem,3vw,1.2rem);
  color:var(--cream);
  letter-spacing:.06em;
}

/* ---------- spodní lišta intra ---------- */
.intro-bar{
  position:absolute; z-index:4;
  left:0; right:0; bottom:0;
  padding:16px 20px calc(16px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:16px;
}
.progress{
  flex:1; height:6px; border-radius:99px;
  background:rgba(245,230,200,.16); overflow:hidden;
}
.progress-fill{
  height:100%; width:0;
  background:linear-gradient(90deg,var(--gold),var(--burnt));
  border-radius:99px;
}
.btn-skip{
  background:none; border:1.5px solid rgba(245,230,200,.35);
  color:rgba(245,230,200,.8);
  border-radius:999px; padding:8px 18px;
  font-size:.82rem; cursor:pointer; white-space:nowrap;
  transition:.15s;
}
.btn-skip:hover{ border-color:var(--gold); color:var(--gold); }

/* ============================================================
   MENU
   ============================================================ */
.menu{
  position:static;
  display:none;
  background:var(--cream);
  min-height:100%;
  padding:0 20px calc(28px + var(--rsvp-h));
}
.menu.is-active{ display:block; }

.menu-head{
  position:relative; z-index:2;
  max-width:900px; margin:0 auto;
  text-align:center;
  padding:clamp(34px,7vw,64px) 0 clamp(24px,4vw,38px);
}
.menu-logo{
  display:inline-flex; align-items:baseline; gap:.3em;
  font-family:var(--font-display);
  color:var(--burnt);
  margin-bottom:10px;
}
.menu-logo span{ font-size:clamp(1rem,3vw,1.3rem); }
.menu-logo strong{
  font-size:clamp(2.6rem,9vw,4.4rem); font-weight:400;
  color:var(--gold);
  text-shadow:3px 3px 0 var(--burnt);
}
.menu-head h1{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.35rem,5vw,2.3rem);
  color:var(--brown-2); margin:.2em 0 .35em;
  line-height:1.2;
}
.menu-sub{
  font-size:clamp(.92rem,2.8vw,1.08rem);
  color:var(--rust); font-weight:600; margin:0;
}
.countdown{
  margin:14px 0 0; font-size:.86rem;
  color:rgba(53,34,15,.55); letter-spacing:.04em;
}

/* ---------- mřížka ikon ---------- */
.grid{
  position:relative; z-index:2;
  max-width:900px; margin:0 auto;
  display:grid; gap:clamp(12px,2.4vw,20px);
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:640px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:360px){ .grid{ grid-template-columns:1fr; } }

.tile{
  position:relative;
  border:none; cursor:pointer;
  border-radius:var(--radius);
  padding:clamp(16px,3vw,24px) 14px clamp(14px,2.4vw,20px);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-align:center;
  background:var(--tile,#fff);
  box-shadow:var(--shadow);
  transition:transform .16s ease, box-shadow .16s ease;
  overflow:hidden;
}
.tile::after{
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,.14); opacity:0; transition:opacity .16s;
}
.tile:hover{ transform:translateY(-5px); box-shadow:0 15px 0 rgba(42,27,16,.18); }
.tile:hover::after{ opacity:1; }
.tile:active{ transform:translateY(1px); box-shadow:0 6px 0 rgba(42,27,16,.18); }

.tile-art{ width:clamp(66px,15vw,94px); aspect-ratio:1; }
.tile-art svg{ width:100%; height:100%; display:block; }
.tile-label{
  font-family:var(--font-display);
  font-size:clamp(.92rem,2.6vw,1.12rem);
  color:var(--cream); line-height:1.2;
  text-shadow:1px 1px 0 rgba(42,27,16,.35);
}
.tile-hint{
  font-size:clamp(.68rem,2vw,.78rem);
  color:rgba(255,255,255,.82); line-height:1.35;
}

.menu-foot{
  position:relative; z-index:2;
  text-align:center; padding:30px 0 6px;
}
.btn-ghost{
  background:none; border:1.5px solid rgba(53,34,15,.25);
  color:rgba(53,34,15,.6);
  border-radius:999px; padding:10px 22px;
  font-size:.84rem; cursor:pointer; transition:.15s;
}
.btn-ghost:hover{ border-color:var(--burnt); color:var(--burnt); }

/* ============================================================
   MODAL
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:60; display:none; }
.modal.is-open{ display:block; }
.modal-backdrop{
  position:absolute; inset:0;
  background:rgba(42,27,16,.72);
  backdrop-filter:blur(3px);
  animation:fadeIn .18s ease;
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

.modal-card{
  position:absolute;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(560px,calc(100vw - 32px));
  max-height:min(86vh,760px);
  overflow:auto;
  background:var(--cream);
  border-radius:26px;
  box-shadow:0 26px 60px rgba(0,0,0,.5);
  animation:pop .24s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes pop{
  from{ opacity:0; transform:translate(-50%,-46%) scale(.94); }
  to{ opacity:1; transform:translate(-50%,-50%) scale(1); }
}
.modal-close{
  position:absolute; right:12px; top:12px; z-index:3;
  width:38px; height:38px; border-radius:50%;
  border:none; cursor:pointer;
  background:rgba(42,27,16,.5); color:var(--cream);
  font-size:1.4rem; line-height:1;
}
.modal-close:hover{ background:var(--rust); }

.modal-art{
  background:var(--art-bg,var(--gold));
  padding:26px 20px 20px;
  display:flex; justify-content:center;
}
.modal-art svg{ width:min(240px,60%); height:auto; display:block; }

.modal-body{ padding:22px clamp(20px,5vw,32px) 30px; }
.modal-eyebrow{
  margin:0 0 6px;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--rust); font-weight:700;
}
.modal-body h2{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.5rem,5.5vw,2rem);
  margin:0 0 14px; color:var(--brown-2); line-height:1.15;
}
.modal-body p{ margin:0 0 12px; line-height:1.6; color:var(--ink); }
.modal-body p.lead{ font-size:1.06rem; font-weight:600; }
.modal-body a{ color:var(--burnt); font-weight:600; }
.modal-body ul{ margin:0 0 12px; padding-left:20px; line-height:1.7; }

.formula{
  font-family:var(--font-display);
  font-size:clamp(1.3rem,5vw,1.9rem);
  color:var(--teal); text-align:center;
  margin:6px 0 16px; letter-spacing:.02em;
}
.formula sub{ font-size:.6em; }

.venue-photo{
  width:100%; border-radius:14px; margin:4px 0 14px; display:block;
}

/* ============================================================
   RSVP LIŠTA
   ============================================================ */
.rsvp{
  position:fixed; z-index:70;
  left:0; right:0; bottom:0;
  display:none;
  align-items:center; justify-content:center;
  flex-wrap:wrap; gap:4px 10px;
  min-height:var(--rsvp-h);
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:repeating-linear-gradient(45deg,
    var(--burnt) 0 22px, var(--rust) 22px 44px);
  text-align:center;
  box-shadow:0 -6px 22px rgba(42,27,16,.3);
}
.rsvp.is-on{ display:flex; }
.rsvp-text{
  color:var(--cream); font-weight:600;
  font-size:clamp(.85rem,2.6vw,1rem);
}
/* E-mail musí být na pruhované liště vidět na první pohled — proto
   světlá výplň s tmavým rámem, ne zlatá, která se do oranžové ztrácela. */
.rsvp-mail{
  font-family:var(--font-display);
  font-size:clamp(1rem,3.2vw,1.25rem);
  color:var(--brown);
  background:#FFF8E7;
  padding:9px 22px;
  border:3px solid var(--brown);
  border-radius:999px;
  text-decoration:none; white-space:nowrap;
  box-shadow:0 4px 0 var(--brown), 0 0 0 4px rgba(255,248,231,.35);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.rsvp-mail:hover{
  background:var(--gold);
  transform:translateY(-2px);
  box-shadow:0 6px 0 var(--brown), 0 0 0 4px rgba(255,248,231,.5);
}
.rsvp-mail:active{
  transform:translateY(2px);
  box-shadow:0 2px 0 var(--brown), 0 0 0 4px rgba(255,248,231,.35);
}

@media (max-width:560px){
  :root{ --rsvp-h:112px; }
  .rsvp{ flex-direction:column; gap:8px; padding-top:14px; }
}

/* skryté prvky zůstávají skryté i uvnitř flexu */
[hidden]{ display:none !important; }