/* ============================================================
   Drinksy Catering — base layer (reset, type, shared UI)
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  background:var(--ink);
  color:var(--on-dark);
  font-family:var(--font-text);
  font-size:var(--t-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

img,video,svg{display:block;max-width:100%;}
button{font-family:inherit;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--yellow);color:var(--ink);}

h1,h2,h3,h4,p{margin:0;}

/* ---- Display / text helpers ------------------------------ */
.display{
  font-family:var(--font-display);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:var(--tracking-display);
  line-height:.88;
}
.scrawl{
  font-family:var(--font-scrawl);
  font-weight:400;
  line-height:.7;
  /* плейсхолдер росчерка — заменить вектором из брендбука */
}
.kicker{
  font-weight:700;
  font-size:var(--t-kicker);
  letter-spacing:var(--tracking-kicker);
  text-transform:uppercase;
}
.kicker--crimson{color:var(--crimson);} /* только на светлом: на ink кримзон 2.6:1 */
.kicker--yellow{color:var(--yellow);}   /* кикеры на тёмных секциях */
.kicker--muted{color:var(--on-dark-3);}

/* ---- Meta layer (технический регистр, лечит «крупно») ----
   мелкие индексы секций, счётчики, спеки, реквизиты. TT Norms + трекинг,
   tabular-nums — без моно-вебфонта (Кириллица в system-mono падает в sans). */
.meta{
  font-family:var(--font-text);font-weight:600;
  font-size:var(--t-meta);letter-spacing:var(--tracking-meta);
  text-transform:uppercase;font-variant-numeric:tabular-nums;
  color:var(--on-dark-3);
}
.on-light .meta{color:var(--on-light-3);}
.meta__i{color:var(--yellow);}            /* индекс-акцент на тёмном */
.on-light .meta__i{color:var(--crimson);} /* на светлом жёлтый нельзя */

/* ---- Line / word rise reveal (маска снизу) --------------
   .line маскирует, .line__in поднимается; JS вешает .is-in (+per-word delay). */
.line{display:block;overflow:hidden;padding-bottom:.08em;}
.line__in{display:inline-block;transform:translateY(112%);transition:transform .82s var(--ease-rise);will-change:transform;}
.line.is-in .line__in{transform:translateY(0);}

/* ---- Buttons --------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  border:0;
  border-radius:var(--r-pill);
  font-family:var(--font-text);
  font-weight:700;
  font-size:14px;
  letter-spacing:.02em;
  padding:16px 30px;
  min-height:var(--tap);
  cursor:pointer;
  transition:transform var(--dur-fast) var(--ease),
             background var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease);
}
.btn .btn__arrow{transition:transform var(--dur-fast) var(--ease);}
.btn:hover .btn__arrow{transform:translateX(4px);}
.btn--yellow{background:var(--yellow);color:var(--ink);}
.btn--yellow:hover{background:#ffe54d;}
.btn--crimson{background:var(--crimson);color:#fff;}
.btn--crimson:hover{background:#bd2030;}
.btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45);text-transform:uppercase;font-size:12px;letter-spacing:.06em;padding:11px 22px;}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.06);}
.btn--solid-light{background:#fff;color:var(--ink);}
.btn--solid-light:hover{background:#f0ece2;}

/* ---- Media holder (метки спеки, ТЗ п.7) ------------------ */
/* Самодостаточный ЧБ-плейсхолдер: тёмная фактура + зерно через ::before.
   Реальный файл кладётся как <img>/<video> внутрь .media, метка остаётся. */
.media{
  position:relative;
  overflow:hidden;
  background:#101010;
  border-radius:var(--r-card);
}
.media::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 30% 20%,rgba(255,255,255,.06),transparent 55%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.018) 0 2px,transparent 2px 6px),
    linear-gradient(160deg,#1a1a1a,#0c0c0c 70%);
  z-index:0;
}
.media>img,.media>video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  /* Грейд собирается из переменных-слотов; классы .media--* переопределяют их
     на холдере, значения наследуются в img/video. Единая настройка — в tokens.css. */
  filter:grayscale(var(--g-gray,1)) contrast(var(--g-contrast,1.12))
         brightness(var(--g-bright,.74)) saturate(var(--g-sat,1));
}

/* ---- Грейд-режимы: смена ОДНОГО класса на холдере, без правки разметки/JS ----
   .media--bw       всегда ч/б (+чуть контраста)
   .media--color    всегда цвет
   .media--bw-hover ч/б по умолчанию, плавно в цвет на ховере (на тач — цвет сразу) */
.media--bw{--g-contrast:var(--grade-bw-contrast,1.18);}            /* g-gray=1 по умолчанию */
.media--color{--g-gray:0;--g-sat:var(--grade-color-sat,1.05);}
.media--bw-hover{--g-gray:0;--g-sat:var(--grade-color-sat,1.05);}  /* тач/без мыши: цвет сразу (п.9) */

