/* The code box.
   ==================================================================================================
   STILL INHERITS THE THEME. That has not changed and must not: this is installed on sites whose
   palettes nobody here has seen, and a box that imposes its own blue is a box that looks wrong on most
   of them. What is new is that it now DERIVES from the theme instead of simply not touching it -
   color-mix() against currentColor gives a border, a wash and a focus ring that are the right colour on
   a black site and on a pink one, from one declaration.

   Every value is declared twice: a plain one first, then the color-mix one. A browser too old for
   color-mix() takes the first and gets the box exactly as it was before.

   ANIMATION HAS TO SAY SOMETHING. There are four, and each one is a sentence:
     the card arriving      - "this is new, and it came from the box you just used"
     the shake on an error  - "that did not work, try again" - read before any text is
     the prefilled glow     - "the code is already in, just press Go" - the QR case, where the viewer
                              did not type anything and may not realise the field is filled
     the button press       - "that registered", on a form whose next event is a page load
   Decoration was considered and left out. This box's job is to be answered in one tap; anything that
   delays that, or draws the eye away from the button, is a cost with no return. All of it is off under
   prefers-reduced-motion, where the state is still carried by colour and text.
   ================================================================================================== */

.so-codes-form {
  max-width: 520px;
  margin: 0 auto;
  /* Named so the row can be queried by the box's own width rather than the viewport's - the same box
     sits in a full-width homepage and in a 300px sidebar, and the viewport cannot tell them apart. */
  container-type: inline-size;
  container-name: so-codes-box;
}

.so-codes-label {
  display: block;
  font-weight: 600;
  margin: 0 0 8px;
  text-wrap: pretty;
}

.so-codes-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

/* ---------------------------------------------------------------------------------- the input ---- */

.so-codes-input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 16px;
  border: 1px solid currentColor;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  caret-color: currentColor;
  /* A code is read off a screen and typed character by character, so the characters want to sit in
     even columns rather than kerned as prose. */
  font-variant-numeric: tabular-nums;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

@supports (border-color: color-mix(in oklab, currentColor 40%, transparent)) {
  .so-codes-input {
    /* Softer than the text colour, so the field reads as a field rather than as a drawn rectangle. */
    border-color: color-mix(in oklab, currentColor 32%, transparent);
    background: color-mix(in oklab, currentColor 3%, transparent);
  }
  .so-codes-input:hover {
    border-color: color-mix(in oklab, currentColor 52%, transparent);
  }
}

.so-codes-input::placeholder {
  letter-spacing: normal;
  text-transform: none;
  opacity: 0.55;
  color: inherit;
}

/* The ring is on :focus-visible so a tap on a phone does not draw one, and on :focus-within for the row
   so the whole control lifts together. Never outline: none - a field you cannot see the focus on is a
   field somebody using a keyboard cannot find. */
.so-codes-input:focus {
  outline: none;
}

.so-codes-input:focus-visible {
  border-color: currentColor;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

@supports (box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 20%, transparent)) {
  .so-codes-input:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 18%, transparent);
  }
}

/* ---------------------------------------------------------------------------------- the button --- */

.so-codes-button {
  flex: 0 0 auto;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  padding: 14px 22px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  /* INHERIT, NEVER A COLOUR OF ITS OWN. The background on the next line is currentColor, and
     currentColor resolves against THIS element's colour - so `color: #fff` here, which is what used to
     be on this line, made the background white as well. The label is white too, so the button was a
     white rectangle with white text on a white card: invisible on any light theme. It shipped like that
     and was found on a live site, where the field had no visible control beside it at all.

     `inherit` rather than nothing, because a <button> does not inherit colour on its own - the browser's
     own stylesheet gives it ButtonText. Inheriting hands currentColor the theme's text colour, which is
     what the background is meant to be and what the comment below has always said it was. */
  color: inherit;
  background: currentColor;
  /* The label is a grid cell so a working state can cross-fade over it without the button changing
     width and shoving the row about. */
  display: grid;
  place-items: center;
  transition: transform 90ms ease, filter 140ms ease, box-shadow 140ms ease;
}

