/* Everwell — motion pass 3: line masks, word cascades, draws, wipes, tilt, magnet.
   Everything that starts hidden is gated on html.m-on (set by js/motion.js). */

@keyframes mLineUp { from { transform:translateY(108%); } to { transform:none; } }
@keyframes mKen { from { scale:1.14; } to { scale:1; } }
@keyframes mDraw { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes mWipe { from { clip-path:inset(-30% 100% -30% -10%); } to { clip-path:inset(-30% -10% -30% -10%); } }
@keyframes mPop { 0% { opacity:0; scale:.4; } 70% { opacity:1; scale:1.12; } 100% { opacity:1; scale:1; } }
@keyframes mRing { 0% { box-shadow:0 0 0 0 rgba(143,185,207,.55); } 100% { box-shadow:0 0 0 14px rgba(143,185,207,0); } }
@keyframes mFabRing { 0%, 70% { opacity:0; transform:scale(1); } 76% { opacity:.55; } 100% { opacity:0; transform:scale(1.35); } }
@keyframes mRipple { from { opacity:.45; transform:translate(-50%,-50%) scale(0); } to { opacity:0; transform:translate(-50%,-50%) scale(1); } }
@keyframes mRise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes mSlideR { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:none; } }
@keyframes mSheen { from { transform:translateX(-120%) skewX(-18deg); } to { transform:translateX(220%) skewX(-18deg); } }

.ln { display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; }
.ln-i { display:block; }
.w { display:inline-block; }

.btn { position:relative; overflow:hidden; isolation:isolate; }
.btn .ripple {
  position:absolute; z-index:-1; width:260px; height:260px; border-radius:50%;
  background:rgba(255,255,255,.55); pointer-events:none; animation:mRipple 700ms var(--ease-soft) forwards;
}
.btn--outline .ripple { background:rgba(143,185,207,.35); }

