:root {
  --bg: #0b0913;
  --ink: #f2f0f9;
  --dim: #a7a1ba;
  --faint: #6a6284;
  --v1: #8a7cff;
  --v2: #e75ce6;
  --grad: linear-gradient(92deg, var(--v1), var(--v2));
  --grad-flow: linear-gradient(92deg, var(--v1), var(--v2), var(--v1));
  --v1-soft: rgba(138, 124, 255, 0.35);
  --v1-faint: rgba(138, 124, 255, 0.12);
  --v2-soft: rgba(231, 92, 230, 0.3);
  --hairline: rgba(255, 255, 255, 0.09);
  --pass: #9d8cff;
  --warn: #f0b25f;
  --fail: #ff6b81;
  --display: "Sora", system-ui, sans-serif;
  --wide: "Unbounded", "Sora", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--display);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* nebula wash over the starfield — reacts to score */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 1.2s ease;
  background:
    radial-gradient(900px 620px at 12% -8%, rgba(138, 124, 255, 0.16), transparent 60%),
    radial-gradient(820px 620px at 92% 112%, rgba(231, 92, 230, 0.12), transparent 60%);
}

body.g-supernova::before {
  background:
    radial-gradient(1000px 700px at 12% -8%, rgba(138, 124, 255, 0.22), transparent 60%),
    radial-gradient(1000px 760px at 88% 110%, rgba(231, 92, 230, 0.28), transparent 62%);
}

body.g-bright::before {
  background:
    radial-gradient(940px 660px at 12% -8%, rgba(138, 124, 255, 0.2), transparent 60%),
    radial-gradient(900px 680px at 90% 112%, rgba(231, 92, 230, 0.18), transparent 61%);
}

body.g-faint::before,
body.g-dark::before {
  background:
    radial-gradient(820px 560px at 14% -8%, rgba(96, 108, 160, 0.14), transparent 60%),
    radial-gradient(760px 560px at 90% 112%, rgba(120, 100, 170, 0.1), transparent 60%);
}

#stars {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

.topbar, main, .site-footer { position: relative; z-index: 1; }

/* ---------- top bar ---------- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px clamp(20px, 4vw, 52px);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--wide);
  font-weight: 500;
  letter-spacing: 0.22em;
  font-size: 12px;
}

.wordmark .mark { width: 26px; height: 26px; color: #a99cff; transition: transform 0.5s ease, color 0.3s ease; }
.wordmark:hover .mark { transform: rotate(90deg); color: var(--v2); }

.byline {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 74vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px 90px;
  overflow: hidden;
}

/* UV scan-beam sweeping the hero */
.scan-beam {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 0;
  height: 2px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--v1) 35%, var(--v2) 65%, transparent);
  filter: blur(0.5px) drop-shadow(0 0 10px var(--v1-soft));
  opacity: 0;
  animation: beamSweep 9s ease-in-out infinite;
}

@keyframes beamSweep {
  0% { top: -2%; opacity: 0; }
  10% { opacity: 0.85; }
  50% { opacity: 0.4; }
  90% { opacity: 0.7; }
  100% { top: 102%; opacity: 0; }
}

.hero-inner {
  position: relative;
  max-width: 760px;
  text-align: center;
  z-index: 2;
}

.hero-inner > * { opacity: 0; animation: rise 0.75s ease forwards; }
.hero-inner > :nth-child(1) { animation-delay: 0.05s; }
.hero-inner > :nth-child(2) { animation-delay: 0.16s; }
.hero-inner > :nth-child(3) { animation-delay: 0.28s; }
.hero-inner > :nth-child(4) { animation-delay: 0.42s; }
.hero-inner > .scanning, .hero-inner > .scan-error { opacity: 1; animation: none; }

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

.kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 18px;
}

.hero h1 {
  font-size: clamp(38px, 6.4vw, 66px);
  line-height: 1.04;
  margin: 0 0 20px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

/* flowing gradient accents */
.accent, .grade-name, .dial-number, .grad-text {
  background: var(--grad-flow);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradFlow 7s linear infinite;
}

@keyframes gradFlow {
  to { background-position: 220% center; }
}

.accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
  padding-right: 0.04em;
}

