/* ═══════════════════════════════════════════════════════════════
   praotec.css – Praotec Čech · Scroll-snap presentation
   Standalone page. Only navbar.css + contact.css are inherited.
═══════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  --bg:       #070b06;
  --amber:    #c8a45e;
  --text:     #e9e0d4;
  --muted:    rgba(233,224,212,0.68);
  --ease-out: cubic-bezier(.14,.85,.2,1);
}

/* ── Base reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Rubik", sans-serif;
  opacity: 0;
  transition: opacity .6s ease;
  overflow: hidden; /* deck handles all scroll */
}

body.loaded { opacity: 1; }

h1, h2, h3 { font-family: "Cinzel", serif; margin: 0; }
a { text-decoration: none; color: inherit; }

/* ── Fixed background layers ─────────────────────────────────── */
.bg {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.bg-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 0%,  rgba(180,130,50,.10), transparent 45%),
    radial-gradient(circle at 20% 60%, rgba(100,140,50,.08), transparent 50%),
    radial-gradient(circle at 80% 40%, rgba(160,110,40,.07), transparent 50%),
    linear-gradient(180deg, #060a05, #040705);
}

.bg-fog {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 60% 25%, rgba(200,164,94,.07), transparent 55%),
    radial-gradient(circle at 30% 65%, rgba(100,140,50,.05), transparent 60%);
  filter: blur(24px);
  opacity: .80;
  animation: fogDrift 26s ease-in-out infinite;
}

@keyframes fogDrift {
  0%, 100% { transform: translate3d(0,0,0) scale(1.02); }
  50%       { transform: translate3d(1.5%,-1%,0) scale(1.05); }
}

#embers {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .70;
}

.bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 40%, rgba(0,0,0,.65) 100%);
}

.bg-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: .18;
}

