/* ===== Vzduch jako hedvábí · CZ verze ===== */
:root{
  --black:#06080c;
  --black-2:#0b0f16;
  --paper:#e9eef4;
  --dim:#8794a3;
  --ice:#9fd8f2;
  --line:#1a2230;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--black);color:var(--paper);
  font-family:"Albert Sans",system-ui,sans-serif;
  font-size:17px;line-height:1.6;overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
h1,h2{font-family:"Cormorant Garamond",serif;font-weight:500;line-height:1.1;text-wrap:balance}
.btn{
  display:inline-block;border:1px solid var(--ice);color:var(--ice);
  background:transparent;font-family:"Albert Sans",sans-serif;font-weight:600;font-size:.85rem;
  letter-spacing:.08em;text-transform:uppercase;
  padding:.95rem 1.9rem;border-radius:999px;text-decoration:none;cursor:pointer;
  transition:background .3s,color .3s;
}
.btn:hover{background:var(--ice);color:var(--black)}
.btn.ghost{border-color:var(--line);color:var(--dim)}
.btn.ghost:hover{border-color:var(--ice);color:var(--ice);background:transparent}
.btn.wide{width:100%}

/* ===== cinema ===== */
.cinema{position:relative;height:100vh;height:100svh;overflow:hidden;background:var(--black)}
.cinema video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--black)}
.cinema-veil{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.1rem;padding:0 6vw;text-align:center;
  background:radial-gradient(ellipse at center, rgba(6,8,12,.55), rgba(6,8,12,.92));
  transition:opacity .8s ease;z-index:3;
}
.cinema-veil.off{opacity:0;pointer-events:none}
.veil-kicker{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
.veil-title{font-size:clamp(2.3rem,7vw,5rem);font-style:italic;margin-bottom:1.4rem}
.veil-play{
  border:1px solid var(--ice);color:var(--ice);background:transparent;
  font-family:"Albert Sans",sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.95rem 1.9rem;border-radius:999px;cursor:pointer;transition:background .3s,color .3s;
}
.veil-play:hover{background:var(--ice);color:var(--black)}
.veil-play.ghost{border-color:var(--line);color:var(--dim)}
.cinema-claim{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.4rem;padding:0 6vw;text-align:center;
  background:rgba(6,8,12,.55);opacity:0;pointer-events:none;transition:opacity 1.8s ease;z-index:2;
}
.cinema-claim.on{opacity:1;pointer-events:auto}
.claim-line{font-family:"Cormorant Garamond",serif;font-size:clamp(1.6rem,4.6vw,3.4rem);font-style:italic;line-height:1.24}
.claim-product{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);margin:1.2rem 0 2rem}
.claim-actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.sound-toggle{
  position:absolute;right:1.4rem;bottom:1.4rem;z-index:4;
  background:rgba(11,15,22,.7);border:1px solid var(--line);color:var(--paper);
  width:3rem;height:3rem;border-radius:50%;cursor:pointer;font-size:1.1rem;
}
.scroll-cue{
  position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);z-index:2;
  font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

