/* ============================================================
   UMALIFE FOR MEN — umalifemen.uz

   Витрина. Костяная бумага, синие чернила, лаковый зелёный.
   Все цвета сняты с самой коробки:
   синий — с печати тигра на крышке мёда,
   зелёный — лак коробки, золото — тиснение.
   ============================================================ */

:root{
  /* бумага */
  --paper:      #EBE8DD;
  --paper-hi:   #F5F3EC;
  --paper-lo:   #E3DFD2;

  /* чернила */
  --ink:        #1B2743;
  --ink-2:      rgba(27,39,67,.66);
  --ink-3:      rgba(27,39,67,.42);

  /* линии */
  --rule:       #C9C3AF;
  --rule-2:     #DBD6C4;

  /* лак */
  --lacquer:    #16382B;
  --lacquer-2:  #102A20;
  --lacquer-rule: rgba(236,232,219,.18);
  --on-dark:    #ECE8DB;
  --on-dark-2:  rgba(236,232,219,.66);
  --on-dark-3:  rgba(236,232,219,.40);

  /* золото */
  --gold:       #9A7622;
  --gold-lit:   #CBB273;

  /* шрифты */
  --display: "Prata", Georgia, "Times New Roman", serif;
  --label:   "Oswald", "Arial Narrow", Arial, sans-serif;
  --body:    "Golos Text", -apple-system, "Segoe UI", Roboto, sans-serif;

  --shell: 1200px;
  --gut:   26px;
}

*,*::before,*::after{ box-sizing:border-box }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; height:auto }
a{ color:inherit; text-decoration:none }
ul,ol{ margin:0; padding:0; list-style:none }
h1,h2,h3{ margin:0; font-weight:400 }
p{ margin:0 }

::selection{ background:var(--ink); color:var(--paper) }

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

[id]{ scroll-margin-top:88px }

/* ============================================================
   ОСНОВА РАЗМЕТКИ
   ============================================================ */

.shell{
  width:100%;
  max-width:var(--shell);
  margin:0 auto;
  padding:0 var(--gut);
}
.shell-narrow{ max-width:900px }

.sec{ padding:118px 0 }
/* Блок заканчивается плитами — снизу воздуха нужно меньше.
   Два класса, а не один: иначе .sec из медиазапросов перебивает
   это правило и на телефоне отступ возвращается. */
.sec.sec-tight{ padding-bottom:44px }

.sec-dark{
  position:relative;
  overflow:hidden;
  background:var(--lacquer);
  color:var(--on-dark);
}

/* ============================================================
   ТИПОГРАФИКА
   ============================================================ */

.t-display{
  font-family:var(--display);
  line-height:1.08;
  letter-spacing:-.01em;
}
h1.t-display{ font-size:clamp(38px, 5.6vw, 72px) }
h2.t-display{ font-size:clamp(29px, 4.1vw, 52px) }

.kicker{
  font-family:var(--label);
  font-size:11px;
  font-weight:400;
  letter-spacing:.30em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 16px;
}
.sec-dark .kicker{ color:var(--gold-lit) }

.lede{
  margin:20px 0 0;
  font-size:18px;
  line-height:1.6;
  color:var(--ink-2);
  max-width:46em;
}
.sec-dark .lede{ color:var(--on-dark-2) }

/* заголовок раздела сидит на волосяной линии — как строка в документе */
.sec-head{
  border-top:1px solid var(--rule);
  padding-top:22px;
  margin-bottom:54px;
}
.sec-head > *{ max-width:820px }
.sec-dark .sec-head{ border-top-color:var(--lacquer-rule) }

/* заголовок по центру — для блоков с осевой композицией */
.sec-head-mid{ text-align:center }
.sec-head-mid > *{ margin-left:auto; margin-right:auto }

.disclaimer{
  margin-top:36px;
  max-width:56em;
  padding-left:20px;
  border-left:2px solid var(--gold);
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink-2);
}

/* ============================================================
   КНОПКИ
   ============================================================ */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:17px 30px;
  font-family:var(--label);
  font-size:13px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  border:1px solid transparent;
  border-radius:0;
  cursor:pointer;
  text-align:center;
  transition:background .2s, color .2s, border-color .2s;
}

.btn-solid{ background:var(--ink); color:var(--paper-hi); border-color:var(--ink) }
.btn-solid:hover{ background:var(--lacquer); border-color:var(--lacquer) }

.btn-line{ background:transparent; color:var(--ink); border-color:var(--rule) }
.btn-line:hover{ border-color:var(--ink) }

.btn-gold{ background:var(--gold-lit); color:var(--lacquer); border-color:var(--gold-lit) }
.btn-gold:hover{ background:#DCC68C; border-color:#DCC68C }

.btn-quiet{ background:transparent; color:var(--on-dark); border-color:var(--lacquer-rule) }
.btn-quiet:hover{ border-color:var(--gold-lit); color:var(--gold-lit) }

.btn-wide{ width:100% }

/* Ловушка для роботов в форме заявки.
   Не display:none — часть скриптов такие поля пропускает; поле уведено
   за край экрана, поэтому для робота оно обычное и он его заполнит,
   а человек его не видит и не может на него попасть. */
.hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}

/* ============================================================
   ЭКРАН ЗАГРУЗКИ
   Показывается только когда есть JS: класс .js вешает строчка
   в <head>. Без скрипта экран не появится и не закроет сайт.
   ============================================================ */

.boot{ display:none }

.js .boot{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  background:var(--paper);
  transition:opacity .55s ease, visibility .55s;
}
.js .boot.is-done{
  opacity:0;
  visibility:hidden;
}

