/* ═══════════════════════════════════════════════════════════════
   Medical Mark — motion & highlights layer (loads after site.css)
   Works with assets/js/motion.js. Everything here switches off for
   visitors who ask for reduced motion, and the page stays fully
   readable if the script never runs (html.motion is removed).
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --marker: rgba(31, 166, 166, .38);
  --stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10.5C40 4 92 2.5 197 6.5' fill='none' stroke='%2335C4C0' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ─── 1. Highlighted words ─────────────────────────────────────── */
/* Titles: teal words with a hand-drawn stroke that draws itself in. */
h1 .hl, h2 .hl, h3 .hl {
  color: var(--teal-2);
  padding-bottom: .26em;
  background-image: var(--stroke);
  background-repeat: no-repeat;
  background-size: 100% .26em;
  background-position: 0 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 1s var(--ease-out);
}
[dir="rtl"] h1 .hl, [dir="rtl"] h2 .hl, [dir="rtl"] h3 .hl { background-position: 100% 100%; }

/* Body text: bright, bolder words on a teal marker that sweeps across. */
p .hl, blockquote .hl, li .hl {
  color: var(--ink);
  font-weight: 600;
  padding-inline: .12em;
  margin-inline: -.06em;
  border-radius: .2em;
  background-image: linear-gradient(var(--marker), var(--marker));
  background-repeat: no-repeat;
  background-size: 100% 42%;
  background-position: 0 88%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .9s var(--ease-out), color .4s;
}
[dir="rtl"] p .hl, [dir="rtl"] blockquote .hl, [dir="rtl"] li .hl { background-position: 100% 88%; }

/* Hidden until the script turns them on */
.motion h1 .hl:not(.is-on), .motion h2 .hl:not(.is-on), .motion h3 .hl:not(.is-on) { background-size: 0% .26em; }
.motion p .hl:not(.is-on), .motion blockquote .hl:not(.is-on), .motion li .hl:not(.is-on) { background-size: 0% 42%; }

/* ─── 2. Titles appear word by word ────────────────────────────── */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .14em; margin-block: -.14em; }
.wi { display: inline-block; will-change: transform; }
.motion .mm-split .wi {
  transform: translateY(105%) rotate(3deg);
  opacity: 0;
  transition: transform .95s var(--ease-out), opacity .6s ease;
  transition-delay: calc(var(--i, 0) * 65ms + var(--d, 0ms));
}
[dir="rtl"].motion .mm-split .wi { transform: translateY(105%) rotate(-3deg); }
.motion .mm-split.is-in .wi { transform: none; opacity: 1; }
.motion .hero-title:not(.mm-split), .motion .page-title:not(.mm-split) { opacity: 0; }

/* ─── 3. Hero: entrance, living background, tilt & parallax ───── */
.hero, .page-hero { --mx: 70%; --my: 30%; }
.hero::before, .page-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgba(53, 196, 192, .13), transparent 65%);
  transition: background .2s;
}
.blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.blobs i {
  position: absolute; width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  border-radius: 50%; filter: blur(70px); opacity: .5; mix-blend-mode: screen;
}
.blobs i:nth-child(1) { background: radial-gradient(circle, rgba(31, 166, 166, .55), transparent 65%); top: -18%; inset-inline-start: 46%; animation: blob1 18s ease-in-out infinite alternate; }
.blobs i:nth-child(2) { background: radial-gradient(circle, rgba(37, 99, 160, .55), transparent 65%); bottom: -28%; inset-inline-start: -8%; animation: blob2 22s ease-in-out infinite alternate; }
.blobs i:nth-child(3) { background: radial-gradient(circle, rgba(53, 196, 192, .35), transparent 65%); top: 30%; inset-inline-start: 20%; width: 28vw; height: 28vw; animation: blob3 15s ease-in-out infinite alternate; }
@keyframes blob1 { to { transform: translate(-12vw, 10vh) scale(1.15); } }
@keyframes blob2 { to { transform: translate(14vw, -8vh) scale(1.2); } }
@keyframes blob3 { to { transform: translate(8vw, 12vh) scale(.8); } }
.page-hero .blobs i { opacity: .35; }

