/* Blindspot coming soon. Authored at 390px, widened only where it earns it. */

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding: 96px 0 56px;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.78;
  transform: scale(1.04);
}

/* The scrim keeps the headline at AA contrast over moving footage. It is weighted
   to the left, where the type sits, so the footage stays visible on the right
   instead of being flattened everywhere to protect one column of text. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(7, 7, 11, 0.94) 0%, rgba(7, 7, 11, 0.86) 34%, rgba(7, 7, 11, 0.42) 68%, rgba(7, 7, 11, 0.5) 100%),
    linear-gradient(to bottom, rgba(7, 7, 11, 0.5), rgba(7, 7, 11, 0.35) 45%, rgba(7, 7, 11, 0.92) 88%, var(--void));
}

/* On a phone the type spans the full width, so the scrim has to as well. */
@media (max-width: 699px) {
  .hero__scrim {
    background:
      radial-gradient(130% 70% at 50% 12%, rgba(7, 7, 11, 0.42) 0%, rgba(7, 7, 11, 0.86) 58%, var(--void) 100%),
      linear-gradient(to bottom, rgba(7, 7, 11, 0.55), rgba(7, 7, 11, 0.88) 70%, var(--void));
  }
  .hero__media video { opacity: 0.62; }
}

.brandline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 44px;
}

.brandline svg,
.brandline img {
  width: 38px;
  height: 38px;
  color: var(--org);
  filter: drop-shadow(0 0 18px rgba(249, 115, 22, 0.35));
}

.brandline b {
  font-family: var(--display);
  font-variation-settings: "wdth" 122;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.status {
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(14, 14, 22, 0.6);
  backdrop-filter: blur(6px);
}

.status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--org);
  box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7);
  animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
  70% { box-shadow: 0 0 0 9px rgba(249, 115, 22, 0); }
  100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}

.hero h1 {
  font-size: clamp(43px, 13.4vw, 108px);
  margin: 0;
}

/* The two halves of the promise are set against each other, not run together. */
.hero h1 .see { display: block; color: var(--ink); }

.hero h1 .show {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--org);
  text-shadow: 0 0 44px rgba(249, 115, 22, 0.28);
}

.hero__lede {
  margin-top: 22px;
  max-width: 46ch;
  color: #c3c3d4;
  font-size: 16.5px;
}

.hero__lede b { color: var(--ink); font-weight: 600; }

/* -------------------------------------------------------------- capture */

.capture { margin-top: 30px; max-width: 460px; }

.capture form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.capture input {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: rgba(14, 14, 22, 0.86);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 15px 16px;
  transition: border-color 0.18s ease;
}

.capture input::placeholder { color: var(--faint); }
.capture input:focus { border-color: var(--org); outline: none; }

.btn {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  border-radius: var(--r);
  padding: 15px 22px;
  color: #12060a;
  background: linear-gradient(180deg, var(--org-2), var(--org));
  box-shadow: 0 10px 30px -12px rgba(249, 115, 22, 0.85);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.btn:hover { transform: translateY(-1px); box-shadow: 0 16px 34px -12px rgba(249, 115, 22, 0.95); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: 0.6; cursor: default; transform: none; }

.btn.small { padding: 11px 16px; font-size: 14px; }

.btn.ghost {
  display: block;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  box-shadow: none;
}

.btn.ghost:hover { border-color: var(--org); box-shadow: none; }

.invited {
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--blue-lift);
  border-left: 2px solid var(--blue-lift);
  padding-left: 12px;
}

/* Recognised visitor. The signup button is gone and their rank stands in its
   place, because once you are on the list the only number that matters is where
   you sit on it. The whole card is the control that opens the invite link. */
.rank { perspective: 1000px; max-width: 460px; }

