: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;
}

.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 */
.scene--about { z-index: 4; }
.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;
}
.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-glow { z-index: 1; pointer-events: none; }
.flavors-glow--main {
  left: calc(-127 / 1920 * 100%);
  top: calc(-145 / 1080 * 100%);
  width: calc(1983.974 / 1920 * 100%);
  height: calc(2049.629 / 1080 * 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.flavors-glow__rot--main {
  flex: none;
  width: calc(1567.156 / 1920 * 100vw);
  height: calc(1358.003 / 1920 * 100vw);
  transform: rotate(122.18deg);
  transform-origin: center center;
}
.flavors-glow__rot--main img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}
.flavors-glow--a {
  left: calc(424 / 1920 * 100%);
  top: calc(460 / 1080 * 100%);
  width: calc(330 / 1920 * 100%);
  height: calc(411 / 1080 * 100%);
}
.flavors-glow--b {
  left: calc(183 / 1920 * 100%);
  top: calc(509 / 1080 * 100%);
  width: calc(330 / 1920 * 100%);
  height: calc(411 / 1080 * 100%);
}
.flavors-glow--c {
  left: calc(1246 / 1920 * 100%);
  top: calc(476 / 1080 * 100%);
  width: calc(330 / 1920 * 100%);
  height: calc(411 / 1080 * 100%);
}

.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;
}
/* Twin of flavors-blue for the S3→S4 seam. Clipped to this scene so it
   cannot paint over cans/badges in the flavors screen above. */
/* Twin of flavors-blue for S3→S4 seam only — must NOT reach cans
   (left edge previously sat between cans as a hard vertical seam). */
.glow-blue-seam-clip {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  /* Only the top ~40% of glow scene — seam with flavors, not product */
  height: 42%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 700ms ease;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.glow-blue-seam {
  left: 18%;
  top: -180%;
  width: 102%;
  height: 280%;
}
/* Soft ellipse 71:1194 — AABB + rotate */
.glow-ellipse {
  z-index: 0;
  left: calc(-127 / 1920 * 100%);
  top: calc(-1225 / 1080 * 100%);
  width: calc(1983.974 / 1920 * 100%);
  height: calc(2049.629 / 1080 * 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 700ms ease;
}
.glow-ellipse__rot {
  flex: none;
  width: calc(1567.156 / 1983.974 * 100%);
  height: calc(1358.003 / 2049.629 * 100%);
  transform: rotate(122.18deg);
  position: relative;
}
.glow-ellipse__rot img {
  position: absolute;
  /* Figma inset -15.76% / -13.66% for blur padding */
  inset: -15.76% -13.66%;
  width: auto;
  height: auto;
  max-width: none;
  display: block;
}
/* Yellow/blue seam splashes — behind product (Figma Frame 13 before 71:1306) */
.glow-splash {
  z-index: 1;
  left: 48%;
  top: -8%;
  width: 55%;
  height: 55%;
  object-fit: contain;
  object-position: right center;
  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;
  opacity: 0;
}
/* Dark veil under products — full scene so day page-bg cannot bleed amber at footer seam */
.glow-night-veil {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  top: -40%;
  /* Cover product overflow + dark footer band (74:1623) so day page-bg cannot seam-cut */
  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);
}

/* 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; }
.glow.is-lights-off .glow-blue-seam-clip {
  opacity: 0;
  transition: opacity 700ms ease;
}
.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-ellipse,
.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) */
body.is-lights-off .page-bg,
body.is-lights-off .page-bg__img {
  opacity: 0;
  transition: opacity 700ms ease;
}
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__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: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;
  }

  .m-crystal-tr {
    left: 81.067%;
    top: 5.889%;
    width: 25.4%;
    transform: rotate(22.51deg);
    z-index: 7;
  }

  .m-couple {
    left: 9.5%;
    top: 8.7%;
    width: 85%;
    z-index: 5;
  }

  .m-splash-hero {
    left: -10.877%;
    top: 13.191%;
    width: 147.123%;
    transform: rotate(17.02deg);
    z-index: 4;
  }

  .m-couple-splash {
    left: 9.5%;
    top: 8.69%;
    width: 85%;
    z-index: 6;
    -webkit-mask-image: url("../assets/mobile/layers/couple-mask.svg");
    mask-image: url("../assets/mobile/layers/couple-mask.svg");
    -webkit-mask-size: 85.3% 35.6%;
    mask-size: 85.3% 35.6%;
    -webkit-mask-position: 8.6% 54.7%;
    mask-position: 8.6% 54.7%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .m-fruit-hero {
    left: -11.733%;
    top: 14.825%;
    width: 36.02%;
    transform: rotate(1.22deg);
    z-index: 6;
  }

  .m-fruit-vector {
    left: 24%;
    top: 16.672%;
    width: 44.983%;
    transform: rotate(10.43deg);
    z-index: 6;
  }

  .m-burst-hero {
    left: 78%;
    top: 17.082%;
    width: 68%;
    transform: rotate(174.59deg) scaleY(-1);
    transform-origin: center;
    z-index: 3;
  }

  .m-crystal-br {
    left: 80.267%;
    top: 16.847%;
    width: 23.165%;
    transform: rotate(-87.06deg);
    z-index: 7;
  }

  /* 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 (blue ice → orange glow seam) */
  .m-glow-splash {
    left: -32.515%;
    top: 69.528%;
    width: 335.437%;
    height: 37.983%;
    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;
  }

  .m-fruit-glow {
    left: 72%;
    top: 74.8%;
    width: 28%;
    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;
  }

  /* Number art is exported with white offset baked in (Figma 120:205…). */
  .m-num {
    position: absolute;
    left: 10.4%;
    z-index: 20;
    display: block;
    height: auto;
  }

  .m-num--1 { top: 67.565%; width: 15.905%; }
  .m-num--2 { top: 70.818%; width: 16.465%; }
  .m-num--3 { top: 74.216%; width: 16.465%; }

  .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;
    z-index: 2;
    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;
  }

  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: 14;
  }

  /* 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: 14;
  }

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

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

  .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 {
    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;
  }
}

/* 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);
}