/* ============================================================
   basti.net — synthwave pixel theme (omarchy-inspired)
   ============================================================ */

:root {
  --bg:        #160c2e;
  --bg-raise:  #221244;
  --bg-panel:  #1b1035;
  --border:    #3a2364;
  --text:      #d8d2f0;
  --dim:       #8b7fb8;
  --green:     #8aed3f;
  --cyan:      #52e6d8;
  --pink:      #ff5fa8;
  --magenta:   #e82b8d;
  --orange:    #f79a48;
  --sun:       #ffd98e;

  --font-pixel: 'Press Start 2P', monospace;
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}

::selection { background: var(--magenta); color: #fff; }

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--green); }

.c-green { color: var(--green); }
.c-cyan  { color: var(--cyan); }
.c-pink  { color: var(--pink); }
.c-dim   { color: var(--dim); }

/* ---------- CRT scanlines overlay ---------- */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0)    0px,
    rgba(0, 0, 0, 0)    2px,
    rgba(0, 0, 0, 0.08) 3px,
    rgba(0, 0, 0, 0)    4px
  );
  mix-blend-mode: multiply;
}

/* ---------- nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(22, 12, 46, 0.92);
  backdrop-filter: blur(4px);
  border-bottom: 2px solid var(--border);
}

.nav {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav-logo {
  font-family: var(--font-pixel);
  font-size: 0.75rem;
  color: var(--green);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}
.nav-logo:hover { color: var(--green); animation: glitch 0.3s steps(2) infinite; }

.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}
.nav-links a { color: var(--dim); font-size: 0.9rem; }
.nav-links a::before { content: "./"; color: var(--border); }
.nav-links a:hover { color: var(--cyan); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.hero-sky {
  position: absolute;
  inset: 0 0 26% 0;
  z-index: 0;
}

.hero-scene {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

/* neon grid floor */
.hero-grid {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 26%;
  z-index: 0;
  background: #120a26;
  border-top: 3px solid var(--magenta);
  box-shadow: 0 -3px 18px rgba(232, 43, 141, 0.55);
  overflow: hidden;
  perspective: 220px;
  perspective-origin: 50% 0%; /* camera at the horizon, not mid-panel — else the plane projects upward and is clipped */
}

.grid-plane {
  position: absolute;
  left: -50%; right: -50%; top: 0; bottom: -60%;
  background-image:
    repeating-linear-gradient(to right,  var(--magenta) 0 2px, transparent 2px 56px),
    repeating-linear-gradient(to bottom, var(--magenta) 0 2px, transparent 2px 44px);
  transform: rotateX(62deg);
  transform-origin: top center;
  opacity: 0.7;
  animation: grid-scroll 2.4s linear infinite;
}

@keyframes grid-scroll {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 0, 0 44px; }
}

/* ---------- roof hopper ----------
   Hops across the skyline, landing on real rooftops. The sky svg (320x180) is
   width-scaled and bottom-anchored, so a roof at svg height y sits at
   bottom: 26% (sky bottom) + (180 - y)/320 * 100vw. The x positions of the
   buildings map linearly onto the hop-x timeline. */