.rank__card {
  position: relative;
  display: grid;
  width: 100%;
  gap: 2px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  padding: 20px 20px 18px;
  border: 1px solid rgba(249, 115, 22, 0.34);
  border-radius: var(--r-lg);
  background:
    radial-gradient(520px circle at var(--mx, 20%) var(--my, 0%), rgba(249, 115, 22, 0.16), transparent 58%),
    linear-gradient(165deg, var(--panel-2), var(--panel));
  box-shadow: 0 26px 50px -32px rgba(249, 115, 22, 0.55);
  overflow: hidden;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.3s ease;
  animation: rank-in 0.66s cubic-bezier(0.2, 0.85, 0.3, 1) both;
}

.rank__card:hover { border-color: var(--org); }

/* Arrives by turning to face the reader, the same gesture the modal and the
   surveillance panel use, so the page keeps one motion language. */
@keyframes rank-in {
  from { opacity: 0; transform: perspective(900px) rotateX(-16deg) translate3d(0, 20px, -60px); }
  to { opacity: 1; transform: none; }
}

/* A single slow pass of light, so the card reads as a physical object without
   ever demanding attention while someone is reading the page. */
.rank__sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.07) 50%, transparent 60%);
  transform: translateX(-120%);
  animation: rank-sheen 6.5s ease-in-out 1.2s infinite;
}

@keyframes rank-sheen {
  0%, 62% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

.rank__label {
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  transform: translateZ(18px);
}

.rank__figure {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
  transform: translateZ(42px);
}

.rank__figure em {
  font-style: normal;
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  color: var(--org);
  opacity: 0.75;
}

.rank__figure strong {
  font-family: var(--display);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: clamp(46px, 14vw, 62px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #ffd9b8, var(--org) 78%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rank__of { font-size: 12.5px; color: var(--faint); }

.rank__stats {
  display: flex;
  gap: 26px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  transform: translateZ(22px);
}

.rank__stats span { display: grid; gap: 3px; }

.rank__stats i {
  font-style: normal;
  font-family: var(--data);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.rank__stats b { font-size: 19px; font-weight: 500; color: var(--ink); }

.rank__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--org-2);
  transform: translateZ(30px);
}

.rank__cta svg { width: 15px; height: 15px; transition: transform 0.25s ease; }
.rank__card:hover .rank__cta svg { transform: translateX(4px); }

.rank__note {
  margin-top: 10px;
  font-family: var(--data);
  font-size: 11.5px;
  color: var(--faint);
}

.capture small { display: block; margin-top: 11px; color: var(--faint); font-size: 13px; }

.capture .msg { margin-top: 11px; font-size: 14px; min-height: 1.4em; }
.capture .msg.ok { color: var(--up); }
.capture .msg.err { color: var(--down); }

/* ---------------------------------------------------------- proof strip */

.proof {
  margin-top: 46px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
}

.proof div { background: var(--void); padding: 15px 16px; min-width: 0; }

.proof dt {
  font-family: var(--display);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: 25px;
  line-height: 1;
  color: var(--ink);
}

.proof dd {
  margin: 6px 0 0;
  font-family: var(--data);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* -------------------------------------------------------------- section */

.section { padding: 76px 0; border-top: 1px solid var(--line-soft); }
.section h2 { font-size: clamp(30px, 8vw, 52px); margin-top: 18px; max-width: 20ch; }
.section > .wrap > p.sub { margin-top: 16px; max-width: 56ch; color: var(--muted); }

/* --------------------------------------------------- the readout, signature */

.readout {
  margin-top: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(20, 20, 31, 0.9), rgba(10, 10, 17, 0.9));
  overflow: hidden;
  position: relative;
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.9);
}

.readout__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 7, 11, 0.55);
  font-family: var(--data);
  font-size: 11.5px;
  color: var(--muted);
}

/* The address is the only thing Ghost removes, so it is the only thing that
   goes dark when the sweep passes. The book stays fully legible on purpose. */
.readout__bar .addr {
  display: inline-grid;
  min-width: 0;
  overflow: hidden;
}