/* ── Deck (scroll container) ─────────────────────────────────── */
.deck {
  position: fixed;
  inset: 0;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  z-index: 5;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.deck::-webkit-scrollbar { display: none; }

/* ── Slides ──────────────────────────────────────────────────── */
.slide {
  position: relative;
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ── Reveal animation (shared per-slide) ─────────────────────── */
.rblock {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(5px);
  transition:
    opacity   .85s var(--ease-out) var(--rd, 0s),
    transform .85s var(--ease-out) var(--rd, 0s),
    filter    .85s var(--ease-out) var(--rd, 0s);
}

.slide.is-active .rblock {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ── Chapter tag (shared small label) ────────────────────────── */
.chapter-tag {
  display: block;
  font-family: "Cinzel", serif;
  font-size: clamp(.74rem, .75vw + .33rem, .88rem);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(200,164,94,.65);
  margin-bottom: 14px;
}

/* ══════════════════════════════════════════════════════════════
   SLIDE 0 · PROLOG
   Pure amber glow. Nothing else.
══════════════════════════════════════════════════════════════ */
.s-prolog {
  flex-direction: column;
  text-align: center;
}

.s-prolog__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s-prolog__eyebrow {
  display: block;
  font-family: "Cinzel", serif;
  font-size: clamp(.72rem, .68vw + .3rem, .85rem);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(200,164,94,.45);
  margin-bottom: 22px;
}

.s-prolog__title {
  font-family: "Cinzel Decorative", serif;
  font-size: clamp(3rem, 8.5vw, 7.8rem);
  letter-spacing: .04em;
  line-height: 1.05;
  color: var(--amber);
  text-shadow:
    0 0 80px  rgba(200,164,94,.65),
    0 0 200px rgba(160,120,40,.32),
    0 20px 80px rgba(0,0,0,.80);
}

.s-prolog__rule {
  width: 90px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  margin: 26px auto;
  opacity: .60;
}

.s-prolog__sub {
  font-size: clamp(1rem, 1.05vw + .5rem, 1.2rem);
  color: var(--muted);
  letter-spacing: .07em;
  margin: 0;
}

.s-prolog__cue {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-family: "Cinzel", serif;
  font-size: .76rem;
  letter-spacing: .22em;
  color: rgba(200,164,94,.42);
  animation: cueFloat 2.4s ease-in-out infinite 2.2s;
}

@keyframes cueFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(7px); }
}

/* ══════════════════════════════════════════════════════════════
   SLIDE 1 · ZROD
   Giant ghost numeral on the left. Content on the right.
══════════════════════════════════════════════════════════════ */
.s-zrod {
  justify-content: flex-end;
  padding-right: clamp(5%, 8vw, 12%);
}

.s-zrod__ghost {
  position: absolute;
  left: -4vw;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Cinzel Decorative", serif;
  font-size: clamp(16rem, 36vw, 34rem);
  line-height: 1;
  color: rgba(200,164,94,.04);
  user-select: none;
  pointer-events: none;
  letter-spacing: -.02em;
  transition: color 1.2s ease;
  z-index: 1;
}

.slide.is-active .s-zrod__ghost {
  color: rgba(200,164,94,.055);
}

.s-zrod__content {
  max-width: 520px;
  position: relative;
  z-index: 2;
}

/* Carpathian landscape scene – fills the left empty zone */
.s-zrod__scene {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52%;
  height: 82%;
  pointer-events: none;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.4s var(--ease-out) .15s, transform 1.4s var(--ease-out) .15s;
  /* Responsive vignette: opaque at bottom-left, fades toward right edge and top */
  /* -webkit-mask-image: radial-gradient(ellipse 100% 88% at 0% 100%, black 22%, rgba(0,0,0,0.65) 52%, transparent 86%);
  mask-image:         radial-gradient(ellipse 100% 88% at 0% 100%, black 22%, rgba(0,0,0,0.65) 52%, transparent 86%); */
}

.slide.is-active .s-zrod__scene {
  opacity: 1;
  transform: translateY(0);
}

.s-zrod__heading {
  font-size: clamp(2.2rem, 3.5vw + .7rem, 3.8rem);
  color: var(--amber);
  text-shadow: 0 0 40px rgba(200,164,94,.25);
  margin-bottom: 20px;
}

.s-zrod__body {
  font-size: clamp(1rem, .95vw + .58rem, 1.18rem);
  line-height: 1.72;
  color: rgba(233,224,212,.88);
  margin: 0;
}

.s-zrod__aside {
  margin-top: 18px;
  font-size: clamp(.9rem, .85vw + .42rem, 1.05rem);
  color: rgba(200,164,94,.58);
  font-style: italic;
  line-height: 1.60;
}

/* ══════════════════════════════════════════════════════════════
   SLIDE 2 · VOLÁNÍ
   Single oversized quote. Nothing else competes with it.
══════════════════════════════════════════════════════════════ */
.s-volani {
  flex-direction: column;
  text-align: center;
  padding: 0 clamp(20px, 8vw, 100px);
}

/* Ghost numeral – right side, content is centered so right edge is clear */
.s-volani__ghost {
  position: absolute;
  right: -4vw;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Cinzel Decorative", serif;
  font-size: clamp(16rem, 36vw, 34rem);
  line-height: 1;
  color: rgba(200,164,94,.04);
  user-select: none;
  pointer-events: none;
  letter-spacing: -.02em;
  transition: color 1.2s ease;
}

.slide.is-active .s-volani__ghost { color: rgba(200,164,94,.055); }

.s-volani__inner {
  max-width: 860px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s-volani__quote {
  font-family: "Cinzel Decorative", serif;
  font-size: clamp(2.6rem, 7.5vw, 7rem);
  color: var(--amber);
  text-shadow:
    0 0 60px rgba(200,164,94,.52),
    0 0 140px rgba(160,120,40,.26);
  margin: 12px 0 32px;
  font-style: normal;
  letter-spacing: .02em;
  line-height: 1.1;
}

.s-volani__caption {
  font-size: clamp(.94rem, .88vw + .54rem, 1.1rem);
  line-height: 1.78;
  color: var(--muted);
  max-width: 600px;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   SLIDE 3 · POCHOD
   Left-aligned. Heading + animated waypoint route.
══════════════════════════════════════════════════════════════ */
.s-pochod {
  flex-direction: column;
  align-items: flex-start;
  padding-left:  clamp(5%, 8vw, 12%);
  padding-right: clamp(5%, 8vw, 12%);
}

/* Ghost numeral – right side; pushed a little more off-screen since III is wider */
.s-pochod__ghost {
  position: absolute;
  right: -4vw;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Cinzel Decorative", serif;
  font-size: clamp(16rem, 36vw, 34rem);
  line-height: 1;
  color: rgba(200,164,94,.04);
  user-select: none;
  pointer-events: none;
  letter-spacing: -.02em;
  transition: color 1.2s ease;
}

.slide.is-active .s-pochod__ghost { color: rgba(200,164,94,.055); }

.s-pochod__inner { max-width: 860px; width: 100%; }

.s-pochod__heading {
  font-size: clamp(2rem, 3vw + .7rem, 3.4rem);
  color: var(--text);
  margin-bottom: 46px;
}

/* Route */
.s-pochod__route {
  display: flex;
  align-items: flex-start;
  margin-bottom: 36px;
}

.route-stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.rs-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(200,164,94,.65);
  background: rgba(200,164,94,.12);
  box-shadow: 0 0 10px rgba(200,164,94,.22);
}

.route-stop--dest .rs-dot {
  background: rgba(200,164,94,.62);
  border-color: var(--amber);
  box-shadow: 0 0 20px rgba(200,164,94,.55);
}

.rs-label {
  font-family: "Cinzel", serif;
  font-size: clamp(.70rem, .72vw + .28rem, .85rem);
  letter-spacing: .16em;
  color: rgba(200,164,94,.68);
  white-space: nowrap;
}

.route-stop--dest .rs-label { color: var(--amber); }

.route-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(200,164,94,.45), rgba(200,164,94,.18));
  min-width: 28px;
  align-self: flex-start;
  margin-top: 5.5px; /* visually center with 12px dot */
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .9s var(--ease-out) var(--rd, 0s);
}

