/* =====================================================================
   ROUND 5 · mobile-first hero, bolder bonuses, "Там", more motion
   ===================================================================== */

/* ------------------------------------------------------------ offer block: timer, then bonuses full width */
.deal__card { grid-template-columns: 1fr; }
.deal__time span { display: inline-block; }
.deal__time span.tick { animation: tick 380ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes tick { from { transform: translateY(-30%); opacity: 0.2; filter: blur(3px); } }

/* ------------------------------------------------------------ 6. bonuses: a burgundy band, three cards */
.bonus { border-radius: var(--r); padding: clamp(22px, 3.4vw, 40px); background: var(--acc); color: #F7F2EC; position: relative; overflow: hidden; isolation: isolate; }
.bonus::after { content: ""; position: absolute; inset: -40% -10% auto auto; width: 70%; aspect-ratio: 1; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgb(255 220 190 / 0.22), transparent 62%); animation: bonusGlow 9s ease-in-out infinite alternate; }
@keyframes bonusGlow { to { transform: translate(-30%, 30%); } }
.bonus .label { color: rgb(247 242 236 / 0.78); }
.bonus__head { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); }
.bonus__plus { font-family: var(--sc-font-mono); font-weight: 500; font-size: clamp(3.6rem, 2rem + 6vw, 7rem); line-height: 0.85; letter-spacing: -0.08em; }
.bonus__h { margin: 8px 0 0; font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.35rem, 1rem + 1.4vw, 2.3rem); line-height: 1.08; letter-spacing: -0.03em; max-width: 22ch; text-wrap: balance; }
.bonus__list { list-style: none; margin: clamp(20px, 3vw, 32px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bonus__card { display: grid; align-content: start; gap: 10px; padding: 20px; border-radius: var(--r); background: #F7F2EC; color: #1C1916;
  box-shadow: 0 18px 30px -22px rgb(30 6 10 / 0.7);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); }
.bonus__card .label { color: var(--acc); }
.bonus__card p { line-height: 1.45; font-weight: 600; }
.bonus__card svg { width: 44px; height: 44px; fill: none; stroke: var(--acc); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bonus__card svg * { stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset 1400ms cubic-bezier(0.22, 1, 0.36, 1); }
@media (hover: hover) and (pointer: fine) { .bonus__card:hover { transform: translateY(-6px) rotate(-0.6deg); } }
/* arrival: cards deal in one after another, the icons draw themselves */
.bonus .bonus__card { opacity: 0; transform: translateY(40px) rotate(3deg) scale(0.96); transition: opacity 700ms, transform 900ms cubic-bezier(0.22, 1, 0.36, 1); }
.bonus .bonus__card:nth-child(2) { transition-delay: 120ms; }
.bonus .bonus__card:nth-child(3) { transition-delay: 240ms; }
.bonus.is-in .bonus__card { opacity: 1; transform: none; }
.bonus.is-in .bonus__card svg * { stroke-dashoffset: 0; transition-delay: 500ms; }

/* ------------------------------------------------------------ 7. "Там" small, the pain itself stands out */
.yt__there { font-family: var(--sc-font-mono); font-weight: 500; font-size: 0.78rem; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; color: #B0525C; }
.yt__list h3 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.14; letter-spacing: -0.03em; }
.yt__pain { color: #F4EFE7; background-image: linear-gradient(#B0525C, #B0525C); background-repeat: no-repeat; background-position: 0 92%; background-size: 0% 0.12em;
  transition: background-size 1100ms cubic-bezier(0.22, 1, 0.36, 1) 350ms; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.yt__item { opacity: 0; transform: translateX(-28px); transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1), transform 800ms cubic-bezier(0.22, 1, 0.36, 1); }
.yt__item:nth-child(2) { transition-delay: 140ms; } .yt__item:nth-child(2) .yt__pain { transition-delay: 490ms; }
.yt__item:nth-child(3) { transition-delay: 280ms; } .yt__item:nth-child(3) .yt__pain { transition-delay: 630ms; }
.yt__item.is-in { opacity: 1; transform: none; }
.yt__item.is-in .yt__pain { background-size: 100% 0.12em; }
.yt__list[data-sc-in], .yt__list[data-sc-stagger] > * { opacity: 1; }

/* ------------------------------------------------------------ pains: the line in the middle of the screen is the one you read */
@media (prefers-reduced-motion: no-preference) {
  .pains__list li { transition: opacity 400ms, transform 500ms cubic-bezier(0.22, 1, 0.36, 1); }
  .pains__list.is-reading li { opacity: 0.38; }
  .pains__list.is-reading li.is-focus { opacity: 1; transform: translateX(6px); }
}

/* ------------------------------------------------------------ a week later: ticks draw */
@media (prefers-reduced-motion: no-preference) {
  .after__list li::before { clip-path: inset(0 100% 0 0); transition: clip-path 600ms cubic-bezier(0.22, 1, 0.36, 1); }
  .after__list li.sc-in::before, .after__list.is-in li::before { clip-path: inset(0 0 0 0); }
  .after__list li:nth-child(2)::before { transition-delay: 90ms; } .after__list li:nth-child(3)::before { transition-delay: 180ms; }
  .after__list li:nth-child(4)::before { transition-delay: 270ms; } .after__list li:nth-child(5)::before { transition-delay: 360ms; }
  .after__list li:nth-child(6)::before { transition-delay: 450ms; }
}

/* ------------------------------------------------------------ 3. phone hero: Julia in the middle */
@media (max-width: 860px) {
  .hero { height: 165svh; }
  .hero__copy { justify-content: flex-start; padding-top: 3svh; }
  .hero__h { font-size: clamp(1.9rem, 8vw, 2.5rem); }
  .hero__sub { margin-top: 12px; font-size: 1rem; }
  .hero__buy { margin-top: 18px; gap: 10px; }
  .hero__today span { display: none; }

  .hero__julia { left: 0; right: 0; margin-inline: auto; bottom: -3svh; height: 47svh; z-index: 3;
    transform: translate3d(0, calc(var(--hp, 0) * -6vh), 0) scale(calc(1 + var(--hp, 0) * 0.08)); transform-origin: 50% 100%; }
  .hero__julia img { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 100%);
    animation: juliaUp 1300ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both; }
  @keyframes juliaUp { from { opacity: 0; transform: translateY(14%) scale(0.94); } to { opacity: 1; transform: none; } }

  /* cards flank her and fan outward as you scroll; they breathe while you read */
  .hero__back { z-index: 2; }
  .hero__cards { z-index: 6; }
  .hcard { --w: 25vw; transform: translate3d(calc(var(--side, 0) * var(--hp, 0) * 34vw), calc(var(--hp, 0) * -10vh), 0) rotate(calc(var(--r0) + var(--side, 0) * var(--hp, 0) * 12deg)); }
  .hcard--a { --side: -1; --r0: -10deg; left: 4vw; right: auto; top: auto; bottom: 30svh; }
  .hcard--b { --side: -1; --r0: -5deg; left: 3vw; right: auto; top: auto; bottom: 3svh; display: block; }
  .hcard--c { --side: 1; --r0: 7deg; right: 3vw; left: auto; top: auto; bottom: 6svh; display: block; }
  .hcard--a > *, .hcard--b > * { animation-name: cardInLeft; }
  .hcard--c > * { animation-name: cardInRight; }
  @keyframes cardInLeft { from { opacity: 0; transform: translateX(-60vw) rotate(-20deg); } to { opacity: 1; transform: none; } }
  @keyframes cardInRight { from { opacity: 0; transform: translateX(60vw) rotate(20deg); } to { opacity: 1; transform: none; } }
  .hcard { animation: cardFloat 5.5s ease-in-out 1.8s infinite alternate; }
  .hcard--c { animation-duration: 6.4s; animation-delay: 2.2s; }
  .hcard--a { animation-duration: 7s; }
  @keyframes cardFloat { from { translate: 0 0; } to { translate: 0 -8px; } }

  .bonus__head { align-items: flex-end; }
  .bonus__list { grid-template-columns: 1fr; }
  .bonus__card { grid-template-columns: 44px 1fr; align-items: start; column-gap: 14px; }
  .bonus__card svg { grid-row: span 2; }
}
@media (max-width: 860px) and (max-height: 720px) {
  .hero__julia { height: 40svh; }
  .hcard { --w: 22vw; }
  .hcard--a { bottom: 26svh; }
}
@media (prefers-reduced-motion: reduce) {
  .bonus .bonus__card, .yt__item { opacity: 1; transform: none; }
  .bonus__card svg * { stroke-dashoffset: 0; }
  .yt__pain { background-size: 100% 0.12em; }
  .hcard { animation: none !important; }
  .bonus::after { animation: none; }
}
/* phone panel: the button keeps its price inside the screen */
@media (max-width: 860px) {
  .stick__inner { gap: 10px; }
  .stick__clock { flex: none; }
  .stick__k { font-size: 0.56rem; max-width: 9ch; line-height: 1.2; }
  .stick__cta { min-width: 0; flex: 1 1 auto; padding: 0 12px; gap: 9px; font-size: 0.92rem; }
  .stick__cta .tag { gap: 6px; padding-left: 9px; }
}
.yt__pain { background-size: 0% 0.08em; background-position: 0 100%; padding-bottom: 0.06em; }
.yt__item.is-in .yt__pain { background-size: 100% 0.08em; }

@media (max-width: 860px) and (max-height: 720px) { .hcard--a { bottom: 16svh; left: 2vw; --w: 19vw; } }