/* ======================================================================
   Styly zdielaneho editora tagov.

   Selektory su viazane na .qwick-surface, nie na konkretny modul.
   Tuto triedu nesie plocha QWICK MOVES aj koren kazdeho modulu, ktory si
   editor vytvori -- specificita zostava rovnaka ako predtym (jedna trieda),
   takze poradie v kaskade sa nemeni.
   ====================================================================== */
/* ======================================================================
   09. MENU-SHEET
   Qwick menu: mriezka tagov, strankovanie, akcie

   Poradie suborov v index.html je zavazne -- kaskada od neho zavisi.
   Tento subor obsahuje povodne sekcie 35-35.
   ====================================================================== */

/* ======================================================================
   35. [HOME/QWICK]  qwick-menu-sheet
   Moves Tags sheet: menu copy, tag chain, type buttons, tag
   creation form
   ====================================================================== */
/* The sheet body itself is only a spacer now. Everything visible lives in
   .tag-editor-layer, a sibling of the sheet, so the chain can physically reach both
   screen edges and no surface with overflow can ever clip a pressed pill. */
.qwick-surface .tag-editor-overlay .tag-editor-sheet-body{
  flex:1 1 auto;
  min-height:0;
  pointer-events:none;
}
.qwick-surface .tag-editor-overlay .tag-editor-sheet-body[hidden]{display:none;}

/* ---- geometry ---------------------------------------------------------
   Every vertical measurement below is derived from the dashboard's own
   qwick-add stack, so the type buttons land on the exact same pixels they
   occupy after pressing + on the dashboard:
     type row bottom : safe-area + 31px, 70px tall  (identical to .fab-choice)
     chain           : 44px, 10px above the type row
     menu grid       : 12px above the chain, bottom-anchored 70px rows      */
.qwick-surface .tag-editor-layer{
  --tag-editor-choice-gap:calc((100vw - 296px)/3);
  --tag-editor-type-bottom:calc(env(safe-area-inset-bottom,0px) + 31px);
  /* Clear breathing room between the type buttons and the chain. */
  --tag-editor-chain-bottom:calc(var(--tag-editor-type-bottom) + 70px + 26px);
  /* The editable menu sits directly below the normal title; there is no
     dedicated header band anymore. */
  --tag-editor-top:64px;
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:var(--qwick-fade-out),visibility 0s linear var(--qwick-fade-out-time);
}
.qwick-surface .tag-editor-overlay.tag-editor-view .tag-editor-layer{
  opacity:1;
  visibility:visible;
  transition:var(--qwick-fade-in),visibility 0s linear 0s;
}

/* ---- type buttons ----------------------------------------------------- */
.qwick-surface .tag-editor-type-row{
  position:absolute;
  left:50%;
  bottom:var(--tag-editor-type-bottom);
  transform:translateX(-50%);
  display:flex;
  gap:var(--tag-editor-choice-gap);
  pointer-events:auto;
}
.qwick-surface .tag-editor-type{
  height:70px;
  width:148px;
  padding:0 19px;
  border-radius:999px;
  font-weight:800;
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  box-sizing:border-box;
  transform-origin:center center;
  transform:translateZ(0) scale(1);
  transition:transform .32s cubic-bezier(.22,1,.36,1),filter .15s ease;
  will-change:transform;
  position:relative;
}
.qwick-surface .tag-editor-layer.tag-editor-has-type .tag-editor-type:not(.is-plus){transform:translateZ(0) scale(.75);}
.qwick-surface .tag-editor-type-exp{
  color:var(--danger);
}
.qwick-surface .tag-editor-type-inc{
  color:var(--mint);
}
/* MINUS a PLUS maju svoje dve pevne varianty vyssie a nemenia sa. Pre kazdy
   dalsi par prepinacov na tom istom mieste (QWICK TRIPS ma tam KLIENT
   a RULES) je tu jedna receptura: rovnaka geometria, rovnaky prechod,
   rovnaky pohyb -- meni sa iba --tag-editor-type-color. Modul si tak
   nemusi stavat vlastnu farebnu variantu. */