.so-codes-button-label {
  /* The theme's text colour is the button's background, so the label has to be its own colour rather
     than inheriting it - otherwise it is invisible.

     White is right wherever the theme's text is dark, which is nearly everywhere. On a dark site the
     theme's text is light, so the background is light and white would disappear again - there is no
     `currentBackgroundColor` in CSS to derive the opposite from. That case is one line in the site's
     own stylesheet rather than a guess here:  .so-codes-button-label { color: #111; } */
  color: var(--so-codes-button-ink, #fff);
  mix-blend-mode: normal;
}

.so-codes-button:hover {
  filter: brightness(1.08);
}

.so-codes-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Pressed. Two pixels and ninety milliseconds, which is the whole of it: the next thing that happens is
   a page load, and a form that acknowledges the press does not feel like one that ignored it. */
.so-codes-button:active {
  transform: translateY(1px) scale(0.985);
  filter: brightness(0.96);
}

/* The field has something in it, so the button is the next thing to do. A shadow rather than a colour
   change, because the colour is the theme's and brightening it is all the emphasis available. */
.so-codes-form:has(.so-codes-input:not(:placeholder-shown)) .so-codes-button {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

@supports (box-shadow: 0 2px 10px color-mix(in oklab, currentColor 30%, transparent)) {
  .so-codes-form:has(.so-codes-input:not(:placeholder-shown)) .so-codes-button {
    box-shadow: 0 2px 10px color-mix(in oklab, currentColor 28%, transparent);
  }
}

/* ----------------------------------------------------------------------------------- the error --- */

.so-codes-error {
  margin: 10px 0 0;
  font-size: 14.5px;
  text-wrap: pretty;
}

@supports (color: color-mix(in oklab, red 50%, currentColor)) {
  .so-codes-error {
    /* Mixed toward the theme's own ink rather than a fixed red, so it reads as this site's warning
       colour and stays legible on a dark background. */
    color: color-mix(in oklab, #d7263d 62%, currentColor);
  }
}

/* ------------------------------------------------------------------- arriving from a QR scan ----- */

/* The field is already filled and the viewer typed nothing, so they may not notice. One slow pulse
   says "this is in, press Go" without a word of copy and without moving anything. */
.so-codes-form.is-prefilled .so-codes-input {
  animation: so-codes-filled 1.8s ease-out 1 both;
}

@keyframes so-codes-filled {
  0%   { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.22); }
  40%  { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

/* ------------------------------------------------------------------------- that did not work ----- */

/* Short, small, and once. A shake is read before any text is, which is the point - but a long or wide
   one reads as the page breaking rather than as the code being wrong. */
.so-codes-form.has-problem .so-codes-row {
  animation: so-codes-nope 360ms cubic-bezier(0.36, 0.07, 0.19, 0.97) 1 both;
}

@keyframes so-codes-nope {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-5px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(2px); }
}

/* -------------------------------------------------------------------------- narrow containers ---- */

/* Queried on the box's own width. A 300px sidebar gets the stacked layout even on a wide screen, which
   a viewport media query cannot do. */
@container so-codes-box (max-width: 420px) {
  .so-codes-row {
    flex-direction: column;
  }
  .so-codes-button {
    width: 100%;
  }
}

/* The same, for a browser without container queries. */
@supports not (container-type: inline-size) {
  @media (max-width: 480px) {
    .so-codes-row {
      flex-direction: column;
    }
    .so-codes-button {
      width: 100%;
    }
  }
}

/* ------------------------------------------------------------------------------ no movement ----- */

/* Everything above is off for anybody who has asked for less motion, and nothing is lost by it: the
   error is still coloured and still says what is wrong, the filled field is still filled, and the
   button still changes under the pointer. The animation was never carrying the information. */
@media (prefers-reduced-motion: reduce) {
  .so-codes-form.is-prefilled .so-codes-input,
  .so-codes-form.has-problem .so-codes-row {
    animation: none;
  }
  .so-codes-input,
  .so-codes-button {
    transition: none;
  }
  .so-codes-button:active {
    transform: none;
  }
}

/* -------------------------------------------------------------------------- forced colours ------ */

/* Windows high contrast throws away backgrounds and shadows, so the only thing holding the button
   together would be its background. A border appears, and the ring becomes a real outline. */
@media (forced-colors: active) {
  .so-codes-input,
  .so-codes-button {
    border: 1px solid ButtonText;
  }
  .so-codes-input:focus-visible,
  .so-codes-button:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
  .so-codes-form:has(.so-codes-input:not(:placeholder-shown)) .so-codes-button {
    box-shadow: none;
  }
}

/* ---------------------------------------------------------------------------------------- the card --
   The offer card. Used in two places and written once: the standalone offer page inlines this same file,
   so a change here cannot leave one of the two modes looking different from the other.

   It carries its own colours rather than inheriting the theme's, because it is the only element on the
   page with money behind it and it has to stay legible on a theme nobody has tested it against. */

.so-codes-card {
  --so-card: #fff;
  --so-ink: #15171a;
  --so-muted: #5b6370;
  --so-line: #e4e7ec;
  --so-accent: #1f6feb;

  background: var(--so-card);
  color: var(--so-ink);
  border: 1px solid var(--so-line);
  border-radius: 14px;
  padding: 22px;
  max-width: 520px;
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Queried on its own width, so the card laid into a narrow sidebar reflows on its own terms rather
     than on the viewport's. */
  container-type: inline-size;
  container-name: so-codes-card;

  /* It arrives as the answer to a POST, so it is genuinely new on the page. A short rise says where it
     came from - the box above it - which a card that simply exists on load does not.
     An animation rather than @starting-style: animations run on first render in every browser, and this
     needs no new feature to work. */
  animation: so-codes-card-in 320ms cubic-bezier(0.22, 0.61, 0.36, 1) 1 both;
}

@keyframes so-codes-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The title and the note are prose, so they get the better line-breaking where it exists. */
.so-codes-card .so-codes-offer-title,
.so-codes-card .so-codes-offer-note,
.so-codes-card .so-codes-where,
.so-codes-card .so-codes-disclosure {
  text-wrap: pretty;
}

@media (prefers-color-scheme: dark) {
  .so-codes-card {
    --so-card: #191c1f;
    --so-ink: #f2f4f7;
    --so-muted: #a0a8b4;
    --so-line: #2a2f35;
    --so-accent: #4c8dff;
  }
}

/* Under the box rather than alone on a page: centred on the box, and far enough below it that it reads as
   an answer to what was typed instead of part of the form. */
.so-codes-card--inline {
  margin: 22px auto 0;
}

.so-codes-who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.so-codes-who img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.so-codes-who b { display: block; font-size: 15px; }
.so-codes-who span { color: var(--so-muted); font-size: 13px; }

.so-codes-card .so-codes-offer-title {
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--so-ink);
}

.so-codes-shot {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 0 0 14px;
  display: block;
}

.so-codes-card .so-codes-offer-note {
  margin: 0 0 14px;
  color: var(--so-muted);
}

/* The one element that has to be unmissable on a phone held in one hand. */
.so-codes-card .so-codes-cta {
  display: block;
  text-align: center;
  transition: transform 90ms ease, filter 140ms ease, box-shadow 180ms ease;
  background: var(--so-accent);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 15px 18px;
  border-radius: 10px;
  margin: 18px 0 10px;
}

.so-codes-card .so-codes-cta:hover {
  filter: brightness(1.07);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

@supports (box-shadow: 0 0 0 color-mix(in oklab, red 50%, transparent)) {
  .so-codes-card .so-codes-cta:hover {
    box-shadow: 0 4px 14px color-mix(in oklab, var(--so-accent) 34%, transparent);
  }
}

/* Pressed. The same two pixels as the box's button, so the two feel like one piece of software. */
.so-codes-card .so-codes-cta:active {
  transform: translateY(1px) scale(0.99);
  filter: brightness(0.97);
}

.so-codes-card .so-codes-cta:focus-visible { outline: 3px solid var(--so-accent); outline-offset: 3px; }

.so-codes-card .so-codes-disclosure {
  font-size: 12.5px;
  color: var(--so-muted);
  margin: 0;
}

.so-codes-card .so-codes-back {
  display: inline-block;
  margin-top: 18px;
  color: var(--so-muted);
  font-size: 13.5px;
}

/* The safety net's wrapper: the card was prepared but no box rendered, so it is drawn at the end of the
   body. Padded so it does not sit flush against a footer. */
.so-codes-orphan {
  padding: 24px 16px;
}

/* ------------------------------------------------------------------------------- the video -------- */

.so-codes-video {
  position: relative;
  margin: 0 0 16px;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
}

.so-codes-video iframe,
.so-codes-video .so-codes-video-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.so-codes-video-play {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
  cursor: pointer;
  background: #000;
  color: #fff;
}

.so-codes-video-play img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
}

/* A play triangle drawn in CSS rather than fetched: one less request on the page that has to answer in
   one tap, and it cannot fail to load. */
.so-codes-video-icon {
  position: relative;
  transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 160ms ease;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  border: 2px solid rgba(255, 255, 255, 0.92);
}

.so-codes-video-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}

.so-codes-video-play:hover .so-codes-video-icon,
.so-codes-video-play:focus-visible .so-codes-video-icon {
  transform: scale(1.09);
  background: rgba(0, 0, 0, 0.78);
}

.so-codes-video-play:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
}

