/* transitions.css — transitions.dev-snippets for v2-portalen.
   Kilde: skills/transitions-dev (transitions.dev). Snippets er indsat
   VERBATIM (tunede og testede) — ret kun :root-tokens, ikke selektorerne.
   Hver blok har sin prefers-reduced-motion-guard: SKAL bevares. */

/* ───────────────────────── Universal :root (fra _root.css) ───────────── */
:root {
  /* Card resize */
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Number pop-in */
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  /* Notification badge */
  --badge-slide-dur: 260ms;
  --badge-pop-dur: 500ms;
  --badge-pop-close-dur: 180ms;
  --badge-fade-dur: 400ms;
  --badge-fade-close-dur: 180ms;
  --badge-blur: 2px;
  --badge-offset-x: -8.2px;
  --badge-offset-y: 12.4px;
  --badge-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --badge-pop-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --badge-close-ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Text states swap */
  --text-swap-dur: 150ms;
  --text-swap-translate-y: 4px;
  --text-swap-blur: 2px;
  --text-swap-ease: ease-in-out;
  /* Menu dropdown */
  --dropdown-open-dur: 160ms;
  --dropdown-close-dur: 120ms;
  --dropdown-pre-scale: 1;
  --dropdown-closing-scale: 1;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Modal open / close */
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Panel reveal — travel tunet til vores 380px detail-kolonne */
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-translate-y: 28px;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Page side-by-side */
  --page-slide-dur: 250ms;
  --page-fade-dur: 250ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Icon swap */
  --icon-swap-dur: 250ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
  /* Success check — bob tunet ned: vores checks bor i små cirkler/rækker */
  --check-opacity-dur: 500ms;
  --check-rotate-dur: 500ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 500ms;
  --check-y-amount: 10px;
  --check-blur-dur: 500ms;
  --check-blur-from: 0px;   /* bevægelse B: ingen sløring (design anti-mål 7); fluebenet tones og drejes stadig ind */
  --check-path-dur: 500ms;
  --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
  /* Avatar group hover */
  --avatar-lift: -4px;
  --avatar-dur: 320ms;
  --avatar-scale: 1.05;
  --avatar-falloff: 0.45;
  --avatar-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
  --avatar-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* Error state shake */
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-hold: 3000ms;
  --revert-dur: 280ms;
  /* Input clear with dissolve */
  --clear-dur: 1000ms;
  --clear-out-dur: 400ms;
  --clear-in-dur: 400ms;
  --clear-out-fly: 12px;
  --clear-in-fly: 12px;
  --clear-out-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --clear-in-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --clear-blur: 2px;
  --glow-delay: 50ms;
  --glow-peak-at: 0.15;
  --glow-opacity: 0.42;
  --glow-spread: 1.5;
  /* Skeleton loader and reveal */
  --pulse-dur: 1000ms;
  --pulse-count: 1;
  --pulse-min: 0.5;
  --reveal-dur: 400ms;
  --reveal-blur: 2px;
  --reveal-ease: ease-in-out;
  /* Shimmer text */
  --shimmer-dur: 2000ms;
  --shimmer-base: var(--ekb-text-3);
  --shimmer-highlight: var(--ekb-ink);
  --shimmer-band: 400%;
  --shimmer-ease: linear;
  /* Tabs sliding */
  --tabs-dur: 250ms;
  --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tabs-text-muted: var(--ekb-text-2);
  --tabs-text-active: var(--ekb-green);
  --tabs-bar-bg: var(--ekb-sunken);
  --tabs-pill-bg: var(--ekb-surface);
  /* Tooltip open/close */
  --tt-in-dur: 150ms;
  --tt-out-dur: 50ms;
  --tt-scale: 0.98;
  --tt-delay: 80ms;
  --tt-in-ease: ease-out;
  --tt-out-ease: ease-out;
  --tt-bg: var(--ekb-surface);
  --tt-fg: var(--ekb-ink);
  /* Texts reveal */
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Svævende lag (sektion 20): ind på husets --dur-med/--ease-out, ud
     kortere med ease-in ad samme vej. Fallbacks er til standalone-siderne
     (login, godkend, mfa-setup), som ikke loader ds-tokens.css. */
  --sheet-travel: 24px;
  --sheet-open-dur: var(--dur-med, 220ms);
  --sheet-open-ease: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  --sheet-close-dur: 150ms;
  --sheet-close-ease: ease-in;
}

