/* ==========================================================================
   MedEat — accueil : motion design
   Everything here lives under `.motion` (set before first paint only when JS runs
   and the visitor has not asked for reduced motion). Without it the page is static
   and complete. Only transform / opacity / clip-path are animated.
   ========================================================================== */

/* ---------- Scroll progress (nav) ---------- */
.nav__progress { position: absolute; left: 22px; right: 22px; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--brand), var(--mint)); transform: scaleX(var(--sp, 0)); transform-origin: left; pointer-events: none; }

/* ---------- Hero ambience ---------- */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora i { position: absolute; border-radius: 50%; }
.aurora i:nth-child(1) { width: 70vmax; height: 70vmax; left: 45%; top: -20%; background: radial-gradient(closest-side, rgba(26, 127, 110, .45), transparent); animation: aurora-a 22s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 50vmax; height: 50vmax; left: -15%; top: 40%; background: radial-gradient(closest-side, rgba(94, 242, 209, .14), transparent); animation: aurora-b 26s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { width: 36vmax; height: 36vmax; left: 30%; top: 55%; background: radial-gradient(closest-side, rgba(70, 160, 255, .10), transparent); animation: aurora-c 30s ease-in-out infinite alternate; }
@keyframes aurora-a { to { transform: translate(-18%, 14%) scale(1.15); } }
@keyframes aurora-b { to { transform: translate(22%, -18%) scale(.9); } }
@keyframes aurora-c { to { transform: translate(-25%, -30%) scale(1.25); } }
.motion .hero { position: relative; isolation: isolate; overflow: hidden; }
.motion .hero > :not(.aurora) { position: relative; z-index: 1; }
.motion .hero__film { will-change: transform; }
.motion .hero__film .phone { transition: transform .9s var(--expo); transform-style: preserve-3d; }
.motion .hero__title em { background: linear-gradient(100deg, var(--mint) 0%, var(--mint) 40%, #E9FFF9 50%, var(--mint) 60%, var(--mint) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 5.5s var(--expo) 1.2s infinite; padding-right: .06em; }
@keyframes sheen { 0% { background-position: 100% 0; } 45%, 100% { background-position: 0 0; } }
.motion .narration li.is-on b { text-shadow: 0 0 18px rgba(94, 242, 209, .45); }

/* ---------- Pointer glow over dark sections ---------- */
.cursor-glow { position: fixed; left: 0; top: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; background: radial-gradient(closest-side, rgba(94, 242, 209, .13), transparent 70%); pointer-events: none; z-index: 2; opacity: 0; transition: opacity .6s var(--expo); will-change: transform; }
.cursor-glow.is-on { opacity: 1; }

/* ---------- Split headings: words rise out of a mask ---------- */
.motion .split.reveal { opacity: 1; transform: none; }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .12em; margin: 0 -.04em -.12em; }
.split .wi { display: inline-block; }
.motion .split .wi { transform: translateY(110%) rotate(5deg); transform-origin: left bottom; transition: transform 1.1s var(--expo); transition-delay: calc(var(--wi, 0) * 55ms); }
.motion .split.is-in .wi { transform: none; }
/* Statement: words light up as you read down the page */
.motion .statement__title.scrub-words .wi { transform: none; transition: none; opacity: var(--wo, .48); }
.motion .statement__title.scrub-words .w-em .wi { color: var(--brand); opacity: var(--wo, .78); }

/* ---------- Eyebrows: typed in from the left ---------- */
.mx .eyebrow { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--expo) .1s; }
.mx .eyebrow.is-in { clip-path: inset(0 0 0 0); }
.mx .hero .eyebrow { clip-path: none; }

/* ---------- Cards: 3D entrance, tilt and spotlight ---------- */
.motion .examples .reveal, .motion .cards .reveal, .motion .figures .reveal, .motion .plans .reveal, .motion .data__grid .reveal { transform: perspective(1000px) translateY(48px) rotateX(16deg); transform-origin: 50% 100%; transition: opacity 1s var(--expo), transform 1.2s var(--expo); transition-delay: calc(var(--i, 0) * 110ms); }
.motion .examples .reveal.is-in, .motion .cards .reveal.is-in, .motion .figures .reveal.is-in, .motion .plans .reveal.is-in, .motion .data__grid .reveal.is-in { transform: none; }
.tilt { transform-style: preserve-3d; will-change: transform; }
.motion .tilt, .motion .tilt:hover { transition: transform .6s var(--expo), box-shadow .6s var(--expo); }
.spot { position: relative; isolation: isolate; }
.spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .5s var(--expo); background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(94, 242, 209, .16), transparent 60%); }
.spot.is-hover::before { opacity: 1; }
.example.spot::before, .card.spot::before, .level.spot::before, .figures .spot::before, .plan:not(.plan--premium).spot::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(24, 122, 105, .10), transparent 60%); }
.motion .tag--danger::before { animation: beat 2.4s var(--expo) infinite; box-shadow: 0 0 0 0 rgba(229, 83, 63, .5); }
@keyframes beat { 0% { box-shadow: 0 0 0 0 rgba(229, 83, 63, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(229, 83, 63, 0); } }

/* ---------- Films: the phone lands in 3D ---------- */
.motion .stage { perspective: 1400px; position: relative; }
.motion .stage .phone { transform-origin: 50% 80%; will-change: transform; }
.motion .stage::before { content: ""; position: absolute; left: 50%; top: 42%; width: 130%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(94, 242, 209, .22), transparent 70%); animation: breathe 6s ease-in-out infinite; pointer-events: none; }
@keyframes breathe { 0%, 100% { transform: scale(.88); opacity: .7; } 50% { transform: scale(1.06); opacity: 1; } }
.motion .chapter.is-active .chapter__n { animation: blink-in .6s var(--expo); }
@keyframes blink-in { from { transform: translateX(-6px); opacity: 0; } }

