/*
 * Interaction layer for the existing 2AMDoctor layout.
 * motion.js owns reveal translate/opacity and scroll-driven photo variables.
 * This file reserves transform for hover, press, icons, and image movement.
 */

:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-quick: 180ms;
  --motion-settle: 320ms;
  --motion-card-shadow: 0 16px 36px -16px rgb(11 31 68 / 24%);
}

/* Header: an understated reading-progress line and a settled scroll state. */
.site-header {
  transition: box-shadow 280ms ease, border-color 280ms ease;
}

.site-header.is-scrolled {
  border-bottom-color: rgb(11 31 68 / 12%);
  box-shadow: 0 6px 24px -15px rgb(11 31 68 / 28%);
}

.site-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, #188e80, var(--teal));
  transform: scaleX(var(--page-progress, 0));
  transform-origin: left center;
}

/* Links draw their underline without changing text metrics or hit areas. */
.motion-ready :is(.desktop-nav a, .mobile-nav a, .footer-top nav a, .text-link) {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: left calc(100% - 1px);
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition:
    color var(--motion-quick) ease,
    background-size 280ms var(--motion-ease);
}

.motion-ready .text-link {
  background-size: 24% 1px;
}

.motion-ready :is(.desktop-nav a, .mobile-nav a, .footer-top nav a, .text-link):focus-visible {
  background-size: 100% 1px;
}

.motion-ready .footer-top nav a:hover {
  text-decoration: none;
}

/* Buttons keep the site's existing visible focus outline. */
.motion-ready :is(.button, .media-control, .dialog-close, .language-switch a) {
  transition:
    transform var(--motion-settle) var(--motion-ease),
    background-color var(--motion-quick) ease,
    border-color var(--motion-quick) ease,
    color var(--motion-quick) ease,
    box-shadow var(--motion-settle) var(--motion-ease);
}

.motion-ready .button:focus-visible {
  box-shadow: 0 0 0 4px rgb(20 184 166 / 12%), 0 10px 22px -12px rgb(11 31 68 / 28%);
}

.motion-ready .button:not(:disabled):not([aria-disabled="true"]):active,
.motion-ready .media-control:not(:disabled):active {
  transform: translateY(1px) scale(.975);
  box-shadow: 0 2px 5px rgb(11 31 68 / 10%);
  transition-duration: 100ms;
}

.motion-ready .language-switch a:active,
.motion-ready .dialog-close:active {
  transform: scale(.93);
  transition-duration: 100ms;
}

.motion-ready .dialog-close {
  border-radius: 50%;
}

/* Cards respond as a group; reveal animation uses the separate translate property. */
.motion-ready :is(.care-option, .how-step, .consultation-card, .plan-card) {
  transition:
    transform var(--motion-settle) var(--motion-ease),
    box-shadow var(--motion-settle) var(--motion-ease),
    border-color 240ms ease,
    background-color 240ms ease;
}

.motion-ready :is(.how-step, .consultation-card, .plan-card):focus-within {
  border-color: #8bb6a5;
  box-shadow: var(--motion-card-shadow);
  transform: translateY(-3px);
}

.motion-ready .plan-card-family:focus-within {
  border-color: #8bbfb3;
  box-shadow: 0 19px 38px -18px rgb(11 31 68 / 40%);
}

.motion-ready .care-option:focus-visible {
  box-shadow: var(--motion-card-shadow);
}

.motion-ready .care-option:not(:disabled):active {
  transform: translateX(1px) scale(.989);
  transition-duration: 110ms;
}

.motion-ready :is(.care-index, .step-number, .consultation-mark, .value-benefit > span) {
  transition:
    transform 360ms var(--motion-ease),
    color 240ms ease,
    background-color 240ms ease,
    box-shadow 360ms var(--motion-ease);
}

.motion-ready .care-option[aria-pressed="true"] .care-index {
  transform: translateX(2px);
}

