/* ===== HOW-TO PAGE — SECTION H1: QUICK START ===== */
.nowrap { white-space: nowrap; }
/* Layout: copy first (mobile), media second; 2 cols on larger screens */
.how-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  grid-template-areas: "copy media";
  gap: clamp(20px, 3.5vw, 32px);
  align-items: start;               /* было center — из-за этого «ехало» */
  grid-auto-rows: minmax(min-content, max-content);
}
.how-copy{ grid-area: copy; min-width: 0; align-self: start; }   /* защита от переполнений */
.how-media{ grid-area: media; min-width: 0; align-self: start;   /* топовое выравнивание */
  margin: 0; text-align: center; position: relative; overflow: hidden;
}

@media (max-width: 767px){
  .how-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "media";
    align-items: start;             /* тоже явно сверху на мобиле */
  }
}

/* Чуть уплотним вертикальные отступы заголовка/интро,
   чтобы медиа не «залипала» визуально на карточки */
.how-title{ margin: 4px 0 8px; font-size: clamp(28px, 4vw, 44px); color: #7b3200; }
.how-intro{ margin: 0 0 10px; color: #3a2b14; max-width: 62ch; }

/* Ступени не должны «лезть» за колонку */
.steps{ width: 100%; margin: 8px 0 12px; padding: 0; display: grid; gap: 10px; }
.step{ max-width: 100%; }

.how-hero.is-visible .step{ transform: translateY(0); opacity: 1; }
.step:hover, .step:focus-within{ border-color: rgba(255,166,0,.45); box-shadow: 0 10px 22px rgba(255,166,0,.22); }

.ico{ margin: 0; width: 54px; }
.step-title{ margin: 0 0 2px; color: #8a3700; font-size: clamp(18px,2.2vw,22px); }
.step-text{ margin: 0; color: #3a2b14; }

/* ------- Unique animations ------- */

/* 1) tap-wave: мягкие волны вокруг иконки шага 1 */
.s1 .ico{ position: relative; }
.s1 .ico::before,
.s1 .ico::after{
  content:""; position:absolute; inset: -6px; border-radius: 12px;
  border: 2px solid rgba(255,178,0,.45);
  opacity: 0; transform: scale(.85);
}
.how-hero.is-visible .s1 .ico::before{ animation: tapWave 1.2s ease-out .12s 1 both; }
.how-hero.is-visible .s1 .ico::after { animation: tapWave 1.2s ease-out .28s 1 both; }
@keyframes tapWave{
  0%   { opacity: 0; transform: scale(.85); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.25); }
}

/* 2) rail-fill: прогресс-рейл под шагами */
.how-rail{
  position: relative; height: 8px; border-radius: 999px; background: #ffe8b5;
  margin: 6px 0 12px; overflow: hidden;
}
.how-rail .fill{
  position: absolute; inset: 0; transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, #FFB200, #FF8C00);
}
.how-rail .dot{
  position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid #FF8C00; transform: translateY(-50%);
}
.how-rail .d1{ left: 6%; } .how-rail .d2{ left: 48%; } .how-rail .d3{ left: 92%; }

@keyframes railFill { to { transform: scaleX(1); } }
@keyframes railPing {
  0% { box-shadow: 0 0 0 0 rgba(255,140,0,.45); }
  100%{ box-shadow: 0 0 0 14px rgba(255,140,0,0); }
}
.how-hero.is-visible .how-rail .fill{ animation: railFill .9s cubic-bezier(.22,.95,.5,1) .10s forwards; }
.how-hero.is-visible .how-rail .d1{ animation: railPing 1s ease-out .18s 1 both; }
.how-hero.is-visible .how-rail .d2{ animation: railPing 1s ease-out .36s 1 both; }
.how-hero.is-visible .how-rail .d3{ animation: railPing 1s ease-out .54s 1 both; }

/* 3) path-hint: пунктирная линия поверх иллюстрации */
.how-media{ contain: paint; } /* изоляция — без переполнений */
.board{ border-radius: 12px; }
.path-hint{
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.path-hint::before{
  content:"";
  position: absolute; left: 16%; right: 16%; top: 52%;
  height: 2px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(255,140,0,.8) 0 10px, rgba(255,140,0,0) 10px 20px);
  transform: translateX(-18%);
  opacity: 0;
}
@keyframes hintSlide{
  0% { transform: translateX(-18%); opacity: 0; }
  20%{ opacity: .85; }
  100%{ transform: translateX(18%); opacity: 0; }
}
.how-hero.is-visible .path-hint::before{ animation: hintSlide 1.1s ease-out .18s 1 both; }

/* CTAs */
.how-ctas{ display: flex; gap: 12px; flex-wrap: wrap; }

/* Motion prefs */
@media (prefers-reduced-motion: reduce){
  .step{ transform: none !important; opacity: 1 !important; }
  .s1 .ico::before, .s1 .ico::after, .how-rail .fill, .how-rail .dot, .path-hint::before{
    animation: none !important; transform: none !important; opacity: 1 !important; box-shadow: none !important;
  }
}
/* ===== H2: TIMING TIPS ===== */
.timing-inner{ display:grid; gap: clamp(20px,3.5vw,28px); }
.timing-title{ margin:0; color:#7b3200; font-size:clamp(24px,3.2vw,36px); }
.timing-intro{ color:#3a2b14; max-width:65ch; }

.timing-grid{
  display:grid; grid-template-columns: repeat(3,1fr);
  gap: clamp(16px,2.8vw,28px);
}
@media (max-width:991px){ .timing-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:575px){ .timing-grid{ grid-template-columns: 1fr; } }

.tip-card{
  position:relative; overflow:hidden; contain: paint;
  background:#fffaf0; border:1px solid rgba(0,0,0,.06); border-radius:16px;
  padding: clamp(14px,2.4vw,18px);
  transform: translateY(12px); opacity:0;
  transition: transform .5s cubic-bezier(.22,.95,.5,1), opacity .5s ease,
             border-color .2s ease, box-shadow .25s ease;
}
.timing.is-visible .tip-card{ transform: translateY(0); opacity:1; }
.tip-card:hover, .tip-card:focus-within{
  border-color: rgba(255,166,0,.45); box-shadow: 0 12px 28px rgba(255,166,0,.25);
}
.tip-fig{ margin:0 0 10px; text-align:center; position:relative; }
.tip-cap{ font-size:12px; color:#6b4a27; margin-top:6px; text-align:center; }
.tip-sub{ margin:2px 0 8px; color:#8a3700; font-size:clamp(18px,2.2vw,22px); }
.tip-text{ margin:0; color:#3a2b14; }

/* Unique: metronome bars */
.metronome::before, .metronome::after{
  content:""; position:absolute; width:2px; top:6px; bottom:22px; background:#FFB200;
  opacity:.0; transform: translateX(-8px);
}
.metronome::before{ left:22%; }
.metronome::after { right:22%; }
.timing.is-visible .tip-card .metronome::before{ animation: tick .9s ease-out .12s both; }
.timing.is-visible .tip-card .metronome::after { animation: tick .9s ease-out .32s both; }
@keyframes tick{ 0%{opacity:0; transform:translateX(-8px);} 30%{opacity:.9; transform:translateX(0);} 100%{opacity:0; transform:translateX(8px);} }

/* Unique: gap markers */
.gap-marks::before, .gap-marks::after{
  content:""; position:absolute; top:18%; bottom:40%; width:3px; border-radius:2px;
  background:#FF8C00; opacity:0; transform: scaleY(.6);
}
.gap-marks::before{ left:30%; } .gap-marks::after{ right:30%; }
.timing.is-visible .gap-marks::before{ animation: gapGrow .6s ease .18s both; }
.timing.is-visible .gap-marks::after { animation: gapGrow .6s ease .34s both; }
@keyframes gapGrow{ 0%{opacity:0; transform:scaleY(.6);} 60%{opacity:1;} 100%{opacity:.0; transform:scaleY(1);} }

/* Decorative timing rail */
.timing-rail{ position:relative; height:8px; border-radius:999px; background:#ffe8b5; overflow:hidden; }
.timing-rail .tick{ position:absolute; top:0; bottom:0; width:2px; background:#FFB200; opacity:0; }
.timing-rail .t1{ left:10%; } .t2{ left:30%; } .t3{ left:50%; } .t4{ left:70%; } .t5{ left:90%; }
.timing.is-visible .timing-rail .tick{ animation: railTick .8s ease-out var(--d, .1s) both; }
.timing.is-visible .timing-rail .t1{ --d:.10s; } .t2{ --d:.22s; } .t3{ --d:.34s; } .t4{ --d:.46s; } .t5{ --d:.58s; }
@keyframes railTick{ 0%{opacity:0; transform:scaleY(.4);} 50%{opacity:1;} 100%{opacity:0; transform:scaleY(1);} }

/* ===== H3: ROADSIDE CHALLENGES ===== */
.challenges-inner{ display:grid; gap: clamp(20px,3.5vw,28px); }
.ch-title{ margin:0; color:#7b3200; font-size:clamp(24px,3.2vw,36px); }
.ch-intro{ color:#3a2b14; max-width:65ch; }

.ch-grid{
  display:grid; grid-template-columns: repeat(3,1fr);
  gap: clamp(16px,2.8vw,28px);
}
@media (max-width:991px){ .ch-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:575px){ .ch-grid{ grid-template-columns: 1fr; } }

.hazard-card{
  position:relative; overflow:hidden; contain: paint;
  background:#fffaf0; border:1px solid rgba(0,0,0,.06); border-radius:16px;
  padding: clamp(14px,2.4vw,18px);
  transform: translateY(14px) rotate(-.6deg); opacity:0;
  transition: transform .55s cubic-bezier(.22,.95,.5,1), opacity .55s ease,
             border-color .2s ease, box-shadow .25s ease;
}
.challenges.is-visible .hazard-card{ transform: translateY(0) rotate(0); opacity:1; }
.hazard-card:hover, .hazard-card:focus-within{
  border-color: rgba(255,166,0,.45); box-shadow: 0 12px 28px rgba(255,166,0,.25);
}
.haz-fig{ margin:0 0 10px; text-align:center; position:relative; overflow:hidden; border-radius:12px; }
.haz-cap{ font-size:12px; color:#6b4a27; margin-top:6px; text-align:center; }
.haz-sub{ margin:2px 0 8px; color:#8a3700; font-size:clamp(18px,2.2vw,22px); }
.haz-text{ margin:0; color:#3a2b14; }

/* Unique: lane-drift parallax inside figure (CSS only) */
.lane-drift::before{
  content:""; position:absolute; inset:-20% 0 auto 0; height:40%;
  background: linear-gradient(90deg, rgba(255,140,0,.0), rgba(255,140,0,.12), rgba(255,140,0,.0));
  transform: translateX(-18%); opacity:0; pointer-events:none;
}
.challenges.is-visible .lane-drift::before{ animation: drift 1.1s ease-out .18s both; }
@keyframes drift{ 0%{transform:translateX(-18%); opacity:0;} 25%{opacity:.5;} 100%{transform:translateX(18%); opacity:0;} }

/* Unique: caution stripes bar */
.caution-bar{
  height: 10px; border-radius: 999px; overflow:hidden;
  background: repeating-linear-gradient(135deg, #FFB200 0 14px, #FF8C00 14px 28px, #FFE0A0 28px 42px);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,1) 18%, rgba(0,0,0,1) 82%, rgba(0,0,0,0));
  opacity:0; transform: translateY(6px);
}
.challenges.is-visible .caution-bar{ animation: barIn .6s ease-out .12s both; }
@keyframes barIn{ to { opacity:1; transform: translateY(0); } }

/* ===== H4: PERKS ===== */
.perks-inner{ display:grid; gap: clamp(20px,3.5vw,28px); }
.perks-title{ margin:0; color:#7b3200; font-size:clamp(24px,3.2vw,36px); }
.perks-intro{ color:#3a2b14; max-width:65ch; }

.perks-grid{
  display:grid; grid-template-columns: repeat(3,1fr);
  gap: clamp(16px,2.8vw,28px);
}
@media (max-width:991px){ .perks-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:575px){ .perks-grid{ grid-template-columns: 1fr; } }

.perk-card{
  position:relative; overflow:hidden; contain: paint;
  background:#fffaf0; border:1px solid rgba(0,0,0,.06); border-radius:16px;
  padding: clamp(14px,2.4vw,18px);
  transform: perspective(900px) rotateX(6deg) translateY(12px);
  opacity:0;
  transition: transform .55s cubic-bezier(.22,.95,.5,1), opacity .55s ease,
             border-color .2s ease, box-shadow .25s ease;
}
.perks.is-visible .perk-card{ transform: perspective(900px) rotateX(0) translateY(0); opacity:1; }
.perk-card:hover, .perk-card:focus-within{
  border-color: rgba(255,166,0,.45); box-shadow: 0 12px 28px rgba(255,166,0,.25);
}
.perk-fig{ margin:0 0 10px; text-align:center; position:relative; }
.perk-cap{ font-size:12px; color:#6b4a27; margin-top:6px; text-align:center; }
.perk-sub{ margin:2px 0 8px; color:#8a3700; font-size:clamp(18px,2.2vw,22px); }
.perk-text{ margin:0; color:#3a2b14; }

/* Unique: glow-bloom on perk icon */
.glow::before{
  content:""; position:absolute; left:50%; top:38%;
  width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,178,0,.55), rgba(255,140,0,0));
  transform: translate(-50%,-50%) scale(.6); opacity:0; pointer-events:none;
}
.perks.is-visible .perk-card:nth-child(1) .glow::before{ animation: bloom .6s ease-out .18s both; }
.perks.is-visible .perk-card:nth-child(2) .glow::before{ animation: bloom .6s ease-out .30s both; }
.perks.is-visible .perk-card:nth-child(3) .glow::before{ animation: bloom .6s ease-out .42s both; }
@keyframes bloom{
  0%{ opacity:0; transform: translate(-50%,-50%) scale(.6); }
  40%{ opacity:.9; transform: translate(-50%,-50%) scale(1.2); }
  100%{ opacity:0; transform: translate(-50%,-50%) scale(1.8); }
}

/* Motion prefs */
@media (prefers-reduced-motion: reduce){
  .tip-card, .hazard-card, .perk-card{ transform:none !important; opacity:1 !important; }
  .metronome::before, .metronome::after, .gap-marks::before, .gap-marks::after,
  .lane-drift::before, .caution-bar, .glow::before{
    animation:none !important; transform:none !important; opacity:1 !important;
  }
}
/* ===== H5: SCORING & PROGRESS ===== */
.scoring-inner{ display:grid; gap: clamp(20px,3.5vw,28px); }
.sc-title{ margin:0; color:#7b3200; font-size:clamp(24px,3.2vw,36px); }
.sc-intro{ color:#3a2b14; max-width:65ch; }

.sc-grid{
  display:grid; grid-template-columns: repeat(3,1fr);
  gap: clamp(16px,2.8vw,28px);
}
@media (max-width:991px){ .sc-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:575px){ .sc-grid{ grid-template-columns: 1fr; } }

.sc-card{
  position:relative; overflow:hidden; contain: paint;
  background:#fffaf0; border:1px solid rgba(0,0,0,.06); border-radius:16px;
  padding: clamp(14px,2.4vw,18px);
  transform: translateY(14px); opacity:0;
  transition: transform .55s cubic-bezier(.22,.95,.5,1), opacity .55s ease,
              border-color .2s ease, box-shadow .25s ease;
}
.scoring.is-visible .sc-card{ transform: translateY(0); opacity:1; }
.sc-card:hover, .sc-card:focus-within{
  border-color: rgba(255,166,0,.45); box-shadow: 0 12px 28px rgba(255,166,0,.25);
}

.sc-fig{ margin:0 0 10px; text-align:center; position:relative; }
.sc-cap{ font-size:12px; color:#6b4a27; margin-top:6px; text-align:center; }
.sc-label{ margin:0 0 4px; color:#6b3c16; font-weight:700; }
.sc-value{ margin:0 0 8px; font-size: clamp(28px,4vw,40px); color:#8a3700; }
.sc-rail{ height:8px; border-radius:999px; background:#ffe8b5; overflow:hidden; }
.sc-rail .fill{ display:block; height:100%; transform: scaleX(0); transform-origin:left center;
  background: linear-gradient(90deg, #FFB200, #FF8C00); }
@keyframes barGrow{ to { transform: scaleX(1); } }
.scoring.is-visible .f1{ animation: barGrow .7s cubic-bezier(.22,.95,.5,1) .18s forwards; }
.scoring.is-visible .f2{ animation: barGrow .7s cubic-bezier(.22,.95,.5,1) .28s forwards; }
.scoring.is-visible .f3{ animation: barGrow .7s cubic-bezier(.22,.95,.5,1) .38s forwards; }

/* medalShine — мягкое сияние за иконкой */
.medal::before{
  content:""; position:absolute; left:50%; top:42%;
  width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,178,0,.55), rgba(255,140,0,0));
  transform: translate(-50%,-50%) scale(.6); opacity:0; pointer-events:none;
}
.scoring.is-visible .sc-card:nth-child(1) .medal::before{ animation: medalShine .6s ease-out .18s both; }
.scoring.is-visible .sc-card:nth-child(2) .medal::before{ animation: medalShine .6s ease-out .28s both; }
.scoring.is-visible .sc-card:nth-child(3) .medal::before{ animation: medalShine .6s ease-out .38s both; }
@keyframes medalShine{
  0%{ opacity:0; transform: translate(-50%,-50%) scale(.6); }
  40%{ opacity:.9; transform: translate(-50%,-50%) scale(1.2); }
  100%{ opacity:0; transform: translate(-50%,-50%) scale(1.8); }
}

/* ===== H6: PRACTICE MODE ===== */
.practice-inner{ display:grid; gap: clamp(20px,3.5vw,28px); }
.pr-title{ margin:0; color:#7b3200; font-size:clamp(24px,3.2vw,36px); }
.pr-intro{ color:#3a2b14; max-width:65ch; }

.pr-grid{
  display:grid; grid-template-columns: repeat(3,1fr);
  gap: clamp(16px,2.8vw,28px);
}
@media (max-width:991px){ .pr-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:575px){ .pr-grid{ grid-template-columns: 1fr; } }

.pr-card{
  position:relative; overflow:hidden; contain: paint;
  background:#fffaf0; border:1px solid rgba(0,0,0,.06); border-radius:16px;
  padding: clamp(14px,2.4vw,18px);
  transform: translateY(12px); opacity:0;
  transition: transform .55s cubic-bezier(.22,.95,.5,1), opacity .55s ease,
              border-color .2s ease, box-shadow .25s ease;
}
.practice.is-visible .pr-card{ transform: translateY(0); opacity:1; }
.pr-card:hover, .pr-card:focus-within{
  border-color: rgba(255,166,0,.45); box-shadow: 0 12px 28px rgba(255,166,0,.25);
}
.pr-fig{ margin:0 0 10px; text-align:center; position:relative; }
.pr-cap{ font-size:12px; color:#6b4a27; margin-top:6px; text-align:center; }
.pr-sub{ margin:2px 0 8px; color:#8a3700; font-size:clamp(18px,2.2vw,22px); }
.pr-text{ margin:0; color:#3a2b14; }
.pr-points{ margin: 8px 0 0; padding-left: 18px; color:#3a2b14; }
.pr-points li{ margin: 6px 0; }

/* cardLift (на входе) */
.lift{ transform: translateY(14px) rotate(-.4deg); }
.practice.is-visible .lift{ transform: translateY(0) rotate(0); }

/* toggleSlide — чистый CSS переключатель */
.switch{ display:flex; align-items:center; gap:10px; margin: 6px 0 2px; }
.switch input{ position:absolute; opacity:0; }
.track{
  position: relative; width: 66px; height: 34px; border-radius: 999px;
  background: #FFE6B0; display: inline-block; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px #FFC14D;
}
.knob{
  position: absolute; left: 3px; top: 3px;
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #FFB200, #FF8C00);
  box-shadow: 0 4px 10px rgba(255,157,0,.32);
  transition: transform .25s cubic-bezier(.22,.95,.5,1);
}
.label-on, .label-off{
  position: absolute; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 800; color:#8a4b00;
}
.label-on{ left: 8px; opacity: 0; }
.label-off{ right: 8px; opacity: .9; }

input:checked + .track .knob{ transform: translateX(32px); }
input:checked + .track .label-on{ opacity: .9; }
input:checked + .track .label-off{ opacity: 0; }

/* ===== H7: QUICK FAQ ===== */
.hfaq-inner{ display:grid; gap: clamp(20px,3.5vw,28px); }
.hfaq-title{ margin:0; color:#7b3200; font-size:clamp(24px,3.2vw,36px); }
.hfaq-intro{ color:#3a2b14; max-width:65ch; }

.faq-list{ display:grid; gap: 10px; }
.faq-item{
  background:#fffaf0; border:1px solid rgba(0,0,0,.06); border-radius:12px; padding: 8px 12px;
  overflow: hidden;
  filter: drop-shadow(0 0 0 rgba(0,0,0,0)); /* для стабильности в iOS */
}
.faq-q{
  cursor: pointer; list-style: none; display:flex; align-items:center; gap:8px; position: relative;
  font-weight: 800; color:#8a3700; padding-right: 28px; outline: none;
}
.faq-q::-webkit-details-marker { display:none; }

.caret{
  position:absolute; right: 4px; top: 50%; transform: translateY(-50%) rotate(0);
  width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #A34300;
  transition: transform .25s ease;
}
.faq-item[open] .caret{ transform: translateY(-50%) rotate(180deg); }

/* faqGlow — подсветка под вопросом при появлении секции */
.hfaq.is-visible .faq-item .faq-q{
  animation: faqGlow .6s ease-out .1s 1 both;
}
@keyframes faqGlow{
  0%{ background: linear-gradient(90deg, rgba(255,230,170,0) 0%, rgba(255,230,170,.6) 50%, rgba(255,230,170,0) 100%); }
  100%{ background: transparent; }
}

.faq-a{ color:#3a2b14; padding: 6px 2px 8px; }
/* ===== H8: DOWNLOAD & PLAY ===== */
.dl-inner{ display:grid; gap: clamp(20px,3.5vw,28px); }
.dl-title{ margin:0; color:#7b3200; font-size:clamp(24px,3.2vw,36px); }
.dl-intro{ color:#3a2b14; max-width:65ch; }

/* bandSlide under the heading */
.dl-head{ position: relative; padding-bottom: 8px; }
.dl-band{
  position: absolute; left: 0; right: 0; bottom: 0; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, #FFE2A3, #FFD077);
  transform: scaleX(0); transform-origin: left center;
}
.dl.is-visible .dl-band{ animation: bandSlide .55s cubic-bezier(.22,.95,.5,1) .08s forwards; }
@keyframes bandSlide{ to { transform: scaleX(1); } }

.dl-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(16px,2.8vw,28px);
  align-items: center;
}
@media (max-width: 767px){ .dl-grid{ grid-template-columns: 1fr; } }

.dl-copy{ display: grid; gap: 12px; }
.dl-points{ margin: 0; padding-left: 18px; color:#3a2b14; }
.dl-points li{
  margin: 6px 0; opacity: 0; transform: translateY(6px);
}
.dl.is-visible .dl-points li{ animation: dlRise .32s ease forwards; }
.dl.is-visible .dl-points li:nth-child(1){ animation-delay: .08s; }
.dl.is-visible .dl-points li:nth-child(2){ animation-delay: .16s; }
.dl.is-visible .dl-points li:nth-child(3){ animation-delay: .24s; }
.dl.is-visible .dl-points li:nth-child(4){ animation-delay: .32s; }
@keyframes dlRise{ to { opacity:1; transform: translateY(0); } }

.dl-ctas{ display:flex; gap:14px; flex-wrap: wrap; align-items:center; }
.dl-note{ color:#6b4a27; }

/* ctaShimmer: безопасный свейп внутри кнопки */
.dl-btn{
  position: relative; overflow: hidden; /* не даст свейпу выбежать */
  contain: paint;
}
.dl-btn::after{
  content:""; position:absolute; top:0; bottom:0; left:-30%; width: 30%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0));
  transform: skewX(-18deg) translateX(-120%);
  opacity: 0; pointer-events: none;
}
.dl.is-visible .dl-btn::after{ animation: btnSweep .7s ease-out .25s both; }
@keyframes btnSweep{
  0%   { transform: skewX(-18deg) translateX(-120%); opacity: 0; }
  20%  { opacity: .9; }
  100% { transform: skewX(-18deg) translateX(220%); opacity: 0; }
}

/* Media badge with sparks (contained, no overflow-x) */
.dl-media{ margin:0; text-align:center; position:relative; overflow:hidden; contain: paint; }
.dl-cap{ font-size:12px; color:#6b4a27; margin-top:6px; }
.dl-badge{
  border-radius:12px;
  transform: translateY(8px) scale(.98); opacity:0;
}
.dl.is-visible .dl-badge{
  animation: badgeIn .5s ease-out .1s forwards, bob 6s ease-in-out .7s infinite;
}
@keyframes badgeIn{
  60% { transform: translateY(-2px) scale(1.02); opacity:1; }
  100%{ transform: translateY(0) scale(1); opacity:1; }
}
@keyframes bob{
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-4px) scale(1.005); }
}

/* sparkPop — три точки вспыхивают по очереди */
.dl-sparks{ position:absolute; inset:0; pointer-events:none; }
.sp{
  position:absolute; width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #FFD37A, #FFAF17 60%, #FF8C00);
  opacity:0; transform: scale(.6);
}
.s1{ left: 12%; top: 18%; }
.s2{ left: 52%; top: 8%; }
.s3{ right: 10%; top: 22%; }

.dl.is-visible .s1{ animation: spark .35s ease .18s forwards; }
.dl.is-visible .s2{ animation: spark .35s ease .28s forwards; }
.dl.is-visible .s3{ animation: spark .35s ease .38s forwards; }
@keyframes spark{ to { opacity:.7; transform: scale(1); } }

/* Motion prefs */
@media (prefers-reduced-motion: reduce){
  .dl-band, .dl-points li, .dl-btn::after, .dl-badge, .sp{
    animation: none !important; transform: none !important; opacity: 1 !important; }
}