/* =====================================================================
   HANABELLA — "Cadastrou, Ganhou!"
   Paleta extraída da marca: coral, creme e marrom
   ===================================================================== */

:root{
  --coral:        #F58466;
  --coral-deep:   #E4694A;
  --coral-dark:   #C9522F;
  --coral-soft:   #FBD9CB;
  --cream:        #F4EEE1;
  --cream-2:      #EDE5D0;
  --cream-3:      #FBF8F1;
  --brown:        #8A4736;
  --brown-deep:   #4A251C;
  --brown-ink:    #2E1710;
  --ink:          #33201A;
  --muted:        #7C6154;
  --white:        #FFFFFF;

  --black:        #000000;
  --near:         #0B0908;
  --near-2:       #141010;
  --gold:         #D9B476;
  --gold-soft:    #EBD4A6;

  --ok:           #2E7D52;
  --err:          #C0392B;

  --radius:       18px;
  --radius-lg:    28px;
  --shadow-sm:    0 2px 10px rgba(74,37,28,.07);
  --shadow:       0 14px 40px -18px rgba(74,37,28,.35);
  --shadow-lg:    0 34px 80px -30px rgba(74,37,28,.45);
  --ring:         0 0 0 4px rgba(245,132,102,.24);

  --wrap:         1180px;
  --pad:          22px;

  --f-sans: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
}

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

/* o atributo hidden precisa vencer os display: das camadas */
[hidden]{ display:none !important; }

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

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

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--coral-dark); }
h1,h2,h3{ margin:0; line-height:1.12; font-weight:800; letter-spacing:-.02em; }
p{ margin:0 0 1em; }
ul,ol{ margin:0; padding:0; list-style:none; }

.container{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

.eyebrow,
.section-head__eyebrow{
  display:inline-block;
  font-size:.74rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--coral-dark);
}
.eyebrow em{ font-style:normal; opacity:.62; }

.section-head{ text-align:center; margin-bottom:38px; }
.section-head__title{
  font-size:clamp(1.7rem,4vw,2.5rem);
  color:var(--brown-deep);
  margin-top:6px;
}

/* ---------------------------------------------------------------- botões */
.btn{
  --bg:var(--coral); --fg:#fff;
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px;
  border:0; border-radius:999px;
  font:inherit; font-weight:700; font-size:.98rem; letter-spacing:.04em;
  color:var(--fg); background:var(--bg);
  cursor:pointer; text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow:0 12px 26px -12px rgba(201,82,47,.75);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(201,82,47,.8); }
.btn:active{ transform:translateY(0); }
.btn:focus-visible{ outline:none; box-shadow:var(--ring), 0 12px 26px -12px rgba(201,82,47,.6); }

.btn--coral{ background:linear-gradient(135deg,var(--coral) 0%, var(--coral-deep) 100%); }
.btn--outline{
  background:transparent; color:var(--coral-dark);
  box-shadow:inset 0 0 0 2px var(--coral);
}
.btn--outline:hover{ background:var(--coral); color:#fff; box-shadow:0 14px 28px -14px rgba(201,82,47,.7); }
.btn--sm{ padding:11px 20px; font-size:.86rem; }

/* ---------------------------------------------------------------- header */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(244,238,225,.86);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid rgba(138,71,54,.10);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-block:12px;
}
.site-header__logo img{ width:210px; height:auto; }
.site-header__pill{
  font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--coral-dark);
  background:var(--white); border:1px solid rgba(245,132,102,.34);
  padding:8px 16px; border-radius:999px; white-space:nowrap;
  box-shadow:var(--shadow-sm);
}

/* ---------------------------------------------------------------- hero */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding-block:clamp(26px,4vw,52px) clamp(44px,7vw,80px);
  background:
    radial-gradient(1000px 620px at 82% -8%, rgba(245,132,102,.20), transparent 62%),
    radial-gradient(760px 540px at 6% 108%, rgba(217,180,118,.20), transparent 60%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-3) 100%);
}
.hero__inner{
  display:grid; gap:clamp(30px,4.5vw,58px);
  grid-template-columns:minmax(0,1.06fr) minmax(340px,.94fr);
  align-items:start;
}

