/* =====================================================================
   KAIJU landing — 01 Snowpark · 02 Products · 03 Technologies ·
   04 Journal · 05 Creators (06 Footer lives in kaiju.css).
   One white surface; rhythm comes from image scale, grid changes,
   alignment shifts, section numbering and hairlines.
   ===================================================================== */

/* ---------- section scaffold ---------- */
.l-section {
  padding: clamp(96px, 10vw, 168px) 0 0;
}

.l-section:last-child {
  padding-bottom: clamp(96px, 10vw, 168px);
}

.l-head {
  margin-bottom: clamp(36px, 4.5vw, 72px);
}

.l-head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-top: 22px;
}

.text-btn--arrow span {
  display: inline-block;
  transition: transform 0.4s var(--ease);
}

.text-btn--arrow:hover span {
  transform: translateX(3px);
}

/* scroll reveal (only when JS runs) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s var(--ease), transform 1.1s var(--ease);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

.no-todo [data-todo] {
  display: none;
}

.todo-tag {
  display: inline-block;
  margin-top: 10px;
  padding: 2px 6px;
  border: 1px dashed currentColor;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}

/* =====================================================================
   PLACEHOLDERS — animation slots and missing photos
   ===================================================================== */
.anim-slot {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%);
  aspect-ratio: var(--ar);
  z-index: var(--z);
  pointer-events: none;
}

.anim-slot-asset,
.anim-slot-asset > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 989px) {
  .anim-slot {
    left: calc(var(--mx) * 1%);
    top: calc(var(--my) * 1%);
    width: calc(var(--mw) * 1%);
  }
  .anim-slot[data-mobile-hidden] {
    display: none;
  }
}

.anim-ph {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(17, 17, 17, 0.5);
  background: repeating-linear-gradient(-45deg, transparent 0 9px, rgba(17, 17, 17, 0.05) 9px 10px);
  font-family: var(--font-mono);
  color: var(--ink);
}

/* Over the photo: white line + dark hairline reads on light and dark parts. */
.snowpark .anim-ph {
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.14), inset 0 0 0 1px rgba(17, 17, 17, 0.08);
  background: repeating-linear-gradient(-45deg, transparent 0 9px, rgba(255, 255, 255, 0.14) 9px 10px);
}

.anim-ph-corner,
.ph-photo .anim-ph-corner {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 0 solid var(--accent);
}

.anim-ph-corner.is-tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.anim-ph-corner.is-tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.anim-ph-corner.is-bl { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.anim-ph-corner.is-br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

.anim-ph-tag {
  position: absolute;
  left: 8px;
  max-width: calc(100% - 16px);
  padding: 3px 6px;
  background: var(--surface);
  font-family: var(--font-ui);
  font-size: 9px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.anim-ph-tag b {
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--accent);
  margin-right: 6px;
}

.anim-ph-tag.is-top { top: 8px; }
.anim-ph-tag.is-bottom { bottom: 8px; }

.anim-ph-coord {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  font-size: 9px;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0.7;
}

.snowpark .anim-ph-coord {
  color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  opacity: 1;
}

/* The gaze marker previews the cursor input a real asset will get. */
.anim-ph-gaze {
  position: absolute;
  left: calc(50% + var(--look-x, 0) * 28%);
  top: calc(42% + var(--look-y, 0) * 22%);
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 calc(var(--near, 0) * 10px) rgba(214, 22, 111, 0.12);
}

.anim-ph-gaze::before,
.anim-ph-gaze::after {
  content: "";
  position: absolute;
  background: var(--accent);
}

.anim-ph-gaze::before { left: 50%; top: -5px; bottom: -5px; width: 1px; }
.anim-ph-gaze::after { top: 50%; left: -5px; right: -5px; height: 1px; }

@media (max-width: 599px) {
  .anim-ph-tag.is-bottom,
  .anim-ph-coord {
    display: none;
  }
}

/* missing photo */
.ph-photo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--bg) repeating-linear-gradient(-45deg, transparent 0 11px, var(--hatch) 11px 12px);
  text-align: center;
}