.motion-ready .consultation-card[open] .consultation-mark {
  color: #286a54;
}

/* Care-panel content is animated by motion.js after a selection changes. */
.motion-ready .detail-content {
  animation: none;
}

/* Animate existing marks only: no extra words, icons, or status indicators. */
.motion-ready .hero-tags li::before,
.motion-ready .proof-inner span::before,
.motion-ready .plan-features li::before {
  display: inline-block;
  transition: transform 320ms var(--motion-ease), color 220ms ease;
}

.motion-ready .consultation-more::after,
.motion-ready .faq-list summary::after {
  display: inline-block;
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform 320ms var(--motion-ease), color 220ms ease;
}

.motion-ready .consultation-card[open] .consultation-more::after,
.motion-ready .faq-list details[open] summary::after {
  transform: rotate(180deg);
}

.motion-ready :is(.faq-list summary, .how-step summary, .comparison summary) {
  transition: color 220ms ease;
}

.motion-ready .faq-list details[open] summary {
  color: #286a54;
}

/* Two-bar menu becomes a close icon using its current aria-expanded state. */
.menu-toggle {
  border-radius: 50%;
}

.menu-toggle span {
  transform-origin: center;
}

.menu-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(4px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

.motion-ready .menu-toggle {
  transition: background-color 220ms ease;
}

.motion-ready .menu-toggle span {
  transition: transform 300ms var(--motion-ease), background-color 220ms ease;
}

.motion-ready .menu-toggle[aria-expanded="true"] {
  background-color: rgb(20 184 166 / 8%);
}

/* Hover stays on precise pointing devices, avoiding sticky touch states. */
@media (hover: hover) and (pointer: fine) {
  .motion-ready :is(.desktop-nav a, .mobile-nav a, .footer-top nav a, .text-link):hover {
    background-size: 100% 1px;
  }

  .motion-ready .button:not(:disabled):not([aria-disabled="true"]):hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -12px rgb(11 31 68 / 32%);
  }

  .motion-ready .button-mint:hover {
    background-color: #dbf8ed;
    box-shadow: 0 12px 28px -16px rgb(0 0 0 / 38%);
  }

  .motion-ready .media-control:not(:disabled):hover {
    transform: translateY(-2px);
    border-color: rgb(255 255 255 / 72%);
  }

  .motion-ready .dialog-close:hover {
    transform: rotate(90deg);
    background-color: rgb(11 31 68 / 6%);
  }

  .motion-ready .language-switch a:not([aria-current="true"]):hover {
    transform: translateY(-2px);
    background-color: #e4eee7;
  }

  .motion-ready .menu-toggle:hover {
    background-color: rgb(11 31 68 / 5%);
  }

  .motion-ready .care-option:not(:disabled):hover {
    transform: translateX(4px);
    border-color: #8bb6a5;
    box-shadow: 0 10px 28px -18px rgb(11 31 68 / 27%);
  }

  .motion-ready .care-option[aria-pressed="true"]:hover {
    border-color: #759f96;
  }

  .motion-ready :is(.how-step, .consultation-card, .plan-card):hover {
    transform: translateY(-5px);
    border-color: #8bb6a5;
    box-shadow: var(--motion-card-shadow);
  }

  .motion-ready .plan-card-family:hover {
    border-color: #8bbfb3;
    box-shadow: 0 19px 38px -18px rgb(11 31 68 / 40%);
  }

  .motion-ready .care-option:hover .care-index {
    transform: translateX(3px);
  }

  .motion-ready .how-step:hover .step-number {
    transform: translateY(-2px) rotate(-7deg);
    background-color: #d9ecdc;
    box-shadow: 0 5px 12px -7px rgb(26 97 73 / 40%);
  }

  .motion-ready .consultation-card:hover .consultation-mark {
    transform: translateY(-2px);
    color: #286a54;
  }

  .motion-ready .value-benefit:hover > span {
    transform: scale(1.08) rotate(-6deg);
    background-color: #d5e7d3;
  }

  .motion-ready :is(.hero-tags li, .proof-inner span):hover::before,
  .motion-ready .plan-card:hover .plan-features li::before {
    transform: scale(1.12);
  }

  .motion-ready :is(.faq-list summary, .how-step summary, .comparison summary):hover {
    color: #167764;
  }
}