/* ---------- Verdict: cards fan out, bars draw ---------- */
.motion .levels.fan .level { transition: opacity 1s var(--expo); will-change: transform; }
.motion .level::after { transform: scaleX(var(--bar, 1)); transform-origin: left; }
.motion .levels .level::after { --bar: 0; transition: transform 1.4s var(--expo) .3s; }
.motion .levels .level.is-in::after { --bar: 1; }
.motion .level .tag { transition: transform .8s var(--expo) .5s; transform: scale(.6); }
.motion .level.is-in .tag { transform: none; }

/* ---------- Trust: the pipeline draws with the scroll ---------- */
.motion .pipeline.scrubbed::before { transition: none; }
.motion .pipeline li span { transition: background .5s var(--expo), color .5s var(--expo), transform .6s var(--expo), box-shadow .6s var(--expo); }
.motion .pipeline li.lit span { background: var(--brand); color: #fff; transform: scale(1.08); box-shadow: 0 0 0 7px rgba(24, 122, 105, .14); }
.pipeline__dot { position: absolute; left: 10%; top: 18px; width: 12px; height: 12px; border-radius: 99px; background: var(--mint); box-shadow: 0 0 14px 4px rgba(94, 242, 209, .7); z-index: 2; pointer-events: none; opacity: 0; }
.motion .pipeline.done .pipeline__dot { animation: travel 3.2s var(--expo) infinite; }
@keyframes travel { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(var(--run, 0px)); opacity: 0; } }
.figures dt span { font-variant-numeric: tabular-nums; }
/* Sources: an endless, pausable ticker */
.ticker { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ticker__track { display: flex; width: max-content; animation: tick 38s linear infinite; }
.ticker__track > span { padding-right: 3em; white-space: nowrap; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- Data: packets travel between the nodes ---------- */
.motion .flow__arrow { position: relative; height: 46px; padding: 0; color: transparent; }
.motion .flow__arrow::before { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 0; border-left: 2px dashed rgba(94, 242, 209, .35); }
.motion .flow__arrow::after { content: ""; position: absolute; left: 50%; top: 4px; width: 8px; height: 8px; margin-left: -3px; border-radius: 99px; background: var(--mint); box-shadow: 0 0 12px 3px rgba(94, 242, 209, .7); animation: packet 2.2s ease-in-out infinite; }
@keyframes packet { 0% { transform: translateY(0); opacity: 0; } 15%, 85% { opacity: 1; } 50% { transform: translateY(30px); } 100% { transform: translateY(0); opacity: 0; } }
.motion .flow__node { transition: box-shadow .6s var(--expo), border-color .6s var(--expo); }
.motion .flow:hover .flow__node:not(.flow__node--muted) { box-shadow: 0 0 0 4px rgba(94, 242, 209, .08), 0 0 30px -6px rgba(94, 242, 209, .45); border-color: rgba(94, 242, 209, .55); }
.motion .promises li { transition: transform .5s var(--expo); }
.motion .promises li:hover { transform: translateX(6px); }

/* ---------- Glowing animated borders (premium plan, pro badge) ---------- */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.motion .plan--premium, .motion .pro__badge { position: relative; isolation: isolate; }
.motion .plan--premium::after, .motion .pro__badge::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--ang), transparent 0 55%, var(--mint) 70%, transparent 85%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 5s linear infinite; pointer-events: none; }
@keyframes spin { to { --ang: 360deg; } }
.motion .plan__price { display: inline-block; }
.motion .plan.is-in .plan__price { animation: pop .9s var(--expo) .35s both; }
@keyframes pop { from { transform: translateY(24px) scale(.9); opacity: 0; } }

/* ---------- FAQ: smooth open / close ---------- */
.faq details > p { overflow: hidden; }
.motion .faq summary { transition: color .3s; }
.motion .faq summary:hover { color: var(--brand); }

/* ---------- Launch finale ---------- */
.motion .launch { position: relative; overflow: hidden; isolation: isolate; }
.motion .launch::before { content: ""; position: absolute; left: 50%; bottom: -30%; width: 120vmax; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(94, 242, 209, .18), transparent 70%); animation: breathe 7s ease-in-out infinite; z-index: -1; }
.sparks { position: absolute; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.sparks i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 99px; background: var(--mint); box-shadow: 0 0 8px 2px rgba(94, 242, 209, .6); opacity: 0; animation: rise var(--d, 9s) linear var(--del, 0s) infinite; }
@keyframes rise { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 90% { opacity: .5; } 100% { transform: translate(var(--dx, 0px), -110vh); opacity: 0; } }
.motion .btn--lg { position: relative; overflow: hidden; }
.motion .btn--lg::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent); transform: skewX(-20deg); animation: shine 3.6s var(--expo) 1s infinite; }
@keyframes shine { 0% { left: -60%; } 40%, 100% { left: 130%; } }

/* ---------- Magnetic buttons ---------- */
.magnet { will-change: transform; }

@media (max-width: 900px) {
  .pipeline__dot { left: 18px; top: 24px; }
  .motion .pipeline.done .pipeline__dot { animation-name: travel-y; }
  @keyframes travel-y { 0% { transform: translateY(0); opacity: 0; } 8%, 85% { opacity: 1; } 100% { transform: translateY(var(--run, 0px)); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .aurora, .sparks, .cursor-glow, .pipeline__dot { display: none; }
  .ticker__track { animation: none; }
}