/* ==========================================================================
   The motion layer
   --------------------------------------------------------------------------
   Page-to-page transitions (a doctor's portrait flies from the card to the
   profile), headings that arrive word by word, pictures that settle, cards
   that answer the pointer (the one under it lifts, the others step back),
   the header's reading line, the doctors' rail, the insurers' band, toasts,
   tooltips. All of it decorates a page that already works: with "reduce
   motion" — the system's or the site's own switch — everything stands still.
   ========================================================================== */

/* ---- text selection, scrollbars ---- */
::selection { background: var(--teal-700); color: var(--white); }
html { scrollbar-color: rgba(11, 102, 96, 0.42) transparent; }
body { overflow-x: clip; }

/* ---- one page to the next: the page fades up, the header stays, shared pictures fly ---- */
@view-transition { navigation: auto; }
.hdr { view-transition-name: hdr; }
.dock { view-transition-name: dock; }
::view-transition-old(root) { animation: 260ms var(--e-out) both vt-out; }
::view-transition-new(root) { animation: 640ms var(--e-out) 40ms both vt-in; }
::view-transition-group(*) { animation-duration: 700ms; animation-timing-function: cubic-bezier(0.2, 0.9, 0.25, 1); }
::view-transition-old(hdr), ::view-transition-new(hdr), ::view-transition-old(dock), ::view-transition-new(dock) { animation: none; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---- the header: a reading line, a lighter logo once the page moves, a pill that follows the pointer ---- */
.hdr__line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--teal), #5fc9bd); transform-origin: 0 50%; transform: scaleX(var(--read, 0)); opacity: 0;
  transition: opacity var(--d-base); pointer-events: none; }
.hdr.is-stuck .hdr__line { opacity: 1; }
.brand img { transition: height var(--d-slow) var(--e-out); }
.hdr.is-stuck .brand img { height: clamp(40px, 36px + 0.6vw, 48px); }
.nav { position: relative; }
.nav__pill { position: absolute; top: 50%; left: 0; height: 2.6rem; width: 0; margin-top: -1.3rem; border-radius: 999px; background: rgba(16, 36, 34, 0.06); opacity: 0; pointer-events: none;
  transition: transform 420ms var(--e-out), width 420ms var(--e-out), opacity 220ms; }
.nav.has-pill .nav__a:hover, .nav.has-pill .nav__a[aria-expanded="true"] { background: none; }
.nav__a { z-index: 1; }

/* ---- tooltips on icon buttons ---- */
@media (hover: hover) {
  [data-tip] { position: relative; }
  [data-tip]::after { content: attr(data-tip); position: absolute; z-index: 90; top: calc(100% + 10px); left: 50%; padding: 0.5rem 0.75rem; border-radius: 10px; background: var(--ink); color: var(--white);
    font: 600 0.78rem/1.2 var(--f-body); letter-spacing: 0; text-transform: none; white-space: nowrap; opacity: 0; translate: -50% 4px; pointer-events: none;
    transition: opacity 180ms, translate 260ms var(--e-out); }
  [data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; translate: -50% 0; transition-delay: 250ms; }
}

/* the accessibility switch: "Aa" says what it does (the person symbol did not) */

/* ---- words that arrive: headings rise word by word out of their own line ---- */
.js-split .w { display: inline-block; overflow: clip; overflow-clip-margin: 0.08em; vertical-align: top; padding: 0 0.08em 0.14em 0; margin: 0 -0.08em -0.14em 0; }
.js-split .w > span { display: inline-block; transform: translateY(108%); transition: transform 1100ms cubic-bezier(0.19, 1, 0.22, 1); transition-delay: calc(var(--wi, 0) * 60ms + var(--wd, 0ms)); }
.js-split.is-in .w > span { transform: none; }

/* ---- pictures that settle (a slow zoom out of a soft fade) ---- */
.rv .settle { opacity: 0; scale: 1.08; transition: opacity 900ms var(--e-out), scale 1600ms cubic-bezier(0.19, 1, 0.22, 1); }
.rv .settle.is-in { opacity: 1; scale: 1; }
/* blocks rise (the existing data-rise): opacity and movement only — a blur on every card that comes
   on screen made the graphics card redraw each one, and a glided scroll dropped frames there (measured) */
