/* ==========================================================================
   Motion — loaded after polyclinic.css.

   Rules of the road
   - Everything is gated on `html.pc-motion`, which an inline script in
     html.html.twig sets only when the visitor has NOT asked for reduced
     motion. Without it nothing here applies and the page is simply static.
   - Only opacity / translate / scale / clip-path are animated (compositor
     friendly). The *individual* transform properties are used on purpose, so
     they never fight the existing `transform` rules (hover lifts, the mirrored
     hero photo).
   - Load animations use `backwards` fill, not `both`: once finished the
     element returns to its normal style and does not keep a stacking context
     (which would trap the account dropdown under the hero).
   - Scroll reveals are driven by assets/js/polyclinic-motion.js, which tags
     elements with `.pc-r` + a variant and removes the classes when done.
   ========================================================================== */

:root {
  --pc-ease: cubic-bezier(.22, .61, .36, 1);
  --pc-ease-out: cubic-bezier(.16, 1, .3, 1);
  --pc-m: 28px;                   /* rise distance */
  --pc-sx: 1;                     /* +1 in RTL: "start" is the right edge */
}

html[dir="ltr"] { --pc-sx: -1; }

@media (max-width: 767px) {
  :root { --pc-m: 18px; }
}

@keyframes pc-fade-up   { from { opacity: 0; translate: 0 var(--pc-m); } to { opacity: 1; translate: 0 0; } }
@keyframes pc-fade-down { from { opacity: 0; translate: 0 calc(var(--pc-m) * -.7); } to { opacity: 1; translate: 0 0; } }
@keyframes pc-pop       { 0% { opacity: 0; scale: .7; } 60% { opacity: 1; scale: 1.06; } 100% { opacity: 1; scale: 1; } }
@keyframes pc-zoom-out  { from { scale: 1.09; } to { scale: 1; } }
@keyframes pc-glow      { 0%, 100% { box-shadow: 0 0 20px 0 rgba(212, 0, 4, .2); } 50% { box-shadow: 0 0 36px 8px rgba(212, 0, 4, .42); } }
@keyframes pc-ring      { 0% { box-shadow: 0 0 0 0 rgba(182, 141, 73, .55); } 70%, 100% { box-shadow: 0 0 0 16px rgba(182, 141, 73, 0); } }

/* ---------- On load: header, hero, page banners (pure CSS, no flash) ---------- */

.pc-motion .header .header-top,
.pc-motion .header .header-wrap,
.pc-motion .mobile-topbar,
.pc-motion .mobile-header { animation: pc-fade-down .65s var(--pc-ease) backwards; }
.pc-motion .header .header-wrap,
.pc-motion .mobile-header { animation-delay: .08s; }

.pc-motion .pc-hero__bg img { animation: pc-zoom-out 9s var(--pc-ease-out) backwards; }

.pc-motion .pc-hero__eyebrow { animation: pc-fade-up .8s var(--pc-ease) .15s backwards; }
.pc-motion .pc-hero__title   { animation: pc-fade-up .8s var(--pc-ease) .30s backwards; }
.pc-motion .pc-hero__desc    { animation: pc-fade-up .8s var(--pc-ease) .45s backwards; }
.pc-motion .pc-hero__cta     { animation: pc-fade-up .8s var(--pc-ease) .60s backwards; }

.pc-motion .block-views-blockstats-block-1 .pc-stat { animation: pc-fade-up .8s var(--pc-ease) backwards; }
.pc-motion .block-views-blockstats-block-1 .pc-stat:nth-child(1) { animation-delay: .75s; }
.pc-motion .block-views-blockstats-block-1 .pc-stat:nth-child(2) { animation-delay: .90s; }
.pc-motion .block-views-blockstats-block-1 .pc-stat:nth-child(3) { animation-delay: 1.05s; }

/* The 24/7 badge pops in, then breathes. */
.pc-motion .pc-emergency {
  animation: pc-pop .7s var(--pc-ease) 1.2s backwards, pc-glow 2.8s ease-in-out 2.4s infinite;
}

/* Inner-page banners: the same entrance on every page. */
.pc-motion .pc-banner__eyebrow { animation: pc-fade-up .7s var(--pc-ease) .05s backwards; }
.pc-motion .pc-banner__title   { animation: pc-fade-up .7s var(--pc-ease) .15s backwards; }
.pc-motion .pc-banner__text    { animation: pc-fade-up .7s var(--pc-ease) .25s backwards; }

/* Pages with no banner of their own (cart, checkout, account, sign-in). */
.pc-motion .path-cart .main-content,
.pc-motion .path-checkout .main-content,
.pc-motion .path-account .main-content,
.pc-motion .path-user .main-content { animation: pc-fade-up .7s var(--pc-ease) .1s backwards; }

/* ---------- On scroll: reveal variants (classes set by polyclinic-motion.js) ---------- */

.pc-motion .pc-r {
  opacity: 0;
  transition:
    opacity .8s var(--pc-ease),
    translate .8s var(--pc-ease),
    scale .8s var(--pc-ease),
    clip-path 1s var(--pc-ease);
  transition-delay: var(--pc-d, 0ms);
}

.pc-motion .pc-r--up    { translate: 0 var(--pc-m); }
.pc-motion .pc-r--down  { translate: 0 calc(var(--pc-m) * -1); }
.pc-motion .pc-r--start { translate: calc(var(--pc-sx) * 48px) 0; }
.pc-motion .pc-r--end   { translate: calc(var(--pc-sx) * -48px) 0; }
.pc-motion .pc-r--zoom  { scale: .92; translate: 0 calc(var(--pc-m) * .5); }
.pc-motion .pc-r--pop   { scale: .78; }
/* The wipe is on the inner image: an element that is itself fully clipped is
   reported as not intersecting, so the observer would never reveal it. */