/* ───────────────────────── 07 · Panel reveal ─────────────────────────── */
.t-panel-slide {
  transform: translateY(var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition:
    transform var(--panel-close-dur) var(--panel-ease),
    opacity   var(--panel-close-dur) var(--panel-ease),
    filter    var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity, filter;
}
.t-panel-slide[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition:
    transform var(--panel-open-dur) var(--panel-ease),
    opacity   var(--panel-open-dur) var(--panel-ease),
    filter    var(--panel-open-dur) var(--panel-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-panel-slide { transition: none !important; }
}

/* ───────────────────────── 12 · Error state shake ────────────────────── */
.t-input {
  transition: border-color 150ms ease-out;
  will-change: transform;
}
.t-input.is-error {
  transition: border-color var(--revert-dur, 280ms) ease-out;
}

.t-error-msg {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity    var(--revert-dur, 280ms) ease-out,
    visibility 0s linear var(--revert-dur, 280ms);
}
.t-input-wrap.is-error .t-error-msg {
  opacity: 1;
  visibility: visible;
  transition:
    opacity    var(--revert-dur, 280ms) ease-out,
    visibility 0s linear 0s;
}

.t-input.is-shaking {
  animation: t-input-shake calc(
      var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2
    ) linear;
}
@keyframes t-input-shake {
  0%      { transform: translateX(0);                                 animation-timing-function: var(--shake-ease); }
  28.57%  { transform: translateX(var(--shake-distance));             animation-timing-function: var(--shake-ease); }
  57.14%  { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }
  78.57%  { transform: translateX(var(--shake-overshoot));            animation-timing-function: var(--shake-ease); }
  100%    { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .t-input { animation: none !important; transform: none !important; }
}

/* ───────────────────────── 10 · Success check ────────────────────────── */
.t-success-check {
  display: inline-block;
  transform-origin: center;
  opacity: 0;
  will-change: transform, opacity, filter;
}
.t-success-check svg { display: block; overflow: visible; }
/* dasharray 34 = getTotalLength() for vores standard-check-path
   "M14 27 L22 34 L34 16" i 48-viewBox (32.3, rundet op). */
.t-success-check svg path {
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
}

.t-success-check[data-state="in"] {
  animation:
    t-check-fade   var(--check-opacity-dur) var(--check-ease-opacity) forwards,
    t-check-rotate var(--check-rotate-dur)  var(--check-ease-rotate)  forwards,
    t-check-blur   var(--check-blur-dur)    var(--check-ease-out)     forwards,
    t-check-bob    var(--check-bob-dur)     var(--check-ease-bob)     forwards;
}
.t-success-check[data-state="in"] svg path {
  animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms) forwards;
}

@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate {
  from { transform: rotate(var(--check-rotate-from)); }
  to   { transform: rotate(0deg); }
}
@keyframes t-check-blur {
  from { filter: blur(var(--check-blur-from)); }
  to   { filter: blur(0); }
}
@keyframes t-check-bob {
  from { translate: 0 var(--check-y-amount); }
  to   { translate: 0 0; }
}
@keyframes t-check-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .t-success-check { animation: none !important; opacity: 1; }
  .t-success-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }
}

/* ───────────────────────── 02 · Number pop-in ────────────────────────── */
@keyframes t-digit-pop-in {
  0%   {
    transform: translate(
      calc(var(--digit-distance) * var(--digit-dir-x)),
      calc(var(--digit-distance) * var(--digit-dir-y))
    );
    opacity: 0;
    filter: blur(var(--digit-blur));
  }
  100% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
}