.rv .rise { transition: opacity 1000ms var(--e-out), transform 1300ms var(--e-out); transition-delay: calc(var(--i, 0) * 80ms); }

/* ---- cards: one way of answering the pointer, everywhere ----------------------------
   The card under the pointer rises on a soft spring, leans a degree toward it, draws a thin
   teal edge and a deep, quiet shadow, and a light gathers where the pointer is; its icon
   fills, its arrow steps forward. Pressed, it settles. Nothing else on the page changes —
   the neighbours stay exactly as they were. Keyboard focus gets the same rise. */
@property --spot { syntax: "<number>"; inherits: false; initial-value: 0; }
:root {
  --glide: cubic-bezier(0.16, 1, 0.3, 1);
  --ring: inset 0 0 0 1.5px rgba(0, 160, 152, 0.5);
  --lifted: 0 2px 4px rgba(11, 57, 54, 0.04), 0 22px 36px -22px rgba(11, 57, 54, 0.32), 0 50px 80px -48px rgba(11, 57, 54, 0.42);
}
:is(.dept, .qa, .hubc, .guide__list a, .way, .lrow, .arow, .pcard, .opt, .feature, .doc__pic, .adoc__pic, .mini) {
  --ty: 0px; --rx: 0deg; --ry: 0deg; --sc: 1; --mx: 50%; --my: 50%;
  transform: perspective(1100px) translate3d(0, var(--ty), 0) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--sc));
  transition: transform 800ms var(--glide), box-shadow 700ms var(--glide), background-color 450ms var(--e-out), color 450ms var(--e-out), --spot 600ms var(--glide);
}
/* the light that gathers under the pointer (no extra element: a background layer that fades in) */
:is(.dept, .qa, .hubc, .guide__list a, .way, .lrow, .arow, .pcard, .opt, .feature, .mini) {
  background-image: radial-gradient(420px circle at var(--mx) var(--my), rgb(0 160 152 / calc(var(--spot) * 0.12)), transparent 48%);
}
.qa--er { background-image: radial-gradient(420px circle at var(--mx) var(--my), rgb(211 59 61 / calc(var(--spot) * 0.1)), transparent 48%); }
.spot { display: none; }
@media (hover: hover) and (pointer: fine) {
  :is(.dept, .qa, .hubc, .guide__list a, .way, .lrow, .arow, .pcard, .opt, .feature, .mini):hover,
  .doc:hover > .doc__pic, .adoc:hover > .adoc__pic {
    --ty: -7px; --spot: 1;
    transform: perspective(1100px) translate3d(0, var(--ty), 0) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--sc));
    box-shadow: var(--ring), var(--lifted);
  }
  :is(.way, .lrow, .arow, .guide__list a, .mini):hover { --ty: -3px; }
  .doc:hover > .doc__pic, .adoc:hover > .adoc__pic { box-shadow: var(--lifted); }
  .qa--er:hover { box-shadow: inset 0 0 0 1.5px rgba(211, 59, 61, 0.45), 0 22px 36px -22px rgba(120, 20, 20, 0.28), 0 50px 80px -48px rgba(120, 20, 20, 0.32); }
  .dept--all:hover { box-shadow: 0 22px 36px -22px rgba(11, 57, 54, 0.5), 0 50px 80px -48px rgba(11, 57, 54, 0.6); background-color: var(--teal-800); }
  .way--main:hover { box-shadow: 0 22px 36px -22px rgba(11, 57, 54, 0.55), 0 50px 80px -48px rgba(11, 57, 54, 0.6); }
  :is(.dept, .qa, .hubc, .guide__list a, .way, .lrow, .arow, .pcard, .opt, .feature, .mini):active { --ty: -2px; --sc: 0.985; transition-duration: 180ms; }
  /* what lives inside a card answers with it */
  .dept:hover h2, .dept:hover h3, .hubc:hover h2, .hubc:hover h3, .qa:hover b, .arow:hover .arow__t b, .doc:hover .doc__name a, .adoc:hover .adoc__t b, .pcard:hover .pcard__t b { color: var(--teal-700); }
  .dept--all:hover h3, .way--main:hover b { color: var(--white); }
  :is(.dept, .hubc, .arow, .lrow, .way, .guide__list a, .opt):hover :is(.dept__i, .lrow__i, .gi, .di) { background: var(--teal-700); color: var(--white); rotate: -8deg; scale: 1.06; }
  .qa:hover .qa__i { background: var(--teal-700); color: var(--white); rotate: -8deg; scale: 1.06; }
  .qa--er:hover .qa__i { background: var(--red); }
  .dept--all:hover .dept__i, .way--main:hover .di, .hubc--ext:hover .dept__i { background: var(--teal); color: var(--white); }
  .dept:hover .faces img { translate: 0 -3px; }
}
:is(.dept__i, .lrow__i, .gi, .di, .qa__i) { transition: background-color 450ms var(--e-out), color 450ms var(--e-out), rotate 700ms var(--glide), scale 700ms var(--glide); }
.faces img { transition: translate 600ms var(--glide); }
.faces img:nth-child(2) { transition-delay: 45ms; } .faces img:nth-child(3) { transition-delay: 90ms; } .faces img:nth-child(4) { transition-delay: 135ms; }
:is(.dept, .qa, .hubc, .guide__list a, .way, .lrow, .arow, .pcard, .opt, .feature, .mini):focus-visible { --ty: -5px; box-shadow: var(--ring), var(--lifted); }

