/* ================================================================
   ПРАКТИКУМ «ИСТИННЫЕ ЖЕЛАНИЯ»
   Палитра и шрифты — общие с клубом «Моя жизнь». Добавлены два
   тёмных тона: на них идут экраны-вставки и блок с заданиями.
   Вёрстка мобильная (320–430px); на компьютере всё то же самое
   колонкой по центру.
   ================================================================ */

:root{
  --orange-1:#FFB300;
  --orange-2:#FF6D00;
  --gradient:linear-gradient(135deg, var(--orange-1), var(--orange-2));

  --cream:#FAF6EF;
  --cream-soft:#F3ECDE;
  --card:#FFFDF9;

  --ink:#241A12;
  --ink-soft:#6B5A48;
  --ink-deep:#17100B;      /* самый тёмный фон */
  --ink-panel:#21160F;     /* карточка на тёмном */

  --line:#E4D9C7;
  --line-dark:rgba(250,246,239,.14);
  --red:#E2562B;

  --radius:20px;
  --shadow:0 20px 40px -20px rgba(36,26,18,.25);
}

*{ box-sizing:border-box; margin:0; padding:0; }
/* Фон живёт только на html: его перекрашивает скрипт под текущий
   экран лендинга. Если тот же фон задать и body, он перекроет
   html — и на тёмных экранах по бокам останутся светлые полосы. */
html{ margin:0; background:var(--cream); }
body{ margin:0; background:transparent; }

body{
  color:var(--ink);
  font-family:'Manrope', sans-serif;
  line-height:1.5;
  -webkit-text-size-adjust:100%;
}

h1,h2,h3,.display{
  font-family:'Unbounded', sans-serif;
  line-height:1.14;
  letter-spacing:-.02em;
}
.mono{
  font-family:'JetBrains Mono', monospace;
  text-transform:uppercase;
  letter-spacing:.14em;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--orange-1); color:var(--ink); }

button, input{ font:inherit; color:inherit; }
button{ background:none; border:none; cursor:pointer; }

a:focus-visible, button:focus-visible, input:focus-visible{
  outline:3px solid var(--orange-2);
  outline-offset:3px;
  border-radius:6px;
}

/* Колонка: на телефоне во всю ширину, на компьютере по центру. */
/* Фон колонке не задаём: пока открыт лендинг, он свой у каждого
   экрана, а поле вокруг красит скрипт. Иначе на тёмных экранах по
   бокам оставались светлые полосы. */
.app{
  max-width:720px;   /* та же колонка, что и у первого практикума */
  margin:0 auto;
  container-type:inline-size;
  position:relative;
  min-height:100svh;
}
.wrap{ padding-left:28px; padding-right:28px; }

.grad{
  background:var(--gradient);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* ---------- КНОПКА ---------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  width:100%;
  padding:16px 26px;
  border-radius:999px;
  font-family:'Manrope', sans-serif;
  font-weight:700; font-size:16px;
  background:var(--gradient);
  color:#fff;
  box-shadow:0 16px 34px -12px rgba(255,109,0,.6);
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn:active{ transform:translateY(1px); }
.btn:disabled{
  opacity:.4;
  box-shadow:none;
  cursor:default;
}

/* Блик: пробегает по кнопке раз в несколько секунд. */
.btn--shine::after{
  content:'';
  position:absolute; top:-40%; bottom:-40%;
  width:36%;
  background:linear-gradient(100deg,
              rgba(255,255,255,0) 0%,
              rgba(255,255,255,.55) 50%,
              rgba(255,255,255,0) 100%);
  transform:translateX(-240%) rotate(8deg);
  animation:shine 3.4s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events:none;
}
@keyframes shine{
  0%, 58%{ transform:translateX(-240%) rotate(8deg); }
  100%   { transform:translateX(430%)  rotate(8deg); }
}

@keyframes blink{ 0%,49%{ opacity:1 } 50%,100%{ opacity:0 } }
@keyframes shake{
  0%,100%{ transform:translateX(0) }
  20%{ transform:translateX(-6px) }
  40%{ transform:translateX(6px) }
  60%{ transform:translateX(-4px) }
  80%{ transform:translateX(4px) }
}
@keyframes drawcheck{ from{ stroke-dashoffset:24 } to{ stroke-dashoffset:0 } }

@media (prefers-reduced-motion: reduce){
  .btn--shine::after{ animation:none; opacity:0; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}