/* VIAxTEAMS public landing page (v2) — teams.viaxarmada.com front door.
   Builds on the brand-spec §6 "neural deck boot" system already shipped
   on /login (neural-bg canvas, bracket-spread, decrypt-in, glitch-text —
   see app.css ~L2165 + login.html) instead of inventing a second visual
   language. New here: scroll-reveal sections, a live-cycling chat mockup,
   a tabbed sign-in/register showcase, and an FAQ accordion. Page-scoped
   so authenticated pages don't pay for landing-only CSS. */

.lp {
  position: relative;
  overflow-x: hidden;
  background: var(--bg);
}

/* ── Hero ─────────────────────────────────────────────────────── */

.lp-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px 64px;
  position: relative;
}
.lp-hero-nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 32px;
}
.lp-nav-mark {
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  color: var(--tp); letter-spacing: .01em;
}
.lp-nav-suffix {
  font-family: var(--display); font-weight: 500; font-size: 0.72em;
  color: var(--tm); letter-spacing: .04em; margin-left: .32em;
}
.lp-nav-cta { display: flex; gap: 10px; }

/* ── Interactive text — hover re-scramble ────────────────────────
   Any [data-hover-decrypt] element replays a short decrypt scramble
   (JS below) when the pointer enters it. Cursor + underline hint that
   it's interactive, not just decorative. */
[data-hover-decrypt] {
  cursor: default;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: text-decoration-color .25s var(--ease-house);
}
[data-hover-decrypt]:hover {
  text-decoration-color: var(--cyandim);
}

.lp-hero-eyebrow {
  font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: .18em;
  text-transform: uppercase; color: var(--cyan);
  border: 1px solid var(--cyandim); background: var(--cyanglow);
  padding: 5px 14px; border-radius: 20px; margin-bottom: 28px;
  animation: card-rise 0.62s var(--ease-house) 1.05s both;
}
.lp-hero-mark {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.6rem, 9vw, 5.6rem);
  letter-spacing: .01em; color: var(--tp); line-height: 1.02;
}
.lp-hero-tagline {
  margin-top: 20px; font-size: clamp(0.6rem, 3.05vw, 1.3rem);
  color: var(--tp); max-width: 92vw; line-height: 1.5;
  white-space: nowrap; overflow: visible;
  animation: card-rise 0.62s var(--ease-house) 1.15s both;
}
.lp-emph { color: var(--brand-gold); font-weight: 700; }
.lp-hero-sub {
  margin-top: 12px; font-size: var(--fs-md); color: var(--tm);
  max-width: 560px; line-height: 1.6;
  animation: card-rise 0.62s var(--ease-house) 1.22s both;
}
.lp-hero-cta {
  display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap;
  justify-content: center;
  animation: card-rise 0.62s var(--ease-house) 1.3s both;
}
.lp-btn {
  font-family: var(--body); font-weight: 600; font-size: var(--fs-md);
  padding: 13px 30px; clip-path: var(--cut-md); cursor: pointer;
  border: 1px solid transparent; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform .15s var(--ease-house), box-shadow .15s var(--ease-house);
}
.lp-btn:hover { transform: translateY(-2px); }
.lp-btn-primary {
  background: var(--cyan); color: #001217;
  box-shadow: 0 0 0 rgba(0,240,255,0);
}
.lp-btn-primary:hover { box-shadow: 0 8px 28px rgba(0,240,255,.28); }
.lp-btn-ghost {
  background: transparent; color: var(--tp); border-color: var(--bdrhi);
}
.lp-btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }

/* The shared .lb-tl/.lb-tr corner brackets (app.css) sit 32px from the
   viewport top, which collides with the hero nav bar here (the login
   page has no nav bar, so this never mattered there). Push the top
   pair down below the nav on this page only. */
.lp-hero .lb-tl, .lp-hero .lb-tr { top: 78px; }
@media (max-width: 640px) {
  .lp-hero .lb-tl, .lp-hero .lb-tr { top: 64px; }
}