.addr__real,
.addr__mask {
  grid-area: 1 / 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.addr__real {
  color: var(--org-2);
  animation: addr-hide 7s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}

.addr__mask {
  color: var(--blue-lift);
  letter-spacing: 0.08em;
  opacity: 0;
  animation: addr-show 7s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}

@keyframes addr-hide { 0%, 48% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes addr-show { 0%, 48% { opacity: 0; } 54%, 100% { opacity: 1; } }
.readout__bar .live { display: inline-flex; align-items: center; gap: 6px; flex: none; letter-spacing: 0.1em; }
.readout__bar .live i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-lift); }

.readout__head {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
}

.readout__head div { background: rgba(7, 7, 11, 0.5); padding: 14px 15px; min-width: 0; }

.readout__head span {
  display: block;
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.readout__head strong {
  display: block;
  margin-top: 5px;
  font-family: var(--data);
  font-size: 17px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

table.book {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--data);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  min-width: 560px;
}

table.book th {
  text-align: right;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

table.book th:first-child,
table.book td:first-child { text-align: left; }

table.book td {
  text-align: right;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
  color: #c9c9dc;
}

table.book tr:last-child td { border-bottom: 0; }
table.book .coin { color: var(--ink); font-weight: 500; }

.tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid currentColor;
}

.tag.long { color: var(--up); }
.tag.short { color: var(--down); }
.pos { color: var(--up); }
.neg { color: var(--down); }

/* The sweep is the product thesis in one gesture: it reads the book, then the
   wedge it has passed goes dark and stays dark. */
.readout__sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 42%,
    rgba(90, 141, 255, 0.1) 48%,
    rgba(90, 141, 255, 0.5) 50%,
    rgba(90, 141, 255, 0.1) 52%,
    transparent 58%
  );
  transform: translateX(-100%);
  animation: sweep 7s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}

@keyframes sweep {
  0%, 12% { transform: translateX(-100%); }
  46%, 100% { transform: translateX(100%); }
}

.redacted {
  position: relative;
  color: transparent !important;
}

.redacted::after {
  content: "";
  position: absolute;
  inset: 6px 12px;
  border-radius: 3px;
  background: repeating-linear-gradient(
    -45deg, var(--line) 0 5px, var(--panel-2) 5px 10px
  );
}

.readout__foot {
  padding: 14px 15px;
  border-top: 1px solid var(--line);
  background: rgba(7, 7, 11, 0.5);
  font-family: var(--data);
  font-size: 11px;
  color: var(--faint);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.caption { margin-top: 20px; color: var(--muted); max-width: 60ch; }
.caption b { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------- cards */

.cards {
  margin-top: 34px;
  display: grid;
  gap: 16px;
  perspective: 1200px;
}

.card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--panel-2), var(--panel));
  padding: 24px 22px 26px;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.3s ease;
  will-change: transform;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 0%),
    rgba(249, 115, 22, 0.13),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.card:hover { border-color: rgba(249, 115, 22, 0.4); }
.card:hover::before { opacity: 1; }

.card__mark {
  width: 30px;
  height: 30px;
  color: var(--org);
  transform: translateZ(28px);
}

.card h3 {
  margin-top: 16px;
  font-size: 25px;
  transform: translateZ(20px);
}

.card p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 15px;
  transform: translateZ(12px);
}

.card .role {
  margin-top: 16px;
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
  transform: translateZ(10px);
}

/* -------------------------------------------------------------- venues */

.venues {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
}

.venue {
  background: var(--void);
  padding: 16px 15px;
  min-width: 0;
  display: grid;
  gap: 4px;
  align-content: start;
}

