/* Mirror Reveal: the Mirror Health logo arrives the way a mirror clears (2026-11-08)
 *
 *   1. The logo starts fogged, like a steamed mirror, and a soft wipe clears it.
 *   2. The "Health" badge slides into place.
 *   3. A reflection rises beneath the logo.
 *   4. A glint of light crosses the letters only; the reflection catches it a beat later.
 *   5. The dot of the "i" twinkles.
 * About 2.4 s, then completely still. Complete at rest: without the class,
 * or with reduced motion, it's simply the finished logo.
 *
 * Markup (mirror-reveal.js adds the fog, shine and reflection layers):
 *   <div class="mr-logo" data-mirror-reveal>
 *     <div class="mr-stage"> …mirror-health-logo-reveal.svg inline… <span class="mr-spark" aria-hidden="true"></span></div>
 *   </div>
 * Options (on .mr-logo): .mr-no-reflection (headers), .mr-hover (glint again on hover/focus),
 * .mr-line (a thin glass line under the logo; off by default).
 * Tokens: color (the logo), --mr-knock (the "Health" letters: use the background),
 * --mr-width, --mr-shine, --mr-shine-tint, --mr-floor, --mr-dur.
 */

.mr-logo {
  --mr-width: 360px;
  --mr-dur: 2400ms;
  --mr-shine: rgb(255 255 255 / 0.95);
  --mr-shine-tint: rgb(150 236 255 / 0.85);
  --mr-floor: color-mix(in oklab, currentColor 35%, transparent);
  position: relative;
  display: inline-flex;
  flex-direction: column;
  width: var(--mr-width);
  max-width: 100%;
}
.mr-stage { position: relative; display: grid; }
.mr-stage > * { grid-area: 1 / 1; }
.mr-svg { display: block; width: 100%; height: auto; overflow: visible; fill: currentColor; }
.mr-health { fill: var(--mr-knock, #fff); }

/* Layers added by the script */
.mr-fog { opacity: 0; filter: blur(7px) saturate(0.6); transform: scale(1.012); pointer-events: none; }
.mr-fog .mr-svg { fill: currentColor; }
.mr-shine {
  opacity: 0;
  pointer-events: none;
  -webkit-mask-image: var(--mr-mask);
  mask-image: var(--mr-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background: linear-gradient(104deg, transparent 38%, var(--mr-shine) 47%, var(--mr-shine-tint) 51%, transparent 60%);
  background-size: 300% 100%;
  background-position: 120% 0;
}
.mr-floor {
  display: none;
  height: 1px;
  margin-top: calc(var(--mr-width) * 0.018);
  margin-bottom: calc(var(--mr-width) * -0.018);
  background: linear-gradient(90deg, transparent, var(--mr-floor) 18%, var(--mr-floor) 82%, transparent);
  transform-origin: 50% 50%;
}
.mr-reflection {
  position: relative;
  aspect-ratio: 873 / 84;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.26;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%);
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
}
.mr-reflection .mr-svg { transform: scaleY(-1); filter: blur(0.6px); }
.mr-line .mr-floor { display: block; }
.mr-no-reflection .mr-reflection, .mr-no-reflection .mr-floor { display: none; }

/* The twinkle on the dot of the "i" (position measured by the script) */
.mr-spark {
  position: absolute;
  left: var(--mr-spark-x, 22.4%);
  top: var(--mr-spark-y, 12%);
  width: calc(var(--mr-width) * 0.075);
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
  opacity: 0;
  scale: 0;
}
.mr-spark::before, .mr-spark::after { content: ""; position: absolute; inset: 0; }
.mr-spark::before {
  background: var(--mr-shine);
  clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%);
}
.mr-spark::after {
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--mr-shine-tint), transparent 70%);
  filter: blur(2px);
}