.qwick-surface .tag-editor-type-tinted{
  color:var(--tag-editor-type-color,var(--accent));
}
/* Active type keeps its own colour and only swaps its label for +. The glyph
   is drawn rather than typed so it matches the dashboard + exactly. */
.qwick-surface .tag-editor-type .tag-editor-type-label{
  display:block;
  line-height:1;
  transition:var(--qwick-fade-in);
}
.qwick-surface .tag-editor-type.is-plus .tag-editor-type-label{opacity:0;transition:var(--qwick-fade-out);}
/* Explicit centring: an abspos child of a flex container must never rely on
   its flex static position, or the two bars of + drift per engine. */
.qwick-surface .tag-editor-type::before,
.qwick-surface .tag-editor-type::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:24px;
  height:3px;
  border-radius:999px;
  background:currentColor;
  opacity:0;
  transform:translate(-50%,-50%);
  transition:var(--qwick-fade-out);
}
.qwick-surface .tag-editor-type::after{transform:translate(-50%,-50%) rotate(90deg);}

/* ---- tag chain ---------------------------------------------------
   Same contract as the New Ride address carousel: native centre snapping,
   computed leading/trailing spacers so the first and last pill can both rest
   dead centre, and 6px of transparent room above the pills so the global
   press-up scale is never clipped by the scrollport. */
.qwick-surface .tag-editor-chain-band{
  position:absolute;
  left:0;
  right:0;
  bottom:var(--tag-editor-chain-bottom);
  height:var(--tag-editor-chain-h);
  pointer-events:auto;
}
.qwick-surface .tag-editor-chain{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:calc(100% + 6px);
  padding-top:6px;
  box-sizing:border-box;
  display:flex;
  align-items:flex-end;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  touch-action:pan-x;
  padding-left:calc(var(--tag-editor-chain-pad-start,0px) + env(safe-area-inset-left,0px));
  padding-right:calc(var(--tag-editor-chain-pad-end,0px) + env(safe-area-inset-right,0px));
}
.qwick-surface .tag-editor-chain::-webkit-scrollbar{display:none;}
.qwick-surface .tag-editor-chain.tag-editor-chain-reflowing{scroll-snap-type:none;}
.qwick-surface .tag-editor-chain.tag-editor-chain-dragging{scroll-snap-type:none;touch-action:none;}
/* The gap that opens between two pills while a tag is dragged into the
   chain. Width is animated, so the neighbours physically slide aside. */
