/* ==========================================================================
   Ubiquity One — marketing site
   --------------------------------------------------------------------------
   The palette is the loan. Teal is principal, wattle is interest, ink is the
   contract, paper is what it prints on. Colour carries meaning here, so no
   third accent gets invented for decoration: the primary button is teal
   because teal is the thing the borrower is actually paying down.
   ========================================================================== */

:root {
  color-scheme: light;

  --paper:      #FCFDFB;   /* page            */
  --paper-warm: #F4F8F5;   /* alternate band  */
  --card:       #FFFFFF;   /* lifted surface  */
  --mist:       #DFEAE5;   /* rules, borders  */
  --ink:        #0C2A25;   /* type            */
  --slate:      #5A716C;   /* secondary type  */
  --principal:  #0E7C6B;
  --principal-d:#0A5D50;
  --interest:   #E0A02E;

  --masthead-bg:      rgba(252, 253, 251, 0.82);
  --btn-on-brand:     #FFFFFF;
  --glyph-bg:         #0C2A25;
  --glyph-fg:         #4FD1B9;
  --shadow:           rgba(12, 42, 37, 0.30);

  /* The closing panel inverts against the page in both themes. */
  --panel-bg:         #0C2A25;
  --panel-fg:         #FCFDFB;
  --panel-fg-soft:    rgba(252, 253, 251, 0.70);
  --panel-fg-faint:   rgba(252, 253, 251, 0.55);
  --panel-field-bg:   rgba(252, 253, 251, 0.06);
  --panel-field-bd:   rgba(252, 253, 251, 0.18);
  --panel-placeholder:rgba(252, 253, 251, 0.34);
  --panel-focus:      #4FD1B9;
  --ok:               #7FE3CD;
  --warn:             #F0BE6A;

  /* Wide by default: the bands are already full-bleed, this is how much of
     them the content is allowed to use. Line lengths stay readable because the
     prose blocks carry their own ch-based caps. */
  --measure: 1920px;

  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.16vw, 1.09rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.38vw, 1.42rem);
  --step-2:  clamp(1.55rem, 1.36rem + 0.90vw, 2.20rem);
  --step-3:  clamp(2.05rem, 1.62rem + 2.05vw, 3.40rem);
  --step-4:  clamp(2.55rem, 1.66rem + 4.20vw, 5.40rem);

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body:    "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;
}

/* --------------------------------------------------------------------------
   Dark is a second reading of the same palette, not an inversion. Principal
   and interest brighten just enough to hold their contrast against a deep
   eucalypt page; they remain the only two accents, and they still mean the
   same two things.
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --paper:      #071A17;
  --paper-warm: #0C2420;
  --card:       #123029;
  --mist:       #1E3D36;
  --ink:        #E9F3EE;
  --slate:      #94ABA4;
  --principal:  #35C9AE;
  --principal-d:#54DDC4;
  --interest:   #F0B94E;

  --masthead-bg:      rgba(7, 26, 23, 0.86);
  --btn-on-brand:     #04211C;
  --glyph-bg:         #35C9AE;
  --glyph-fg:         #04211C;
  --shadow:           rgba(0, 0, 0, 0.55);

  --panel-bg:         #0C2420;
  --panel-fg:         #E9F3EE;
  --panel-fg-soft:    rgba(233, 243, 238, 0.70);
  --panel-fg-faint:   rgba(233, 243, 238, 0.55);
  --panel-field-bg:   rgba(233, 243, 238, 0.05);
  --panel-field-bd:   rgba(233, 243, 238, 0.16);
  --panel-placeholder:rgba(233, 243, 238, 0.32);
  --panel-focus:      #35C9AE;
  --ok:               #6FDCC4;
  --warn:             #F0BE6A;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
b  { font-weight: 600; }

code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--mist);
  padding: 0.08em 0.34em;
  border-radius: 3px;
}

a { color: inherit; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--panel-bg);
  color: var(--panel-fg);
  padding: 0.7rem 1rem;
  z-index: 50;
}
.skip:focus { left: 0; }

/* --- shared bits --------------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--slate);
}
.eyebrow--light { color: var(--panel-fg-soft); }

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--body);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1;
  padding: 0.92em 1.5em;
  border: 1.5px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease,
              border-color 0.18s ease, color 0.18s ease;
}
.btn--solid { --btn-bg: var(--principal); --btn-fg: var(--btn-on-brand); --btn-bd: var(--principal); }
.btn--solid:hover { --btn-bg: var(--principal-d); --btn-bd: var(--principal-d); }
.btn--ghost { --btn-bd: var(--mist); }
.btn--ghost:hover { --btn-bd: var(--ink); }
.btn:hover { transform: translateY(-1.5px); }
.btn--sm { padding: 0.68em 1.15em; font-size: var(--step--1); }
.btn--wide { width: 100%; padding-block: 1.05em; }

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

/* --- masthead ------------------------------------------------------------ */

.masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.9rem clamp(1rem, 2.5vw, 2rem);
  background: var(--masthead-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mist);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: -0.03em;
  text-decoration: none;
  margin-right: auto;
}
.wordmark em { font-style: normal; font-weight: 400; color: var(--principal); }
.wordmark__glyph { width: 26px; height: 26px; flex: none; }
.wordmark__glyph rect { fill: var(--glyph-bg); }
.wordmark__glyph path { stroke: var(--glyph-fg); stroke-width: 3.4; fill: none; stroke-linecap: round; }

.masthead__nav {
  display: flex;
  gap: 1.6rem;
  font-size: var(--step--1);
  color: var(--slate);
}
.masthead__nav a { text-decoration: none; }
.masthead__nav a:hover { color: var(--ink); }

@media (max-width: 820px) { .masthead__nav { display: none; } }

/* Theme switch: one mark carrying three states — ring alone for auto, half
   filled for light, half rotated for dark. No sun, no moon. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.themetoggle {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  padding: 0;
  border: 1.5px solid var(--mist);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.18s ease;
}
.themetoggle:hover { border-color: var(--ink); }

.themetoggle__disc {
  width: 17px; height: 17px;
  transition: transform 0.45s cubic-bezier(0.62, 0, 0.3, 1);
}
.themetoggle__ring { fill: none; stroke: var(--ink); stroke-width: 1.7; }
.themetoggle__half { fill: var(--ink); transition: opacity 0.25s ease; }

/* Three states from one mark. The whole glyph rotates rather than the half
   alone, which keeps the transform on an HTML element and avoids SVG
   transform-origin quirks — a rotated circle is indistinguishable anyway. */
.themetoggle[data-mode="auto"]  .themetoggle__half { opacity: 0; }
.themetoggle[data-mode="light"] .themetoggle__disc { transform: rotate(0deg); }
.themetoggle[data-mode="dark"]  .themetoggle__disc { transform: rotate(180deg); }

/* Auto is the uncommitted state, so the ring sits back a little until the
   visitor takes a side. */
.themetoggle[data-mode="auto"] .themetoggle__ring { opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
  .themetoggle__disc,
  .themetoggle__half { transition: none; }
}

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

.hero {
  max-width: var(--measure);
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 6.5rem) clamp(1rem, 2.5vw, 2rem) clamp(2rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; gap: 2.75rem; }
}

.hero__head {
  font-size: var(--step-4);
  margin-top: 1.1rem;
}
.hero__head-alt { color: var(--slate); font-weight: 400; }
.hero__count {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.86em;
  color: var(--principal);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.lede {
  max-width: 46ch;
  margin-top: 1.35rem;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--slate);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2.1rem;
}

/* --- signature: the schedule -------------------------------------------- */

.schedule {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--mist);
  border-radius: 18px;
  padding: clamp(1rem, 2vw, 1.6rem);
  box-shadow:
    0 1px 2px rgba(12, 42, 37, 0.04),
    0 18px 44px -28px var(--shadow);
}

.schedule__meta,
.schedule__readout {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}
.schedule__meta { padding-bottom: 1.05rem; }
.schedule__readout {
  margin-top: 1.05rem;
  padding-top: 1.05rem;
  border-top: 1px solid var(--mist);
}

.schedule__meta .k,
.schedule__readout .k {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--slate);
}
.schedule__meta .v,
.schedule__readout .v {
  display: block;
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  margin-top: 0.25rem;
  white-space: nowrap;
}
.ro--interest  .v { color: var(--interest); }
.ro--principal .v { color: var(--principal); }

