/*
 * Physio+ Motion CSS
 * File: /preview/assets/css/motion.css
 *
 * Covers:
 *   - Ticker marquee with edge fade and pause-on-hover
 *   - Pricing card visual hierarchy
 *   - Clinic photo hover
 *   - Nav transition
 *   - Reduced motion fallback
 *   - Hero line reveal keyframes
 *   - Spine counter visual
 */


/* ── Ticker / Marquee ──────────────────────────────────────────────────────── */

.ticker,
[data-ticker] {
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
}

.ticker-inner,
.ticker-track {
  display: inline-flex;
  gap: 0;
  animation: ticker-scroll 32s linear infinite;
  will-change: transform;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0 1.4em;
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.55);
  transition: color 0.25s ease;
}

.ticker-item em {
  color: #e87f4a;
  font-style: italic;
}

.ticker-item::after {
  content: '\00B7';
  color: rgba(232, 127, 74, 0.4);
  margin-left: 1.4em;
}

.ticker:hover .ticker-inner,
.ticker:hover .ticker-track {
  animation-play-state: paused;
}


/* ── Pricing cards — hierarchy ────────────────────────────────────────────── */

.pricing-card,
.plan-card {
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(244, 241, 234, 0.1);
}

[data-pricing="recommended"] {
  border-color: rgba(232, 127, 74, 0.45);
  box-shadow:
    0 0 0 1px rgba(232, 127, 74, 0.15),
    0 24px 48px rgba(0, 0, 0, 0.35),
    0 4px 12px rgba(232, 127, 74, 0.12);
  position: relative;
  z-index: 2;
  transform: translateY(-6px) scale(1.02);
}

[data-pricing="recommended"]::before {
  content: 'Most popular';
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1A1008;
  background: #e87f4a;
  padding: 3px 10px;
  border-radius: 99px;
  white-space: nowrap;
}

.pricing-card:not([data-pricing="recommended"]),
.plan-card:not([data-pricing="recommended"]) {
  opacity: 0.82;
}

.pricing-card:not([data-pricing="recommended"]):hover,
.plan-card:not([data-pricing="recommended"]):hover {
  opacity: 1;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}


/* ── Clinic photo grid — hover ────────────────────────────────────────────── */

.clinic-photos img,
[data-section="clinic-photos"] img {
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.clinic-photos img:hover,
[data-section="clinic-photos"] img:hover {
  transform: scale(1.03);
  filter: brightness(1.08);
  z-index: 2;
}

.photo-item {
  overflow: hidden;
  border-radius: 4px;
}


/* ── Nav — transition ─────────────────────────────────────────────────────── */

nav,
header,
.site-nav {
  will-change: transform;
  transform: translateY(0);
}


/* ── Section entrance — initial hidden state ──────────────────────────────── */

[data-motion="fade-up"] {
  opacity: 0;
  transform: translateY(32px);
}


/* ── Hero line reveal ─────────────────────────────────────────────────────── */

.hero-headline-line {
  overflow: hidden;
}

.hero-headline-line span {
  display: block;
  transform: translateY(100%);
  animation: line-reveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-headline-line:nth-child(1) span { animation-delay: 0.1s; }
.hero-headline-line:nth-child(2) span { animation-delay: 0.22s; }
.hero-headline-line:nth-child(3) span { animation-delay: 0.34s; }

@keyframes line-reveal {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}


/* ── Hero accent lines ────────────────────────────────────────────────────── */

.hero-accent-line {
  opacity: 0;
  animation: accent-line-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.6s;
}

@keyframes accent-line-in {
  from {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
  }
  to {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left center;
  }
}


/* ── Spine counter ────────────────────────────────────────────────────────── */

.spine-pct-number {
  font-variant-numeric: tabular-nums;
}


/* ── Reduced motion — kills everything ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

  [data-motion="fade-up"],
  .pricing-card,
  .plan-card,
  [data-pricing="recommended"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  .ticker-inner,
  .ticker-track {
    animation: none !important;
  }

  #spine-img {
    transform: scaleY(1) !important;
    filter: none !important;
    animation: none !important;
  }

  .hero-headline-line span {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .hero-accent-line {
    animation: none !important;
    opacity: 1 !important;
  }

  nav,
  header,
  .site-nav {
    transform: none !important;
    transition: none !important;
  }
}