/* stagger each line with a different delay */
.s-pochod__route .route-line:nth-child(2) { --rd: .55s; }
.s-pochod__route .route-line:nth-child(4) { --rd: .75s; }
.s-pochod__route .route-line:nth-child(6) { --rd: .95s; }

.slide.is-active .route-line { transform: scaleX(1); }

.s-pochod__caption {
  font-size: clamp(.94rem, .88vw + .54rem, 1.1rem);
  line-height: 1.74;
  color: var(--muted);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   SLIDE 4 · HORA ŘÍP
   Full-bleed SVG mountain. Text at bottom left.
══════════════════════════════════════════════════════════════ */
.s-rip {
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0;
}

/* Ghost numeral – upper-right sky zone; text overlay lives at bottom-left */
.s-rip__ghost {
  position: absolute;
  right: -4vw;
  top: 8%;
  font-family: "Cinzel Decorative", serif;
  font-size: clamp(16rem, 36vw, 34rem);
  line-height: 1;
  color: rgba(200,164,94,.04);
  user-select: none;
  pointer-events: none;
  letter-spacing: -.02em;
  transition: color 1.2s ease;
  z-index: 1; /* above mountain SVG, below text overlay (z-index: 2) */
}

.slide.is-active .s-rip__ghost { color: rgba(200,164,94,.055); }

.s-rip__mountain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.4s var(--ease-out), transform 1.4s var(--ease-out);
}

.slide.is-active .s-rip__mountain {
  opacity: 1;
  transform: translateY(0);
}

