/* ═══════════════════════════════════════════════════════════════
   KOUZLO ČESKÉHO FILMU — Coming soon
   Cinematic: hluboká černá, festivní zlatá, ohnivý glow, film grain
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg:          hsl(0 0% 5%);
  --fg:          hsl(40 25% 94%);
  --muted:       hsl(40 15% 72%);
  --gold:        hsl(46 100% 68%);
  --gold-bright: hsl(46 100% 78%);
  --ember:       hsl(25 90% 58%);
  --fire:        hsl(8 92% 41%);
  --border:      hsl(40 15% 18%);

  --gradient-fire: linear-gradient(135deg, hsl(46 100% 70%) 0%, hsl(20 100% 55%) 55%, hsl(8 92% 41%) 100%);
  --gradient-gold: linear-gradient(180deg, var(--gold-bright), hsl(40 95% 58%));
  --shadow-gold:   0 10px 50px -12px hsl(46 100% 70% / 0.45);

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Trvalý film grain přes celou stránku */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0.05;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Pozadí ──────────────────────────────────────────────── */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; }

.bg__image {
  position: absolute; inset: 0;
  background: url('assets/production-stage.jpg') center 45% / cover no-repeat;
  transform: scale(1.06);
  animation: slowZoom 30s ease-in-out infinite alternate;
}
.bg__image::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, hsl(0 0% 3% / 0.62) 0%, hsl(0 0% 3% / 0.82) 48%, hsl(0 0% 4% / 0.97) 100%);
}

.bg__glow {
  position: absolute;
  top: -10%; left: 50%; transform: translateX(-50%);
  width: 90vw; max-width: 1100px; height: 70vh;
  background: radial-gradient(ellipse at center, hsl(25 90% 55% / 0.22), transparent 65%);
  filter: blur(40px);
  animation: pulseGlow 8s ease-in-out infinite;
  pointer-events: none;
}

.bg__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 75% 65% at 50% 42%, transparent 35%, hsl(0 0% 0% / 0.85) 100%);
  pointer-events: none;
}

@keyframes slowZoom { from { transform: scale(1.06); } to { transform: scale(1.16); } }
@keyframes pulseGlow { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }

/* ── Hero layout ─────────────────────────────────────────── */
.hero {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 6rem) 1.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.5rem, 3.5vh, 2.5rem);
}

/* ── Eyebrow ─────────────────────────────────────────────── */
.eyebrow {
  display: flex; align-items: center; gap: 0.85rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.6rem, 1.6vw, 0.8rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow__line {
  width: clamp(20px, 6vw, 46px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow__line:last-child { background: linear-gradient(90deg, var(--gold), transparent); }

/* ── Wordmark ────────────────────────────────────────────── */
.wordmark { line-height: 0; }
.wordmark img {
  width: clamp(260px, 62vw, 560px);
  height: auto;
  filter: drop-shadow(0 6px 30px hsl(46 100% 60% / 0.25));
}

/* ── Tagline ─────────────────────────────────────────────── */
.tagline {
  font-size: clamp(1rem, 2.6vw, 1.35rem);
  font-weight: 300;
  color: var(--fg);
  max-width: 30ch;
  line-height: 1.55;
  text-wrap: balance;
}
@media (min-width: 640px) { .tagline { max-width: 52ch; } }

/* ── Turné badge ─────────────────────────────────────────── */
.tour {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.82rem, 2.1vw, 1.05rem);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  line-height: 1.5;
  color: var(--fg);
  max-width: 90vw;
  padding: 0.55rem 1.3rem;
  border: 1px solid hsl(46 100% 68% / 0.35);
  border-radius: 6px;
  background: hsl(46 100% 68% / 0.07);
  box-shadow: inset 0 0 24px hsl(46 100% 68% / 0.06);
}

/* ── Countdown ───────────────────────────────────────────── */
.countdown { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.countdown__label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: clamp(0.62rem, 1.5vw, 0.78rem);
  color: var(--muted);
}
.countdown__grid {
  display: flex; align-items: flex-start;
  gap: clamp(0.5rem, 2vw, 1.25rem);
}
.cd-unit { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; min-width: clamp(54px, 15vw, 92px); }
.cd-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 9vw, 4.6rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--gradient-gold);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: 0 0 36px hsl(46 100% 65% / 0.25);
}
.cd-cap {
  font-size: clamp(0.55rem, 1.4vw, 0.72rem);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.cd-sep {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 6vw, 3.2rem);
  line-height: 1.05;
  color: hsl(46 100% 68% / 0.4);
  padding-top: 0.1em;
}