.venue b {
  font-family: var(--display);
  font-variation-settings: "wdth" 112;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.venue span { color: var(--faint); font-size: 12.5px; }

.chip {
  justify-self: start;
  margin-top: 6px;
  font-family: var(--data);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 5px;
  border: 1px solid currentColor;
}

.chip.on { color: var(--org); }
.chip.test { color: var(--blue-lift); }

@media (min-width: 700px) {
  .venues { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------- honesty */

.honesty {
  border: 1px solid var(--line);
  border-left: 2px solid var(--blue-lift);
  border-radius: var(--r);
  background: linear-gradient(100deg, var(--blue-dim), transparent 60%);
  padding: 24px 22px;
  margin-top: 30px;
}

.honesty h3 { font-size: 21px; }
.honesty p { margin-top: 12px; color: #b9b9cc; max-width: 62ch; }
.honesty p + p { margin-top: 10px; }
.honesty strong { color: var(--ink); }

/* --------------------------------------------------------------- modal */

.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }

.modal__back {
  position: absolute;
  inset: 0;
  background: rgba(3, 3, 6, 0.72);
  backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.modal.open .modal__back { opacity: 1; }

/* The card arrives by turning to face the reader, which is the same gesture the
   surveillance panel uses, so the page has one motion language rather than two. */
.modal__card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 90svh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(168deg, var(--panel-2), var(--panel));
  padding: 26px 22px 24px;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.95);
  transform: perspective(1200px) rotateX(-11deg) translateY(22px) scale(0.96);
  opacity: 0;
  transition: transform 0.34s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.24s ease;
}

.modal.open .modal__card { transform: none; opacity: 1; }

.modal__x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.modal__x:hover { color: var(--ink); border-color: var(--org); }
.modal__x svg { width: 16px; height: 16px; }

.modal__mark { width: 44px; height: 44px; color: var(--org); }
.modal__card h3 { margin-top: 16px; font-size: 27px; }
.modal__sub { margin-top: 9px; color: var(--muted); font-size: 15px; }

.standing {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
}

.standing div { background: var(--void); padding: 13px 12px; min-width: 0; }

.standing span {
  display: block;
  font-family: var(--data);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.standing strong {
  display: block;
  margin-top: 4px;
  font-size: 22px;
  font-weight: 500;
  color: var(--org-2);
}

.modal__lead { margin-top: 18px; font-size: 15px; }

.copyrow { margin-top: 10px; display: flex; gap: 8px; }

.copyrow input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--ink);
  background: rgba(7, 7, 11, 0.75);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 13px;
}

.copyrow .btn { flex: none; padding: 12px 16px; }
#mShare { margin-top: 9px; }
.modal__fine { margin-top: 16px; font-size: 12.5px; color: var(--faint); }

/* -------------------------------------------------------------- reveal */

.motion .reveal {
  opacity: 0;
  transform: perspective(1000px) rotateX(-7deg) translate3d(0, 26px, 0);
  transition:
    opacity 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) var(--rd, 0ms),
    transform 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) var(--rd, 0ms);
}

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

/* The readout sets its own transform from scroll, so it must not be reset here. */
.motion .readout.reveal.in { transform: perspective(1400px); }

/* -------------------------------------------------------------- footer */

.foot {
  border-top: 1px solid var(--line-soft);
  padding: 34px 0 46px;
  color: var(--faint);
  font-size: 14px;
}

.foot__row { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: space-between; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--org); }

/* ---------------------------------------------------------- wider views */

@media (min-width: 700px) {
  :root { --gut: 32px; }
  .capture form { flex-direction: row; }
  .capture input { flex: 1 1 auto; }
  .btn { flex: none; }
  .proof { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .readout__head { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { padding-top: 112px; }
}

@media (min-width: 1040px) {
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .section { padding: 104px 0; }
  .hero__lede { font-size: 18px; }
}

/* Motion is a choice the visitor gets to make. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .readout__sweep { animation: none; opacity: 0; }
  .status i { animation: none; }
  .addr__real { animation: none; opacity: 1; }
  .addr__mask { animation: none; opacity: 0; }
  .rank__card { animation: none; transform: none !important; }
  .rank__sheen { animation: none; opacity: 0; }
  .rank__card:hover .rank__cta svg { transform: none; }
  .modal__card { transform: none; opacity: 1; transition: none; }
  .modal__back { opacity: 1; transition: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .card { transition: border-color 0.3s ease; transform: none !important; }
  .hero__media video { display: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}