.boot-in{
  position:relative;
  display:grid;
  place-items:center;
  width:116px;
  height:116px;
}
.boot-mark{
  width:66px;
  height:auto;
  opacity:.8;
}
.boot-ring{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  animation:bootSpin 1.15s linear infinite;
}
.boot-ring circle{
  fill:none;
  stroke:var(--gold);
  stroke-width:1.5;
  stroke-linecap:round;
  /* длина окружности ≈ 289, показываем четверть */
  stroke-dasharray:72 217;
}
@keyframes bootSpin{ to{ transform:rotate(360deg) } }

/* ============================================================
   ШАПКА
   ============================================================ */

.nav{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(235,232,221,.90);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  height:68px;
}

.brand{ display:flex; align-items:center; gap:12px }
.brand-mark{ flex:0 0 auto; width:34px; height:34px }
.brand-txt{ display:flex; align-items:baseline; gap:11px }
.brand-name{
  font-family:var(--display);
  font-size:21px;
  letter-spacing:.18em;
}
.brand-sub{
  font-family:var(--label);
  font-size:9.5px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink-3);
}

.lang{ display:flex; gap:2px }
.lang-a{
  font-family:var(--label);
  font-size:12px;
  letter-spacing:.16em;
  padding:6px 11px;
  color:var(--ink-3);
  border:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.lang-a:hover{ color:var(--ink) }
.lang-a.is-on{ color:var(--ink); border-color:var(--rule) }

/* ============================================================
   ПЕРВЫЙ ЭКРАН — ВИТРИНА С ВЫНОСНЫМИ ПОДПИСЯМИ
   ============================================================ */

.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:32px 0 76px;
  text-align:center;
}

/* тушевые горы с коробки — еле заметной подложкой, к низу растворяются */
.hero-bg{
  position:absolute;
  inset:0;
  z-index:-1;
  background:url(assets/background.webp) center top / cover no-repeat;
  opacity:.13;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 48%, transparent 82%);
          mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 48%, transparent 82%);
  pointer-events:none;
}

.hero-kicker{
  font-family:var(--label);
  font-size:11px;
  letter-spacing:.30em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 22px;
}

/* сцена: снимок в паспарту, вокруг — подписи на выносных линиях */
.plate{
  position:relative;
  max-width:980px;
  margin:0 auto;
}
/* ВРЕМЕННО: паспарту старого снимка. Нужен, пока ru/ и it/ не переведены
   на новый рендер. После переноса этот блок удалить. */
.plate-frame{
  position:relative;
  width:38%;
  margin:0 auto;
  padding:14px;
  background:var(--paper-hi);
  border:1px solid var(--rule);
  box-shadow:0 26px 54px -32px rgba(27,39,67,.55);
}
.plate-frame img{ width:100% }

/* рендер с прозрачным фоном — стоит прямо на бумаге, без паспарту */
.plate-shot{
  position:relative;
  width:36%;
  margin:0 auto;
  filter:drop-shadow(0 26px 32px rgba(27,39,67,.24));
}
.plate-shot img{ width:100% }

/* Блик. Маской служит сам снимок: свет идёт строго по силуэту продукта,
   а не по прямоугольнику. */
.shine{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(104deg,
    rgba(255,255,255,0) 42%,
    rgba(255,247,219,.52) 50%,
    rgba(255,255,255,0) 58%);
  background-size:250% 100%;
  background-repeat:no-repeat;
  -webkit-mask:url(assets/set.webp) center / contain no-repeat;
          mask:url(assets/set.webp) center / contain no-repeat;
  mix-blend-mode:screen;
}

.tag{
  position:absolute;
  width:30%;
  display:flex;
  align-items:center;
}
.tag-l{ left:0;  flex-direction:row;         justify-content:flex-end;   text-align:right }
.tag-r{ right:0; flex-direction:row-reverse; justify-content:flex-end;   text-align:left }

/* высоты подобраны под композицию рендера: коробка сверху, банки снизу */
.tag-1{ top:80% }   /* asal    — банка мёда снизу справа */
.tag-2{ top:72% }   /* kapsula — флакон снизу слева */
.tag-3{ top:30% }   /* qoshiq  — коробка */
.tag-4{ top:44% }   /* kitobcha — коробка */

.tag-line{
  position:relative;
  flex:0 0 44%;
  height:1px;
  background:var(--rule);
  margin:0 14px;
}
.tag-line::after{
  content:"";
  position:absolute;
  top:50%;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--gold);
  transform:translateY(-50%);
}
.tag-l .tag-line::after{ right:-2px }
.tag-r .tag-line::after{ left:-2px }