.qwick-surface .tag-editor-chain-gap{
  flex:0 0 auto;
  height:var(--tag-editor-chain-h);
  width:0;
  transition:width .18s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
/* The vacated slot is not a fixed hole: while an exchanged tag is flying
   into it, the gap grows (or shrinks) to the width that tag really needs,
   on the same curve and duration as the flight. The neighbours therefore slide
   aside during the arrival instead of being overlapped on landing. */
.qwick-surface .tag-editor-chain-gap.tag-editor-chain-gap-arriving{
  transition:width .34s cubic-bezier(.22,1,.36,1);
}

/* ---- menu grid -------------------------------------------------------- */
.qwick-surface .tag-editor-host{
  position:absolute;
  left:0;
  right:0;
  top:var(--tag-editor-top);
  pointer-events:auto;
  touch-action:none;
}
.qwick-surface .tag-editor{
  position:relative;
  left:50%;
  transform:translateX(-50%);
  width:calc(296px + var(--tag-editor-choice-gap));
  display:grid;
  grid-template-columns:148px 148px;
  grid-template-rows:repeat(4,70px);
  column-gap:var(--tag-editor-choice-gap);
  row-gap:12px;
  align-content:end;
}

/* Page entrance/exit: identical language to the dashboard qwick menu — the
   outgoing page shrinks and fades while the incoming page grows and fades in
   on the same frames. */
@keyframes tag-editor-page-out{
  from{opacity:1;transform:translate3d(0,0,0) scale(1);}
  to{opacity:0;transform:translate3d(0,0,0) scale(.1);}
}
@keyframes tag-editor-page-in{
  from{opacity:0;transform:translate3d(0,0,0) scale(.1);}
  to{opacity:1;transform:translate3d(0,0,0) scale(1);}
}
.qwick-surface .tag-editor-page-ghost{
  position:absolute;
  margin:0;
  pointer-events:none;
  animation:tag-editor-page-out .28s cubic-bezier(.32,.72,.35,1) both;
}
.qwick-surface .tag-editor-type-ghost{
  position:fixed;
  margin:0;
  pointer-events:none;
  opacity:1;
  transition:var(--qwick-fade-out);
}
.qwick-surface .tag-editor-type-ghost.tag-editor-fading{opacity:0;}
.qwick-surface .tag-editor-page-dots{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-20px;
  display:flex;
  gap:6px;
  pointer-events:none;
}
.qwick-surface .tag-editor-page-dot{
  width:6px;height:6px;border-radius:999px;
  background:var(--muted);opacity:.32;
  transition:opacity .2s ease,background .2s ease;
}
.qwick-surface .tag-editor-page-dot.active{background:var(--accent);opacity:1;}

.qwick-surface .tag-editor-guide{
  position:absolute;
  left:50%;
  top:42%;
  width:min(78vw,330px);
  transform:translate(-50%,-50%);
  text-align:center;
  color:var(--muted);
  font-size:14px;
  font-weight:720;
  line-height:1.45;
  letter-spacing:-.1px;
  opacity:.72;
  pointer-events:none;
  transition:var(--qwick-fade-in),transform .24s cubic-bezier(.22,1,.36,1);
}
.qwick-surface .tag-editor-layer.tag-editor-has-type .tag-editor-guide{opacity:0;transform:translate(-50%,-50%) scale(.96);transition:var(--qwick-fade-out),transform .24s cubic-bezier(.22,1,.36,1);}

/* ---- tag actions -------------------------------------------------
   These are deliberate drop targets, not ordinary tap actions. The carried
   TAG BODY has to overlap a target and dwell briefly before it arms, so
   activation follows the pill itself without making a passing drag dangerous. */
.qwick-surface .tag-editor-action-row{
  position:absolute;
  left:0;
  right:0;
  top:calc(var(--tag-editor-top) + 340px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  box-sizing:border-box;
  pointer-events:none;
  opacity:0;
  transition:var(--qwick-fade-out);
}
.qwick-surface .tag-editor-layer.tag-editor-has-type .tag-editor-action-row{opacity:1;transition:var(--qwick-fade-in);}
.qwick-surface .tag-editor-action-help{
  flex:1 1 auto;
  max-width:190px;
  padding:0 10px;
  text-align:center;
  color:var(--muted);
  font-size:11.5px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:-.08px;
  opacity:.68;
  pointer-events:none;
}
.qwick-surface .tag-editor-action{
  width:56px;height:56px;border-radius:50%;padding:0;box-sizing:border-box;
  display:grid;place-items:center;pointer-events:none;
  color:var(--tag-editor-action-color);
  -webkit-tap-highlight-color:transparent;
  transition:transform .18s cubic-bezier(.22,1,.36,1),filter .18s ease,box-shadow .18s ease;
}
.qwick-surface .tag-editor-action svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;}
.qwick-surface .tag-editor-action-edit{--tag-editor-action-color:#2f8cff;}
.qwick-surface .tag-editor-action-delete{--tag-editor-action-color:#ff334d;}
.qwick-surface .tag-editor-action.tag-editor-action-hover{transform:scale(1.08);filter:brightness(1.08);}
.qwick-surface .tag-editor-action.tag-editor-action-armed{
  transform:scale(1.14);
  filter:brightness(1.16);
}

/* ---- drag ------------------------------------------------------------- */
/* The slot marker is written straight to its coordinates. Transitioning its
   position is what made it trail behind the finger. */
.qwick-surface .tag-editor-drop-hint{
  position:fixed;
  border-radius:999px;
  border:1.5px dashed var(--accent2);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  pointer-events:none;
  z-index:8;
  opacity:0;
  transition:var(--qwick-fade-out);
}
.qwick-surface .tag-editor-drop-hint.visible{opacity:1;transition:var(--qwick-fade-in);}
.qwick-surface .tag-editor-drag-layer{
  position:absolute;
  inset:0;
  z-index:9;
  pointer-events:none;
}
/* One carried element that morphs between the two sizes it can land in.
   Position is a transform written per animation frame, so tracking never
   waits on layout; only the size and type change are transitioned. */
.qwick-surface .tag-editor-ghost{
  position:fixed;
  left:0;
  top:0;
  margin:0;
  pointer-events:none;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-sizing:border-box;
  border-radius:999px;
  font-weight:800;
  /* Farbu, okraj a vypln nesie zdielana .qwick-tag-pill. */
  transform-origin:center center;
  transition:width .18s cubic-bezier(.22,1,.36,1),
             height .18s cubic-bezier(.22,1,.36,1),
             font-size .18s cubic-bezier(.22,1,.36,1),
             padding .18s cubic-bezier(.22,1,.36,1);
  will-change:transform,width,height;
}
.qwick-surface .tag-editor-ghost.mode-menu{font-size:18px;padding:0 19px;}
.qwick-surface .tag-editor-ghost.mode-chain{font-size:14px;padding:0 16px;}
.qwick-surface .tag-editor-ghost-name{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.1;
}
/* Only the fly-back adds a transform transition; during the drag itself the
   transform must stay instantaneous. */
.qwick-surface .tag-editor-ghost.tag-editor-ghost-returning{
  transition:transform .2s cubic-bezier(.22,1,.36,1),
             width .2s cubic-bezier(.22,1,.36,1),
             height .2s cubic-bezier(.22,1,.36,1),
             font-size .2s ease,padding .2s ease,opacity .2s ease;
}
/* Qwick trash motion has one coordinate system only: the element is first
   pinned to its current viewport rect, then left/top move to the REAL current
   centre of the trash button while transform only shrinks it. No rotation is
   used here. Route Log address deletion keeps qwick-action-spin-away. */
.qwick-surface .tag-editor-trash-flight{
  animation:none;
  transition:left .42s cubic-bezier(.22,.74,.28,1),
             top .42s cubic-bezier(.22,.74,.28,1),
             transform .42s cubic-bezier(.22,.74,.28,1),
             opacity .30s ease-out .06s;
  will-change:left,top,transform,opacity;
}
.qwick-surface .tag-editor-ghost.tag-editor-ghost-settling{
  transition:transform .34s cubic-bezier(.22,1,.36,1),width .34s cubic-bezier(.22,1,.36,1),height .34s cubic-bezier(.22,1,.36,1),font-size .34s ease,padding .34s ease;
}
.qwick-surface .tag-editor-exchange-flight{
  position:fixed;left:0;top:0;margin:0;z-index:11;pointer-events:none;
  display:flex;align-items:center;justify-content:center;overflow:visible;box-sizing:border-box;
  border-radius:999px;font-weight:800;
  /* Farbu, okraj a vypln nesie zdielana .qwick-tag-pill. */
  will-change:transform,width,height,font-size,padding,opacity;
  transition:transform .34s cubic-bezier(.22,1,.36,1),width .34s cubic-bezier(.22,1,.36,1),height .34s cubic-bezier(.22,1,.36,1),font-size .34s ease,padding .34s ease,opacity .2s ease .14s;
}
.qwick-surface .tag-editor-create-flight{
  position:fixed;left:0;top:0;margin:0;z-index:1000;pointer-events:none;
  display:flex;align-items:center;justify-content:center;overflow:visible;box-sizing:border-box;
  border-radius:999px;font-weight:800;
  /* Výplň a okraj nesie spoločný materiál; horná hrana aj odlesk sú zrušené. */
  will-change:transform,width,height,font-size,padding,opacity;
  transition:transform .42s cubic-bezier(.22,1,.36,1),width .42s cubic-bezier(.22,1,.36,1),height .42s cubic-bezier(.22,1,.36,1),font-size .42s cubic-bezier(.22,1,.36,1),padding .42s cubic-bezier(.22,1,.36,1);
}
.qwick-surface .tag-editor-create-flight .tag-editor-ghost-name,
.qwick-surface .tag-editor-exchange-flight .tag-editor-ghost-name{max-width:none;min-width:max-content;overflow:visible;text-overflow:clip;white-space:nowrap;}
.qwick-surface .tag-editor-create-flight.tag-editor-preview-discard-flight{
  overflow:visible;
}
body.tag-editor-dragging{cursor:grabbing;}

/* ---- klavesnicova formularova vrstva ------------------------------
   Zivotny cyklus kazdeho formulara nad klavesnicou je v celej aplikacii
   ten isty: neviditelny -> show. Nativna klavesnica sa uz neotvara,
   takze medzistavy, ktore na nu cakali, zanikli.
   Recept je preto spolocny. Vlastnu vrstvu staci oznacit triedou
   .qwick-keyboard-form-layer a dostane presne to iste spravanie.

   NENAHRADZAJ :is(...) holou triedou -- vetva .tag-editor-form-layer musi
   ostat, inak sa Moves rozsype. :is() preberá specificitu najsilnejsieho
   argumentu, takze obe vetvy maju naďalej specificitu triedy (10). */
/* Formular sa objavi OKAMZITE vo svojej finalnej podobe. Ziadne
   postupne zapriehladnovanie: polia su priesvitne vrstvy a kym rodic
   animuje opacity, prehliadac ich vykresluje vyblednuto a na konci
   animacie vzhlad viditelne skoci. Preto ziadny fade-in. */
.qwick-surface :is(.tag-editor-form-layer,.qwick-keyboard-form-layer){
  position:absolute;
  inset:0;
  z-index:12;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:none;
}
.qwick-surface :is(.tag-editor-form-layer,.qwick-keyboard-form-layer).show{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transition:none;
}
/* Polozky editora ustupia za formular tym istym rozostrenim, akym ustupuje
   dashboard za QWICK MENU -- 10 px. Je to ta ista rola (plocha, ktora dala
   popredie niecomu inemu), takze aj ta ista hodnota; keby si ju editor
   zvolil vlastnu, boli by to dva materialy hlbky namiesto jedneho.

   Rozostrenie sa nasadzuje BEZ prechodu, aby pri otvoreni formulara
   neblikalo; prechod patri az odchodu (kludove pravidlo nizsie). */
.qwick-surface .tag-editor-overlay:is(.tag-editor-form-open,.qwick-keyboard-form-open) > .sheet{
  filter:blur(10px);
  transition:none;
  pointer-events:none;
}
.qwick-surface .tag-editor-overlay > .sheet{
  filter:blur(0px);
  transition:var(--qwick-blur-transition);
}
/* Rovnaky raster ma kazdy panel nad klavesnicou: na stred, sirka viewportu
   minus 28px, max 492px, stlpec s medzerou 10px. Vlastny panel staci
   oznacit .qwick-keyboard-form-panel. */
.qwick-surface :is(.tag-editor-form-panel,.qwick-keyboard-form-panel){
  position:absolute;
  left:50%;
  bottom:var(--qwick-keyboard-panel-bottom);
  transform:translateX(-50%);
  width:min(calc(100vw - 28px),492px);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.qwick-surface .tag-editor-name-input{
  width:100%;
  min-width:0;
  height:42px;
  min-height:42px;
  box-sizing:border-box;
  border-radius:999px;
  outline:none;
  font-weight:750;
  font-size:16px;
  padding:0 16px;
  -webkit-appearance:none;
  appearance:none;
}
/* Paleta je NEKONECNY PAS V DVOCH RIADKOCH -- jedna slucka, nie dva zoznamy.
   Horny riadok ide dolava, dolny doprava; na oboch krajoch sa pas otaca
   dozadu a vzorka si vymeni riadok. Preto tu nie je ziadny scroll ani snap:
   polohu kazdej vzorky na slucke pocita `scripts/18-qwick-tag-editor.js`.

   `transform`, `opacity` a `z-index` vzorky su UDAJ (miesto na slucke), nie
   styl -- vlastni ich skript a CSS ich preto nedeklaruje nikde, ani pri
   `.selected`. Keby ich mali obaja, o jednej vlastnosti by rozhodovali dve
   miesta a jedno by muselo prehrat. Zvolenu farbu preto oznacuje kruzok
   `::after` a zdvih, mierku k nej pripocita skript.

   Vyska pasu je dva riadky vzoriek (36px) s medzerou 14px a lemom 6px. */
.qwick-surface .tag-editor-color-band{
  position:relative;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  height:98px;
}
.qwick-surface .tag-editor-colors{
  position:absolute;
  inset:0;
  overflow:hidden;
  touch-action:none;
}
.qwick-surface .tag-editor-color{
  position:absolute;
  left:0;
  top:0;
  width:36px;
  height:36px;
  border-radius:999px;
  border:0;
  background:var(--tag-editor-swatch);
  box-shadow:none;
  -webkit-tap-highlight-color:transparent;
  /* Bez prechodu -- z toho isteho dovodu ako kruzok oznacenia nizsie.
     Uzly pasu su recyklovane: pri kazdom otoceni o jeden krok si uzol
     vymeni farbu so susedom a zaroven sa o ten krok posunie, takze oko
     vidi spojity pohyb. Prechod tienu by ale dobiehal na uzle, ktory uz
     nesie inu farbu -- zvoleny odtien by mal na chvilu tazsi tien na dvoch
     miestach naraz. Presne to bolo to preblikavanie oznacenia. */
  user-select:none;
  -webkit-user-select:none;
}
.qwick-surface .tag-editor-color::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:inherit;
  border:2px solid rgba(255,255,255,.92);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.28);
  opacity:0;
  transform:scale(.72);
  /* Krúžok sa zjavuje a mizne OKAMŽITE, nie prelnutím. Uzly pásu sú
     recyklované: keď sa vzorka pri otočení pása prefarbí, zdedila by
     dobiehajúce prelnutie z farby, ktorá na nej už nie je -- označenie by
     preblikávalo aj na cudzích farbách. Mierka sa animovať smie, tá je pri
     nulovom krytí neviditeľná. */
  transition:transform .18s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.qwick-surface .tag-editor-color.selected{
  box-shadow:none;
}
.qwick-surface .tag-editor-color.selected::after{opacity:1;transform:scale(1);}
/* Live preview of the tag being created: the menu pill at 1.5x, parked
   2 cm below the top edge of the screen. */
.qwick-surface .tag-editor-preview-wrap{
  position:absolute;
  left:0;
  right:0;
  top:calc(env(safe-area-inset-top,0px) + 2cm);
  display:flex;
  justify-content:center;
  pointer-events:none;
}
/* While a tag is flying up from the menu/chain to become the live
   preview (drop on Upraviť), the real preview pill is held invisible. It is
   revealed on the same frame the flight lands, so no transparent frame and no
   duplicate pill can ever appear. */
.qwick-surface .tag-editor-preview-wrap.tag-editor-preview-arriving{opacity:0;}
@media (prefers-reduced-motion:reduce){
  .qwick-surface .tag-editor.tag-editor-page-entering .tag-editor-pill,
  .qwick-surface .tag-editor-page-ghost{animation-duration:.01ms;}
  .qwick-surface .tag-editor-ghost,
  .qwick-surface .tag-editor-chain-gap,
  .qwick-surface .tag-editor-exchange-flight,
  .qwick-surface .tag-editor-create-flight{transition-duration:.01ms;animation-duration:.01ms;}
}