/* ===== chapters (desktop: media na pozadí, text přes něj) ===== */
.chapter{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ch-video,.ch-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.ch-copy{position:relative;z-index:1;max-width:640px;padding:0 7vw;text-align:left}
.ch-copy.center{text-align:center}
.ch-num{font-family:"Cormorant Garamond",serif;font-size:1.05rem;color:var(--ice);letter-spacing:.4em;margin-bottom:1rem;opacity:.9}
.chapter h2{font-size:clamp(2.2rem,6vw,4.4rem);font-style:italic;margin-bottom:1.4rem}
.ch-line{font-size:clamp(1rem,1.8vw,1.3rem);color:var(--paper)}
.ch-line em{color:var(--ice);font-style:italic}
.big-figure{
  font-family:"Cormorant Garamond",serif;font-weight:400;
  font-size:clamp(4.4rem,16vw,12rem);line-height:1;color:var(--ice);
  margin:.5rem 0 1rem;
}
.ch-feel .ch-copy{background:linear-gradient(180deg,rgba(6,8,12,.2),rgba(6,8,12,.66));border-radius:16px;padding:2.4rem}
.ch-silence{background:radial-gradient(ellipse at 50% 40%, #0d1420 0%, var(--black) 70%)}
.ch-save{background:var(--black)}
.ch-winter .ch-copy{background:linear-gradient(180deg,rgba(6,8,12,.25),rgba(6,8,12,.7));border-radius:16px;padding:2.4rem}

/* ===== finale ===== */
.finale{padding:16vh 7vw;background:var(--black-2)}
.finale-inner{max-width:560px;margin:0 auto;text-align:center}
.finale-title{font-size:clamp(1.9rem,4.6vw,3.2rem);font-style:italic;margin-bottom:3rem}
.offer-cards{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-bottom:2.6rem}
.ocard{border:1px solid var(--line);border-radius:14px;padding:1.6rem}
.ocard-name{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.ocard-price{font-family:"Cormorant Garamond",serif;font-size:2.1rem;color:var(--ice);margin:.5rem 0 .2rem}
.ocard-note{font-size:.8rem;color:var(--dim)}
.lead{display:grid;gap:.9rem}
.lead input{
  background:transparent;border:1px solid var(--line);border-radius:10px;
  padding:1rem 1.2rem;color:var(--paper);font:inherit;text-align:center;
}
.lead input::placeholder{color:#5f6b78}
.lead input:focus{outline:1px solid var(--ice)}
.lead .sent{font-family:"Cormorant Garamond",serif;font-size:1.4rem;font-style:italic;color:var(--ice);padding:1.6rem 0}
.or{margin-top:1.4rem;color:var(--dim);font-size:.92rem}
.or a{color:var(--ice);text-decoration:none;font-weight:600}
footer{padding:2.6rem 7vw;border-top:1px solid var(--line);color:var(--dim);font-size:.82rem;text-align:center}
footer .fine{font-size:.7rem;margin-top:.4rem;opacity:.7}

/* ===== reveal ===== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}

/* =========================================================
   MOBIL — film v celém formátu, kapitoly na sebe (ne přes sebe)
   ========================================================= */
@media (max-width:820px){
  /* klidový stav: fotka přes celou plochu; za běhu letterbox, ať se neořízne kompozice */
  .cinema video{object-fit:cover}
  .cinema.playing video{object-fit:contain}
  .cinema-veil{background:linear-gradient(180deg,rgba(6,8,12,.9) 0%,rgba(6,8,12,.72) 50%,rgba(6,8,12,.92) 100%)}
  .veil-play{width:100%;max-width:20rem}
  .claim-actions{flex-direction:column;align-items:stretch;width:100%;max-width:20rem;margin:0 auto}
  .claim-actions .btn{text-align:center}

  /* kapitoly: médium nahoře v původním poměru, text pod ním */
  .chapter{display:block;min-height:0;align-items:stretch}
  .ch-video,.ch-bg{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;opacity:1;display:block}
  .ch-copy,
  .ch-feel .ch-copy,
  .ch-winter .ch-copy{
    position:relative;max-width:none;background:var(--black);
    border-radius:0;padding:2.8rem 6vw 3.6rem;text-align:left;
  }
  .ch-copy.center{text-align:center;padding:6rem 6vw}
  .chapter h2{font-size:clamp(2rem,9vw,2.9rem)}
  .ch-line{font-size:1.02rem}
  .big-figure{font-size:clamp(4.4rem,26vw,7rem)}

  /* nabídka */
  .finale{padding:12vh 6vw}
  .offer-cards{grid-template-columns:1fr}
  .lead input{text-align:left}
  footer{padding:2.4rem 6vw}
}

@media (max-width:420px){
  .veil-title{font-size:2.05rem}
  .claim-line{font-size:1.45rem}
}


/* ===== znacka Jan Otcovsky ===== */
.brand{
  position:absolute;top:2.2rem;left:8vw;z-index:60;width:170px;height:auto;
  opacity:.92;transition:opacity .6s ease;pointer-events:none;
}
.playing .brand{opacity:0}
.foot-logo{width:270px;height:auto;margin:0 auto 1.4rem}
@media (max-width:820px){
  .brand{top:1.4rem;left:6vw;width:132px}
  .foot-logo{width:220px;margin-bottom:1.1rem}
}


/* ===== nové logo — smaltovaný odznak (23. 9. 2026) ===== */
.brand{width:200px;height:auto;opacity:1;filter:drop-shadow(0 6px 18px rgba(0,0,0,.28))}
.foot-logo{width:260px;height:auto;display:block}
@media (max-width:820px){
  .brand{width:150px}
  .foot-logo{width:220px}
}