/* Тест-драйв (testdrive.html): первый экран «Подарок с уроками».
   Тёмная сцена в духе плашки .card--td на главной: сетка, лаймовое свечение, крупный 3D-подарок.
   Подарок открывается сам, когда попадает в кадр, и из него веером вылетают 4 карточки уроков.
   Без JS и при prefers-reduced-motion — сразу финальное состояние: подарок открыт, карточки на местах.
   Ширины контейнера и типографика заголовка — общие из main.css (.hero__inner, .hero__title…). */

.hero--td .hero__inner { display: block; }

.tdh {
  --pad-x: 56px;
  --pad-y: 48px;
  --gift-w: 350px;
  --glow-x: 50%;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 500fr) minmax(0, 360fr) minmax(0, 420fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "copy stage cards"
    "copy tag   cards"
    "copy foot  cards";
  column-gap: 24px;
  min-height: 620px;
  padding: var(--pad-y) var(--pad-x);
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(640px 360px at 100% 0, rgba(199, 255, 46, .07), rgba(199, 255, 46, 0) 70%),
    linear-gradient(96deg, #090A0B 0%, #0D100D 58%, #131A0F 100%);
  border: 1px solid rgba(199, 255, 46, .16);
  box-shadow: 0 28px 64px -28px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .04);
}
/* Сетка сцены — как на плашке главной; гаснет к тексту, чтобы не рябила под заголовком */
.tdh::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(158, 166, 173, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(158, 166, 173, .16) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(52% 78% at var(--glow-x) 56%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 82%);
  mask-image: radial-gradient(52% 78% at var(--glow-x) 56%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 82%);
}

/* ---------- Текст ---------- */
.tdh__copy { grid-area: copy; position: relative; z-index: 2; display: flex; flex-direction: column; min-width: 0; }
.hero--td .hero__status { gap: 12px 18px; }
.hero--td .badge--paper { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #fff; }
.hero--td .hero__start { color: rgba(255, 255, 255, .6); }
.hero--td .hero__title { line-height: 1.14; }
.hero--td .hero__text { max-width: 470px; color: var(--muted-2); }
.tdh__offer { margin-top: auto; padding-top: 28px; }
.tdh__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; font-weight: 700; letter-spacing: -.02em; }
.tdh__price s { font: 500 18px/1 var(--mono); letter-spacing: -.02em; color: rgba(255, 255, 255, .46); text-decoration-thickness: 1.5px; text-decoration-color: rgba(255, 255, 255, .6); }
.tdh__price b { font-size: 40px; line-height: 1; font-weight: 700; color: #fff; }
.hero--td .hero__bottom { margin-top: 0; padding-top: 20px; }
.hero--td .avatars img { border-color: #0C0E0D; }
.hero--td .hero__proof-text { color: rgba(255, 255, 255, .86); }

/* ---------- Подарок ---------- */
.tdh__stage { grid-area: stage; position: relative; display: grid; place-items: center; min-width: 0; pointer-events: none; }
.tdh__glow {
  position: absolute;
  left: 50%;
  top: 56%;
  width: calc(var(--gift-w) * 1.9);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(199, 255, 46, .26), rgba(199, 255, 46, .1) 42%, rgba(199, 255, 46, 0) 100%);
  opacity: .9;
  transform: scale(1);
  transition: opacity .8s var(--ease), transform 1.1s var(--ease);
}
.tdh__gift {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, var(--gift-w));
  aspect-ratio: 1086 / 1095;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transform: translate3d(calc(var(--mx, 0) * 10px), calc(var(--my, 0) * 8px - var(--lift, 0px)), 0) scale(var(--gs, 1));
  transition: transform .6s var(--spring);
  filter: drop-shadow(0 28px 34px rgba(0, 0, 0, .55));
}
.tdh__gift-pop { position: absolute; inset: 0; display: block; }
.tdh__gift-img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .22s var(--ease); }
.tdh__gift-img:not(.tdh__gift-img--open) { opacity: 0; }
/* Тень-«пол» под подарком — чтобы он стоял на сцене, а не висел */
.tdh__gift::before { content: ""; position: absolute; z-index: -1; left: 11%; right: 11%; bottom: -3%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); }

.tdh__tag { grid-area: tag; justify-self: center; position: relative; z-index: 2; margin-top: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(12, 14, 13, .72); font: 500 13px/18px var(--mono); color: rgba(255, 255, 255, .72); white-space: nowrap; }
.tdh__foot { grid-area: foot; justify-self: center; position: relative; z-index: 2; max-width: 300px; margin-top: 12px; font-size: 13px; line-height: 18px; text-align: center; color: var(--muted-2); }

