/* The opening of bellaclinicth.com (scripts/site/intro.js sets html.has-intro before the first paint).
   Bella's ivory mark on the evergreen ground: it settles in (opacity, 0.96 → 1), a fine gold rule draws
   beneath it, then the cover lifts away and the page is already there. 1.34 s in all, no bounce.
   The cover is hidden unless the class is set, is aria-hidden, and holds nothing focusable. */
.bella-intro {
  display: none;
}

html.has-intro .bella-intro {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 100vh;
  height: 100lvh;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 70% at 50% 42%, #1e4839 0%, var(--c-brand-deep, #173c31) 52%, #12332a 100%);
  /* The lifting edge: a hairline of gold and a soft green shadow on the page it uncovers. */
  box-shadow: inset 0 -1px 0 rgb(221 178 121 / 0.55), 0 20px 56px rgb(18 51 42 / 0.2);
  transform: translate3d(0, 0, 0);
  animation: bella-intro-lift 540ms var(--ease-in-out, cubic-bezier(0.6, 0, 0.3, 1)) 800ms both;
  contain: layout paint style;
  will-change: transform;
}

html.has-intro .bella-intro__mark {
  display: grid;
  justify-items: center;
  gap: clamp(18px, 2.4vh, 26px);
  animation: bella-intro-mark-out 340ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) 760ms both;
}

html.has-intro .bella-intro__logo {
  display: block;
  width: clamp(160px, 44vw, 228px);
  height: auto;
  animation: bella-intro-logo-in 700ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) 30ms both;
}

html.has-intro .bella-intro__rule {
  display: block;
  width: clamp(56px, 12vw, 72px);
  height: 1px;
  background: linear-gradient(90deg, rgb(221 178 121 / 0), var(--c-gold, #ddb279) 22%, var(--c-gold, #ddb279) 78%, rgb(221 178 121 / 0));
  animation: bella-intro-rule 560ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) 220ms both;
}

/* From the start of the lift the page underneath takes every tap. */
html.has-intro.intro-lifting .bella-intro {
  pointer-events: none;
}

/* Any input: the cover fades at once wherever it was, then intro.js removes it. */
html.has-intro.intro-skip .bella-intro {
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

@keyframes bella-intro-logo-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes bella-intro-rule {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes bella-intro-mark-out {
  to {
    opacity: 0;
    transform: translate3d(0, -14px, 0);
  }
}

@keyframes bella-intro-lift {
  to {
    transform: translate3d(0, -100%, 0);
  }
}

@media (prefers-reduced-motion: reduce), (forced-colors: active), print {
  html.has-intro .bella-intro {
    display: none;
  }
}