.ph-photo-label {
  padding: 4px 8px;
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ph-photo-meta {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =====================================================================
   01 — SNOWPARK
   ===================================================================== */
.snowpark {
  position: relative;
  /* видео начинается сразу под шапкой, а не за ней */
  padding-top: var(--header-h);
}

/* The hero media keeps its own proportions: --fx / --fy drive both the
   media's object-position and the stage offset below. */
.snowpark-view {
  --fx: 0.5;
  --fy: 0.3;
  position: relative;
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  min-height: 460px;
  overflow: hidden;
  container-type: size;
  background: var(--bg-soft);
}

.snowpark-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: calc(var(--fx) * 100%) calc(var(--fy) * 100%);
  transform: translate3d(0, var(--hero-shift, 0px), 0);
  background: #0e0e10;
  pointer-events: none;
}

video.snowpark-photo::-webkit-media-controls {
  display: none !important;
}

/* Exactly the box the covered video occupies (1928 × 1076), so animation
   slots stay glued to the scene at every crop. */
.snowpark-stage {
  --sw: max(100cqw, 100cqh * 1.79182);
  --sh: max(100cqh, 100cqw * 0.55809);
  position: absolute;
  width: var(--sw);
  height: var(--sh);
  left: calc((100cqw - var(--sw)) * var(--fx));
  top: calc((100cqh - var(--sh)) * var(--fy));
  transform: translate3d(0, var(--hero-shift, 0px), 0);
  pointer-events: none;
}

/* Снег живёт между видео и интерфейсом: кликам не мешает. */
.snow-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* Copy sits top-left under the header (calm part of the photo, and it
   never collides with the cookie notice in the bottom-left corner). */
.snowpark-ui {
  position: absolute;
  inset: calc(var(--header-h) + 20px) var(--gutter) calc(24px + env(safe-area-inset-bottom));
  pointer-events: none;
}

.snowpark-ui > * {
  position: absolute;
}

.snowpark-card {
  top: 0;
  left: 0;
}

.snowpark-next {
  right: 0;
  bottom: 0;
}

.snowpark-ui > * {
  pointer-events: auto;
}

/* Local backdrop instead of darkening the photo. */
.snowpark-card {
  width: min(380px, 100%);
  padding: 20px 22px 16px;
  background: var(--surface-glass);
}

.snowpark-card .t-h1 {
  margin-top: 16px;
}

.snowpark-lead {
  margin: 8px 0 10px;
  font-size: 12px;
  color: var(--ink-2);
}

.snowpark-next {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  background: var(--surface-glass);
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Entrance: pure CSS animations, so the hero is never invisible when a
   script fails or is blocked — the media, the copy and the slots simply
   fade in on their own. JS only adds .is-ready for anything that wants to
   know the hero settled. */
@keyframes snowpark-media-in {
  from {
    opacity: 0;
    scale: 1.025;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes snowpark-ui-in {
  from {
    opacity: 0;
    translate: 0 8px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.js .snowpark-photo {
  animation: snowpark-media-in 1.2s var(--ease) both;
}

.js .snowpark-ui > * {
  animation: snowpark-ui-in 0.9s var(--ease) 0.5s both;
}

.js .snowpark-stage {
  animation: snowpark-ui-in 0.9s var(--ease) 1s both;
}

@media (prefers-reduced-motion: reduce) {
  .js .snowpark-photo,
  .js .snowpark-ui > *,
  .js .snowpark-stage {
    animation: none;
  }
}

/* Portrait / small screens: the photo sits under the header in its own
   frame (faces never under the nav), with a crop that keeps both riders,
   and the caption follows below on white. */
@media (max-width: 989px), (max-aspect-ratio: 1/1) {
  .snowpark-view {
    --fx: 0.9;
    --fy: 0.5;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .snowpark-ui {
    position: static;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 20px var(--gutter) 0;
  }
  .snowpark-ui > * {
    position: static;
  }
  .snowpark-card {
    padding: 0;
    background: none;
    width: auto;
  }
  .snowpark-next {
    padding: 0 0 6px;
    background: none;
    flex-shrink: 0;
  }
}

@media (max-width: 767px) {
  .snowpark-view {
    /* в кадре держим обоих персонажей и открытый шкафчик справа */
    --fx: 0.68;
    aspect-ratio: 20 / 21;
  }
  .snowpark-next {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 989px) {
  .snowpark-view {
    aspect-ratio: 4 / 3;
  }
}

/* =====================================================================
   02 — PRODUCTS (editorial)
   ===================================================================== */
.products-ed-track {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 20px;
  align-items: start;
}

.ped-card {
  min-width: 0;
}

.ped-card--hero {
  grid-column: 1 / span 5;
}

.ped-card--compact {
  grid-column: 7 / span 3;
  margin-top: clamp(48px, 9vw, 150px);
}

.ped-card--compact-low {
  grid-column: 10 / span 3;
  margin-top: clamp(140px, 22vw, 340px);
}

.ped-scene {
  position: relative;
}

.ped-media {
  position: relative;
  z-index: 3;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg-muted);
}

.ped-card--hero .ped-media {
  aspect-ratio: 4 / 5;
}

.ped-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease), opacity 0.7s ease;
}

.ped-media img.alt {
  opacity: 0;
}

.ped-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 14px;
  align-items: baseline;
  margin-top: 14px;
  transition: transform 0.6s var(--ease);
}

.ped-idx {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
}

.ped-name {
  font-size: 12px;
  text-transform: uppercase;
  line-height: 1.4;
  min-width: 0;
}

.ped-price {
  white-space: nowrap;
}

.ped-price s {
  color: var(--muted);
  margin-left: 6px;
}

.ped-flags {
  grid-column: 1 / -1;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.ped-card--compact-low .ped-meta {
  grid-template-columns: minmax(0, 1fr);
}

.ped-card--compact-low .ped-price {
  grid-column: 1;
}

@media (hover: hover) {
  .ped-card:not(.is-placeholder):hover .ped-media img:only-child,
  .ped-card:not(.is-placeholder):hover .ped-media img:first-child {
    transform: scale(1.02);
  }
  .ped-card:hover .ped-media img.alt {
    opacity: 1;
  }
  .ped-card:not(.is-placeholder):hover .ped-meta {
    transform: translateX(4px);
  }
  .ped-name:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* Mobile: one large card, the next one peeking in from the right. */
@media (max-width: 767px) {
  .products-ed-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gutter);
    margin: 0 calc(var(--gutter) * -1);
    padding: 18vw var(--gutter) 4px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .products-ed-track::-webkit-scrollbar {
    display: none;
  }
  .ped-card {
    flex: 0 0 76vw;
    scroll-snap-align: start;
    margin-top: 0;
  }
  .ped-card--hero {
    flex-basis: 84vw;
  }
  .ped-card--hero .ped-media {
    aspect-ratio: 3 / 4;
  }
  .ped-card--compact-low .ped-meta {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .ped-card--compact-low .ped-price {
    grid-column: auto;
  }
  .products-ed .l-head {
    margin-bottom: 0;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .ped-card--hero {
    grid-column: 1 / span 7;
  }
  .ped-card--compact {
    grid-column: 8 / span 5;
    margin-top: 72px;
  }
  .ped-card--compact-low {
    grid-column: 3 / span 5;
    margin-top: 64px;
  }
}

/* =====================================================================
   03 — TECHNOLOGIES
   ===================================================================== */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 20px;
  align-items: start;
}

.tech-visual-col {
  grid-column: 1 / span 5;
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

.tech-visual {
  --fx: 50%;
  --fy: 50%;
  --zoom: 1;
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  max-height: calc(100svh - var(--header-h) - 64px);
  overflow: hidden;
  background: var(--bg-muted);
}

.tech-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fx) var(--fy);
  transform-origin: var(--fx) var(--fy);
  transform: scale(var(--zoom));
  transition: object-position 1.4s var(--ease), transform-origin 1.4s var(--ease), transform 1.4s var(--ease);
}

.tech-visual-cap {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
  background: var(--surface);
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tech-visual-note {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 3px 6px;
  background: var(--surface);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 9px;
}

.tech-copy {
  grid-column: 7 / span 6;
}

.tech-title {
  margin-bottom: clamp(24px, 3vw, 48px);
}

.tech-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.tech-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-height: 21vh;
  padding: 24px 0 32px;
  border-top: 1px solid var(--line);
}

.tech-item:last-child {
  min-height: 0;
}

.tech-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted-2);
  transition: color 0.6s ease;
}

.tech-body {
  opacity: 0.32;
  transition: opacity 0.7s ease;
}

.tech-code {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.tech-name {
  margin-top: 10px;
  font-weight: 400;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.tech-text {
  margin-top: 12px;
  max-width: 420px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-2);
}

.tech-item.is-active .tech-body {
  opacity: 1;
}

.tech-item.is-active .tech-num {
  color: var(--accent);
}

.tech-item.is-active {
  border-top-color: var(--ink);
}

@media (max-width: 989px) {
  .tech-grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .tech-visual-col {
    position: static;
    width: 100%;
  }
  .tech-visual {
    aspect-ratio: 4 / 3;
  }
  .tech-item {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: 20px 0 28px;
  }
  .tech-body {
    opacity: 1;
  }
}

/* =====================================================================
   05 — CREATORS
   ===================================================================== */
.creators-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 20px;
  align-items: start;
}

.cr-photo {
  position: relative;
  margin: 0;
}

.cr-photo--main {
  grid-column: 2 / span 6;
}

.cr-photo--main::before,
.cr-photo--second::before {
  content: "";
  display: block;
  aspect-ratio: 4 / 5;
}

.cr-photo--second::before {
  aspect-ratio: 3 / 4;
}

.cr-photo > img,
.cr-photo > .ph-photo {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.cr-photo--second > img,
.cr-photo--second > .ph-photo {
  aspect-ratio: 3 / 4;
}

.cr-cap {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cr-side {
  grid-column: 9 / span 4;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 7vw, 120px);
}

.cr-sub {
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.cr-lead {
  margin: 28px 0 16px;
  font-size: 15px;
  line-height: 1.5;
}

.cr-text .t-body + .t-body {
  margin-top: 10px;
}

.cr-photo--second {
  width: 72%;
  align-self: flex-end;
}

@media (max-width: 989px) {
  .creators-grid {
    display: flex;
    flex-direction: column;
    gap: 36px;
  }
  .cr-photo--main {
    width: 100%;
  }
  .cr-side {
    gap: 40px;
  }
  .cr-photo--second {
    width: 64%;
  }
}


/* =====================================================================
   MOBILE — плотность и ритм лендинга на телефоне
   ===================================================================== */
@media (max-width: 767px) {
  .l-section {
    padding-top: 64px;
  }

  /* первый блок после hero подтягиваем ближе — экран и так начинается с паузы */
  .snowpark + .l-section {
    padding-top: 44px;
  }

  .l-section:last-child {
    padding-bottom: 72px;
  }

  .l-head {
    margin-bottom: 24px;
  }

  .l-head-row {
    margin-top: 14px;
    align-items: flex-end;
  }

  /* место над карточками нужно только когда сверху сидит маскот */
  .products-ed-track {
    padding-top: 12px;
  }

  .products-ed-track.has-slots {
    padding-top: 18vw;
  }

  .ped-meta {
    margin-top: 12px;
  }

  .ped-flags,
  .jr-meta,
  .cr-cap {
    font-size: 11px;
  }

  /* название товара — самостоятельная цель нажатия рядом с большим фото */
  .ped-name {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* портреты не должны занимать по экрану каждый */
  .cr-photo--main::before {
    aspect-ratio: 3 / 4;
  }

  .cr-photo--main > img,
  .cr-photo--main > .ph-photo {
    aspect-ratio: 3 / 4;
  }

  .cr-photo--second {
    width: 58%;
  }

  .jr-side .jr-card {
    padding: 16px 0;
  }

  .tech-visual-cap {
    left: 8px;
    right: 8px;
    bottom: 8px;
  }
}

/* =====================================================================
   03b — РАЗБОР СЛОЁВ КУРТКИ
   Слева липкая сцена: фото куртки + слои, которые ложатся друг на друга.
   Справа характеристики; активная строка подсвечивает свой слой.
   ===================================================================== */
.tl {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 20px;
  align-items: start;
  margin-top: clamp(72px, 9vw, 140px);
}

.tl-stage-col {
  grid-column: 1 / span 5;
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

.tl-stage {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  max-height: calc(100svh - var(--header-h) - 64px);
  overflow: hidden;
  background: var(--bg-muted);
}

.tl-stage > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tl-layers {
  position: absolute;
  inset: 0;
}

/* Слой — пока техническая пластина: тонкая рамка, штриховка, номер.
   Реальный ассет встанет сюда как <img> и займёт ту же геометрию. */
.tl-layer {
  position: absolute;
  inset: 8% 8% 8% 8%;
  transform: translateY(calc(var(--i) * -2.2%)) scale(calc(1 - var(--i) * 0.03));
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  transition: opacity 0.7s var(--ease), clip-path 0.9s var(--ease), transform 0.9s var(--ease);
}

.tl-layer.is-shown {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

.tl-layer > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tl-layer-frame {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(255, 255, 255, 0.12) 10px 11px);
  box-shadow: 0 0 0 1px rgba(53, 53, 53, 0.18);
}

.tl-layer.is-active .tl-layer-frame {
  border-color: var(--pink);
  background: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(232, 193, 215, 0.3) 10px 11px);
}

.tl-layer-tag {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.tl-layer.is-active .tl-layer-tag {
  opacity: 1;
}

.tl-layer-tag b {
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--accent);
  margin-right: 6px;
}

.tl-cap {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tl-copy {
  grid-column: 7 / span 6;
}

.tl-title {
  margin-bottom: clamp(20px, 2.5vw, 36px);
}

.tl-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tl-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: baseline;
  padding: 22px 0 26px;
  border-top: 1px solid var(--line);
  cursor: pointer;
  transition: border-color 0.5s ease;
}

.tl-row:last-child {
  border-bottom: 1px solid var(--line);
}

.tl-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted-2);
  transition: color 0.5s ease;
}

.tl-body {
  opacity: 0.4;
  transition: opacity 0.5s ease;
}

.tl-code {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.tl-name {
  margin-top: 8px;
  font-weight: 800;
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.tl-text {
  margin-top: 10px;
  max-width: 420px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}

.tl-value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(18px, 2vw, 28px);
  letter-spacing: -0.03em;
  color: var(--line-strong);
  white-space: nowrap;
  transition: color 0.5s ease;
}

.tl-row.is-active {
  border-top-color: var(--ink);
}

.tl-row.is-active .tl-body {
  opacity: 1;
}

.tl-row.is-active .tl-num {
  color: var(--accent);
}

.tl-row.is-active .tl-value {
  color: var(--ink);
}

.tl-row:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

@media (max-width: 989px) {
  .tl {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 56px;
  }

  .tl-stage-col {
    position: static;
    width: 100%;
  }

  .tl-stage {
    aspect-ratio: 4 / 3;
  }

  .tl-row {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 18px 0 20px;
  }

  /* на телефоне все характеристики читаются сразу, без ожидания прокрутки */
  .tl-body {
    opacity: 1;
  }
}

/* =====================================================================
   ЗИМНИЕ ДЕТАЛИ
   1) Корка снега намерзает на верхней кромке карточек по мере прокрутки.
   2) Иней расползается по фото при наведении.
   Обе формы нарисованы вектором прямо в стилях. Узор двухтоновый —
   белый поверх тёмной подложки, поэтому читается и на студийном белом
   фоне, и на тёмных кадрах журнала.
   ===================================================================== */
[data-crust] {
  --crust: 0; /* 0…1, растёт при прокрутке (js/experience/winter.js) */
}

[data-crust]::before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: -1px;
  z-index: 4;
  height: calc(var(--crust) * 22px);
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 26' preserveAspectRatio='none'><path fill='%23fff' d='M0 0h200v10c-8 0-10 7-17 7s-9-7-16-6c-8 1-10 8-18 7c-7-1-9-7-17-6c-7 1-9 4-16 4c-7 0-9-5-17-5c-8 0-10 7-17 7s-9-6-17-6c-7 0-9 4-16 4c-7 0-10-5-17-5c-7 0-10 6-17 6s-9-6-15-6z'/><ellipse fill='%23fff' cx='133' cy='19' rx='3.4' ry='5.2'/><ellipse fill='%23fff' cx='66' cy='20' rx='2.6' ry='4.4'/><ellipse fill='%23fff' cx='24' cy='18' rx='2' ry='3.2'/></svg>") repeat-x top center / 200px 26px;
  opacity: calc(0.25 + var(--crust) * 0.75);
  pointer-events: none;
  transition: height 0.5s var(--ease), opacity 0.5s ease;
  filter: drop-shadow(0 2px 2px rgba(53, 53, 53, 0.3)) drop-shadow(0 0 1px rgba(53, 53, 53, 0.4));
}

/* --- 2. Иней: наползает от кромок к центру --------------------------- */
/* Регистрация свойства нужна, чтобы маска плавно анимировалась,
   а не переключалась рывком. */
@property --frost-in {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 108%;
}

@media (hover: hover) and (pointer: fine) {
  .ped-media::after,
  .jr-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'><defs><g id='f' fill='none' stroke-linecap='round'><path d='M15 0L18 11L22 22M15 500L14 490L13 481L12 471L10 461M46 0L45 9L43 18L41 27L39 36M46 500L48 490L51 480L53 470L55 461M77 0L77 12L78 23M77 500L77 490L77 480L77 470L77 460M108 0L107 9L105 18L104 28M108 500L108 488L108 477L108 465M138 0L138 10L137 21L136 31L136 41M138 500L137 489L136 478L135 467L134 457M169 0L171 11L174 22L178 33L181 43M169 500L168 489L166 478M200 0L200 10L199 21L199 31L199 42M200 500L199 489L198 478L196 467L194 456M231 0L232 10L233 20L234 30L235 40M231 500L232 489L232 477L234 466M262 0L262 11L262 22L261 32L262 43M262 500L260 489L258 479M292 0L295 11L298 21M292 500L294 491L296 481L297 472M323 0L321 11L320 23L318 34M323 500L323 490L321 479L320 469M354 0L353 9L351 18L350 27L349 36L349 45M354 500L356 488L359 476M385 0L384 11L383 22L382 33M385 500L384 491L384 482L384 473L384 463L384 454M0 17L10 17L20 18L30 18M400 17L390 16L379 16L369 17M0 50L12 50L24 50L35 49M400 50L390 49L380 47L370 45M0 83L9 84L18 84L27 86L37 86L46 87M400 83L388 80L376 78M0 117L11 115L22 115L32 113M400 117L389 115L378 114L367 113M0 150L11 152L22 153L33 155M400 150L390 152L379 154L369 157M0 183L11 182L22 181L33 180M400 183L389 185L378 186L367 187M0 217L11 219L22 222L33 224M400 217L390 217L381 217L371 217L362 217M0 250L10 252L20 255M400 250L389 251L377 252L366 253M0 283L10 286L20 288L30 290M400 283L390 285L380 286L369 288L359 289M0 317L12 314L25 311M400 317L389 315L379 313L368 311M0 350L11 351L22 352L33 353M400 350L390 353L380 356L369 360M0 383L10 382L21 380M400 383L389 386L377 389M0 417L11 415L23 413M400 417L389 414L378 411L367 408M0 450L9 448L19 447L28 445L37 443M400 450L391 448L382 446L373 444L364 442L355 440M0 483L11 484L22 484L33 484M400 483L390 485L380 487L370 489M0 0L7 8L15 16L22 24L29 32L35 41M0 0L4 9L7 18L10 27L12 36L15 46L17 55L20 64L23 74M0 0L9 2L18 4L27 6L36 8L45 10L54 12L63 15L72 17M0 0L4 9L8 18L13 27L16 37L20 46L24 55L27 65M400 0L392 5L383 10L375 14L366 18L357 22L348 26M400 0L397 9L394 18L391 27L388 36L385 45L382 54L378 63M400 0L392 4L384 9L376 14L368 19L361 24L353 29L345 34L337 39M400 0L393 8L386 17L379 25L372 34M0 500L9 495L17 491L26 486L35 482L44 478M0 500L8 495L16 490L24 484L31 479L39 473L46 467L53 461M0 500L5 492L10 483L15 475L20 467L25 459L31 451L36 443L41 435M0 500L5 491L10 482L14 474L19 465L24 456L29 447L34 438M400 500L391 497L381 494L372 491L363 488L353 485M400 500L395 492L389 483L384 475L378 467L373 458L368 450L362 442M400 500L395 491L390 482L385 473L380 465L375 456M400 500L392 494L383 489L375 483L366 478L358 473' stroke-width='1.0'/><path d='M14 490L10 487L6 484M14 490L17 485L19 480M13 481L10 478L6 475M13 481L16 476L19 471M12 471L8 467L4 462M12 471L15 467L17 464M43 18L46 22L49 26M43 18L40 21L37 24M48 490L46 485L44 481M48 490L52 487L55 485M51 480L49 476L47 473M51 480L55 477L60 474M78 23L76 25L74 28M77 490L73 486L70 482M77 490L79 486L82 483M77 470L74 465L70 461M77 470L80 467L82 463M77 460L74 456L71 453M77 460L80 455L83 451M107 9L109 12L110 16M107 9L104 11L102 14M104 28L102 30L99 33M108 477L106 474L104 471M108 477L111 473L114 470M138 10L142 15L145 20M138 10L134 15L130 19M137 21L139 24L142 28M137 21L133 25L129 28M136 31L140 35L143 40M136 31L132 36L128 40M136 41L139 45L143 48M136 41L134 45L131 48M137 489L133 485L129 481M137 489L141 484L145 479M136 478L132 475L129 472M136 478L139 473L143 468M135 467L131 464L128 460M135 467L138 463L141 459M171 11L177 15L182 19M171 11L169 15L166 20M174 22L179 25L183 27M174 22L172 27L170 32M181 43L186 46L190 50M181 43L178 49L176 55M168 489L170 486L171 483M199 21L203 26L206 30M199 21L195 25L191 29M199 42L202 46L205 51M199 42L196 45L193 49M199 489L195 485L192 482M199 489L202 484L205 480M232 10L235 13L238 16M232 10L229 14L227 18M233 20L237 23L241 27M233 20L230 24L228 29M234 30L238 34L242 38M234 30L231 34L228 39M232 477L230 474L227 470M232 477L235 474L238 471M234 466L231 463L229 459M234 466L236 464L239 461M262 11L265 15L269 19M262 11L259 14L256 18M261 32L265 37L269 42M261 32L257 37L253 42M262 43L265 48L269 53M262 43L259 47L256 51M297 472L295 469L293 465M297 472L300 470L302 468M321 11L324 15L326 19M321 11L318 14L314 17M320 23L322 26L324 30M320 23L316 26L312 29M321 479L319 477L316 474M321 479L323 476L325 473M320 469L317 466L314 463M320 469L323 465L325 461M353 9L356 15L360 20M353 9L349 12L345 15M350 27L353 32L357 36M350 27L345 31L340 36M349 45L352 50L355 55M349 45L345 49L341 53M359 476L357 473L355 470M384 11L386 14L388 17M384 11L381 14L378 16M383 22L385 25L387 27M383 22L381 24L379 27M382 33L384 35L386 38M382 33L379 36L375 40M384 482L379 477L375 473M384 482L388 477L392 472M384 463L380 460L377 456M384 463L387 459L391 455M384 454L380 450L376 446M384 454L387 450L391 446M10 17L12 15L15 13M10 17L13 20L17 23M20 18L23 16L26 13M20 18L24 21L27 24M30 18L33 17L36 15M30 18L33 21L35 23M379 16L376 19L372 21M379 16L376 13L374 11M369 17L366 19L364 21M369 17L366 14L362 11M24 50L27 47L30 44M24 50L27 53L31 56M390 49L387 50L385 52M390 49L388 46L385 43M370 45L366 47L363 49M370 45L368 43L366 41M9 84L13 81L17 78M9 84L13 87L16 91M18 84L22 81L26 78M18 84L23 89L27 94M27 86L32 83L37 80M27 86L31 90L35 93M37 86L42 83L47 80M37 86L41 91L45 95M46 87L50 83L55 80M46 87L50 92L55 96M376 78L373 80L370 82M376 78L374 76L372 73M11 115L14 112L16 109M11 115L15 118L19 121M389 115L386 117L382 119M389 115L386 112L384 108M11 152L14 150L17 148M11 152L14 155L17 158M22 153L26 151L30 148M22 153L25 157L29 161M390 152L387 155L385 158M390 152L385 150L381 147M379 154L377 158L374 161M379 154L375 152L371 150M11 182L14 179L18 175M11 182L15 185L19 187M22 181L26 178L30 175M22 181L25 183L28 186M33 180L36 177L40 174M33 180L37 183L41 186M389 185L386 188L382 192M389 185L385 182L381 179M378 186L375 189L373 191M378 186L374 183L370 181M367 187L365 190L362 193M367 187L364 186L361 184M11 219L15 218L19 216M11 219L14 223L16 228M22 222L25 220L29 218M22 222L25 225L28 229M33 224L37 222L41 220M33 224L35 228L38 231M381 217L378 220L375 223M381 217L377 214L372 212M362 217L358 220L354 224M362 217L358 214L354 210M20 288L24 286L27 284M20 288L22 291L25 294M30 290L35 288L39 287M30 290L33 294L36 297M390 285L387 288L384 291M390 285L385 282L380 279M380 286L375 290L371 295M380 286L374 283L369 280M369 288L366 291L363 295M369 288L365 286L361 283M359 289L355 294L351 298M359 289L355 286L350 283M25 311L28 312L31 314M389 315L385 317L382 319M389 315L386 311L383 307M379 313L375 315L372 317M379 313L376 310L373 307M368 311L365 313L361 315M368 311L365 308L361 304M22 352L25 350L28 348M22 352L24 355L27 357M33 353L36 351L39 349M33 353L36 357L39 360M390 353L388 356L386 359M390 353L386 352L382 350M380 356L378 360L376 363M380 356L376 355L372 353M369 360L368 363L366 366M369 360L366 359L363 357M377 389L375 392L374 395M377 389L375 388L372 387M23 413L26 415L28 417M389 414L385 415L381 417M389 414L386 410L384 406M378 411L374 413L370 415M378 411L376 407L373 404M367 408L364 409L360 410M367 408L365 405L363 401M37 443L40 439L44 435M37 443L42 446L47 449M391 448L386 451L381 454M391 448L387 444L382 439M382 446L378 448L373 450M382 446L379 442L375 437M355 440L351 442L346 444M355 440L352 436L349 432M11 484L15 481L19 478M11 484L14 487L17 490M33 484L35 482L37 480M33 484L36 487L39 490M390 485L388 488L386 491M390 485L387 484L385 482M380 487L378 489L375 492M380 487L377 485L373 483M370 489L368 492L366 494M370 489L366 487L363 485M15 16L21 17L27 18M15 16L15 23L16 30M29 32L35 33L41 34M29 32L28 39L28 46M35 41L41 42L47 43M35 41L35 46L35 52M4 9L12 14L21 18M4 9L1 19L-2 30M10 27L18 32L25 38M10 27L7 35L4 43M12 36L21 41L29 47M12 36L9 44L6 52M15 46L22 50L30 55M15 46L11 54L6 62M17 55L26 61L34 68M17 55L14 63L10 71M23 74L32 79L40 85M23 74L18 84L13 94M9 2L16 -1L22 -5M9 2L15 11L21 19M18 4L27 -1L36 -6M18 4L25 13L32 21M27 6L35 2L43 -2M27 6L34 14L41 23M45 10L53 6L61 1M45 10L50 18L55 26M63 15L73 10L83 6M63 15L69 23L74 31M72 17L81 13L89 9M72 17L77 24L82 31M4 9L12 12L20 15M4 9L3 17L0 24M8 18L16 23L24 28M8 18L6 27L3 35M16 37L25 42L34 46M16 37L14 46L11 54M24 55L32 60L39 64M24 55L21 65L18 74M27 65L35 70L43 75M27 65L24 72L21 79M392 5L389 11L387 17M392 5L384 4L376 3M383 10L380 18L377 25M383 10L375 8L367 6M375 14L371 21L369 27M375 14L368 13L361 12M366 18L363 24L360 30M366 18L360 16L354 14M348 26L344 33L341 39M348 26L339 23L331 21M397 9L401 18L404 27M397 9L389 13L381 18M394 18L397 26L400 34M394 18L386 23L378 28M391 27L394 35L398 43M391 27L382 32L374 37M388 36L390 43L393 49M388 36L381 40L375 45M382 54L385 63L388 72M382 54L375 58L368 61M378 63L380 70L382 77M378 63L370 67L362 71M392 4L388 12L385 20M392 4L382 1L372 -2M368 19L366 27L364 34M368 19L361 19L353 18M361 24L359 32L357 40M361 24L350 23L339 22M353 29L350 38L347 47M353 29L344 28L334 26M345 34L343 42L341 51M345 34L336 32L326 30M337 39L335 47L332 54M337 39L328 38L319 37M393 8L393 15L393 21M393 8L387 9L382 10M386 17L386 23L386 30M386 17L380 18L373 18M379 25L379 31L379 37M379 25L374 26L369 26M372 34L372 40L373 47M372 34L366 35L361 36M9 495L11 489L13 483M9 495L16 496L22 497M17 491L20 484L22 478M17 491L24 493L31 495M26 486L28 481L30 476M26 486L32 488L37 489M8 495L10 488L13 482M8 495L17 496L25 498M16 490L18 483L19 476M16 490L23 490L31 491M24 484L26 476L29 468M24 484L31 486L39 487M31 479L33 472L34 465M31 479L40 480L48 481M39 473L40 466L43 459M39 473L45 473L52 474M46 467L48 460L50 452M46 467L55 468L64 469M53 461L54 455L56 448M53 461L62 462L71 461M5 492L3 481L2 470M5 492L13 489L20 486M15 475L13 467L11 458M15 475L25 471L36 467M20 467L19 456L17 444M20 467L28 464L36 462M25 459L24 448L23 437M25 459L34 456L43 454M36 443L34 433L33 423M36 443L46 439L56 436M41 435L39 424L38 413M41 435L51 432L62 429M5 491L3 481L2 472M5 491L15 488L24 484M10 482L8 472L7 462M10 482L17 479L25 476M14 474L12 464L10 455M14 474L22 470L30 467M24 456L22 448L20 440M24 456L31 453L38 451M391 497L385 500L378 503M391 497L387 491L383 485M381 494L376 496L371 498M381 494L378 489L375 484M372 491L366 494L360 496M372 491L369 487L366 482M353 485L348 488L343 491M353 485L350 480L346 474M395 492L385 488L376 485M395 492L396 483L398 475M389 483L381 480L372 478M389 483L391 473L392 464M384 475L376 473L369 471M384 475L384 466L385 456M378 467L370 464L361 462M378 467L379 460L380 453M373 458L366 456L359 454M373 458L375 449L377 439M368 450L358 447L349 443M368 450L369 443L370 436M362 442L354 440L346 439M362 442L363 432L364 422M395 491L389 489L383 486M395 491L397 485L398 479M380 465L375 463L369 461M380 465L381 460L382 454M375 456L369 454L363 451M375 456L376 450L378 443M392 494L386 494L379 495M392 494L391 489L389 484M383 489L377 490L370 490M383 489L381 483L379 477M375 483L370 484L364 485M375 483L373 478L372 473M366 478L361 479L355 479M366 478L364 472L362 465M358 473L353 473L348 474M358 473L356 467L354 461' stroke-width='0.38'/></g></defs><use href='%23f' stroke='%232a2a2a' stroke-opacity='.38' transform='translate%281%2C1%29'/><use href='%23f' stroke='%23ffffff' stroke-opacity='.92'/></svg>") no-repeat center / 100% 100%;
    opacity: 0;
    /* прозрачная «полынья» в центре сжимается — узор наступает внутрь */
    -webkit-mask-image: radial-gradient(125% 115% at 50% 50%, transparent var(--frost-in), #000 calc(var(--frost-in) + 26%));
    mask-image: radial-gradient(125% 115% at 50% 50%, transparent var(--frost-in), #000 calc(var(--frost-in) + 26%));
    transition: opacity 0.5s ease, --frost-in 1s cubic-bezier(0.22, 1, 0.3, 1);
    pointer-events: none;
  }

  .ped-card:hover .ped-media::after,
  .jr-card:hover .jr-media::after {
    opacity: 0.85;
    --frost-in: 10%;
  }

  /* кадр слегка выстывает: чуть меньше цвета, тонкая ледяная кромка */
  .ped-card .ped-media,
  .jr-card .jr-media {
    transition: box-shadow 0.6s ease;
  }

  .ped-card:hover .ped-media,
  .jr-card:hover .jr-media {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  }

  .ped-card:hover .ped-media img,
  .jr-card:hover .jr-media img {
    filter: saturate(0.9) brightness(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-crust]::before,
  .ped-media::after,
  .jr-media::after {
    display: none;
  }
}

/* Кадры большой карточки: перелистываются прокруткой */
.ped-frame {
  opacity: 0;
  transition: opacity 0.55s ease;
}

.ped-frame.is-on {
  opacity: 1;
}

/* =====================================================================
   МАСКОТ
   Персонаж из брендбука выныривает из-за нижней кромки кадра, стоит на
   полу в просвете между райдерами, поглядывает на курсор и прячется.
   Подрез «по доске» не используется: на движущемся видео он читался бы
   как прямоугольный срез.
   ===================================================================== */
#slot-mascot-board .anim-slot-asset {
  overflow: hidden; /* прячет персонажа, пока он «под кромкой» */
  transform: translate(calc(var(--look-x, 0) * 6px), calc(var(--look-y, 0) * 3px));
  transition: transform 1s var(--ease);
}

#slot-mascot-board img {
  object-fit: contain;
  object-position: bottom center;
  transform-origin: 50% 100%;
  animation: mascot-peek 15s cubic-bezier(0.22, 1, 0.3, 1) infinite;
  filter: drop-shadow(0 10px 12px rgba(16, 16, 20, 0.5));
}

@keyframes mascot-peek {
  0%, 8% { transform: translateY(104%) rotate(0deg); }
  14% { transform: translateY(16%) rotate(-2deg); }
  19% { transform: translateY(4%) rotate(1.5deg); }
  26% { transform: translateY(0) rotate(-1deg); }
  34% { transform: translateY(-2%) rotate(1deg); }
  41% { transform: translateY(0) rotate(-1.5deg); }
  48% { transform: translateY(22%) rotate(2deg); }
  56%, 100% { transform: translateY(104%) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  #slot-mascot-board img {
    animation: none;
    transform: translateY(0);
  }
}

/* =====================================================================
   ЖУРНАЛ — живой 3D-журнал (js/home/journal3d.js)
   Журнал лежит на «столе» на весь экран под шапкой: заголовок и шкала
   прогресса — одной строкой сверху, стрелки — по бокам поверх сцены.
   Страницу тянут за край, бросают с инерцией; стрелки, клик и ← →
   листают через ту же физику.
   ===================================================================== */
.jr3 {
  position: relative;
  margin-top: clamp(64px, 8vw, 140px);
}

.jr3-sticky {
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  min-height: 560px;
  max-height: 1180px;
  padding-top: 10px;
}

.jr3-head {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  width: 100%;
}

.jr3-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.jr3-track {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--line);
}

.jr3-track span {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.jr3-now {
  margin: 0;
  min-width: 9em;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.jr3-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  outline: none;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}

.jr3.is-ready .jr3-stage,
.jr3.is-flat .jr3-stage {
  opacity: 1;
}

.jr3-stage:focus-visible {
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.jr3-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y; /* вертикальный свайп — прокрутка, горизонтальный — страница */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.jr3-stage.is-grab canvas {
  cursor: grab;
}

.jr3-stage.is-grabbing canvas {
  cursor: grabbing;
}

.jr3-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  margin: 0;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.jr3-hint.is-off {
  opacity: 0;
}

/* стрелки — по краям сцены, по центру высоты */
.jr3-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface-glass);
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.3s ease, scale 0.3s var(--ease);
}

.jr3-btn--prev {
  left: var(--gutter);
}

.jr3-btn--next {
  right: var(--gutter);
}

.jr3-btn:disabled {
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) {
  .jr3-btn:not(:disabled):hover {
    background: var(--ink);
    color: var(--on-ink);
    scale: 1.06;
  }
}

/* без WebGL: плоские развороты лентой */
.jr3.is-flat .jr3-sticky {
  height: auto;
  min-height: 0;
}

.jr3.is-flat .jr3-btn,
.jr3.is-flat .jr3-hint,
.jr3.is-flat .jr3-track {
  display: none;
}

.jr3-flat {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding: 24px var(--gutter);
  scroll-snap-type: x mandatory;
}

.jr3-flat-spread {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  scroll-snap-align: center;
  box-shadow: 0 18px 40px -20px var(--shadow);
}

.jr3-flat-page {
  display: block;
  height: min(70vh, 120vw);
  width: auto;
}

/* телефон: одна полоса на всю ширину, стрелки внизу по краям */
@media (max-width: 767px) {
  .jr3-sticky {
    min-height: 520px;
    max-height: 900px;
  }

  .jr3-now {
    min-width: 0;
    font-size: 10px;
  }

  .jr3-btn {
    top: auto;
    bottom: 12px;
    width: 44px;
    height: 44px;
    margin-top: 0;
  }

  .jr3-hint {
    bottom: 26px;
    font-size: 10px;
  }
}

/* --- живой слой журнала: всё, что лежит на бумаге поверх полос --- */
.jr3-stage {
  overflow: hidden;
}

.jr3-sound {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: none;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}

.jr3-sound[aria-pressed="true"] {
  color: var(--ink);
}

.jr3-layer,
.jr3-flylayer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.jr3-flylayer {
  z-index: 4;
}

/* полоса 1200×1600: проецируется на страницу через matrix3d */
.jr3-ov {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
  font-family: var(--font-ui);
  color: #161616;
}

.jr3-ov.is-on {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s ease 0.05s, visibility 0s;
}

.jr3-ov > * {
  pointer-events: auto;
}

/* точка-покупка: розовая, с пульсом */
.jr3-dot {
  position: absolute;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.jr3-dot i {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: #e8c1d7;
  box-shadow: 0 0 0 8px #fff, 0 6px 22px rgba(0, 0, 0, 0.35);
  transition: transform 0.35s var(--ease);
}

.jr3-dot i::after {
  content: "+";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 800 34px/1 var(--font-ui);
  color: #161616;
}

.jr3-dot::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  border: 6px solid #e8c1d7;
  animation: jr3-pulse 2.4s var(--ease) infinite;
  animation-delay: inherit;
}

.jr3-dot--call i {
  inset: 26px;
}

.jr3-dot--call i::after {
  content: "";
}

@keyframes jr3-pulse {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  70%,
  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}

@media (hover: hover) {
  .jr3-dot:hover i {
    transform: scale(1.18);
  }
}

/* строки содержания */
.jr3-row,
.jr3-tab {
  position: absolute;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background 0.25s ease;
}

/* строки и язычок — только подсветка; клик и захват листа идут через бумагу */
.jr3-ov > .jr3-row,
.jr3-ov > .jr3-tab,
.jr3-ov > .jr3-quiz {
  pointer-events: none;
}

.jr3-quiz button,
.jr3-quiz a {
  pointer-events: auto;
}

@media (hover: hover) {
  .jr3-row:hover {
    background: rgba(232, 193, 215, 0.28);
  }
  .jr3-tab:hover {
    background: rgba(232, 193, 215, 0.18);
  }
}

.jr3-tab span {
  position: absolute;
  inset: auto 0 40px;
  font: 800 30px/1 var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.jr3-tab:hover span,
.jr3-tab:focus-visible span {
  opacity: 1;
}

/* тест */
.jr3-quiz {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 48px;
  background: #161616;
  border: 3px solid rgba(255, 255, 255, 0.25);
  color: #fff;
}

.jr3-quiz-step {
  margin: 0;
  font: 700 26px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e8c1d7;
}

.jr3-quiz-q {
  margin: 0 0 12px;
  font: 800 48px/1.08 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.jr3-quiz-a {
  min-height: 112px;
  padding: 0 36px;
  border: 3px solid rgba(255, 255, 255, 0.4);
  background: none;
  color: #fff;
  font: 600 36px/1.1 var(--font-ui);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.35s var(--ease);
}

.jr3-quiz-a:hover,
.jr3-quiz-a:focus-visible {
  background: #e8c1d7;
  border-color: #e8c1d7;
  color: #161616;
  transform: translateX(10px);
}

.jr3-quiz-res {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 36px;
}

.jr3-quiz-res img {
  width: 300px;
  height: 400px;
  object-fit: cover;
  background: #fff;
}

.jr3-quiz-line {
  margin: 0 0 16px;
  font: 900 84px/0.9 var(--font-ui);
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.jr3-quiz-text {
  margin: 0 0 22px;
  font: 400 32px/1.35 var(--font-ui);
  color: rgba(255, 255, 255, 0.8);
}

.jr3-quiz-item {
  margin: 0 0 8px;
  font: 400 26px/1.3 var(--font-mono);
  color: #e8c1d7;
}

.jr3-quiz-go,
.jr3-quiz-again {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 0 36px;
  border: 3px solid #e8c1d7;
  background: #e8c1d7;
  color: #161616;
  font: 800 32px/1 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.jr3-quiz-again {
  background: none;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

/* размеры: подсветка ячейки и ползунок роста */
.jr3-size-cell {
  position: absolute;
  border: 6px solid transparent;
  background: transparent;
  pointer-events: none;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.4s var(--ease);
}

.jr3-size-cell.is-on {
  border-color: #161616;
  background: rgba(232, 193, 215, 0.55);
  transform: scale(1.04);
}

.jr3-slider {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.jr3-slider-v {
  font: 800 34px/1 var(--font-ui);
  text-transform: uppercase;
}

.jr3-slider-track {
  position: relative;
  height: 64px;
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
}

.jr3-slider-track::before,
.jr3-slider-track i {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  height: 8px;
  border-radius: 4px;
  background: rgba(22, 22, 22, 0.15);
  width: 100%;
}

.jr3-slider-track i {
  background: #161616;
}

.jr3-slider-track b {
  position: absolute;
  top: 0;
  width: 64px;
  height: 64px;
  margin-left: -32px;
  border-radius: 50%;
  background: #e8c1d7;
  box-shadow: 0 0 0 6px #161616;
}

/* стикеры: невидимые зоны поверх запечённых в бумагу стикеров */
.jr3-stk {
  position: absolute;
  border-radius: 40px;
  cursor: grab;
  touch-action: none;
}

.jr3-stk:active {
  cursor: grabbing;
}

.jr3-fly {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  will-change: transform;
  user-select: none;
}

/* всплывашки: покупка и деталь куртки — плоские, поверх сцены */
.jr3-pop {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: 260px;
  padding: 14px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.35);
  opacity: 0;
  scale: 0.96;
  transition: opacity 0.2s ease, scale 0.3s var(--ease);
}

.jr3-pop.is-on {
  opacity: 1;
  scale: 1;
}

.jr3-pop-x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  border: 0;
  background: var(--surface);
  font-size: 20px;
  cursor: pointer;
  color: var(--ink);
}

.jr3-pop-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
  margin-bottom: 10px;
  background: var(--bg-soft);
}

.jr3-pop-detail {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-bottom: 10px;
}

.jr3-pop-name {
  margin: 0 0 4px;
  font: 700 12px/1.3 var(--font-ui);
  text-transform: uppercase;
}

.jr3-pop-price {
  margin: 0 0 10px;
  font: 400 12px/1 var(--font-mono);
}

.jr3-pop-text,
.jr3-pop-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.jr3-pop-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.jr3-pop-sizes button {
  min-width: 48px;
  height: 36px;
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--ink);
  font: 600 11px/1 var(--font-ui);
  cursor: pointer;
}

.jr3-pop-sizes button:hover:not(:disabled),
.jr3-pop-sizes button.is-added {
  background: var(--ink);
  color: var(--on-ink);
}

.jr3-pop-sizes button:disabled {
  opacity: 0.4;
  text-decoration: line-through;
  cursor: default;
}

.jr3-pop-link {
  font: 600 11px/1 var(--font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .jr3-head .jr3-track {
    display: none;
  }
  .jr3-head .jr3-now {
    margin-left: auto;
  }
  .jr3-pop {
    width: 220px;
  }
  .jr3-sound {
    padding: 5px 8px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jr3-dot::before {
    animation: none;
    opacity: 0;
  }
}

/* =====================================================================
   SNOWPARK LIVE — слой реакций и зоны персонажей (js/home/hero-live.js)
   ===================================================================== */
/* слой реакций не участвует во входной анимации кадра: её fill-mode
   держал бы opacity: 1 и закрыл бы петлю */
.js .snowpark-react,
.snowpark-react {
  animation: none;
  opacity: 0;
  background: transparent;
}

.js .snowpark-react.is-on,
.snowpark-react.is-on {
  opacity: 1;
}

.live-zone {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: auto;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

.live-zone.is-click {
  cursor: pointer;
}

.live-zone:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.7);
  outline-offset: -1px;
}

/* =====================================================================
   SNOWPARK STAGE — живая картинка (js/home/hero-stage.js)
   ===================================================================== */
.js .snowpark-gl,
.snowpark-gl {
  animation: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  background: none;
}

.js .snowpark-gl.is-on,
.snowpark-gl.is-on {
  opacity: 1;
}

/* стадия повторяет движение «камеры» шейдера */
.snowpark-stage {
  transform-origin: 50% 50%;
  transform: translate3d(0, var(--hero-shift, 0px), 0) scale(var(--cam-s, 1)) translate(var(--cam-tx, 0px), var(--cam-ty, 0px));
}

/* маскот за полкой открытого шкафчика: клип по проёму, выныривает снизу */
.stage-mascot {
  position: absolute;
  left: 84.85%;
  top: 10.6%;
  width: 3.55%;
  height: 9.25%;
  overflow: hidden;
}

.stage-mascot img {
  position: absolute;
  left: -14%;
  bottom: 0;
  width: 128%;
  transform: translateY(105%);
}

.stage-mascot.is-peek img {
  animation: stage-mascot-peek 4.2s cubic-bezier(0.33, 1, 0.68, 1) both;
}

@keyframes stage-mascot-peek {
  0% { transform: translateY(105%) rotate(0deg); }
  18% { transform: translateY(8%) rotate(-4deg); }
  30% { transform: translateY(12%) rotate(5deg); }
  44% { transform: translateY(10%) rotate(-3deg); }
  58% { transform: translateY(14%) rotate(2deg); }
  74% { transform: translateY(12%) rotate(0deg); }
  100% { transform: translateY(105%) rotate(0deg); }
}