/* ---------- Карточки уроков ---------- */
/* Веер вокруг подарка: крайние карточки ближе к нему, средние дальше; наклон смотрит на подарок */
.tdh__cards { grid-area: cards; position: relative; z-index: 3; align-self: center; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tdh__card { --ox: 0px; --r: 0deg; --dp: 1; position: relative; width: calc(100% - 28px); }
.tdh__card:nth-child(1) { --ox: 0px; --r: -2deg; --dp: 1.4; }
.tdh__card:nth-child(2) { --ox: 28px; --r: -.7deg; --dp: .8; }
.tdh__card:nth-child(3) { --ox: 28px; --r: .7deg; --dp: 1.1; }
.tdh__card:nth-child(4) { --ox: 0px; --r: 2deg; --dp: .6; }
.tdh__card {
  opacity: 1;
  transform: translate3d(var(--ox), 0, 0) rotate(var(--r));
  transition:
    transform .95s cubic-bezier(.22, 1.18, .36, 1) calc(var(--i, 0) * 90ms + 140ms),
    opacity .45s var(--ease) calc(var(--i, 0) * 90ms + 140ms);
}
.tdh__card-in {
  display: grid;
  gap: 6px;
  padding: 14px 18px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(32, 35, 40, .96), rgba(20, 22, 25, .96));
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 22px 40px -18px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06);
  transform: translate3d(calc(var(--mx, 0) * var(--dp) * -6px), calc(var(--my, 0) * var(--dp) * -5px), 0);
  transition: transform .6s var(--ease);
}
.tdh__card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tdh__num { display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 7px; border-radius: 8px; border: 1px solid rgba(215, 255, 69, .28); background: rgba(215, 255, 69, .06); font: 500 12px/1 var(--mono); color: var(--lime-2); }
.tdh__dur { font: 500 12px/18px var(--mono); color: rgba(255, 255, 255, .56); white-space: nowrap; }
.tdh__title { display: block; font-size: 16px; line-height: 21px; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.tdh__meta { display: block; font-size: 13px; line-height: 18px; color: var(--muted-2); }

/* ---------- Закрытое состояние: только когда JS есть и анимация разрешена ---------- */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .tdh:not(.is-open) .tdh__gift-img--open { opacity: 0; }
  .tdh:not(.is-open) .tdh__gift-img:not(.tdh__gift-img--open) { opacity: 1; }
  .tdh:not(.is-open) .tdh__glow { opacity: .45; transform: scale(.82); }
  .tdh:not(.is-open) .tdh__card {
    opacity: 0;
    transform: translate3d(var(--fx, -40%), var(--fy, 0px), 0) scale(.22) rotate(calc(var(--r) * -8));
    transition-duration: .32s, .22s;
    transition-delay: calc((3 - var(--i, 0)) * 30ms), calc((3 - var(--i, 0)) * 30ms);
  }
  .tdh.is-open .tdh__gift-pop { animation: tdh-pop .75s cubic-bezier(.3, 1.4, .5, 1); }
  /* Страховка: если скрипт не загрузился, карточки всё равно появляются */
  .tdh:not(.is-js) .tdh__card { animation: tdh-failsafe .6s var(--ease) 2.5s forwards; }
  .tdh:not(.is-js) .tdh__gift-img--open { animation: tdh-failsafe-img .2s 2.5s forwards; }
  .tdh:not(.is-js) .tdh__gift-img:not(.tdh__gift-img--open) { animation: tdh-failsafe-hide .2s 2.5s forwards; }
}
@keyframes tdh-pop {
  0% { transform: scale(1); }
  28% { transform: scale(.95, .93) translateY(3%); }
  62% { transform: scale(1.04) translateY(-2%); }
  100% { transform: scale(1); }
}
@keyframes tdh-failsafe { to { opacity: 1; transform: translate3d(var(--ox), 0, 0) rotate(var(--r)); } }
@keyframes tdh-failsafe-img { to { opacity: 1; } }
@keyframes tdh-failsafe-hide { to { opacity: 0; } }

/* Наведение: подарок приподнимается и светится ярче, открывает по клику ещё раз */
@media (hover: hover) and (pointer: fine) {
  .tdh__gift { cursor: pointer; }
  .tdh__gift:hover { --lift: 10px; --gs: 1.03; }
  .tdh.is-open .tdh__stage:has(.tdh__gift:hover) .tdh__glow { opacity: 1; transform: scale(1.12); }
}

/* ---------- Широкие мониторы: контейнер 1680 / 2080 ---------- */
@media (min-width: 1800px) {
  .tdh { --pad-x: 72px; --pad-y: 56px; --gift-w: 420px; min-height: 0; grid-template-columns: minmax(0, 540fr) minmax(0, 450fr) minmax(0, 470fr); column-gap: 32px; }
  .tdh__card-in { padding: 16px 22px 18px; }
  .tdh__title { font-size: 18px; line-height: 24px; }
  .tdh__meta { font-size: 14px; line-height: 20px; }
  .tdh__cards { gap: 14px; }
  .hero--td .hero__text { max-width: 480px; }
}
/* 2080: типографика первого экрана на главной и флагмане здесь не растёт — не раздуваем и сцену, лишнюю ширину отдаём воздуху */
@media (min-width: 2400px) {
  .tdh { --pad-x: 112px; --gift-w: 460px; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 520px); column-gap: 56px; }
}