/* the arrow in a card: a small round button that fills and steps forward */
.qa .go, .dept .go, .guide__list .go, .way > .icon, .card--links a .icon { transition: translate 600ms var(--glide), color 400ms, background-color 400ms; }
.qa .go { top: 1rem; right: 1rem; width: 2rem; height: 2rem; padding: 0.5rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); box-sizing: border-box; }
@media (hover: hover) and (pointer: fine) {
  .qa:hover .go { background-color: var(--teal-700); color: var(--white); box-shadow: none; translate: 2px -2px; transform: none; }
  .qa--er:hover .go { background-color: var(--red); }
  :is(.dept, .guide__list a):hover .go, .way:hover > .icon, .card--links a:hover > .icon { translate: 4px 0; transform: none; color: var(--teal-700); }
  .way--main:hover > .icon { color: var(--white); }
}
[dir="rtl"] .qa .go { right: auto; left: 1rem; }
@media (hover: hover) and (pointer: fine) {
  [dir="rtl"] .qa:hover .go { translate: -2px -2px; }
  [dir="rtl"] :is(.dept, .guide__list a):hover .go, [dir="rtl"] .way:hover > .icon, [dir="rtl"] .card--links a:hover > .icon { translate: -4px 0; }
}

/* doctors' pictures: the portrait comes a touch closer, the mint deepens */
.doc__pic img, .adoc__pic img, .pcard__pic img, .arch img { transition: transform 1100ms var(--glide); }
@media (hover: hover) and (pointer: fine) {
  .doc:hover .doc__pic { background: linear-gradient(180deg, #dcefeb 0%, #b5ded5 100%); }
  .doc:hover .doc__pic img, .adoc:hover .adoc__pic img { transform: scale(1.045) translateY(-1%); }
  .arch:hover img { transform: scale(1.04); }
}

/* small things: chips, tabs, rail buttons, links */
.chip, .docs-bar button, .atab, .rail__b, .tool, .lang a { transition: background-color 350ms var(--e-out), color 350ms var(--e-out), box-shadow 350ms var(--e-out), translate 500ms var(--glide), scale 500ms var(--glide); }
@media (hover: hover) and (pointer: fine) {
  .chip:hover, .docs-bar button:hover:not([aria-pressed="true"]) { translate: 0 -2px; box-shadow: inset 0 0 0 1.5px var(--teal), 0 10px 18px -12px rgba(11, 57, 54, 0.45); background-color: var(--white); color: var(--teal-800); }
  .tool:hover { scale: 1.06; }
  .link:hover { color: var(--teal-800); }
}
:is(.chip, .docs-bar button, .tool, .rail__b, .btn):active { scale: 0.96; transition-duration: 150ms; }

/* ---- buttons: a light that crosses them, an arrow that leans forward, a gentle pull toward the pointer ---- */
.btn { overflow: hidden; isolation: isolate; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%); transform: translateX(-120%);
  transition: transform 900ms var(--e-out); pointer-events: none; }
.btn:hover::after { transform: translateX(120%); }
.btn--ghost::after, .btn--light::after { background: linear-gradient(105deg, transparent 35%, rgba(0, 160, 152, 0.12) 50%, transparent 65%); }
.btn .icon { transition: transform 420ms var(--e-out); }
.btn { transition: background-color 400ms var(--e-out), color 400ms var(--e-out), box-shadow 600ms var(--glide), translate 600ms var(--glide), scale 300ms var(--glide); }
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: none; translate: 0 -2px; box-shadow: 0 16px 28px -16px rgba(11, 57, 54, 0.75); } .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink), 0 14px 24px -16px rgba(16, 36, 34, 0.45); } }
.btn:hover .icon[class*="go"], .btn:hover use[href$="i-arrow"] { transform: translateX(3px); }
[data-magnet] { transition: transform 600ms var(--e-out), background var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out); }