.lede {
  color: var(--dim);
  font-size: clamp(16px, 2.2vw, 18px);
  max-width: 560px;
  margin: 0 auto 40px;
}

/* reticle rings behind the input */
.reticle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}

.ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.ring-a { width: min(600px, 90vw); height: min(600px, 90vw); animation: spin 90s linear infinite; border-top-color: var(--v1-soft); }
.ring-b { width: min(450px, 68vw); height: min(450px, 68vw); animation: spin 60s linear infinite reverse; border-bottom-color: var(--v2-soft); }
.ring-c { width: min(320px, 48vw); height: min(320px, 48vw); border-style: dashed; border-color: var(--v1-faint); animation: spin 120s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- scope form ---------- */
.scope-form {
  position: relative;
  display: flex;
  max-width: 540px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 6px;
  backdrop-filter: blur(12px);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.scope-form:focus-within {
  border-color: var(--v1);
  box-shadow: 0 0 0 1px var(--v1-faint), 0 0 48px var(--v1-faint);
}

#scope-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  padding: 13px 16px;
}

#scope-input::placeholder { color: var(--faint); }

#scope-btn, #scan-retry, #scope-again {
  background: var(--grad);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 13px 26px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

#scope-btn:hover, #scan-retry:hover, #scope-again:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
  box-shadow: 0 6px 30px var(--v1-soft);
}

#scope-btn:active, #scan-retry:active, #scope-again:active { transform: translateY(0); }
#scope-btn:disabled { opacity: 0.6; cursor: wait; }

/* ---------- scanning: spectrum sweep ---------- */
.scanning { margin-top: 8px; }

.scan-stage {
  position: relative;
  width: 148px;
  height: 148px;
  margin: 0 auto 22px;
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}

.pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--v1-soft);
  opacity: 0;
  animation: pulse 2.4s ease-out infinite;
}

.p2 { animation-delay: 0.8s; border-color: var(--v2-soft); }
.p3 { animation-delay: 1.6s; }

@keyframes pulse {
  0% { transform: scale(0.34); opacity: 0.9; }
  70% { opacity: 0.14; }
  100% { transform: scale(1.28); opacity: 0; }
}

.conic {
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 52%, var(--v1) 72%, var(--v2) 88%, transparent 93%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  animation: spin 1.15s linear infinite;
  filter: drop-shadow(0 0 10px var(--v1-soft));
}

.scan-cross {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sc-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.14);
  stroke-dasharray: 4 8;
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 10s linear infinite;
}

.sc-tick {
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1.5;
  animation: tickPulse 2.2s ease-in-out infinite;
}

.sc-dot { fill: var(--v2); animation: dotBlink 1.1s steps(2, start) infinite; }

@keyframes tickPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

@keyframes dotBlink { to { opacity: 0.25; } }

.lock-flash {
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--v2-soft), var(--v1-faint) 45%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}

.scanning.locked .scan-stage { transform: scale(0.86); }
.scanning.locked .pulse { animation: none; opacity: 0; }
.scanning.locked .conic {
  animation: none;
  background: conic-gradient(var(--v1), var(--v2), var(--v1));
}
.scanning.locked .sc-ring { animation: none; stroke: var(--v1-soft); stroke-dasharray: none; }
.scanning.locked .sc-tick { animation: none; opacity: 1; stroke: var(--v2); }
.scanning.locked .sc-dot { animation: none; }
.scanning.locked .lock-flash { animation: flash 0.7s ease-out forwards; }