.lp-scroll-cue {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  color: var(--td); font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .2em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  opacity: 0; animation: card-rise 0.62s var(--ease-house) 1.6s both;
}
.lp-scroll-cue .bar {
  width: 1px; height: 26px; background: linear-gradient(var(--cyan), transparent);
  animation: lp-scroll-pulse 1.8s ease-in-out infinite;
}
@keyframes lp-scroll-pulse { 0%,100% { opacity: .3; } 50% { opacity: 1; } }

/* ── Scroll-reveal utility ───────────────────────────────────────
   .lp-reveal starts hidden/offset; JS adds .lp-in via IntersectionObserver
   the first time each element crosses into view. No-ops under
   prefers-reduced-motion (see the media query at the bottom). */
.lp-reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s var(--ease-house), transform .7s var(--ease-house);
}
.lp-reveal.lp-in { opacity: 1; transform: translateY(0); }
.lp-reveal-1 { transition-delay: .05s; }
.lp-reveal-2 { transition-delay: .15s; }
.lp-reveal-3 { transition-delay: .25s; }
.lp-reveal-4 { transition-delay: .35s; }

/* ── Section shell ────────────────────────────────────────────── */

.lp-section {
  position: relative; z-index: 1;
  max-width: 1080px; margin: 0 auto;
  padding: 100px 24px;
}
.lp-section-head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.lp-eyebrow {
  font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: .18em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 10px;
}
.lp-h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.2rem); color: var(--tp); line-height: 1.2;
}
.lp-section-sub { margin-top: 14px; color: var(--tm); font-size: var(--fs-md); line-height: 1.55; }

/* ── Feature grid ─────────────────────────────────────────────── */

.lp-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.lp-feature {
  background: var(--panel); border: 1px solid var(--bdr);
  clip-path: var(--cut-md); padding: 26px 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .2s var(--ease-house), transform .2s var(--ease-house);
}
.lp-feature:hover { border-color: var(--cyandim); transform: translateY(-3px); }
.lp-feature-icon {
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--cyandim); background: var(--cyanglow); color: var(--cyan);
  clip-path: var(--cut-sm, polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%));
  margin-bottom: 16px; font-size: 1.05rem;
}
.lp-feature-h { font-family: var(--display); font-weight: 700; font-size: var(--fs-lg); color: var(--tp); }
.lp-feature-b { margin-top: 8px; color: var(--tm); font-size: var(--fs-base); line-height: 1.55; }

/* ── Live product mockup — a small, honestly-labeled cycling replay of
   what a room looks like. Pure CSS/JS, no live data / no iframe. ─── */

.lp-demo-wrap {
  border: 1px solid var(--bdr); background: var(--panel);
  clip-path: var(--cut-lg); overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
}
.lp-demo-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--bdr); background: var(--card);
}
.lp-demo-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bdrhi); }
.lp-demo-title {
  margin-left: 8px; font-family: var(--mono); font-size: var(--fs-meta);
  color: var(--tm); letter-spacing: .04em;
}
.lp-demo-live {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: var(--fs-micro); color: var(--green);
  letter-spacing: .1em; text-transform: uppercase;
}
.lp-demo-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px var(--green); animation: lp-pulse 1.6s ease-in-out infinite; }
@keyframes lp-pulse { 0%,100% { opacity: .4; } 50% { opacity: 1; } }

