/* =========================================================================
   My SOLUM

   The build so far, shown before the visitor enquires — the way Apple
   shows you the machine you have configured before you buy it. Centred,
   as Choose your SOLUM is: "Your SOLUM Plus." and the build in a sentence;
   the outside and the inside side by side at one height, each captioned;
   then every option already open beneath them, two by two in the order
   they are chosen down the page — model and cladding, interior and
   delivery — so a choice is changed with one press, here; and the way on
   to the form.

   Anything not yet chosen still has a picture — whatever its section is
   showing — but held back and captioned as a preview, so it never reads
   as a decision the visitor did not make. Driven by src/js/ui/my-solum.js.
   ========================================================================= */

.mysolum__lead {
  padding: var(--section-pad) var(--gutter-safe) 0;
  background: var(--c-black);
}

/* its words, as the way home's opening (journey.css): the eyebrow over
   the headline, the line under it, centred */
.mysolum__words {
  display: grid;
  justify-items: center;
  max-width: 50rem;
  margin: 0 auto var(--block-gap);
  text-align: center;
}

.mysolum__words .eyebrow {
  justify-content: center;
  margin: 0 0 var(--space-6);
}

.mysolum {
  padding: var(--section-pad) var(--gutter-safe);
  background: var(--c-black);
  scroll-margin-top: var(--space-6);
}

/* ---- The headline, and the build in a sentence ---- */
.mysolum__intro {
  max-width: 52rem;
  margin: 0 auto var(--block-gap);
  text-align: center;
}


/* "Your SOLUM Plus." in the voice of the chooser's headline */
.mysolum__headline {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-headline);
  line-height: 1.02;
  letter-spacing: -0.01em;
  background: linear-gradient(100deg, #f4f8fb 0%, #c9d6e0 45%, var(--c-obsidian) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--c-ink);
}

.mysolum__sentence {
  margin: var(--space-5) 0 0;
  font-size: var(--fs-headline-line);
  line-height: 1.45;
  color: var(--c-ink-3);
  text-wrap: balance;
}

/* ---- The outside and the inside, side by side at one height ---- */
.mysolum__prints {
  display: grid;
  gap: var(--space-6) clamp(var(--space-4), 1.6vw, var(--space-5));
}

.mysolum__exterior,
.mysolum__interior {
  position: relative;
  height: clamp(15rem, 52vw, 26rem);
  margin: 0;
  overflow: hidden;
  border-radius: var(--img-radius);
  clip-path: var(--img-notch-clip);
}

.mysolum__exterior img,
.mysolum__interior img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
}

/* not chosen yet: shown, but held back (and captioned as a preview) */
.is-preview img {
  filter: brightness(0.45) saturate(0.5);
}

@media (min-width: 48rem) {
  .mysolum__prints {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }

  .mysolum__exterior,
  .mysolum__interior {
    height: clamp(18rem, 34vw, 36rem);
  }
}

.mysolum__caption {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin: var(--space-3) 0 0;
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--c-ink-4);
}

.mysolum__caption span + span {
  color: var(--c-ink-2);
}

/* ---- The options, all open, two by two ---- */
.mysolum__rows {
  display: grid;
  margin: var(--block-gap) 0 0;
  border-bottom: 1px solid var(--c-hairline);
}

@media (min-width: 48rem) {
  .mysolum__rows {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(var(--space-7), 6vw, 6rem);
  }
}

/* each choice: its name and what is chosen on one line, the options
   beneath — nothing to ask for */
.mysolum__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* a line beside a taller one keeps its contents at the top */
  align-content: start;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--c-hairline);
}

.mysolum__row dt {
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
  color: var(--c-ink);
}

.mysolum__row dd {
  margin: 0;
}

.mysolum__value {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-small);
  color: var(--c-ink-3);
  transition: color 0.4s ease;
}

.mysolum__row:not(.is-chosen) .mysolum__value {
  color: var(--c-gold);
}

/* the preferred payment is optional: no gold prompt for it */
[data-row="payment"]:not(.is-chosen) .mysolum__value {
  color: var(--c-ink-4);
}

/* the finish's own colour, as on its swatch */
.mysolum__dot {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--dot, transparent);
  box-shadow: 0 0 10px -2px var(--dot, transparent);
}