.hopper {
  position: absolute;
  left: -6vw;
  bottom: calc(26% + 9.4vw);
  z-index: 0;
  width: clamp(16px, 1.6vw, 40px);
  transform: translateX(-50%);
  animation: hop-x 16s linear infinite, hop-y 16s linear infinite;
  pointer-events: none;
}
.hopper svg { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.hopper .sprite-coin { display: none; }
body.konami .hopper .sprite-bug { display: none; }
body.konami .hopper .sprite-coin { display: block; animation: coin-spin 0.7s steps(2) infinite; }

@keyframes hop-x {
  from { left: -6vw; }
  to   { left: 106vw; }
}

@keyframes coin-spin {
  0%   { transform: scaleX(1); }
  50%  { transform: scaleX(0.3); }
  100% { transform: scaleX(1); }
}

/* landings on: left block, gedaechtniskirche, siegessaeule, brandenburger tor,
   rotes rathaus, center blocks, berliner dom, potsdamer platz */
@keyframes hop-y {
  0%     { bottom: calc(26% + 9.4vw); }
  8.2%   { bottom: calc(26% + 9.4vw);   animation-timing-function: ease-out; }
  12%    { bottom: calc(26% + 22.9vw);  animation-timing-function: ease-in; }
  15.9%  { bottom: calc(26% + 19.4vw);  animation-timing-function: ease-out; }
  19.3%  { bottom: calc(26% + 26.6vw);  animation-timing-function: ease-in; }
  22.7%  { bottom: calc(26% + 23.1vw);  animation-timing-function: ease-out; }
  27.9%  { bottom: calc(26% + 26.6vw);  animation-timing-function: ease-in; }
  33%    { bottom: calc(26% + 15.6vw);  animation-timing-function: ease-out; }
  38%    { bottom: calc(26% + 21vw);    animation-timing-function: ease-in; }
  42.9%  { bottom: calc(26% + 17.5vw);  animation-timing-function: ease-out; }
  46.3%  { bottom: calc(26% + 21.6vw);  animation-timing-function: ease-in; }
  49.7%  { bottom: calc(26% + 18.1vw);  animation-timing-function: ease-out; }
  52.4%  { bottom: calc(26% + 21.6vw);  animation-timing-function: ease-in; }
  55.1%  { bottom: calc(26% + 11.25vw); animation-timing-function: ease-out; }
  61%    { bottom: calc(26% + 20.4vw);  animation-timing-function: ease-in; }
  67%    { bottom: calc(26% + 16.9vw);  animation-timing-function: ease-out; }
  76%    { bottom: calc(26% + 20.4vw);  animation-timing-function: ease-in; }
  85.2%  { bottom: calc(26% + 11.25vw); animation-timing-function: ease-out; }
  88.8%  { bottom: calc(26% + 17.25vw); animation-timing-function: ease-in; }
  92.3%  { bottom: calc(26% + 13.75vw); }
  100%   { bottom: calc(26% + 13.75vw); }
}

.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 6rem 1.5rem 9rem;
  text-align: center;
}

/* pinned to the middle of the second visible purple sky band (#7c2a78, svg y=86).
   The sky svg is width-scaled and bottom-anchored, so the band center sits at
   sky-bottom (74% of hero) minus (180-86)/320 of the viewport width. */
.hero-hint {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(74% - 29.4vw);
  transform: translateY(-50%);
  z-index: 1;
  text-align: center;
  font-family: var(--font-pixel);
  color: #cbb8ef;
  opacity: 0.6;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
  cursor: default;
}
.hero-hint-code {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.35em;
}
/* Press Start 2P has chunky ↑/↓ glyphs but no ←/→ (they'd fall back to a thin
   font) — so left/right are the ↑ glyph rotated. */
.hero-hint-code .rot-l,
.hero-hint-code .rot-r { display: inline-block; letter-spacing: 0; }
.hero-hint-code .rot-l { transform: rotate(-90deg); }
.hero-hint-code .rot-r { transform: rotate(90deg); }

.hero-hint-sub {
  display: block;
  margin-top: 0.65rem;
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  opacity: 0.85;
}
.hero-hint:hover { color: var(--green); opacity: 1; }

@media (max-width: 820px) {
  /* no keyboard, no konami: hide both hints on mobile */
  .hero-hint, .footer-hint { display: none; }
  /* rooftop math is width-based; skip the hopper where the sky is height-scaled */
  .hopper { display: none; }
  /* research entries: stack date over title/teaser/link, using the full card width */
  .pub { flex-direction: column; align-items: stretch; gap: 0.7rem; }
}

.hero-kicker {
  font-family: var(--font-pixel);
  font-size: 0.65rem;
  color: var(--cyan);
  letter-spacing: 0.2em;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.7);
  margin-bottom: 1.4rem;
}

.hero-title {
  font-family: var(--font-pixel);
  font-size: clamp(1.8rem, 7vw, 4rem);
  color: var(--green);
  text-shadow:
    3px 3px 0 #14601c,
    6px 6px 0 rgba(0, 0, 0, 0.55);
  letter-spacing: 0.04em;
  margin-bottom: 1.1rem;
}

.hero-sub {
  font-family: var(--font-pixel);
  font-size: clamp(0.55rem, 1.8vw, 0.85rem);
  letter-spacing: 0.12em;
  margin-bottom: 2.4rem;
  text-shadow:
    -2px -2px 0 #160c2e, 2px -2px 0 #160c2e,
    -2px  2px 0 #160c2e, 2px  2px 0 #160c2e,
    4px 4px 0 rgba(0, 0, 0, 0.55);
}

