/* Krásné řasy Liberec — landing page styles */

:root {
  --brown: #5A3E36;
  --brown-dark: #3E2A24;
  --cream: #F8F1EC;
  --white: #FFFFFF;
  --ink: #2B2B2B;
  --body: #4A3A35;
  --muted: #7A5E54;
  --muted-2: #86665A;   /* 4.62:1 on the cream ground; #8A6A5E missed 4.5 */
  --gold: #C9A86A;
  --gold-dark: #8C6A2E;
  --gold-mid: #A9884A;
  --line: #EADBD2;
  --line-2: #E2D2C8;
  --blush: #F3D9D6;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Montserrat', system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* Native smooth scrolling is the no-JS fallback. When app.js is running it
   drives anchor jumps itself with a longer curve, and a smooth `scrollTo`
   would fight that loop frame by frame — so `.anim` turns it back off. */
html { scroll-behavior: smooth; }
html.anim { scroll-behavior: auto; }

section[id] { scroll-margin-top: 24px; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
}

a { color: var(--brown); }
a:hover { color: var(--brown-dark); }

h1, h2 { margin: 0; font-family: var(--serif); font-weight: 500; color: var(--brown); }
h1 { font-size: clamp(40px, 6vw, 68px); line-height: 1.05; }
h2 { font-size: clamp(34px, 5vw, 48px); }

:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 3px; }

/* --- layout helpers --- */

.section {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 80px) 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.section--white { background: var(--white); padding: clamp(48px, 8vw, 80px) 20px; }

.wrap-820 { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 36px; }
.wrap-1120 { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }

.head-center { text-align: center; display: flex; flex-direction: column; gap: 6px; }
.head-center h2 { text-align: center; }

.kicker {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.sub-italic {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--muted-2);
}

/* --- header --- */

.header {
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--brown);
  letter-spacing: 0.02em;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color: var(--brown);
}

/* Below roughly 300px the two icons and the language group no longer fit on
   one line next to the logo, so the group is allowed to break. */
.header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lang {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--white);
}

.lang a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  background: transparent;
  color: var(--brown);
}
.lang a[aria-current="page"] { background: var(--brown); color: var(--white); }

/* The pill stays 36px for the look of the header; the hit area reaches the
   44px minimum through the padding of its own container. */
.lang a::before {
  content: "";
  position: absolute;
  inset: -4px 0;
}

/* --- hero --- */

.hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 24px 72px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
}

.hero-copy { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.lead { margin: 0; font-size: 18px; font-weight: 300; max-width: 520px; color: var(--body); }

.offer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--gold);
  border-radius: 14px;
  background: var(--blush);
  max-width: 520px;
}
.offer span { font-size: 15px; font-weight: 500; color: var(--brown); }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
}
.btn--solid { background: var(--brown); color: var(--white); }
.btn--outline { border: 1px solid var(--brown); color: var(--brown); }

.from { font-family: var(--serif); font-size: 24px; color: var(--brown); }

.hero-media { flex: 1 1 380px; min-width: 0; display: flex; justify-content: center; }
.hero-frame { position: relative; width: 100%; max-width: 440px; margin: 0 18px 18px 0; }
.hero-frame::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 18px;
  right: -18px;
  bottom: -18px;
  border: 1px solid var(--gold);
  border-radius: 28px;
}
.hero-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 28px;
  box-shadow: 0 24px 48px rgba(90, 62, 54, 0.16);
}

/* --- price --- */

.price-list { display: flex; flex-direction: column; }

.price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.price-row__label {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}
.price-row__name { font-weight: 500; font-size: 18px; color: var(--ink); }
.price-row__desc { font-weight: 300; font-style: italic; font-size: 15px; color: var(--muted); }
.price-row__value {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  color: var(--brown);
  white-space: nowrap;
}

.extras { display: flex; flex-direction: column; gap: 8px; }
.extras__title {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.extra-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.extra-row__name { font-size: 17px; color: var(--ink); }
.extra-row__value {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  color: var(--brown);
  white-space: nowrap;
}

.free {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 24px 28px;
  border: 1px solid var(--gold);
  border-radius: 18px;
  background: var(--blush);
}
.free__text { flex: 1 1 320px; min-width: 0; font-size: 17px; font-weight: 500; color: var(--brown); }
.free__word {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(20px, 6.5vw, 30px);
  letter-spacing: 0.06em;
  color: var(--brown);
}

/* --- why --- */

.grid-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 20px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  text-align: center;
}
.card__n {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 22px;
  color: var(--gold-dark);
}
.card__title { font-size: 16px; font-weight: 500; color: var(--ink); }

/* --- about --- */

.about { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.about__media { flex: 1 1 300px; min-width: 0; display: flex; justify-content: center; }
.about__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 380px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 999px;
  box-shadow: 0 20px 40px rgba(90, 62, 54, 0.14);
}
.about__copy { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.about__text { margin: 0; font-size: 17px; font-weight: 300; color: var(--body); }

.facts { display: flex; flex-wrap: wrap; gap: 10px; }
.fact {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: var(--cream);
  font-size: 14px;
  color: var(--brown);
}

/* --- steps --- */

.grid-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }

