@font-face {
  font-family: "Anton CBD";
  src: url("./assets/fonts/anton-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --black: #050706;
  --ink: #111411;
  --gold: #c89a42;
  --gold-light: #f0cd76;
  --gold-dark: #8b6527;
  --text: #f8f5ee;
  --muted: rgba(248, 245, 238, 0.75);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--black);
}

/* Desktop Telegram forwards wheel events from the app content to the page.
   Keep those wheel steps native-speed instead of smoothing every update. */
html.platform-desktop {
  scroll-behavior: auto;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--black);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button {
  font: inherit;
}

.welcome {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 10%, rgba(213, 157, 69, 0.32), transparent 25%),
    radial-gradient(circle at 18% 72%, rgba(193, 133, 43, 0.17), transparent 28%),
    linear-gradient(160deg, #101612 0%, #050706 48%, #120e08 100%);
}

.welcome__media,
.welcome__fallback,
.welcome__shade,
.welcome__grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.welcome__media {
  z-index: -5;
  display: none;
  object-fit: cover;
}

.welcome__media.is-ready {
  display: block;
}

.welcome__media--image {
  object-position: center center;
}

.welcome__fallback {
  z-index: -4;
  overflow: hidden;
  opacity: 0.78;
  background:
    radial-gradient(circle at 24% 14%, rgba(255, 217, 127, 0.22) 0 1.2%, transparent 1.7%),
    radial-gradient(circle at 71% 17%, rgba(255, 188, 70, 0.3) 0 0.9%, transparent 1.5%),
    radial-gradient(circle at 83% 30%, rgba(255, 215, 128, 0.22) 0 1.1%, transparent 1.8%);
}

.welcome__fallback[hidden] {
  display: none;
}

.bottle {
  position: absolute;
  bottom: -9%;
  width: 24%;
  height: 72%;
  border-radius: 35% 35% 14% 14% / 16% 16% 8% 8%;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.86), rgba(82, 47, 18, 0.72) 42%, rgba(219, 151, 50, 0.21) 52%, rgba(20, 13, 8, 0.9)),
    #160d07;
  filter: blur(1px);
  box-shadow: inset 0 0 35px rgba(255, 183, 74, 0.12), 0 0 50px rgba(0, 0, 0, 0.8);
  transform-origin: bottom;
}

.bottle::before {
  content: "";
  position: absolute;
  top: -22%;
  left: 34%;
  width: 32%;
  height: 30%;
  border-radius: 22% 22% 8% 8%;
  background: inherit;
}

.bottle::after {
  content: "";
  position: absolute;
  top: -24%;
  left: 29%;
  width: 42%;
  height: 4%;
  border-radius: 50%;
  background: linear-gradient(#e2a840, #6f4515);
  box-shadow: 0 0 12px rgba(242, 185, 76, 0.48);
}

.bottle--left {
  left: -7%;
  transform: rotate(-13deg) scale(1.08);
}

.bottle--center {
  left: 39%;
  bottom: 13%;
  height: 66%;
  opacity: 0.52;
  transform: scale(0.75);
}

.bottle--right {
  right: -9%;
  transform: rotate(11deg) scale(1.1);
}

.welcome__shade {
  z-index: -3;
  background:
    radial-gradient(ellipse at 50% 43%, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.34) 24%, transparent 50%),
    linear-gradient(180deg, rgba(3, 5, 4, 0.05) 0%, rgba(3, 5, 4, 0.18) 32%, rgba(3, 5, 4, 0.74) 74%, rgba(2, 3, 2, 0.95) 100%),
    radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.73) 100%);
}

.welcome__grain {
  z-index: -2;
  opacity: 0.14;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
}

