:root {
  --orange: #f36b21;
  --yellow: #ffc51b;
  --blue: #00a9e8;
  --deep-blue: #0563ad;
  --pink: #ed168c;
  --ink: #121212;
  --motion-fast: 260ms;
  --motion-slow: 620ms;
  --bp-mobile: 768px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: #fb7304;
  overflow-x: hidden;
  width: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: #fb7304;
  font-family: "Myriad Pro Condensed", "PT Sans Narrow", "Arial Narrow", sans-serif;
}

button, a { -webkit-tap-highlight-color: transparent; }

button:focus-visible, a:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 5px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  pointer-events: none;
}

.site-nav {
  display: grid;
  grid-template-columns: 16.4vw 16.4vw 10.26vw 16.4vw 16.4vw;
  align-items: start;
  justify-content: space-between;
  width: 100%;
  padding: 1.56vw 3.44vw 0;
}

.site-nav > a:not(.site-nav__logo) {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.85vw;
  max-height: 74px;
  pointer-events: auto;
  color: #111;
  background: #fff;
  border-radius: clamp(5px, .52vw, 10px);
  text-decoration: none;
  text-transform: uppercase;
  font: 700 clamp(12px, 1.67vw, 32px)/1 "Myriad Pro Condensed", "PT Sans Narrow", sans-serif;
  letter-spacing: -.045em;
}

.site-nav__logo {
  justify-self: center;
  width: 10.26vw;
  max-width: 197px;
  margin-top: .42vw;
  pointer-events: auto;
  text-decoration: none;
}

.site-nav__logo-stack {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 197 / 154;
  transform-origin: center center;
  transform:
    translate3d(var(--logo-wiggle-x, 0px), var(--logo-wiggle-y, 0px), 0)
    rotate(var(--logo-wiggle-rot, 0deg));
  will-change: transform;
}

.site-nav__logo-epic {
  display: block;
  width: 100%;
  height: 100%;
}

.site-nav__logo-dobry {
  position: absolute;
  left: 1.27%;
  top: .49%;
  width: 45.76%;
  height: 25.32%;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: transparent;
}

/* Figma 71:1043 — Без имени-1 1
   FULL artboard 1920×4812; layer x=-18 y=-66.55 w=1994.97 h=4489.79 */
.page-bg {
  position: absolute;
  z-index: 0;
  left: calc(100vw * -18 / 1920);
  top: calc(100vw * -66.552734375 / 1920);
  width: calc(100vw * 1994.974609375 / 1920);
  height: calc(100vw * 4489.7890625 / 1920);
  pointer-events: none;
  user-select: none;
  clip-path: inset(0 0 0 0);
  transition: clip-path 700ms ease;
}

.page-bg__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
}

/* Figma 71:1218 — Rectangle 132: x=-197 y=4282.45 w=2369 h=541, #f8b820 blur 32
   Overlaps last ~38px of glow (4320) so footer unites with slide 4.
   Extra height covers blur falloff + page-end so body #fb7304 never shows as a hard strip. */
.page-bg-yellow {
  position: absolute;
  z-index: 0;
  left: calc(100vw * -197 / 1920);
  top: calc(100vw * 4282.447265625 / 1920);
  width: calc(100vw * 2369 / 1920);
  /* 541 design + blur pad + remainder to artboard end (4812) */
  height: calc(100vw * (4812 - 4282.447265625 + 64) / 1920);
  pointer-events: none;
  user-select: none;
  overflow: visible;
  transition: top 700ms ease, height 700ms ease;
}

/* Opaque core so blur falloff cannot leave an #fb7304 strip at page end */
.page-bg-yellow__solid {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 14%;
  bottom: -8%;
  background: #f8b820;
  transition: background 700ms ease, top 700ms ease;
}

.page-bg-yellow__fill {
  position: absolute;
  inset: 0;
  background: #f8b820;
  filter: blur(32px);
  transition: background 700ms ease;
}

/* Figma 71:1219 — Ellipse 4853 under retail logos */
.page-bg-ellipse {
  position: absolute;
  z-index: 0;
  left: calc(100vw * 779 / 1920);
  top: calc(100vw * 4546.2607421875 / 1920);
  width: calc(100vw * 1702.9489166167477 / 1920);
  height: calc(100vw * 1258.443420134543 / 1920);
  border-radius: 50%;
  background: #f8b820;
  opacity: .85;
  filter: blur(48px);
  pointer-events: none;
  transition: background 700ms ease, opacity 700ms ease;
}

/* FULL 4812 − 4×1080 = 492px of footer band below scenes */
.page-end-spacer {
  width: 100%;
  height: calc(100vw * 492 / 1920);
  pointer-events: none;
  visibility: hidden;
}

.scene {
  position: relative;
  z-index: 1;
  width: 100vw;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}

/* Hero must NOT form a stacking context — stages compete with .splash-bridge */
.scene--hero {
  z-index: auto;
  isolation: auto;
  overflow: visible;
  background: transparent;
}

/* About above splash bridge so cans/text stay on top, and above the hero stages:
   the burst 71:1303–71:1305 lives here but overflows up into screen 1, where in
   Figma it paints over the couple. Hero stages 4/5 clip to the hero box, so
   nothing of theirs reaches down here. */
.scene--about { z-index: 6; }
.scene--flavors { z-index: 2; }
.scene--glow { z-index: 1; }

.scene-layer {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.parallax-layer {
  will-change: transform;
  transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0);
  transition: transform 80ms linear;
}

/* Screen 1 — Figma 71:1044 «Стартовая» 1920×1080 */
/* (overflow/isolation set above with .scene--hero) */

.hero-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-stage--under {
  overflow: hidden;
  z-index: 1;
}
/* Splash overflows into about — do NOT clip */
.hero-stage--splash {
  overflow: visible;
  z-index: 3;
}
/* Bursts / title clipped at y=1080 */
.hero-stage--clip {
  overflow: hidden;
  z-index: 4;
}
/* Masked bottoms + fruit above splash */
.hero-stage--over {
  overflow: hidden;
  z-index: 5;
}