.step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--line);
}
.step__n { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--gold-mid); }
.step__t { font-size: 17px; font-weight: 600; color: var(--ink); }
.step__d { font-size: 15px; font-weight: 300; color: var(--body); }

/* --- works --- */

.grid-works {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}

.work {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.work img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

/* --- reviews --- */

.grid-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }

.review {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 16px 32px rgba(90, 62, 54, 0.10);
}
.review img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  object-position: top;
}

/* --- faq --- */

.faq-list { display: flex; flex-direction: column; gap: 10px; }

.faq-item {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--cream);
  padding: 0 20px;
}
.faq-item summary {
  cursor: pointer;
  min-height: 56px;
  display: flex;
  align-items: center;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
}
.faq-item p { margin: 0 0 18px; font-size: 15px; font-weight: 300; color: var(--body); }

/* --- contact --- */

.contact {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 80px) 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}
.contact__copy { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.contact__text { margin: 0; font-size: 17px; font-weight: 300; color: var(--body); }
.contact__meta { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.contact__meta dt { display: inline; color: var(--muted); }
.contact__meta dd { display: inline; margin: 0; color: var(--ink); }

.contact__list { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.contact-link {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 12px 20px;
  flex-wrap: wrap;
  border-radius: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
}
.contact-link__name { font-weight: 500; }
.contact-link__value { margin-left: auto; color: var(--brown); white-space: nowrap; }

/* --- footer + mobile bar --- */

.footer {
  border-top: 1px solid var(--line);
  padding: 28px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.mbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  gap: 8px;
  padding: 10px 12px;
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(90, 62, 54, 0.08);
}
.mbar a {
  flex: 1 1 0;
  min-width: 0;
  min-height: 52px;
  border-radius: 14px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: clamp(10px, 3.1vw, 12px);
  font-weight: 600;
  text-align: center;
}
.mbar a.is-outline { border: 1px solid var(--brown); color: var(--brown); }
.mbar a.is-solid { flex: 1.4 1 0; background: var(--brown); color: var(--white); }

@media (max-width: 720px) {
  .nav-links { display: none; }
  .mbar { display: flex; }
  /* The fixed bar at the bottom already offers calling and Instagram, so the
     header icons are a duplicate here — dropping them keeps the logo and the
     language switcher on one line. */
  .header-actions .icon-btn { display: none; }
  body { padding-bottom: 88px; }
  .hero-ctas a { flex: 1 1 100%; justify-content: center; }
}

/* ======================================================================
   Motion
   ----------------------------------------------------------------------
   One curve and one rhythm across the page, with the direction of entry
   following the layout: a column on the left arrives from the left, the
   photo beside it from the right. Everything animates `opacity` and
   `transform` only — both are handled by the compositor, so frames are
   cheap enough to hold 120 Hz on a high-refresh screen. Nothing here
   touches layout, colour or filters, which would force work back onto the
   main thread.

   The hidden-before-reveal state is scoped to `.anim`, a class an inline
   script in <head> adds. Without JavaScript the class never lands and the
   page renders fully visible, with nothing to un-hide.

   The selector list below mirrors REVEAL_SELECTOR in app.js — change both.
   ====================================================================== */

:root {
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-quick: 950ms;
  --dur-base: 1250ms;
  --dur-slow: 1550ms;
}

.anim .hero-copy > *,
.anim .hero-frame,
.anim .head-center > *,
.anim .section > h2,
.anim .wrap-820 > h2,
.anim .price-row,
.anim .extras,
.anim .free,
.anim .card,
.anim .about__media,
.anim .about__copy > *,
.anim .step,
.anim .work,
.anim .review,
.anim .faq-item,
.anim .contact__copy > *,
.anim .contact-link,
.anim .footer {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition:
    opacity var(--dur-base) var(--ease-out-soft) var(--reveal-delay, 0ms),
    transform var(--dur-base) var(--ease-out-soft) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

/* --- direction follows the layout ------------------------------------ */

/* Text columns drift in from their own side of the page. */
.anim .hero-copy > *,
.anim .contact__copy > * { transform: translate3d(-30px, 12px, 0); }

.anim .about__copy > *,
.anim .contact-link { transform: translate3d(30px, 12px, 0); }

/* Photography is heavier: it travels further, settles out of a slight
   zoom, and takes the longest of the three durations. */
.anim .hero-frame {
  transform: translate3d(38px, 28px, 0) scale(0.94);
  transition-duration: var(--dur-slow);
}
.anim .about__media {
  transform: translate3d(-38px, 28px, 0) scale(0.94);
  transition-duration: var(--dur-slow);
}
.anim .work,
.anim .review {
  transform: translate3d(0, 48px, 0) scale(0.94);
  transition-duration: var(--dur-slow);
}

/* Cards lift as a group, with a touch of scale so the row has depth. */
.anim .card,
.anim .step {
  transform: translate3d(0, 44px, 0) scale(0.96);
  transition-duration: var(--dur-base);
}

/* Rows read as a list unrolling, so they travel a shorter distance. */
.anim .price-row,
.anim .faq-item {
  transform: translate3d(0, 18px, 0);
  transition-duration: var(--dur-quick);
}

.anim .free { transform: translate3d(0, 26px, 0) scale(0.98); }
.anim .footer { transform: translate3d(0, 20px, 0); }

.anim .is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: auto;
}

/* --- headings rise out from behind their own box --------------------- */

/* The heading is the mask and the inner span is what moves. The padding
   and the matching negative margin give diacritics and descenders room
   without shifting the layout — Czech `r` with a hacek and `u` with a ring
   sit above cap height and would otherwise be shaved off mid-animation. */
.anim h1,
.anim h2 {
  overflow: hidden;
  padding: 0.12em 0 0.2em;
  margin-top: -0.12em;
  margin-bottom: -0.2em;
  opacity: 1;
  transform: none;
}

.anim h1 .rise,
.anim h2 .rise {
  display: block;
  opacity: 0;
  transform: translate3d(0, 115%, 0);
  transition:
    opacity var(--dur-quick) var(--ease-out-soft) var(--reveal-delay, 0ms),
    transform var(--dur-slow) var(--ease-out-soft) var(--reveal-delay, 0ms);
}

/* Triggered whether the heading is the observed element or sits inside one. */
.anim .is-visible .rise,
.anim .is-visible.rise { opacity: 1; transform: translate3d(0, 0, 0); }

/* --- the frame around the page --------------------------------------- */

.anim .header { animation: drop-in var(--dur-base) var(--ease-out-soft) both; }
.anim .mbar { animation: bar-up var(--dur-base) 300ms var(--ease-out-soft) both; }

@keyframes drop-in {
  from { opacity: 0; transform: translate3d(0, -18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes bar-up {
  from { opacity: 0; transform: translate3d(0, 100%, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* --- hover and press -------------------------------------------------- */

.btn,
.card,
.step,
.contact-link,
.fact,
.icon-btn,
.work,
.review {
  transition:
    transform 700ms var(--ease-out-soft),
    box-shadow 700ms var(--ease-out-soft),
    background-color 500ms ease,
    border-color 500ms ease,
    color 500ms ease;
}

.btn:hover,
.icon-btn:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 16px 30px rgba(90, 62, 54, 0.18);
}

.btn:active,
.icon-btn:active { transform: translate3d(0, -1px, 0); }

.card:hover,
.step:hover,
.contact-link:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: 0 20px 38px rgba(90, 62, 54, 0.13);
}

/* The galleries lift as a whole: their images are busy drifting with the
   scroll, so a hover zoom would fight the parallax below. */
.work:hover,
.review:hover {
  transform: translate3d(0, -5px, 0);
  box-shadow: 0 24px 44px rgba(90, 62, 54, 0.16);
}

.fact:hover { transform: translate3d(0, -2px, 0); background: var(--blush); }

.about__img { transition: transform 1600ms var(--ease-out-soft); }
.about__img:hover { transform: scale(1.03); }

.nav-links a,
.lang a {
  transition: color 500ms ease, background-color 600ms ease, opacity 500ms ease;
}

.nav-links a { position: relative; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 700ms var(--ease-out-soft);
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left center; }

.faq-item summary { transition: color 500ms ease; }
.faq-item:hover summary { color: var(--brown); }

/* The box height still snaps open — only the answer can be animated
   without putting layout work on every frame. */
.faq-item[open] > p { animation: answer-in 620ms var(--ease-out-soft) both; }

@keyframes answer-in {
  from { opacity: 0; transform: translate3d(0, -10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* --- scroll-linked parallax ------------------------------------------- */

/* Where the browser supports it, the gallery crops drift against the scroll
   on the compositor thread — no scroll listener, no main-thread work, so it
   stays smooth at any refresh rate. Elsewhere the images simply sit still.
   The 1.08 zoom hides the edges the drift would otherwise expose. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .work img,
    .review img {
      animation: crop-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }

    @keyframes crop-drift {
      from { transform: translate3d(0, -3.2%, 0) scale(1.08); }
      to { transform: translate3d(0, 3.2%, 0) scale(1.08); }
    }
  }
}

/* --- opt out ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html, html.anim { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .anim .hero-copy > *,
  .anim .hero-frame,
  .anim .head-center > *,
  .anim .section > h2,
  .anim .wrap-820 > h2,
  .anim .price-row,
  .anim .extras,
  .anim .free,
  .anim .card,
  .anim .about__media,
  .anim .about__copy > *,
  .anim .step,
  .anim .work,
  .anim .review,
  .anim .faq-item,
  .anim .contact__copy > *,
  .anim .contact-link,
  .anim .footer,
  .anim h1 .rise,
  .anim h2 .rise {
    opacity: 1;
    transform: none;
  }

  .anim h1,
  .anim h2 { overflow: visible; }
}