.hero__title{
  font-size:clamp(2rem,4.7vw,3.1rem);
  color:var(--brown-deep);
  margin:10px 0 14px;
}
.hero__title-hl{
  display:block; margin-top:.16em;
  font-family:var(--f-serif); font-weight:300; font-style:italic;
  font-size:1.02em; letter-spacing:-.015em;
  color:var(--coral-deep);
}
.hero__subtitle{
  font-size:1.06rem; color:var(--muted); max-width:46ch; margin-bottom:26px;
}
.hero__subtitle strong{ color:var(--brown); }

/* leque de peças recortadas — em pé, lado a lado, com sobreposição.
   (a versão em arco foi trocada por esta a pedido: as peças ficam retas) */
.leque{
  position:relative;
  display:flex; align-items:flex-start;
  height:clamp(200px,23vw,262px);
  margin:18px 0 0;
}
.leque__glow{
  position:absolute; left:2%; right:16%; top:14%; bottom:6%; z-index:0;
  background:radial-gradient(closest-side, rgba(217,180,118,.30), rgba(245,132,102,.14) 58%, transparent 76%);
  filter:blur(12px); pointer-events:none;
}
.leque__pc{
  position:relative;
  width:auto; height:var(--h);
  margin-inline-start:-16%;
  filter:drop-shadow(0 12px 14px rgba(74,37,28,.26)) drop-shadow(0 2px 3px rgba(74,37,28,.18));
  transition:transform .4s cubic-bezier(.2,.8,.25,1);
}
.leque__pc:first-of-type{ margin-inline-start:0; }
/* variação mínima de altura, só para o conjunto não ficar chapado */
.lq1{ --h:96%; z-index:1; }
.lq2{ --h:97%; z-index:2; }
.lq3{ --h:98%; z-index:4; }
.lq4{ --h:98%; z-index:3; }
.lq5{ --h:97%; z-index:2; }
.lq6{ --h:96%; z-index:1; }
/* no hover as peças sobem juntas, de leve */
.leque:hover .leque__pc{ transform:translateY(-7px); }

.leque__badge{
  position:absolute; z-index:8; right:2%; top:-4px;
  display:grid; place-items:center;
  width:84px; height:84px; border-radius:50%;
  background:linear-gradient(140deg,var(--coral) 0%,var(--coral-deep) 100%);
  color:#fff; text-align:center; line-height:1;
  font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  box-shadow:0 14px 26px -12px rgba(201,82,47,.9), 0 0 0 5px rgba(255,255,255,.75);
  transform:rotate(9deg);
}
.leque__badge strong{ font-size:1.06rem; }