/* 71:1048 — blue corner burst: AABB wrapper + rotate(174.59) scaleY(-1) */
.hero-corner-burst {
  z-index: 2;
  left: calc(75% - 117px);
  top: calc(976 / 1080 * 100%);
  width: calc(851.5484669957877 / 1920 * 100%);
  height: calc(1034.6101165498476 / 1080 * 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-corner-burst__rot {
  flex: none;
  width: calc(763.756 / 1920 * 100vw);
  height: calc(966.882 / 1920 * 100vw);
  transform: rotate(174.59deg) scaleY(-1);
  transform-origin: center center;
}
.hero-corner-burst__rot img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* 71:1049 — couple (behind splash; bottoms reappear via 71:1063) */
.hero-people {
  z-index: 4;
  left: calc(520.5 / 1920 * 100%);
  top: calc(202.5 / 1080 * 100%);
  width: calc(880 / 1920 * 100%);
  height: calc(968 / 1080 * 100%);
  object-fit: fill;
  transform-origin: 50% 70%;
  transform: scale(var(--hero-people-scale, 1));
  will-change: transform;
}

/* 71:1054 — splash AABB + rotate(17.02°); overflows hero into about */
.hero-splash--front {
  z-index: 1;
  left: calc(558.97265625 / 1920 * 100%);
  top: calc(631 / 1080 * 100%);
  width: calc(1431.3296173810959 / 1920 * 100%);
  height: calc(1077.6444952487946 / 1080 * 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.hero-splash__rot {
  flex: none;
  width: calc(1271 / 1920 * 100vw);
  height: calc(738 / 1920 * 100vw);
  transform: rotate(17.02deg);
  transform-origin: center center;
}
.hero-splash__rot img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* Page-level bridge: crystal only (splash overflows from hero-stage--splash) */
.splash-bridge {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100vw * 2160 / 1920);
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}
.splash-bridge__a {
  /* hero splash already overflows — hide twin to avoid double paint */
  display: none !important;
}
.splash-bridge__crystal {
  position: absolute;
  z-index: 2;
  left: calc(1368 / 1920 * 100%);
  top: calc(1000.30810546875 / 2160 * 100%);
  width: calc(328.1802990645774 / 1920 * 100%);
  height: calc(383.1971605064234 / 2160 * 100%);
  object-fit: fill;
  max-width: none;
  pointer-events: none;
}

.about-splash--a,
.hero-crystal--bottom {
  display: none !important;
}

/* 71:1177 — splash B off-canvas in Figma */
.about-splash--b {
  display: none;
}

/* 71:1063 — couple bottoms masked over splash */
.hero-people-splash {
  z-index: 9;
  left: calc(595.704833984375 / 1920 * 100%);
  top: calc(731.0252075195312 / 1080 * 100%);
  width: calc(750.492431640625 / 1920 * 100%);
  height: calc(344.5228271484375 / 1080 * 100%);
  overflow: hidden;
  -webkit-mask-image: url("../assets/s1/layers/couple-mask.svg");
  mask-image: url("../assets/s1/layers/couple-mask.svg");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform-origin: 50% 70%;
  transform: scale(var(--hero-people-scale, 1));
  will-change: transform;
}
.hero-people-splash img {
  position: absolute;
  left: calc(-75.646 / 750.492431640625 * 100%);
  top: calc(-529.525 / 344.5228271484375 * 100%);
  width: calc(880.8829956054688 / 750.492431640625 * 100%);
  height: calc(968.9713745117188 / 344.5228271484375 * 100%);
  max-width: none;
  object-fit: fill;
}

/* 71:1170 — «Попробуй эпично необычно» — scale from center like site-1 AE */
.hero-title {
  z-index: 10;
  left: calc(1408 / 1920 * 100%);
  top: calc(157.447265625 / 1080 * 100%);
  width: calc(528 / 1920 * 100%);
  height: calc(450.07635498046875 / 1080 * 100%);
  object-fit: fill;
  transform-origin: center center;
  opacity: var(--hero-title-op, 0);
  transform: scale(var(--hero-title-scale, 0));
  will-change: transform, opacity;
}

/* 71:1053 — fruit left (baked AABB, orange keyed out) */
.hero-fruit { z-index: 9; }
.hero-fruit--left {
  left: calc(84.10502624511719 / 1920 * 100%);
  top: calc(411.447265625 / 1080 * 100%);
  width: calc(442.53297271913834 / 1920 * 100%);
  height: calc(439.35743658203774 / 1080 * 100%);
  object-fit: fill;
}

/* 71:1052 / 71:1051 — crystals (baked AABB, orange keyed out) */
.hero-crystal {
  z-index: 9;
  object-fit: fill;
}
.hero-crystal--right {
  left: calc(1672.47998046875 / 1920 * 100%);
  top: calc(664 / 1080 * 100%);
  width: calc(261.25 / 1920 * 100%);
  height: calc(220 / 1080 * 100%);
}
.hero-crystal--bottom {
  left: calc(1368 / 1920 * 100%);
  top: calc(1000.30810546875 / 1080 * 100%);
  width: calc(328.1802990645774 / 1920 * 100%);
  height: calc(383.1971605064234 / 1080 * 100%);
}

/* 77:1677 — blue slash behind couple (Figma order: vector → couple → splash) */
.hero-accent {
  z-index: 2;
  left: calc(940 / 1920 * 100%);
  top: calc(727.5 / 1080 * 100%);
  width: calc(83 / 1920 * 100%);
  height: calc(346 / 1080 * 100%);
  object-fit: fill;
}

/* Screen 2 — Figma 71:1175 «2 экран» 1920×1080 */
.scene--about {
  background: transparent;
  overflow: visible;
}

/* 71:1178 — soft ellipse behind text/cans */
.about-glow {
  z-index: 2;
  left: calc(814 / 1920 * 100%);
  top: calc(341 / 1080 * 100%);
  width: calc(330 / 1920 * 100%);
  height: calc(411 / 1080 * 100%);
  object-fit: fill;
  /* Figma inset expands glow ~22–27% */
  transform: scale(1.5);
  transform-origin: center center;
}

/* 71:1318 — «Знаешь, что такое Добрый EPIC VIBE?» (artboard y − 1080) */
.about-title {
  position: absolute;
  z-index: 5;
  inset: 0;
  margin: 0;
  pointer-events: none;
  color: #fff;
  text-transform: uppercase;
  /* Myriad Bold Condensed is tighter than Roboto Condensed — size/track to fit burst */
  font: 700 clamp(24px, 3.24vw, 62px)/1 "Myriad Pro Condensed", "Roboto Condensed", "PT Sans Narrow", sans-serif;
  letter-spacing: -0.03em;
  /* Unfold from burst center on scroll (once) */
  opacity: var(--about-plaque-op, 0);
  transform: scale(var(--about-plaque-scale, 0));
  transform-origin: calc(571 / 1920 * 100%) calc(286 / 1080 * 100%);
  will-change: transform, opacity;
}
/* 71:1303 / 71:1304 / 71:1305 — burst behind the couple, straddling the screen
   1 / 2 seam. Artboard siblings, so y is page-relative (screen 1 is the first
   1080) and they overflow up out of this scene.
   Figma reports x/y of the *rotated* top-left corner but w/h of the AABB, so
   the box origin is the reported corner shifted back by the corner's offset
   inside the AABB. Rotation solved from that AABB against the un-rotated svg. */
.about-burst {
  --about-burst-angle: -38.73deg;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  pointer-events: none;
}
.about-burst__rot {
  flex: none;
  transform: rotate(var(--about-burst-angle));
  transform-origin: center center;
}
.about-burst__rot img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
}
.about-burst--cream {
  left: calc(439.065 / 1920 * 100%);
  top: calc(-210.38 / 1080 * 100%);
  width: calc(526.377 / 1920 * 100%);
  height: calc(521.438 / 1080 * 100%);
}
.about-burst__rot--cream {
  width: calc(388.674 / 1920 * 100vw);
  height: calc(356.703 / 1920 * 100vw);
}
.about-burst--yellow {
  left: calc(452 / 1920 * 100%);
  top: calc(-209.72 / 1080 * 100%);
  width: calc(513.887 / 1920 * 100%);
  height: calc(507.979 / 1080 * 100%);
}
.about-burst__rot--yellow {
  width: calc(382.582 / 1920 * 100vw);
  height: calc(344.336 / 1920 * 100vw);
}
.about-burst--rays {
  --about-burst-angle: -15.41deg;
  left: calc(623.365 / 1920 * 100%);
  top: calc(-99.72 / 1080 * 100%);
  width: calc(382.906 / 1920 * 100%);
  height: calc(253.935 / 1080 * 100%);
}
.about-burst__rot--rays {
  width: calc(353.575 / 1920 * 100vw);
  height: calc(167.662 / 1920 * 100vw);
}

.about-title__halo,
.about-title__shape {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
/* 71:1319 — white underlay */
.about-title__halo {
  left: calc(162.46 / 1920 * 100%);
  top: calc(109.19 / 1080 * 100%);
  width: calc(818.074 / 1920 * 100%);
  height: calc(375.918 / 1080 * 100%);
  z-index: 0;
}
.about-title__halo-rot {
  flex: none;
  width: calc(809.416 / 1920 * 100vw);
  height: calc(355.754 / 1920 * 100vw);
  transform: rotate(1.44deg);
  transform-origin: center center;
}
.about-title__halo-rot img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
}
/* 71:1320 — orange fill + white stroke */
.about-title__shape {
  left: calc(162.49 / 1920 * 100%);
  top: calc(99.19 / 1080 * 100%);
  width: calc(818.031 / 1920 * 100%);
  height: calc(374.195 / 1080 * 100%);
  z-index: 1;
}
.about-title__shape-rot {
  flex: none;
  width: calc(809.416 / 1920 * 100vw);
  height: calc(354.03 / 1920 * 100vw);
  transform: rotate(1.44deg);
  transform-origin: center center;
}
.about-title__shape-rot img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
}
.about-title__line {
  position: absolute;
  z-index: 2;
  margin: 0;
  text-align: center;
  white-space: nowrap;
  line-height: 1;
  transform: translateX(-50%);
}
.about-title__line--1 {
  left: calc(497.55 / 1920 * 100%);
  top: calc(216.45 / 1080 * 100%);
  width: calc(573 / 1920 * 100%);
}
.about-title__line--2 {
  left: calc(604.55 / 1920 * 100%);
  top: calc(289.45 / 1080 * 100%);
  width: calc(527 / 1920 * 100%);
}

.about-copy {
  position: absolute;
  z-index: 4;
  inset: 0;
  color: #fff;
  /* Roboto Condensed is wider than Myriad — keep copy inside Figma column boxes */
  font: 400 clamp(13px, 1.4vw, 27px)/1.2 "Myriad Pro Condensed", "Roboto Condensed", "PT Sans Narrow", sans-serif;
  letter-spacing: -0.03em;
  pointer-events: none;
  /* LTR unfold on scroll (once): 0 = hidden, 1 = fully revealed */
  clip-path: inset(0 calc((1 - var(--about-text-reveal, 0)) * 100%) 0 0);
  will-change: clip-path;
}
.about-copy strong { font-weight: 700; }
.about-text {
  position: absolute;
  margin: 0;
  line-height: 1.2;
  overflow: hidden; /* never bleed into the other column */
}
.about-text p {
  margin: 0;
  line-height: inherit;
  font-size: inherit;
}
.about-text--a {
  left: calc(241 / 1920 * 100%);
  top: calc(509 / 1080 * 100%);
  width: calc(489 / 1920 * 100%);
  height: calc(179 / 1080 * 100%);
}
.about-text--a .about-text__line {
  display: block;
  white-space: nowrap;
}
.about-text--b {
  left: calc(242 / 1920 * 100%);
  top: calc(688 / 1080 * 100%);
  width: calc(489 / 1920 * 100%);
  letter-spacing: -0.025em;
  font-weight: 700;
}
.about-text--c {
  left: calc(751 / 1920 * 100%);
  top: calc(509 / 1080 * 100%);
  width: calc(456 / 1920 * 100%);
  height: calc(201 / 1080 * 100%);
}
.about-text--c p {
  display: block;
  white-space: nowrap;
}
.about-text--d {
  left: calc(751 / 1920 * 100%);
  top: calc(688 / 1080 * 100%);
  width: calc(441 / 1920 * 100%);
}

/* 71:1183 — spiky fruit */
.about-fruit { z-index: 7; }
.about-fruit--spiky {
  left: calc(58.33% + 18px);
  top: calc(752 / 1080 * 100%);
  width: calc(207 / 1920 * 100%);
  height: calc(220 / 1080 * 100%);
  object-fit: cover;
}

/* 71:1184 — blue burst A (under yellow splash) */
.about-blue-burst { z-index: 3; }
.about-blue-burst--a {
  left: calc(75% - 117px);
  top: calc(-104 / 1080 * 100%);
  width: calc(851.548 / 1920 * 100%);
  height: calc(1034.61 / 1080 * 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.about-blue-burst__rot--a {
  flex: none;
  width: calc(763.756 / 1920 * 100vw);
  height: calc(966.882 / 1920 * 100vw);
  transform: rotate(174.59deg) scaleY(-1);
  transform-origin: center center;
}
.about-blue-burst__rot img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* 71:1185 — blue burst B (scaleY -1) */
.about-blue-burst--b {
  left: calc(83.33% - 132px);
  top: calc(9 / 1080 * 100%);
  width: calc(673.798 / 1920 * 100%);
  height: calc(853 / 1080 * 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
}
.about-blue-burst__rot--b {
  flex: none;
  width: 100%;
  height: 100%;
  transform: scaleY(-1);
  transform-origin: center center;
}

/* 71:1187 / 71:1186 — cans */
.about-can {
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.about-can--orange {
  left: calc(58.33% + 33.59px);
  top: calc(131.21 / 1080 * 100%);
  width: calc(503.32 / 1920 * 100%);
  height: calc(914.988 / 1080 * 100%);
}
.about-can__rot--orange {
  flex: none;
  width: calc(348.93 / 1920 * 100vw);
  height: calc(865.294 / 1920 * 100vw);
  transform: rotate(-10.69deg);
  transform-origin: center center;
  filter: drop-shadow(0 1.25vw 2.083vw rgba(0, 0, 0, .28));
}
.about-can--pink {
  left: calc(83.33% - 88.42px);
  top: calc(103.79 / 1080 * 100%);
  width: calc(378.635 / 1920 * 100%);
  height: calc(869.974 / 1080 * 100%);
}
.about-can__rot--pink {
  flex: none;
  width: calc(345.675 / 1920 * 100vw);
  height: calc(857.222 / 1920 * 100vw);
  transform: rotate(2.22deg);
  transform-origin: center center;
  filter: drop-shadow(0 1.77vw 1.77vw rgba(0, 0, 0, .25));
}
.about-can__rot img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* 71:1188 — fruit left (codegen AABB left −118; metadata −67 is pre-rotate) */
.about-fruit--left {
  left: -118px;
  top: calc(316 / 1080 * 100%);
  width: calc(327.604 / 1920 * 100%);
  height: calc(325.253 / 1080 * 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.about-fruit__rot--left {
  flex: none;
  width: calc(281.829 / 1920 * 100vw);
  height: calc(278.901 / 1920 * 100vw);
  transform: rotate(10.41deg);
  transform-origin: center center;
}
.about-fruit__rot img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* 71:1189 — crystal AABB + rotate −26.03° + crop */
.about-fruit--crystal {
  left: calc(210 / 1920 * 100%);
  top: calc(793 / 1080 * 100%);
  width: calc(218.579 / 1920 * 100%);
  height: calc(227.638 / 1080 * 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.about-fruit__rot--crystal {
  flex: none;
  width: calc(156.972 / 1920 * 100vw);
  height: calc(176.676 / 1920 * 100vw);
  transform: rotate(-26.03deg);
  transform-origin: center center;
}
.about-fruit__crop--crystal {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.about-fruit__crop--crystal img {
  position: absolute;
  left: 0;
  top: -26.02%;
  width: 194.98%;
  height: 133.46%;
  max-width: none;
  object-fit: cover;
}

/* 71:1190 / 71:1191 — transition vectors */
.about-vector {
  z-index: 5;
  object-fit: fill;
}
.about-vector--right {
  left: calc(1727 / 1920 * 100%); /* ~89.95% */
  top: calc(883 / 1080 * 100%);   /* ~81.74% */
  width: calc(331.182 / 1920 * 100%);
  height: calc(339.427 / 1080 * 100%);
  transform: rotate(3.37deg);
  transform-origin: center center;
}
.about-vector--left {
  left: calc(-13.82 / 1920 * 100%);
  top: calc(758 / 1080 * 100%); /* 70.15% of 1080 */
  width: calc(252.935 / 1920 * 100%);
  height: calc(532.613 / 1080 * 100%);
  transform: rotate(-89.19deg);
  transform-origin: center center;
}

/* legacy selectors kept inert so old rules don't leak */
.about-columns,
.about-transition-vector,
.about-fruit--from-hero,
.about-fruit--small,
.about-blue-accent { display: none !important; }

/* Screen 3 — Figma 80:1872 «3_1» / 80:1913 «3_2» */
.scene--flavors {
  overflow: visible;
  background: transparent;
}
/* Keep blue inside this scene so it cannot cover glow-product below
   (flavors stacking context sits above glow via scene z-index). */
.flavors-blue-clip {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.flavors-blue {
  left: calc(688 / 1920 * 100%);
  top: calc(-86 / 1080 * 100%);
  width: calc(1615 / 1920 * 100%);
  height: calc(1358 / 1080 * 100%);
  object-fit: cover;
}

.flavors-vector-61 {
  z-index: 2;
  left: calc(71.5 / 1920 * 100%);
  top: calc(289.5 / 1080 * 100%);
  width: calc(535.5 / 1920 * 100%);
  height: calc(591 / 1080 * 100%);
}

.flavors-fruit { z-index: 3; }
/* Shared tucked → flown pose */
.flavors [data-fly-once],
.flavors [data-fly-hover] {
  opacity: 0;
  transform: translate3d(var(--ox, 0px), var(--oy, 0px), 0) scale(0.55);
  transition:
    opacity 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: 0s;
  will-change: transform, opacity;
  pointer-events: none;
}
/* Fruits + badges: one-time scroll burst, then stay */
.flavors.is-burst [data-fly-once] {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition-delay: var(--fly-delay, 0s);
  will-change: auto;
}
/* Text cards: fly out on hover / lock only */
.flavors[data-state="left"] [data-fly-hover][data-fly-side="left"],
.flavors[data-state="both"] [data-fly-hover][data-fly-side="left"],
.flavors[data-state="right"] [data-fly-hover][data-fly-side="right"],
.flavors[data-state="both"] [data-fly-hover][data-fly-side="right"] {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition-delay: var(--fly-delay, 0s);
}
.flavors-fruit--citrus { --fly-delay: 0.08s; }
.flavors-fruit--spiky { --fly-delay: 0.14s; }
.flavors-fruit--orange { --fly-delay: 0.04s; }
.flavors-fruit--pineapple { --fly-delay: 0.1s; }
.flavors-fruit--ice { --fly-delay: 0.16s; }
.flavor-card--left { --fly-delay: 0.05s; }
.flavor-card--right { --fly-delay: 0.08s; }
.flavor-effect--left { --fly-delay: 0s; }
.flavor-effect--right { --fly-delay: 0.03s; }
.flavors-fruit__rot img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.flavors-fruit--citrus {
  --ox: 37.6vw;
  --oy: 2.6vw;
  left: calc(-166.05 / 1920 * 100%);
  top: calc(392.52 / 1080 * 100%);
  width: calc(359.784 / 1920 * 100%);
  height: calc(371.381 / 1080 * 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.flavors-fruit__rot--citrus {
  flex: none;
  width: calc(270.885 / 1920 * 100vw);
  height: calc(291.686 / 1920 * 100vw);
  transform: rotate(-21.78deg);
  transform-origin: center center;
}
.flavors-fruit--spiky {
  --ox: 18.6vw;
  --oy: -16.9vw;
  left: calc(180 / 1920 * 100%);
  top: calc(754 / 1080 * 100%);
  width: calc(396.899 / 1920 * 100%);
  height: calc(395.608 / 1080 * 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.flavors-fruit__rot--spiky {
  flex: none;
  width: calc(284.845 / 1920 * 100vw);
  height: calc(289.073 / 1920 * 100vw);
  transform: rotate(-57.47deg);
  transform-origin: center center;
}
.flavors-fruit--orange {
  --ox: 28.9vw;
  --oy: 17.6vw;
  left: calc(52 / 1920 * 100%);
  top: calc(164 / 1080 * 100%);
  width: calc(256 / 1920 * 100%);
  height: calc(253.34 / 1080 * 100%);
  object-fit: cover;
}
.flavors-fruit--pineapple {
  --ox: -40.9vw;
  --oy: 8.7vw;
  left: calc(1601 / 1920 * 100%);
  top: calc(43 / 1080 * 100%);
  width: calc(735.769 / 1920 * 100%);
  height: calc(787.422 / 1080 * 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
}
.flavors-fruit__rot--pineapple {
  flex: none;
  width: calc(697.108 / 1920 * 100vw);
  height: calc(635.042 / 1920 * 100vw);
  transform: rotate(98.95deg);
  transform-origin: center center;
}
.flavors-fruit--ice {
  --ox: -30vw;
  --oy: -14.7vw;
  left: calc(1611 / 1920 * 100%);
  top: calc(753.57 / 1080 * 100%);
  width: calc(294.211 / 1920 * 100%);
  height: calc(266.923 / 1080 * 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
}
.flavors-fruit__rot--ice {
  flex: none;
  width: calc(239.357 / 1920 * 100vw);
  height: calc(184.398 / 1920 * 100vw);
  transform: rotate(24.45deg);
  transform-origin: center center;
}

/* Clip cans at scene edge so they cannot cover glow product below
   (flavors z-index > glow). Fruits may still overflow via overflow:visible on scene. */
.flavors-cans-clip {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  pointer-events: none;
}
.flavor-can {
  object-fit: cover;
  transition: transform var(--motion-slow) cubic-bezier(.2, .8, .2, 1);
}
.flavor-can--orange {
  z-index: 1;
  left: calc(561 / 1920 * 100%);
  top: calc(195 / 1080 * 100%);
  width: calc(349.323 / 1920 * 100%);
  height: calc(866.268 / 1080 * 100%);
  filter: drop-shadow(0.677vw 1.25vw 1.25vw rgba(121, 63, 20, .3));
}
/* Pink in front where cans meet — matches reference photo */
.flavor-can--pink {
  z-index: 2;
  left: calc(1008 / 1920 * 100%);
  top: calc(171.66 / 1080 * 100%);
  width: calc(348.949 / 1920 * 100%);
  height: calc(865.342 / 1080 * 100%);
  filter: drop-shadow(-0.677vw 1.25vw 1.25vw rgba(125, 15, 72, .4));
}

/* Badges — Figma 80:1949 / 80:1948 */
.flavor-effect {
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.flavor-effect__rot img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.flavor-effect--left {
  --ox: 15vw;
  --oy: 13.3vw;
  left: calc(236.32 / 1920 * 100%);
  top: calc(196 / 1080 * 100%);
  width: calc(422.594 / 1920 * 100%);
  height: calc(353.716 / 1080 * 100%);
}
.flavor-effect__rot--left {
  flex: none;
  width: calc(419.757 / 1920 * 100vw);
  height: calc(350.312 / 1920 * 100vw);
  transform: rotate(-0.47deg);
  transform-origin: center center;
}
.flavor-effect--right {
  --ox: -15.7vw;
  --oy: 12.7vw;
  left: calc(1287 / 1920 * 100%);
  top: calc(176 / 1080 * 100%);
  width: calc(395.231 / 1920 * 100%);
  height: calc(368.175 / 1080 * 100%);
}
.flavor-effect__rot--right {
  flex: none;
  width: calc(314.774 / 1920 * 100vw);
  height: calc(254.918 / 1920 * 100vw);
  transform: rotate(26.36deg);
  transform-origin: center center;
}

.flavor-card {
  position: absolute;
  z-index: 7;
  margin: 0;
  padding: 0;
  color: #fff;
  pointer-events: none;
  isolation: isolate;
}
.flavor-card__panel {
  position: absolute;
  inset: 0;
  border: 1.23px solid #fff;
  border-radius: calc(12.25 / 1920 * 100vw);
  box-sizing: border-box;
}
.flavor-card__text {
  position: absolute;
  z-index: 1;
  margin: 0;
  font-family: "Myriad Pro Condensed", "Roboto Condensed", "PT Sans Narrow", sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 31.5 / 1920 * 100vw, 32px);
  line-height: 1.157;
  letter-spacing: -0.02em;
  color: #fff;
}
.flavor-card__text strong {
  font-family: "Myriad Pro Condensed", "Roboto Condensed", "PT Sans Narrow", sans-serif;
  font-weight: 700;
}
.flavor-card--left {
  --ox: 12.9vw;
  --oy: -1vw;
  left: calc(239 / 1920 * 100%);
  top: calc(509 / 1080 * 100%);
  width: calc(498 / 1920 * 100%);
  height: calc(277 / 1080 * 100%);
}
.flavor-card--left .flavor-card__panel {
  background: rgba(233, 85, 3, 0.92);
}
.flavor-card--left .flavor-card__text {
  left: calc(47 / 498 * 100%);
  top: calc(20 / 277 * 100%);
  width: calc(305 / 498 * 100%);
}
.flavor-card--right {
  --ox: -13.5vw;
  --oy: -2.2vw;
  left: calc(1202 / 1920 * 100%);
  top: calc(509 / 1080 * 100%);
  width: calc(480 / 1920 * 100%);
  height: calc(277 / 1080 * 100%);
}
.flavor-card--right .flavor-card__panel {
  background: rgba(0, 109, 186, 0.94);
}
.flavor-card--right .flavor-card__text {
  left: calc(167 / 480 * 100%);
  top: calc(20 / 277 * 100%);
  width: calc(275 / 480 * 100%);
}

.flavor-hit {
  position: absolute;
  z-index: 10;
  top: calc(180 / 1080 * 100%);
  width: calc(360 / 1920 * 100%);
  height: calc(820 / 1080 * 100%);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.flavor-hit--orange { left: calc(555 / 1920 * 100%); }
.flavor-hit--pink { left: calc(1002 / 1920 * 100%); }

.flavors[data-state="left"] .flavor-can--orange,
.flavors[data-state="both"] .flavor-can--orange,
.flavors[data-state="right"] .flavor-can--pink,
.flavors[data-state="both"] .flavor-can--pink {
  transform: scale(1.03);
}

/* Screen 4 — Figma 71:1192; cans + switch overflow onto yellow footer */
.scene--glow {
  overflow: visible;
  color: #fff;
  background: transparent;
  transition: background 700ms ease;
}
/* 71:1193 — same bitmap as flavors-blue (80:1922), shifted up exactly one
   scene so its jagged bottom edge continues into this scene. flavors-blue is
   clipped at the flavors scene box, this twin covers the remaining 192px. */
.glow-blue-seam-clip {
  position: absolute;
  inset: 0;
  /* Above .glow-splash (71:1195), which otherwise cut the blue dead flat on
     the scene edge; in Figma the blue teeth of 71:1199 paint after the splash. */
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 700ms ease;
}
.glow-blue-seam {
  left: calc(688 / 1920 * 100%);
  top: calc(-1166 / 1080 * 100%);
  width: calc(1615 / 1920 * 100%);
  height: calc(1358 / 1080 * 100%);
  object-fit: cover;
}
/* 71:1195 — splash masked by Vector 62: top-left of the scene, x=238.5 y=-43
   w=926 h=371. It must stay left of the blue seam; a right-side copy used to
   sit on the S3→S4 seam, where Figma has plain orange. */
.glow-splash {
  z-index: 1;
  left: calc(238.5 / 1920 * 100%);
  top: calc(-43 / 1080 * 100%);
  width: calc(926 / 1920 * 100%);
  height: calc(371 / 1080 * 100%);
  object-fit: cover;
  object-position: center center;
  /* Frame 13 clips it in Figma; without this the 43px above the line vanish
     with the lights and screen 3 flickers on the switch. */
  clip-path: inset(calc(43 / 371 * 100%) 0 0 0);
  transition: opacity 700ms ease;
}
/* Spiky fruit seam twin removed — flavors-fruit--spiky already overflows
   onto glow (flavors z > glow); a second copy caused a ghost double. */
.glow-fruit--from-flavors { display: none !important; }
/* 71:1204 crystal — behind cans (Frame 13 paints before 71:1306) */
.glow-crystal {
  z-index: 3;
  left: 0;
  top: calc(277 / 1080 * 100%);
  width: calc(248.262 / 1920 * 100%);
  height: calc(265.466 / 1080 * 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 700ms ease;
}
.glow-crystal__rot {
  flex: none;
  width: calc(211.716 / 248.262 * 100%);
  height: calc(178.287 / 265.466 * 100%);
  transform: rotate(-113.66deg);
  overflow: hidden;
}
.glow-crystal__rot img {
  display: block;
  width: 100%;
  height: 203.98%;
  margin-top: -103.98%;
  object-fit: cover;
  object-position: left top;
}
/* Cans — Figma 71:1306 paints AFTER Frame 13, so above title/steps/crystal/sparks */
.glow-product {
  z-index: 8;
  transition: opacity 700ms ease, transform 80ms linear;
  pointer-events: none;
}
/* Figma 71:1306 — x=621 y=3113.45 w=1270 h=1363 (Frame 13 y0=3240) */
.glow-product--day {
  left: calc(621 / 1920 * 100%);
  top: calc(-126.552734375 / 1080 * 100%);
  width: calc(1270 / 1920 * 100%);
  height: calc(1363 / 1080 * 100%);
  object-fit: fill;
  object-position: center center;
}
/* Night cans — Figma 74:1622: x=-283 y=-115 w=2464 h=1360.46 (extends onto dark footer) */
.glow-product--night {
  left: -14.74%;
  top: -10.648%;
  width: 128.333%;
  height: 125.969%;
  object-fit: fill;
  object-position: center center;
  /* Cut the part reaching above the scene line — dark state stops at the seam */
  clip-path: inset(calc(10.648 / 125.969 * 100%) 0 0 0);
  opacity: 0;
}
/* Dark veil under products — starts exactly on the scene line so lights-off
   never darkens the screen above; runs past the bottom to cover the dark
   footer band (74:1623) so day page-bg cannot seam-cut. */
.glow-night-veil {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  top: 0;
  bottom: -55%;
  background: #010b03;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease;
}
/* 71:1208 title burst — white halo (71:1209) + orange fill (71:1210) + text */
.glow-title {
  position: absolute;
  z-index: 4;
  left: calc(142 / 1920 * 100%);
  top: calc(133.45 / 1080 * 100%);
  width: calc(646 / 1920 * 100%);
  height: calc(275 / 1080 * 100%);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  clip-path: none;
  color: #fff;
  pointer-events: none;
  display: block;
  box-sizing: border-box;
}
.glow-title__plaque {
  position: absolute;
  inset: 0;
  opacity: var(--glow-plaque-op, 0);
  transform: scale(var(--glow-plaque-scale, 0));
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.glow-title__halo,
.glow-title__shape {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: calc(267 / 275 * 100%);
  object-fit: fill;
  pointer-events: none;
}
.glow-title__halo {
  top: calc(8 / 275 * 100%);
  z-index: 0;
}
.glow-title__shape {
  top: 0;
  z-index: 1;
  transition: opacity 700ms ease;
}
.glow-title__shape--night {
  opacity: 0;
}
.glow-title__text {
  position: absolute;
  z-index: 2;
  left: calc(99 / 646 * 100%);
  top: calc(64 / 275 * 100%);
  width: calc(474 / 646 * 100%);
  height: calc(143.302 / 275 * 100%);
  margin: 0;
  padding: 0;
  color: #fff;
  font: 700 clamp(20px, 2.103vw, 40.371px)/1.077 "Myriad Pro Condensed", "PT Sans Narrow", "Arial Narrow", sans-serif;
  letter-spacing: -.02em;
  /* Unfold L→R on scroll (once) */
  clip-path: inset(0 calc((1 - var(--glow-text-reveal, 0)) * 100%) 0 0);
  will-change: clip-path;
}
.glow-title__lead,
.glow-title__rest {
  display: block;
  line-height: 1.077;
}
.glow-title__lead {
  font-size: clamp(24px, 2.545vw, 48.85px);
  white-space: nowrap;
}

.glow-steps {
  position: absolute;
  z-index: 4;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.glow-step {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.glow-step p {
  position: absolute;
  margin: 0;
  color: #fff;
  font: 400 clamp(15px, 1.615vw, 31px)/1.177 "Myriad Pro Condensed", "PT Sans Narrow", sans-serif;
}
.glow-step p strong { font-weight: 700; }

/* Dual-layer numbers 115:10 — orange (#ed7402) on top, white offset SE */
.glow-num {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  width: calc(95 / 1920 * 100%);
  height: calc(176 / 1080 * 100%);
  font: 700 clamp(72px, 9.611vw, 184.544px)/1.077 "Myriad Pro Condensed", "PT Sans Narrow", "Arial Narrow", sans-serif;
  letter-spacing: -.04em;
  pointer-events: none;
}
.glow-num__shadow,
.glow-num__main {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  margin: 0;
  width: calc(86 / 95 * 100%);
  height: calc(163 / 176 * 100%);
  font: inherit;
  line-height: inherit;
  transition: color 700ms ease;
}
.glow-num__shadow {
  z-index: 2;
  color: #ed7402;
}
.glow-num__main {
  z-index: 1;
  color: #fff;
}

.glow-step--1 .glow-num {
  left: calc(232 / 1920 * 100%);
  top: calc(444.45 / 1080 * 100%);
}
.glow-step--1 .glow-num__main {
  left: calc(6 / 95 * 100%);
  top: calc(6 / 176 * 100%);
}
.glow-step--1 p {
  left: calc(396.53 / 1920 * 100%);
  top: calc(465.45 / 1080 * 100%);
  width: calc(386.984 / 1920 * 100%);
}

.glow-step--2 .glow-num {
  left: calc(239 / 1920 * 100%);
  top: calc(632.45 / 1080 * 100%);
}
.glow-step--2 .glow-num__main {
  left: calc(9 / 95 * 100%);
  top: calc(6 / 176 * 100%);
}
.glow-step--2 p {
  left: calc(397 / 1920 * 100%);
  top: calc(671.45 / 1080 * 100%);
  width: calc(387 / 1920 * 100%);
}

.glow-step--3 .glow-num {
  left: calc(239 / 1920 * 100%);
  top: calc(813.45 / 1080 * 100%);
  height: calc(189 / 1080 * 100%);
}
.glow-step--3 .glow-num__main {
  left: calc(9 / 95 * 100%);
  top: calc(13 / 189 * 100%);
}
.glow-step--3 p {
  left: calc(396.53 / 1920 * 100%);
  top: calc(877.45 / 1080 * 100%);
  width: calc(213.888 / 1920 * 100%);
}

/* 71:1206 / 71:1207 sparks — Frame 13, behind product 71:1306 */
.glow-spark {
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.glow-spark__rot {
  flex: none;
  line-height: 0;
}
.glow-spark__rot img {
  display: block;
  width: 100%;
  height: 100%;
}
.glow-spark--a {
  left: calc(868.56 / 1920 * 100%);
  top: calc(923.13 / 1080 * 100%);
  width: calc(98.3 / 1920 * 100%);
  height: calc(83.817 / 1080 * 100%);
}
.glow-spark__rot--a {
  width: calc(85.15 / 98.3 * 100%);
  height: calc(49.189 / 83.817 * 100%);
  transform: rotate(-28.45deg);
}
.glow-spark--b {
  left: calc(905.85 / 1920 * 100%);
  top: calc(990.88 / 1080 * 100%);
  width: calc(98.299 / 1920 * 100%);
  height: calc(67.925 / 1080 * 100%);
}
.glow-spark__rot--b {
  width: calc(90.652 / 98.299 * 100%);
  height: calc(38.163 / 67.925 * 100%);
  transform: rotate(-20.85deg);
}

/* 74:1623 — #010b03 with blur(32px), painted after the night cans (74:1622).
   product-night.webp carries a dark teal ground that ends flat on the bitmap
   edge 165px below the scene line; in Figma this blurred band swallows that
   edge, so the footer reads as one field. Scene coords: y=1194 in a 1080 frame,
   x=-197 w=2369 h=618 (side edges stay off-screen, as in Figma). */
.glow-footer-fade {
  position: absolute;
  z-index: 11;
  left: calc(-197 / 1920 * 100%);
  top: calc(1194 / 1080 * 100%);
  width: calc(2369 / 1920 * 100%);
  height: calc(618 / 1080 * 100%);
  background: #010b03;
  filter: blur(calc(32 / 1920 * 100vw));
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease;
}
.glow.is-lights-off .glow-footer-fade {
  opacity: 1;
}

/* 80:2078–80:2081 — dark version: #02193d rectangles in darken blend, painted
   after everything else in frame 74:1593. They cap the blue seam teeth and the
   lightning that crosses them, so the top of the dark screen reads as navy.
   Figma tops sit above the frame edge (y=-13/-9); the frame clips them, so the
   negative part is dropped here instead of bleeding into screen 3. */
.glow-dark-patch {
  position: absolute;
  z-index: 10;
  background: #02193d;
  mix-blend-mode: darken;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease;
}
.glow-dark-patch--a {
  left: calc(843 / 1920 * 100%);
  top: calc(1 / 1080 * 100%);
  width: calc(170 / 1920 * 100%);
  height: calc(142 / 1080 * 100%);
}
.glow-dark-patch--b {
  left: calc(1148 / 1920 * 100%);
  top: 0;
  width: calc(68 / 1920 * 100%);
  height: calc(39 / 1080 * 100%);
}
.glow-dark-patch--c {
  left: calc(1214 / 1920 * 100%);
  top: 0;
  width: calc(358 / 1920 * 100%);
  height: calc(133 / 1080 * 100%);
}
.glow-dark-patch--d {
  left: calc(1567 / 1920 * 100%);
  top: 0;
  width: calc(353 / 1920 * 100%);
  height: calc(43 / 1080 * 100%);
}

/* site-1 lightning bolts — flash over night product */
.glow-lightning {
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  transition: opacity 400ms ease;
}
.glow.is-lights-off .glow-lightning {
  opacity: 1;
}
.glow-lightning__bolt {
  position: absolute;
  left: var(--bolt-x, 0);
  top: var(--bolt-y, 0);
  width: var(--bolt-w, 373px);
  height: var(--bolt-h, 480px);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) rotate(var(--bolt-rot, 0deg));
  transform-origin: center center;
  will-change: opacity;
  background-image: url('../assets/s4/layers/lightning.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.buy-copy,
.retail-pyaterochka,
.retail-logos,
.glow-copy small {
  display: none;
}

/* Figma 71:1307 — x=1585 y=4298 w=230 h=104 in FULL (Frame 13 y0=3240) */
.light-switch {
  position: absolute;
  z-index: 12;
  left: 82.552%;
  top: 97.963%;
  right: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  width: 11.979%;
  height: 9.63%;
  padding: 0 .7% 0 5.2%;
  color: #e71984;
  background: #fff;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 .208vw .208vw rgba(0,0,0,.25);
  cursor: pointer;
  pointer-events: auto;
  white-space: nowrap;
  font: 400 clamp(12px, .938vw, 18px)/1.177 "Myriad Pro Condensed", "PT Sans Narrow", sans-serif;
  transition:
    top 700ms ease,
    color 700ms ease,
    background 700ms ease,
    border-color 700ms ease,
    padding 700ms ease,
    justify-content 700ms ease;
}
.light-switch__icon {
  position: absolute;
  left: .47vw;
  top: 50%;
  transform: translateY(-50%);
  flex: none;
  width: 4.79vw;
  height: 4.74vw;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--pink);
  border-radius: 50%;
  overflow: hidden;
  transition: left 700ms ease, right 700ms ease, background 700ms ease;
}
.light-switch [data-light-label] {
  flex: 0 0 auto;
  white-space: nowrap;
  text-align: left;
}
.light-switch__bulb {
  position: absolute;
  inset: 18%;
  width: 64%;
  height: 64%;
  object-fit: contain;
}
.light-switch__bulb--day {
  transform: rotate(-12.74deg);
}
.light-switch__bulb--night { opacity: 0; }

.glow.is-lights-off {
  color: #fff;
  /* Match frame 74:1593 — dark field under lightning / cans, continuous into footer */
  background: #010b03;
}
.glow.is-lights-off .glow-night-veil { opacity: 1; }
/* Figma redraws the seam twins (80:2072 / 80:2074) above the dark field, then
   tones them down with 80:2078–80:2081 — so keep the seam, lift it over the
   night veil and let the patches darken it instead of hiding it. */
.glow.is-lights-off .glow-blue-seam-clip {
  z-index: 9;
}
.glow.is-lights-off .glow-dark-patch {
  opacity: 1;
}
.glow.is-lights-off .glow-product--day {
  opacity: 0;
}
.glow.is-lights-off .glow-product--night {
  opacity: 1;
}
.glow.is-lights-off .glow-splash,
.glow.is-lights-off .glow-fruit--from-flavors {
  opacity: 0;
}
.glow.is-lights-off .glow-crystal {
  opacity: .55;
}
.glow.is-lights-off .glow-title__shape--day { opacity: 0; }
.glow.is-lights-off .glow-title__shape--night { opacity: 1; }
.glow.is-lights-off .glow-num__shadow { color: #e71984; }
/* Figma 74:1664 — switch higher, translucent pill, yellow bolt on the right */
.glow.is-lights-off .light-switch {
  top: calc(968 / 1080 * 100%);
  justify-content: flex-start;
  padding: 0 5.4% 0 1.1%;
  color: #fff;
  background: rgba(255, 255, 255, .7);
  border: 1px solid #fff;
  box-shadow: 0 .208vw .208vw rgba(0, 0, 0, .25);
}
.glow.is-lights-off .light-switch__icon {
  left: auto;
  right: .4vw;
  background: transparent;
  box-shadow: none;
}
.glow.is-lights-off .light-switch__bulb--day { opacity: 0; }
.glow.is-lights-off .light-switch__bulb--night {
  opacity: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Figma 115:41 PNG export — orientation already correct */
  transform: none;
}

/* Page footer — light 71:1218 / dark 74:1623+74:1593 continuous dark (no orange seam) */
/* The page scrolls ~1000px past the 4812 artboard (page-bg-ellipse overhang),
   where only the body paints — day #fb7304 read as an orange block under the
   dark footer. Mobile already does this. */
body.is-lights-off {
  background: #010b03;
}
/* Lights-off is a screen-4 + footer state: drop the day background only from
   the glow scene line down (page y=3240), so screens 1-3 stay untouched.
   .page-bg starts at y=-66.55 and is 4489.79 tall. */
body.is-lights-off .page-bg {
  clip-path: inset(0 0 calc((4489.7890625 - 3306.552734375) / 4489.7890625 * 100%) 0);
}
body.is-lights-off .page-bg-yellow {
  /* Keep same top as light band so dark fill sits under cans; no #fb7304 gap → amber fringe */
  top: calc(100vw * 4282.447265625 / 1920);
  height: calc(100vw * (4812 - 4282.447265625 + 64) / 1920);
}
body.is-lights-off .page-bg-yellow__solid,
body.is-lights-off .page-bg-yellow__fill {
  background: #010b03;
}
body.is-lights-off .page-bg-yellow__solid {
  /* Opaque dark only below the soft blur fringe — avoids hard black cut + amber-on-orange */
  top: 22%;
  left: 0;
  right: 0;
  bottom: -8%;
}
body.is-lights-off .page-bg-yellow__fill {
  filter: blur(32px);
}
body.is-lights-off .page-bg-ellipse {
  background: #010b03;
  opacity: .45;
}
body.is-lights-off .desktop-cta__burst-halo--day,
body.is-lights-off .desktop-cta__burst-shape--day {
  opacity: 0;
}
body.is-lights-off .desktop-cta__burst-halo--night,
body.is-lights-off .desktop-cta__burst-shape--night {
  opacity: 1;
}
body.is-lights-off .desktop-cta__pyaterochka--day,
body.is-lights-off .desktop-cta__perekrestok--day {
  opacity: 0;
}
body.is-lights-off .desktop-cta__pyaterochka--night,
body.is-lights-off .desktop-cta__perekrestok--night {
  opacity: 1;
}
body.is-lights-off .desktop-cta__note {
  color: #fff;
}

.desktop-cta__burst-halo--night,
.desktop-cta__burst-shape--night {
  opacity: 0;
}

/* Day retail defaults visible; night variants hidden until lights-off */
.desktop-cta__pyaterochka--night,
.desktop-cta__perekrestok--night {
  opacity: 0;
}
.buy-anchor { position: absolute; left: 0; bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .parallax-layer, .flavor-effect, .flavor-card, .flavor-can, .scene--glow { transition: none; }
  .flavors [data-fly-once],
  .flavors [data-fly-hover] {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    transition: none !important;
  }
  .hero-new-burst,
  .hero-title {
    opacity: 1 !important;
    transform: none !important;
    --hero-burst-op: 1;
    --hero-burst-scale: 1;
    --hero-title-op: 1;
    --hero-title-scale: 1;
  }
  .hero-people {
    --hero-people-scale: 1;
    transform: none !important;
  }
  .site-nav__logo-stack {
    transform: none !important;
  }
  .about-title {
    opacity: 1 !important;
    transform: none !important;
    --about-plaque-op: 1;
    --about-plaque-scale: 1;
  }
  .about-copy {
    clip-path: none !important;
    --about-text-reveal: 1;
  }
  .glow-title__plaque {
    opacity: 1 !important;
    transform: none !important;
    --glow-plaque-op: 1;
    --glow-plaque-scale: 1;
  }
  .glow-title__text {
    clip-path: none !important;
    --glow-text-reveal: 1;
  }
  .glow-lightning,
  .glow-lightning__bolt {
    opacity: 0 !important;
    transition: none !important;
  }
}

/* Updated desktop composition */
.mobile-page { display: none; }

/* 71:1171 — «Встречай новинку!» — scale from center like site-1 AE */
.hero-new-burst {
  position: absolute;
  z-index: 11;
  left: calc(150 / 1920 * 100%);
  top: calc(171.447265625 / 1080 * 100%);
  width: calc(514.0025024414062 / 1920 * 100%);
  height: calc(233.403076171875 / 1080 * 100%);
  margin: 0;
  color: #fff;
  text-transform: uppercase;
  font: 700 clamp(28px, 2.958vw, 56.791px)/.87 "Myriad Pro Condensed", "PT Sans Narrow", sans-serif;
  transform-origin: center center;
  opacity: var(--hero-burst-op, 0);
  transform: scale(var(--hero-burst-scale, 0));
  will-change: transform, opacity;
}

.hero-new-burst__halo,
.hero-new-burst__shape {
  position: absolute;
  display: block;
  pointer-events: none;
}

.hero-new-burst__halo {
  left: 0;
  top: 0;
  width: calc(510.21124267578125 / 514.0025024414062 * 100%);
  height: 100%;
  z-index: 0;
}

.hero-new-burst__shape {
  left: calc(9 / 514.0025024414062 * 100%);
  top: calc(8 / 233.403076171875 * 100%);
  width: calc(491.37554931640625 / 514.0025024414062 * 100%);
  height: calc(215.56591796875 / 233.403076171875 * 100%);
  z-index: 1;
}

.hero-new-burst__text {
  position: absolute;
  z-index: 2;
  left: calc(88.5078125 / 514.0025024414062 * 100%);
  top: calc(67.015625 / 233.403076171875 * 100%);
  width: calc(425.49468994140625 / 514.0025024414062 * 100%);
  height: calc(113.9302749633789 / 233.403076171875 * 100%);
  margin: 0;
  display: block;
  line-height: .87;
  white-space: pre-wrap;
}

/* Figma seam: yellow 71:1218 unites with glow; CTA sits on the band. */
.desktop-cta {
  position: absolute;
  z-index: 2;
  left: 0;
  /* Align with yellow band top (overlaps glow by ~38px) */
  top: calc(100vw * 4282.447265625 / 1920);
  width: 100vw;
  /* Band content area — keep CTA metrics relative to 541 design height */
  height: calc(100vw * 541 / 1920);
  overflow: visible;
  color: #fff;
  background: transparent;
  pointer-events: none;
}

.desktop-cta a,
.desktop-cta button {
  pointer-events: auto;
}

.desktop-cta__burst {
  position: absolute;
  left: 5.906%;
  top: 8.237%;
  width: 45.736%;
  height: 73.534%;
  margin: 0;
  z-index: 3;
  text-transform: uppercase;
  font: 700 clamp(28px, 3.82vw, 73.333px)/normal "Myriad Pro Condensed", "PT Sans Narrow", sans-serif;
}

.desktop-cta__burst-halo,
.desktop-cta__burst-shape {
  position: absolute;
  display: block;
  pointer-events: none;
  transform: rotate(1.44deg);
  transform-origin: center;
  transition: opacity 700ms ease;
}

.desktop-cta__burst-halo {
  left: 0;
  top: 0;
  width: 99.35%;
  height: 95.05%;
  z-index: 0;
}

.desktop-cta__burst-shape {
  left: 2.05%;
  top: 4.27%;
  width: 95.52%;
  height: 88.56%;
  z-index: 1;
}

.desktop-cta__line {
  position: absolute;
  z-index: 2;
  margin: 0;
  display: block;
  text-align: center;
  white-space: nowrap;
  line-height: normal;
}

.desktop-cta__line--1 {
  left: 1.55%;
  top: 30.34%;
  width: 65.25%;
}

.desktop-cta__line--2 {
  left: 23.07%;
  top: 48.69%;
  width: 60.01%;
}

.desktop-cta__pyaterochka {
  position: absolute;
  z-index: 3;
  left: 53.281%;
  top: 48.059%;
  width: 20.38%;
  height: auto;
  transition: opacity 700ms ease;
}

.desktop-cta__perekrestok {
  position: absolute;
  z-index: 3;
  left: 75.546%;
  top: 53.431%;
  width: 19.01%;
  height: auto;
  transition: opacity 700ms ease;
}

/* Figma 74:1625 / 74:1631 — night retail (relative to CTA band @ 4282) */
.desktop-cta__pyaterochka--night {
  top: 48.142%;
}
.desktop-cta__perekrestok--night {
  top: 54.356%;
}

.desktop-cta__retailer-link {
  position: absolute;
  z-index: 4;
  display: block;
}

.desktop-cta__retailer-link--pyaterochka {
  left: 53.281%;
  top: 48.059%;
  width: 20.38%;
  height: 18.4%;
}

.desktop-cta__retailer-link--perekrestok {
  left: 75.546%;
  top: 53.431%;
  width: 19.01%;
  height: 9.5%;
}

.desktop-cta__note {
  position: absolute;
  z-index: 3;
  left: 12.448%;
  top: 82.255%;
  width: 23.17%;
  margin: 0;
  font: 400 clamp(12px, 1.135vw, 21.789px)/1.177 "Myriad Pro Condensed", "PT Sans Narrow", sans-serif;
}

/* Mobile artboard 375×3413 — Figma 120:3, absolute layered stage.
   Breakpoint is 1023px because the desktop scenes are fixed-proportion artboards:
   below ~1024px their headings wrap and collide with the blocks underneath. */
@media (max-width: 1023px) {
  html, body {
    width: 100%;
    min-width: 0;
    background: #fe6a00;
  }

  .site-header,
  .page { display: none !important; }

  .mobile-page {
    /* Figma uses Myriad Pro Condensed; PT Sans Narrow is the closest web metric match
       (same line breaks at 14px/120px, unlike Roboto Condensed which runs ~20% wider). */
    --m-font: "Myriad Pro Condensed", "PT Sans Narrow", "Arial Narrow", sans-serif;

    display: block;
    width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
    background: #fe6a00;
    color: #fff;
    font-family: var(--m-font);
  }

  .mobile-stage {
    position: relative;
    width: 100%;
    /* Prefer aspect-ratio over 100vw so scrollbar / subpixel vw cannot stretch the artboard
       and make absolute Figma % layers “плыть” relative to each other. */
    aspect-ratio: 375 / 3413;
    height: auto;
    overflow: hidden;
    background: #fe6a00;
  }

  .m-layer {
    position: absolute;
    display: block;
    max-width: none;
    pointer-events: none;
    user-select: none;
  }

  .m-page-bg {
    /* Figma 120:4 — x=-138 y=211 w=685.55 h=1542.86 on 375×3413 */
    z-index: 0;
    left: calc(-138 / 375 * 100%);
    top: calc(211 / 3413 * 100%);
    width: calc(685.548828125 / 375 * 100%);
    height: calc(1542.861572265625 / 3413 * 100%);
    object-fit: fill;
  }

  /* Figma 120:5 / 120:144 / 120:145 — Ellipse 4854/4855, #fab719 with a 55px
     layer blur, rotated 19.53°. Dev mode reports the rotated corner plus the
     AABB size, so each box is the real 407.022×520.788 ellipse centred on that
     AABB. */
  .m-glow-ellipse {
    z-index: 0;
    width: calc(407.022 / 375 * 100%);
    height: calc(520.788 / 3413 * 100%);
    border-radius: 50%;
    background: #fab719;
    transform: rotate(-19.53deg);
    filter: blur(calc(55 / 375 * 100vw));
  }

  .m-glow-ellipse--a {
    left: calc(128.349 / 375 * 100%);
    top: calc(1860.056 / 3413 * 100%);
  }

  .m-glow-ellipse--b {
    left: calc(-275.651 / 375 * 100%);
    top: calc(2180.056 / 3413 * 100%);
  }

  .m-glow-ellipse--c {
    left: calc(228.349 / 375 * 100%);
    top: calc(2541.056 / 3413 * 100%);
  }

  /* Figma 120:9 — "сплеш -" bitmap at 40% over the steps; the export is already
     clipped to the frame, so it sits at the render bounds. */
  .m-steps-splash {
    z-index: 0;
    left: 0;
    top: calc(2281 / 3413 * 100%);
    width: 100%;
    height: calc(1132 / 3413 * 100%);
    object-fit: fill;
    opacity: .4;
  }

  /* Figma 120:166 — Rectangle 132 #f8b820 blur ~31.7 */
  .m-page-bg-yellow {
    z-index: 0;
    left: calc(-52.765625 / 375 * 100%);
    top: calc(3292.59765625 / 3413 * 100%);
    width: calc(539.2623818356042 / 375 * 100%);
    height: calc(319.2696378493238 / 3413 * 100%);
    overflow: visible;
    transition: top 700ms ease, height 700ms ease;
  }

  .m-page-bg-yellow__solid {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 18%;
    bottom: -10%;
    background: #f8b820;
    transition: background 700ms ease, top 700ms ease;
  }

  .m-page-bg-yellow__fill {
    position: absolute;
    inset: 0;
    background: #f8b820;
    filter: blur(31.7px);
    transition: background 700ms ease, filter 700ms ease;
  }

  /* Figma 120:167 — Ellipse 4858 */
  .m-page-bg-ellipse {
    z-index: 0;
    left: calc(79 / 375 * 100%);
    top: calc(3393.598876953125 / 3413 * 100%);
    width: calc(450.78752056447047 / 375 * 100%);
    height: calc(333.12251735831524 / 3413 * 100%);
    border-radius: 50%;
    background: #f8b820;
    opacity: .85;
    filter: blur(40px);
  }

  .m-ellipse-top {
    left: -7.47%;
    top: 2.11%;
    width: 117.87%;
    height: 6.83%;
    opacity: .85;
  }

  .m-title {
    left: 13.867%;
    top: 1.729%;
    width: 72.267%;
    z-index: 8;
  }

  .m-hero-glow {
    left: -20%;
    top: 4%;
    width: 140%;
    height: 18%;
    background: radial-gradient(ellipse at center, rgba(255,200,40,.55), transparent 70%);
    z-index: 1;
    pointer-events: none;
  }

  /* Figma 120:137 — 76.4×64.4 turned -22.51° about its top-left corner */
  .m-crystal-tr {
    left: calc(328.6 / 375 * 100%);
    top: calc(201 / 3413 * 100%);
    width: calc(76.4 / 375 * 100%);
    height: calc(64.4 / 3413 * 100%);
    object-fit: fill;
    transform: rotate(22.51deg);
    transform-origin: 0 0;
    z-index: 8;
  }

  /* Figma 120:129 — couple 1, x=27.61 y=285.05 w=339.17 h=373.08 */
  .m-couple {
    left: calc(27.61 / 375 * 100%);
    top: calc(285.05 / 3413 * 100%);
    width: calc(339.17 / 375 * 100%);
    height: calc(373.08 / 3413 * 100%);
    object-fit: fill;
    z-index: 4;
  }

  /* Figma 120:131 — "сплеш 1" is 489.93×284.4 rotated -17.016° about its own
     top-left corner; its 551.7×415.3 dev-mode box is the rotated bounding box,
     so sizing by that and rotating again threw the splash over the couple. */
  .m-splash-hero {
    left: calc(42.44 / 375 * 100%);
    top: calc(450.2 / 3413 * 100%);
    width: calc(489.93 / 375 * 100%);
    height: calc(284.4 / 3413 * 100%);
    object-fit: fill;
    transform: rotate(17.016deg);
    transform-origin: 0 0;
    z-index: 6;
  }

  /* Figma 120:133 — the couple re-drawn through Vector 60 so the hands and cans
     stay above the splash (mask box 289.25×132.78 at 56.59,488.75) */
  .m-couple-splash {
    left: calc(27.61 / 375 * 100%);
    top: calc(285.05 / 3413 * 100%);
    width: calc(339.17 / 375 * 100%);
    height: calc(373.08 / 3413 * 100%);
    object-fit: fill;
    z-index: 7;
    -webkit-mask-image: url("../assets/mobile/layers/couple-mask.svg");
    mask-image: url("../assets/mobile/layers/couple-mask.svg");
    -webkit-mask-size: 85.26% 35.6%;
    mask-size: 85.26% 35.6%;
    -webkit-mask-position: 58% 84.8%;
    mask-position: 58% 84.8%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  /* Figma 120:136 — 132.32×130.95 turned -1.22° about its top-left corner */
  .m-fruit-hero {
    left: calc(-41.22 / 375 * 100%);
    top: calc(506 / 3413 * 100%);
    width: calc(132.32 / 375 * 100%);
    height: calc(130.95 / 3413 * 100%);
    object-fit: fill;
    transform: rotate(1.217deg);
    transform-origin: 0 0;
    z-index: 8;
  }

  /* Figma 120:130 — Vector 61, 147.14×132.43 turned -10.43°; paints between the
     couple and the splash */
  .m-fruit-vector {
    left: calc(113.98 / 375 * 100%);
    top: calc(569 / 3413 * 100%);
    width: calc(147.14 / 375 * 100%);
    height: calc(132.43 / 3413 * 100%);
    object-fit: fill;
    transform: rotate(10.434deg);
    transform-origin: 0 0;
    z-index: 5;
  }

  /* Figma 120:127 — "222 2" is mirrored as well as turned, so it carries the
     node's own matrix instead of a rotate() */
  .m-burst-hero {
    left: calc(629.96 / 375 * 100%);
    top: calc(583.17 / 3413 * 100%);
    width: calc(294.36 / 375 * 100%);
    height: calc(372.65 / 3413 * 100%);
    object-fit: fill;
    transform: matrix(-0.99554, 0.09432, 0.09432, 0.99554, 0, 0);
    transform-origin: 0 0;
    z-index: 3;
  }

  /* Figma 120:138 — 97.35×81.98 turned 87.06° about its top-left corner */
  .m-crystal-br {
    left: calc(301 / 375 * 100%);
    top: calc(672.22 / 3413 * 100%);
    width: calc(97.35 / 375 * 100%);
    height: calc(81.98 / 3413 * 100%);
    object-fit: fill;
    transform: rotate(-87.06deg);
    transform-origin: 0 0;
    z-index: 8;
  }

  /* Figma 120:200 — the white halo burst sits behind the orange one to form its outline. */
  .m-about-title {
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
  }

  .m-about-title__halo,
  .m-about-title__shape {
    position: absolute;
    transform: rotate(1.44deg);
  }

  .m-about-title__halo {
    left: 9.751%;
    top: 18.796%;
    width: 80.539%;
    height: 3.889%;
  }

  .m-about-title__shape {
    left: 9.631%;
    top: 18.674%;
    width: 80.805%;
    height: 3.893%;
  }

  .m-about-title__line {
    position: absolute;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    font: 700 7.297vw/1.05 var(--m-font);
  }

  .m-about-title__line--1 { left: 14.154%; top: 19.858%; width: 57.015%; }
  .m-about-title__line--2 { left: 27.09%;  top: 20.656%; width: 52.438%; }

  .m-about-copy {
    left: 10.667%;
    top: 22.737%;
    width: 78.933%;
    z-index: 9;
    font: 400 4.048vw/1.18 var(--m-font);
  }

  .m-about-copy p { margin: 0 0 3.2vw; }
  .m-about-copy strong { font-weight: 700; }

  .m-fruit-about {
    left: 71.2%;
    top: 21.77%;
    width: 47%;
    transform: rotate(-35.71deg);
    z-index: 8;
  }

  .m-burst-seam {
    left: 78%;
    top: 24.5%;
    width: 55%;
    transform: rotate(174deg) scaleY(-1);
    opacity: .85;
    z-index: 3;
  }

  .m-decor-a { display: none; }

  .m-decor-b { display: none; }

  .m-splash-orange {
    left: 25.933%;
    top: 29.417%;
    width: 97.528%;
    transform: rotate(23.98deg);
    opacity: .55;
    z-index: 1;
  }

  .m-fruit-orange-a {
    left: -5.6%;
    top: 31.38%;
    width: 36.586%;
    z-index: 6;
  }

  .m-fruit-orange-b {
    left: 8%;
    top: 39.408%;
    width: 46.696%;
    transform: rotate(40.56deg);
    z-index: 6;
  }

  .m-badge-tickle {
    left: 50%;
    top: 28.04%;
    width: 50.421%;
    height: 5.57%;
    object-fit: contain;
    transform: rotate(24.3deg);
    z-index: 14;
  }

  .m-can-orange {
    left: 42.691%;
    top: 31.972%;
    width: 49.923%;
    filter: drop-shadow(1.86vw 3.16vw 3.7vw rgba(121, 63, 20, .3));
    z-index: 13;
  }

  .m-card {
    z-index: 10;
    box-sizing: border-box;
    border: 0.17vw solid #fff;
    border-radius: 1.715vw;
    color: #fff;
    font: 400 3.733vw/1.25 var(--m-font);
  }

  .m-card strong { font-weight: 700; }

  .m-card p { margin: 0; }

  .m-card--orange {
    left: 5.333%;
    top: 35.453%;
    width: 61.333%;
    height: 4.307%;
    display: flex;
    align-items: center;
    padding: 0 0 0 4.8vw;
    background: rgba(233, 85, 3, 0.66);
  }

  .m-card--orange p {
    width: 48vw;
    letter-spacing: -0.015em;
  }

  /* Figma 120:8 */
  .m-bg-blue {
    left: -83.035%;
    top: 43.586%;
    width: 225.999%;
    height: 20.885%;
    object-fit: cover;
    z-index: 1;
  }

  /* Figma 120:163 — Mask group (ice burst behind the night cans). The group is
     rotated, so its dev-mode x/y is the rotated corner; the asset is the export
     already clipped to the frame, so it lands at the render bounds instead. */
  .m-glow-splash {
    left: 0;
    top: calc(2373 / 3413 * 100%);
    width: 100%;
    height: calc(1040 / 3413 * 100%);
    object-fit: fill;
    transform: none;
    opacity: 1;
    z-index: 2;
    pointer-events: none;
  }

  .m-glow-splash--foot {
    left: -318.4%;
    top: 91.532%;
    width: 507.887%;
    height: 42.039%;
    transform: rotate(-13.87deg);
    opacity: .35;
    z-index: 1;
  }

  .m-fruit-pink {
    left: -16%;
    top: 42.28%;
    width: 40.333%;
    transform: rotate(-21.78deg);
    z-index: 6;
  }

  .m-ice-piece {
    left: 74.133%;
    top: 44.975%;
    width: 40.8%;
    transform: rotate(24deg);
    z-index: 6;
  }

  .m-badge-ice {
    left: 43.467%;
    top: 47.466%;
    width: 42.564%;
    height: auto;
    object-fit: contain;
    transform: rotate(-3.29deg);
    z-index: 14;
  }

  .m-can-pink {
    left: 6.133%;
    top: 47.524%;
    width: 48.837%;
    filter: drop-shadow(-1.82vw 3.36vw 3.36vw rgba(125, 15, 72, .4));
    z-index: 13;
  }

  .m-card--pink {
    left: 34.133%;
    top: 51.773%;
    width: 60.8%;
    height: 4.717%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 4.3vw 0 0;
    background: rgba(0, 109, 186, 0.84);
  }

  .m-card--pink p {
    width: 36vw;
    letter-spacing: -0.02em;
  }

  .m-crystal-pink {
    left: 54.4%;
    top: 56.754%;
    width: 41.031%;
    transform: rotate(-26.03deg);
    z-index: 7;
  }

  /* Figma 120:158 — Artboard 1@2x 3, x=274 y=2575 w=137.2 h=135.8 */
  .m-fruit-glow {
    left: calc(274 / 375 * 100%);
    top: calc(2575 / 3413 * 100%);
    width: calc(137.2 / 375 * 100%);
    height: calc(135.8 / 3413 * 100%);
    object-fit: fill;
    z-index: 8;
  }

  .m-glow-title {
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 12;
    pointer-events: none;
  }

  /* Figma 120:229 — flattened PNG in artboard AABB (no CSS rotate / SVG stretch) */
  .m-glow-title__halo {
    position: absolute;
    z-index: 1;
    display: block;
    max-width: none;
    object-fit: fill;
    transform: none;
    left: calc(-9 / 375 * 100%);
    top: calc(2163.250732421875 / 3413 * 100%);
    width: calc(377.67463355042855 / 375 * 100%);
    height: calc(165.810009551519 / 3413 * 100%);
  }

  .m-glow-title__shape { display: none; }

  /* Figma 120:230 */
  .m-glow-title__text {
    position: absolute;
    z-index: 2;
    left: calc(65.4140625 / 375 * 100%);
    top: calc(2192.87890625 / 3413 * 100%);
    width: calc(250.94119262695312 / 375 * 100%);
    margin: 0;
    color: #fff;
    font: 700 5.699vw/1.077 var(--m-font);
  }

  .m-glow-title__text span { display: block; }
  .m-glow-title__text span:first-child { font-size: 6.897vw; }

  /* Full-stage overlay so steps can use frame coordinates directly. */
  .m-steps {
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 13;
    pointer-events: none;
  }

  /* Figma 120:205 / 120:208 / 120:212 — vector digits with their white offset
     copy, kept as SVG so they stay sharp on 2×/3× screens */
  .m-num {
    position: absolute;
    left: calc(39 / 375 * 100%);
    z-index: 20;
    display: block;
  }

  .m-num--1 {
    top: calc(2306 / 3413 * 100%);
    width: calc(59.8 / 375 * 100%);
    height: calc(109.8 / 3413 * 100%);
  }

  .m-num--2 {
    top: calc(2417 / 3413 * 100%);
    width: calc(61.7 / 375 * 100%);
    height: calc(109.8 / 3413 * 100%);
  }

  .m-num--3 {
    top: calc(2533 / 3413 * 100%);
    width: calc(61.7 / 375 * 100%);
    height: calc(110.5 / 3413 * 100%);
  }

  .m-step {
    position: absolute;
    left: 33.765%;
    z-index: 20;
    margin: 0;
    font: 400 5.409vw/1.177 var(--m-font);
  }

  .m-step strong { font-weight: 700; }

  .m-step--1 { top: 67.975%; width: 67.518%; }
  .m-step--2 { top: 71.578%; width: 67.518%; }
  .m-step--3 { top: 75.329%; width: 37.318%; }

  .m-light-switch {
    position: absolute;
    left: 29.6%;
    top: 77.536%;
    z-index: 30;
    width: 40.8%;
    height: 2.027%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 2.485vw 0 16vw;
    border: .18vw solid #fff;
    border-radius: 999px;
    color: #e71984;
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 .7vw .7vw rgba(0,0,0,.25);
    font: 400 3.193vw/1.177 var(--m-font);
    pointer-events: auto;
    cursor: pointer;
    overflow: visible;
  }

  .m-light-switch [data-light-label] {
    width: 19.868vw;
    text-align: center;
    white-space: nowrap;
  }

  /* Figma 120:220 circle + bolt from 71:1311 */
  .m-light-switch__bulb {
    position: absolute;
    left: 1.333vw;
    top: 50%;
    width: 16.37vw;
    height: 16.19vw;
    transform: translateY(-50%);
    overflow: hidden;
    border-radius: 50%;
  }

  .m-light-switch__circle,
  .m-light-switch__bolt {
    position: absolute;
    display: block;
    max-width: none;
  }

  .m-light-switch__circle {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .m-light-switch__circle--night { opacity: 0; }

  .m-light-switch__bolt {
    left: 50%;
    top: 48%;
    width: 30%;
    height: auto;
    transform: translate(-50%, -50%) rotate(-12.74deg);
    transition: opacity 700ms ease;
  }

  /* Same asset/orientation as desktop night — no rotate (SVG was sideways) */
  .m-light-switch__bolt--night {
    opacity: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
  }

  .m-can-glow-o,
  .m-can-glow-p {
    position: absolute;
    max-width: none;
    transition: opacity 700ms ease, filter 700ms ease;
  }

  /* left/top are the un-rotated origin: Figma gives the rotated bounding box,
     so these are back-calculated from its centre. */
  .m-can-glow-o {
    left: 4.456%;
    top: 79.896%;
    width: 49.923%;
    height: 13.603%;
    transform: rotate(-8.08deg);
    filter: drop-shadow(1.86vw 3.16vw 3.7vw rgba(121, 63, 20, .3));
    z-index: 5;
  }

  .m-can-glow-p {
    left: 48.775%;
    top: 80.443%;
    width: 45.909%;
    height: 12.508%;
    transform: rotate(3.25deg);
    filter: drop-shadow(0 3vw 4.5vw rgba(0,0,0,.25));
    z-index: 6;
  }

  /* Figma 120:236 — night product; dark frame 120:233 origin ≈ 2644 on 3413 stage */
  .m-product-night {
    left: calc(-544.404 / 375 * 100%);
    top: calc(2623.3 / 3413 * 100%);
    width: calc(1150.079 / 375 * 100%);
    height: calc(635 / 3413 * 100%);
    object-fit: fill;
    z-index: 7;
    opacity: 0;
    transition: opacity 700ms ease;
  }

  /* Figma 120:242 — fade into dark footer */
  .m-footer-fade {
    position: absolute;
    left: 0;
    top: calc(3124.3 / 3413 * 100%);
    width: 100%;
    height: calc(286 / 3413 * 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000);
    opacity: 0;
    /* above .m-steps (13): the mock paints this fade after the night cans */
    z-index: 14;
    pointer-events: none;
    transition: opacity 700ms ease;
  }

  /* ——— Mobile dark / lights-off (Figma 120:233) ——— */
  .m-steps.is-lights-off .m-light-switch {
    justify-content: flex-start;
    padding: 0 16vw 0 2.485vw;
    color: #fff;
    background: rgba(255, 255, 255, .7);
    border-color: #fff;
  }

  .m-steps.is-lights-off .m-light-switch__bulb {
    left: auto;
    right: 1.333vw;
  }

  .m-steps.is-lights-off .m-light-switch__circle--day { opacity: 0; }
  /* Night bolt PNG includes the orange circle */
  .m-steps.is-lights-off .m-light-switch__circle--night { opacity: 0; }
  .m-steps.is-lights-off .m-light-switch__bolt--day { opacity: 0; }
  .m-steps.is-lights-off .m-light-switch__bolt--night { opacity: 1; }

  .m-steps.is-lights-off .m-can-glow-o--day,
  .m-steps.is-lights-off .m-can-glow-p--day {
    opacity: 0;
  }

  .m-steps.is-lights-off .m-product-night {
    opacity: 1;
  }

  body.is-lights-off .m-glow-splash,
  body.is-lights-off .m-fruit-glow,
  body.is-lights-off .m-cta-yellow {
    opacity: 0;
    transition: opacity 700ms ease;
  }

  /* Figma 120:243 — #010b03 with a 64 layer blur. The night-cans bitmap has its
     navy backdrop baked in and ends hard at y≈3260; in the mock this band and
     the fade above it paint after the cans, so both are lifted over .m-steps
     while the CTA block stays on top. */
  .m-night-band {
    position: absolute;
    z-index: 14;
    left: calc(-2 / 375 * 100%);
    top: calc(3217 / 3413 * 100%);
    width: calc(401 / 375 * 100%);
    height: calc(442 / 3413 * 100%);
    background: #010b03;
    opacity: 0;
    pointer-events: none;
    filter: blur(calc(64 / 375 * 100vw));
    transition: opacity 700ms ease;
  }

  body.is-lights-off .m-night-band {
    opacity: 1;
  }

  body.is-lights-off .m-footer-fade {
    opacity: 1;
  }

  body.is-lights-off .m-footer-glow {
    background: #010b03;
    opacity: .9;
  }

  /* Figma 120:243 — dark band #010b03 blur 32; extend to stage end (no orange strip) */
  body.is-lights-off .m-page-bg-yellow {
    left: calc(-2 / 375 * 100%);
    top: calc(3215.3 / 3413 * 100%);
    width: calc(401 / 375 * 100%);
    height: calc((3413 - 3215.3 + 48) / 3413 * 100%);
  }

  body.is-lights-off .m-page-bg-yellow__solid,
  body.is-lights-off .m-page-bg-yellow__fill {
    background: #010b03;
  }

  body.is-lights-off .m-page-bg-yellow__solid {
    top: 12%;
    left: 0;
    right: 0;
    bottom: -15%;
  }

  body.is-lights-off .mobile-stage::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6%;
    background: #010b03;
    z-index: 1;
    pointer-events: none;
  }

  /* Below-stage / letterbox stays dark in lights-off (Figma 120:233 ends on black) */
  body.is-lights-off,
  body.is-lights-off .mobile-page {
    background: #010b03;
  }

  body.is-lights-off .m-page-bg-ellipse {
    background: #010b03;
    opacity: .4;
  }

  .m-cta__halo--night,
  .m-cta__shape--night,
  .m-pyaterochka--night,
  .m-retail--night {
    opacity: 0;
    transition: opacity 700ms ease;
  }

  body.is-lights-off .m-cta__halo--day,
  body.is-lights-off .m-cta__shape--day,
  body.is-lights-off .m-pyaterochka--day,
  body.is-lights-off .m-retail--day {
    opacity: 0;
  }

  body.is-lights-off .m-cta__halo--night,
  body.is-lights-off .m-cta__shape--night,
  body.is-lights-off .m-pyaterochka--night,
  body.is-lights-off .m-retail--night {
    opacity: 1;
  }

  body.is-lights-off .m-legal {
    color: #fff;
  }

  .m-footer-glow {
    position: absolute;
    left: -14.072%;
    top: 94.883%;
    width: 143.804%;
    height: 7.807%;
    background: #f8b820;
    filter: blur(8.45vw);
    opacity: .85;
    transform: rotate(-6.06deg);
    z-index: 3;
    pointer-events: none;
    transition: background 700ms ease, opacity 700ms ease;
  }

  .m-cta-yellow {
    left: -4.8%;
    top: 91.093%;
    width: 63.867%;
    height: 3.34%;
    z-index: 12;
  }

  .m-cta {
    left: 5.333%;
    top: 93.349%;
    width: 59.733%;
    height: 2.973%;
    z-index: 15;
  }

  /* Child coordinates are relative to the .m-cta box (Figma 120:224 at 20,3186 224x101.5). */
  .m-cta__halo,
  .m-cta__shape {
    position: absolute;
    transform: rotate(1.44deg);
  }

  .m-cta__halo {
    left: .343%;
    top: 2.503%;
    width: 99.345%;
    height: 95.053%;
  }

  .m-cta__shape {
    left: 2.359%;
    top: 6.7%;
    width: 95.517%;
    height: 88.564%;
  }

  .m-cta__line {
    position: absolute;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    font: 700 4.988vw/1.05 var(--m-font);
  }

  .m-cta__line--1 { left: 1.548%;  top: 30.342%; width: 65.252%; }
  .m-cta__line--2 { left: 23.074%; top: 48.691%; width: 60.014%; }

  .m-pyaterochka {
    left: 5.333%;
    top: 96.601%;
    width: 44.8%;
    height: 1.246%;
    object-fit: contain;
    object-position: left center;
    z-index: 15;
  }

  .m-retail {
    left: 52.8%;
    top: 97.01%;
    width: 40%;
    height: 0.57%;
    object-fit: contain;
    object-position: left center;
    z-index: 15;
  }

  .m-retailer-link {
    position: absolute;
    z-index: 16;
    display: block;
  }

  .m-retailer-link--pyaterochka {
    left: 5.333%;
    top: 96.601%;
    width: 44.8%;
    height: 1.246%;
  }

  .m-retailer-link--perekrestok {
    left: 52.8%;
    top: 97.01%;
    width: 40%;
    height: .57%;
  }

  .m-legal {
    left: 4%;
    top: 98.476%;
    width: 92%;
    margin: 0;
    color: #fff;
    font-size: 3.2vw;
    line-height: 1.177;
    z-index: 15;
  }

  .m-header {
    position: absolute;
    left: 4%;
    top: 0.234%;
    width: 92%;
    height: 1.465%;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 1.307vw;
    padding: 0 4.3vw 0 4.8vw;
    background: #fff;
    border-radius: 3.2vw;
    box-sizing: border-box;
    pointer-events: auto;
  }

  .m-header__logo {
    position: relative;
    flex: 0 0 auto;
    width: 15.4vw; /* ~57.7px at 375 */
    height: 12.04vw; /* ~45.2px at 375 */
    text-decoration: none;
  }

  .m-header__dobry {
    position: absolute;
    left: 1.3%;
    top: 0.5%;
    width: 45.8%;
    z-index: 2;
  }

  .m-header__epic {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
  }

  /* Figma 120:29 — 95x36 box = 71x12 label + 12px padding */
  .m-header__buy {
    box-sizing: content-box;
    margin-left: auto;
    width: 18.933vw;
    padding: 3.2vw;
    border-radius: 2.67vw;
    color: #111;
    background: #fe6a00;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    font: 700 4.15vw/3.2vw var(--m-font);
  }

  .m-header__menu {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 6.93vw;
    height: 4.27vw;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #e71984;
  }

  .m-header__menu img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 160ms ease;
  }

  /* Burger turns into a cross while the panel is open */
  .m-header__menu::before,
  .m-header__menu::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6.93vw;
    height: 0.8vw;
    border-radius: 0.4vw;
    background: currentColor;
    opacity: 0;
    transition: opacity 160ms ease;
  }

  .m-header__menu::before { transform: translate(-50%, -50%) rotate(45deg); }
  .m-header__menu::after { transform: translate(-50%, -50%) rotate(-45deg); }
  .m-header__menu[aria-expanded="true"] img { opacity: 0; }

  .m-header__menu[aria-expanded="true"]::before,
  .m-header__menu[aria-expanded="true"]::after {
    opacity: 1;
  }

  /* The mockup has no open-menu state, so the panel repeats the header pill */
  .m-nav {
    position: absolute;
    right: 0;
    top: calc(100% + 2.13vw);
    display: grid;
    min-width: 52vw;
    padding: 1.07vw 0;
    background: #fff;
    border-radius: 3.2vw;
    box-shadow: 0 1.6vw 4.27vw rgba(17, 17, 17, .28);
    transform: scale(.96);
    transform-origin: top right;
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  }

  .m-header.is-menu-open .m-nav {
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  .m-nav__link {
    padding: 3.2vw 5.33vw;
    color: #111;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    font: 700 4.15vw/1.1 var(--m-font);
  }

  .m-nav__link + .m-nav__link {
    border-top: 0.27vw solid rgba(17, 17, 17, .12);
  }

  .m-nav__link:active {
    color: #fe6a00;
  }

  /* Scroll targets for the menu — the flavour block (120:140) and the glow
     headline (120:229); the stage is 3413 tall in Figma. */
  .m-anchor {
    position: absolute;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
  }

  .m-anchor--vibe { top: calc(1004 / 3413 * 100%); }
  .m-anchor--light { top: calc(2163 / 3413 * 100%); }

  /* ——— Motion ————————————————————————————————————————————————————————
     Reveals ride the standalone translate/scale properties, so every layer
     keeps the transform that carries its Figma rotation. main.js adds
     .m-motion — without it (no JS, or reduce-motion asked for) the artboard
     renders exactly as it does now. */
  .mobile-stage.m-motion .m-header,
  .mobile-stage.m-motion .m-title,
  .mobile-stage.m-motion .m-couple,
  .mobile-stage.m-motion .m-couple-splash,
  .mobile-stage.m-motion .m-splash-hero,
  .mobile-stage.m-motion .m-fruit-hero,
  .mobile-stage.m-motion .m-fruit-vector,
  .mobile-stage.m-motion .m-burst-hero,
  .mobile-stage.m-motion .m-crystal-tr,
  .mobile-stage.m-motion .m-crystal-br,
  .mobile-stage.m-motion .m-about-title,
  .mobile-stage.m-motion .m-about-copy,
  .mobile-stage.m-motion .m-fruit-about,
  .mobile-stage.m-motion .m-can-orange,
  .mobile-stage.m-motion .m-card--orange,
  .mobile-stage.m-motion .m-badge-tickle,
  .mobile-stage.m-motion .m-fruit-orange-a,
  .mobile-stage.m-motion .m-fruit-orange-b,
  .mobile-stage.m-motion .m-can-pink,
  .mobile-stage.m-motion .m-card--pink,
  .mobile-stage.m-motion .m-badge-ice,
  .mobile-stage.m-motion .m-fruit-pink,
  .mobile-stage.m-motion .m-ice-piece,
  .mobile-stage.m-motion .m-crystal-pink,
  .mobile-stage.m-motion .m-glow-title,
  .mobile-stage.m-motion .m-num,
  .mobile-stage.m-motion .m-step,
  .mobile-stage.m-motion .m-light-switch,
  .mobile-stage.m-motion .m-cta {
    opacity: 0;
  }

  /* Layers whose opacity already carries the day/night switch only travel —
     fading them here would fight those rules. The transitions wait for
     .m-anim-ready so the hidden state itself does not animate in. */
  .mobile-stage.m-anim-ready .m-header,
  .mobile-stage.m-anim-ready .m-title,
  .mobile-stage.m-anim-ready .m-couple,
  .mobile-stage.m-anim-ready .m-couple-splash,
  .mobile-stage.m-anim-ready .m-splash-hero,
  .mobile-stage.m-anim-ready .m-fruit-hero,
  .mobile-stage.m-anim-ready .m-fruit-vector,
  .mobile-stage.m-anim-ready .m-burst-hero,
  .mobile-stage.m-anim-ready .m-crystal-tr,
  .mobile-stage.m-anim-ready .m-crystal-br,
  .mobile-stage.m-anim-ready .m-about-title,
  .mobile-stage.m-anim-ready .m-about-copy,
  .mobile-stage.m-anim-ready .m-fruit-about,
  .mobile-stage.m-anim-ready .m-can-orange,
  .mobile-stage.m-anim-ready .m-card--orange,
  .mobile-stage.m-anim-ready .m-badge-tickle,
  .mobile-stage.m-anim-ready .m-fruit-orange-a,
  .mobile-stage.m-anim-ready .m-fruit-orange-b,
  .mobile-stage.m-anim-ready .m-can-pink,
  .mobile-stage.m-anim-ready .m-card--pink,
  .mobile-stage.m-anim-ready .m-badge-ice,
  .mobile-stage.m-anim-ready .m-fruit-pink,
  .mobile-stage.m-anim-ready .m-ice-piece,
  .mobile-stage.m-anim-ready .m-crystal-pink,
  .mobile-stage.m-anim-ready .m-glow-title,
  .mobile-stage.m-anim-ready .m-num,
  .mobile-stage.m-anim-ready .m-step,
  .mobile-stage.m-anim-ready .m-light-switch,
  .mobile-stage.m-anim-ready .m-cta,
  .mobile-stage.m-anim-ready .m-fruit-glow,
  .mobile-stage.m-anim-ready .m-cta-yellow,
  .mobile-stage.m-anim-ready .m-pyaterochka,
  .mobile-stage.m-anim-ready .m-retail,
  .mobile-stage.m-anim-ready .m-legal {
    transition:
      opacity 560ms ease var(--m-delay, 0ms),
      translate 760ms cubic-bezier(.2, .86, .28, 1) var(--m-delay, 0ms),
      scale 760ms cubic-bezier(.2, .86, .28, 1) var(--m-delay, 0ms);
  }

  /* Hero: header drops in, the plaque unfolds, the crystals pop */
  .mobile-stage.m-motion .m-header { translate: 0 -9vw; }
  .mobile-stage.m-motion .m-title { scale: .86; --m-delay: 60ms; }
  .mobile-stage.m-motion .m-couple,
  .mobile-stage.m-motion .m-couple-splash,
  .mobile-stage.m-motion .m-splash-hero { --m-delay: 140ms; }
  .mobile-stage.m-motion .m-fruit-hero,
  .mobile-stage.m-motion .m-fruit-vector,
  .mobile-stage.m-motion .m-burst-hero { --m-delay: 260ms; }
  .mobile-stage.m-motion .m-crystal-tr { scale: .7; --m-delay: 320ms; }
  .mobile-stage.m-motion .m-crystal-br { scale: .7; --m-delay: 380ms; }

  /* The plaque containers span the whole artboard, so they scale about the
     centre of the bubble itself (120:200 and 120:229). */
  .mobile-stage.m-motion .m-about-title {
    scale: .9;
    transform-origin: 50% calc(706 / 3413 * 100%);
  }

  .mobile-stage.m-motion .m-about-copy { translate: 0 5vw; --m-delay: 120ms; }
  .mobile-stage.m-motion .m-fruit-about { scale: .78; --m-delay: 200ms; }

  /* Cans keep translate free for their idle float, so they arrive on scale */
  .mobile-stage.m-motion .m-can-orange,
  .mobile-stage.m-motion .m-can-pink { scale: .92; }

  .mobile-stage.m-motion .m-card--orange { translate: -9vw 0; --m-delay: 120ms; }
  .mobile-stage.m-motion .m-card--pink { translate: 9vw 0; --m-delay: 120ms; }
  .mobile-stage.m-motion .m-badge-tickle,
  .mobile-stage.m-motion .m-badge-ice { scale: .6; --m-delay: 220ms; }
  .mobile-stage.m-motion .m-fruit-orange-a { scale: .72; --m-delay: 280ms; }
  .mobile-stage.m-motion .m-fruit-orange-b { scale: .72; --m-delay: 340ms; }
  .mobile-stage.m-motion .m-fruit-pink { scale: .72; --m-delay: 280ms; }
  .mobile-stage.m-motion .m-ice-piece { scale: .72; --m-delay: 340ms; }
  .mobile-stage.m-motion .m-crystal-pink { scale: .72; --m-delay: 400ms; }

  .mobile-stage.m-motion .m-glow-title {
    scale: .9;
    transform-origin: calc(179.8 / 375 * 100%) calc(2227 / 3413 * 100%);
  }

  .mobile-stage.m-motion .m-num,
  .mobile-stage.m-motion .m-step { translate: 0 4vw; }
  .mobile-stage.m-motion .m-num--1,
  .mobile-stage.m-motion .m-step--1 { --m-delay: 80ms; }
  .mobile-stage.m-motion .m-num--2,
  .mobile-stage.m-motion .m-step--2 { --m-delay: 180ms; }
  .mobile-stage.m-motion .m-num--3,
  .mobile-stage.m-motion .m-step--3 { --m-delay: 280ms; }
  .mobile-stage.m-motion .m-fruit-glow { translate: 0 3vw; --m-delay: 200ms; }
  .mobile-stage.m-motion .m-light-switch { scale: .9; --m-delay: 380ms; }

  .mobile-stage.m-motion .m-cta { scale: .88; }
  .mobile-stage.m-motion .m-cta-yellow { translate: 0 3vw; }
  .mobile-stage.m-motion .m-pyaterochka { translate: 0 4vw; --m-delay: 140ms; }
  .mobile-stage.m-motion .m-retail { translate: 0 4vw; --m-delay: 200ms; }
  .mobile-stage.m-motion .m-legal { translate: 0 3vw; --m-delay: 260ms; }

  /* Arrived state — kept last so it wins over the per-layer offsets above.
     The travel-only layers are skipped here: their opacity is the day/night
     switch, and forcing it to 1 would light the night art up in daylight. */
  .mobile-stage.m-motion .is-in {
    translate: none;
    scale: 1;
  }

  .mobile-stage.m-motion .is-in:not(.m-fruit-glow):not(.m-cta-yellow):not(.m-pyaterochka):not(.m-retail) {
    opacity: 1;
  }

  /* Idle loops. Each uses the channel its reveal left alone. */
  .mobile-stage.m-motion .m-header__logo {
    animation: m-wiggle 7.2s ease-in-out infinite;
  }

  .mobile-stage.m-motion .m-can-orange.is-in {
    animation: m-float 6.4s ease-in-out infinite;
  }

  .mobile-stage.m-motion .m-can-pink.is-in {
    animation: m-float 7.1s ease-in-out .8s infinite;
  }

  .mobile-stage.m-motion .m-badge-tickle.is-in {
    animation: m-rock 4.6s ease-in-out infinite;
  }

  .mobile-stage.m-motion .m-badge-ice.is-in {
    animation: m-rock 5.4s ease-in-out .6s infinite;
  }

  .mobile-stage.m-motion .m-fruit-glow.is-in {
    animation: m-breathe 5.6s ease-in-out infinite;
  }

  /* Lightning over the night cans, on the same 5.8s loop as the desktop
     sampler; only while the lights are off. */
  .m-lightning {
    position: absolute;
    z-index: 8;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .m-lightning__bolt {
    position: absolute;
    opacity: 0;
    background: url("../assets/s4/layers/lightning.webp") no-repeat 50% 50% / 100% 100%;
    mix-blend-mode: screen;
  }

  .m-lightning__bolt:nth-child(1) {
    left: calc(-6 / 375 * 100%);
    top: calc(2680 / 3413 * 100%);
    width: calc(130 / 375 * 100%);
    height: calc(167 / 3413 * 100%);
    rotate: 8deg;
    animation-delay: -0.4s;
  }

  .m-lightning__bolt:nth-child(2) {
    left: calc(250 / 375 * 100%);
    top: calc(2620 / 3413 * 100%);
    width: calc(118 / 375 * 100%);
    height: calc(152 / 3413 * 100%);
    rotate: -172deg;
    animation-delay: -1.7s;
  }

  .m-lightning__bolt:nth-child(3) {
    left: calc(96 / 375 * 100%);
    top: calc(2900 / 3413 * 100%);
    width: calc(140 / 375 * 100%);
    height: calc(180 / 3413 * 100%);
    rotate: 6deg;
    animation-delay: -2.7s;
  }

  .m-lightning__bolt:nth-child(4) {
    left: calc(268 / 375 * 100%);
    top: calc(2960 / 3413 * 100%);
    width: calc(110 / 375 * 100%);
    height: calc(142 / 3413 * 100%);
    rotate: 186deg;
    animation-delay: -3.5s;
  }

  .m-lightning__bolt:nth-child(5) {
    left: calc(-14 / 375 * 100%);
    top: calc(3030 / 3413 * 100%);
    width: calc(120 / 375 * 100%);
    height: calc(154 / 3413 * 100%);
    rotate: -10deg;
    animation-delay: -4.7s;
  }

  .mobile-stage.m-motion .m-steps.is-lights-off .m-lightning__bolt {
    animation-name: m-bolt;
    animation-duration: 5.8s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(1, end);
  }
}

/* Keyframes live outside the mobile query — they are global anyway. */
@keyframes m-wiggle {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  25% { translate: .35vw -.25vw; rotate: 1.1deg; }
  50% { translate: -.2vw .3vw; rotate: -.7deg; }
  75% { translate: -.35vw -.2vw; rotate: .9deg; }
}

@keyframes m-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -1.6vw; }
}

@keyframes m-rock {
  0%, 100% { rotate: 0deg; }
  35% { rotate: 2.4deg; }
  70% { rotate: -1.8deg; }
}

@keyframes m-breathe {
  0%, 100% { scale: 1; }
  50% { scale: 1.07; }
}

@keyframes m-bolt {
  0%, 7% { opacity: 0; }
  8% { opacity: .95; }
  11% { opacity: .3; }
  14% { opacity: .9; }
  20% { opacity: 0; }
  100% { opacity: 0; }
}

/* TEMP: background-only debug vs Figma 71:1042 / 71:1043.
   Remove class "debug-bg" from <body> to restore the full page. */
body.debug-bg .site-header,
body.debug-bg .mobile-page,
body.debug-bg .scene-layer,
body.debug-bg .hero-new-burst,
body.debug-bg .about-copy,
body.debug-bg .about-title,
body.debug-bg .about-columns,
body.debug-bg .about-transition-vector,
body.debug-bg .flavor-card,
body.debug-bg .flavor-hit,
body.debug-bg .flavor-effect,
body.debug-bg .flavors-blue-clip,
body.debug-bg .glow-blue-seam-clip,
body.debug-bg .glow-splash,
body.debug-bg .glow-fruit,
body.debug-bg .glow-product,
body.debug-bg .glow-hard-clip--copy,
body.debug-bg .glow-copy,
body.debug-bg .light-switch,
body.debug-bg .desktop-cta,
body.debug-bg .desktop-cta-bg {
  visibility: hidden !important;
  pointer-events: none !important;
}

body.debug-bg .page-bg,
body.debug-bg .page-bg__img,
body.debug-bg .page-bg-yellow,
body.debug-bg .page-bg-yellow__fill,
body.debug-bg .page-bg-ellipse {
  visibility: visible !important;
}

body.debug-bg .scene {
  background: transparent;
}

/* TEMP: desktop hero-only debug vs Figma 71:1044. Remove class to restore. */
body.debug-hero .mobile-page,
body.debug-hero .scene--about,
body.debug-hero .scene--flavors,
body.debug-hero .scene--glow,
body.debug-hero .desktop-cta,
body.debug-hero .page-bg-yellow,
body.debug-hero .page-bg-ellipse,
body.debug-hero .page-end-spacer {
  visibility: hidden !important;
  pointer-events: none !important;
}

body.debug-hero .page-bg,
body.debug-hero .page-bg__img,
body.debug-hero .site-header,
body.debug-hero .scene--hero,
body.debug-hero .scene--hero * {
  visibility: visible !important;
}

body.debug-hero .scene--about,
body.debug-hero .scene--flavors,
body.debug-hero .scene--glow {
  height: 0 !important;
  aspect-ratio: unset !important;
  overflow: hidden !important;
}

/* TEMP: desktop about-only debug vs Figma 71:1175 */
body.debug-about .mobile-page,
body.debug-about .scene--hero,
body.debug-about .scene--flavors,
body.debug-about .scene--glow,
body.debug-about .desktop-cta,
body.debug-about .page-bg-yellow,
body.debug-about .page-bg-ellipse,
body.debug-about .page-end-spacer,
body.debug-about .site-header {
  visibility: hidden !important;
  pointer-events: none !important;
}

body.debug-about .page-bg,
body.debug-about .page-bg__img,
body.debug-about .scene--about,
body.debug-about .scene--about * {
  visibility: visible !important;
}

body.debug-about .scene--hero {
  height: 0 !important;
  aspect-ratio: unset !important;
  overflow: hidden !important;
}

body.debug-about .scene--about {
  /* Pull continuous bg so screen-2 y=1080 aligns to viewport top */
  margin-top: 0;
}

body.debug-about .page-bg {
  /* Shift bg up by one screen (1080 of 1920 artboard) */
  top: calc(100vw * (-66.552734375 - 1080) / 1920);
}