.welcome__content {
  width: min(100%, 620px);
  min-height: 100svh;
  margin: 0 auto;
  padding: calc(34px + var(--safe-top)) 22px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

.brand-mark {
  order: 1;
  position: relative;
  width: clamp(162px, 34vw, 220px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.brand-mark__image {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-mark__image.is-ready {
  display: block;
}

.brand-mark__placeholder {
  width: 100%;
  aspect-ratio: 1;
  padding: 17% 10%;
  border: 4px double #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(2, 5, 4, 0.52);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  letter-spacing: 0.06em;
}

.brand-mark__placeholder[hidden] {
  display: none;
}

.brand-mark__placeholder strong {
  width: 100%;
  margin: 5% 0;
  padding: 1% 0 4%;
  border-block: 3px solid #fff;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: clamp(46px, 11vw, 72px);
  line-height: 0.84;
  letter-spacing: -0.08em;
}

.brand-mark__top,
.brand-mark__bottom {
  font-weight: 800;
  font-size: clamp(12px, 2.8vw, 18px);
}

.hero-copy {
  order: 2;
  position: relative;
}

.hero-copy h1 {
  position: relative;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  font-family: "Anton CBD", Impact, "Arial Narrow", sans-serif;
  font-size: clamp(48px, 13.8vw, 90px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  perspective: 600px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
}

.hero-copy h1 em {
  color: #fff;
  font-style: normal;
}

.hero-word {
  position: relative;
  display: block;
  white-space: nowrap;
}

.hero-word .letter {
  display: inline-block;
  opacity: 0;
  transform-origin: 50% 100%;
  animation: hero-letter-rise 900ms cubic-bezier(0.16, 0.8, 0.24, 1)
    calc(160ms + var(--letter-index) * 46ms) forwards;
  will-change: transform, opacity, filter;
}

.intro-complete .hero-word .letter {
  will-change: auto;
}

.hero-word .letter--space {
  width: 0.31em;
}

.hero-word--light .letter {
  color: transparent;
  background: linear-gradient(110deg, #f6f2e9 8%, #ffffff 42%, #ffe8ad 50%, #ffffff 58%, #e8e3d8 92%);
  background-size: 300% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation:
    hero-letter-rise 900ms cubic-bezier(0.16, 0.8, 0.24, 1) calc(160ms + var(--letter-index) * 46ms) forwards,
    title-sheen 7s ease-in-out calc(1.8s + var(--letter-index) * 35ms) infinite;
}

.hero-word--gold .letter {
  position: relative;
  z-index: 1;
  color: #fff;
  background: none;
  -webkit-text-fill-color: #fff;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
  animation: hero-letter-rise 900ms cubic-bezier(0.16, 0.8, 0.24, 1)
    calc(160ms + var(--letter-index) * 46ms) forwards;
}

.hero-word--gold::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -0.055em -0.3em -0.15em;
  clip-path: polygon(2.5% 0, 97.5% 0, 89% 100%, 11% 100%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 24%),
    linear-gradient(100deg, #020202 0%, #151513 48%, #030303 100%);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.13),
    inset 0 -1px rgba(255, 255, 255, 0.16);
  filter:
    drop-shadow(0 7px 12px rgba(0, 0, 0, 0.88))
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.42));
  transform-origin: center;
  animation: distribution-badge-reveal 720ms cubic-bezier(0.18, 0.8, 0.22, 1) 620ms both;
}

.hero-word--gold::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: -0.085em -0.34em -0.185em;
  padding: 1.5px;
  clip-path: polygon(2.5% 0, 97.5% 0, 89% 100%, 11% 100%);
  background: linear-gradient(
    110deg,
    rgba(151, 101, 27, 0.12) 0%,
    rgba(255, 218, 126, 0.92) 26%,
    rgba(184, 123, 30, 0.2) 48%,
    rgba(255, 231, 158, 0.86) 72%,
    rgba(129, 83, 20, 0.12) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  animation: distribution-contour-breathe 5.2s ease-in-out 1.5s infinite;
}

.beer-drops {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.beer-drop {
  --drop-size: 8px;
  position: absolute;
  width: var(--drop-size);
  height: calc(var(--drop-size) * 1.28);
  border: 1px solid rgba(255, 224, 143, 0.7);
  border-radius: 64% 36% 58% 42% / 72% 48% 52% 28%;
  opacity: 0;
  background:
    radial-gradient(circle at 31% 25%, rgba(255, 255, 255, 0.96) 0 8%, transparent 18%),
    radial-gradient(circle at 55% 68%, #8b4a08 0 20%, #d78b18 48%, #ffd47a 76%, #fff0b2 100%);
  box-shadow:
    inset -2px -3px 3px rgba(86, 38, 2, 0.5),
    inset 2px 2px 3px rgba(255, 235, 167, 0.75),
    0 2px 5px rgba(0, 0, 0, 0.55),
    0 0 8px rgba(219, 153, 41, 0.3);
  transform: translateY(-5px) scale(0.55);
  animation: beer-drop-settle 5.4s ease-in-out var(--drop-delay) infinite;
}

.beer-drop::after {
  content: "";
  position: absolute;
  width: 28%;
  height: 22%;
  top: 18%;
  left: 22%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  filter: blur(0.35px);
}

.beer-drop--1 { --drop-size: 7px; --drop-delay: 1.1s; top: 5%; left: 16%; }
.beer-drop--2 { --drop-size: 9px; --drop-delay: 1.65s; top: 17%; left: 54%; }
.beer-drop--3 { --drop-size: 6px; --drop-delay: 2.1s; top: 35%; left: 80%; }
.beer-drop--4 { --drop-size: 8px; --drop-delay: 1.45s; top: 57%; left: 23%; }
.beer-drop--5 { --drop-size: 10px; --drop-delay: 2.35s; top: 66%; left: 62%; animation-name: beer-drop-drip; }
.beer-drop--6 { --drop-size: 6px; --drop-delay: 2.7s; top: 82%; left: 87%; }

.hero-copy__rule {
  display: block;
  width: 52px;
  height: 2px;
  margin: 22px auto 16px;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
}

.hero-copy p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(18px, 4.3vw, 26px);
  line-height: 1.35;
}

.catalog-cta {
  order: 4;
  width: min(94%, 440px);
  position: relative;
  flex: 0 0 auto;
  padding-bottom: 44px;
}

.catalog-button {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 72px;
  padding: 13px 24px;
  border: 1px solid var(--gold-light);
  border-radius: 999px;
  display: grid;
  grid-template-columns: 38px 1fr 26px;
  align-items: center;
  gap: 14px;
  color: #16130c;
  background: linear-gradient(135deg, #f1cf76 0%, #c9973d 50%, #e1bb62 100%);
  box-shadow: 0 0 24px rgba(222, 170, 65, 0.24), inset 0 1px rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.catalog-button:active {
  transform: scale(0.985);
}

.catalog-button:hover {
  box-shadow: 0 0 34px rgba(234, 184, 78, 0.4), inset 0 1px rgba(255, 255, 255, 0.7);
}

.catalog-button.is-previewing {
  animation: catalog-preview-pulse 620ms ease both;
}

.catalog-button span {
  font-size: clamp(18px, 4.2vw, 24px);
  font-weight: 720;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.catalog-button svg,
.advantages svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.catalog-button__icon {
  width: 36px;
}

.catalog-button__arrow {
  width: 26px;
}

.ice-pile {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: -35px;
  width: 112%;
  height: 112px;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, 60px, 0);
}

.ice-pile::before,
.ice-pile::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.ice-pile::before {
  z-index: 0;
  left: 7%;
  right: 7%;
  bottom: 1px;
  height: 17px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.72), transparent 72%);
  filter: blur(4px);
}

.ice-pile::after {
  z-index: 0;
  left: 13%;
  right: 13%;
  bottom: 5px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(137, 204, 224, 0.1), transparent 72%);
  filter: blur(7px);
}

.ice-cube {
  position: absolute;
  z-index: var(--layer, 2);
  left: var(--left);
  bottom: var(--bottom, 0px);
  width: clamp(58px, calc(var(--size) * 1.75), 112px);
  aspect-ratio: 1;
  display: block;
  opacity: 0.98;
  border-radius: 18%;
  background-image: url("./assets/ice-atlas-transparent.webp");
  background-repeat: no-repeat;
  background-size: 400% 300%;
  background-position: var(--sprite-x) var(--sprite-y);
  transform: translate3d(0, 0, 0) rotate(var(--final-rotation)) scale(1);
  transform-origin: 50% 70%;
  backface-visibility: hidden;
}

.ice-pile.is-animating {
  will-change: transform, opacity;
}

.ice-pile.is-ready {
  animation: ice-pile-rise 1.25s cubic-bezier(0.16, 0.84, 0.24, 1) 100ms both;
}

.ice-pile.is-settled {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
  animation: none;
  will-change: auto;
}

.ice-cube--1 {
  --left: 0%; --bottom: 18px; --size: 9.8vw; --layer: 2;
  --sprite-x: 0%; --sprite-y: 0%; --delay: 80ms; --duration: 1.68s;
  --launch-x: -18px; --launch-rotation: -43deg; --drift-x: 8px; --apex-y: -46px;
  --air-rotation: 8deg; --final-rotation: -15deg; --bounce-rotation: -11deg;
}

.ice-cube--2 {
  --left: 12%; --bottom: 21px; --size: 11.2vw; --layer: 4;
  --sprite-x: 33.333%; --sprite-y: 0%; --delay: 260ms; --duration: 1.72s;
  --launch-x: 22px; --launch-rotation: 38deg; --drift-x: -9px; --apex-y: -58px;
  --air-rotation: -13deg; --final-rotation: 11deg; --bounce-rotation: 7deg;
}

.ice-cube--3 {
  --left: 24%; --bottom: 17px; --size: 10.2vw; --layer: 5;
  --sprite-x: 66.667%; --sprite-y: 0%; --delay: 150ms; --duration: 1.82s;
  --launch-x: -12px; --launch-rotation: -58deg; --drift-x: 7px; --apex-y: -50px;
  --air-rotation: 22deg; --final-rotation: -7deg; --bounce-rotation: -3deg;
}

.ice-cube--4 {
  --left: 36%; --bottom: 22px; --size: 11.7vw; --layer: 3;
  --sprite-x: 100%; --sprite-y: 0%; --delay: 390ms; --duration: 1.76s;
  --launch-x: 17px; --launch-rotation: 54deg; --drift-x: -7px; --apex-y: -64px;
  --air-rotation: -18deg; --final-rotation: 14deg; --bounce-rotation: 9deg;
}

.ice-cube--5 {
  --left: 49%; --bottom: 18px; --size: 10.4vw; --layer: 4;
  --sprite-x: 0%; --sprite-y: 50%; --delay: 40ms; --duration: 1.9s;
  --launch-x: -23px; --launch-rotation: -66deg; --drift-x: 10px; --apex-y: -70px;
  --air-rotation: 25deg; --final-rotation: -12deg; --bounce-rotation: -7deg;
}

.ice-cube--6 {
  --left: 62%; --bottom: 21px; --size: 11.5vw; --layer: 3;
  --sprite-x: 33.333%; --sprite-y: 50%; --delay: 310ms; --duration: 1.84s;
  --launch-x: 21px; --launch-rotation: 63deg; --drift-x: -11px; --apex-y: -55px;
  --air-rotation: -20deg; --final-rotation: 8deg; --bounce-rotation: 4deg;
}

.ice-cube--7 {
  --left: 75%; --bottom: 17px; --size: 10.2vw; --layer: 5;
  --sprite-x: 66.667%; --sprite-y: 50%; --delay: 470ms; --duration: 1.64s;
  --launch-x: -16px; --launch-rotation: -48deg; --drift-x: 8px; --apex-y: -47px;
  --air-rotation: 17deg; --final-rotation: 16deg; --bounce-rotation: 11deg;
}

.ice-cube--8 {
  --left: 88%; --bottom: 20px; --size: 11vw; --layer: 2;
  --sprite-x: 100%; --sprite-y: 50%; --delay: 210ms; --duration: 1.88s;
  --launch-x: 19px; --launch-rotation: 57deg; --drift-x: -8px; --apex-y: -62px;
  --air-rotation: -24deg; --final-rotation: -9deg; --bounce-rotation: -5deg;
}

.ice-cube--9 {
  --left: -1%; --bottom: -5px; --size: 12.5vw; --layer: 7;
  --sprite-x: 0%; --sprite-y: 100%; --delay: 520ms; --duration: 1.6s;
  --launch-x: -19px; --launch-rotation: -61deg; --drift-x: 7px; --apex-y: -43px;
  --air-rotation: 20deg; --final-rotation: 13deg; --bounce-rotation: 9deg;
}

.ice-cube--10 {
  --left: 10%; --bottom: -8px; --size: 14.5vw; --layer: 9;
  --sprite-x: 33.333%; --sprite-y: 100%; --delay: 610ms; --duration: 1.56s;
  --launch-x: 13px; --launch-rotation: 46deg; --drift-x: -6px; --apex-y: -42px;
  --air-rotation: -15deg; --final-rotation: 5deg; --bounce-rotation: 2deg;
}

.ice-cube--11 {
  --left: 21%; --bottom: -2px; --size: 13.2vw; --layer: 8;
  --sprite-x: 66.667%; --sprite-y: 100%; --delay: 180ms; --duration: 1.76s;
  --launch-x: -20px; --launch-rotation: -52deg; --drift-x: 9px; --apex-y: -58px;
  --air-rotation: 19deg; --final-rotation: -11deg; --bounce-rotation: -6deg;
}

.ice-cube--12 {
  --left: 33%; --bottom: -7px; --size: 14.8vw; --layer: 6;
  --sprite-x: 100%; --sprite-y: 100%; --delay: 360ms; --duration: 1.72s;
  --launch-x: 18px; --launch-rotation: 61deg; --drift-x: -10px; --apex-y: -66px;
  --air-rotation: -22deg; --final-rotation: 12deg; --bounce-rotation: 7deg;
}

.ice-cube--13 {
  --left: 45%; --bottom: -1px; --size: 13.5vw; --layer: 9;
  --sprite-x: 0%; --sprite-y: 0%; --delay: 90ms; --duration: 1.88s;
  --launch-x: -24px; --launch-rotation: -67deg; --drift-x: 11px; --apex-y: -72px;
  --air-rotation: 27deg; --final-rotation: -8deg; --bounce-rotation: -3deg;
}

.ice-cube--14 {
  --left: 57%; --bottom: -7px; --size: 14.7vw; --layer: 7;
  --sprite-x: 33.333%; --sprite-y: 50%; --delay: 440ms; --duration: 1.68s;
  --launch-x: 22px; --launch-rotation: 58deg; --drift-x: -9px; --apex-y: -60px;
  --air-rotation: -17deg; --final-rotation: 15deg; --bounce-rotation: 10deg;
}

.ice-cube--15 {
  --left: 69%; --bottom: -2px; --size: 13.1vw; --layer: 8;
  --sprite-x: 66.667%; --sprite-y: 50%; --delay: 250ms; --duration: 1.82s;
  --launch-x: -17px; --launch-rotation: -55deg; --drift-x: 8px; --apex-y: -63px;
  --air-rotation: 23deg; --final-rotation: -14deg; --bounce-rotation: -9deg;
}

.ice-cube--16 {
  --left: 82%; --bottom: -6px; --size: 14vw; --layer: 7;
  --sprite-x: 100%; --sprite-y: 0%; --delay: 520ms; --duration: 1.62s;
  --launch-x: 20px; --launch-rotation: 64deg; --drift-x: -8px; --apex-y: -54px;
  --air-rotation: -21deg; --final-rotation: 9deg; --bounce-rotation: 5deg;
}

.ice-cube--17 {
  --left: 16%; --bottom: 7px; --size: 10.2vw; --layer: 10;
  --sprite-x: 0%; --sprite-y: 50%; --delay: 130ms; --duration: 1.78s;
  --launch-x: -14px; --launch-rotation: -49deg; --drift-x: 7px; --apex-y: -56px;
  --air-rotation: 18deg; --final-rotation: -6deg; --bounce-rotation: -2deg;
}

.ice-cube--18 {
  --left: 37%; --bottom: 9px; --size: 10.8vw; --layer: 10;
  --sprite-x: 33.333%; --sprite-y: 0%; --delay: 330ms; --duration: 1.7s;
  --launch-x: 16px; --launch-rotation: 52deg; --drift-x: -8px; --apex-y: -62px;
  --air-rotation: -19deg; --final-rotation: 10deg; --bounce-rotation: 6deg;
}

.ice-cube--19 {
  --left: 58%; --bottom: 8px; --size: 10.4vw; --layer: 10;
  --sprite-x: 66.667%; --sprite-y: 100%; --delay: 210ms; --duration: 1.84s;
  --launch-x: -18px; --launch-rotation: -57deg; --drift-x: 8px; --apex-y: -64px;
  --air-rotation: 21deg; --final-rotation: -12deg; --bounce-rotation: -7deg;
}

.ice-cube--20 {
  --left: 77%; --bottom: 6px; --size: 10vw; --layer: 10;
  --sprite-x: 100%; --sprite-y: 50%; --delay: 560ms; --duration: 1.58s;
  --launch-x: 15px; --launch-rotation: 48deg; --drift-x: -7px; --apex-y: -50px;
  --air-rotation: -16deg; --final-rotation: 7deg; --bounce-rotation: 3deg;
}

/* Lower filler layer: closes visible gaps without changing the pile's top edge. */
.ice-cube--21 {
  --left: -9%; --bottom: -42px; --size: 14vw; --layer: 11;
  --sprite-x: 33.333%; --sprite-y: 0%; --delay: 420ms; --duration: 1.66s;
  --launch-x: -14px; --launch-rotation: -54deg; --drift-x: 6px; --apex-y: -44px;
  --air-rotation: 17deg; --final-rotation: -11deg; --bounce-rotation: -6deg;
}

.ice-cube--22 {
  --left: 2%; --bottom: -50px; --size: 15.2vw; --layer: 12;
  --sprite-x: 100%; --sprite-y: 100%; --delay: 570ms; --duration: 1.58s;
  --launch-x: 17px; --launch-rotation: 48deg; --drift-x: -7px; --apex-y: -40px;
  --air-rotation: -14deg; --final-rotation: 8deg; --bounce-rotation: 4deg;
}

.ice-cube--23 {
  --left: 14%; --bottom: -46px; --size: 13.8vw; --layer: 11;
  --sprite-x: 66.667%; --sprite-y: 50%; --delay: 230ms; --duration: 1.74s;
  --launch-x: -16px; --launch-rotation: -59deg; --drift-x: 8px; --apex-y: -52px;
  --air-rotation: 20deg; --final-rotation: -7deg; --bounce-rotation: -3deg;
}

.ice-cube--24 {
  --left: 34%; --bottom: -53px; --size: 15.4vw; --layer: 12;
  --sprite-x: 0%; --sprite-y: 100%; --delay: 490ms; --duration: 1.62s;
  --launch-x: 18px; --launch-rotation: 56deg; --drift-x: -9px; --apex-y: -48px;
  --air-rotation: -18deg; --final-rotation: 12deg; --bounce-rotation: 7deg;
}

.ice-cube--25 {
  --left: 46%; --bottom: -47px; --size: 14.6vw; --layer: 11;
  --sprite-x: 33.333%; --sprite-y: 50%; --delay: 160ms; --duration: 1.8s;
  --launch-x: -19px; --launch-rotation: -63deg; --drift-x: 9px; --apex-y: -55px;
  --air-rotation: 22deg; --final-rotation: -10deg; --bounce-rotation: -5deg;
}

.ice-cube--26 {
  --left: 56%; --bottom: -55px; --size: 13.6vw; --layer: 12;
  --sprite-x: 66.667%; --sprite-y: 100%; --delay: 620ms; --duration: 1.54s;
  --launch-x: 15px; --launch-rotation: 51deg; --drift-x: -6px; --apex-y: -42px;
  --air-rotation: -16deg; --final-rotation: 6deg; --bounce-rotation: 2deg;
}

/* Front edge pieces make the button read as resting inside the ice. */
.ice-cube--27 {
  --left: -3%; --bottom: -20px; --size: 12.8vw; --layer: 13;
  --sprite-x: 0%; --sprite-y: 50%; --delay: 300ms; --duration: 1.7s;
  --launch-x: -17px; --launch-rotation: -57deg; --drift-x: 7px; --apex-y: -48px;
  --air-rotation: 18deg; --final-rotation: -9deg; --bounce-rotation: -4deg;
}

.ice-cube--28 {
  --left: 8%; --bottom: -34px; --size: 11.8vw; --layer: 14;
  --sprite-x: 100%; --sprite-y: 0%; --delay: 540ms; --duration: 1.6s;
  --launch-x: 16px; --launch-rotation: 52deg; --drift-x: -7px; --apex-y: -43px;
  --air-rotation: -15deg; --final-rotation: 7deg; --bounce-rotation: 3deg;
}

.ice-cube--29 {
  --left: 27%; --bottom: -36px; --size: 12.4vw; --layer: 13;
  --sprite-x: 33.333%; --sprite-y: 100%; --delay: 190ms; --duration: 1.78s;
  --launch-x: -18px; --launch-rotation: -61deg; --drift-x: 8px; --apex-y: -51px;
  --air-rotation: 21deg; --final-rotation: -12deg; --bounce-rotation: -7deg;
}

.ice-cube--30 {
  --left: 41%; --bottom: -25px; --size: 12.8vw; --layer: 14;
  --sprite-x: 66.667%; --sprite-y: 0%; --delay: 470ms; --duration: 1.64s;
  --launch-x: 18px; --launch-rotation: 58deg; --drift-x: -8px; --apex-y: -47px;
  --air-rotation: -17deg; --final-rotation: 11deg; --bounce-rotation: 6deg;
}

.ice-cube--31 {
  --left: 60%; --bottom: -35px; --size: 12.2vw; --layer: 13;
  --sprite-x: 0%; --sprite-y: 100%; --delay: 250ms; --duration: 1.74s;
  --launch-x: -16px; --launch-rotation: -55deg; --drift-x: 7px; --apex-y: -49px;
  --air-rotation: 19deg; --final-rotation: -8deg; --bounce-rotation: -3deg;
}

.ice-cube--32 {
  --left: 78%; --bottom: -29px; --size: 12.6vw; --layer: 14;
  --sprite-x: 100%; --sprite-y: 50%; --delay: 590ms; --duration: 1.58s;
  --launch-x: 15px; --launch-rotation: 49deg; --drift-x: -6px; --apex-y: -42px;
  --air-rotation: -14deg; --final-rotation: 9deg; --bounce-rotation: 4deg;
}

/* Extra left-front pieces fill the rounded lower corner of the button. */
.ice-cube--33 {
  --left: -8%; --bottom: -10px; --size: 11.2vw; --layer: 15;
  --sprite-x: 66.667%; --sprite-y: 50%; --delay: 360ms; --duration: 1.68s;
  --launch-x: -15px; --launch-rotation: -58deg; --drift-x: 7px; --apex-y: -46px;
  --air-rotation: 19deg; --final-rotation: -13deg; --bounce-rotation: -8deg;
}

.ice-cube--34 {
  --left: 5%; --bottom: -17px; --size: 10.8vw; --layer: 15;
  --sprite-x: 33.333%; --sprite-y: 0%; --delay: 520ms; --duration: 1.6s;
  --launch-x: 16px; --launch-rotation: 53deg; --drift-x: -7px; --apex-y: -42px;
  --air-rotation: -16deg; --final-rotation: 10deg; --bounce-rotation: 5deg;
}

.advantages {
  order: 3;
  width: 100%;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  transform: translateX(4px);
}

.advantages li {
  position: relative;
  min-width: 0;
  padding: 0 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(12px, 3vw, 16px);
  line-height: 1.25;
}

.advantages li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  width: 1px;
  height: 66%;
  background: linear-gradient(transparent, rgba(231, 205, 155, 0.55), transparent);
}

.advantages svg {
  width: clamp(38px, 9vw, 52px);
  color: #a78345;
  stroke-width: 1.65;
  overflow: visible;
  animation: icon-aura 4.2s ease-in-out var(--icon-delay, 0s) infinite;
}

.advantages .icon-trace {
  color: #ffd77f;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-dasharray: 0.18 0.82;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 3px rgba(255, 206, 105, 0.95)) drop-shadow(0 0 8px rgba(207, 143, 37, 0.7));
  animation: icon-contour-run 3.4s linear var(--icon-delay, 0s) infinite;
}

@keyframes icon-contour-run {
  to { stroke-dashoffset: -1; }
}

@keyframes icon-aura {
  0%, 52%, 100% {
    color: #9a783e;
    filter: drop-shadow(0 0 0 rgba(214, 157, 57, 0));
  }
  66% {
    color: #d9ad57;
    filter: drop-shadow(0 0 5px rgba(224, 170, 68, 0.66));
  }
}

@keyframes icon-aura-android {
  0%, 52%, 100% { color: #9a783e; opacity: 0.84; }
  66% { color: #e0b65d; opacity: 1; }
}

@keyframes catalog-preview-pulse {
  0%, 100% { transform: scale(1); }
  48% { transform: scale(0.975); box-shadow: 0 0 44px rgba(242, 193, 90, 0.5), inset 0 1px rgba(255, 255, 255, 0.72); }
}

@keyframes ice-pile-rise {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 60px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes hero-letter-rise {
  0% {
    opacity: 0;
    transform: translateY(22px) rotateX(-42deg) scaleY(0.88);
    filter: blur(5px);
  }
  62% {
    opacity: 1;
    transform: translateY(-2px) rotateX(4deg) scaleY(1.015);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0) scaleY(1);
    filter: blur(0);
  }
}

@keyframes hero-letter-rise-android {
  0% { opacity: 0; transform: translateY(18px) rotateX(-24deg) scaleY(0.92); }
  68% { opacity: 1; transform: translateY(-1px) rotateX(2deg) scaleY(1.01); }
  100% { opacity: 1; transform: translateY(0) rotateX(0) scaleY(1); }
}

@keyframes title-sheen {
  0%, 62% { background-position: 100% 50%; }
  78%, 100% { background-position: 0% 50%; }
}

@keyframes distribution-badge-reveal {
  0% { opacity: 0; transform: scaleX(0.58) scaleY(0.84); filter: blur(4px) drop-shadow(0 5px 9px rgba(0, 0, 0, 0)); }
  66% { opacity: 1; transform: scaleX(1.025) scaleY(1); filter: blur(0) drop-shadow(0 7px 12px rgba(0, 0, 0, 0.88)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.42)); }
  100% { opacity: 1; transform: scaleX(1) scaleY(1); filter: blur(0) drop-shadow(0 7px 12px rgba(0, 0, 0, 0.88)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.42)); }
}

@keyframes distribution-badge-reveal-android {
  0% { opacity: 0; transform: scaleX(0.58) scaleY(0.84); }
  66% { opacity: 1; transform: scaleX(1.025) scaleY(1); }
  100% { opacity: 1; transform: scaleX(1) scaleY(1); }
}

@keyframes distribution-contour-breathe {
  0%, 18%, 100% { opacity: 0.08; }
  42% { opacity: 0.72; }
  62% { opacity: 0.28; }
  78% { opacity: 0.58; }
}

@keyframes beer-drop-settle {
  0%, 12% { opacity: 0; transform: translateY(-6px) scale(0.5); }
  24%, 72% { opacity: 0.96; transform: translateY(0) scale(1); }
  78% { opacity: 1; transform: translateY(2px) scaleX(0.94) scaleY(1.08); }
  86%, 100% { opacity: 0; transform: translateY(8px) scale(0.72); }
}

@keyframes beer-drop-drip {
  0%, 15% { opacity: 0; transform: translateY(-5px) scale(0.55); }
  26%, 64% { opacity: 1; transform: translateY(0) scale(1); }
  76% { opacity: 1; transform: translateY(8px) scaleX(0.82) scaleY(1.25); }
  88%, 100% { opacity: 0; transform: translateY(19px) scale(0.58); }
}

/* Telegram Android WebView: preserve motion while avoiding expensive full-layer filters. */
.platform-android .welcome__grain {
  display: none;
}

.platform-android .hero-copy h1 {
  filter: none;
  text-shadow: 0 6px 14px rgba(0, 0, 0, 0.55);
}

.platform-android .hero-word--light .letter,
.platform-android .hero-word--gold .letter {
  animation: hero-letter-rise-android 760ms cubic-bezier(0.16, 0.8, 0.24, 1)
    calc(120ms + var(--letter-index) * 34ms) forwards;
}

.platform-android .hero-word--gold::before {
  filter: none;
  animation-name: distribution-badge-reveal-android;
}

.platform-android .beer-drop {
  box-shadow:
    inset -1px -2px 2px rgba(86, 38, 2, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.5);
}

.platform-android .advantages svg {
  animation-name: icon-aura-android;
}

.platform-android .advantages .icon-trace {
  filter: none;
  stroke-width: 2.2;
  animation-duration: 4.2s;
}

@media (max-height: 760px) {
  .welcome__content {
    padding-top: calc(18px + var(--safe-top));
    gap: 14px;
  }

  .brand-mark {
    width: 135px;
  }

  .hero-copy h1 {
    font-size: clamp(50px, 8.2vh, 60px);
  }

  .hero-copy__rule {
    margin: 12px auto 10px;
  }

  .catalog-button {
    min-height: 62px;
  }

  .catalog-cta {
    padding-bottom: 40px;
  }

  .ice-pile {
    height: 112px;
  }
}

@media (max-height: 640px) {
  .welcome__content {
    padding-top: calc(10px + var(--safe-top));
    padding-bottom: 2px;
    gap: 8px;
  }

  .brand-mark {
    width: 102px;
  }

  .hero-copy h1 {
    font-size: clamp(42px, 8vh, 48px);
  }

  .hero-copy__rule {
    margin: 7px auto 6px;
  }

  .hero-copy p {
    font-size: 16px;
    line-height: 1.25;
  }

  .catalog-cta {
    padding-bottom: 32px;
  }

  .ice-pile {
    width: 112%;
    height: 108px;
    bottom: -35px;
    transform: translate3d(-50%, 60px, 0);
  }

  .advantages li {
    gap: 4px;
    font-size: 10px;
  }

  .advantages svg {
    width: 34px;
  }
}

@media (max-width: 410px) {
  .welcome__content {
    padding-inline: 14px;
  }

  .hero-copy h1 {
    font-size: clamp(46px, 14.5vw, 58px);
  }

  .catalog-cta {
    width: 96%;
  }

  .catalog-button {
    width: 100%;
    min-height: 64px;
    grid-template-columns: 34px 1fr 24px;
    gap: 8px;
    padding-inline: 20px;
  }

  .catalog-button__icon {
    width: 34px;
  }

  .catalog-button span {
    font-size: 18px;
  }

  .advantages li {
    padding-inline: 5px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-word .letter,
  .hero-word--light .letter,
  .hero-word--gold .letter {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }

  .beer-drops {
    display: none;
  }

  .hero-word--gold::before {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }

  .hero-word--gold::after {
    opacity: 0.34;
    animation: none;
  }

  .advantages svg {
    animation: none;
  }

  .advantages .icon-trace {
    display: none;
  }

  .ice-cube,
  .ice-pile.is-ready .ice-cube {
    opacity: 0.98;
    transform: translate3d(0, 0, 0) rotate(var(--final-rotation)) scale(1);
    animation: none;
    will-change: auto;
  }

  .ice-pile,
  .ice-pile.is-ready {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
    animation: none;
    will-change: auto;
  }
}

/* The client explicitly keeps a lightweight motion profile inside Telegram Android. */
@media (prefers-reduced-motion: reduce) {
  .platform-android .hero-word .letter,
  .platform-android .hero-word--light .letter,
  .platform-android .hero-word--gold .letter {
    opacity: 0;
    animation: hero-letter-rise-android 760ms cubic-bezier(0.16, 0.8, 0.24, 1)
      calc(120ms + var(--letter-index) * 34ms) forwards;
  }

  .platform-android .beer-drops {
    display: block;
  }

  .platform-android .hero-word--gold::before {
    opacity: 0;
    animation: distribution-badge-reveal-android 720ms cubic-bezier(0.18, 0.8, 0.22, 1) 620ms both;
  }

  .platform-android .advantages svg {
    animation: icon-aura-android 4.2s ease-in-out var(--icon-delay, 0s) infinite;
  }

  .platform-android .advantages .icon-trace {
    display: inline;
    animation: icon-contour-run 4.2s linear var(--icon-delay, 0s) infinite;
  }
}

/* After the intro, keep only drops, badge glow and icon aura moving. */
.intro-complete .hero-word .letter,
.intro-complete .hero-word--light .letter,
.intro-complete .hero-word--gold .letter {
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
  will-change: auto;
}

.intro-complete .hero-word--light .letter {
  background-position: 50% 50%;
}

.intro-complete .advantages .icon-trace {
  display: none;
  animation: none;
}

/* Native-app gesture behavior inside Telegram WebView. */
html,
body {
  overscroll-behavior: none;
  touch-action: pan-y;
  -webkit-text-size-adjust: 100%;
}

.welcome,
.shop-app {
  touch-action: pan-y;
  overscroll-behavior-y: none;
}