/* Hero copy plays in, one piece after another */
.motion .hero-copy > :not(.hero-title) {
  opacity: 0; translate: 0 26px; filter: blur(6px);
  transition: opacity .9s var(--ease-out), translate .9s var(--ease-out), filter .9s var(--ease-out);
}
.motion .hero-copy > .eyebrow    { transition-delay: .05s; }
.motion .hero-copy > .hero-text  { transition-delay: .55s; }
.motion .hero-copy > .hero-actions { transition-delay: .75s; }
.motion .hero-copy > .hero-trust { transition-delay: .95s; }
.motion .is-loaded .hero-copy > :not(.hero-title) { opacity: 1; translate: 0 0; filter: none; }
.motion .page-hero .crumbs, .motion .page-hero .label, .motion .page-lead {
  opacity: 0; translate: 0 18px; transition: opacity .8s var(--ease-out), translate .8s var(--ease-out);
}
.motion .page-lead { transition-delay: .45s; }
.motion .is-loaded .page-hero .crumbs, .motion .is-loaded .page-hero .label, .motion .is-loaded .page-lead { opacity: 1; translate: 0 0; }

.eyebrow .dot { animation: pulse-dot 2.2s ease-out infinite; }
@keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(53, 196, 192, .6); } 80%, 100% { box-shadow: 0 0 0 10px rgba(53, 196, 192, 0); } }

/* Design tiles fly in, then float, follow the mouse and drift with the scroll */
.hero-visual { perspective: 1200px; }
.hero-stack { transition: transform .5s var(--ease-out); transform-style: preserve-3d; }
.motion .hero-tile {
  opacity: 0; scale: .7; filter: blur(8px);
  transition: opacity 1s var(--ease-out), scale 1.1s var(--ease-back), filter 1s var(--ease-out);
  transition-delay: calc(.3s + var(--t, 0) * .12s);
}
.motion .is-loaded .hero-tile { opacity: 1; scale: 1; filter: none; }
.hero-tile { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.hero-tile img { transition: transform .8s var(--ease-out); }
.hero-tile:hover img { transform: scale(1.06); }
.motion .hero-caption { opacity: 0; transition: opacity .8s 1.3s; }
.motion .is-loaded .hero-caption { opacity: 1; }

/* ─── 4. Sections reveal with depth ────────────────────────────── */
.js .reveal {
  transform: translateY(42px) scale(.97);
  filter: blur(6px);
  transition: opacity .9s var(--ease-out), transform 1s var(--ease-out), filter .9s var(--ease-out);
}
.js .reveal.is-visible { transform: none; filter: none; }
.js .section-head.reveal, .js .about-copy.reveal { transform: translateY(30px); }

/* Images open like a curtain (clip the image, not the observed box — a clipped box never "intersects") */
.js .showcase-item.reveal { transform: none; filter: none; transition: opacity .5s; }
.js .showcase-item.reveal img {
  clip-path: inset(100% 0 0 0); scale: 1.25;
  transition: clip-path 1.2s var(--ease-out), scale 1.6s var(--ease-out), transform .7s var(--ease);
  transition-delay: inherit;
}
.js .showcase-item.reveal.is-visible img { clip-path: inset(0 0 0 0); scale: 1; }

/* Section label line draws in */
.label::before { transition: width .8s var(--ease-out) .2s; }
.js .reveal:not(.is-visible) .label::before { width: 0; }

/* ─── 5. Cards: 3D tilt + glow that follows the cursor ─────────── */
.tilt { --rx: 0deg; --ry: 0deg; --lift: 0px; --gx: 50%; --gy: 50%; }
.js .tilt.tilt-ready.is-visible {
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
  transition: transform .25s ease-out, border-color .35s, background-color .35s, box-shadow .35s;
}
.tilt.is-hover {
  --lift: -6px;
  background-image: radial-gradient(340px circle at var(--gx) var(--gy), rgba(53, 196, 192, .14), transparent 60%);
  border-color: var(--teal-line);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(53, 196, 192, .08);
}
.service-card:hover { transform: none; }
.service-icon, .pillar-icon { transition: transform .5s var(--ease-back), background .3s; }
.tilt.is-hover .service-icon, .tilt.is-hover .pillar-icon { transform: translateY(-4px) rotate(-8deg) scale(1.08); background: rgba(31, 166, 166, .22); }
.tilt.is-hover .link-arrow .ic { translate: 4px 0; }
[dir="rtl"] .tilt.is-hover .link-arrow .ic { translate: -4px 0; }
.link-arrow .ic { transition: translate .3s var(--ease-out); }

/* ─── 6. Numbers count up ──────────────────────────────────────── */
.stat-value { font-variant-numeric: tabular-nums; }
.stat { position: relative; }
.stat::after {
  content: ''; position: absolute; bottom: 0; inset-inline: 30%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--teal-2), transparent);
  transform: scaleX(0); transition: transform 1.2s var(--ease-out) .3s;
}
.stat.is-visible::after { transform: scaleX(1); }