.mysolum__options {
  grid-column: 1 / -1;
  container-type: inline-size;
}

.mysolum__options-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.25rem, 1fr));
  gap: var(--space-2);
  padding: 2px;    /* room for the swatches' lift and glow */
}

/* the finishes on their swatches, set a touch closer than up the page */
.mysolum__option {
  padding: 0.7rem 0.2rem 0.7rem calc(0.2rem + 0.14em);
  letter-spacing: 0.14em;
  text-align: center;
}

/* every finish on one line: five claddings, four palettes */
[data-row="cladding"] .mysolum__options-inner {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

/* five to a line is close: a little tighter still */
[data-row="cladding"] .mysolum__option {
  padding-inline: 0.1rem calc(0.1rem + 0.08em);
  letter-spacing: 0.08em;
}

[data-row="palette"] .mysolum__options-inner {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* the two woods side by side, as wide as the palettes' row */
[data-row="joinery"] .mysolum__options-inner {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* where the row is too narrow for five claddings to be read whole (a
   phone, or a tablet's half-width column): three and two */
@container (max-width: 23rem) {
  [data-row="cladding"] .mysolum__options-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* A finish this model cannot have yet (Obsidian on the Studio) is left
   out, as the exteriors card leaves it out, rather than shown as a ghost
   in the first place. */
.mysolum__option.is-pending {
  display: none;
}

/* the model, the delivery and the payment on the page's toggle: a pill
   of its glass, the one chosen in the milkier glass (tokens.css) */
[data-row="model"] .mysolum__options-inner,
[data-row="delivery"] .mysolum__options-inner,
[data-row="payment"] .mysolum__options-inner {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  padding: 4px;
  border-radius: 999px;
  background: var(--glass-frost);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: var(--glass-edge), var(--glass-shadow);
}

[data-row="model"] .mysolum__option,
[data-row="delivery"] .mysolum__option,
[data-row="payment"] .mysolum__option {
  padding-block: 0.8rem;
  border: 0;
  border-radius: 999px;
  clip-path: none;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: color 0.4s ease, background 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

[data-row="model"] .mysolum__option.is-selected,
[data-row="delivery"] .mysolum__option.is-selected,
[data-row="payment"] .mysolum__option.is-selected {
  color: var(--c-ink);
  background: var(--glass-lit-frost);
  box-shadow: var(--glass-lit-edge), var(--glass-lit-shadow);
}

/* How they would prefer to pay: the last line, beside the delivery. What
   the choice means sits beneath its toggle, and the word on the finance
   option under that. */
.mysolum__explain,
.mysolum__note {
  grid-column: 1 / -1;
  font-size: var(--fs-small);
  line-height: 1.6;
  text-wrap: pretty;
}

/* one sentence per choice, stacked in one place: the space is the longest's,
   so nothing below moves as the choice changes */
.mysolum__explain {
  display: grid;
  color: var(--c-ink-3);
}

.mysolum__explain [data-choice] {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-out), visibility 0s linear 0.4s;
}

[data-row="payment"][data-value="cash"] [data-choice="cash"],
[data-row="payment"][data-value="finance"] [data-choice="finance"],
[data-row="payment"][data-value="undecided"] [data-choice="undecided"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s var(--ease-out) 0.1s, visibility 0s;
}

.mysolum__note {
  color: var(--c-ink-4);
}


/* ---- How far along, and the way on ---- */
.mysolum__close {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  margin-top: var(--block-gap);
  text-align: center;
}

.mysolum__progress {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--c-ink-3);
  transition: color 0.6s ease;
}

.mysolum.is-complete .mysolum__progress {
  color: var(--c-gold);
}

.mysolum__fine {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--c-ink-4);
}

/* =========================================================================
   The select buttons

   The button at the foot of each section, once what is on show has been
   chosen: it takes the colour of what was chosen — Tide's blue-green,
   Ivory's warm white — or the page's gold where the choice has no colour
   of its own (the model, the delivery), and its plus becomes a tick.
   ========================================================================= */

.enquire__link.is-locked {
  /* --lock is the colour of what was chosen (my-solum.js sets it for a
     palette or a cladding); anything without a colour keeps the gold */
  --lock-colour: var(--lock, var(--c-gold));
  --notch-edge: color-mix(in oklab, var(--lock-colour) 70%, transparent);
  color: color-mix(in oklab, var(--lock-colour) 70%, #fff);
  border-color: color-mix(in oklab, var(--lock-colour) 70%, transparent);
  background:
    var(--notch-line),
    linear-gradient(157deg,
      color-mix(in oklab, var(--lock-colour) 18%, transparent),
      color-mix(in oklab, var(--lock-colour) 6%, transparent) 55%,
      color-mix(in oklab, var(--lock-colour) 12%, transparent));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.12),
    0 0 26px -12px color-mix(in oklab, var(--lock-colour) 50%, transparent);
}

.enquire__link.is-locked .button__arrow {
  color: var(--lock-colour);
}

/* =========================================================================
   Staged: the whole build on one card

   Where the page is staged (.has-scene, scene.js), My SOLUM is a card as
   the sections before it are, the screen's height, in the same frosted
   glass, its top corners cut and the tray's notch cut from its top edge
   (finish-card.css; the tray settles in it at rest, my-solum.js); its
   light the colours of the cladding and the palette chosen (--mysolum-*,
   my-solum.js). On it, everything at once, nothing to go looking for:
     - the name of the build;
     - the home, outside and in, as one strip across the card, one picture
       open and the rest narrow, the one under the pointer opening, and
       the one a choice changes opening as it is made (.is-card,
       ui/mysolum-steps.js);
     - every choice on its toggle, in two columns: the model, how it
       reaches you and how you would pay on the left; the outside, the
       inside and the joinery on the right;
     - the build in a sentence, and the way on to the form.
   Elsewhere, the page as it was, one thing under another.
   ========================================================================= */
.mysolum__card,
.mysolum__stage,
.mysolum__steps {
  display: contents;
}

.mysolum__why {
  display: none;
}

/* ---- Flat (a phone, a tablet): every row on the one toggle ----
   The finishes on the glass toggle too (ui/glass-toggle.js), as every row
   is on the card, rather than on chips beside three rows of glass. Each
   option at least its name's width, the rest shared out: the Plus's five
   claddings at 320 would otherwise cut Obsidian, and Burgundy needs 73px
   of a 62px quarter. The rows a little closer set than they were.
   (Chosen from a study, tag mysolum-study, docs/studies/mysolum/.) */
.mysolum:not(.is-card) .mysolum__row {
  gap: var(--space-3);
  padding: var(--space-5) 0;
}

.mysolum:not(.is-card) :is([data-row="cladding"], [data-row="palette"], [data-row="joinery"]) .mysolum__options-inner {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(max-content, 1fr);
  gap: 0;
  padding: 4px;
  border-radius: 999px;
  background: var(--glass-frost);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: var(--glass-edge), var(--glass-shadow);
}

.mysolum:not(.is-card) :is([data-row="cladding"], [data-row="palette"], [data-row="joinery"]) .mysolum__option {
  padding: 0.8rem 0.1rem 0.8rem calc(0.1rem + 0.08em);
  letter-spacing: 0.08em;
  border: 0;
  border-radius: 999px;
  clip-path: none;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@property --mysolum-cladding { syntax: "<color>"; inherits: true; initial-value: #c6cacf; }
@property --mysolum-palette { syntax: "<color>"; inherits: true; initial-value: #c6cacf; }

.has-scene .mysolum.is-card {
  /* the cards' margin from the top and foot of the screen (scene.js),
     whole pixels; the card itself placed by its scene, as the others */
  --card-margin: round(max(20px, 3.5vh), 1px);
}

/* the card has its own edge: no rule over it */
.has-scene .mysolum.is-card.rule-top::before {
  display: none;
}

.has-scene .mysolum.is-card .mysolum__card {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "pics    pics"
    "choices choices"
    "summary onward";
  column-gap: 3.4cqw;
  height: calc(100vh - 2 * var(--card-margin));
  /* clear of the notch over the middle of its top edge */
  padding: max(3.2cqw, calc(var(--notch-d, 0px) + 1rem)) 3.4cqw 2.6cqw;
  transition: --mysolum-cladding 1.1s var(--ease-out), --mysolum-palette 1.1s var(--ease-out);
}

/* the surface: the cards' frosted glass, lit in the build's colours */
.has-scene .mysolum.is-card .mysolum__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--card-radius);
  clip-path: var(--card-notch-clip);
  background:
    var(--frost-sheen),
    linear-gradient(180deg, transparent 45%, rgb(0 0 0 / 0.6) 80%, rgb(0 0 0 / 0.95)),
    var(--frost-grain),
    radial-gradient(70% 55% at 88% 0%,
      color-mix(in srgb, color-mix(in srgb, var(--mysolum-cladding) 50%, #000) 80%, transparent),
      transparent 75%),
    radial-gradient(80% 70% at 12% 8%,
      color-mix(in srgb, color-mix(in srgb, var(--mysolum-palette) 46%, #000) 80%, transparent),
      transparent 70%),
    linear-gradient(180deg, rgb(28 29 32 / 0.7), rgb(10 10 11 / 0.6) 55%),
    rgb(0 0 0 / 0.42);
  -webkit-backdrop-filter: var(--frost-filter);
  backdrop-filter: var(--frost-filter);
  box-shadow: var(--frost-rim);
}

/* its outline the cards' own, the notch drawn into it (finish-card.css) */
@supports (clip-path: shape(from 0 0, line to 1px 1px)) {
  .has-scene .mysolum.is-card .mysolum__card::before {
    clip-path: var(--card-clip, var(--card-notch-clip));
    -webkit-mask: none;
    mask: none;
  }
}

.has-scene .mysolum.is-card :is(.mysolum__stage, .mysolum__steps, .mysolum__intro) {
  display: contents;
}

/* no name over it: the words it rises over name the build */
.has-scene .mysolum.is-card .mysolum__headline {
  display: none;
}

/* the home, outside and in, one strip across the card: the two strips'
   pictures side by side, seven in all, one open */
.has-scene .mysolum.is-card .mysolum__prints {
  grid-area: pics;
  display: flex;
  gap: var(--gap);
  min-height: 0;
  container-type: inline-size;
  contain: layout paint;
  --gap: 0.6rem;
}

.has-scene .mysolum.is-card :is(.mysolum__print, .mysolum__strip) {
  display: contents;
}

.has-scene .mysolum.is-card .mysolum__strip {
  --count: 7;
  --open: 5;
}

.has-scene .mysolum.is-card .mysolum__caption {
  display: none;
}

.has-scene .mysolum.is-card .mysolum__panel {
  height: 100%;
}

/* every choice on its toggle, two columns of three */
.has-scene .mysolum.is-card .mysolum__rows {
  grid-area: choices;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  column-gap: 3.4cqw;
  row-gap: clamp(var(--space-4), 2.2vh, var(--space-5));
  margin: clamp(var(--space-5), 3.4vh, var(--space-7)) 0 0;
  border: 0;
}

.has-scene .mysolum.is-card [data-row="model"]    { grid-area: 1 / 1; }
.has-scene .mysolum.is-card [data-row="delivery"] { grid-area: 2 / 1; }
.has-scene .mysolum.is-card [data-row="payment"]  { grid-area: 3 / 1; }
.has-scene .mysolum.is-card [data-row="cladding"] { grid-area: 1 / 2; }
.has-scene .mysolum.is-card [data-row="palette"]  { grid-area: 2 / 2; }
.has-scene .mysolum.is-card [data-row="joinery"]  { grid-area: 3 / 2; }

.has-scene .mysolum.is-card .mysolum__row {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  padding: 0;
  border: 0;
}

.has-scene .mysolum.is-card .mysolum__row dt {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.has-scene .mysolum.is-card :is(.mysolum__row > dd:has(> .mysolum__value), .mysolum__explain, .mysolum__note) {
  display: none;
}

/* each toggle as wide as its options need */
.has-scene .mysolum.is-card .mysolum__options {
  container-type: normal;
}

.has-scene .mysolum.is-card .mysolum__options-inner {
  display: inline-grid;
  width: max-content;
  max-width: 100%;
}

/* the finishes on the toggle, as the model, delivery and payment are */
.has-scene .mysolum.is-card :is([data-row="cladding"], [data-row="palette"], [data-row="joinery"]) .mysolum__options-inner {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  padding: 4px;
  border-radius: 999px;
}

.has-scene .mysolum.is-card .mysolum__option {
  min-width: 6.5rem;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 999px;
  clip-path: none;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  letter-spacing: 0.14em;
}

/* the build in a sentence; and the way on */
.has-scene .mysolum.is-card .mysolum__sentence {
  grid-area: summary;
  align-self: center;
  margin: clamp(var(--space-6), 6vh, 4.5rem) 0 0;
  font-size: 1rem;
  text-align: left;
  color: var(--c-ink-2);
}

.has-scene .mysolum.is-card .mysolum__close {
  grid-area: onward;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: clamp(var(--space-6), 6vh, 4.5rem) 0 0;
}

.has-scene .mysolum.is-card :is(.mysolum__progress, .mysolum__fine) {
  display: none;
}

/* =========================================================================
   The outside and the inside, each a strip of pictures

   As the finish cards show them: the outside in its three views, the
   inside in its four rooms, one open and the rest narrow beside it, the
   one under the pointer opening as the others close (.is-open,
   ui/mysolum-steps.js), the first again when the pointer leaves. Each
   panel a window on a picture the open one's width, so a panel opening
   shows more of the same picture rather than stretching it (as on the
   cards); each with the page's cut corner. On a phone, the first alone.
   ========================================================================= */
.mysolum__strip {
  --gap: 0.5rem;
  --open: 3.5;
  --count: 3;
  display: flex;
  gap: var(--gap);
  overflow: visible;
  border-radius: 0;
  clip-path: none;
  container-type: inline-size;
  /* the panels resized on every frame of an opening: kept to the strip */
  contain: layout paint;
}

.mysolum__interior.mysolum__strip {
  --open: 5.5;
  --count: 4;
}

.mysolum__panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--img-radius) var(--img-radius) 0 var(--img-radius);
  clip-path: var(--img-notch-clip);
  background: var(--c-black);
  transition: flex-grow 0.7s var(--ease-out);
}

.mysolum__strip > .mysolum__panel.is-open {
  flex-grow: var(--open);
}

/* the picture at the open panel's width, its window placed where each
   view holds (as exteriors.css and interiors.css hold them): its point
   --win across it set at --win across the panel, so it rides the panel's
   own opening exactly (moved by an easing of its own as well, the two
   pulled against each other and the opening stuttered); the whole of it
   in view when the panel is open */
.mysolum__strip .mysolum__panel img {
  position: absolute;
  top: 0;
  height: 100%;
  width: calc((100cqw - (var(--count) - 1) * var(--gap)) * var(--open) / (var(--open) + var(--count) - 1));
  max-width: none;
  left: calc(100% * var(--win, 0.5));
  translate: calc(-100% * var(--win, 0.5)) 0;
  transition: filter 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
}

/* set into the card, as the finish cards' pictures are: a shadow inside
   the edge, a darker rim, the faintest light along the top */
.mysolum__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgb(0 0 0 / 0.28),
    inset 0 0 1.6rem rgb(0 0 0 / 0.42),
    inset 0 1px 0 rgb(255 255 255 / 0.05);
  pointer-events: none;
}

/* the open one's glass buttons, day and night and the eye, over its
   corner as on the cards (peek.css), a beat after it opens */
.mysolum__panel.is-open .peek {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.45s;
}

.mysolum__panel--front    { --win: 0.5; }
.mysolum__panel--entrance { --win: 0.5; }
.mysolum__panel--angled   { --win: 0.56; }
.mysolum__panel--living   { --win: 0.52; }
.mysolum__panel--bedroom  { --win: 0.74; }
.mysolum__panel--bathroom { --win: 0.56; }
.mysolum__panel--kitchen  { --win: 0.48; }

@media (max-width: 47.99rem) {
  .mysolum__panel:not(:first-child) {
    display: none;
  }

  /* the first alone, so the whole of it */
  .mysolum__strip .mysolum__panel img {
    width: 100%;
    left: 0;
    translate: none;
  }
}