.tag-k{
  display:block;
  font-family:var(--label);
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.tag-v{
  display:block;
  font-family:var(--display);
  font-size:19px;
  line-height:1.25;
  margin-top:3px;
}

/* прорисовка подписей при загрузке — единственная режиссура на странице */
@keyframes tagLine{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
@keyframes tagText{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }

.tag-line{ animation:tagLine .85s cubic-bezier(.22,.72,.2,1) both }
.tag-txt { animation:tagText .6s ease both }

.tag-l .tag-line{ transform-origin:left center }
.tag-r .tag-line{ transform-origin:right center }

/* прорисовываются сверху вниз, уже после заголовка и кнопок */
.tag-3 .tag-line{ animation-delay:.90s } .tag-3 .tag-txt{ animation-delay:1.45s }
.tag-4 .tag-line{ animation-delay:1.05s } .tag-4 .tag-txt{ animation-delay:1.60s }
.tag-2 .tag-line{ animation-delay:1.20s } .tag-2 .tag-txt{ animation-delay:1.75s }
.tag-1 .tag-line{ animation-delay:1.35s } .tag-1 .tag-txt{ animation-delay:1.90s }

/* ------------------------------------------------------------
   ВХОД ПЕРВОГО ЭКРАНА — один срежиссированный проход.
   Порядок: дымка → продукт → заголовок → кнопки → выноски → блик.
   Смысл и кнопка появляются раньше украшений: это лендинг,
   человек не должен ждать полторы секунды до сути.
   ------------------------------------------------------------ */

@keyframes heroMist { from{ opacity:0 }                                   to{ opacity:.13 } }
/* дымка наплывает: горы заметно ходят и приближаются */
@keyframes mistDrift{
  from{ transform:scale(1.05) translate3d(-3%, 1.5%, 0) }
  to  { transform:scale(1.20) translate3d(3%, -3.5%, 0) }
}
/* печать впечатывается: приходит крупной и садится на место */
@keyframes stampIn{
  0%  { opacity:0; transform:rotate(-26deg) scale(1.4) }
  60% { opacity:1; transform:rotate(-5deg)  scale(.96) }
  100%{ opacity:1; transform:rotate(-8deg)  scale(1) }
}
@keyframes stampRing{
  0%,100%{ opacity:.25; transform:scale(1) }
  50%    { opacity:.95; transform:scale(1.09) }
}
/* печать всё время слегка дышит — скидку должно быть видно на любом кадре */
@keyframes stampPulse{
  0%,100%{ transform:rotate(-8deg) scale(1) }
  50%    { transform:rotate(-6deg) scale(1.06) }
}
@keyframes heroUp   { from{ opacity:0; transform:translateY(14px) }       to{ opacity:1; transform:none } }
@keyframes heroShot { from{ opacity:0; transform:translateY(30px) scale(.97) } to{ opacity:1; transform:none } }
@keyframes heroFloat{
  0%,100%{ transform:translateY(0) scale(1) }
  50%    { transform:translateY(-15px) scale(1.014) }
}
/* блик проходит по продукту раз в девять секунд, потом пауза */
@keyframes heroShine{
  0%  { background-position:190% 0; animation-timing-function:cubic-bezier(.4,0,.3,1) }
  24% { background-position:-90% 0 }
  100%{ background-position:-90% 0 }
}

.hero-bg{
  will-change:transform;
  animation:
    heroMist 1.6s ease both,
    mistDrift 16s ease-in-out 1.6s infinite alternate;
}
.hero-kicker{ animation:heroUp .8s ease .10s both }
.plate-shot{
  animation:
    heroShot 1s cubic-bezier(.22,.72,.25,1) .18s both,
    heroFloat 5.5s ease-in-out 3.2s infinite;
}
.shine     { animation:heroShine 9s linear 1.3s infinite }
.hero-title{ animation:heroUp .9s ease .55s both }
.hero-lede { animation:heroUp .9s ease .70s both }
.hero-cta  { animation:heroUp .9s ease .85s both }
.hero-fine { animation:heroUp .9s ease 1.00s both }
.stamp{
  animation:
    stampIn .9s cubic-bezier(.2,.8,.28,1) 1.05s both,
    stampPulse 3.2s ease-in-out 2.1s infinite;
}
.stamp::before{ animation:stampRing 3.2s ease-in-out 2.1s infinite }

.hero-title{ margin:30px 0 0 }
.hero-lede{
  margin:22px auto 0;
  max-width:34em;
  font-size:18px;
  color:var(--ink-2);
}

.hero-cta{
  margin:38px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px 26px;
}
.hero-fine{
  margin:20px 0 0;
  font-size:14px;
  color:var(--ink-3);
}

/* печать со скидкой */
.stamp{
  position:relative;
  flex:0 0 auto;
  width:98px; height:98px;
  border:1px solid var(--gold);
  border-radius:50%;
  display:grid;
  place-content:center;
  text-align:center;
  color:var(--gold);
  transform:rotate(-8deg);
}
.stamp::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(154,118,34,.30);
  border-radius:50%;
}
.stamp-n{
  display:block;
  font-family:var(--display);
  font-size:25px;
  line-height:1;
}
.stamp-k{
  display:block;
  margin-top:5px;
  font-family:var(--label);
  font-size:8.5px;
  letter-spacing:.20em;
  text-transform:uppercase;
}

/* ============================================================
   ПОЛОСА ДОВЕРИЯ
   ============================================================ */

.strip{
  background:var(--paper-lo);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
/* колонок столько, сколько пунктов: во всех трёх языках их два */
.strip-in{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr }
.strip-i{
  padding:26px 26px 26px 26px;
  border-left:1px solid var(--rule-2);
}
.strip-i:first-child{ border-left:0; padding-left:0 }
.strip-i:last-child{ padding-right:0 }

.strip-k{
  display:block;
  font-family:var(--label);
  font-size:12px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.strip-v{
  display:block;
  margin-top:6px;
  font-size:14.5px;
  color:var(--ink-2);
}

/* ============================================================
   СПИСКИ НА ЛИНИЯХ (проблемы, последствия)
   ============================================================ */

.rows{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 64px;
  border-top:1px solid var(--rule);
}
.rows li{
  padding:24px 0;
  border-bottom:1px solid var(--rule-2);
}
.rows h3{
  font-family:var(--display);
  font-size:24px;
  line-height:1.22;
  margin-bottom:8px;
}
.rows p{ font-size:16px; color:var(--ink-2) }

.sec-dark .rows{ border-top-color:var(--lacquer-rule) }
.sec-dark .rows li{ border-bottom-color:var(--lacquer-rule) }
.sec-dark .rows p{ color:var(--on-dark-2) }

/* ============================================================
   БЛАНК СИМПТОМОВ — читатель отмечает своё сам
   ============================================================ */

.check{
  background:var(--paper-hi);
  border:1px solid var(--rule);
  box-shadow:0 26px 54px -40px rgba(27,39,67,.5);
}

.check-head{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:16px 30px;
  border-bottom:2px solid var(--ink);
  font-family:var(--label);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-3);
}

.check-row{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:24px;
  padding:22px 30px;
  border-bottom:1px solid var(--rule-2);
  cursor:pointer;
  transition:background .2s;
}
.check-row:hover{ background:rgba(27,39,67,.035) }
.check-row:has(input:checked){ background:rgba(154,118,34,.06) }

/* галочка живёт в настоящем input — работает с клавиатуры и читалками */
.check-row input{
  position:absolute;
  width:1px; height:1px;
  opacity:0;
  pointer-events:none;
}

.check-t{
  display:block;
  font-family:var(--display);
  font-size:23px;
  line-height:1.22;
}
.check-d{
  display:block;
  margin-top:6px;
  font-size:15.5px;
  color:var(--ink-2);
}

.check-box{
  position:relative;
  flex:0 0 auto;
  width:24px; height:24px;
  border:1px solid var(--rule);
  background:var(--paper);
  transition:background .18s, border-color .18s;
}
.check-row:hover .check-box{ border-color:var(--ink-3) }
.check-row input:checked ~ .check-box{
  background:var(--ink);
  border-color:var(--ink);
}
.check-row input:checked ~ .check-box::after{
  content:"";
  position:absolute;
  left:8px; top:3px;
  width:6px; height:12px;
  border-right:2px solid var(--gold-lit);
  border-bottom:2px solid var(--gold-lit);
  transform:rotate(45deg);
}
.check-row input:focus-visible ~ .check-box{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

.check-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:18px 26px;
  padding:24px 30px;
  background:var(--paper-lo);
}
.check-score{
  font-family:var(--label);
  font-size:11px;
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.check-n{
  font-size:30px;
  letter-spacing:.04em;
  color:var(--ink);
}
.check-msg{
  flex:1 1 260px;
  font-size:15.5px;
  color:var(--ink-2);
}
.check.has-marks .check-msg{ color:var(--ink) }
.check-foot .btn{ flex:0 0 auto }

/* туманные горы с коробки — подложка тёмной плиты */
.slab-bg{
  position:absolute;
  inset:auto 0 0 0;
  height:80%;
  /* градиент притемняет левую часть — там лежит текст */
  background:
    linear-gradient(100deg, rgba(11,30,22,.72) 0%, rgba(11,30,22,.34) 46%, rgba(255,255,255,0) 76%),
    url(assets/background.webp) center bottom / cover no-repeat;
  mix-blend-mode:multiply;
  opacity:.9;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 42%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 42%);
  pointer-events:none;
  z-index:0;
}

/* ============================================================
   ЧТО ДАЁТ ПРОДУКТ — ТРИ НАПРАВЛЕНИЯ
   Группировка сама по себе информация: покупатель видит,
   что продукт работает не в одну точку.
   ============================================================ */

/* секция с той же дымкой гор, что и первый экран */
.sec-mist{ position:relative; overflow:hidden }
.sec-mist > .shell{ position:relative; z-index:1 }
.sec-mist::before{
  content:"";
  position:absolute;
  inset:0;
  background:url(assets/background.webp) center top / cover no-repeat;
  /* слабее, чем в первом экране: здесь поверх лежат плиты,
     и фон не должен с ними спорить */
  opacity:.08;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.45) 46%, transparent 76%);
          mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.45) 46%, transparent 76%);
  pointer-events:none;
}