@media (prefers-reduced-motion:no-preference) {
  /* hero */
  html.m-on .hero-copy h1 { animation:none; }
  html.m-on .hero-copy h1 .ln-i { animation:mLineUp 1000ms cubic-bezier(.2,.7,.2,1) both; }
  html.m-on .hero-copy h1 .ln:nth-child(1) .ln-i { animation-delay:1.02s; }
  html.m-on .hero-copy h1 .ln:nth-child(2) .ln-i { animation-delay:1.14s; }
  html.m-on .hero-copy h1 .ln:nth-child(3) .ln-i { animation-delay:1.26s; }
  .hero-photo { animation:mKen 2.6s cubic-bezier(.2,.7,.2,1) .6s both; }
  .hero .eyebrow-rule { transform-origin:left center; animation:mDraw 900ms var(--ease-soft) 1.25s both; }
  .hero-note .script { animation:mWipe 1500ms cubic-bezier(.45,.1,.3,1) 1.9s both; }
  html.m-on .value-props { animation:none; }
  html.m-on .value-props .vp { animation:mRise 700ms var(--ease-soft) both; }
  html.m-on .value-props .vp:nth-child(1) { animation-delay:1.45s; }
  html.m-on .value-props .vp:nth-child(2) { animation-delay:1.57s; }
  html.m-on .value-props .vp:nth-child(3) { animation-delay:1.69s; }
  html.m-on .value-props .vp .ico { animation:mPop 620ms var(--ease-soft) both; animation-delay:inherit; }

  /* header */
  .logo-mark { transition:scale 320ms var(--ease-soft), rotate 600ms var(--ease-soft); }
  .logo:hover .logo-mark { rotate:-8deg; }
  .topbar.is-scrolled .nav-desktop .logo-mark { scale:.9; }

  /* section headings: eyebrow tracking settles, words cascade */
  html.m-on .sh .eyebrow { opacity:0; letter-spacing:.42em; transition:opacity 800ms var(--ease-soft), letter-spacing 1100ms cubic-bezier(.2,.7,.2,1); }
  html.m-on .sh.is-in .eyebrow { opacity:1; letter-spacing:var(--tracking-eyebrow); }
  html.m-on .sh-title .w { opacity:0; transform:translateY(.45em) rotate(2deg); transform-origin:left bottom; transition:opacity 700ms var(--ease-soft), transform 900ms cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i) * 45ms + 120ms); }
  html.m-on .sh.is-in .sh-title .w { opacity:1; transform:none; }
  html.m-on .sh .sh-sub { opacity:0; transform:translateY(10px); transition:opacity 800ms var(--ease-soft) 420ms, transform 800ms var(--ease-soft) 420ms; }
  html.m-on .sh.is-in .sh-sub { opacity:1; transform:none; }

  /* script notes write themselves in */
  html.m-on .script.m-wipe { clip-path:inset(-30% 100% -30% -10%); }
  html.m-on .script.m-wipe.is-in { animation:mWipe 1500ms cubic-bezier(.45,.1,.3,1) 250ms both; }
  html.m-on .philosophy .script.m-wipe { clip-path:none; animation:none; opacity:0; transform:translateY(18px) scale(.94); transition:opacity 600ms var(--ease-soft), transform 600ms var(--ease-soft); }
  html.m-on .philosophy .script.m-wipe.is-in { opacity:1; transform:none; }

  /* corner marks */
  html.m-on .corner-words { opacity:0; transform:translateY(8px); transition:opacity 900ms var(--ease-soft), transform 900ms var(--ease-soft); }
  html.m-on .corner-rule { transform:scaleX(0); transform-origin:right center; transition:transform 900ms var(--ease-soft) 300ms; }
  html.m-on .corner-mark.is-in .corner-words { opacity:1; transform:none; }
  html.m-on .corner-mark.is-in .corner-rule { transform:scaleX(1); }

  /* service cards: photo curtain + icon pop */
  html.m-on .card-media img { clip-path:inset(0 0 100% 0 round var(--radius-md) var(--radius-md) 0 0); transition:clip-path 1100ms cubic-bezier(.7,0,.2,1) var(--d, 0ms), transform 600ms var(--ease-soft); }
  html.m-on .card.is-revealed .card-media img { clip-path:inset(0 0 0 0 round var(--radius-md) var(--radius-md) 0 0); }
  html.m-on .card .card-icon { scale:0; transition:scale 600ms cubic-bezier(.34,1.56,.64,1), rotate 400ms var(--ease-soft); }
  html.m-on .card.is-revealed .card-icon { scale:1; transition-delay:calc(var(--d, 0ms) + 650ms), 0s; }
  .card { transform-style:preserve-3d; will-change:transform; }
  .card-icon { transition:rotate 400ms var(--ease-soft); }
  .card:hover .card-icon { rotate:-10deg; }

  /* care journey: rail draws, badges pop */
  html.m-on .steps .step-connector { transform:scaleY(0); transform-origin:top center; transition:transform 900ms var(--ease-soft); }
  html.m-on .steps .step-badge { scale:.3; opacity:0; transition:scale 600ms cubic-bezier(.34,1.56,.64,1), opacity 400ms var(--ease-soft), background 260ms var(--ease-soft), box-shadow 260ms var(--ease-soft), color 260ms var(--ease-soft), transform 260ms var(--ease-soft); }
  html.m-on .steps.is-in .step-badge { scale:1; opacity:1; }
  html.m-on .steps.is-in .step-connector { transform:scaleY(1); }
  html.m-on .steps.is-in .step:nth-child(1) .step-badge { transition-delay:100ms, 100ms, 0s, 0s, 0s, 0s; }
  html.m-on .steps.is-in .step:nth-child(2) .step-badge { transition-delay:350ms, 350ms, 0s, 0s, 0s, 0s; }
  html.m-on .steps.is-in .step:nth-child(3) .step-badge { transition-delay:600ms, 600ms, 0s, 0s, 0s, 0s; }
  html.m-on .steps.is-in .step:nth-child(4) .step-badge { transition-delay:850ms, 850ms, 0s, 0s, 0s, 0s; }
  html.m-on .steps.is-in .step:nth-child(1) .step-connector { transition-delay:250ms; }
  html.m-on .steps.is-in .step:nth-child(2) .step-connector { transition-delay:500ms; }
  html.m-on .steps.is-in .step:nth-child(3) .step-connector { transition-delay:750ms; }
  .step-body h4 { transition:translate 320ms var(--ease-soft); }
  .step.is-active .step-body h4 { translate:4px 0; }

  /* team */
  .doc-tab-arrow svg { transition:translate 260ms var(--ease-soft); }
  .doc-tab:hover .doc-tab-arrow svg, .doc-tab.is-active .doc-tab-arrow svg { translate:3px 0; }
  .doc-copy.is-swapping .doc-quals li { animation:mSlideR 560ms var(--ease-soft) both; }
  .doc-copy.is-swapping .doc-quals li:nth-child(1) { animation-delay:220ms; }
  .doc-copy.is-swapping .doc-quals li:nth-child(2) { animation-delay:300ms; }
  .doc-copy.is-swapping .doc-quals li:nth-child(3) { animation-delay:380ms; }
  .doc-copy.is-swapping .doc-rule { transform-origin:left center; animation:mDraw 700ms var(--ease-soft) 160ms both; }

  /* pricing */
  html.m-on .pricing-media img { clip-path:inset(10% 10% 10% 10% round 20px); scale:1.08; transition:clip-path 1300ms cubic-bezier(.7,0,.2,1), scale 1600ms cubic-bezier(.2,.7,.2,1); }
  html.m-on .pricing-media.is-in img { clip-path:inset(0 0 0 0 round 20px); scale:1; }
  html.m-on .fee-tags .fee-tag { opacity:0; transform:translateY(10px); transition:opacity 600ms var(--ease-soft), transform 600ms var(--ease-soft); }
  html.m-on .fee-tags.is-in .fee-tag { opacity:1; transform:none; }
  html.m-on .fee-tags.is-in .fee-tag:nth-child(2) { transition-delay:120ms; }
  html.m-on .fee-tags.is-in .fee-tag:nth-child(3) { transition-delay:240ms; }
  html.m-on .fee-tags.is-in .fee-tag .ico { animation:mPop 600ms var(--ease-soft) both; }
  html.m-on .fee-tags.is-in .fee-tag:nth-child(2) .ico { animation-delay:120ms; }
  html.m-on .fee-tags.is-in .fee-tag:nth-child(3) .ico { animation-delay:240ms; }

  /* reviews */
  html.m-on .pill-stars .st { display:inline-block; opacity:0; }
  html.m-on .google-pill.is-in .pill-stars .st { animation:mPop 520ms var(--ease-soft) both; animation-delay:calc(var(--i) * 90ms + 300ms); }
  .pill-arrow svg { transition:translate 260ms var(--ease-soft); }
  .google-pill:hover .pill-arrow svg { translate:3px 0; }
  .review-avatar { transition:scale 300ms var(--ease-soft), background 300ms var(--ease-soft); }
  .review:hover .review-avatar { scale:1.08; }

  /* clinic */
  html.m-on .info-rows .info-row { opacity:0; transform:translateX(18px); transition:opacity 700ms var(--ease-soft), transform 700ms var(--ease-soft); }
  html.m-on .info-rows.is-in .info-row { opacity:1; transform:none; }
  html.m-on .info-rows.is-in .info-row:nth-child(2) { transition-delay:130ms; }
  html.m-on .info-rows.is-in .info-row:nth-child(3) { transition-delay:260ms; }
  .info-icon { border-radius:50%; }
  html.m-on .info-rows.is-in .info-row .info-icon { animation:mRing 1100ms var(--ease-soft) both; }
  html.m-on .info-rows.is-in .info-row:nth-child(1) .info-icon { animation-delay:500ms; }
  html.m-on .info-rows.is-in .info-row:nth-child(2) .info-icon { animation-delay:630ms; }
  html.m-on .info-rows.is-in .info-row:nth-child(3) .info-icon { animation-delay:760ms; }
  .info-row .ico { transition:scale 260ms var(--ease-soft); }
  .info-row:hover .ico { scale:1.15; }

  /* buttons: sheen on hover */
  .btn--primary::after, .btn--ink::after {
    content:""; position:absolute; top:0; bottom:0; left:0; width:40%; z-index:-1; pointer-events:none;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
    transform:translateX(-120%) skewX(-18deg);
  }
  .btn--primary:hover::after, .btn--ink:hover::after { animation:mSheen 900ms var(--ease-soft); }
  .btn.is-magnet { transition:background var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-soft), border-color var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft), transform 120ms linear; }

  /* footer + social */
  .social svg { transition:rotate 360ms var(--ease-soft), scale 260ms var(--ease-soft); }
  .social:hover svg { rotate:-8deg; scale:1.1; }
  .footer-nav button { transition:color 220ms var(--ease-soft), translate 260ms var(--ease-soft); }
  .footer-nav button:hover { translate:4px 0; }

  /* WhatsApp FAB breathing ring */
  .fab::before {
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    box-shadow:0 0 0 2px rgba(37,211,102,.7); animation:mFabRing 5.5s ease-out 3s infinite;
  }

  /* drawer items cascade */
  .drawer:not([hidden]) .drawer-nav button, .drawer:not([hidden]) .drawer-actions .btn { animation:mSlideR 480ms var(--ease-soft) both; }
  .drawer:not([hidden]) .drawer-nav button:nth-child(1) { animation-delay:90ms; }
  .drawer:not([hidden]) .drawer-nav button:nth-child(2) { animation-delay:130ms; }
  .drawer:not([hidden]) .drawer-nav button:nth-child(3) { animation-delay:170ms; }
  .drawer:not([hidden]) .drawer-nav button:nth-child(4) { animation-delay:210ms; }
  .drawer:not([hidden]) .drawer-nav button:nth-child(5) { animation-delay:250ms; }
  .drawer:not([hidden]) .drawer-nav button:nth-child(6) { animation-delay:290ms; }
  .drawer:not([hidden]) .drawer-nav button:nth-child(7) { animation-delay:330ms; }
  .drawer:not([hidden]) .drawer-actions .btn:nth-child(1) { animation-delay:380ms; }
  .drawer:not([hidden]) .drawer-actions .btn:nth-child(2) { animation-delay:430ms; }
}