/* ============================================================
   THE MASTERCARD COLLECTION — QUIZ CAFÉ
   Dois leiautes reproduzidos dos arquivos originais:
     retrato  → 1080 x 1920  (pasta VERTICAL)
     paisagem → 1920 x 1080  (pasta HORIZONTAL)
   Todas as medidas estão em "pixels de projeto" e vieram dos PSDs
   (caixas de texto, corpos de fonte e entrelinhas) ou da medição
   pixel a pixel dos PNGs achatados (cartões, botões, trilho).
   ============================================================ */

/* ---------- Tipografia ----------------------------------------------------
   A fonte institucional é a Mark Pro (MarkOffcPro nos PSDs), licenciada
   pela Mastercard. Se estiver instalada na máquina do evento é usada
   automaticamente. Caso contrário entra a Poppins, empacotada localmente.
-------------------------------------------------------------------------- */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:block;
  src:url(../assets/fonts/poppins-400-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:block;
  src:url(../assets/fonts/poppins-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:block;
  src:url(../assets/fonts/poppins-500-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:block;
  src:url(../assets/fonts/poppins-500-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:block;
  src:url(../assets/fonts/poppins-600-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:block;
  src:url(../assets/fonts/poppins-600-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:block;
  src:url(../assets/fonts/poppins-700-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:block;
  src:url(../assets/fonts/poppins-700-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --preto:#000;
  --branco:#fff;
  --mc-vermelho:#EB001B;
  --mc-laranja:#FF5F00;      /* rgb(255,95,0) — confirmado nos PSDs */
  --mc-ambar:#F79E1B;
  --acento:#F0491B;
  --dourado:#F79E1B;

  --mc-degrade:      linear-gradient(90deg,#EB001B 0%,#F79E1B 100%);
  --mc-degrade-diag: linear-gradient(135deg,#EB001B 0%,#F79E1B 100%);
  --mc-degrade-pill: linear-gradient(90deg,#EB001B 0%,#FF5F00 50%,#F79E1B 100%);

  --card-topo:#141414;
  --card-base:#050505;
  --card-borda:linear-gradient(90deg,#373737 0%,#2E2E2E 100%);
  --trilho:#333;
  --ghost-borda:#8C8C8C;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

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

html,body{
  width:100%;height:100%;overflow:hidden;background:var(--preto);
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
body{
  position:fixed;inset:0;
  font-family:"Mark Pro","MarkOffcPro","MarkPro","FF Mark",Poppins,"Segoe UI",system-ui,sans-serif;
  color:var(--branco);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  cursor:default;
}

img{-webkit-user-drag:none;user-select:none;pointer-events:none;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}

/* ============================================================
   PALCO E PRANCHETA
   ------------------------------------------------------------
   O palco é a viewport inteira e é ele quem recorta. A prancheta
   fica centralizada e é escalada para CABER — nenhum texto ou
   botão é cortado em nenhuma proporção de tela.
   ============================================================ */
.stage{
  position:fixed;inset:0;
  background:var(--preto);
  overflow:hidden;
  /* `none` e não `manipulation`: com manipulation o navegador ainda
     espera para ver se dois dedos são uma pinça e, nesse caso, não
     gera clique nenhum — quem apoiasse a mão na tela travava o quiz. */
  touch-action:none;
}

.canvas{
  position:absolute;left:50%;top:50%;
  width:1080px;height:1920px;
  transform:translate(-50%,-50%) scale(var(--scale,1));
  transform-origin:center center;
  overflow:visible;          /* quem recorta é o palco, não a prancheta */
  perspective:1600px;
}
.stage[data-orient="landscape"] .canvas{width:1920px;height:1080px}

.screen{position:absolute;inset:0;background:transparent}
.screen[hidden]{display:none}

/* Fundo preto atrás de tudo, cobrindo a viewport inteira mesmo
   quando a prancheta é menor que a tela. */
.stage::before{content:'';position:absolute;inset:0;background:var(--preto);z-index:-1}

/* ------------------------------------------------------------
   A CAMADA DE ARTE
   ------------------------------------------------------------
   `--art-boost` é a razão cobrir/caber, calculada no JS. A caixa
   da arte tem o tamanho da prancheta e cresce a partir do centro,
   de modo que o key visual chega às bordas do tablet em qualquer
   proporção — é isso que elimina as tarjas pretas. Numa tela 9:16
   (ou 16:9) o valor é 1 e a arte fica exatamente como no arquivo.
------------------------------------------------------------ */
.artbox{
  position:absolute;inset:0;
  transform:scale(var(--art-boost,1));
  transform-origin:center center;
  pointer-events:none;
}
.kv{position:absolute}

/* ---------- Alternância retrato / paisagem ------------------------------ */
.kv--l,.selo--l,.mc--l,.so-l{display:none}
.stage[data-orient="landscape"] .kv--p,
.stage[data-orient="landscape"] .selo--p,
.stage[data-orient="landscape"] .mc--p,
.stage[data-orient="landscape"] .so-p{display:none}
.stage[data-orient="landscape"] .kv--l,
.stage[data-orient="landscape"] .selo--l,
.stage[data-orient="landscape"] .mc--l{display:block}
.stage[data-orient="landscape"] .so-l{display:inline}

/* véu de carregamento */
.boot{position:fixed;inset:0;background:var(--preto);z-index:99;transition:opacity .5s ease}
.boot.is-ready{opacity:0;pointer-events:none}

.selo{position:absolute}
.mc{position:absolute}

/* ---------- Botões ------------------------------------------------------- */
.btn{
  position:absolute;display:flex;align-items:center;justify-content:center;
  text-transform:uppercase;
  transition:transform .18s var(--ease),filter .18s var(--ease),border-color .18s var(--ease);
}
.btn span{display:block;position:relative;z-index:1}

/* Área de toque maior que o desenho, sem mudar nada visualmente.
   No tablet a prancheta é reduzida e os botões menores cairiam
   abaixo do mínimo confortável de 44px reais. */
.btn::after{content:'';position:absolute;inset:-20px -14px;border-radius:inherit}

.btn--solid{background:var(--mc-degrade-pill);color:var(--preto)}
.btn--ghost{color:var(--branco)}
.btn:active{transform:scale(.965)}
.btn--solid:active{filter:brightness(1.08)}
.btn--ghost:active{border-color:var(--branco)}

/* ============================================================
   ============  L E I A U T E   R E T R A T O  ================
   base 1080 x 1920 — pasta VERTICAL
   ============================================================ */

/* ---- 01 abertura ---- */
.kv--abertura-p{left:-256px;top:459px;width:1592px;height:1717px}
.selo--abertura-p{left:361px;top:718px;width:359px;height:366px}

.tit-abertura{
  position:absolute;left:0;top:1192.35px;width:1080px;
  font-size:59px;line-height:70px;font-weight:700;letter-spacing:-.005em;
  text-align:center;
}
.btn--abertura{
  left:293px;top:1424px;width:494px;height:96px;border-radius:48px;
  font-size:26px;font-weight:600;letter-spacing:.20em;text-indent:.20em;
}

/* ---- 02 como funciona ---- */
.kv--intro-p{left:783px;top:-256px;width:553px;height:1261px}
.selo--intro-p{left:361px;top:109px;width:359px;height:366px}

.tit-intro{
  position:absolute;left:0;top:891.65px;width:1080px;
  font-size:41px;line-height:54px;font-weight:700;letter-spacing:-.004em;
  text-align:center;
}
.txt-intro{
  position:absolute;left:0;top:1179.7px;width:1080px;
  font-size:26.5px;line-height:42px;font-weight:400;
  text-align:center;
}
.btn--intro{
  left:381px;top:1460px;width:318px;height:100px;border-radius:50px;
  border:2px solid var(--ghost-borda);
  font-size:26px;font-weight:600;letter-spacing:.20em;text-indent:.20em;
}

/* ---- 03–06 perguntas ---- */
.kv--quiz-p{left:-256px;top:-148px;width:1592px;height:2324px}
.selo--quiz-p{left:421px;top:109px;width:235px;height:240px}

.progress{
  position:absolute;left:0;top:478px;width:1080px;height:6px;
  display:flex;justify-content:center;gap:12px;
}
.progress i{
  display:block;width:40px;height:6px;border-radius:3px;
  background:var(--trilho);
  transition:background-color .45s var(--ease);
}
.progress i.is-on{background:var(--mc-degrade)}

.counter{
  position:absolute;left:0;top:506.6px;width:1080px;
  font-size:24px;line-height:24px;font-weight:600;letter-spacing:.22em;text-indent:.22em;
  text-transform:uppercase;text-align:center;
}
.tit-quiz{
  position:absolute;left:0;top:624.6px;width:1080px;
  font-size:54px;line-height:65px;font-weight:700;letter-spacing:-.028em;
  text-align:center;
}

.answers{position:absolute;left:96px;top:880px;width:888px;height:767px;transform-style:preserve-3d}

/* O cartão tem dois degradês próprios, ambos amostrados do original:
   o preenchimento cai de #141414 para #050505 num eixo levemente
   inclinado (122,5°), e a borda de 1px cai de #373737 para #2E2E2E na
   horizontal — por isso ela é pintada como camada em `border-box`,
   e não com `border-color`, que só aceita cor chapada. */
.answer{
  position:absolute;left:0;width:888px;height:236px;
  border:1px solid transparent;border-radius:26px;
  background:
    linear-gradient(122.5deg,var(--card-topo) 0%,var(--card-base) 100%) padding-box,
    var(--card-borda) border-box;
  text-align:left;
  transition:transform .22s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
  will-change:transform,opacity;
}
.answer:nth-child(1){top:0}
.answer:nth-child(2){top:266px}
.answer:nth-child(3){top:532px}

.answer__badge{
  position:absolute;left:44px;top:82px;width:70px;height:70px;border-radius:50%;
  background:var(--mc-degrade-diag);
  color:var(--preto);
  display:flex;align-items:center;justify-content:center;
  font-size:29.5px;font-weight:700;line-height:1;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease);
}
/* No retrato o texto fica centralizado na vertical, com o badge caindo
   entre as duas linhas — é assim nos cartões já acertados do arquivo
   original. O -1.4px reposiciona a caixa de linha para a tinta ficar
   no centro exato. */
.answer__text{
  position:absolute;left:147.5px;right:40px;top:0;bottom:0;
  display:flex;flex-direction:column;justify-content:center;
  transform:translateY(-1.4px);
  font-size:34px;line-height:41px;font-weight:500;letter-spacing:-.026em;
}

.answer:active{transform:scale(.987)}
.answer.is-picked{
  border-color:var(--acento);
  box-shadow:0 0 0 1px rgba(240,73,27,.55),0 18px 60px -24px rgba(247,158,27,.55);
}
.answer.is-picked .answer__badge{transform:scale(1.12);box-shadow:0 0 0 10px rgba(240,73,27,.16)}
.answer.is-dimmed{opacity:.28}

/* ---- 07 resultado ---- */
.kv--result-p{left:-256px;top:-256px;width:1408px;height:1260px}
.selo--result-p{left:421px;top:109px;width:235px;height:240px}

.result-head{
  position:absolute;left:0;width:1080px;text-align:center;
  top:var(--head-top,1085.2px);
}
.result-eyebrow{
  font-size:24.5px;line-height:24.5px;
  font-weight:600;letter-spacing:.243em;text-indent:.243em;
  text-transform:uppercase;color:var(--mc-laranja);
}
.result-title{
  margin-top:var(--title-gap,23.5px);
  font-size:var(--title-size,88px);line-height:var(--title-line,88px);
  font-weight:700;letter-spacing:-.01em;text-transform:uppercase;
}
/* degradê branco → dourado, reiniciado a cada linha (como no original) */
.result-title b{
  display:block;font-weight:inherit;
  background:linear-gradient(90deg,#fff 0%,var(--dourado) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  width:max-content;max-width:100%;margin-inline:auto;
}
.result-desc{
  position:absolute;left:0;top:1245.36px;width:1080px;
  font-size:24.7px;line-height:36px;font-weight:400;text-align:center;
}
.result-rule{
  position:absolute;left:480px;top:var(--rule-top,1356px);width:120px;height:3px;
  background:var(--mc-degrade);transform-origin:center;
}
.result-drink{
  position:absolute;left:0;top:1403.15px;width:1080px;
  font-size:21px;line-height:21px;font-weight:600;letter-spacing:-.020em;text-align:center;
}
.result-recipe{
  position:absolute;left:0;top:1482.34px;width:1080px;
  font-size:19.6px;line-height:19.6px;font-weight:400;text-align:center;
}
.btn--result{
  left:326px;top:1558px;width:428px;height:62px;border-radius:31px;
  border:1px solid #383838;
  font-size:22px;font-weight:500;letter-spacing:.134em;text-indent:.134em;
}

/* ---- 08 encerramento ---- */
.kv--end-p{left:-256px;top:-256px;width:1592px;height:923px}
.selo--end-p{left:361px;top:0;width:359px;height:366px}

.tit-end{
  position:absolute;left:0;top:855.85px;width:1080px;
  font-size:53px;line-height:58px;font-weight:700;letter-spacing:-.004em;
  text-align:center;
}
.txt-end{position:absolute;left:0;width:1080px;text-align:center;font-weight:400}
.txt-end--1{top:1001.2px;font-size:30.1px;line-height:43.5px}
.txt-end--2{top:1240.7px;font-size:26.5px;line-height:40px}

.tagline-end{
  position:absolute;left:0;top:1469.18px;width:1080px;
  font-size:24.5px;line-height:24.5px;font-weight:600;letter-spacing:.226em;text-indent:.226em;
  text-transform:uppercase;color:var(--mc-laranja);text-align:center;
}

.mc--p{left:427px;top:1770px;width:226px;height:46px}

/* ============================================================
   ==========  L E I A U T E   P A I S A G E M  ================
   base 1920 x 1080 — pasta HORIZONTAL
   Corpos de fonte e entrelinhas vieram direto dos PSDs; caixas de
   cartão, trilho e botões, da medição dos PNGs.
   ============================================================ */
.stage[data-orient="landscape"]{
  --lay-esq:914px;         /* margem do bloco de texto do resultado */
}

/* ---- 01 abertura ---- */
.kv--abertura-l{left:-15px;top:-73px;width:1935px;height:1409px}
.selo--abertura-l{left:781px;top:119px;width:359px;height:366px}

/* Os corpos de fonte abaixo são os do PSD corrigidos para a Poppins,
   que desenha mais largo que a Mark Pro: o alvo é a LARGURA DA TINTA
   de cada bloco no arquivo original, não o número nominal. Onde a
   Mark Pro estiver instalada, o desenho fica ainda mais próximo. */
.stage[data-orient="landscape"] .tit-abertura{
  left:0;top:597px;width:1920px;
  font-size:70.8px;line-height:84px;letter-spacing:-.0031em;
}
.stage[data-orient="landscape"] .btn--abertura{
  left:678px;top:796px;width:564px;height:104px;border-radius:52px;
  font-size:30px;letter-spacing:.16em;text-indent:.16em;
}

/* ---- 02 como funciona ---- */
.kv--intro-l{left:1538px;top:-256px;width:638px;height:1145px}
.selo--intro-l{left:175px;top:211px;width:390px;height:396px}

.stage[data-orient="landscape"] .tit-intro{
  left:625px;top:196.5px;width:1180px;
  font-size:64px;line-height:80.52px;letter-spacing:-.003em;
  text-align:left;
}
.stage[data-orient="landscape"] .txt-intro{
  left:625px;top:571px;width:980px;
  font-size:35.4px;line-height:46.36px;
  text-align:left;
}
.stage[data-orient="landscape"] .btn--intro{
  left:655px;top:780px;width:359px;height:95px;border-radius:47.5px;
  font-size:30px;letter-spacing:.16em;text-indent:.16em;
}

/* ---- 03–06 perguntas ---- */
.kv--quiz-l{left:-256px;top:-256px;width:2302px;height:1592px}
.selo--quiz-l{left:110px;top:78px;width:220px;height:224px}

.stage[data-orient="landscape"] .progress{
  left:0;top:215px;width:1920px;height:6px;gap:14px;
}
.stage[data-orient="landscape"] .progress i{width:46px}

.stage[data-orient="landscape"] .counter{
  left:0;top:244.6px;width:1920px;
  letter-spacing:.295em;text-indent:.295em;
}
.stage[data-orient="landscape"] .tit-quiz{
  left:6px;top:329.6px;width:1920px;
  font-size:61.3px;line-height:80.52px;letter-spacing:-.0303em;
}

.stage[data-orient="landscape"] .answers{
  left:110px;top:547px;width:1700px;height:328px;
}
.stage[data-orient="landscape"] .answer{width:543px;height:328px}
.stage[data-orient="landscape"] .answer:nth-child(1){left:0;top:0}
.stage[data-orient="landscape"] .answer:nth-child(2){left:578.5px;top:0}
.stage[data-orient="landscape"] .answer:nth-child(3){left:1157px;top:0}

.stage[data-orient="landscape"] .answer__badge{
  left:49px;top:49px;width:76px;height:76px;font-size:32px;
}
/* Na paisagem o texto é ancorado no topo, logo abaixo do badge —
   o número de linhas muda de alternativa para alternativa e no
   original todas começam na mesma altura. */
.stage[data-orient="landscape"] .answer__text{
  left:48px;right:30px;top:157.5px;bottom:auto;
  display:block;transform:none;
  font-size:34.9px;line-height:43.92px;letter-spacing:-.004em;
}

/* ---- 07 resultado ---- */
.kv--result-l{left:-174px;top:-256px;width:2350px;height:1592px}
.selo--result-l{left:265px;top:342px;width:390px;height:396px}

.stage[data-orient="landscape"] .result-head{
  left:var(--lay-esq);top:var(--head-top-l,215px);width:1000px;text-align:left;
}
.stage[data-orient="landscape"] .result-eyebrow{
  font-size:24px;line-height:24px;letter-spacing:.339em;text-indent:0;
}
.stage[data-orient="landscape"] .result-title{
  margin-top:var(--title-gap-l,36px);
  font-size:calc(var(--title-size-l,96px) * 1.051);
  line-height:var(--title-line-l,115.2px);
  letter-spacing:0;
}
.stage[data-orient="landscape"] .result-title b{margin-inline:0}

.stage[data-orient="landscape"] .result-desc{
  left:var(--lay-esq);top:var(--desc-top-l,393px);width:1000px;
  font-size:32.5px;line-height:41.48px;text-align:left;
}
.stage[data-orient="landscape"] .result-rule{
  left:var(--lay-esq);top:var(--rule-top-l,539px);width:120px;height:3px;
}
.stage[data-orient="landscape"] .result-drink{
  left:var(--lay-esq);top:var(--claim-top-l,568.5px);width:1000px;
  font-size:27px;line-height:34.16px;letter-spacing:0;text-align:left;
}
.stage[data-orient="landscape"] .result-recipe{
  left:var(--lay-esq);top:var(--assin-top-l,655px);width:1000px;
  font-size:26px;line-height:32.94px;letter-spacing:.04em;text-align:left;
}
.stage[data-orient="landscape"] .btn--result{
  left:914px;top:var(--btn-top-l,800px);width:478px;height:68px;border-radius:34px;
  font-size:24px;letter-spacing:.12em;text-indent:.12em;
}

/* ---- 08 encerramento ---- */
.kv--end-l{left:-183px;top:-256px;width:2359px;height:1592px}
.selo--end-l{left:175px;top:211px;width:390px;height:396px}

.stage[data-orient="landscape"] .tit-end{
  left:625px;top:216.5px;width:1100px;
  font-size:60.2px;line-height:79px;letter-spacing:-.003em;text-align:left;
}
.stage[data-orient="landscape"] .txt-end{left:625px;width:1100px;text-align:left}
.stage[data-orient="landscape"] .txt-end--1{top:370.5px;font-size:36px;line-height:47px}
.stage[data-orient="landscape"] .txt-end--2{top:580.5px;font-size:35.7px;line-height:47px}
.stage[data-orient="landscape"] .tagline-end{
  left:625px;top:766.5px;width:1200px;
  font-size:24px;line-height:24px;letter-spacing:.341em;text-indent:0;
  text-align:left;
}

.mc--l{left:1574px;top:956px;width:248px;height:52px}

/* ---------- Acessibilidade / preferências -------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}