/* The Rails design system: the material (docs/design/DESIGN-SYSTEM.md 2.5, 4.2, 4.4, 4.5, 4.6, 4.7).
   One class, .glass, at the container thickness; .face-glass overrides it to the face's. In
   z-order inside the isolated glass: the fill with the shading, the specular (.spec), the rim
   (::before), the sheen (.sheen), the eyes. Children of the glass use fill-1, fill-2 and ink,
   never another pane. The lens filters live in lens.js; the eyes and the element in face.js;
   the morph's phases are driven by morph.js. Every value is a token from tokens.css.

   Markup of one piece of glass:
     <div class="glass"><span class="spec"></span><span class="sheen"></span> …content… </div>
   The face's markup is what <rails-face> renders (face.js). */

/* Registered so the morph can interpolate them and the drift can rotate the sheen. */
@property --glass-fill  { syntax: "<color>";  inherits: false; initial-value: transparent; }
@property --glass-blur  { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --sheen-angle { syntax: "<angle>";  inherits: true;  initial-value: 0deg; }

/* ------------------------------------------------------------------
   The material, at the container thickness.
   ------------------------------------------------------------------ */
.glass {
  --d: var(--face-size-row);      /* the size the rim, ring and specular scale from */
  --rim: var(--glass-rim);
  --rim-a: var(--glass-rim-a);
  --rim-b: var(--glass-rim-b);
  --spec-a: var(--glass-spec);
  --shade: transparent;           /* the face turns this on; a container is flat inside */
  --shadow-y: var(--glass-shadow-y); --shadow-b: var(--glass-shadow-blur);
  --glass-fill: var(--glass-fill-container);
  --glass-blur: var(--glass-blur-container);
  --ring: var(--glass-sheen-ring-container);      /* the sheen ring's width on a container */
  --ring-a: var(--glass-sheen-ring-container-a);  /* and its opacity: 40% on a container, 70% on the face */
  --press: transparent;
  --edge: transparent;            /* the face turns this on: a hairline outside the rim */
  --saturate: var(--glass-saturate);
  --agent: transparent;           /* the one tint on the screen: the agent's colour, or nothing */
  position: relative; isolation: isolate; overflow: hidden; color: var(--ink);
  background:
    linear-gradient(var(--press), var(--press)),
    radial-gradient(closest-side, transparent calc(var(--face-shade-start) * 100%), var(--shade) 100%),
    linear-gradient(color-mix(in oklch, var(--agent) calc(var(--glass-tint-alpha-composite) * 100%), transparent), color-mix(in oklch, var(--agent) calc(var(--glass-tint-alpha-composite) * 100%), transparent)),
    var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--saturate));
  box-shadow:
    inset 0 -1px 0 var(--glass-thick),
    0 0 0 var(--space-hairline) var(--edge),
    0 var(--shadow-y) var(--shadow-b) rgb(0 0 0 / var(--glass-shadow-a));
}
/* A placed toast keeps its fixed placement (components.css) whichever of the two files loads last. */
.toast--placed:where(.glass) { position: fixed; }
.glass::before {                        /* the rim: brightest where the light comes from */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: var(--rim); z-index: 3; pointer-events: none;
  background: linear-gradient(var(--glass-rim-angle), rgb(255 255 255 / var(--rim-a)), rgb(255 255 255 / var(--rim-b)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
/* What sits on a pane sits above its specular (z-index 2), or the top of a tall sheet washes its
   own title out. A container's children are flex or grid items, so the index applies without
   positioning them. The face and the morph order their own layers. */
.glass:not(.face-glass):not(.morph) > :not(.spec):not(.sheen) { z-index: 2; }
/* Text on glass is ink, never muted (2.1): whatever reads the muted token inside a pane gets ink. */
.glass { --muted: var(--ink); }
.glass > .spec { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: 2; pointer-events: none; }
.glass > .spec::before {                /* the face's specular: an arc along the top-left of the rim, feathered inward.
                                           The conic draws the 0.5 d arc centred at 315 degrees; the mask keeps it at the rim. */
  content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0;
  background: conic-gradient(from 262deg, transparent 0deg, rgb(255 255 255 / var(--spec-a)) 53deg, transparent 106deg);
  -webkit-mask: radial-gradient(closest-side, transparent 0 84%, #000 97%);
  mask: radial-gradient(closest-side, transparent 0 84%, #000 97%);
  filter: blur(calc(var(--d) * var(--face-spec-feather)));
}
.glass > .spec::after {                 /* the container's specular: along the top edge */
  content: ""; position: absolute; inset: 0; opacity: 1;
  background: linear-gradient(180deg, rgb(255 255 255 / var(--spec-a)), transparent calc(var(--glass-spec-height) * 100%));
}
.glass > .sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: 4; pointer-events: none;
  opacity: 0; transition: opacity var(--fade-slow); animation: rails-drift var(--drift) paused;
  filter: blur(calc(var(--ring) * .5)); }   /* the feather: a blur on the layer, after its own mask; the glass clips the spill */
.glass > .sheen::before, .glass > .sheen::after {
  content: ""; position: absolute;
  background: conic-gradient(from var(--sheen-angle) in oklch shorter hue,
    var(--sheen-1), var(--sheen-2), var(--sheen-3), var(--sheen-4), var(--sheen-5), var(--sheen-6), var(--sheen-7));
}
.glass > .sheen::before {               /* the ring at the rim: brightest at the edge, bleeding inward */
  inset: 0; border-radius: inherit;
  border: var(--ring) solid transparent;
  background-origin: border-box; background-clip: border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: var(--ring-a);
}
.glass > .sheen::after {                /* the inner film over the fill, nothing at the centre */
  inset: 0; border-radius: inherit; opacity: 0;
  -webkit-mask: radial-gradient(closest-side, transparent calc(var(--glass-sheen-film-hole) * 100%), #000 100%);
  mask: radial-gradient(closest-side, transparent calc(var(--glass-sheen-film-hole) * 100%), #000 100%);
}
.glass.is-active > .sheen { opacity: 1; }
/* The drift turns only while a sheen can be seen. It animates a custom property, which only the main
   thread can do, so a drifting sheen restyles and repaints its face on every frame: at rest, with
   the sheen at opacity 0, that is all cost and no picture. */
.glass.is-active > .sheen, .glass.is-active .face > .face-glass > .sheen { animation-play-state: running; }
@keyframes rails-drift { to { --sheen-angle: 360deg; } }

/* A sheet is modal: it sits over the scrim and over whatever the page left behind it, often the
   page's own primary button. It blurs wider and does not boost saturation, so that button is a
   faint wash behind the sheet and never a glow through its lower edge. */
.glass.sheet { --saturate: var(--glass-saturate-sheet); --glass-blur: var(--glass-blur-sheet); }

/* ------------------------------------------------------------------
   The material, at the face's thickness.
   ------------------------------------------------------------------ */
.face-glass {
  --rim-a: var(--glass-face-rim-a);
  --rim-b: var(--glass-face-rim-b);
  --spec-a: var(--glass-face-spec);
  --shade: var(--glass-shade);
  --edge: var(--glass-face-edge);
  --ring: calc(var(--d) * var(--face-ring));
  --ring-a: var(--glass-sheen-ring-a);
  --r: calc(var(--d) / 2);
  --shadow-y: calc(var(--d) * var(--face-shadow-y)); --shadow-b: calc(var(--d) * var(--face-shadow-blur));
  --glass-fill: var(--glass-fill-face);
  --glass-blur: max(var(--face-blur-floor), var(--d) * var(--face-blur-factor));   /* a slight frost; the centre stays clear */
  width: var(--d); height: var(--d); border-radius: var(--r);
  transition: scale var(--spring-quick), --press var(--fade-fast);
}
.face-glass > .spec::before { opacity: 1; }
.face-glass > .spec::after { opacity: 0; }
.face-glass > .sheen::after {
  opacity: calc(var(--glass-sheen-film-min-a) + (var(--glass-sheen-film-max-a) - var(--glass-sheen-film-min-a)) * var(--level, .2));
  transition: opacity var(--morph-level-smoothing) linear;
}
.face-glass:active {                    /* pressed: brighter, smaller; the eyes scale with the bubble; the ring dims so the brightening reads */
  --press: rgb(255 255 255 / var(--glass-press-fill));
  --rim-a: calc(var(--glass-face-rim-a) + var(--glass-press-rim)); --rim-b: calc(var(--glass-face-rim-b) + var(--glass-press-rim));
  --ring-a: var(--glass-sheen-ring-pressed-a); scale: var(--glass-press-scale);
}

/* Refraction: the lens filter, Chromium only. face.js adds .has-lens to the root when the
   browser is Chromium-based, because rendering support cannot be feature detected and a
   browser that parses url() but does not draw it would lose the blur too. One filter per size
   (lens.js), whose map is rendered at that size's own 2x pixels. */
.has-lens .face-glass[data-lens="28"]  { -webkit-backdrop-filter: blur(var(--glass-blur)) url(#rails-lens-28) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) url(#rails-lens-28) saturate(var(--glass-saturate)); }
.has-lens .face-glass[data-lens="44"]  { -webkit-backdrop-filter: blur(var(--glass-blur)) url(#rails-lens-44) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) url(#rails-lens-44) saturate(var(--glass-saturate)); }
.has-lens .face-glass[data-lens="88"]  { -webkit-backdrop-filter: blur(var(--glass-blur)) url(#rails-lens-88) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) url(#rails-lens-88) saturate(var(--glass-saturate)); }
.has-lens .face-glass[data-lens="240"] { -webkit-backdrop-filter: blur(var(--glass-blur)) url(#rails-lens-240) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) url(#rails-lens-240) saturate(var(--glass-saturate)); }

/* ------------------------------------------------------------------
   The Face: the app icon's composition in a circle. The bubble is the whole box; the eyes are
   the mark's two rails on the icon's 40 grid, so their centre is the bubble's centre. The eyes
   are children of the glass: they travel, scale and press with it. Each eye is its own <rect>
   with its transform origin at its own centre, so an expression layer can move one eye without
   touching the bubble.
   ------------------------------------------------------------------ */
.face {
  --s: var(--face-size-header); --d: var(--s);
  position: relative; width: var(--s); height: var(--s); flex: none; display: block;
  border: 0; padding: 0; background: none; border-radius: 50%; cursor: default; color: inherit;
}
.face[role="button"] { cursor: pointer; }
.face > .face-glass { position: absolute; inset: 0; --d: var(--s); }
.eyes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; color: var(--ink); overflow: visible; }
.eyes rect { fill: currentColor; transform-box: fill-box; transform-origin: center; }
.face--240 { --s: var(--face-size-hero); }     .face--240 > .face-glass { --rim: var(--face-rim-240); }
.face--88  { --s: var(--face-size-header); }   .face--88  > .face-glass { --rim: var(--face-rim-88); }
.face--44  { --s: var(--face-size-row); }      .face--44  > .face-glass { --rim: var(--face-rim-44); }
.face--36  { --s: var(--face-size-composer); } .face--36  > .face-glass { --rim: var(--face-rim-36); }
.face--28  { --s: var(--face-size-bar); }      .face--28  > .face-glass { --rim: var(--face-rim-28); }
.face--36  > .face-glass > .spec, .face--28 > .face-glass > .spec { display: none; }   /* too small to read */
/* 16: flat. Glass is not readable at 16. */
.face--16  { --s: var(--face-size-favicon); }
.face--16  > .face-glass { --rim: var(--face-rim-16); background: var(--soft); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.face--16  > .face-glass::before, .face--16 > .face-glass > .spec, .face--16 > .face-glass > .sheen { display: none; }
/* A face on a flat surface with nothing moving behind it (a row, a card, a long list): the same
   glass without the backdrop filter or the lens, so a screen of faces stays inside the budget of
   six backdrop-filtered elements. <rails-face placement="flat">. */
.face--flat > .face-glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* A face inside a container is the container's glass, not a second pane: a fill-2 disc under the
   agent's tint, with the rim kept at 60%, no blur, no specular, no shadow, and the sheen ring at
   the container's own 40%. */
.glass .face > .face-glass, .face--in-glass > .face-glass {
  background:
    linear-gradient(color-mix(in oklch, var(--agent) calc(var(--glass-tint-alpha-composite) * 100%), transparent), color-mix(in oklch, var(--agent) calc(var(--glass-tint-alpha-composite) * 100%), transparent)),
    var(--fill-2); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  --rim-a: calc(var(--glass-face-rim-a) * var(--face-in-glass-rim)); --rim-b: calc(var(--glass-face-rim-b) * var(--face-in-glass-rim)); --ring-a: var(--glass-sheen-ring-container-a); }
.glass .face > .face-glass > .spec, .face--in-glass > .face-glass > .spec { display: none; }
.glass .face > .face-glass > .sheen { opacity: 0; }
.glass.is-active .face > .face-glass > .sheen { opacity: 1; }

/* ------------------------------------------------------------------
   The Morph (4.7): one glass silhouette, .glass.morph, whose position, size, corner, fill and
   blur transition between two rectangles it carries as custom properties (set by morph.js or
   the page): the face's (--morph-face-x/-y/-size) and the container's (--morph-open-x/-y/-width/
   -height/-radius). Its two children are the eyes layer (.eyes-hit) and the content (.content),
   both clipped to it. data-phase is face, open or hidden. It is positioned absolutely inside a
   positioned parent.
   ------------------------------------------------------------------ */
.morph {
  --morph-face-size: var(--face-size-header); --morph-face-x: 0px; --morph-face-y: 0px;
  --morph-open-x: 0px; --morph-open-y: 0px; --morph-open-width: 100%; --morph-open-height: 100%; --morph-open-radius: var(--radius-sheet);
  position: absolute; overflow: hidden;
  transition:
    left var(--spring-morph), top var(--spring-morph), width var(--spring-morph), height var(--spring-morph),
    border-radius var(--spring-morph), box-shadow var(--spring-morph),
    --glass-fill var(--spring-morph), --glass-blur var(--spring-morph),
    scale var(--spring-standard), opacity var(--fade-fast);
}
.morph > .spec::before, .morph > .spec::after { transition: opacity var(--spring-morph); }
.morph::before, .morph > .spec { transition: opacity var(--spring-standard); }
.morph > .eyes-hit { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; border: 0; padding: 0; background: none; border-radius: 50%; cursor: pointer;
  color: var(--ink); transition: opacity var(--fade-fast); }
.morph > .eyes-hit > .eyes { inset: 0; width: 100%; height: 100%; }
.morph > .content { position: absolute; left: 0; top: 0; width: var(--morph-open-width); height: var(--morph-open-height);
  color: var(--ink); transition: opacity var(--fade-standard); z-index: 2; }

/* Face phase, and hidden (which is the face phase before a materialize) */
.morph[data-phase="face"], .morph[data-phase="hidden"] {
  --d: var(--morph-face-size);
  left: var(--morph-face-x); top: var(--morph-face-y); width: var(--morph-face-size); height: var(--morph-face-size);
  border-radius: calc(var(--morph-face-size) / 2); --r: calc(var(--morph-face-size) / 2);
  --rim-a: var(--glass-face-rim-a); --rim-b: var(--glass-face-rim-b); --spec-a: var(--glass-face-spec); --shade: var(--glass-shade); --edge: var(--glass-face-edge);
  --glass-fill: var(--glass-fill-face); --glass-blur: max(var(--face-blur-floor), var(--morph-face-size) * var(--face-blur-factor));
  --shadow-y: calc(var(--morph-face-size) * var(--face-shadow-y)); --shadow-b: calc(var(--morph-face-size) * var(--face-shadow-blur));
  --ring: calc(var(--morph-face-size) * var(--face-ring)); --ring-a: var(--glass-sheen-ring-a);
}
.morph[data-phase="face"] > .spec::before, .morph[data-phase="hidden"] > .spec::before { opacity: 1; }
.morph[data-phase="face"] > .spec::after,  .morph[data-phase="hidden"] > .spec::after  { opacity: 0; }
.morph[data-phase="face"] > .eyes-hit { opacity: 1; transition: opacity var(--fade-standard) var(--morph-content-delay); }
.morph[data-phase="face"] > .content { opacity: 0; transition: opacity var(--fade-fast); pointer-events: none; }
/* Open phase */
.morph[data-phase="open"] {
  --d: var(--face-size-row);
  left: var(--morph-open-x); top: var(--morph-open-y); width: var(--morph-open-width); height: var(--morph-open-height);
  border-radius: var(--morph-open-radius); --r: var(--morph-open-radius);
  --rim-a: var(--glass-rim-a); --rim-b: var(--glass-rim-b); --spec-a: var(--glass-spec); --shade: transparent; --edge: transparent;
  --glass-fill: var(--glass-fill-container); --glass-blur: var(--glass-blur-container);
  --shadow-y: var(--glass-shadow-y); --shadow-b: var(--glass-shadow-blur); --ring: var(--glass-sheen-ring-container); --ring-a: var(--glass-sheen-ring-container-a);
}
.morph[data-phase="open"] > .spec::before { opacity: 0; }
.morph[data-phase="open"] > .spec::after { opacity: 1; }
.morph[data-phase="open"] > .eyes-hit { opacity: 0; transition: opacity var(--fade-fast); pointer-events: none; }
.morph[data-phase="open"] > .content { opacity: 1; transition: opacity var(--fade-standard) var(--morph-content-delay); }
/* Hidden phase, before a materialize */
.morph[data-phase="hidden"] { scale: var(--glass-materialize-scale); --glass-blur: 0px; --glass-fill: transparent; box-shadow: none; }
.morph[data-phase="hidden"]::before, .morph[data-phase="hidden"] > .spec { opacity: 0; }
.morph[data-phase="hidden"] > .eyes-hit { opacity: 0; pointer-events: none; }
.morph[data-phase="hidden"] > .content { opacity: 0; pointer-events: none; }
.morph.is-materializing { transition-duration: var(--spring-standard-duration); transition-timing-function: var(--ease-standard); }
.morph.is-resetting, .morph.is-resetting::before, .morph.is-resetting > .spec,
.morph.is-resetting > .spec::before, .morph.is-resetting > .spec::after,
.morph.is-resetting > .eyes-hit, .morph.is-resetting > .content { transition: none !important; }

/* Glass that materializes on its own (a face on a page, a toast): from 92% with no blur to full. */
.is-materializing:not(.morph) { transition: scale var(--spring-standard), --glass-blur var(--spring-standard), opacity var(--spring-standard); }
.is-hidden.glass { scale: var(--glass-materialize-scale); --glass-blur: 0px; opacity: 0; }

/* ------------------------------------------------------------------
   Fallbacks (4.5, 6). The viewer's choice on the root (data-glass="less", data-motion="reduce",
   data-contrast="more"), an element that forces one on its subtree, or the browser's own
   setting when nothing is chosen (the root may carry "full" or "normal" to override it).
   ------------------------------------------------------------------ */

/* Reduce Transparency: soft at 92% on the face, no blur, the rim kept, no specular, the sheen on the rim only. */
[data-glass="less"] .glass { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
[data-glass="less"] .glass:not([data-phase="hidden"]) { --glass-fill: color-mix(in srgb, var(--soft) calc(var(--glass-less-fill-alpha) * 100%), transparent); --shade: transparent; }
/* A container carries text: soft at 100%, or with the blur gone the page's words ghost through the pane's own. */
[data-glass="less"] .glass:not(.face-glass):not([data-phase="hidden"]):not([data-phase="face"]) { --glass-fill: var(--soft); }
[data-glass="less"] .glass::before { background: rgb(255 255 255 / var(--glass-face-rim-a)); }
[data-glass="less"] .glass > .spec { display: none; }
[data-glass="less"] .glass > .sheen::after { display: none; }
@media (prefers-reduced-transparency: reduce) {
  :root:not([data-glass="full"]) .glass { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  :root:not([data-glass="full"]) .glass:not([data-phase="hidden"]) { --glass-fill: color-mix(in srgb, var(--soft) calc(var(--glass-less-fill-alpha) * 100%), transparent); --shade: transparent; }
  :root:not([data-glass="full"]) .glass:not(.face-glass):not([data-phase="hidden"]):not([data-phase="face"]) { --glass-fill: var(--soft); }
  :root:not([data-glass="full"]) .glass::before { background: rgb(255 255 255 / var(--glass-face-rim-a)); }
  :root:not([data-glass="full"]) .glass > .spec { display: none; }
  :root:not([data-glass="full"]) .glass > .sheen::after { display: none; }
}

/* Increase Contrast: a solid fill, an ink ring at the rim's width, no specular, no sheen. */
[data-contrast="more"] .glass { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
[data-contrast="more"] .glass:not([data-phase="hidden"]) { --glass-fill: var(--glass-solid); --shade: transparent; }
[data-contrast="more"] .glass::before { background: var(--ink); }
[data-contrast="more"] .glass > .spec, [data-contrast="more"] .glass > .sheen { display: none; }
@media (prefers-contrast: more) {
  :root:not([data-contrast="normal"]) .glass { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  :root:not([data-contrast="normal"]) .glass:not([data-phase="hidden"]) { --glass-fill: var(--glass-solid); --shade: transparent; }
  :root:not([data-contrast="normal"]) .glass::before { background: var(--ink); }
  :root:not([data-contrast="normal"]) .glass > .spec, :root:not([data-contrast="normal"]) .glass > .sheen { display: none; }
}

/* Reduce Motion: no drift (the sheen holds at 0 degrees, sky at the top), no press scale, the
   morph a cross-fade with the geometry changing at once. */
[data-motion="reduce"] .glass > .sheen { animation: none; --sheen-angle: 0deg; transition: opacity var(--fade-standard); }
[data-motion="reduce"] .face-glass:active { scale: 1; }
[data-motion="reduce"] .morph { transition: opacity var(--fade-standard), --glass-fill var(--fade-standard); }
[data-motion="reduce"] .morph > .spec::before, [data-motion="reduce"] .morph > .spec::after { transition: none; }
[data-motion="reduce"] .morph > .eyes-hit, [data-motion="reduce"] .morph > .content { transition: opacity var(--fade-standard) !important; transition-delay: 0ms !important; }
[data-motion="reduce"] .is-materializing:not(.morph) { transition: opacity var(--fade-standard); scale: 1; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .glass > .sheen { animation: none; --sheen-angle: 0deg; transition: opacity var(--fade-standard); }
  :root:not([data-motion="full"]) .face-glass:active { scale: 1; }
  :root:not([data-motion="full"]) .morph { transition: opacity var(--fade-standard), --glass-fill var(--fade-standard); }
  :root:not([data-motion="full"]) .morph > .spec::before, :root:not([data-motion="full"]) .morph > .spec::after { transition: none; }
  :root:not([data-motion="full"]) .morph > .eyes-hit, :root:not([data-motion="full"]) .morph > .content { transition: opacity var(--fade-standard) !important; transition-delay: 0ms !important; }
  :root:not([data-motion="full"]) .is-materializing:not(.morph) { transition: opacity var(--fade-standard); scale: 1; }
}