/* Suppress the base stylesheet's hover travel on touch-first devices. */
@media (hover: none), (pointer: coarse) {
  .motion-ready .button:hover,
  .motion-ready .care-option:hover {
    transform: none;
    box-shadow: none;
  }
}

/* Keep press feedback stronger than hover when a pointer remains over a button. */
.motion-ready .button:not(:disabled):not([aria-disabled="true"]):active {
  transform: translateY(1px) scale(.975);
}

.motion-ready .care-option:not(:disabled):active {
  transform: translateX(1px) scale(.989);
}

.motion-ready .media-control:not(:disabled):active {
  transform: translateY(1px) scale(.975);
}

.motion-ready .dialog-close:active,
.motion-ready .language-switch a:not([aria-current="true"]):active {
  transform: scale(.93);
}

/* Photos have a little overscan; videos retain their independent playback layout. */
.motion-ready .hero-film:not(.has-video) picture img,
.motion-ready .support-film:not(.has-video) > img {
  transform: translate3d(0, var(--photo-y, 0px), 0) scale(var(--photo-scale, 1.045));
  transform-origin: center;
}

.motion-ready .hero-film.is-in-view:not(.has-video) picture img,
.motion-ready .support-film.is-in-view:not(.has-video) > img {
  will-change: transform;
}

.motion-ready .hero-film.has-video picture img,
.motion-ready .support-film.has-video > img {
  transform: none;
  will-change: auto;
}

.motion-ready .media-slot {
  transition: box-shadow 600ms var(--motion-ease);
}

.motion-ready .media-slot.is-in-view {
  box-shadow: 0 22px 42px -28px rgb(11 31 68 / 34%);
}

/* Soft light sits behind existing navy-section content, never above it. */
.pharmacy-section,
.business-panel {
  position: relative;
  isolation: isolate;
}

.pharmacy-section::before,
.business-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse at 85% 15%, rgb(20 184 166 / 10%), transparent 58%);
  opacity: .7;
}

.motion-ready .pharmacy-section::before,
.motion-ready .business-panel::before {
  transition: opacity 650ms ease;
}

.motion-ready .pharmacy-section.is-section-active::before,
.motion-ready .business-panel.is-section-active::before {
  opacity: 1;
}

/* Native dialogs enter once per open. There is no repeating idle animation. */
.motion-ready .plan-dialog[open] {
  animation: doctor-dialog-enter 360ms var(--motion-ease) both;
}

.motion-ready .plan-dialog[open]::backdrop {
  animation: doctor-backdrop-enter 260ms ease both;
}

@keyframes doctor-dialog-enter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes doctor-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Reduced motion keeps functional states and focus, with all travel removed. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .site-header,
  .site-header::after,
  .pharmacy-section::before,
  .business-panel::before,
  .motion-ready *,
  .motion-ready *::before,
  .motion-ready *::after,
  .plan-dialog::backdrop {
    animation: none !important;
    transition: none !important;
  }

  :is(.button, .care-option, .how-step, .consultation-card, .plan-card, .media-control, .dialog-close, .language-switch a),
  :is(.care-index, .step-number, .consultation-mark, .value-benefit > span),
  .hero-tags li::before,
  .proof-inner span::before,
  .plan-features li::before,
  .hero-film picture img,
  .support-film > img,
  .plan-dialog {
    transform: none !important;
    translate: none !important;
    will-change: auto !important;
  }

  .site-header::after {
    display: none;
  }
}