/* ============================================================
   ПЛИТЫ — общий компонент для «последствий» и «решения».
   Ровные строки одного кегля сливались в абзац, поэтому у каждой
   мысли своя рамка, номер и линия.
   ============================================================ */

.cards{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.cards-4{ grid-template-columns:repeat(2,1fr) }

.card{
  position:relative;
  z-index:1;
  padding:30px 28px 26px;
  background:var(--paper-hi);
  border:1px solid var(--rule);
  box-shadow:0 20px 44px -34px rgba(27,39,67,.55);
}
.sec-dark .card{
  background:rgba(236,232,219,.05);
  border-color:var(--lacquer-rule);
}

/* медальон с номером — та же форма, что у печати со скидкой */
.card-n{
  display:grid;
  place-content:center;
  width:56px; height:56px;
  border:1px solid var(--gold);
  border-radius:50%;
  font-family:var(--label);
  font-size:15px;
  font-weight:400;
  letter-spacing:.06em;
  color:var(--gold);
}
.sec-dark .card-n{ border-color:var(--gold-lit); color:var(--gold-lit) }

.card-t{
  margin:18px 0 0;
  font-family:var(--display);
  font-size:26px;
  line-height:1.18;
}
.card > p{
  margin-top:14px;
  padding-top:16px;
  border-top:1px solid var(--rule-2);
  font-size:16.5px;
  line-height:1.5;
  color:var(--ink-2);
}
.sec-dark .card > p{
  border-top-color:var(--lacquer-rule);
  color:var(--on-dark-2);
}

.card ul{
  margin-top:20px;
  border-top:1px solid var(--rule-2);
}
.card li{
  position:relative;
  padding:13px 0 13px 24px;
  border-bottom:1px solid var(--rule-2);
  font-size:16.5px;
  line-height:1.45;
}
.card li:last-child{ border-bottom:0; padding-bottom:0 }
.card li::before{
  content:"";
  position:absolute;
  left:2px; top:1.4em;
  width:7px; height:7px;
  background:var(--gold);
  transform:rotate(45deg);
}

/* плиты проявляются по очереди */
.card.rise:nth-of-type(2){ transition-delay:.10s }
.card.rise:nth-of-type(3){ transition-delay:.20s }
.card.rise:nth-of-type(4){ transition-delay:.30s }

/* тигр: фото — тёмный зверь на белом. Инверсия + screen убирают
   белое и оставляют на лаке светлую гравюру. */
.slab-tiger{
  position:absolute;
  right:-4%;
  bottom:-6%;
  width:min(600px, 52%);
  opacity:.16;
  filter:invert(1) sepia(.55);
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:0;
}
.sec-dark .shell{ position:relative; z-index:1 }

/* ============================================================
   ВИТРИНА — ЭКСПОНАТЫ С МУЗЕЙНЫМИ ПОДПИСЯМИ
   ============================================================ */

.vitrine{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}
.exhibit{ margin:0 }
.exhibit-plate{
  display:grid;
  place-items:center;
  aspect-ratio:4/5;
  padding:26px;
  background:var(--paper-hi);
  border:1px solid var(--rule);
  overflow:hidden;
}
/* предмет на подставке: снимок на белом, multiply убирает белый фон */
.exhibit-plate img{
  width:100%;
  height:100%;
  /* без min-*:0 grid не даёт узкому снимку ужаться и режет его снизу */
  min-width:0;
  min-height:0;
  object-fit:contain;
  mix-blend-mode:multiply;
}
/* обычная фотография — заполняет плиту целиком */
.exhibit-photo{ padding:0 }
.exhibit-photo img{
  object-fit:cover;
  mix-blend-mode:normal;
}
.exhibit figcaption{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--rule-2);
}
.ex-k{
  display:block;
  font-family:var(--label);
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.ex-v{
  display:block;
  margin-top:4px;
  font-family:var(--display);
  font-size:20px;
}

/* что лежит внутри — компактная строка на четыре позиции */
.contents{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:54px;
  border-top:1px solid var(--rule);
}
.contents li{
  padding:22px 24px;
  border-left:1px solid var(--rule-2);
}
.contents li:first-child{ border-left:0; padding-left:0 }
.contents li:last-child{ padding-right:0 }
.contents h3{
  font-family:var(--display);
  font-size:20px;
  margin-bottom:6px;
}
.contents p{ font-size:15px; color:var(--ink-2) }

/* ============================================================
   СОСТАВ — ТАБЛИЦА С ДОЗИРОВКАМИ
   ============================================================ */

.spec{ border-top:1px solid var(--rule) }
.spec li{
  display:grid;
  grid-template-columns:220px 160px 1fr;
  gap:0 28px;
  align-items:baseline;
  padding:20px 0;
  border-bottom:1px solid var(--rule-2);
}
.spec-n{
  font-family:var(--display);
  font-size:22px;
  line-height:1.25;
}
.spec-d{
  font-family:var(--label);
  font-size:12.5px;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.spec p{ font-size:15.5px; color:var(--ink-2) }
/* подсказка «нажмите на строку» нужна только на телефоне,
   где таблица складывается — см. медиазапрос 640px */
.spec-hint{
  display:none;
  margin:14px 0 18px;
  font-family:var(--label);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* ============================================================
   ЧТО ДАЁТ ПРОДУКТ
   ============================================================ */

.effects{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 60px;
  border-top:1px solid var(--rule);
}
.effects li{
  position:relative;
  padding:18px 0 18px 30px;
  border-bottom:1px solid var(--rule-2);
  font-size:17px;
}
.effects li::before{
  content:"";
  position:absolute;
  left:2px; top:1.5em;
  width:7px; height:7px;
  background:var(--gold);
  transform:rotate(45deg);
}

/* ============================================================
   БЕСПЛАТНАЯ ДОСТАВКА — ДОРОГА, ЕСЛИ СМОТРЕТЬ СВЕРХУ
   Машина выезжает снизу за край блока и поднимается в кадр.
   ============================================================ */

.ship{
  position:relative;
  overflow:hidden;
  background:var(--paper-lo);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.ship-in{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:64px;
  align-items:center;
  min-height:440px;
  padding:72px 0;
}

/* полоса с прерывистой разметкой */
.ship-road{
  position:relative;
  align-self:stretch;
}
.ship-road::before{
  content:"";
  position:absolute;
  left:50%; top:-72px; bottom:-72px;
  width:2px;
  transform:translateX(-50%);
  background:repeating-linear-gradient(180deg,
    var(--rule) 0 24px, transparent 24px 50px);
}

/* Итоговое положение — по умолчанию. Стартовое прячет класс is-armed,
   который вешает скрипт: без JS блок просто виден целиком. */
.ship-car{
  position:absolute;
  left:50%;
  top:50%;
  width:136px;
  transform:translate(-50%, -50%);
  transition:transform 2.4s cubic-bezier(.24,.72,.3,1);
}
.ship-copy > *{
  transition:opacity .8s ease, transform .8s ease;
}

.ship.is-armed .ship-car{ transform:translate(-50%, 105%) }
.ship.is-armed .ship-copy > *{ opacity:0; transform:translateY(10px) }

.ship.is-armed.is-on .ship-car{ transform:translate(-50%, -50%) }
.ship.is-armed.is-on .ship-copy > *{ opacity:1; transform:none }
.ship.is-armed.is-on .ship-copy > *:nth-child(2){ transition-delay:.12s }
.ship.is-armed.is-on .ship-copy > *:nth-child(3){ transition-delay:.26s }
.ship.is-armed.is-on .ship-copy > *:nth-child(4){ transition-delay:.40s }

.ship-note{
  margin-top:24px;
  font-family:var(--label);
  font-size:11px;
  font-weight:400;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* ============================================================
   ТРИ ШАГА
   ============================================================ */

.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:46px;
}
.steps li{
  border-top:1px solid var(--rule);
  padding-top:24px;
}
.step-n{
  display:block;
  margin-bottom:16px;
  font-family:var(--label);
  font-size:13px;
  font-weight:500;
  letter-spacing:.22em;
  color:var(--gold);
}
.steps h3{
  font-family:var(--display);
  font-size:25px;
  margin-bottom:10px;
}
.steps p{ font-size:16px; color:var(--ink-2) }

/* ============================================================
   ЗАЯВКА — ЛАКОВАЯ ПЛИТА
   ============================================================ */

/* Узор из белой эмблемы по лаку. Два одинаковых слоя со смещением
   на половину шага дают шахматку — ровная сетка смотрелась бы обоями.
   Маска гасит узор справа, где лежит светлый бланк. */
.sec-pattern::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url(assets/pattern.webp), url(assets/pattern.webp);
  background-repeat:repeat, repeat;
  background-size:108px auto, 108px auto;
  background-position:0 0, 54px 54px;
  opacity:.05;
  -webkit-mask-image:linear-gradient(100deg, #000 0%, rgba(0,0,0,.55) 46%, transparent 74%);
          mask-image:linear-gradient(100deg, #000 0%, rgba(0,0,0,.55) 46%, transparent 74%);
}

.order{
  display:grid;
  grid-template-columns:1fr .82fr;
  gap:72px;
  align-items:start;
}
.order-copy .lede{ margin-top:18px }

.timer{
  margin:34px 0 0;
  padding:18px 0;
  border-top:1px solid var(--lacquer-rule);
  border-bottom:1px solid var(--lacquer-rule);
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px 22px;
}
.timer-k{
  font-family:var(--label);
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--on-dark-3);
}
.timer-v{
  font-family:var(--label);
  font-weight:300;
  font-size:40px;
  line-height:1;
  letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  color:var(--on-dark);
}
.timer-v b{ font-weight:300 }
/* «kun» / «дн» / «gg» между днями и часами */
.timer-v i{
  font-style:normal;
  font-size:.40em;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--on-dark-3);
  margin:0 .62em 0 .22em;
}

.order-ticks{ margin:28px 0 0; display:grid; gap:11px }
.order-ticks li{
  position:relative;
  padding-left:24px;
  font-size:15.5px;
  color:var(--on-dark-2);
}
.order-ticks li::before{
  content:"";
  position:absolute;
  left:2px; top:.62em;
  width:6px; height:6px;
  background:var(--gold-lit);
  transform:rotate(45deg);
}

/* форма — светлый бланк на лаке */
.form{
  background:var(--paper-hi);
  color:var(--ink);
  padding:36px 34px 30px;
  box-shadow:0 34px 64px -36px rgba(0,0,0,.75);
}
.form-title{
  font-family:var(--display);
  font-size:27px;
  margin-bottom:24px;
}
.field{ display:block; margin-bottom:18px }
.field > span{
  display:block;
  margin-bottom:6px;
  font-family:var(--label);
  font-size:10.5px;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.field input,
.field select{
  width:100%;
  padding:13px 0;
  font-family:var(--body);
  font-size:16px;
  color:var(--ink);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--rule);
  border-radius:0;
  transition:border-color .2s;
}
.field input::placeholder{ color:var(--ink-3) }
.field input:focus,
.field select:focus{ border-bottom-color:var(--ink) }

.field-select{ position:relative }
.field-select::after{
  content:"";
  position:absolute;
  right:4px; bottom:21px;
  width:8px; height:8px;
  border-right:1.5px solid var(--ink-3);
  border-bottom:1.5px solid var(--ink-3);
  transform:rotate(45deg);
  pointer-events:none;
}
.field select{ appearance:none; -webkit-appearance:none; padding-right:26px }

.form .btn-wide{ margin-top:10px }
.form .btn-line{ margin-top:10px }

.form-note{
  margin-top:16px;
  font-size:13px;
  color:var(--ink-3);
  text-align:center;
}
.form-msg{
  margin-top:12px;
  min-height:1.4em;
  font-size:15px;
  text-align:center;
}
.form-msg.is-ok{ color:var(--lacquer) }
.form-msg.is-bad{ color:#9C3B22 }

.is-sending{ opacity:.6; pointer-events:none }

/* ============================================================
   ОТЗЫВЫ
   ============================================================ */

.quotes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0 56px;
}
.quote{
  margin:0;
  padding-top:26px;
  border-top:1px solid var(--rule);
}
.quote blockquote{
  margin:0;
  font-family:var(--display);
  font-size:20px;
  line-height:1.45;
}
.quote figcaption{
  margin-top:22px;
  font-family:var(--label);
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.quote figcaption b{ color:var(--ink); font-weight:500 }

/* ============================================================
   ВОПРОСЫ
   ============================================================ */

.faq{ border-top:1px solid var(--rule) }
.faq details{ border-bottom:1px solid var(--rule-2) }
.faq summary{
  list-style:none;
  cursor:pointer;
  position:relative;
  padding:22px 46px 22px 0;
  font-family:var(--display);
  font-size:22px;
  line-height:1.32;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:"";
  position:absolute;
  right:6px; top:32px;
  width:12px; height:1px;
  background:var(--gold);
}
.faq summary::before{
  content:"";
  position:absolute;
  right:11px; top:27px;
  width:1px; height:11px;
  background:var(--gold);
  transition:transform .25s;
}
.faq details[open] summary::before{ transform:scaleY(0) }
.faq details p{
  padding:0 46px 24px 0;
  font-size:16px;
  color:var(--ink-2);
}

/* ============================================================
   ПОДВАЛ
   ============================================================ */

.foot{
  background:var(--lacquer-2);
  color:var(--on-dark);
  padding:74px 0 40px;
}
.foot-in{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:30px;
  padding-bottom:32px;
  border-bottom:1px solid var(--lacquer-rule);
}
.foot .brand-sub{ color:var(--on-dark-3) }
.foot-links{ display:flex; gap:26px }
.foot-links a{
  font-family:var(--label);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-lit);
  padding-bottom:3px;
  border-bottom:1px solid rgba(203,178,115,.35);
}
.foot-note{
  margin-top:28px;
  max-width:62em;
  font-size:13.5px;
  line-height:1.6;
  color:var(--on-dark-3);
}
.foot-copy{
  margin-top:16px;
  font-size:12.5px;
  color:var(--on-dark-3);
}

/* ============================================================
   НИЖНЯЯ ЛИПКАЯ ПОЛОСА
   ============================================================ */

.sticky{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 22px;
  background:var(--lacquer);
  border-top:1px solid var(--lacquer-rule);
  transform:translateY(105%);
  transition:transform .35s ease;
}
.sticky.is-up{ transform:none }
/* уходит вниз, пока человек печатает в форме — чтобы не лечь поверх поля
   под клавиатурой. Идёт после .is-up: при равной силе побеждает нижнее. */
.sticky.is-typing{ transform:translateY(105%) }
.sticky-t{
  font-family:var(--label);
  font-size:12.5px;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--on-dark);
}
.sticky .btn{ flex:0 0 auto; padding:12px 22px }

/* Кнопка в нижней полосе.
   Полоса на телефоне висит на экране всё время, поэтому кнопка не мигает
   и не дёргается: раз в шесть секунд по золоту проходит блик и кнопка
   чуть приподнимается — один жест, тот же приём, что на снимке продукта
   в первом экране. Остальные пять секунд она стоит спокойно.
   При включённом «уменьшении движения» анимация гаснет сама —
   об этом общее правило в конце файла. */
.sticky .btn-gold{
  position:relative;
  overflow:hidden;
  animation:stickyLift 6s ease 2s infinite;
}
.sticky .btn-gold::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:-56%;
  width:46%;
  pointer-events:none;
  background:linear-gradient(104deg,
    rgba(255,255,255,0) 0%,
    rgba(255,252,240,.5) 50%,
    rgba(255,255,255,0) 100%);
  animation:stickyShine 6s ease-in-out 2s infinite;
}
/* блик уезжает за правый край и ждёт там до следующего круга —
   возврат в исходную точку происходит за пределами кнопки, его не видно */
@keyframes stickyShine{
  0%       { transform:translateX(0) }
  20%,100% { transform:translateX(320%) }
}
@keyframes stickyLift{
  0%, 6%    { transform:none }
  13%       { transform:translateY(-2px) }
  24%, 100% { transform:none }
}

/* ============================================================
   ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ
   ============================================================ */

.rise{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s ease, transform .7s ease;
}
.rise.is-in{ opacity:1; transform:none }

/* ============================================================
   АДАПТИВ
   ============================================================ */

@media (max-width:1080px){
  .sec{ padding:96px 0 }
  .plate{ max-width:840px }
  .plate-frame{ width:50% }
  .tag{ width:25% }
  .order{ grid-template-columns:1fr; gap:44px }
  .spec li{ grid-template-columns:180px 130px 1fr; gap:0 22px }
  .contents{ grid-template-columns:repeat(2,1fr) }
  .contents li{ padding:20px 22px; border-left:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2) }
  .contents li:nth-child(odd){ border-left:0; padding-left:0 }
  .contents li:nth-child(even){ padding-right:0 }
  .quotes{ gap:0 36px }
}