.pc-motion .pc-r--img   { scale: 1.05; }
.pc-motion .pc-r--img img { clip-path: inset(0 0 100% 0 round 12px); transition: clip-path 1s var(--pc-ease); transition-delay: var(--pc-d, 0ms); }

.pc-motion .pc-r.is-in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}
.pc-motion .pc-r--img.is-in img { clip-path: inset(0 0 0 0 round 12px); }

/* ---------- Scroll progress ---------- */

.pc-progress {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 1100;
  height: 3px;
  background: linear-gradient(90deg, var(--pc-gold), #D9B36A);
  transform-origin: left center;
  scale: 0 1;
  pointer-events: none;
}
[dir="rtl"] .pc-progress { transform-origin: right center; }
body.mobile-nav-open .pc-progress { opacity: 0; }

/* ---------- Hover and focus micro-interactions ---------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Buttons */
  .pc-btn,
  .pc-btn-line,
  .pc-header__login,
  .mobile-header__toggle {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease,
                transform .25s var(--pc-ease), box-shadow .25s ease;
  }
  .pc-btn:hover,
  .pc-btn-line:hover,
  .pc-header__login:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(12, 39, 75, .18); }
  .pc-btn:active,
  .pc-btn-line:active,
  .pc-header__login:active { transform: translateY(0); box-shadow: none; }

  /* Cards: lift + soft shadow */
  .pc-offer,
  .pc-hs,
  .pc-val,
  .pc-trust,
  .pc-feature__tile {
    transition: transform .3s var(--pc-ease), box-shadow .3s ease, border-color .3s ease;
  }
  .pc-offer:hover,
  .pc-hs:hover,
  .pc-val:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(12, 39, 75, .12); }
  .pc-trust:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(12, 39, 75, .10); }
  .pc-feature:hover .pc-feature__tile { transform: translateY(-3px) scale(1.06); box-shadow: 0 8px 18px rgba(182, 141, 73, .22); }

  /* Images zoom inside their frame */
  .pc-offer__media,
  .pc-doc__photo,
  .pc-about__media,
  .pc-hsec__media,
  .pc-quote__media { overflow: hidden; }
  .pc-offer__media img,
  .pc-doc__photo img,
  .pc-about__media img,
  .pc-hsec__media img,
  .pc-quote__media img { transition: scale .7s var(--pc-ease); }
  .pc-offer:hover .pc-offer__media img,
  .pc-doc:hover .pc-doc__photo img,
  .pc-about__media:hover img,
  .pc-hsec__media:hover img,
  .pc-quote__media:hover img { scale: 1.06; }

  /* Department icons and trust icons */
  .pc-dep__icon,
  .pc-trust__icon,
  .pc-why__tile { transition: translate .3s var(--pc-ease), scale .3s var(--pc-ease); }
  .pc-dep:hover .pc-dep__icon,
  .pc-trust:hover .pc-trust__icon { translate: 0 -3px; scale: 1.1; }
  .pc-why:hover .pc-why__tile { scale: 1.08; }

  /* Social icons */
  .pc-fsocial__link,
  .pc-cd__soc { transition: transform .25s var(--pc-ease), opacity .2s ease; }
  .pc-fsocial__link:hover,
  .pc-cd__soc:hover { transform: translateY(-3px); }

  /* Category chips */
  .pc-chip { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .25s var(--pc-ease); }
  .pc-chip:hover { transform: translateY(-2px); }

  /* Desktop menu: a gold underline draws in from the centre */
  .header .header-main ul.menu > li > a { position: relative; }
  .header .header-main ul.menu > li > a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -6px;
    height: 2px;
    background: var(--pc-gold);
    scale: 0 1;
    transition: scale .3s var(--pc-ease);
  }
  .header .header-main ul.menu > li > a:hover::after,
  .header .header-main ul.menu > li > a:focus-visible::after { scale: 1 1; }

  /* FAQ: the plus turns into a minus instead of snapping */
  .pc-faq__toggle::after { transition: opacity .25s ease, rotate .3s var(--pc-ease); }
  .pc-faq[open] .pc-faq__toggle::after { rotate: 90deg; }
  .pc-faq { transition: box-shadow .25s ease, border-color .25s ease; }
  .pc-faq:hover { box-shadow: 0 6px 18px rgba(12, 39, 75, .08); }

  /* The call button on the emergency banner invites a tap */
  .pc-emg__call { animation: pc-ring 2.4s ease-out 2s infinite; }
}

/* ---------- Back to top ----------
   Martis ships the button, but its scroll handler never ran (see script.js:
   the sticky-header lookup threw). Now that it does, give it the site's look. */

body .back-to-top {
  left: auto;
  right: auto;
  inset-inline-end: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  line-height: 42px;
  border: 1px solid var(--pc-navy);
  border-radius: var(--pc-radius);
  background: var(--pc-navy);
  color: var(--pc-white);
  box-shadow: 0 8px 20px rgba(12, 39, 75, .22);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s var(--pc-ease);
}

body .back-to-top:hover {
  background: var(--pc-gold);
  border-color: var(--pc-gold);
  color: var(--pc-white);
  transform: translateY(-3px);
}

@media (max-width: 767px) {
  body .back-to-top { inset-inline-end: 16px; bottom: 16px; }
}