/* ============================================================
   Seta Labs AI — landing page
   Single stylesheet, no dependencies, no build step.
   ============================================================ */

:root{
  --bg:        #ffffff;
  --bg-band:   #f5f8f7;
  --surface:   #ffffff;
  --surface-2: #f7f9f8;
  --line:      #d8e0dd;
  --line-soft: #e7ecea;

  --text:      #181e15;
  --text-mid:  #4c5551;
  --muted:     #616a66;   /* 5.6:1 on white, 4.6:1 on the mint band */

  --mint:      #dceeeb;
  --lav:       #ece6fd;
  --accent:    #b58bff;   /* fills and washes */
  --accent-ink:#7c3aed;   /* the same idea at text contrast: 5.7:1 on white */
  --blue-deep: #2f6cf6;
  --dot:       #2f6cf6;
  --grad: linear-gradient(100deg, var(--mint), var(--lav));

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;

  --wrap: 1140px;
  --shadow: 0 18px 44px -22px rgba(24,30,21,.28);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-back: cubic-bezier(.34,1.5,.5,1);

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html{ scroll-behavior:smooth; scroll-padding-top:88px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

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

h1,h2,h3{ line-height:1.08; letter-spacing:-.038em; margin:0; font-weight:600; }
h1{ font-size:clamp(2.7rem, 6.6vw, 5.1rem); }
h2{ font-size:clamp(2rem, 4.4vw, 3.3rem); }
h3{ font-size:1.16rem; letter-spacing:-.015em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img,svg{ max-width:100%; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
.wrap--narrow{ max-width:760px; }
/* Legal pages: prose rhythm the home page never needs. */
.legal h1{ font-size:clamp(2.3rem, 4.6vw, 3.4rem); margin-bottom:12px; }
.legal h2{ font-size:1.45rem; letter-spacing:-.02em; margin-top:44px; margin-bottom:12px; }
.legal p, .legal ul{ margin-top:12px; color:var(--text-mid); font-size:1.05rem; line-height:1.6; }
.legal ul{ padding-left:1.3em; }
.legal a{ text-decoration:underline; }

#contact, #how, #faq, #why, #top{ scroll-margin-top:92px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:#ffffff; padding:12px 18px;
  border-radius:0 0 var(--r-sm) 0; font-weight:600;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.grad{ color:var(--accent-ink); }
/* ─────────────── nav ─────────────── */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:rgba(255,255,255,.72);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.nav.is-stuck{ background:rgba(255,255,255,.9); border-bottom-color:var(--line-soft); }

.nav__inner{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:24px; }

.brand{ display:inline-flex; align-items:center; flex-shrink:0; color:var(--text); }
.brand__wordmark{ display:block; width:118px; height:26px; }
.brand:hover{ color:#fff; }

@media (max-width:420px){ .brand__wordmark{ width:100px; height:22px; } }

/* ─────────────── buttons ─────────────── */

.btn{
  --btn-py:13px; --btn-px:22px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:var(--btn-py) var(--btn-px);
  /* No transparent border here. A gradient background is sized to the padding
     box and painted across the border box, so the ends of the ramp wrap into
     that 1px ring: pink down the blue edge, blue down the pink one. Variants
     that want a border declare their own. */
  border:0; border-radius:100px;
  font-size:.95rem; font-weight:600; letter-spacing:-.008em;
  cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .25s var(--ease),
             background .25s var(--ease), border-color .25s var(--ease);
}
.btn--sm{ --btn-py:9px; --btn-px:17px; font-size:.88rem; }
.btn--lg{ --btn-py:16px; --btn-px:30px; font-size:1rem; }
.btn--full{ width:100%; }

.btn--primary{
  background:var(--text); color:#fff;
  box-shadow:0 10px 24px -14px rgba(24,30,21,.55);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(24,30,21,.6); }

.btn:active{ transform:translateY(0); }

/* ─────────────── hero ─────────────── */

.hero{ position:relative; padding:172px 0 96px; overflow:hidden; }

.hero__grid{
  position:absolute; inset:-40% 0 auto 0; height:170%;
  background-image:
    linear-gradient(to right, rgba(24,30,21,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(24,30,21,.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 78% 52% at 50% 26%, #000 5%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 78% 52% at 50% 26%, #000 5%, transparent 72%);
  pointer-events:none;
}
.hero{ background:linear-gradient(168deg, var(--mint) 0%, #f3f0fe 46%, #fff 78%); }
.hero__glow{
  position:absolute; top:-260px; left:50%; transform:translateX(-50%);
  width:min(1100px, 130vw); height:640px; pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(181,139,255,.32), transparent 70%),
    radial-gradient(closest-side, rgba(220,238,235,.95), transparent 72%);
  background-position:22% 42%, 74% 30%;
  background-size:66% 82%, 70% 86%;
  background-repeat:no-repeat;
  filter:blur(28px);
}

.hero__inner{ position:relative; text-align:center; }

.blob{
  position:absolute; border-radius:50%; pointer-events:none;
  filter:blur(72px); opacity:.42; z-index:0;
}
.blob--a{
  width:min(560px,80vw); aspect-ratio:1; top:-190px; left:4%;
  background:radial-gradient(closest-side, rgba(181,139,255,.55), transparent 72%);
}
.blob--b{
  width:min(480px,70vw); aspect-ratio:1; top:20px; right:2%;
  background:radial-gradient(closest-side, rgba(24,30,21,.14), transparent 72%);
}

/* A gradient wide enough to travel, so the words catch light instead of
   sitting in flat colour. One span, so there is no layout to break. */

.eyebrow{
  display:inline-block;
  font-size:.79rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--accent);
  padding:7px 15px; margin-bottom:26px;
  border:1px solid rgba(181,139,255,.4); border-radius:100px;
  background:rgba(236,230,253,.75);
}

.hero__sub{
  max-width:680px; margin:26px auto 0;
  font-size:clamp(1.03rem, 1.55vw, 1.17rem); color:var(--text-mid);
}
.hero__cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:38px; }
@media (max-width:720px){
  .hero{ padding:132px 0 68px; }
  .hero__cta .btn{ width:100%; }
}

/* ─────────────── ticker ─────────────── */

.ticker{
  overflow:hidden; padding:19px 0;
  background:var(--bg-band); border-block:1px solid var(--line-soft);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.ticker__row{ display:flex; align-items:center; width:max-content; }
.ticker__row span{
  margin-right:30px; white-space:nowrap;
  font-size:.86rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-mid);
}
.ticker__row i{
  margin-right:30px; flex:none; width:5px; height:5px; border-radius:50%;
  background:var(--accent);
}

/* ─────────────── sections ─────────────── */

.section{ padding:104px 0; position:relative; }
.band{ background:var(--bg-band); border-block:1px solid var(--line-soft); }


@media (max-width:720px){ .section{ padding:76px 0; } }

/* ─────────────── motto ─────────────── */

.motto{ text-align:center; position:relative; overflow:hidden; }
.motto__mark{
  font-size:clamp(4.4rem,9vw,7rem); line-height:.62; font-weight:700;
  color:var(--accent); opacity:.42; margin-bottom:-.06em; user-select:none;
}
.motto__line{
  font-size:clamp(1.9rem,4.4vw,3.15rem); line-height:1.16; letter-spacing:-.028em;
  font-weight:640; position:relative;
}
.motto__sub{
  margin:30px auto 0; max-width:600px;
  color:var(--text-mid); font-size:1.02rem;
}
.motto__tag{
  display:inline-block; margin-top:30px;
  padding:15px 26px; border-radius:100px;
  background:var(--mint); border:1px solid rgba(24,30,21,.08);
  font-size:.98rem; color:var(--text-mid); max-width:640px;
}
.motto__tag strong{ color:var(--text); font-weight:600; }

/* A hard break that helps a wide line hurts a narrow one. */
@media (max-width:640px){ .wide-only{ display:none; } }

@media (max-width:600px){
  .motto__tag{ border-radius:var(--r); padding:16px 20px; }
}

/* ─────────────── steps ─────────────── */

.steps{ list-style:none; display:grid; gap:74px; }

.step{
  display:grid; grid-template-columns:1.04fr .96fr;
  gap:58px; align-items:center;
}
.step:nth-child(even) .step__art{ order:2; }

.step__art{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.step__art svg{ display:block; width:100%; height:auto; }

.step__n{
  font-size:.82rem; font-weight:700; letter-spacing:.12em; margin-bottom:14px;
  color:var(--accent-ink);
}
.step__body h3{ font-size:1.42rem; margin-bottom:12px; }
.step__body p{ color:var(--text-mid); font-size:1rem; max-width:44ch; }

.note{
  margin:74px auto 0; max-width:620px; text-align:center;
  font-size:.95rem; color:var(--muted);
}

@media (max-width:880px){
  .steps{ gap:56px; }
  .step{ grid-template-columns:1fr; gap:26px; }
  .step:nth-child(even) .step__art{ order:0; }
  .step__body p{ max-width:none; }
}

/* ─────────────── the diagrams ───────────────
   Every one of these is decoration over markup that already renders. The
   elements are visible in their own right; the keyframes only move them, so
   a browser that runs no animation at all still shows a finished picture. */

.art{ background:transparent; }
.art__rule path{ stroke:rgba(24,30,21,.08); stroke-width:1; fill:none; }
.art__dots circle{ fill:#aeb9b5; }

/* 01 — the sweep, and what it turns up */
.scan{ opacity:0; }
.hit{ transform-box:fill-box; transform-origin:center; }
.hit__dot{ fill:var(--accent); }
.hit__ring{
  fill:none; stroke:var(--accent); stroke-width:1.4;
  transform-box:fill-box; transform-origin:center;
}

/* 02 — one phone, many cuts */
.phone{ fill:none; stroke:#94a29d; stroke-width:1.6; }
.phone__notch{ fill:#94a29d; }
.frame{ fill:#dfe7e4; transform-box:fill-box; transform-origin:center; }
.frame:nth-of-type(2){ fill:#e5dcfa; }
.frame:nth-of-type(3){ fill:#d8e6e2; }
.phone__track{ fill:rgba(24,30,21,.09); }
.phone__played{ fill:var(--accent); transform-box:fill-box; transform-origin:left center; }
.hook{ fill:#cdd8d4; }
.baseline{ stroke:rgba(24,30,21,.09); stroke-width:1; }
.bar__fill{ fill:var(--accent); transform-box:fill-box; transform-origin:bottom; }
.bar--2 .bar__fill{ fill:#c2cdc9; }
.bar--3 .bar__fill{ fill:var(--mint); }

/* 03 — a thread that answers back */
.msg rect{ fill:#eaefed; }
.msg--out rect:first-child{ fill:rgba(220,238,235,.9); stroke:rgba(181,139,255,.45); stroke-width:1; }
.msg .ln{ fill:rgba(24,30,21,.16); }
.msg--out .ln{ fill:rgba(181,139,255,.5); }
.typing rect{ fill:#eaefed; }
.typing{ opacity:0; }
.tdot{ fill:var(--muted); }

/* 04 — the other end, built */
.win{ fill:#ffffff; stroke:#b6c2be; stroke-width:1.5; }
.win__bar{ stroke:#c8d2cf; stroke-width:1.2; }
.win__dot{ fill:#aab5b1; }
.blk{ fill:#dbe3e0; }
.blk--art{ fill:rgba(220,238,235,.95); }
.blk--cta{ fill:var(--accent); }
.booked rect:first-child{ fill:rgba(220,238,235,.9); stroke:rgba(181,139,255,.5); stroke-width:1; }
.booked .tick{ fill:none; stroke:var(--accent); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.booked .ln{ fill:rgba(181,139,255,.4); }
.cursor path{ fill:#181e15; stroke:#fff; stroke-width:1.1; stroke-linejoin:round; }
.cursor{ opacity:0; }

@media (prefers-reduced-motion:no-preference){
  .scan{ animation:sweep 5s linear infinite; }
  .hit{ animation:light 5s var(--ease-back) infinite both; }
  .hit__ring{ animation:ring 5s var(--ease) infinite both; }

  .frame{ animation:cut 6s var(--ease-back) infinite both; }
  .phone__played{ animation:played 2s linear infinite both; }
  .hook{ animation:hook 6s var(--ease) infinite both; }
  .bar__fill{ animation:grow 6s var(--ease) infinite both; }
  .bar--2 .bar__fill{ animation-name:wither; }

  .msg{ animation:say 8s var(--ease-back) infinite both; }
  .typing{ animation:typing 8s var(--ease) infinite both; }
  .tdot{ animation:tdot 1.1s var(--ease) infinite; }

  .blk, .booked{ animation:assemble 8s var(--ease-back) infinite both; }
  .cursor{ animation:point 8s var(--ease) infinite both; }

  .blob--a{ animation:drift-a 19s ease-in-out infinite alternate; }
  .blob--b{ animation:drift-b 23s ease-in-out infinite alternate; }
  .ticker__row{ animation:slide 30s linear infinite; }
}

@keyframes sweep{
  from{ transform:translateX(0); opacity:1; }
  to{ transform:translateX(572px); opacity:1; }
}
@keyframes light{
  0%,2%{ opacity:0; transform:scale(.4); }
  9%{ opacity:1; transform:scale(1); }
  78%{ opacity:1; transform:scale(1); }
  100%{ opacity:0; transform:scale(1); }
}
@keyframes ring{
  0%,2%{ transform:scale(.34); opacity:.85; }
  30%{ transform:scale(1.1); opacity:0; }
  100%{ transform:scale(1.1); opacity:0; }
}
@keyframes cut{
  0%{ opacity:0; transform:translateY(9px) rotate(-5deg) scale(.96); }
  5%{ opacity:1; transform:none; }
  30%{ opacity:1; transform:none; }
  35%{ opacity:0; transform:translateY(-9px) rotate(4deg) scale(.97); }
  100%{ opacity:0; }
}
@keyframes played{
  from{ transform:scaleX(0); } to{ transform:scaleX(1); }
}
@keyframes hook{
  0%{ fill:#ccd6d2; } 6%{ fill:rgba(181,139,255,.55); } 30%{ fill:rgba(181,139,255,.55); }
  36%{ fill:#ccd6d2; } 100%{ fill:#ccd6d2; }
}
@keyframes grow{
  0%{ transform:scaleY(.05); } 34%{ transform:scaleY(1); }
  90%{ transform:scaleY(1); } 100%{ transform:scaleY(.05); }
}
@keyframes wither{
  0%{ transform:scaleY(.05); opacity:1; } 34%{ transform:scaleY(1); opacity:1; }
  62%{ transform:scaleY(1); opacity:1; } 86%{ transform:scaleY(.34); opacity:.4; }
  100%{ transform:scaleY(.05); opacity:.4; }
}
@keyframes say{
  0%{ opacity:0; transform:translateY(9px); }
  7%{ opacity:1; transform:none; }
  88%{ opacity:1; transform:none; }
  97%,100%{ opacity:0; transform:none; }
}
@keyframes typing{
  0%{ opacity:0; } 3%{ opacity:1; } 15%{ opacity:1; } 18%,100%{ opacity:0; }
}
@keyframes tdot{
  0%,100%{ transform:translateY(0); opacity:.5; }
  50%{ transform:translateY(-3px); opacity:1; }
}
@keyframes assemble{
  0%{ opacity:0; transform:translateY(7px); }
  6%{ opacity:1; transform:none; }
  90%{ opacity:1; transform:none; }
  98%,100%{ opacity:0; transform:none; }
}

/* ─────────────── faq ─────────────── */

.sec-head{ max-width:780px; margin:0 auto 44px; text-align:center; }

.faq{ display:grid; gap:12px; }

.faq details{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
  transition:border-color .25s var(--ease);
}
.faq details[open]{ border-color:var(--line); }
.faq summary{
  list-style:none; cursor:pointer;
  padding:21px 56px 21px 26px; position:relative;
  font-weight:560; font-size:1.01rem; letter-spacing:-.012em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:26px; top:50%;
  width:9px; height:9px; margin-top:-6px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg); transition:transform .25s var(--ease), border-color .25s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg) translate(-3px,-3px); border-color:var(--accent); }
.faq summary:hover{ color:var(--accent-ink); }
.faq details p{ padding:0 26px 24px; color:var(--text-mid); font-size:.96rem; max-width:64ch; }

/* ─────────────── cta ─────────────── */

.cta{
  position:relative; overflow:hidden;
  padding:110px 0 120px;
  background:linear-gradient(190deg, #fff, var(--mint)); border-top:1px solid var(--line-soft);
}
.cta__glow{
  position:absolute; bottom:-320px; left:50%; transform:translateX(-50%);
  width:min(900px,120vw); height:560px; pointer-events:none;
  background:radial-gradient(closest-side, rgba(181,139,255,.34), transparent 70%);
  filter:blur(20px);
}
.cta__inner{ position:relative; text-align:center; }
.cta__inner > p{ margin:20px auto 0; max-width:520px; color:var(--text-mid); }

.form{ margin-top:44px; text-align:left; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.field{ display:block; margin-bottom:16px; }
.field > span{
  display:block; margin-bottom:8px;
  font-size:.83rem; font-weight:560; color:var(--text-mid);
}
.field input, .field textarea{
  width:100%; padding:14px 16px;
  background:var(--surface); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r-sm);
  font:inherit; font-size:.96rem;
  transition:border-color .2s var(--ease), background .2s var(--ease);
  resize:vertical;
}
.field input::placeholder, .field textarea::placeholder{ color:#8b948f; }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--accent); background:var(--surface-2);
}
.field.is-bad input, .field.is-bad textarea{ border-color:#e4666f; }

.form .btn{ margin-top:10px; }
.form__status{ margin-top:14px; font-size:.9rem; min-height:1.3em; text-align:center; }
.form__status.is-ok{ color:var(--accent); }
.form__status.is-bad{ color:#e4666f; }
.form__fine{ margin-top:14px; font-size:.79rem; color:var(--muted); text-align:center; }
.form__fine code{
  background:var(--surface-2); border:1px solid var(--line-soft);
  padding:2px 6px; border-radius:5px; font-size:.94em;
}

@media (max-width:600px){ .form__row{ grid-template-columns:1fr; gap:0; } }

/* ─────────────── built with ─────────────── */

/* Vendor wordmarks as CSS masks over the muted token, so they take the exact
   site grey rather than whatever colour the SVG carries. The width of each
   link is its viewBox ratio at 20px tall. */
.built{ padding:40px 0; border-top:1px solid var(--line-soft); }
.built__inner{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:20px 40px;
}
.built__label{
  font-size:.72rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted);
}
.built__list{
  list-style:none; margin:0; padding:0; display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:20px 40px;
}
.built__logo{
  display:block; height:20px; background:var(--muted);
  -webkit-mask:no-repeat center / contain; mask:no-repeat center / contain;
  transition:background .2s var(--ease);
}
.built__logo:hover, .built__logo:focus-visible{ background:var(--text-mid); }
.built__logo--cartesia{ width:140px; -webkit-mask-image:url(/cartesia.svg); mask-image:url(/cartesia.svg); }
.built__logo--deepgram{ width:110px; height:24px; -webkit-mask-image:url(/deepgram.svg); mask-image:url(/deepgram.svg); }

/* ─────────────── footer ─────────────── */

.foot{ padding:64px 0 30px; border-top:1px solid var(--line-soft); }
/* The Hebrew runs inside an LTR line on purpose: no dir override, so it
   reads in the order the legal name is written rather than being flipped by
   the bidi algorithm. */
.foot__legal{ white-space:nowrap; }
.foot__sep{ margin:0 4px; opacity:.5; }

.foot__base{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.84rem; color:var(--muted);
}

/* ─────────────── entrance ─────────────── */

/* Nothing here can leave an element hidden. The page is visible with no
   JavaScript at all; the animation is decoration on top, and it only ever
   ends at opacity 1. The previous version gated visibility on a class that
   JavaScript set and JavaScript cleared, so a script that started and then
   died left the whole page blank. Safari found that. */
.reveal{ opacity:1; }

@media (prefers-reduced-motion:no-preference){
  .reveal{ animation:rise .7s var(--ease) both; }
  .reveal:nth-child(2){ animation-delay:.06s; }
  .reveal:nth-child(3){ animation-delay:.12s; }
  .reveal:nth-child(4){ animation-delay:.18s; }
  .reveal:nth-child(5){ animation-delay:.24s; }
  .reveal:nth-child(6){ animation-delay:.30s; }
}

@keyframes rise{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion:reduce){
  .card:hover,.btn:hover{ transform:none; }
}

@keyframes drift-a{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(70px,54px,0) scale(1.14); }
}
@keyframes drift-b{
  from{ transform:translate3d(0,0,0) scale(1.06); }
  to{ transform:translate3d(-84px,38px,0) scale(.92); }
}
@keyframes slide{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-50%,0,0); }
}
@keyframes point{
  0%{ opacity:0; transform:translate(348px,252px); }
  8%{ opacity:1; transform:translate(348px,252px); }
  34%{ opacity:1; transform:translate(280px,193px) scale(1); }
  40%{ transform:translate(280px,193px) scale(.82); }
  46%{ transform:translate(280px,193px) scale(1); }
  84%{ opacity:1; transform:translate(280px,193px); }
  93%,100%{ opacity:0; transform:translate(280px,193px); }
}