@media (max-width:860px){
  .hero{ padding:40px 0 72px }
  .hero-kicker{ margin-bottom:30px }
  .hero-title{ margin-top:42px }

  /* Фон первого экрана. Картинка — панорама 16:9, горы стоят по её краям,
     середина пустая. На узком экране cover обрезал всё до этой пустой
     середины — фона будто и не было. Поэтому кладём картинку по ширине
     экрана полосой сверху: горы возвращаются на края, за коробку. */
  .hero-bg{
    bottom:auto;
    height:78vw;
    background-size:135% auto;
    background-position:center top;
    opacity:.22;
    -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 58%, transparent 100%);
            mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 58%, transparent 100%);
  }

  /* Нижняя полоса на телефоне видна всегда, а не только после прокрутки:
     это главная кнопка заказа на маленьком экране.
     Класс .is-up от скрипта здесь ничего не решает. */
  .sticky{ transform:none }
  /* чтобы полоса не перекрывала подвал и низ формы */
  .foot{ padding-bottom:104px }
  .order{ padding-bottom:16px }

  /* выносные линии не помещаются — подписи становятся обычным списком */
  .plate{ max-width:520px }
  .plate-frame{ width:100% }
  .plate-shot{ width:72% }
  .tags{
    margin-top:26px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    border-top:1px solid var(--rule);
  }
  .tag{
    position:static;
    display:block;
    width:auto;
    text-align:left;
    padding:14px 0;
    border-bottom:1px solid var(--rule-2);
  }
  .tag:nth-child(even){ padding-left:20px }
  .tag-line{ display:none }
  .tag-txt{ animation-delay:.2s !important }

  .strip-in{ grid-auto-flow:row; grid-template-columns:repeat(2,1fr) }
  .strip-i{ padding:20px 20px }
  .strip-i:nth-child(odd){ border-left:0; padding-left:0 }
  .strip-i:nth-child(even){ padding-right:0 }
  /* подчёркиваем только те пункты, под которыми есть следующий ряд;
     пунктов теперь два, ряд один — линия снизу была бы второй подряд,
     у самой полосы своя граница */
  .strip-i:nth-last-child(n+3){ border-bottom:1px solid var(--rule-2) }

  .vitrine{ grid-template-columns:1fr 1fr; gap:22px }
  .exhibit:last-child{ grid-column:1 / -1 }
  .exhibit:last-child .exhibit-plate{ aspect-ratio:16/10 }

  .cards,
  .cards-4{ grid-template-columns:1fr; gap:18px }
  .card{ padding:26px 22px 22px }
  .card-t{ font-size:23px }

  /* дорога уходит наверх, текст под неё */
  .ship-in{ grid-template-columns:1fr; gap:34px; min-height:0; padding:56px 0 }
  .ship-road{ height:240px; align-self:auto }
  .ship-road::before{ top:-56px; bottom:0 }
  .ship-car{ width:104px }

  .steps{ grid-template-columns:1fr; gap:34px }
  .quotes{ grid-template-columns:1fr; gap:0 }
  .quote{ margin-top:26px }
  .quote:first-child{ margin-top:0 }
}