/* ------------------------------------------------------------------ */
/* The sequence (.is-revealing); fills hold the finished state          */
/* ------------------------------------------------------------------ */
.is-revealing .mr-floor { animation: mr-floor calc(var(--mr-dur) * 0.26) cubic-bezier(0.3, 0.7, 0.2, 1) both; }
.is-revealing .mr-stage > .mr-svg {
  -webkit-mask-image: linear-gradient(100deg, #000 42%, transparent 58%);
  mask-image: linear-gradient(100deg, #000 42%, transparent 58%);
  -webkit-mask-size: 320% 100%;
  mask-size: 320% 100%;
  animation: mr-wipe calc(var(--mr-dur) * 0.38) cubic-bezier(0.45, 0.05, 0.25, 1) calc(var(--mr-dur) * 0.08) both;
}
/* The fog is never masked: a mask clips to the layer's box and would cut
   the blur's soft edge off around the logo. It fades out instead, while the
   sharp logo wipes in over it. */
.is-revealing .mr-fog { animation: mr-fog calc(var(--mr-dur) * 0.5) ease-out both; }
.is-revealing .mr-stage > .mr-svg .mr-badge-group {
  transform-box: fill-box;
  animation: mr-badge calc(var(--mr-dur) * 0.3) cubic-bezier(0.2, 0.9, 0.3, 1.15) calc(var(--mr-dur) * 0.2) both;
}
.is-revealing .mr-reflection {
  animation:
    mr-reflect calc(var(--mr-dur) * 0.36) cubic-bezier(0.25, 0.8, 0.3, 1) calc(var(--mr-dur) * 0.22) both,
    mr-catch calc(var(--mr-dur) * 0.22) ease-out calc(var(--mr-dur) * 0.52) both;
}
.is-revealing .mr-shine { animation: mr-shine calc(var(--mr-dur) * 0.34) cubic-bezier(0.5, 0, 0.3, 1) calc(var(--mr-dur) * 0.42) both; }
.is-revealing .mr-spark { animation: mr-spark calc(var(--mr-dur) * 0.26) cubic-bezier(0.3, 0.7, 0.3, 1) calc(var(--mr-dur) * 0.7) both; }

/* Hover or focus: just the glint and the twinkle, once more */
.mr-hover:is(:hover, :focus-within) .mr-shine { animation: mr-shine 900ms cubic-bezier(0.5, 0, 0.3, 1) both; }
.mr-hover:is(:hover, :focus-within) .mr-spark { animation: mr-spark 620ms cubic-bezier(0.3, 0.7, 0.3, 1) 480ms both; }

@keyframes mr-floor { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes mr-wipe {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}
@keyframes mr-fog {
  0% { opacity: 0; }
  18% { opacity: 0.55; }
  55% { opacity: 0.45; }
  100% { opacity: 0; }
}
@keyframes mr-badge {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes mr-reflect {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 0.26; transform: translateY(0); }
}
@keyframes mr-catch {
  0%, 100% { filter: none; }
  45% { filter: brightness(1.9); }
}
@keyframes mr-shine {
  0% { opacity: 1; background-position: 120% 0; }
  85% { opacity: 1; }
  100% { opacity: 0; background-position: -20% 0; }
}
@keyframes mr-spark {
  0% { opacity: 0; scale: 0; rotate: -30deg; }
  40% { opacity: 1; scale: 1.15; }
  100% { opacity: 0; scale: 0.2; rotate: 60deg; }
}

/* Reduced motion: the finished logo, gently faded in; no wipe, glint or twinkle */
@media (prefers-reduced-motion: reduce) {
  .is-revealing .mr-stage > .mr-svg, .is-revealing .mr-fog, .is-revealing .mr-stage > .mr-svg .mr-badge-group,
  .is-revealing .mr-shine, .is-revealing .mr-spark, .mr-hover:is(:hover, :focus-within) .mr-shine,
  .mr-hover:is(:hover, :focus-within) .mr-spark, .is-revealing .mr-floor {
    animation: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .is-revealing .mr-stage { animation: mr-calm 300ms ease-out both; }
  .is-revealing .mr-reflection { animation: none; }
  .mr-fog, .mr-shine, .mr-spark { display: none; }
}
@keyframes mr-calm { from { opacity: 0; } to { opacity: 1; } }