/* =====================================================================
   So Cold — ГЛАВНАЯ. Обычная прокрутка, без залипания экрана.
   Обложка → страница мультяшного комикса о бабушке (кадры влетают,
   реплики выскакивают, бабушка идёт по лесу вместе с прокруткой,
   в финале её живое фото приколото к странице) → Амга большими
   кадрами с параллаксом → узор прорисовывается → витрина.
   ===================================================================== */
html.is-home { scroll-behavior: smooth; }
.hm-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hm { padding: 0; overflow-x: clip; }

/* ---------- обложка ---------- */
.hm-cover { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.hm-cover-art { position: absolute; inset: -6% 0 -6%; }
.hm-cover-art img { width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 50%); }
.hm-cover::after { content: ""; position: absolute; inset: auto 0 0; height: 55%; background: linear-gradient(to top, var(--sc-paper) 0%, rgba(233, 233, 231, .7) 40%, rgba(233, 233, 231, 0)); pointer-events: none; }
.hm-cover-copy { position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: clamp(56px, 10vh, 110px); z-index: 2; animation: hm-rise 1100ms var(--sc-ease-out) 200ms backwards; }
.hm-cover-copy h1 { margin: 12px 0 0; font-size: clamp(96px, 18vw, 280px); line-height: .8; }
.hm-cover-sub { max-width: 36ch; margin: 18px 0 0; font-size: clamp(16px, 1.4vw, 20px); font-weight: 300; color: var(--sc-ink-2); }
.hm-down { position: absolute; right: var(--sc-gutter); bottom: clamp(56px, 10vh, 110px); z-index: 2; color: var(--sc-ink-2); text-decoration: none; animation: hm-bob 2.4s ease-in-out infinite; }
@keyframes hm-rise { from { opacity: 0; transform: translateY(30px); } }
@keyframes hm-bob { 50% { transform: translateY(6px); opacity: .55; } }