/* ---- toasts ---- */
.toasts { position: fixed; z-index: 130; left: 50%; bottom: calc(1.4rem + env(safe-area-inset-bottom)); display: grid; gap: 0.5rem; justify-items: center; transform: translateX(-50%); pointer-events: none; }
.toast { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.1rem; border-radius: 999px; background: var(--ink); color: var(--white); font: 600 0.9rem/1.2 var(--f-body);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.5); animation: toast-in 520ms var(--e-out) both; }
.toast .icon { color: #7fd3c8; }
.toast.is-out { animation: toast-out 380ms var(--e-in, ease-in) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(0.98); } }
@media (max-width: 760px) { .toasts { bottom: calc(6.4rem + env(safe-area-inset-bottom)); } }

/* ---- back to the top, with the page read so far around it ---- */
.totop { position: fixed; z-index: 65; right: clamp(1rem, 2vw, 2rem); bottom: clamp(1rem, 2vw, 2rem); width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--white); color: var(--ink);
  box-shadow: 0 16px 34px -16px rgba(11, 57, 54, 0.5), inset 0 0 0 1px var(--line); display: grid; place-items: center; opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none;
  transition: opacity 360ms var(--e-out), transform 500ms var(--e-out), background var(--d-fast); }
.totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { background: var(--mint); }
.totop svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.totop .ring circle { fill: none; stroke: var(--teal); stroke-width: 2.4; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--read, 0) * 100); }
.totop .icon { width: 1.15rem; height: 1.15rem; }
@media (max-width: 760px) { .totop { display: none; } }

/* ---- the live dot (open now) and the gentle float of the hero's notes ---- */
.live { display: inline-block; width: 0.5rem; height: 0.5rem; margin-inline-end: 0.35rem; border-radius: 50%; background: #2fb36b; box-shadow: 0 0 0 0 rgba(47, 179, 107, 0.5); animation: live 2.2s infinite; vertical-align: 0.05em; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(47, 179, 107, 0.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(47, 179, 107, 0); } }
.note { animation: float 7s ease-in-out infinite; }
.note--team { animation-delay: -3.5s; }
@keyframes float { 50% { translate: 0 -6px; } }

/* ---- the hero arrives: portraits rise out of their arches one after another ---- */
.hero .arch img { animation: arch-in 1500ms cubic-bezier(0.19, 1, 0.22, 1) both; }
.hero .arch:nth-child(1) img { animation-delay: 250ms; } .hero .arch:nth-child(2) img { animation-delay: 100ms; } .hero .arch:nth-child(3) img { animation-delay: 400ms; }
.hero .arch { animation: fade-in 900ms var(--e-out) both; }
.hero .note { animation: note-in 900ms var(--e-out) 900ms both, float 7s ease-in-out 1.8s infinite; }
.hero .note--team { animation-delay: 1050ms, 2.2s; }
@keyframes arch-in { from { translate: 0 14%; opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes note-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } }
.hero .ask, .hero .hero__lead, .hero .label { animation: rise-in 1000ms var(--e-out) both; }
.hero .hero__lead { animation-delay: 350ms; } .hero .ask { animation-delay: 500ms; }
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } }

/* ---- reduce motion: the system's setting, or the site's own switch ---- */
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
html[data-motion="reduced"] { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { .js-split .w > span { transform: none; } }