@media (max-width:640px){
  body{ font-size:16px }
  .sec{ padding:76px 0 }
  .shell{ padding:0 20px }

  .nav-in{ height:60px }
  .brand{ gap:9px }
  .brand-mark{ width:28px; height:28px }
  .brand-txt{ gap:8px }
  .brand-name{ font-size:18px; letter-spacing:.14em }
  .brand-sub{ font-size:8.5px; letter-spacing:.26em }
  .lang-a{ padding:5px 9px; font-size:11px }

  .sec-head{ margin-bottom:38px }
  /* строка над продуктом длинная — на телефоне ужимаем, чтобы легла в две строки */
  .hero-kicker{ font-size:9.5px; letter-spacing:.18em }
  .hero-lede{ font-size:16.5px }
  .hero-cta{ flex-direction:column; gap:12px }
  .hero-cta .btn{ width:100% }
  .stamp{ order:-1; margin-bottom:8px }

  .rows{ grid-template-columns:1fr }
  .effects{ grid-template-columns:1fr }

  .check-head{ padding:14px 20px }
  /* на узком экране галочка встаёт вровень с заголовком, а не с описанием */
  .check-row{ padding:18px 20px; gap:16px; align-items:start }
  .check-t{ font-size:20px }
  .check-d{ font-size:15px }
  .check-foot{ padding:20px }
  .check-foot .btn{ width:100% }
  .contents{ grid-template-columns:1fr }
  .contents li{ padding:18px 0 !important; border-left:0 !important }

  /* Состав на телефоне. Десять компонентов по три строки каждый —
     это несколько экранов прокрутки подряд, человек устаёт и уходит
     до формы. Аптекарская таблица остаётся, но складывается: строка —
     название и дозировка, описание открывается нажатием.
     Раскладка ниже работает вместе с .spec в script.js. */
  .spec li{
    grid-template-columns:1fr auto;
    align-items:baseline;
    gap:0 14px;
    padding:0;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .spec-n{ font-size:19px; padding:14px 0 }
  .spec-d{
    font-size:11px;
    letter-spacing:.10em;
    padding:14px 0;
    text-align:right;
    white-space:nowrap;
  }
  /* плюс — знак того, что строку можно раскрыть */
  .spec-d::after{
    content:"+";
    display:inline-block;
    width:14px;
    margin-left:10px;
    font-size:14px;
    text-align:right;
    color:var(--gold);
  }
  .spec li.is-open .spec-d::after{ content:"–" }

  .spec li p{
    grid-column:1 / -1;
    margin:0;
    font-size:15px;
    max-height:0;
    opacity:0;
    overflow:hidden;
    transition:max-height .32s ease, opacity .22s ease, margin .32s ease;
  }
  .spec li.is-open p{ max-height:16em; opacity:1; margin:0 0 16px }

  .spec-hint{ display:block }

  /* витрина остаётся в две колонки — в одну она растягивает страницу */
  .vitrine{ gap:14px }
  .ex-v{ font-size:18px }

  .form{ padding:28px 22px 24px }
  .timer-v{ font-size:32px }

  .foot-in{ flex-direction:column; gap:22px }

  .sticky{ padding:10px 16px; gap:12px }
  .sticky-t{ font-size:11px; letter-spacing:.10em; line-height:1.35 }
  .sticky .btn{ padding:11px 16px; font-size:11.5px }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rise{ opacity:1; transform:none }
}