.lp-demo-body { min-height: 320px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.lp-msg {
  display: flex; gap: 10px; max-width: 78%;
  opacity: 0; transform: translateY(10px);
  animation: lp-msg-in .5s var(--ease-house) forwards;
}
.lp-msg.agent { align-self: flex-start; }
.lp-msg.human { align-self: flex-end; flex-direction: row-reverse; }
@keyframes lp-msg-in { to { opacity: 1; transform: translateY(0); } }
.lp-msg-pip {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: var(--fs-meta); font-weight: 700;
}
.lp-msg.agent .lp-msg-pip { background: var(--cyanglow); color: var(--cyan); border: 1px solid var(--cyandim); }
.lp-msg.human .lp-msg-pip { background: var(--brand-gold-glow); color: var(--brand-gold); border: 1px solid var(--brand-gold-dim); }
.lp-msg-bubble {
  background: var(--card); border: 1px solid var(--bdr); border-radius: 3px;
  padding: 10px 14px; font-size: var(--fs-base); color: var(--tp); line-height: 1.5;
}
.lp-msg.human .lp-msg-bubble { background: var(--card2); }
.lp-msg-who {
  font-family: var(--mono); font-size: var(--fs-micro); color: var(--tm);
  letter-spacing: .04em; margin-bottom: 3px; display: block;
}
.lp-typing { display: inline-flex; gap: 3px; align-items: center; padding: 2px 0; }
.lp-typing span {
  width: 5px; height: 5px; border-radius: 50%; background: var(--tm);
  animation: lp-typing-bounce 1.1s ease-in-out infinite;
}
.lp-typing span:nth-child(2) { animation-delay: .15s; }
.lp-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes lp-typing-bounce { 0%,60%,100% { transform: translateY(0); opacity:.5 } 30% { transform: translateY(-3px); opacity:1 } }

/* ── Bring your agent / fleet row ────────────────────────────── */

.lp-fleet-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; max-width: 900px; margin: 0 auto;
}
.lp-fleet-card {
  background: var(--panel); border: 1px solid var(--bdr);
  clip-path: var(--cut-md); padding: 24px 20px; text-align: center;
  transition: border-color .2s var(--ease-house), transform .2s var(--ease-house);
}
.lp-fleet-card:hover { border-color: var(--cyandim); transform: translateY(-3px); }
.lp-fleet-icon {
  width: 40px; height: 40px; margin: 0 auto 14px; display: flex;
  align-items: center; justify-content: center; font-size: 1.15rem;
  border: 1px solid var(--cyandim); background: var(--cyanglow); color: var(--cyan);
  border-radius: 50%;
}
.lp-fleet-h { font-family: var(--display); font-weight: 700; font-size: var(--fs-lg); color: var(--tp); }
.lp-fleet-b { margin-top: 8px; color: var(--tm); font-size: var(--fs-base); line-height: 1.55; }

/* ── Example mockups: tabs + panels ──────────────────────────── */

.lp-ex { max-width: 780px; margin: 0 auto; }
.lp-ex-tabs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-bottom: 16px;
}
.lp-ex-tab {
  font-family: var(--display); font-weight: 600; font-size: var(--fs-meta);
  color: var(--tm); background: var(--panel); border: 1px solid var(--bdr);
  clip-path: var(--cut-sm, polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%));
  padding: 12px 10px; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 6px; text-align: center; line-height: 1.3;
  transition: border-color .15s, color .15s;
}
.lp-ex-tab:hover { color: var(--tp); border-color: var(--bdrhi); }
.lp-ex-tab.on { color: var(--tp); border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyandim); }
.lp-ex-n {
  font-family: var(--mono); font-size: var(--fs-micro); color: var(--cyan);
  border: 1px solid var(--cyandim); background: var(--cyanglow);
  width: 18px; height: 18px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center;
}
.lp-ex-panel { display: none; }
.lp-ex-panel.on { display: block; animation: card-rise .4s var(--ease-house) both; }

/* Connection status strip — example 1 */
.lp-conn-strip {
  display: flex; gap: 14px; padding: 10px 22px; border-bottom: 1px solid var(--bdr);
  background: var(--card); flex-wrap: wrap;
}
.lp-conn {
  display: flex; align-items: center; gap: 6px; font-family: var(--mono);
  font-size: var(--fs-micro); color: var(--tm); letter-spacing: .04em;
}
.lp-conn-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 6px var(--green); animation: lp-pulse 1.8s ease-in-out infinite;
}

/* Agent pip color variants — example 2 (4-agent collaboration) */
.lp-msg-pip.gold { background: var(--brand-gold-glow); color: var(--brand-gold); border: 1px solid var(--brand-gold-dim); }
.lp-msg-pip.green { background: rgba(60,220,150,.12); color: var(--green); border: 1px solid rgba(60,220,150,.35); }

