/* ============================================================
   Баня «Досжан» — премиум-дерево, скролл-кино
   ============================================================ */

/* ---------- Шрифты (локальные woff2) ----------
   Vollkorn — коренастый тёплый serif («цельнозерновой»), под дерево и жар.
   Golos Text — гротеск Paratype с родной кириллицей. */
@font-face{font-family:'Vollkorn';src:url('../fonts/vollkorn-cyr-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Vollkorn';src:url('../fonts/vollkorn-lat-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F;}
@font-face{font-family:'Golos Text';src:url('../fonts/golos-cyr-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Golos Text';src:url('../fonts/golos-lat-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F;}
@font-face{font-family:'Golos Text';src:url('../fonts/golos-cyr-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Golos Text';src:url('../fonts/golos-lat-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F;}

/* ---------- Токены ----------
   Палитра снята пипеткой с САМИХ кадров пролётов, а не выбрана «на глаз»:
     бирюза   #0f4b4d / #165653 — вода бассейна (24% кадра)
     медь     #a77735 / #e0a42e — чаша печи и гирлянда во дворе
     уголь    #281815 / #1c180b — тёплая темнота двора и парной
     патина   #9bbfb0 / #7ca9a3 — пар над камнями, известь печи         */
:root{
  --font-head:'Vollkorn',Georgia,serif;
  --font-body:'Golos Text',system-ui,sans-serif;

  /* тёмная тема (по умолчанию) — уголь двора */
  --bg:#14110e;
  --bg-2:#1c180f;
  --panel:rgba(36,30,21,.74);
  --panel-brd:rgba(167,119,53,.18);
  --wood-tex:url('../img/wood-dark.jpg');
  --wood-blend:soft-light;
  --wood-op:.42;
  --ink:#e9e3d3;
  --ink-soft:rgba(233,227,211,.66);
  --ink-faint:rgba(233,227,211,.40);
  --accent:#bf8a3d;      /* медь чаши */
  --accent-2:#e0a42e;    /* огонь гирлянды */
  --water:#4e9b93;       /* бирюза бассейна */
  --accent-ink:#17120a;
  --hairline:rgba(167,119,53,.24);
  --shadow:0 30px 80px -30px rgba(0,0,0,.78);
}
/* светлая тема — известь печи и пар, НЕ тёплый крем */
:root[data-theme="light"]{
  --bg:#d9dcd2;
  --bg-2:#cbd0c5;
  --panel:rgba(243,244,238,.80);
  --panel-brd:rgba(38,60,58,.16);
  --wood-tex:url('../img/wood-light.jpg');
  --wood-blend:multiply;
  --wood-op:.30;
  --ink:#1e211c;
  --ink-soft:rgba(30,33,28,.72);
  --ink-faint:rgba(30,33,28,.48);
  --accent:#8a6224;      /* медь, притемнённая под светлый фон */
  --accent-2:#6f4d18;
  --water:#1f5b57;       /* глубокая вода */
  --accent-ink:#f6f7f2;
  --hairline:rgba(38,60,58,.24);
  --shadow:0 30px 80px -34px rgba(35,52,50,.28);
}

/* ---------- База ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background-color .8s ease,color .8s ease;
}
/* Текстура дерева поверх всего фона (не поверх canvas-сцены) */
body::before{
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:var(--wood-tex);background-size:760px auto;
  mix-blend-mode:var(--wood-blend);opacity:var(--wood-op);
  transition:opacity .8s ease;
}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--font-head);font-weight:600;line-height:1.02;letter-spacing:.01em}
::selection{background:var(--accent);color:var(--accent-ink)}

.wrap{max-width:1180px;margin:0 auto;padding:0 40px}

/* ============================================================
   Прелоадер
   ============================================================ */
#preloader{
  position:fixed;inset:0;z-index:200;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:opacity .9s ease,visibility .9s ease;
}
#preloader.done{opacity:0;visibility:hidden}
.pl-mark{font-family:var(--font-head);font-size:64px;font-weight:600;color:var(--ink);letter-spacing:.06em}
.pl-mark span{color:var(--accent)}
.pl-bar{width:220px;height:2px;background:var(--hairline);border-radius:2px;overflow:hidden}
.pl-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .25s ease}
.pl-pct{font-size:12px;letter-spacing:.35em;color:var(--ink-faint);text-transform:uppercase}

/* ============================================================
   Шапка
   ============================================================ */
header{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 40px;transition:padding .4s ease,background-color .4s ease;
}
header.solid{background:linear-gradient(to bottom,rgba(0,0,0,.35),transparent);padding:16px 40px}
:root[data-theme="light"] header.solid{background:linear-gradient(to bottom,rgba(50,32,14,.14),transparent)}

/* Пока шапка висит над кадром (всегда тёмным) — её цвета светлые в ОБЕИХ темах,
   иначе в светлой теме тёмный текст сливается с видео */
header.over-media .brand{color:#f4ead9}
header.over-media .brand b{color:var(--accent-2)}
header.over-media .nav a{color:rgba(244,234,217,.74)}
header.over-media .nav a:hover{color:#fff}
header.over-media .theme-toggle{background:rgba(18,12,8,.42);border-color:rgba(244,234,217,.28)}
.brand{font-family:var(--font-head);font-size:26px;font-weight:600;letter-spacing:.14em;color:var(--ink);text-transform:uppercase;text-decoration:none}
.brand b{color:var(--accent);font-weight:600}
.nav{display:flex;align-items:center;gap:34px}
.nav a{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;transition:color .3s}
.nav a:hover{color:var(--accent-2)}

/* Тумблер темы */
.theme-toggle{
  width:58px;height:30px;border-radius:30px;border:1px solid var(--hairline);
  background:var(--panel);position:relative;cursor:pointer;flex:none;
  transition:background-color .5s ease,border-color .5s ease;
}
.theme-toggle .knob{
  position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(145deg,var(--accent-2),var(--accent));
  display:grid;place-items:center;
  transition:transform .5s cubic-bezier(.65,0,.35,1);
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
:root[data-theme="light"] .theme-toggle .knob{transform:translateX(28px)}
.theme-toggle svg{width:13px;height:13px;fill:var(--accent-ink)}
.theme-toggle .i-sun{display:none}
:root[data-theme="light"] .theme-toggle .i-moon{display:none}
:root[data-theme="light"] .theme-toggle .i-sun{display:block}

/* ============================================================
   Скролл-сцена (canvas + подписи)
   ============================================================ */
#stage{position:relative;z-index:2;height:900vh}
#viewport{position:sticky;top:0;height:100vh;width:100%;overflow:hidden}
#seq{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Затемнение поверх canvas на плато.
   Центр гасим СИЛЬНЕЕ краёв — именно там лежит текст, иначе он тонет на светлых кадрах. */
#dim{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:
    radial-gradient(78% 62% at 50% 46%,rgba(6,4,2,.86) 0%,rgba(6,4,2,.62) 62%,rgba(6,4,2,.42) 100%),
    linear-gradient(to bottom,rgba(6,4,2,.5),rgba(6,4,2,.44) 50%,rgba(6,4,2,.6));}

/* Hero-оверлей */
#hero{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;z-index:3}
#hero .kick{font-size:13px;letter-spacing:.5em;text-transform:uppercase;color:var(--accent-2);margin-bottom:22px}
#hero h1{font-size:clamp(64px,13vw,190px);color:#f6ecdc;letter-spacing:.02em;text-shadow:0 20px 60px rgba(0,0,0,.6)}
#hero .sub{margin-top:14px;font-size:clamp(15px,1.5vw,20px);letter-spacing:.05em;color:rgba(246,236,220,.82);max-width:540px}
#hero .rating{margin-top:26px;display:flex;align-items:center;gap:10px;font-size:14px;letter-spacing:.08em;color:rgba(246,236,220,.9)}
#hero .rating b{color:var(--accent-2);font-family:var(--font-head);font-size:22px}
.scroll-cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:3;color:rgba(246,236,220,.7)}
.scroll-cue .line{width:1px;height:46px;background:linear-gradient(to bottom,transparent,var(--accent-2));animation:cue 2.4s ease-in-out infinite}
.scroll-cue span{font-size:11px;letter-spacing:.32em;text-transform:uppercase}
@keyframes cue{0%,100%{transform:scaleY(.5);opacity:.4;transform-origin:top}50%{transform:scaleY(1);opacity:1;transform-origin:top}}

/* Подписи на плато */
.caption{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;padding:0 24px;z-index:3;opacity:0;pointer-events:none}
.caption .idx{font-size:13px;letter-spacing:.5em;color:var(--accent-2);text-transform:uppercase;margin-bottom:18px;
  text-shadow:0 2px 16px rgba(0,0,0,.85)}
.caption h2{font-size:clamp(40px,7vw,104px);color:#f6ecdc;text-shadow:0 20px 60px rgba(0,0,0,.55)}
.caption p{margin:18px auto 0;max-width:560px;font-size:clamp(15px,1.6vw,19px);line-height:1.6;color:rgba(246,236,220,.85)}

/* ============================================================
   Контент-секции (после скролл-кино)
   ============================================================ */
main{position:relative;z-index:2;background:var(--bg);transition:background-color .8s ease}
section.block{position:relative;padding:130px 0}
.eyebrow{font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}
.sec-title{font-size:clamp(38px,5.5vw,74px);color:var(--ink);margin-bottom:16px}
.lead{font-size:clamp(16px,1.7vw,20px);line-height:1.65;color:var(--ink-soft);max-width:620px}

/* Услуги */
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:64px}
.card{
  position:relative;padding:42px 40px;border-radius:16px;overflow:hidden;
  background:var(--panel);border:1px solid var(--panel-brd);
  box-shadow:var(--shadow);backdrop-filter:blur(6px);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .5s;
}
.card::after{content:'';position:absolute;inset:0;background-image:var(--wood-tex);
  background-size:520px auto;mix-blend-mode:var(--wood-blend);opacity:calc(var(--wood-op) * .6);pointer-events:none}
.card:hover{transform:translateY(-6px);border-color:var(--accent)}
.card h3{font-size:31px;color:var(--ink);margin-bottom:12px;position:relative;z-index:1;letter-spacing:-.01em}
.card p{font-size:15.5px;line-height:1.62;color:var(--ink-soft);position:relative;z-index:1}
/* Метка стоит только там, где это правда: общий пар упоминают почти в каждом отзыве.
   Это иерархия по факту, а не декоративная нумерация. */
.card .tag{position:relative;z-index:1;display:inline-block;margin-bottom:16px;padding:5px 12px;
  border:1px solid var(--accent);border-radius:30px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.card.is-signature{border-color:var(--accent)}

/* Отзывы */
.rev-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.rev-score{text-align:right;flex:none}
.rev-score .big{font-family:var(--font-head);font-size:76px;color:var(--accent-2);line-height:1}
.rev-score .stars{color:var(--accent-2);letter-spacing:4px;font-size:16px;margin-top:4px}
.rev-score .cnt{font-size:13px;letter-spacing:.14em;color:var(--ink-faint);text-transform:uppercase;margin-top:6px}
.reviews{columns:3;column-gap:22px;margin-top:60px}
.review{
  position:relative;overflow:hidden;
  break-inside:avoid;margin-bottom:22px;padding:30px 30px 28px;border-radius:14px;
  background:var(--panel);border:1px solid var(--panel-brd);box-shadow:var(--shadow);
  transition:border-color .5s,transform .5s cubic-bezier(.2,.7,.2,1);
}
.review::after{content:'';position:absolute;inset:0;background-image:var(--wood-tex);
  background-size:520px auto;mix-blend-mode:var(--wood-blend);opacity:calc(var(--wood-op) * .5);pointer-events:none}
.review:hover{border-color:var(--accent);transform:translateY(-4px)}
.review > *{position:relative;z-index:1}
.review .quote{font-family:var(--font-head);font-size:34px;color:var(--accent);line-height:0;height:16px;display:block}
.review p{font-size:15px;line-height:1.62;color:var(--ink);margin:8px 0 18px}
.review .who{display:flex;align-items:center;justify-content:space-between;gap:12px}
.review .who .nm{font-size:14px;font-weight:600;color:var(--ink)}
.review .who .dt{font-size:12px;color:var(--ink-faint);letter-spacing:.06em}

/* Инфо */
.info-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;margin-top:60px}
.info-card{padding:44px 44px;border-radius:16px;background:var(--panel);border:1px solid var(--panel-brd);box-shadow:var(--shadow)}
.info-row{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--hairline)}
.info-row:last-child{border-bottom:0}
.info-row .ic{flex:none;width:22px;color:var(--accent);margin-top:2px}
.info-row .ic svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.6}
.info-row .k{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:5px}
.info-row .v{font-size:16px;color:var(--ink);line-height:1.5}
.info-row .v a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hairline);transition:color .3s,border-color .3s}
.info-row .v a:hover{color:var(--accent-2);border-color:var(--accent-2)}
.hours{display:flex;flex-direction:column;gap:8px}
.hours .hr{display:flex;justify-content:space-between;font-size:15px}
.hours .hr .d{color:var(--ink-soft)}
.hours .hr .t{color:var(--ink);font-variant-numeric:tabular-nums}

/* CTA */
.cta-wrap{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:40px;
  font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:.08em;
  text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .3s,box-shadow .3s,background-color .3s,color .3s;
}
.btn-primary{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:var(--accent-ink);box-shadow:0 14px 30px -12px var(--accent)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 40px -14px var(--accent)}
.btn-ghost{background:transparent;border-color:var(--hairline);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent-2);color:var(--accent-2)}
.btn svg{width:17px;height:17px}

/* Финальный CTA-блок */
.finale{text-align:center;padding:150px 0 40px}
.finale h2{font-size:clamp(44px,7vw,110px);color:var(--ink);margin-bottom:22px}
.finale .lead{margin:0 auto 34px}
.finale .cta-wrap{justify-content:center}

/* Футер */
footer{padding:50px 0 60px;border-top:1px solid var(--hairline);text-align:center}
footer .brand{font-size:22px;margin-bottom:14px;display:inline-block}
footer .fmeta{font-size:13px;color:var(--ink-faint);letter-spacing:.06em;line-height:1.8}
footer .fmeta a{color:var(--ink-soft);text-decoration:none}
footer .fmeta a:hover{color:var(--accent-2)}

/* Появление секций при скролле */
.reveal{opacity:0;transform:translateY(38px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* Плавный скролл Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* ---------- Бирюза бассейна как второй акцент ---------- */
.rev-score .big{color:var(--water)}
.review .quote{color:var(--water)}
#hero .rating b{color:var(--accent-2)}
.hours .hr .t{color:var(--water);font-weight:600}
.info-row .ic svg{stroke:var(--water)}

/* ---------- Фокус с клавиатуры ---------- */
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:4px}
.theme-toggle:focus-visible{outline-offset:4px}

/* ---------- Уважение к prefers-reduced-motion ----------
   Кадры остаются (это содержание), гасим только декоративное движение. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .scroll-cue .line{animation:none}
}