@keyframes flash {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

.scan-line {
  font-family: var(--mono);
  font-size: 13px;
  color: #b9aefc;
  letter-spacing: 0.08em;
  min-height: 22px;
}

.scanning.locked .scan-line { color: var(--ink); }

/* ---------- error state ---------- */
.scan-error {
  max-width: 540px;
  margin: 0 auto;
  border-left: 2px solid var(--fail);
  border-radius: 0 16px 16px 0;
  background: linear-gradient(90deg, rgba(255, 107, 129, 0.09), transparent 70%);
  padding: 20px 22px;
  text-align: left;
}

.scan-error p {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 16px;
}

.scan-error p::before {
  content: "NO LOCK — ";
  color: var(--fail);
  letter-spacing: 0.1em;
}

/* ---------- report ---------- */
.report {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 24px clamp(16px, 3vw, 32px) 72px;
}

.report:not([hidden]) { animation: reportIn 0.6s ease; }

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

.nova-burst {
  position: absolute;
  top: 40px;
  right: clamp(16px, 8vw, 120px);
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231, 92, 230, 0.35), rgba(138, 124, 255, 0.12) 45%, transparent 70%);
  opacity: 0;
  transform: scale(0.2);
  pointer-events: none;
}

.nova-burst.go { animation: nova 1.4s ease-out forwards; }

@keyframes nova {
  0% { opacity: 0; transform: scale(0.2); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.6); }
}

.report-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.report-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #b9aefc;
  margin: 0 0 8px;
}

#report-host {
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  word-break: break-all;
}

.report-meta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faint);
  margin: 0;
  word-break: break-all;
}

.report-score { position: relative; width: 156px; height: 156px; flex: none; }

.dial { width: 156px; height: 156px; transform: rotate(-90deg); overflow: visible; }

.dial-track { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 7; }

.dial-arc {
  fill: none;
  stroke: url(#dialGrad);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 389.56;
  stroke-dashoffset: 389.56;
  filter: drop-shadow(0 0 10px var(--v1-soft));
}

.dial-pulse {
  fill: none;
  stroke: var(--v2);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.dial-pulse.ping { animation: dialPing 0.75s ease-out; }

@keyframes dialPing {
  0% { opacity: 0.85; transform: scale(0.9); }
  100% { opacity: 0; transform: scale(1.28); }
}

.dial-comet {
  fill: #fff;
  opacity: 0;
  filter: drop-shadow(0 0 7px var(--v2)) drop-shadow(0 0 3px #fff);
}

.dial-comet.on { opacity: 1; }

.dial-readout {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dial-number {
  font-family: var(--wide);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
}

.dial-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--faint);
  margin-top: 6px;
}

.grade-line {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding: 6px 0 10px;
  margin-bottom: 26px;
}

.grade-name {
  font-family: var(--wide);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  filter: drop-shadow(0 0 12px var(--v1-soft));
}

body.g-supernova .grade-name { animation-duration: 3.5s; }

.grade-copy { color: var(--dim); font-size: 15px; }

/* dossier-style categories, no boxes */
.cats { display: flex; flex-direction: column; gap: 40px; }

.cat {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.cat.in { opacity: 1; transform: none; }

.cat-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 12px;
}

.cat-index {
  font-family: var(--wide);
  font-weight: 500;
  font-size: 12px;
  color: var(--faint);
  letter-spacing: 0.1em;
}

.cat-head h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.cat-head::after {
  content: "";
  flex: 1;
  height: 1px;
  align-self: center;
  background: linear-gradient(90deg, var(--hairline), transparent);
}

.cat-score {
  font-family: var(--mono);
  font-size: 13px;
  color: #b9aefc;
  white-space: nowrap;
}

.cat-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
  margin: 0 0 14px;
}

.cat-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--grad);
  box-shadow: 0 0 12px var(--v1-soft);
  transition: width 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cat.in .cat-bar-fill { width: var(--w, 0); }

.cat-blurb {
  color: var(--faint);
  font-size: 13.5px;
  margin: 0 0 10px;
  max-width: 560px;
}

.rows { display: flex; flex-direction: column; margin: 0 -10px; }

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 11px 10px;
  border-radius: 10px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.4s ease, transform 0.4s ease, background 0.2s ease;
}

.row:last-child { border-bottom: none; }

.row.in { opacity: 1; transform: none; }

.row:hover { background: linear-gradient(90deg, rgba(138, 124, 255, 0.1), transparent 62%); }

.row-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  position: relative;
  top: -1px;
}