.t-digit-group {
  display: inline-flex;
  align-items: baseline;
}
.t-digit {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.t-digit-group.is-animating .t-digit {
  animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
}
.t-digit-group.is-animating .t-digit[data-stagger="1"] {
  animation-delay: var(--digit-stagger);
}
.t-digit-group.is-animating .t-digit[data-stagger="2"] {
  animation-delay: calc(var(--digit-stagger) * 2);
}
/* Udvidelse efter snippet'ets dokumenterede mønster ("1", "2", …) —
   vores tal kan have op til 6 tegn. */
.t-digit-group.is-animating .t-digit[data-stagger="3"] {
  animation-delay: calc(var(--digit-stagger) * 3);
}
.t-digit-group.is-animating .t-digit[data-stagger="4"] {
  animation-delay: calc(var(--digit-stagger) * 4);
}
.t-digit-group.is-animating .t-digit[data-stagger="5"] {
  animation-delay: calc(var(--digit-stagger) * 5);
}

@media (prefers-reduced-motion: reduce) {
  .t-digit-group .t-digit { animation: none !important; }
}

/* ───────────────────────── 05 · Menu dropdown ────────────────────────── */
.t-dropdown {
  transform-origin: top left;
  transform: scale(var(--dropdown-pre-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-open-dur) var(--dropdown-ease),
    opacity   var(--dropdown-open-dur) var(--dropdown-ease);
  will-change: transform, opacity;
}
.t-dropdown[data-origin="top-right"]     { transform-origin: top right; }
.t-dropdown[data-origin="top-center"]    { transform-origin: top center; }
.t-dropdown[data-origin="bottom-left"]   { transform-origin: bottom left; }
.t-dropdown[data-origin="bottom-center"] { transform-origin: bottom center; }
.t-dropdown[data-origin="bottom-right"]  { transform-origin: bottom right; }

.t-dropdown.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-dropdown.is-closing {
  transform: scale(var(--dropdown-closing-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-close-dur) var(--dropdown-ease),
    opacity   var(--dropdown-close-dur) var(--dropdown-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-dropdown { transition: none !important; }
}

/* ───────────────────────── 08' · Page enter (afledt) ─────────────────── */
/* Enter-halvdelen af "page side-by-side", tilpasset dashboardets N views med
   keyed remount (snippet'en er bygget til præcis to side-by-side-sider).
   Samme tokens, samme følelse. BEVIDST uden will-change og med fill-mode
   backwards: en blivende transform ville gøre wrapperen til containing block
   for position:fixed-børn (fx efterbehandlingens detail-sheet). */
@keyframes t-page-enter {
  from {
    opacity: 0;
    transform: translateY(var(--page-slide-distance));
    filter: blur(var(--page-blur));
  }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.t-page-enter {
  animation: t-page-enter var(--page-slide-dur) var(--page-slide-ease) backwards;
}

@media (prefers-reduced-motion: reduce) {
  .t-page-enter { animation: none !important; }
}

/* ───────────────────────── 15 · Shimmer text ─────────────────────────── */
.t-shimmer {
  position: relative;
  display: inline-block;
  color: var(--shimmer-base);
}
.t-shimmer::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    90deg,
    transparent          0%,
    transparent         40%,
    var(--shimmer-highlight) 50%,
    transparent         60%,
    transparent        100%
  );
  background-size: var(--shimmer-band) 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: t-shimmer var(--shimmer-dur) var(--shimmer-ease) infinite;
}
@keyframes t-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .t-shimmer::before { animation: none !important; }
}

/* 18 · (Ord-animationen af logoet i topbjælken er fjernet med brand 3.0: logoet er nu én SVG-fil.) */

/* ───────────────────── 19 · Hover-system (A2) ─────────────────────────
   Steffens ønske 2026-09-02: det rene layout skal svare når musen er over
   et element — en mørkere markering. Fem varianter, ét udtryk:
   - .ekb-hover        klikbare rækker/kort/listeelementer → mørkere fyld
   - .ekb-hover-row    samme, men fylder ud til kanten på hairline-rækker
                       (negativ margin så teksten ikke rykker)
   - .ekb-hover-btn    ghost/outline-knapper → kant bliver mørk tekst + let fyld
   - .ekb-hover-text   tekstlinks/tertiære knapper → fuld mørk tekst
   - .ekb-hover-chip   filter-chips/pills → kant mørkere + let fyld
   - .ekb-hover-primary grønne primærknapper → mørkere grøn (guidens hover/tryk)
   !important på fyldet fordi elementerne har inline background; AKTIVE/
   valgte elementer må IKKE have klassen (de er allerede grønne). */
/* !important også på transition/bleed: de fleste knapper har inline
   `all: unset`, som ellers nulstiller klassens værdier. */
.ekb-hover, .ekb-hover-row, .ekb-hover-btn, .ekb-hover-text, .ekb-hover-chip, .ekb-hover-primary {
  transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out !important;
}
.ekb-hover:not(:disabled):hover,
.ekb-hover-row:not(:disabled):hover {
  /* 7 % mørk tekst på creme: 4,5 % var usynligt på PR-1, 10 % blev tungt. */
  background-color: rgba(var(--ekb-ink-rgb), 0.07) !important;
}
.ekb-hover-row {
  margin-left: -12px !important; margin-right: -12px !important;
  padding-left: 12px !important; padding-right: 12px !important;
  /* Rækker har typisk inline width:100% — uden dette bliver boksen
     overconstrained og rykker 12px til venstre i stedet for at bløde ud. */
  width: calc(100% + 24px) !important;
  box-sizing: border-box !important;
  border-radius: var(--r-md, 8px);
}
.ekb-hover-btn:not(:disabled):hover {
  border-color: var(--ekb-ink) !important;
  background-color: rgba(var(--ekb-ink-rgb), 0.06) !important;
}
.ekb-hover-text:not(:disabled):hover {
  color: var(--ekb-ink) !important;
  text-decoration-color: var(--ekb-ink);
}
.ekb-hover-chip:not(:disabled):hover {
  border-color: rgba(var(--ekb-ink-rgb), 0.55) !important;
  background-color: rgba(var(--ekb-ink-rgb), 0.055) !important;
}
.ekb-hover-primary:not(:disabled):hover {
  background-color: var(--ekb-green-hover) !important;
  border-color: var(--ekb-green-hover) !important;
}
/* Tryk-feedback: svar på pointer-down, ikke på slip (apple-design §1).
   Flader (rows/kort) bliver 10 % mørkere øjeblikkeligt; knapper/chips/tekst
   trykkes til 0.98 (aldrig under). Slip glider tilbage via basisreglens
   120 ms, derfor transform i listen for de fire skalerende varianter.
   :not(:disabled) så låste knapper ikke reagerer. */
.ekb-hover-btn, .ekb-hover-text, .ekb-hover-chip, .ekb-hover-primary {
  transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out, transform 120ms ease-out !important;
}
.ekb-hover:not(:disabled):active,
.ekb-hover-row:not(:disabled):active {
  background-color: rgba(var(--ekb-ink-rgb), 0.10) !important;
  transition-duration: 0ms !important;
}
.ekb-hover-btn:not(:disabled):active,
.ekb-hover-primary:not(:disabled):active,
.ekb-hover-chip:not(:disabled):active,
.ekb-hover-text:not(:disabled):active {
  /* !important: inline `all: unset` ekspanderer til transform: unset og
     ville ellers slå klassens scale. */
  transform: scale(0.98) !important;
  transition: transform 80ms ease-out !important;
}
.ekb-hover-primary:not(:disabled):active {
  background-color: var(--ekb-green-press) !important;
  border-color: var(--ekb-green-press) !important;
}
@media (prefers-reduced-motion: reduce) {
  .ekb-hover-btn:not(:disabled):active,
  .ekb-hover-primary:not(:disabled):active,
  .ekb-hover-chip:not(:disabled):active,
  .ekb-hover-text:not(:disabled):active { transform: none !important; }
}
/* På den dybe grønne flade (Økonomis månedsbånd, Steffen 18/10): de mørke varianter forsvinder på grøn,
   så her lysner kant og fyld i stedet. -on-green: outline-knapper; -cream: cremefarvet knap. */
.ekb-hover-on-green, .ekb-hover-cream {
  transition: background-color 120ms ease-out, border-color 120ms ease-out, transform 120ms ease-out !important;
}
.ekb-hover-on-green:not(:disabled):hover {
  border-color: rgba(var(--ekb-cream-rgb), 0.45) !important;
  background-color: rgba(var(--ekb-cream-rgb), 0.08) !important;
}
.ekb-hover-cream:not(:disabled):hover { background-color: var(--ekb-surface) !important; }
.ekb-hover-on-green:not(:disabled):active,
.ekb-hover-cream:not(:disabled):active {
  transform: scale(0.98) !important;
  transition: transform 80ms ease-out !important;
}
@media (prefers-reduced-motion: reduce) {
  .ekb-hover-on-green:not(:disabled):active,
  .ekb-hover-cream:not(:disabled):active { transform: none !important; }
}
/* Touch: iOS Safari anvender kun :active når dokumentet lytter på touch;
   ds/v2-utils.jsx registrerer en tom, passiv touchstart-lytter. :hover er
   stadig "klæbende" efter tap indtil næste tap; det er acceptabelt, fordi
   selve trykket nu har sin egen øjeblikkelige :active-tilstand. */

/* ───────────────────────── 20 · Svævende lag (ark, drawers, scrim) ────── */
/* Ind fra kanten på --sheet-open-dur/--sheet-open-ease; ud samme vej på
   --sheet-close-dur ease-in (apple-design §7: symmetriske baner). Styres af
   data-open="true"/"false", og elementet SKAL blive i DOM mens det lukker:
     const mounted = window.useDelayedUnmount(open, 350);
     mounted && <div className="t-sheet-right" data-open={open ? 'true' : 'false'}>
   @starting-style giver ind-transitionen når elementet indsættes allerede
   åbent (uden den findes ingen før-tilstand at glide fra). Browsere uden
   @starting-style viser arket uden ind-bevægelse; luk virker stadig.
   Genåbning midt i luk vender bare transitionen (§3 afbrydelighed). Kun
   transform/opacity: positionér arket med inset/flex, ikke egen transform,
   og husk at transform gør arket til containing block for position:fixed-
   børn. .t-scrim er baggrundsdæmperen bag ark/modal, opacity 0->1. */
.t-sheet-right, .t-sheet-up {
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  transition:
    transform var(--sheet-close-dur) var(--sheet-close-ease),
    opacity   var(--sheet-close-dur) var(--sheet-close-ease);
}
.t-sheet-right { transform: translateX(var(--sheet-travel)); }
.t-sheet-up    { transform: translateY(var(--sheet-travel)); }
.t-sheet-right[data-open="true"], .t-sheet-up[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
  transition:
    transform var(--sheet-open-dur) var(--sheet-open-ease),
    opacity   var(--sheet-open-dur) var(--sheet-open-ease);
}
.t-sheet-right[data-open="true"] { transform: translateX(0); }
.t-sheet-up[data-open="true"]    { transform: translateY(0); }
@starting-style {
  .t-sheet-right[data-open="true"] { transform: translateX(var(--sheet-travel)); opacity: 0; }
  .t-sheet-up[data-open="true"]    { transform: translateY(var(--sheet-travel)); opacity: 0; }
}

.t-scrim {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sheet-close-dur) var(--sheet-close-ease);
}
.t-scrim[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--sheet-open-dur) var(--sheet-open-ease);
}
@starting-style {
  .t-scrim[data-open="true"] { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* Kun opacity: ingen glid, men stadig en blid ind/ud (§14). */
  .t-sheet-right, .t-sheet-up,
  .t-sheet-right[data-open="true"], .t-sheet-up[data-open="true"] {
    transform: none !important;
    transition: opacity var(--sheet-close-dur) ease !important;
  }
}