/* ---------- terminal ---------- */
.term {
  text-align: left;
  background: rgba(16, 9, 32, 0.92);
  border: 2px solid var(--border);
  box-shadow:
    0 0 0 2px #0d0720,
    0 12px 40px rgba(0, 0, 0, 0.6),
    0 0 24px rgba(82, 230, 216, 0.12);
  margin: 0 auto 2.2rem;
  max-width: 620px;
}

.term-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-raise);
  border-bottom: 2px solid var(--border);
}

.term-dot { width: 10px; height: 10px; }
.dot-r { background: var(--pink); }
.dot-y { background: var(--sun); }
.dot-g { background: var(--green); }

.term-title {
  margin-left: auto;
  margin-right: auto;
  font-size: 0.75rem;
  color: var(--dim);
}

.term-body {
  padding: 1rem 1.1rem 1.2rem;
  font-size: 0.9rem;
  min-height: 10.2rem;
}

.term-line { white-space: pre-wrap; word-break: break-word; }
.term-out  { color: var(--dim); }
.term-out .hl-g { color: var(--green); }
.term-out .hl-c { color: var(--cyan); }
.term-out .hl-p { color: var(--pink); }

.prompt { color: var(--green); font-weight: 700; }

.cursor {
  color: var(--green);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- buttons ---------- */
.hero-actions, .contact-links {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  padding: 0.9rem 1.4rem;
  border: 2px solid;
  transition: transform 0.08s steps(2), box-shadow 0.08s steps(2);
}

.btn-green {
  color: #10230a;
  background: var(--green);
  border-color: var(--green);
  box-shadow: 4px 4px 0 #14601c;
}
.btn-green:hover {
  color: #10230a;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #14601c;
}

.btn-pink {
  color: #33081d;
  background: var(--pink);
  border-color: var(--pink);
  box-shadow: 4px 4px 0 #8f1550;
}
.btn-pink:hover {
  color: #33081d;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #8f1550;
}

.btn-cyan {
  color: #062a26;
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 4px 4px 0 #1a7a70;
}
.btn-cyan:hover {
  color: #062a26;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #1a7a70;
}

.btn-ghost {
  color: var(--cyan);
  background: transparent;
  border-color: var(--cyan);
  box-shadow: 4px 4px 0 rgba(82, 230, 216, 0.25);
}
.btn-ghost:hover {
  color: var(--green);
  border-color: var(--green);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(138, 237, 63, 0.3);
}

/* ---------- pixel divider (checkerboard band) ---------- */
.pixel-divider {
  height: 14px;
  background:
    conic-gradient(var(--magenta) 25%, transparent 0 50%, var(--magenta) 0 75%, transparent 0)
    0 0 / 14px 14px;
  opacity: 0.5;
}
.pixel-divider.flip {
  background:
    conic-gradient(transparent 25%, var(--cyan) 0 50%, transparent 0 75%, var(--cyan) 0)
    0 0 / 14px 14px;
  opacity: 0.35;
}

/* ---------- sections ---------- */
.section {
  max-width: 1000px;
  margin: 0 auto;
  padding: 5rem 1.5rem;
}

.section-title {
  font-family: var(--font-pixel);
  font-size: clamp(0.9rem, 3vw, 1.3rem);
  margin-bottom: 2.5rem;
  color: var(--text);
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
}

.section-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 2.5rem;
  align-items: start;
}

.prose p + p { margin-top: 1.1rem; }
.prose strong { color: var(--green); }
.prose-note { font-size: 0.85rem; margin-top: 1.4rem; }

/* ---------- stat card ---------- */
.stat-card {
  background: var(--bg-panel);
  border: 2px solid var(--border);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.4);
  padding: 1.4rem;
}

.ascii {
  color: var(--cyan);
  font-size: 0.78rem;
  line-height: 1.35;
  margin-bottom: 1.2rem;
  overflow-x: auto;
}

.stat-list { list-style: none; font-size: 0.88rem; }
.stat-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--border);
}
.stat-list li:last-child { border-bottom: none; }
.stat-k { color: var(--dim); }
.stat-k::before { content: "> "; color: var(--green); }
.stat-v { color: var(--text); text-align: right; }