/* Four columns of tabular currency will not fit a phone. Two will. */
@media (max-width: 620px) {
  .schedule__meta,
  .schedule__readout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
}

.schedule__plot { position: relative; }

.plot {
  display: block;
  width: 100%;
  height: clamp(150px, 22vw, 300px);
  overflow: visible;
}
/* Bar fills live here rather than on the elements, so the figure follows the
   theme without being redrawn. */
.bar--interest  { fill: var(--interest); }
.bar--principal { fill: var(--principal); opacity: 0.92; }

.plot [data-plot="balance"] {
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.5;
}

.plot__scrub {
  position: absolute;
  inset: 0;
  cursor: ew-resize;
}
.plot__scrub i {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 1px;
  background: var(--ink);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.plot__scrub.is-live i { opacity: 0.55; }

.schedule__cap {
  margin-top: 1rem;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--slate);
  max-width: 58ch;
}

/* --- crossover statement ------------------------------------------------- */

.crossover {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 2.5vw, 2rem);
  border-top: 1px solid var(--mist);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
}
@media (max-width: 860px) {
  .crossover { grid-template-columns: 1fr; gap: 1.25rem; }
}

.crossover__line {
  font-family: var(--display);
  font-size: var(--step-2);
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.crossover__line b {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.86em;
  font-variant-numeric: tabular-nums;
  color: var(--principal);
  white-space: nowrap;
}
.crossover__note { color: var(--slate); }

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

.section {
  padding: clamp(3.5rem, 8vw, 7rem) clamp(1rem, 2.5vw, 2rem);
}
.section--tint {
  background: var(--paper-warm);
  border-block: 1px solid var(--mist);
}

.section__head {
  max-width: var(--measure);
  margin-inline: auto;
}
.section__head h2 {
  font-size: var(--step-3);
  margin-top: 0.9rem;
  max-width: 24ch;
}
.section__lede {
  margin-top: 1.15rem;
  max-width: 56ch;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--slate);
}

/* --- phases: a real sequence, so it is numbered ------------------------- */

.phases {
  max-width: var(--measure);
  margin: clamp(2.25rem, 5vw, 3.5rem) auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--mist);
  border: 1px solid var(--mist);
  border-radius: 14px;
  overflow: hidden;
}
@media (max-width: 900px) { .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .phases { grid-template-columns: 1fr; } }

.phases li {
  background: var(--paper);
  padding: 1.3rem 1.25rem 1.5rem;
  transition: background-color 0.2s ease;
}
.phases li:hover { background: var(--card); }

.phases__n {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--principal);
}
.phases h3 {
  font-size: var(--step-1);
  margin-top: 0.5rem;
  letter-spacing: -0.018em;
}
.phases p {
  margin-top: 0.45rem;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--slate);
}

/* --- seats ---------------------------------------------------------------
   The role label is the structure. "Owns the book / Manages the book / Brings
   the loan" states the actual relationship between the three, which is more
   use to a reader than three identical cards would be. The lender leads and is
   given the wider column, because the lender is who this is built for.
   ------------------------------------------------------------------------- */

.seats {
  max-width: var(--measure);
  margin: clamp(2.25rem, 5vw, 3.5rem) auto 0;
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: clamp(1.25rem, 3vw, 2.25rem);
}
@media (max-width: 980px) { .seats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .seats { grid-template-columns: 1fr; } }

.seat {
  border-top: 2px solid var(--mist);
  padding-top: 1.1rem;
}
.seat--primary { border-top-color: var(--principal); }
@media (max-width: 980px) { .seat--primary { grid-column: 1 / -1; } }

.seat__role {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--slate);
}
.seat--primary .seat__role { color: var(--principal); }

.seat h3 {
  font-size: var(--step-2);
  margin-top: 0.55rem;
  letter-spacing: -0.024em;
}
.seat p + p,
.seat h3 + p { margin-top: 0.8rem; }
.seat > p:not(.seat__role):not(.seat__note) {
  color: var(--slate);
  font-size: var(--step--1);
  line-height: 1.6;
  max-width: 42ch;
}
.seat__note {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--ink);
}

/* --- pillars ------------------------------------------------------------- */