/* Split layout (chat + mini-browser) — example 3 */
.lp-demo-split-body { display: flex; min-height: 340px; }
.lp-demo-split .lp-demo-body { flex: 1 1 50%; min-height: 0; }
.lp-mini-browser {
  flex: 1 1 50%; border-left: 1px solid var(--bdr); display: flex; flex-direction: column;
  background: #0a0e12;
}
.lp-mini-browser-bar {
  display: flex; align-items: center; gap: 6px; padding: 9px 12px;
  border-bottom: 1px solid var(--bdr); background: var(--card);
}
.lp-mini-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bdrhi); }
.lp-mini-url {
  margin-left: 6px; font-family: var(--mono); font-size: var(--fs-micro);
  color: var(--tm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-mini-browser-body { flex: 1; display: flex; align-items: center; justify-content: center; }
.lp-mini-status {
  font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: .06em;
  padding: 6px 14px; border-radius: 20px; transition: all .3s var(--ease-house);
}
.lp-mini-status.bad { color: #ff6b6b; background: rgba(255,107,107,.1); border: 1px solid rgba(255,107,107,.35); }
.lp-mini-status.good { color: var(--green); background: rgba(60,220,150,.1); border: 1px solid rgba(60,220,150,.35); }

/* Approve / deny buttons — inline in a message bubble */
.lp-approve-row { display: flex; gap: 8px; margin-top: 10px; }
.lp-approve-btn {
  font-family: var(--display); font-weight: 600; font-size: var(--fs-meta);
  padding: 6px 16px; border-radius: 3px; cursor: pointer; border: 1px solid var(--bdrhi);
  background: transparent; color: var(--tp); transition: all .15s;
}
.lp-approve-btn.yes { border-color: var(--cyandim); color: var(--cyan); }
.lp-approve-btn.yes:hover { background: var(--cyanglow); }
.lp-approve-btn.no:hover { border-color: #ff6b6b; color: #ff6b6b; }
.lp-approve-row.done .lp-approve-btn { opacity: .4; cursor: default; }
.lp-approve-row.done .lp-approve-btn.yes { opacity: 1; background: var(--cyanglow); }

/* Lobby marquee — example 4 */
.lp-lobby { position: relative; }
.lp-lobby-viewport { position: relative; height: 260px; overflow: hidden; padding: 22px 0 0; }
.lp-lobby-track {
  display: flex; flex-direction: column; gap: 10px; padding: 0 22px;
  animation: lp-lobby-scroll 14s linear infinite;
}
@keyframes lp-lobby-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.lp-lobby-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  background: var(--card); border: 1px solid var(--bdr); border-radius: 3px;
  font-size: var(--fs-base); flex-wrap: wrap;
}
.lp-lobby-name { font-family: var(--display); font-weight: 700; color: var(--tp); min-width: 130px; }
.lp-lobby-agents { color: var(--cyan); font-family: var(--mono); font-size: var(--fs-meta); }
.lp-lobby-humans { margin-left: auto; color: var(--tm); font-family: var(--mono); font-size: var(--fs-meta); }
.lp-lobby-fade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(var(--panel) 0%, transparent 14%, transparent 86%, var(--panel) 100%);
}
.lp-lobby-caption {
  position: relative; z-index: 1; text-align: center;
  padding: 16px 22px 22px; color: var(--tm); font-size: var(--fs-base); line-height: 1.5;
  border-top: 1px solid var(--bdr);
}

/* ── Feature showcase grid ───────────────────────────────────── */

.lp-showcase {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.lp-sc-card {
  background: var(--panel); border: 1px solid var(--bdr);
  clip-path: var(--cut-md); padding: 20px 18px;
  transition: border-color .2s var(--ease-house), transform .2s var(--ease-house);
}
.lp-sc-card:hover { border-color: var(--cyandim); transform: translateY(-3px); }
.lp-sc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.lp-sc-icon { font-size: 1.1rem; color: var(--cyan); }
.lp-sc-status {
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 20px;
}
.lp-sc-status.live { color: var(--green); background: rgba(60,220,150,.1); border: 1px solid rgba(60,220,150,.35); }
.lp-sc-status.beta { color: var(--brand-gold); background: var(--brand-gold-glow); border: 1px solid var(--brand-gold-dim); }
.lp-sc-status.soon { color: var(--tm); background: var(--card); border: 1px solid var(--bdrhi); }
.lp-sc-h { font-family: var(--display); font-weight: 700; font-size: var(--fs-lg); color: var(--tp); }
.lp-sc-b { margin-top: 6px; color: var(--tm); font-size: var(--fs-base); line-height: 1.5; }

/* ── Sign-in / register showcase ─────────────────────────────── */

.lp-auth {
  max-width: 480px; margin: 0 auto; border: 1px solid var(--bdr);
  background: var(--panel); clip-path: var(--cut-lg);
  box-shadow: 0 18px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
}
.lp-auth-tabs { display: flex; border-bottom: 1px solid var(--bdr); }
.lp-auth-tab {
  flex: 1; padding: 16px; text-align: center; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: var(--fs-base);
  color: var(--tm); background: transparent; border: none; position: relative;
  transition: color .15s;
}
.lp-auth-tab.on { color: var(--tp); }
.lp-auth-tab.on::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: -1px; height: 2px;
  background: var(--cyan); box-shadow: 0 0 8px var(--cyan);
}
.lp-auth-panel { padding: 30px 28px; display: none; }
.lp-auth-panel.on { display: block; animation: card-rise .4s var(--ease-house) both; }
.lp-auth-row {
  border: 1px solid var(--bdr); background: var(--card);
  padding: 11px 14px; font-size: var(--fs-base); color: var(--td);
  margin-bottom: 10px; border-radius: 2px; font-family: var(--body);
}
.lp-auth-check { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px;
  font-size: var(--fs-meta); color: var(--tm); }
.lp-auth-check span { width: 13px; height: 13px; border: 1px solid var(--bdrhi); display: inline-block; }

/* ── FAQ accordion ────────────────────────────────────────────── */

.lp-faq { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.lp-faq-item { border: 1px solid var(--bdr); background: var(--panel); clip-path: var(--cut-md); }
.lp-faq-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 18px 22px; display: flex; align-items: center; justify-content: space-between;
  font-family: var(--display); font-weight: 600; font-size: var(--fs-md); color: var(--tp);
}
.lp-faq-q .chev { color: var(--cyan); transition: transform .25s var(--ease-house); font-family: var(--mono); }
.lp-faq-item.open .lp-faq-q .chev { transform: rotate(45deg); }
.lp-faq-a {
  max-height: 0; overflow: hidden; transition: max-height .3s var(--ease-house);
  padding: 0 22px;
}
.lp-faq-item.open .lp-faq-a { max-height: 220px; padding-bottom: 18px; }
.lp-faq-a p { color: var(--tm); font-size: var(--fs-base); line-height: 1.6; }

/* ── Footer ───────────────────────────────────────────────────── */

.lp-footer {
  border-top: 1px solid var(--bdr); padding: 40px 24px 60px;
  text-align: center; position: relative; z-index: 1;
}
.lp-footer-mark { font-family: var(--display); font-weight: 800; color: var(--tp); font-size: .95rem; }
.lp-footer-links { margin-top: 12px; display: flex; gap: 18px; justify-content: center;
  font-size: var(--fs-meta); }
.lp-footer-links a { color: var(--tm); text-decoration: none; }
.lp-footer-links a:hover { color: var(--cyan); }
.lp-footer-meta { margin-top: 14px; color: var(--td); font-size: var(--fs-micro); }

@media (max-width: 640px) {
  .lp-hero-nav { padding: 16px 18px; }
  .lp-section { padding: 70px 18px; }
  .lp-msg { max-width: 92%; }
  .lp-auth-panel { padding: 22px 20px; }
  .lp-ex-tabs { grid-template-columns: repeat(2, 1fr); }
  .lp-demo-split-body { flex-direction: column; }
  .lp-mini-browser { border-left: none; border-top: 1px solid var(--bdr); min-height: 140px; }
  .lp-lobby-row { gap: 6px 14px; }
  .lp-lobby-agents { flex-basis: 100%; }
  .lp-lobby-humans { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-reveal { opacity: 1; transform: none; transition: none; }
  .lp-msg { animation: none; opacity: 1; transform: none; }
  .lp-hero-eyebrow, .lp-hero-tagline, .lp-hero-sub, .lp-hero-cta, .lp-scroll-cue {
    animation: none; opacity: 1;
  }
  .lp-lobby-track { animation: none; }
  .lp-conn-dot { animation: none; opacity: 1; }
}