/* ---------- cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.card {
  background: var(--bg-panel);
  border: 2px solid var(--border);
  padding: 1.6rem 1.4rem;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.4);
  transition: transform 0.1s steps(2), box-shadow 0.1s steps(2), border-color 0.1s;
}

.card:hover { transform: translate(-2px, -2px); }
.card-cyan:hover  { border-color: var(--cyan);  box-shadow: 8px 8px 0 rgba(82, 230, 216, 0.25); }
.card-pink:hover  { border-color: var(--pink);  box-shadow: 8px 8px 0 rgba(255, 95, 168, 0.25); }
.card-green:hover { border-color: var(--green); box-shadow: 8px 8px 0 rgba(138, 237, 63, 0.25); }

.card-icon { width: 40px; height: 40px; margin-bottom: 1.1rem; }
.card-icon svg { width: 100%; height: 100%; image-rendering: pixelated; }
.card-cyan  .card-icon { color: var(--cyan); }
.card-pink  .card-icon { color: var(--pink); }
.card-green .card-icon { color: var(--green); }

.card h3 {
  font-family: var(--font-pixel);
  font-size: 0.72rem;
  margin-bottom: 1rem;
  letter-spacing: 0.03em;
}
.card-cyan  h3 { color: var(--cyan); }
.card-pink  h3 { color: var(--pink); }
.card-green h3 { color: var(--green); }

.card p { font-size: 0.9rem; color: var(--text); }
.card-tags { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 0.55rem; }
.tag {
  font-size: 0.72rem;
  padding: 0.22rem 0.55rem;
  white-space: nowrap;
}
.tag-green { background: var(--green); color: #10230a; box-shadow: 2px 2px 0 #14601c; }
.tag-pink  { background: var(--pink);  color: #33081d; box-shadow: 2px 2px 0 #8f1550; }
.tag-cyan  { background: var(--cyan);  color: #062a26; box-shadow: 2px 2px 0 #1a7a70; }

/* ---------- creds ---------- */
.creds { display: grid; gap: 1.2rem; max-width: 720px; }

.cred {
  display: flex;
  gap: 1.2rem;
  align-items: baseline;
  background: var(--bg-panel);
  border: 2px solid var(--border);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.4);
  padding: 1.2rem 1.4rem;
  color: var(--text);
  transition: transform 0.1s steps(2), border-color 0.1s;
}
.cred:hover { transform: translate(-2px, -2px); border-color: var(--green); color: var(--text); }

.cred-badge {
  font-family: var(--font-pixel);
  font-size: 0.62rem;
  white-space: nowrap;
}

.cred-body { display: flex; flex-direction: column; gap: 0.15rem; }
.cred-body strong { color: var(--text); }
.cred-body em { font-style: normal; font-size: 0.82rem; color: var(--dim); }

/* ---------- research pubs ---------- */
.pubs { display: grid; gap: 1.2rem; max-width: 860px; }

.pub {
  display: flex;
  gap: 1.4rem;
  align-items: baseline;
  background: var(--bg-panel);
  border: 2px solid var(--border);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.4);
  padding: 1.2rem 1.4rem;
  color: var(--text);
  transition: transform 0.1s steps(2), border-color 0.1s;
}
.pub:hover { transform: translate(-2px, -2px); border-color: var(--cyan); color: var(--text); }

.pub-date {
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  color: var(--dim);
  white-space: nowrap;
}

.pub-body { display: flex; flex-direction: column; gap: 0.35rem; }
.pub-body strong { color: var(--text); }
.pub:hover .pub-body strong { color: var(--cyan); }
.pub-body em { font-style: normal; font-size: 0.85rem; color: var(--dim); }
.pub-more { font-size: 0.8rem; color: var(--green); }

/* ---------- research article ---------- */
.article {
  max-width: 780px;
  margin: 0 auto;
  padding: 4rem 1.5rem 5rem;
}

.article-kicker {
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  color: var(--dim);
  margin-bottom: 1.2rem;
}

.article-title {
  font-family: var(--font-pixel);
  font-size: clamp(0.95rem, 3vw, 1.4rem);
  line-height: 1.6;
  color: var(--green);
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
  margin-bottom: 1.4rem;
}