.pillars {
  max-width: var(--measure);
  margin: clamp(2.25rem, 5vw, 3.5rem) auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
}
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } }

.pillar {
  background: var(--card);
  border: 1px solid var(--mist);
  border-radius: 14px;
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
}
.pillar h3 {
  font-size: var(--step-1);
  max-width: 20ch;
}
.pillar p { margin-top: 0.85rem; color: var(--slate); font-size: var(--step--1); line-height: 1.6; }
.pillar__proof {
  border-top: 1px solid var(--mist);
  padding-top: 0.85rem;
  color: var(--ink);
}

/* --- regimes ------------------------------------------------------------- */

.regimes {
  max-width: var(--measure);
  margin: clamp(2.25rem, 5vw, 3.5rem) auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.4vw, 2rem) clamp(1.1rem, 3vw, 2.5rem);
}
@media (max-width: 900px) { .regimes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .regimes { grid-template-columns: 1fr; } }

.regimes li { border-top: 2px solid var(--ink); padding-top: 0.8rem; }
.regimes span {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
}
.regimes p { margin-top: 0.35rem; font-size: var(--step--1); line-height: 1.5; color: var(--slate); }

/* --- close --------------------------------------------------------------- */

.close {
  background: var(--panel-bg);
  color: var(--panel-fg);
  padding: clamp(3.5rem, 8vw, 7rem) clamp(1rem, 2.5vw, 2rem);
}
.close__inner { max-width: 880px; margin-inline: auto; text-align: center; }
.close__head { font-size: var(--step-3); margin-top: 0.9rem; }
.close__lede {
  margin: 1.15rem auto 0;
  max-width: 52ch;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--panel-fg-soft);
}

.signup { margin-top: 2.5rem; text-align: left; }
.signup__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}
@media (max-width: 620px) { .signup__row { grid-template-columns: 1fr; } }

.field span {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--panel-fg-faint);
  margin-bottom: 0.4rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--panel-fg);
  background: var(--panel-field-bg);
  border: 1.5px solid var(--panel-field-bd);
  border-radius: 10px;
  padding: 0.85em 1em;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--panel-placeholder); }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline-color: var(--panel-focus);
  border-color: var(--panel-focus);
}

.field textarea { resize: vertical; min-height: 6.5em; }

/* The panel is dark in both themes, so the chevron can be a fixed light colour.
   Native select styling is dropped because a light-scheme arrow disappears
   against this background. */
.field select {
  appearance: none;
  padding-right: 2.6em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23E9F3EE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
  background-size: 12px 8px;
}
.field select:invalid { color: var(--panel-placeholder); }
.field select option { color: initial; }

.field--full { display: block; margin-top: 0.9rem; }

.signup button { margin-top: 1.1rem; }

.signup__fine {
  margin-top: 0.9rem;
  font-size: var(--step--1);
  color: var(--panel-fg-faint);
  text-align: center;
}
.signup__fine.is-ok { color: var(--ok); }
.signup__fine.is-bad { color: var(--warn); }

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

.footer {
  max-width: var(--measure);
  margin-inline: auto;
  padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1rem, 2.5vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  justify-content: space-between;
  align-items: end;
}
.footer__brand span {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: -0.03em;
}
.footer__brand em { font-style: normal; font-weight: 400; color: var(--principal); }
.footer__brand p {
  margin-top: 0.5rem;
  max-width: 44ch;
  font-size: var(--step--1);
  color: var(--slate);
}
.footer__meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--slate);
  text-align: right;
}

/* --- entrance: one orchestrated moment, not scattered effects ----------- */

@media (prefers-reduced-motion: no-preference) {
  .hero__copy > *,
  .schedule {
    opacity: 0;
    transform: translateY(14px);
    animation: rise 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .hero__copy > :nth-child(1) { animation-delay: 0.04s; }
  .hero__copy > :nth-child(2) { animation-delay: 0.11s; }
  .hero__copy > :nth-child(3) { animation-delay: 0.18s; }
  .hero__copy > :nth-child(4) { animation-delay: 0.25s; }
  .schedule                   { animation-delay: 0.30s; }

  .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
  .reveal.is-in { opacity: 1; transform: none; }
}

@keyframes rise { to { opacity: 1; transform: none; } }