/* ==========================================================================
   MT MediTeam — Motion
   Calm, purposeful movement. Everything here is opacity/transform only
   (compositor-friendly), and everything switches off under
   prefers-reduced-motion at the bottom of this file.
   ========================================================================== */

:root {
  --ease-out:  cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-soft: cubic-bezier(0.33, 0, 0.15, 1);
}

/* --- Entrance keyframes --------------------------------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes riseMedia {
  from { opacity: 0; transform: translate3d(0, 26px, 0) scale(1.015); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes popIn {
  0%   { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.96); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* --- Hero load choreography ----------------------------------------------
   Elements start hidden and are released once the document is ready, so the
   first thing a visitor sees resolves rather than simply appearing.        */
[data-anim] { opacity: 0; }

.is-ready [data-anim] {
  animation: rise 0.72s var(--ease-out) both;
  animation-delay: var(--d, 0s);
}
.is-ready [data-anim="media"] { animation-name: riseMedia; animation-duration: 0.9s; }
.is-ready [data-anim="fade"]  { animation-name: fadeIn; }
.is-ready [data-anim="pop"]   { animation-name: popIn; animation-duration: 0.62s; }

/* If JS never runs, nothing may stay invisible */
.no-js [data-anim] { opacity: 1; animation: none; }

/* --- Scroll reveals ------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity 0.66s var(--ease-out) var(--stagger, 0s),
    transform 0.66s var(--ease-out) var(--stagger, 0s);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* --- Header: condenses as you scroll -------------------------------------- */
.site-header .header__inner,
.site-header .brand img,
.topbar {
  transition:
    min-height var(--t-mid) var(--ease-soft),
    height var(--t-mid) var(--ease-soft),
    max-height var(--t-mid) var(--ease-soft),
    opacity var(--t-fast) linear;
}
.topbar { max-height: 60px; overflow: hidden; }

@media (min-width: 60em) {
  .site-header.is-condensed .topbar { max-height: 0; opacity: 0; }
  .site-header.is-condensed .header__inner { min-height: 68px; }
  .site-header.is-condensed .brand img { height: 42px; }
}

/* --- Buttons -------------------------------------------------------------- */
.btn { will-change: transform; }
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(1, 32, 149, 0.28);
}
.btn--ghost:hover  { transform: translateY(-2px); }
.btn--onbrand:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18); }
.btn:active { transform: translateY(0); }

/* Icon nudge on the primary call to action */
.btn svg { transition: transform var(--t-mid) var(--ease-out); }
.btn:hover svg { transform: translateX(2px); }
.btn[href^="tel:"]:hover svg { transform: rotate(-8deg) scale(1.08); }

/* --- Cards ---------------------------------------------------------------- */
.card { will-change: transform; }
.card--link:hover { transform: translateY(-4px); }
.card__icon { transition: transform var(--t-mid) var(--ease-out), background var(--t-mid) var(--ease); }
.card--link:hover .card__icon { transform: scale(1.08) rotate(-3deg); background: var(--c-brand-soft); }

/* --- Krankenkassen marquee ------------------------------------------------
   A continuous drift reads as deliberate motion and sidesteps the ragged
   wrap the static strip produced at mid widths.                            */
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 1.2rem + 3.4vw, 4rem);
  padding-right: clamp(2rem, 1.2rem + 3.4vw, 4rem);
  flex: none;
}
.marquee__group img {
  height: clamp(26px, 22px + 1.2vw, 38px);
  width: auto;
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity var(--t-mid) var(--ease), filter var(--t-mid) var(--ease);
}
.marquee__group img:hover { opacity: 1; filter: none; }

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* --- Accordion ------------------------------------------------------------ */
.accordion__trigger { transition: color var(--t-fast) var(--ease); }
.accordion__item {
  transition: background var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease);
}
.accordion__item:hover {
  border-color: var(--c-brand-soft);
  box-shadow: var(--sh-sm);
}

/* --- Links ---------------------------------------------------------------- */
.footer__list a,
.contact-list a { transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-out); }
.footer__list a:hover,
.contact-list a:hover { transform: translateX(3px); }

/* --- Area pills ----------------------------------------------------------- */
.areas li {
  transition: transform var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.areas li:hover {
  transform: translateY(-2px);
  border-color: var(--c-brand-soft);
  color: var(--c-brand);
}

/* --- Hero image: settles very slightly on load ---------------------------- */
.hero__media img { transition: transform 1.2s var(--ease-soft); }

/* --- Respect the user's setting ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  [data-anim],
  .is-ready [data-anim] { opacity: 1 !important; animation: none !important; }

  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }

  .marquee__track { animation: none !important; }
  .marquee {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .marquee__track { width: 100%; flex-wrap: wrap; justify-content: center; }
  .marquee__group:nth-child(2) { display: none; }
  .marquee__group { flex-wrap: wrap; justify-content: center; padding-right: 0; }

  .btn:hover, .card--link:hover,
  .areas li:hover, .footer__list a:hover, .contact-list a:hover { transform: none !important; }
  .card--link:hover .card__icon { transform: none !important; }
  .btn:hover svg { transform: none !important; }
}