/* снег */
.hm-snow { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(2px 2px at 12% 20%, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 38% 60%, #fff 50%, transparent 52%), radial-gradient(2.5px 2.5px at 64% 30%, #fff 50%, transparent 52%), radial-gradient(1.6px 1.6px at 82% 75%, #fff 50%, transparent 52%), radial-gradient(2px 2px at 52% 88%, #fff 50%, transparent 52%), radial-gradient(1.4px 1.4px at 24% 82%, #fff 50%, transparent 52%); background-size: 220px 160px; opacity: .8; animation: hm-snow 12s linear infinite; }
@keyframes hm-snow { to { background-position: 40px 160px; } }

/* ---------- заголовок главы ---------- */
.cm-title { padding: clamp(96px, 14vw, 180px) var(--sc-gutter) clamp(32px, 4vw, 56px); }
.cm-title h2 { margin: 14px 0 0; font-size: clamp(56px, 10vw, 150px); }

/* ---------- страница комикса ---------- */
.cm-page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); padding: 0 var(--sc-gutter); }
.cm-panel { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 6px; background: var(--sc-paper-2); box-shadow: 0 0 0 2px var(--sc-ink); }
.cm-panel--wide, .cm-panel--walk { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.cm-art { position: absolute; inset: -8% 0; }
.cm-art img { width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 50%); }
.cm-panel.is-boil .cm-art img { filter: url(#hmBoil); }

/* влёт кадра */
[data-anim] { opacity: 0; transform: translateY(48px) rotate(var(--rot, -.6deg)) scale(.97); transition: opacity 700ms ease, transform 1000ms cubic-bezier(.2, .9, .25, 1.15); }
[data-anim].is-in { opacity: 1; transform: none; }
.cm-page .cm-panel:nth-child(even) { --rot: .8deg; }

/* подпись-плашка рассказчика */
.cm-box { position: absolute; left: 14px; top: 14px; z-index: 3; max-width: 70%; margin: 0; padding: 8px 12px; background: var(--sc-paper-hi); box-shadow: 0 0 0 1.5px var(--sc-ink); font-family: var(--sc-font-mono); font-size: 12px; letter-spacing: var(--sc-track-mono); text-transform: lowercase; opacity: 0; transform: translateX(-12px); transition: opacity 400ms ease 500ms, transform 600ms var(--sc-ease-out) 500ms; }
.cm-box--br { left: auto; top: auto; right: 14px; bottom: 14px; }
.is-in .cm-box { opacity: 1; transform: none; }

/* реплика */
.cm-bubble { position: absolute; left: var(--bx, 50%); top: var(--by, 10%); z-index: 3; margin: 0; padding: 12px 18px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1.5px var(--sc-ink); font-size: clamp(14px, 1.4vw, 19px); font-weight: 400; line-height: 1.2; white-space: nowrap; opacity: 0; transform: scale(.3) rotate(-6deg); transform-origin: 20% 120%; transition: opacity 200ms ease 900ms, transform 520ms cubic-bezier(.34, 1.7, .64, 1) 900ms; }
.cm-bubble::before { content: ""; position: absolute; left: 20px; bottom: -14px; width: 22px; height: 17px; background: var(--sc-ink); clip-path: polygon(0 0, 100% 0, 8% 100%); }
.cm-bubble::after { content: ""; position: absolute; left: 22px; bottom: -11px; width: 18px; height: 14px; background: #fff; clip-path: polygon(0 0, 100% 0, 10% 100%); }
.cm-bubble--think { border-radius: 30px; }
.cm-bubble--think::before { clip-path: circle(50%); width: 12px; height: 12px; bottom: -18px; left: 26px; }
.cm-bubble--think::after { clip-path: circle(50%); width: 7px; height: 7px; bottom: -28px; left: 20px; background: var(--sc-ink); }
.is-in .cm-bubble { opacity: 1; transform: none; }

/* «звёздочка» находки */
.cm-sfx { position: absolute; left: var(--sx, 34%); top: var(--sy, 30%); z-index: 3; font-size: clamp(40px, 5vw, 72px); line-height: 1; color: #fff; text-shadow: 0 0 18px rgba(255, 255, 255, .9); opacity: 0; transform: scale(0) rotate(-90deg); transition: opacity 200ms ease 700ms, transform 700ms cubic-bezier(.34, 1.7, .64, 1) 700ms; }
.is-in .cm-sfx { opacity: 1; transform: none; animation: cm-twinkle 2.4s ease-in-out 1.6s infinite; }
@keyframes cm-twinkle { 50% { transform: scale(.82) rotate(20deg); opacity: .7; } }

/* бабушка идёт по лесу вместе с прокруткой */
.cm-walker { position: absolute; z-index: 2; bottom: 3%; left: 0; height: 78%; width: auto; transform: translateX(var(--wx, -30%)); will-change: transform; }
.cm-panel--walk.is-in .cm-walker { animation: cm-step 760ms ease-in-out infinite; }
@keyframes cm-step { 0%, 100% { translate: 0 0; rotate: -1.2deg; } 50% { translate: 0 -2.2%; rotate: 1.2deg; } }

/* тёплый свет */
.cm-warm { position: absolute; left: 70%; top: 30%; width: 50vmax; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 196, 120, .32), transparent 70%); mix-blend-mode: soft-light; animation: cm-breath 4s ease-in-out infinite; }
@keyframes cm-breath { 50% { opacity: .55; scale: 1.06; } }

/* живое фото, приколотое к странице */
.cm-real { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(28px, 5vw, 80px); padding: clamp(64px, 9vw, 120px) var(--sc-gutter) 0; --rot: 4deg; }
.cm-polaroid { position: relative; justify-self: center; width: min(100%, 420px); margin: 0; padding: 14px 14px 46px; background: #fff; box-shadow: 0 30px 60px -30px rgba(29, 29, 28, .5); transform: rotate(-2.5deg); transition: transform 600ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .cm-polaroid:hover { transform: rotate(0) scale(1.02); } }
.cm-polaroid img { width: 100%; aspect-ratio: 9 / 14; object-fit: cover; filter: saturate(0) contrast(1.05); transition: filter 1600ms ease 600ms; }
.cm-real.is-in .cm-polaroid img { filter: none; }
.cm-polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; color: var(--sc-ink-2); }
.cm-tape { position: absolute; left: 50%; top: -14px; z-index: 1; width: 120px; height: 30px; translate: -50% 0; rotate: 3deg; background: rgba(220, 220, 214, .8); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

/* общий крупный текст */
.st-big { margin: 0; font-family: var(--sc-font-display); font-weight: var(--sc-w-display); letter-spacing: var(--sc-track-display); text-transform: lowercase; font-size: clamp(40px, 6vw, 96px); line-height: .95; color: var(--sc-ink); text-wrap: balance; }
.st-sub { margin: 16px 0 0; max-width: 46ch; font-size: clamp(15px, 1.3vw, 18px); font-weight: 300; line-height: 1.45; color: var(--sc-ink-2); }

/* ---------- амга: большие кадры ---------- */
.ch-shot { position: relative; margin: 0 var(--sc-gutter) clamp(20px, 3vw, 40px); height: min(86svh, 820px); overflow: hidden; border-radius: 18px; }
.ch-art { position: absolute; inset: -10% 0; }
.ch-art img { width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 50%); }
.ch-shot::after { content: ""; position: absolute; inset: auto 0 0; height: 50%; background: linear-gradient(to top, rgba(233, 233, 231, .9), rgba(233, 233, 231, 0)); pointer-events: none; }
.ch-cap { position: absolute; left: clamp(20px, 3vw, 44px); right: clamp(20px, 3vw, 44px); bottom: clamp(24px, 4vw, 48px); z-index: 2; max-width: 820px; }
.ch-shot--right .ch-cap { left: auto; text-align: right; }
.ch-shot--right .st-sub { margin-left: auto; }
.ch-cap > * { opacity: 0; transform: translateY(16px); transition: opacity 600ms ease 300ms, transform 800ms var(--sc-ease-out) 300ms; }
.ch-shot.is-in .ch-cap > * { opacity: 1; transform: none; }
.st-river { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(100deg, transparent 0 46px, rgba(255, 255, 255, .14) 47px 48px, transparent 49px 92px); mix-blend-mode: screen; animation: st-river 7s linear infinite; -webkit-mask-image: radial-gradient(60% 70% at 50% 55%, #000, transparent); mask-image: radial-gradient(60% 70% at 50% 55%, #000, transparent); }
@keyframes st-river { to { background-position: 92px 0; } }

/* ---------- узор: прорисовывается по мере прокрутки ---------- */
.uz { margin: 0 var(--sc-gutter); aspect-ratio: 3 / 2; max-height: 86svh; overflow: hidden; border-radius: 18px; background: #e6e6e3; }
.uz img { width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 50%); -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--w, 0) * 120% - 20%), transparent calc(var(--w, 0) * 120%)); mask-image: linear-gradient(90deg, #000 calc(var(--w, 0) * 120% - 20%), transparent calc(var(--w, 0) * 120%)); }
.uz-copy { padding: clamp(32px, 4vw, 56px) var(--sc-gutter) 0; max-width: 1000px; }
.uz-copy .sc-btn { margin-top: 28px; }

/* ---------- витрина ---------- */
.hm-shop { padding: clamp(96px, 12vw, 160px) var(--sc-gutter) 0; }
.hm-shop-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(32px, 4vw, 56px); }
.hm-shop-head h2 { margin: 0; font-size: clamp(56px, 9vw, 132px); }

/* ---------- телефон ---------- */
@media (max-width: 767px) {
  .hm-cover-art img { object-position: 30% 50%; }
  .hm-down { display: none; }
  .cm-page { grid-template-columns: minmax(0, 1fr); }
  .cm-panel, .cm-panel--wide, .cm-panel--walk { aspect-ratio: 4 / 3; }
  .cm-walker { height: 66%; }
  .cm-bubble { font-size: 14px; padding: 9px 13px; white-space: normal; max-width: 48%; }
  .cm-real { grid-template-columns: minmax(0, 1fr); }
  .ch-shot { height: 78svh; border-radius: 14px; }
  .ch-shot--right .ch-cap { text-align: left; left: clamp(20px, 3vw, 44px); }
  .ch-shot--right .st-sub { margin-left: 0; }
  .uz { aspect-ratio: 4 / 5; }
}

@media (prefers-reduced-motion: reduce) {
  html.is-home { scroll-behavior: auto; }
  [data-anim], .cm-box, .cm-bubble, .cm-sfx, .ch-cap > * { opacity: 1; transform: none; transition: none; }
  .hm-snow, .cm-warm, .st-river, .hm-down, .cm-walker, .cm-sfx, .hm-cover-copy { animation: none !important; }
  .uz img { -webkit-mask-image: none; mask-image: none; }
}