/* ---------- 1280–1439: колонки уже ---------- */
@media (min-width: 1280px) and (max-width: 1439px) {
  .tdh { --pad-x: 44px; --pad-y: 44px; --gift-w: 260px; grid-template-columns: minmax(0, 462fr) minmax(0, 238fr) minmax(0, 354fr); column-gap: 20px; }
  .hero--td .hero__status { gap: 12px 14px; }
  .hero--td .hero__start { font-size: 14.5px; }
  .tdh__foot { width: max-content; max-width: calc(100% + 40px); } /* колонка подарка 238 px — подпись в две строки, а не в три */
  .tdh__card { width: calc(100% - 20px); }
  .tdh__card:nth-child(2), .tdh__card:nth-child(3) { --ox: 20px; }
  .tdh__card-in { padding: 12px 16px 14px; gap: 5px; }
}

/* ---------- Планшет ---------- */
@media (max-width: 1279px) {
  .tdh { --pad-x: 40px; --pad-y: 40px; min-height: 0; border-radius: 20px; }
}
/* 900–1279: текст и подарок рядом, карточки сеткой 2×2 под ними */
@media (min-width: 900px) and (max-width: 1279px) {
  .tdh {
    --gift-w: 340px; --glow-x: 76%;
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
    grid-template-rows: minmax(0, 1fr) auto auto auto;
    grid-template-areas:
      "copy stage"
      "copy tag"
      "cards cards"
      "foot foot";
    column-gap: 24px;
  }
  .tdh::before { -webkit-mask-image: radial-gradient(46% 60% at var(--glow-x) 30%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 82%); mask-image: radial-gradient(46% 60% at var(--glow-x) 30%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 82%); }
  .hero--td .hero__title--tight { font-size: clamp(44px, 4.6vw, 52px); } /* на 900–1023 колонка текста ~400 px: при 52 px звёздочка уходила на отдельную строку */
  .tdh__stage { place-items: end center; }
  .tdh__cards { margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-self: stretch; }
  .tdh__card, .tdh__card:nth-child(n) { width: auto; --ox: 0px; }
  .tdh__card:nth-child(1) { --r: -.8deg; }
  .tdh__card:nth-child(2) { --r: .8deg; }
  .tdh__card:nth-child(3) { --r: .6deg; }
  .tdh__card:nth-child(4) { --r: -.6deg; }
  .tdh__card-in { height: 100%; align-content: start; padding: 14px 18px 16px; }
  .tdh__foot { justify-self: start; max-width: none; margin-top: 18px; text-align: left; }
}
/* 768–899: рядом с текстом места нет — текст сверху во всю ширину, ниже подарок и веер карточек, как на десктопе */
@media (min-width: 768px) and (max-width: 899px) {
  .tdh {
    --gift-w: 260px;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "copy copy"
      "stage cards"
      "tag cards"
      "foot cards";
    column-gap: 24px;
  }
  .tdh::before { -webkit-mask-image: radial-gradient(60% 50% at 40% 72%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 82%); mask-image: radial-gradient(60% 50% at 40% 72%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 82%); }
  .tdh__offer { margin-top: 0; }
  .tdh__stage, .tdh__cards { margin-top: 44px; }
  .tdh__card { width: calc(100% - 20px); }
  .tdh__card:nth-child(2), .tdh__card:nth-child(3) { --ox: 20px; }
  .tdh__card-in { padding: 12px 16px 14px; gap: 5px; }
  .tdh__foot { width: max-content; max-width: calc(100% + 24px); }
}

/* ---------- Телефон < 768: сверху заголовок и кнопка, ниже подарок и карточки колонкой ---------- */
@media (max-width: 767px) {
  .tdh {
    --pad-x: 20px; --pad-y: 24px; --gift-w: 230px; --glow-x: 50%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "copy" "stage" "tag" "cards" "foot";
  }
  .tdh::before { -webkit-mask-image: linear-gradient(transparent 36%, #000 52%, rgba(0, 0, 0, .5) 80%, transparent); mask-image: linear-gradient(transparent 36%, #000 52%, rgba(0, 0, 0, .5) 80%, transparent); }
  .tdh__offer { margin-top: 0; padding-top: 24px; }
  .tdh__price b { font-size: 34px; }
  .tdh__stage { margin-top: 28px; }
  .tdh__cards { margin-top: 22px; gap: 10px; }
  .tdh__card { width: auto; }
  .tdh__card:nth-child(1) { --ox: 0px; --r: -1deg; }
  .tdh__card:nth-child(2) { --ox: 0px; --r: .8deg; }
  .tdh__card:nth-child(3) { --ox: 0px; --r: -.8deg; }
  .tdh__card:nth-child(4) { --ox: 0px; --r: 1deg; }
  .tdh__card-in { padding: 12px 16px 14px; }
  .tdh__foot { margin-top: 16px; }
}
@media (max-width: 479px) {
  .hero--td .hero__bottom { gap: 16px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .tdh__card, .tdh__card-in, .tdh__gift, .tdh__glow, .tdh__gift-img { transition: none; }
  .tdh__gift-pop { animation: none; }
}