.so-codes-video-label {
  position: relative;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* --------------------------------------------------------------------------------- the price ------ */

/* The time it was fetched is beside the figure, not hidden in a tooltip. Amazon requires that a price it
   supplied be shown as of when it was supplied, and a viewer who finds a different number at the shop is
   owed the reason rather than left to assume they were misled. */

.so-codes-card .so-codes-price {
  margin: 0 0 12px;
  color: var(--so-ink);
}

.so-codes-price-amount {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.so-codes-price-when {
  font-size: 12px;
  color: var(--so-muted);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------- the countdown ------- */

.so-codes-card .so-codes-countdown {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--so-ink);
}

.so-codes-countdown-label { color: var(--so-muted); }
.so-codes-countdown-left { font-weight: 700; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- where the button actually goes ---- */

.so-codes-card .so-codes-where {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--so-muted);
  text-align: center;
}

/* A bare embed: the button and the two lines that have to go with it, nothing else. */
.so-codes-card--bare {
  border: 0;
  padding: 0;
  background: none;
}

/* ---------------------------------------------------------------------- reporting a problem ------- */

/* A <details> element, so this opens, closes and submits with no JavaScript whatsoever. Sized and
   coloured to be findable and not inviting: it is for the viewer who spotted something wrong, not a
   call to action competing with the button above it. */

.so-codes-report {
  margin: 16px 0 0;
  border-top: 1px solid var(--so-line);
  padding-top: 10px;
  font-size: 13px;
}

.so-codes-report > summary {
  cursor: pointer;
  color: var(--so-muted);
  list-style: none;
}

.so-codes-report > summary::-webkit-details-marker { display: none; }

.so-codes-report > summary::before {
  content: "?";
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-inline-end: 7px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  vertical-align: -2px;
}

.so-codes-report > summary:hover { color: var(--so-ink); }

.so-codes-report > summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

/* The panel on the way in. <details> cannot be transitioned open in every browser, so the CONTENTS are
   animated instead - which works wherever the element opens at all and does nothing where it does not. */
.so-codes-report[open] > form {
  animation: so-codes-report-in 220ms ease-out 1 both;
}

@keyframes so-codes-report-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.so-codes-report-send {
  transition: border-color 140ms ease, background-color 140ms ease, transform 90ms ease;
}

.so-codes-report-send:active { transform: translateY(1px); }

.so-codes-report-label {
  display: block;
  margin: 12px 0 4px;
  color: var(--so-muted);
  font-size: 12.5px;
}

.so-codes-report select,
.so-codes-report textarea,
.so-codes-report input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 14px;
  padding: 9px 10px;
  border: 1px solid var(--so-line);
  border-radius: 8px;
  background: transparent;
  color: var(--so-ink);
}

.so-codes-report textarea { resize: vertical; min-height: 64px; }

.so-codes-report-send {
  margin: 12px 0 2px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 18px;
  border: 1px solid var(--so-line);
  border-radius: 8px;
  background: transparent;
  color: var(--so-ink);
  cursor: pointer;
}

.so-codes-report-send:hover { border-color: currentColor; }

.so-codes-report-error { margin: 10px 0 0; color: #b3261e; }
.so-codes-report-done { margin: 10px 0 0; color: var(--so-ink); }

/* The receipt, shown beside the box after a report. It is not inside the card, because after a report
   there is no card on the page - and a viewer who gets no acknowledgement sends the report again. */
.so-codes-report-receipt {
  max-width: 520px;
  margin: 0 auto 14px;
  padding: 11px 14px;
  border: 1px solid currentColor;
  border-radius: 10px;
  font-size: 14px;
  text-align: center;
  opacity: 0.85;
}

/* ---------------------------------------------------------------------------- the code cloud ------ */

/* Sizes come from PHP as inline styles, because they are data rather than design: every code is a
   different size and no stylesheet can know which. Everything else lives here. */

.so-codes-cloud {
  max-width: 640px;
  margin: 18px auto 0;
}

.so-codes-cloud-title {
  margin: 0 0 8px;
  font-size: 13px;
  opacity: 0.7;
}

.so-codes-cloud ul {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.so-codes-cloud li { margin: 0; }

.so-codes-cloud a {
  display: inline-block;
  transition: border-color 140ms ease, opacity 140ms ease;
  padding: 2px 0;
  line-height: 1.25;
  text-decoration: none;
  letter-spacing: 0.02em;
  color: inherit;
  border-bottom: 1px solid transparent;
}

.so-codes-cloud a:hover,
.so-codes-cloud a:focus-visible {
  border-bottom-color: currentColor;
}

/* Size alone is a poor signal for anyone who cannot compare sizes, so the pointer and the focus ring do
   the work of saying "this is a link" at every size. */
.so-codes-cloud a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------------- Hebrew --------- */

/* A Hebrew or Arabic site has to read right-to-left without a second stylesheet.
   Only the things that are genuinely directional are flipped: the play triangle still points the way the
   video plays, which is not a property of the language. */

[dir="rtl"] .so-codes-input,
.rtl .so-codes-input {
  letter-spacing: normal;
  text-align: right;
}

/* A code is typed in Latin or Cyrillic even on a Hebrew page, so the box itself stays left-to-right -
   otherwise MAX25 appears to the typist as 25MAX. */
[dir="rtl"] .so-codes-input,
.rtl .so-codes-input {
  direction: ltr;
  text-align: center;
}

[dir="rtl"] .so-codes-who,
.rtl .so-codes-who {
  flex-direction: row-reverse;
  text-align: right;
}

[dir="rtl"] .so-codes-card,
.rtl .so-codes-card {
  text-align: right;
}

[dir="rtl"] .so-codes-card .so-codes-cta,
.rtl .so-codes-card .so-codes-cta {
  text-align: center;
}


/* ===================================================================== movement, and none of it ===
   One place for every animation in this file to be switched off, rather than a reduced-motion rule
   beside each one that somebody will forget to add the next time.

   Nothing is lost by turning them off. Each animation restates something the page already says in
   colour or in words - which is the test an animation has to pass to be in here at all.

   The print rule is not politeness, it is correctness: several of these fill from opacity 0, and an
   animation that never runs with fill-mode both can leave the element it was decorating invisible. A
   card that prints blank would be a worse bug than no animation at all.
   ================================================================================================== */

@media (prefers-reduced-motion: reduce) {
  .so-codes-form.is-prefilled .so-codes-input,
  .so-codes-form.has-problem .so-codes-row,
  .so-codes-card,
  .so-codes-report[open] > form {
    animation: none;
  }

  .so-codes-input,
  .so-codes-button,
  .so-codes-card .so-codes-cta,
  .so-codes-video-icon,
  .so-codes-report-send,
  .so-codes-cloud a {
    transition: none;
  }

  .so-codes-button:active,
  .so-codes-card .so-codes-cta:active,
  .so-codes-report-send:active,
  .so-codes-video-play:hover .so-codes-video-icon,
  .so-codes-video-play:focus-visible .so-codes-video-icon {
    transform: none;
  }
}

@media print {
  .so-codes-form.is-prefilled .so-codes-input,
  .so-codes-form.has-problem .so-codes-row,
  .so-codes-card,
  .so-codes-report[open] > form {
    animation: none;
    opacity: 1;
    transform: none;
  }
}