/* ─── 7. Buttons: magnetic pull + light sweep ──────────────────── */
.btn { translate: var(--bx, 0) var(--by, 0); transition: background .25s var(--ease), border-color .25s var(--ease), color .25s, transform .25s var(--ease), box-shadow .25s, translate .35s var(--ease-out); }
.btn-primary, .btn-wa { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after, .btn-wa::after {
  content: ''; position: absolute; inset: -2px; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: sweep 4.5s ease-in-out infinite;
}
@keyframes sweep { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

/* WhatsApp bubble breathes */
.wa-float::before, .wa-float::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--wa);
  animation: ring 2.6s ease-out infinite; pointer-events: none;
}
.wa-float::after { animation-delay: 1.3s; }
@keyframes ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.8); opacity: 0; } }

/* ─── 8. CTA blocks get a moving light border ──────────────────── */
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.cta-card, .cta-band { position: relative; isolation: isolate; }
.cta-card::before, .cta-band::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: 0; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 70%, var(--teal-2) 80%, rgba(53, 196, 192, .2) 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin-border 6s linear infinite;
}
.cta-card > *, .cta-band > * { position: relative; z-index: 1; }
@keyframes spin-border { to { --ang: 360deg; } }

/* ─── 9. Scroll progress + header that steps aside ─────────────── */
.scroll-progress {
  position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 1001; pointer-events: none;
  background: linear-gradient(90deg, var(--teal), var(--teal-2), #7FE3DE);
  transform: scaleX(var(--sp, 0)); transform-origin: left;
  box-shadow: 0 0 12px rgba(53, 196, 192, .6);
}
[dir="rtl"] .scroll-progress { transform-origin: right; }
.site-header { transition: border-color .3s, background .3s, transform .45s var(--ease-out); }
.site-header.is-hidden { transform: translateY(-100%); }

/* Steps: numbers pop */
.step-num { display: inline-block; transition: transform .6s var(--ease-back) .25s; }
.js .step.reveal:not(.is-visible) .step-num { transform: scale(.3) rotate(-20deg); }

/* FAQ answers slide open */
.faq-item[open] p { animation: faq-in .5s var(--ease-out); }
@keyframes faq-in { from { opacity: 0; translate: 0 -8px; } }

/* ─── Reduced motion: show everything, move nothing ────────────── */
@media (prefers-reduced-motion: reduce) {
  .blobs, .scroll-progress { display: none; }
  .motion .mm-split .wi, .motion .hero-copy > *, .motion .hero-tile, .motion .page-hero *, .js .reveal, .js .showcase-item.reveal img {
    opacity: 1 !important; transform: none !important; translate: none !important; scale: none !important; filter: none !important; clip-path: none !important;
  }
  .motion h1 .hl, .motion h2 .hl, .motion h3 .hl { background-size: 100% .26em !important; }
  .motion p .hl, .motion blockquote .hl, .motion li .hl { background-size: 100% 42% !important; }
  .motion .hero-title, .motion .page-title { opacity: 1 !important; }
}