/* ── Signup ──────────────────────────────────────────────── */
.signup {
  width: 100%;
  max-width: 560px;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  background: hsl(0 0% 7% / 0.55);
  border: 1px solid hsl(46 100% 68% / 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 4px;
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
.signup__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.gold {
  background: var(--gradient-fire);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.signup__sub {
  color: var(--muted);
  font-size: clamp(0.85rem, 2vw, 0.98rem);
  line-height: 1.5;
  max-width: 42ch;
}
.signup__form {
  display: flex;
  gap: 0.6rem;
  width: 100%;
  margin-top: 0.6rem;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.signup__input {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 54px;
  padding: 0 1.15rem;
  background: hsl(0 0% 100% / 0.06);   /* světlejší výplň – pole je jasně vidět */
  border: 1px solid hsl(46 100% 68% / 0.28);
  border-radius: 4px;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;            /* 16px = žádný auto-zoom na iOS */
  line-height: normal;
  -webkit-appearance: none;   /* pryč s iOS výchozím stínem/rohy */
  appearance: none;
  -webkit-text-size-adjust: 100%;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.signup__input::placeholder { color: hsl(40 14% 66%); opacity: 1; }
.signup__btn { height: 54px; }
.signup__input:focus {
  outline: none;
  border-color: var(--gold);
  background: hsl(0 0% 100% / 0.1);
  box-shadow: 0 0 0 3px hsl(46 100% 68% / 0.18);
}
.signup__btn {
  height: 52px;
  padding: 0 1.6rem;
  border: none;
  border-radius: 3px;
  background: var(--gradient-gold);
  color: hsl(0 0% 6%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-gold);
  transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
}
.signup__btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 14px 60px -12px hsl(46 100% 70% / 0.6); }
.signup__btn:active { transform: translateY(0); }
.signup__btn:disabled { cursor: default; opacity: 0.75; transform: none; filter: none; }

.signup__msg {
  font-size: 0.9rem;
  min-height: 1.2em;
  font-weight: 500;
}
.signup__msg.is-error { color: hsl(0 80% 70%); }
.signup__msg.is-success { color: var(--gold); }

.signup__note {
  font-size: 0.72rem;
  color: hsl(40 10% 55%);
}

/* Stav po úspěšném přihlášení */
.signup.done .signup__form,
.signup.done .signup__sub,
.signup.done .signup__note { display: none; }
.signup.done .signup__title::after { content: ''; }

/* ── Films marquee ───────────────────────────────────────── */
.films {
  width: 100%;                            /* drží se šířky obsahu jako zbytek webu */
  margin-top: 0.5rem;
  text-align: left; /* přebít zděděný center z .hero, jinak marquee „běhá do půlky" */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  overflow: hidden;
}
.films__track {
  display: flex;
  width: max-content;   /* drží šířku obsahu a začíná u levého okraje */
  align-items: center;
  gap: 1.1rem;
  white-space: nowrap;
  will-change: transform;
  /* animation-duration nastaví main.js podle šířky, ať je rychlost konstantní */
  animation-name: marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: clamp(0.72rem, 1.8vw, 0.95rem);
  color: hsl(40 18% 80%);
}
.films__track i { color: var(--gold); font-style: normal; opacity: 0.7; }
.films__more { color: var(--gold) !important; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Footer ──────────────────────────────────────────────── */
.footer {
  position: relative; z-index: 1;
  flex-shrink: 0;
  text-align: center;
  padding: 1.5rem;
  font-size: 0.75rem;
  color: hsl(40 10% 52%);
}
.footer a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.footer a:hover { color: var(--gold); }

/* ── Reveal animace ──────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  animation: revealUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes revealUp { to { opacity: 1; transform: translateY(0); } }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .signup__form { flex-direction: column; }
  .signup__btn { width: 100%; }
  .br-desktop { display: none; }
  .cd-sep { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  .bg__image, .bg__glow, .films__track { animation: none; }
}