@media (hover:hover) and (pointer:fine){
  /* при настоящей мыши bw-hover в покое ч/б, в цвет — по ховеру.
     Цель ховера — сам холдер ИЛИ его hover-группа (когда текст лежит поверх медиа). */
  .media--bw-hover{--g-gray:1;--g-sat:1;}
  .media--bw-hover .media__img{
    transition:filter var(--grade-dur,.32s) var(--ease),transform .36s var(--ease);
    will-change:filter,transform;
  }
  .media--bw-hover:hover,
  [data-hover-group]:hover .media--bw-hover{
    --g-gray:0;--g-bright:var(--grade-hover-bright,1);--g-sat:var(--grade-hover-sat,1.12);
  }
  .media--bw-hover:hover .media__img,
  [data-hover-group]:hover .media--bw-hover .media__img{transform:scale(var(--grade-zoom,1.06));}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){
  /* reduced-motion (только мышь): мгновенная смена грейда, без зума */
  .media--bw-hover .media__img{transition:none;will-change:auto;}
  .media--bw-hover:hover .media__img,
  [data-hover-group]:hover .media--bw-hover .media__img{transform:none;}
}
.media__spec{
  position:absolute;z-index:3;top:12px;left:12px;
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:var(--r-tag);
  padding:5px 9px;
  font-weight:600;font-size:8px;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;white-space:nowrap;
}
.media__spec .rec{
  width:6px;height:6px;border-radius:50%;background:var(--yellow);
  animation:dkBlink 2s infinite;
}
/* метка спеки — продакшн-маркер пустого слота. Все реальные ассеты залиты
   (24.07.2026), на бою метки скрыты целиком: у клик-плей видео и lazy-слотов
   is-loaded до взаимодействия не наступает, и метка мигала поверх готового
   кадра. Разметка меток остаётся — это карта спек для подмены файлов. */
.media__spec{display:none;}
.media__center{
  position:absolute;z-index:2;top:50%;left:50%;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  color:var(--on-dark-3);text-align:center;pointer-events:none;
}
.media__plus{
  font-family:var(--font-display);font-weight:900;font-size:34px;
  color:rgba(255,255,255,.22);line-height:1;
}
.media--photo{border:1px dashed rgba(255,255,255,.26);background:#101010;}

/* ken burns на медиа (гасится reduced-motion). */
.kenburns{animation:dkKB 24s ease-in-out infinite alternate;will-change:transform;}
/* битый файл (404) прячем — виден ЧБ-плейсхолдер .media; класс ставит motion.js.
   Живые картинки видимы сразу: нативный src + loading=lazy, без JS-пробы. */
.media__img.is-missing{visibility:hidden;}

/* play button (хроника) — настоящая <button>, доступна с клавиатуры */
.play{
  position:absolute;z-index:2;top:50%;left:50%;
  width:56px;height:56px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.85);
  background:transparent;padding:0;cursor:pointer;
  transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.play::after{
  content:"";width:0;height:0;margin-left:3px;
  border-left:12px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;
}

/* ---- Film grain + vignette ------------------------------- */
/* Зерно — один слой-маска поверх всего (в т.ч. всех медиа), одинаковая интенсивность
   и на ч/б, и на цвете. Держит медиа в одном стиле независимо от съёмки. Сила — токеном. */
.grain{
  position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;opacity:var(--grain-opacity,.05);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Grade debug (вкл/выкл одной строкой: класс grade-debug на <html>) ----
   Показывает на каждом холдере его грейд-класс и файл — чтобы вживую решать ч/б или цвет. */
.media__debug{
  position:absolute;z-index:6;left:8px;bottom:8px;display:none;pointer-events:none;
  max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--font-text);font-weight:700;font-size:9px;letter-spacing:.03em;
  background:var(--yellow);color:var(--ink);padding:3px 7px;border-radius:2px;
}
html.grade-debug .media__debug{display:inline-block;}
html.grade-debug .media{outline:1px solid rgba(255,216,3,.45);outline-offset:-1px;}
html.grade-debug .segment__media{z-index:6;}  /* в дебаге поднимаем фото сегментов, чтобы метка читалась */

/* ---- Reveal (initial state, JS flips to .is-in) ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);will-change:opacity,transform;}
.reveal.is-in{opacity:1;transform:none;}
/* без JS контент не прячем: reveal и line-rise раскрыты статично */
html:not(.has-js) .reveal{opacity:1;transform:none;}
html:not(.has-js) .line__in{transform:none;}

/* якорные переходы не ныряют под фиксированную шапку */
section[id],footer[id],main[id]{scroll-margin-top:96px;}

/* ---- Keyframes ------------------------------------------- */
@keyframes dkDraw{from{clip-path:inset(0 100% -25% 0);}to{clip-path:inset(0 -10% -25% 0);}}
@keyframes dkKB{0%{transform:scale(1.05);}100%{transform:scale(1.18);}}
@keyframes dkRise{from{transform:translateY(120%);}to{transform:translateY(0);}}
@keyframes dkBlink{0%,70%{opacity:1;}85%{opacity:.2;}100%{opacity:1;}}
@keyframes dkFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(7px);}}
@keyframes dkFadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* ---- Focus (доступность, ТЗ п.12) ------------------------ */
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px;border-radius:2px;}
.on-light :focus-visible{outline-color:var(--crimson);}

/* скрытый служебный текст для скринридеров */
.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;
}
.skip-link{
  position:fixed;top:-60px;left:16px;z-index:100000;
  background:var(--yellow);color:var(--ink);padding:10px 16px;border-radius:4px;
  font-weight:700;transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus{top:16px;}

/* ---- Custom cursor (десктоп, pointer:fine) --------------- */
.dk-ring,.dk-dot{
  position:fixed;top:0;left:0;z-index:var(--z-cursor);pointer-events:none;
  transform:translate(-50%,-50%);mix-blend-mode:difference;
}
.dk-ring{
  min-width:38px;height:38px;border:1.5px solid #fff;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-text);font-weight:700;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;white-space:nowrap;
  transition:min-width var(--dur-fast) var(--ease),height var(--dur-fast) var(--ease),
             background .25s,color .25s,border-color .25s;
}
.dk-dot{width:5px;height:5px;background:#fff;border-radius:50%;transition:opacity .2s;}
@media (pointer:fine){
  .dk-cursor-on,.dk-cursor-on *{cursor:none;}
}

/* ---- prefers-reduced-motion ------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1 !important;transform:none !important;}
  .line__in{transform:none !important;}
  /* грейд медиа теперь задаётся классами .media--* (статичен, без анимации) — не трогаем */
}