.row-dot.pass { background: var(--pass); box-shadow: 0 0 10px var(--v1-soft); }
.row-dot.warn { background: var(--warn); box-shadow: 0 0 10px rgba(240, 178, 95, 0.4); }
.row-dot.fail { background: var(--fail); box-shadow: 0 0 10px rgba(255, 107, 129, 0.45); }
.row-dot.info { background: var(--faint); }

.row-label { font-size: 14px; font-weight: 600; }

.row-value {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--dim);
  margin-left: auto;
  text-align: right;
  word-break: break-word;
  max-width: 58%;
}

.row-note {
  flex-basis: 100%;
  font-size: 12.5px;
  color: var(--faint);
  padding-left: 19px;
}

.report-actions { text-align: center; margin-top: 48px; }

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.in { opacity: 1; transform: none; }

/* ---------- explainer ---------- */
.explain {
  max-width: 880px;
  margin: 0 auto;
  padding: 48px clamp(16px, 3vw, 32px) 84px;
}

.explain h2 {
  font-size: clamp(26px, 3.6vw, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 34px;
}

.explain h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
  margin-top: 14px;
}

.explain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 36px 48px;
}

.explain-grid article { position: relative; padding-left: 54px; }

.explain-grid article:nth-child(2) { transition-delay: 0.08s; }
.explain-grid article:nth-child(3) { transition-delay: 0.16s; }
.explain-grid article:nth-child(4) { transition-delay: 0.24s; }

.explain-grid .idx {
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--wide);
  font-weight: 700;
  font-size: 17px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: filter 0.3s ease, transform 0.3s ease;
}

.explain-grid article:hover .idx { filter: drop-shadow(0 0 10px var(--v1-soft)); transform: translateY(-2px); }

.explain-grid h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.explain-grid p { margin: 0; color: var(--dim); font-size: 14.5px; }

.explain-close {
  margin: 40px auto 0;
  max-width: 620px;
  text-align: center;
  color: var(--dim);
  font-size: 16px;
}

/* ---------- FAQ accordion ---------- */
.faq { padding-top: 0; }

.faq-list { max-width: 760px; }

.faq-item { border-bottom: 1px solid var(--hairline); }

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 19px 2px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  transition: color 0.2s ease;
}

.faq-item summary:hover { color: #cabffc; }

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 19px;
  color: var(--v2);
  flex: none;
  transition: transform 0.25s ease;
}

.faq-item summary:hover::after { transform: scale(1.25); }
.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item[open] p { animation: faqReveal 0.4s ease; }

@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.faq-item p {
  margin: 0;
  padding: 0 2px 20px;
  color: var(--dim);
  font-size: 14.5px;
  max-width: 680px;
}

/* ---------- footer ---------- */
.site-footer { padding: 30px 20px 44px; text-align: center; }

.site-footer p { font-size: 13px; color: var(--faint); margin: 0 0 8px; }

.site-footer strong { color: var(--dim); }

.footer-links a { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--hairline); transition: color 0.2s ease, border-color 0.2s ease; }

.footer-links a:hover { color: var(--ink); border-bottom-color: var(--v1); }

/* ---------- legal page ---------- */
.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px clamp(16px, 3vw, 32px) 80px;
}

.legal h1 {
  font-size: clamp(30px, 4.6vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.legal .updated {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faint);
  margin: 0 0 44px;
}

.legal h2 {
  font-size: 21px;
  font-weight: 700;
  margin: 44px 0 14px;
  letter-spacing: -0.01em;
}

.legal h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
  margin-top: 10px;
}

.legal p { color: var(--dim); font-size: 15px; margin: 0 0 14px; }

.legal a { color: #b9aefc; text-decoration: none; border-bottom: 1px solid var(--hairline); }

.legal a:hover { color: var(--ink); }

@media (max-width: 640px) {
  .report-head { flex-direction: column-reverse; align-items: flex-start; }
  .byline { display: none; }
  .row-value { margin-left: 19px; text-align: left; max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ring, .pulse, .conic, .sc-ring, .sc-tick, .sc-dot, .scan-beam,
  .accent, .grade-name, .dial-number, .hero-inner > * {
    animation: none;
    opacity: 1;
  }
  .cat, .row, .scan-stage, .reveal { transition: none; opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; }
}