.article-meta {
  font-size: 0.85rem;
  color: var(--dim);
  padding-bottom: 1.6rem;
  margin-bottom: 2.4rem;
  border-bottom: 2px solid var(--border);
}

.article h2 {
  font-family: var(--font-pixel);
  font-size: 0.8rem;
  color: var(--cyan);
  margin: 2.8rem 0 1.1rem;
}
.article h2::before { content: "## "; color: var(--border); }

.article p { margin-bottom: 1.1rem; }
.article ul { margin: 0 0 1.1rem 1.2rem; }
.article li { margin-bottom: 0.4rem; }

.article code {
  background: var(--bg-raise);
  border: 1px solid var(--border);
  padding: 0.1em 0.35em;
  font-size: 0.88em;
  color: var(--cyan);
}

.article pre.code {
  background: var(--bg-panel);
  border: 2px solid var(--border);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.4);
  padding: 1.1rem 1.3rem;
  margin: 1.4rem 0;
  font-size: 0.82rem;
  line-height: 1.6;
  overflow-x: auto;
}
.article pre.code code { background: none; border: none; padding: 0; color: var(--text); }

.article .callout {
  border-left: 4px solid var(--green);
  background: var(--bg-panel);
  padding: 1rem 1.2rem;
  margin: 1.4rem 0;
  font-size: 0.9rem;
}

.article-back {
  display: inline-block;
  margin-top: 2.5rem;
  font-size: 0.9rem;
}

/* ---------- contact ---------- */
.contact { text-align: center; max-width: 640px; margin: 0 auto; }
.contact .prose { margin-bottom: 2rem; }

/* ---------- footer ---------- */
.footer {
  border-top: 2px solid var(--border);
  background: #120a26;
  position: relative;
}

.footer-walkway {
  position: relative;
  height: 34px;
  border-bottom: 1px dashed var(--border);
  overflow: hidden;
}

.critter {
  position: absolute;
  bottom: 4px;
  left: -60px;
  width: 44px;
  height: 20px;
  animation: walk 26s linear infinite;
}
.critter svg { width: 100%; height: 100%; image-rendering: pixelated; }

@keyframes walk {
  0%   { left: -60px;          transform: scaleX(1); }
  49%  { left: calc(100% + 20px); transform: scaleX(1); }
  50%  { left: calc(100% + 20px); transform: scaleX(-1); }
  99%  { left: -60px;          transform: scaleX(-1); }
  100% { left: -60px;          transform: scaleX(1); }
}

.footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1.6rem 1.5rem 2rem;
  text-align: center;
  font-size: 0.82rem;
}

.footer-hint { margin-top: 0.4rem; font-size: 0.72rem; opacity: 0.55; }

/* ---------- reveal on scroll (hidden state only when JS confirms) ---------- */
.reveal { transition: opacity 0.45s steps(6), transform 0.45s steps(6); }
body.js .reveal { opacity: 0; transform: translateY(14px); }
body.js .reveal.visible { opacity: 1; transform: none; }

/* ---------- glitch (nav logo hover + konami) ---------- */
@keyframes glitch {
  0%   { text-shadow: 2px 0 var(--pink), -2px 0 var(--cyan); }
  50%  { text-shadow: -2px 0 var(--pink), 2px 0 var(--cyan); }
  100% { text-shadow: 2px 0 var(--pink), -2px 0 var(--cyan); }
}

body.konami .hero-title { animation: glitch 0.25s steps(2) infinite; }
body.konami .grid-plane { animation-duration: 0.5s; opacity: 1; }
body.konami .critter    { animation-duration: 5s; }

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  .section-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .nav-links { gap: 1rem; font-size: 0.85rem; }
  .hero-content { padding-bottom: 7rem; }
}

@media (max-width: 480px) {
  .nav { padding: 0.8rem 1rem; }
  .nav-links { gap: 0.8rem; font-size: 0.8rem; }
  /* mobile: keep only research + contact */
  .nav-links li:nth-child(1),
  .nav-links li:nth-child(3),
  .nav-links li:nth-child(4) { display: none; }
  .term-body { font-size: 0.78rem; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grid-plane, .critter { animation: none; }
  .hopper { display: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}