/* Сайт Julio — стилі. Токени бренду — brand\brand.md (каруселі Julio). */

/* ── Шрифти: локальні файли (СТ-05 — Google не отримує IP відвідувачів). Ліцензія OFL. ── */
/* Заголовки — Fira Sans Extra Condensed 800: вузький високий, як на макеті В (вибір Юри 11.10). */
@font-face { font-family: 'Fira Sans Extra Condensed'; font-style: normal; font-weight: 800; font-display: swap;
  src: url(../fonts/fira-xcond-800-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Fira Sans Extra Condensed'; font-style: normal; font-weight: 800; font-display: swap;
  src: url(../fonts/fira-xcond-800-lat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Literata'; font-style: italic; font-weight: 600; font-display: swap;
  src: url(../fonts/literata-600i-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Literata'; font-style: italic; font-weight: 600; font-display: swap;
  src: url(../fonts/literata-600i-lat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Manrope — змінний шрифт: один файл на всі товщини 400–700. */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/manrope-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/manrope-lat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── Токени ── */
:root {
  --bg: #1F1813;        /* еспресо-мока */
  --surface: #17110E;
  --surface-2: #1A1411;
  --line: #3A2C24;
  --mocha: #5C4334; --mocha-2: #7B5B46;
  --sand: #D9C4A6;      /* акцент-світло */
  --skin: #EBD9C2;      /* слово-акцент, свічення */
  --text: #F4EBDF;
  --text-2: #CDBBA3; --muted: #9E8C79;
  --ok: #BFD3B0; --err: #E0A79A;
  --glow: 0 0 28px #EBD9C2aa;
  --cta: linear-gradient(180deg, #F1E3CF, #CDB491); --cta-text: #1A1411;
  --head: 'Fira Sans Extra Condensed', 'Arial Narrow', sans-serif;
  --title: #F7E8D2;     /* теплий кремовий заголовок (макет В) */
  --title-glow: 0 0 22px rgba(240, 205, 160, .38), 0 0 2px rgba(255, 236, 210, .45);
  --accent: 'Literata', Georgia, serif;
  --body: 'Manrope', system-ui, sans-serif;
  --gutter: clamp(16px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font: 500 16px/1.45 var(--body); }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--skin); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Кнопки ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px;
  border-radius: 999px; font: 700 18px/1 var(--body); text-decoration: none; cursor: pointer; border: 0;
  transition: transform .2s ease, box-shadow .2s ease; }
.btn-cta { padding: 20px 40px; background: var(--cta); color: var(--cta-text);
  box-shadow: 0 0 40px #D9C4A655, 0 14px 30px #0008; }
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 0 56px #D9C4A688, 0 18px 34px #0009; }
.btn-cta:active { transform: translateY(0); }
.btn-ghost { padding: 12px 22px; font: 600 15px/1 var(--body); color: var(--text);
  border: 1px solid #D9C4A699; background: #17110E99; }
.btn-ghost:hover { border-color: var(--sand); }
.pill { display: inline-flex; gap: 10px; padding: 9px 20px; border: 1px solid #D9C4A666; border-radius: 999px;
  font: 600 12px/1 var(--body); letter-spacing: .22em; color: var(--sand); background: #17110Ecc; }

/* ── Шапка ── */
.bar { position: absolute; inset: 0 0 auto; z-index: 3; display: flex; align-items: center; justify-content: space-between;
  padding: 28px var(--gutter); }
.logo { font: 700 26px/1 var(--body); letter-spacing: -.02em; color: var(--text); text-decoration: none; }
.nav { display: flex; gap: 48px; }
.nav a { color: var(--text-2); text-decoration: none; font-size: 15px; }
.nav a:hover { color: var(--text); }

/* ── Перший екран: світ за піском + стіна піску (js/sand-wall.js) ── */
.hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; touch-action: pan-y; isolation: isolate; }
/* Світ за піском: тут Джуліо щось робить — видно лише крізь щілини й «подихи» піску. */
.world { position: absolute; inset: 0; z-index: -2; background: var(--bg) url(../img/world/hero-ski.webp) 50% 25% / cover no-repeat; }
/* Вхід (Юра 14.10, «логічно, як завантаження»): сцена схована, доки картинка не ціла (інакше на повільному інтернеті вона
   домальовувалась смугами). Скрипт устиг до запасного показу — js/sand-wall.js ставить .wait (запасний таймер вимкнено),
   а коли сцена розпакована — .in → м'яко проявляється. Без JS (або скрипт дуже пізно) — сама через 6 с, без повтору.
   will-change — назавжди окремий шар: зняти його = перемалювати сцену посеред падіння піску. */
.world { opacity: 0; will-change: opacity; animation: world-in .45s ease-out 6s forwards; }
.world.wait { animation: none; }
.world.wait.in { animation: world-in-go .45s ease-out forwards; }   /* інша назва — завжди нова поява з нуля */
@keyframes world-in { to { opacity: 1; } }
@keyframes world-in-go { from { opacity: 0; } to { opacity: 1; } }
/* Значок завантаження — пісочний годинник по центру. З'являється, лише якщо сцена вантажиться довше ніж 0,7 с
   (на швидкому інтернеті його не видно взагалі); зникає, щойно сцена ціла (.world.in), без JS — сам через 6 с. */
.hero-load { position: absolute; left: 50%; top: 46%; z-index: 1; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  opacity: 0; pointer-events: none; animation: load-in .5s ease .7s forwards, load-out .3s ease 6s forwards; }
/* Скрипт керує сценою (.wait) — запасне згасання вимкнено: годинник крутиться, доки сцена не ціла.
   .in — згасає з тієї прозорості, яка є зараз: load-in лишається в списку, load-hide — нова, стартує в мить .in
   (load-out залишено — якщо запасний таймер уже сховав годинник, той не з'явиться знову). */
.world.wait ~ .hero-load { animation: load-in .5s ease .7s forwards; }
.world.in ~ .hero-load { animation: load-in .5s ease .7s forwards, load-out .3s ease 6s forwards, load-hide .3s ease forwards; }
@keyframes load-in { to { opacity: 1; } }
@keyframes load-out { to { opacity: 0; visibility: hidden; } }
@keyframes load-hide { to { opacity: 0; visibility: hidden; } }
.hero-load svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 12px rgba(233, 184, 114, .45));
  animation: load-flip 2.4s cubic-bezier(.6, 0, .3, 1) infinite; }
/* Пісок перетікає згори вниз, наприкінці годинник перевертається — і знову. Лише transform/opacity. */
.hero-load .hl-top, .hero-load .hl-bot { transform-box: fill-box; transform-origin: 50% 100%; }
.hero-load .hl-top { animation: hl-top 2.4s linear infinite; }
.hero-load .hl-bot { animation: hl-bot 2.4s linear infinite; }
.hero-load .hl-stream { animation: hl-stream 2.4s linear infinite; }
@keyframes hl-top { from { transform: scaleY(1); } 82%, to { transform: scaleY(.08); } }
@keyframes hl-bot { from { transform: scaleY(.12); } 82%, to { transform: scaleY(1); } }
@keyframes hl-stream { from, 80% { opacity: 1; } 84%, to { opacity: 0; } }
@keyframes load-flip { from, 84% { transform: rotate(0); } to { transform: rotate(180deg); } }
/* Плавний перехід у секції: низ першого екрана м'яко тоне в тлі сторінки (Юра 12.10: «різкий перехід»). */
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 32%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(31, 24, 19, 0) 0%, rgba(31, 24, 19, .55) 45%, var(--bg) 100%); }
.hero-copy { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); width: min(92vw, 1040px);
  text-align: center; pointer-events: none; }
.hero-copy .btn { pointer-events: auto; }
/* Плавний вхід (Юра 14.10): коли пісок ліг (js/main.js додає .ready), по черзі м'яко проявляються
   бейдж → заголовок → кнопка, із легким підйомом. Лише opacity/transform; «backwards» — після появи
   кнопка знову живе своїми стилями (наведення). Без JS — самі через 14 с (пісок на 3G може чекати сцену до 6 с,
   а запасний показ не має збігтися з входом — інакше текст з'явився б і зник).
   Поки чекаємо — текст прозорий, але вже намальований (will-change): у мить появи відеокарта лише міняє прозорість,
   без першого малювання великого заголовка із сяйвом (раніше visibility:hidden давало 2–3 пропущені кадри).
   Невидиму кнопку не можна натиснути — pointer-events у ключовому кадрі. */
.hero-copy > * { animation: hero-in .9s cubic-bezier(.2, .7, .2, 1) 14s backwards; }
.hero-copy > * { will-change: opacity, transform; }   /* назавжди: зняти = ще раз перемалювати текст (ривок) */
/* Скрипт запустився вчасно (js/main.js) — запасний таймер не потрібен: текст прихований, доки пісок не ляже. */
.hero.wait .hero-copy > * { animation: none; opacity: 0; pointer-events: none; }
.hero.ready .hero-copy > * { animation-name: hero-in-go; animation-delay: 0s; }
.hero.ready .hero-copy > :nth-child(2) { animation-delay: .16s; }
.hero.ready .hero-copy > :nth-child(3) { animation-delay: .38s; }
@keyframes hero-in { from { opacity: 0; pointer-events: none; transform: translateY(16px); } }
@keyframes hero-in-go { from { opacity: 0; pointer-events: none; transform: translateY(16px); } }
.hero h1 { margin: 24px auto 18px; font: 800 clamp(52px, 6.4vw, 104px)/.98 var(--head); letter-spacing: -.005em; color: var(--title);
  text-shadow: var(--title-glow); }
.hero h1 em { display: block; font-family: var(--accent); font-style: italic; font-weight: 600; letter-spacing: -.02em; color: #E9CDA6;
  text-shadow: 0 0 26px rgba(235, 200, 150, .65); }
.hero-sub { color: var(--text-2); font-size: clamp(16px, 1.4vw, 20px); text-shadow: 0 1px 10px #000; }
.hero .btn-cta { margin-top: 34px; }
.hero-hint { margin-top: 14px; font-size: 13px; color: var(--text-2); letter-spacing: .02em; text-shadow: 0 1px 8px #000, 0 0 2px #000; }

/* Лічильник кадрів — лише з ?fps у адресі (для перевірки швидкості). */
.fps { position: fixed; right: 12px; bottom: 12px; z-index: 50; font: 600 12px/1 var(--body);
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: #17110Ecc; color: var(--text); }

@media (max-width: 767px) {
  .world { background-image: url(../img/world/world-1-ski-m.webp); background-position: 40% 50%; }
  .nav { display: none; }
  .bar { padding: 18px 16px; }
  /* Юра 13.10: текст нижче — без порожнечі внизу першого екрана. */
  .hero-copy { top: 46%; transform: translate(-50%, -50%); }
  .hero .btn-cta { margin-top: 46px; }
  .hero h1 { font-size: min(10.2vw, 60px); }
  /* Як у референсі: верхній рядок компактний, головне «для кого» — велике (Юра 13.10). */
  .hero h1 em { font-size: 1.42em; line-height: .92; margin-top: 6px; }
  .btn-cta { padding: 18px 28px; font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .hero-load svg, .hero-load svg * { animation: none !important; }   /* безкінечні — інакше мерехтіли б */
}