/* Surprise · New Balance Food — общий фундамент v0.3. Все секции используют только эти токены. */
@font-face{font-family:"Robotron";src:url("../fonts/robotron.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Onest";src:url("../fonts/onest.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  color-scheme: dark;
  /* нейтрали: чёрная сцена с тёплым подтоном (мир — тёмный зал, медь, хром) */
  --bg:#000000;
  --bg-2:#0c0b0a;          /* утопленный слой */
  --bg-3:#171513;          /* поднятый слой: контролы, табло */
  --bg-4:#24211e;          /* hover */
  --ink:#F2F0ED;           /* основной текст */
  --ink-2:#B9B4AE;         /* вторичный текст (≥7:1 на #000) */
  --ink-3:#8A847D;         /* третичный, только ≥18px */
  /* бренд */
  --gold:#ECC96D;
  --orange:#F96C00;
  --on:radial-gradient(circle at 35% 30%,#F6DA8E 0%,#F1B04F 45%,#F7801F 100%);   /* ТОЛЬКО состояние «включено» */
  --sphere-1:#EB6727; --sphere-2:#E53320; --sphere-3:#EC9737; /* тёплая сфера сплэша */
  --paper:#F2F0ED; --paper-ink:#0b0a09;

  /* шрифты: Robotron — табло, числа, имя; Onest — текст */
  --f-dot:"Robotron",ui-monospace,monospace;
  --f-text:"Onest",-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;

  /* шкала: 5 шагов */
  --t-display:clamp(56px,8vw,128px);   /* имя SURPRISE в hero; точный размер подгоняет hero.js по ширине блока */
  --t-h2:clamp(32px,4vw,60px);
  --t-lead:clamp(20px,1.8vw,28px);
  --t-body:17px;
  --t-small:15px;

  /* сетка 4px, поля, ритм */
  --m:max(20px,4.5vw);
  --gap:clamp(120px,13vw,220px);
  /* скругления — шкала брендбука Surprise (приложение): */
  --r-badge:8px;   /* мелкие плашки, бейджи */
  --r-input:12px;  /* поля ввода */
  --r-card:16px;   /* карточки */
  --r-card-l:20px; /* крупные карточки — самый частый */
  --r-sheet:30px;  /* шторка */
  --r-dialog:34px; /* диалог */
  --r-pill:999px;  /* капсула: кнопки, чипы, сегменты */
  --r:var(--r-card-l);

  /* движение: одна кривая, три длительности */
  --ease:cubic-bezier(.16,1,.3,1);
  --d-fast:180ms; --d-mid:600ms; --d-slow:1100ms;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)} /* оттяжка скролла (rubber-band) показывает фон html — делаем его чёрным */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-text);font-weight:300;font-size:var(--t-body);line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:50;background:var(--bg)}
img,canvas,video{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:400;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
/* переносы: без одиночных слов в последней строке абзаца */
p,li,dd,figcaption{text-wrap:pretty}
/* страховка от бокового скролла страницы на телефоне: clip не создаёт scroll-контейнер и не ломает sticky */
main{overflow-x:clip}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.frame{padding-left:max(var(--m),env(safe-area-inset-left,0px));padding-right:max(var(--m),env(safe-area-inset-right,0px))}
.sec{padding-top:var(--gap)}
.dot-type{font-family:var(--f-dot);font-weight:400;letter-spacing:.02em}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 32px;border:0;border-radius:999px;background:var(--paper);color:var(--paper-ink);font-weight:500;cursor:pointer;text-decoration:none;transition:transform var(--d-fast) var(--ease),background var(--d-fast)}
.btn:hover{background:#fff}.btn:active{transform:scale(.97)}
.btn-2{background:var(--bg-3);color:var(--ink)}.btn-2:hover{background:var(--bg-4)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rv{transition:opacity var(--d-slow) var(--ease),transform var(--d-slow) var(--ease)}
.js .rv:not(.in){opacity:0;transform:translateY(24px)}
@media (prefers-reduced-motion:reduce){.js .rv:not(.in){opacity:1;transform:none}*{scroll-behavior:auto!important}}