.leque__nota{
  display:flex; align-items:flex-start; gap:10px;
  margin:20px 0 24px; padding:12px 15px;
  max-width:52ch;
  background:#FFF6EC; border:1px solid rgba(201,130,31,.32); border-radius:14px;
  font-size:.82rem; line-height:1.5; color:#7A5210; letter-spacing:.01em;
}
.leque__nota strong{ color:#5E3D0B; }
.leque__nota-ico{ flex:0 0 18px; display:grid; place-items:center; margin-top:1px; color:#C9821F; }
.leque__nota-ico svg{ width:18px; height:18px; }

/* benefícios / selo */
.benefits{ display:grid; gap:12px; margin-bottom:20px; }
.benefit{ display:flex; align-items:flex-start; gap:12px; font-size:.98rem; color:var(--muted); }
.benefit strong{ color:var(--brown-deep); }
.benefit__icon{
  flex:0 0 34px; width:34px; height:34px; border-radius:11px;
  display:grid; place-items:center;
  background:var(--coral-soft); color:var(--coral-dark);
}
.benefit__icon svg{ width:19px; height:19px; }

.seal{
  display:inline-flex; align-items:center; gap:11px;
  padding:12px 20px 12px 14px; border-radius:999px;
  background:var(--white); border:1px dashed rgba(245,132,102,.55);
  font-size:.9rem; color:var(--muted); box-shadow:var(--shadow-sm);
}
.seal strong{ color:var(--brown-deep); }
.seal__icon{ display:grid; place-items:center; color:var(--coral-deep); }
.seal__icon svg{ width:21px; height:21px; }

/* enfeites */
.hero__deco{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.spark{
  position:absolute; width:var(--s,18px); height:var(--s,18px);
  background:var(--c,var(--coral));
  clip-path:polygon(50% 0%,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0% 50%,40% 40%);
  opacity:.5; animation:twinkle 4.5s ease-in-out infinite;
}
.spark--a{ left:6%;  top:14%; --s:22px; }
.spark--b{ left:47%; top:6%;  --s:13px; --c:var(--gold); animation-delay:-1.2s; }
.spark--c{ left:88%; top:52%; --s:17px; --c:var(--gold); animation-delay:-2.4s; }
.spark--d{ left:15%; top:78%; --s:14px; animation-delay:-3.1s; }
.spark--e{ left:62%; top:88%; --s:20px; --c:var(--gold); animation-delay:-.6s; }
@keyframes twinkle{
  0%,100%{ transform:scale(.75) rotate(0deg);   opacity:.28; }
  50%    { transform:scale(1.12) rotate(22deg); opacity:.62; }
}
.blob{ position:absolute; border-radius:50%; filter:blur(2px); opacity:.5; }
.blob--a{ left:-70px; top:22%; width:230px; height:230px; background:radial-gradient(circle at 32% 30%, rgba(245,132,102,.36), transparent 68%); }
.blob--b{ right:-90px; bottom:-40px; width:300px; height:300px; background:radial-gradient(circle at 60% 40%, rgba(217,180,118,.38), transparent 68%); }
.ring{ position:absolute; border-radius:50%; border:1.5px solid rgba(245,132,102,.3); }
.ring--a{ left:78%; top:12%; width:150px; height:150px; }
.ring--b{ left:4%;  bottom:6%; width:104px; height:104px; border-color:rgba(217,180,118,.5); }

/* ---------------------------------------------------------------- form */
.hero__form{ position:sticky; top:92px; z-index:20; }
.lead-form,
.lead-success{
  background:var(--white);
  border:1px solid rgba(138,71,54,.10);
  border-radius:var(--radius-lg);
  padding:clamp(20px,2.5vw,27px);
  box-shadow:var(--shadow-lg);
}
.lead-form__title{
  font-size:1.12rem; color:var(--brown-deep); margin-bottom:15px; letter-spacing:-.01em;
}
.hp-field{ position:absolute!important; left:-9999px!important; opacity:0; width:1px; height:1px; }

.field{ margin-bottom:11px; }
.field label{
  display:block; margin-bottom:6px;
  font-size:.82rem; font-weight:600; color:var(--brown);
}
.field input,
.field select{
  width:100%; padding:12px 15px;
  font:inherit; font-size:.98rem; color:var(--ink);
  background:var(--cream-3);
  border:1.5px solid rgba(138,71,54,.16); border-radius:14px;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A4736' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px;
  padding-right:42px;
}
.field input::placeholder{ color:#B4A296; }
.field input:focus,
.field select:focus{
  outline:none; background:var(--white);
  border-color:var(--coral); box-shadow:var(--ring);
}
.field input.is-invalid,
.field select.is-invalid{ border-color:var(--err); background:#FDF3F2; }
.field__error{
  display:none; margin-top:5px; font-size:.79rem; font-weight:600; color:var(--err);
}
.field__error.is-on{ display:block; }

.consent{
  display:flex; align-items:flex-start; gap:11px;
  margin:13px 0 4px; font-size:.84rem; line-height:1.5; color:var(--muted); cursor:pointer;
}
.consent input{
  flex:0 0 20px; width:20px; height:20px; margin:1px 0 0;
  accent-color:var(--coral); cursor:pointer;
}
.consent a{ color:var(--coral-dark); font-weight:600; }

.lead-form__submit{ width:100%; margin-top:14px; font-size:1rem; letter-spacing:.05em; }
.lead-form__note{
  margin:11px 0 0; text-align:center; font-size:.8rem; color:var(--muted);
}
.btn__spinner{
  display:none; width:17px; height:17px; border-radius:50%;
  border:2.4px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:spin .7s linear infinite;
}
.is-loading .btn__label{ opacity:.55; }
.is-loading .btn__spinner{ display:block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.lead-success{ text-align:center; }
.lead-success__check{
  width:66px; height:66px; margin:2px auto 16px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,#37A06B,#2E7D52);
  box-shadow:0 14px 30px -14px rgba(46,125,82,.85);
}
.lead-success__check svg{ width:32px; height:32px; }
.lead-success h2{ font-size:1.4rem; color:var(--brown-deep); margin-bottom:10px; }
.lead-success p{ color:var(--muted); font-size:.98rem; }
/* aviso de modo demonstração (só aparece se SHEETS_ENDPOINT não estiver configurado) */
.demo-aviso{
  margin:16px 0 0; padding:12px 14px;
  border:1.5px dashed #C9821F; border-radius:14px;
  background:#FFF7E6; color:#7A5210;
  font-size:.82rem; line-height:1.5; text-align:left;
}
.demo-aviso strong{ color:#8A4A00; }
.demo-aviso code{
  font-size:.95em; background:rgba(0,0,0,.06); padding:1px 5px; border-radius:5px;
}

.lead-success__how{
  background:var(--cream); border-radius:16px; padding:15px 18px;
  font-size:.9rem; margin:16px 0 20px;
}

/* ---------------------------------------------------------------- regras */
.rules-section{ padding-block:clamp(48px,7vw,80px); background:var(--cream); }
.rules{
  max-width:880px; margin-inline:auto;
  background:var(--white); border-radius:var(--radius-lg);
  border:1px solid rgba(138,71,54,.10);
  border-left:6px solid var(--coral);
  padding:clamp(24px,3.6vw,40px);
  box-shadow:var(--shadow);
}
.rules__title{
  display:flex; align-items:center; gap:10px;
  font-size:clamp(1.2rem,2.6vw,1.6rem); color:var(--brown-deep); margin-bottom:20px;
}
.rules__list{ display:grid; gap:14px; }
.rules__list li{
  position:relative; padding-left:26px;
  font-size:.96rem; color:var(--muted); line-height:1.62;
}
.rules__list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:9px; height:9px; border-radius:50%;
  background:var(--coral); box-shadow:0 0 0 4px rgba(245,132,102,.18);
}
.rules__list strong{ color:var(--brown-deep); }

/* ---------------------------------------------------------------- passos */
.steps{ padding-block:clamp(48px,7vw,84px); background:var(--cream-3); }
.steps__grid{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  counter-reset:s;
}
.step{
  position:relative;
  background:var(--white); border:1px solid rgba(138,71,54,.10);
  border-radius:var(--radius-lg); padding:32px 26px 26px;
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease;
}
.step:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.step__num{
  position:absolute; top:-19px; left:26px;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--f-serif); font-size:1.25rem; font-weight:500; color:#fff;
  background:linear-gradient(135deg,var(--coral),var(--coral-deep));
  box-shadow:0 10px 22px -10px rgba(201,82,47,.9), 0 0 0 5px var(--cream-3);
}
.step__title{ font-size:1.08rem; color:var(--brown-deep); margin:8px 0 8px; }
.step p{ margin:0; font-size:.94rem; color:var(--muted); }
.steps__cta{ margin-top:36px; text-align:center; }

/* ---------------------------------------------------------------- loja */
.store{ padding-block:clamp(48px,7vw,84px); background:var(--cream); }
.store__inner{
  display:grid; gap:clamp(26px,4vw,50px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center;
}
.store__info .section-head__title{ margin:6px 0 16px; }
.store__address{
  font-size:1.06rem; line-height:1.7; color:var(--muted); margin-bottom:20px;
}
.store__address strong{ color:var(--brown-deep); font-size:1.14rem; }
/* referência de localização: é o que as pessoas usam para achar a loja,
   então ganha peso próprio em vez de virar mais uma linha do endereço */
.store__address .store__ref{
  display:inline-block; margin-top:8px;
  font-size:1.02rem; color:var(--coral-dark);
}
.store__points{ display:grid; gap:12px; margin-bottom:26px; }
.store__points li{ display:flex; gap:11px; font-size:.94rem; color:var(--muted); }
.store__points strong{ color:var(--brown-deep); }
.store__ico{ flex:0 0 auto; font-size:1.05rem; line-height:1.5; }

.store__map{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:4/3; background:var(--cream-2);
  border:1px solid rgba(138,71,54,.12); box-shadow:var(--shadow);
}
.store__map iframe{ width:100%; height:100%; border:0; display:block; }
.store__map-btn{
  position:absolute; inset:0; width:100%; height:100%;
  display:grid; place-content:center; gap:4px; text-align:center;
  border:0; cursor:pointer; font:inherit; color:var(--brown-deep);
  background:
    radial-gradient(420px 300px at 50% 40%, rgba(245,132,102,.16), transparent 70%),
    repeating-linear-gradient(45deg, rgba(138,71,54,.05) 0 12px, transparent 12px 24px),
    var(--cream-2);
  transition:background .2s ease;
}
.store__map-btn:hover{ background-color:var(--cream-3); }
.store__map-pin{ font-size:2.2rem; }
.store__map-txt{ font-weight:700; font-size:1.05rem; }
.store__map-sub{ font-size:.83rem; color:var(--muted); max-width:30ch; margin-inline:auto; }

/* ---------------------------------------------------------------- modal mapa */
.map-modal{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:20px; }
.map-modal__backdrop{ position:absolute; inset:0; background:rgba(46,23,16,.62); backdrop-filter:blur(3px); }
.map-modal__dialog{
  position:relative; width:min(760px,100%);
  background:var(--white); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg); animation:pop .22s ease;
}
@keyframes pop{ from{ opacity:0; transform:translateY(12px) scale(.98); } }
.map-modal__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:20px 22px 12px; }
.map-modal__title{ font-size:1.16rem; color:var(--brown-deep); }
.map-modal__addr{ margin:4px 0 0; font-size:.85rem; color:var(--muted); }
.map-modal__close{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
  font-size:1.5rem; line-height:1; color:var(--brown); background:var(--cream);
}
.map-modal__close:hover{ background:var(--coral-soft); }
.map-modal__frame{ height:min(52vh,380px); background:var(--cream-2); }
.map-modal__frame iframe{ width:100%; height:100%; border:0; display:block; }
.map-modal__cta{ display:flex; margin:16px 22px 22px; }

/* ---------------------------------------------------------------- rodapé */
.site-footer{
  padding-block:44px;
  background:linear-gradient(180deg,#3A211A,#2E1710);
  color:#D6C4B8;
}
.site-footer__inner{ display:grid; justify-items:center; gap:18px; text-align:center; }
.site-footer__logo{ width:230px; height:auto; opacity:.97; }
.site-footer__legal{ margin:0; font-size:.82rem; line-height:1.75; color:#B49E92; }
.site-footer__legal a{ color:var(--coral); text-decoration:none; border-bottom:1px solid rgba(245,132,102,.4); }
.site-footer__legal a:hover{ color:var(--coral-soft); }

/* ---------------------------------------------------------------- cookies */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:110;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  max-width:760px; margin-inline:auto;
  background:var(--white); border:1px solid rgba(138,71,54,.14);
  border-radius:20px; padding:16px 20px; box-shadow:var(--shadow-lg);
}
.cookie-banner p{ flex:1 1 340px; margin:0; font-size:.84rem; color:var(--muted); line-height:1.55; }
.cookie-banner strong{ color:var(--brown-deep); }

/* ---------------------------------------------------------------- páginas de texto */
.doc{ max-width:760px; margin-inline:auto; padding-block:clamp(40px,6vw,72px); }
.doc h1{ font-size:clamp(1.7rem,4vw,2.3rem); color:var(--brown-deep); margin-bottom:10px; }
.doc h2{ font-size:1.1rem; color:var(--brown-deep); margin:30px 0 10px; }
.doc p,.doc li{ color:var(--muted); font-size:.96rem; }
.doc ol{ list-style:decimal; padding-left:22px; display:grid; gap:10px; }
.doc__back{ display:inline-block; margin-bottom:22px; font-weight:600; text-decoration:none; }

/* ---------------------------------------------------------------- responsivo */
@media (max-width:1120px){
  .leque__pc{ margin-inline-start:-17%; }  /* coluna encolhe: fecha mais o leque */
}

@media (max-width:980px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__form{ position:static; }
  .store__inner{ grid-template-columns:1fr; }

}
@media (max-width:640px){
  body{ font-size:16px; }
  .site-header__logo img{ width:168px; }
  .site-header__pill{ display:none; }
  .hero{ padding-top:26px; }
  .leque{ height:200px; }   /* peças agora ocupam ~98% da altura: 250px estourava a coluna */
  .leque__pc{ margin-inline-start:-20%; filter:drop-shadow(0 9px 11px rgba(74,37,28,.24)); }
  .lq6{ display:none; }         /* 5 peças cabem em 390px */
  .leque__badge{ right:-4px; top:-8px; width:66px; height:66px; }
  .leque__badge strong{ font-size:.84rem; }
  .leque__nota{ font-size:.72rem; }
  .cookie-banner{ flex-direction:column; align-items:stretch; text-align:center; }
  .cookie-banner p{ flex:0 1 auto; } /* em coluna, o flex-basis viraria altura */
}

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