.s-rip__overlay {
  position: relative;
  z-index: 2;
  padding: 0 clamp(24px, 6vw, 88px) clamp(48px, 7vh, 80px);
  max-width: 540px;
  text-align: left;
}

.s-rip__title {
  font-size: clamp(2rem, 3.2vw + .7rem, 3.6rem);
  color: var(--amber);
  text-shadow: 0 0 40px rgba(200,164,94,.35), 0 8px 30px rgba(0,0,0,.70);
  margin-bottom: 14px;
}

.s-rip__caption {
  font-size: clamp(.98rem, .93vw + .54rem, 1.16rem);
  line-height: 1.70;
  color: rgba(233,224,212,.84);
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   SLIDE 5 · VLAST
   Three staggered quote lines. Left-aligned.
══════════════════════════════════════════════════════════════ */
.s-vlast {
  flex-direction: column;
  align-items: flex-start;
  padding-left:  clamp(5%, 8vw, 12%);
  padding-right: clamp(5%, 8vw, 12%);
}

/* Ghost numeral – right side; content is left-aligned so right edge is clear */
.s-vlast__ghost {
  position: absolute;
  right: -4vw;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Cinzel Decorative", serif;
  font-size: clamp(16rem, 36vw, 34rem);
  line-height: 1;
  color: rgba(200,164,94,.04);
  user-select: none;
  pointer-events: none;
  letter-spacing: -.02em;
  transition: color 1.2s ease;
  z-index: 1;
}

.slide.is-active .s-vlast__ghost { color: rgba(200,164,94,.055); }

.s-vlast__inner { max-width: 800px; z-index: 2; }

/* Bohemian promised-land scene – fills the right empty zone */
.s-vlast__scene {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  height: 82%;
  pointer-events: none;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.4s var(--ease-out) .15s, transform 1.4s var(--ease-out) .15s;
  /* Responsive vignette: opaque at bottom-right, fades toward left edge and top */
  -webkit-mask-image: radial-gradient(ellipse 100% 90% 100% 100%, black 22%, rgba(0,0,0,0.65) 50%, transparent 86%);
  mask-image:         radial-gradient(ellipse 100% 90% 100% 100%, black 22%, rgba(0,0,0,0.65) 50%, transparent 86%);
}

.slide.is-active .s-vlast__scene {
  opacity: 1;
  transform: translateY(0);
}

.s-vlast__quote { margin: 8px 0 24px; }

.vlast-line {
  font-family: "Cinzel", serif;
  font-size: clamp(1.75rem, 3.4vw + .5rem, 3.8rem);
  line-height: 1.28;
  color: var(--amber);
  text-shadow: 0 0 50px rgba(200,164,94,.28);
  margin: 0;
}

.s-vlast__attr {
  font-family: "Cinzel", serif;
  font-size: clamp(.76rem, .68vw + .36rem, .88rem);
  letter-spacing: .18em;
  color: rgba(200,164,94,.52);
  margin: 0 0 20px;
}

.s-vlast__epilog {
  font-size: clamp(.98rem, .92vw + .54rem, 1.16rem);
  color: var(--muted);
  font-style: italic;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   KONTAKTY slide
   Override contact.css height:auto so snap-scroll works.
══════════════════════════════════════════════════════════════ */
.slide.kontakty {
  height: 100vh;
  align-items: center;
  justify-content: center;
}

/* ── Side progress dots ──────────────────────────────────────── */
.progress-nav {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
}

.pn-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(200,164,94,.42);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background .22s ease, transform .22s ease, border-color .22s ease;
}

.pn-dot:hover { border-color: rgba(200,164,94,.85); transform: scale(1.3); }

.pn-dot.is-active {
  background: var(--amber);
  border-color: var(--amber);
  box-shadow: 0 0 9px rgba(200,164,94,.52);
  transform: scale(1.18);
}

/* Tooltip on hover */
.pn-dot::after {
  content: attr(aria-label);
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  font-family: "Cinzel", serif;
  font-size: .70rem;
  letter-spacing: .12em;
  color: rgba(200,164,94,.88);
  white-space: nowrap;
  background: rgba(7,11,6,.82);
  border: 1px solid rgba(200,164,94,.24);
  padding: 4px 10px;
  border-radius: 6px;
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.pn-dot:hover::after { opacity: 1; }

/* ── Navbar custom ───────────────────────────────────────────── */
.navbar {
  z-index: 1000;
  background-color: rgba(12,16,10,.65);
}

.navbar.scrolled { background-color: rgba(12,16,10,.30); }

.nav-links a:hover { background: rgba(200,164,94,.18); }

@media (max-width: 1100px) {
  .nav-links {
    background-color: rgba(7,11,6,.94);
    border-bottom: 1px solid rgba(200,164,94,.12);
  }
}

/* ── Contact custom ──────────────────────────────────────────── */
.kontakty-dotaznik textarea:focus {
  box-shadow: 0 0 0 6px rgba(200,164,94,.14);
}

.kontakty-dotaznik button {
  background: rgba(200,164,94,.88);
  color: #0f0c06;
}

.kontakty-dotaznik button:hover { background: rgba(220,184,114,.96); }

.form-status { color: rgba(200,164,94,.85); }

.ornament-frame {
  border: 1px solid rgba(200,164,94,.42);
  background: rgba(0,0,0,.35);
  animation: amberBorderGlow 5s linear infinite;
}

.ornament-frame::before,
.ornament-frame::after {
  border: 1px solid rgba(200,164,94,.50);
}

@keyframes amberBorderGlow {
  0%   { box-shadow: 0 0 10px rgba(200,164,94,.18), inset 0 0 10px rgba(200,164,94,.12); }
  50%  { box-shadow: 0 0 22px rgba(200,164,94,.42), inset 0 0 16px rgba(200,164,94,.25); }
  100% { box-shadow: 0 0 10px rgba(200,164,94,.18), inset 0 0 10px rgba(200,164,94,.12); }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .s-zrod {
    justify-content: center;
    padding: 0 clamp(20px, 6vw, 40px);
  }

  .s-zrod__ghost {
    font-size: clamp(10rem, 38vw, 18rem);
    left: -5vw;
  }

  .s-volani__ghost,
  .s-vlast__ghost {
    font-size: clamp(10rem, 38vw, 18rem);
    right: -5vw;
  }

  .s-pochod__ghost {
    font-size: clamp(10rem, 38vw, 18rem);
    right: -10vw;
  }

  .s-rip__ghost {
    font-size: clamp(10rem, 38vw, 18rem);
    right: -5vw;
  }

  .s-zrod__scene,
  .s-vlast__scene { display: none; }

  .s-pochod {
    padding-left:  clamp(20px, 5vw, 36px);
    padding-right: clamp(20px, 5vw, 36px);
  }

  .s-vlast {
    padding-left:  clamp(20px, 5vw, 36px);
    padding-right: clamp(20px, 5vw, 36px);
  }

  .s-rip__overlay {
    padding-bottom: clamp(30px, 5vh, 50px);
  }

  .progress-nav { right: 10px; }
}

@media (max-width: 480px) {
  .s-zrod__ghost { display: none; }
  .s-volani__ghost,
  .s-pochod__ghost,
  .s-rip__ghost,
  .s-vlast__ghost { display: none; }

  /* Stack route vertically on tiny screens */
  .s-pochod__route {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .route-stop { flex-direction: row; gap: 12px; }

  .route-line {
    width: 1px;
    height: 14px;
    flex: none;
    align-self: auto;
    margin-top: 0;
    margin-left: 5.5px;
    background: linear-gradient(180deg, rgba(200,164,94,.45), rgba(200,164,94,.18));
    transform-origin: top;
    transform: scaleY(0);
  }

  .slide.is-active .route-line { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}