/* ============================================================
   Animations & premium interactions — Dr. Camilo Tarazona
   CSS transitions + IntersectionObserver only. Calm, not flashy.
   ============================================================ */

/* ---------------------------------------------------------
   1 · NAVBAR — transparent at top, solid white on scroll
   --------------------------------------------------------- */
.nav { background: transparent; }
.nav .brand .bt b,
.nav .brand .bt span,
.nav .nav-links a { transition: color .35s ease; }
.nav.scrolled {
  background: rgba(247,245,240,.9);
  backdrop-filter: saturate(1.3) blur(14px);
  border-color: var(--hair);
  box-shadow: 0 6px 24px -16px rgba(45,59,24,.4);
}
/* Subpages set .scrolled on load; keep them solid */

/* ---------------------------------------------------------
   2 · HERO — animated organic mesh + parallax
   --------------------------------------------------------- */
.hero { position: relative; overflow: hidden; }
.hero > .wrap { position: relative; z-index: 2; }
.hero-mesh {
  position: absolute; inset: -10% -5%; z-index: 0; pointer-events: none;
  filter: blur(60px); opacity: .55;
}
.hero-mesh .blob {
  position: absolute; border-radius: 50%;
  will-change: transform;
  animation: drift var(--dur, 26s) ease-in-out infinite alternate;
}
.hero-mesh .b1 { width: 42vw; height: 42vw; left: -6vw; top: -8vw;
  background: radial-gradient(circle at 30% 30%, rgba(74,93,35,.42), transparent 70%); --dur: 30s; }
.hero-mesh .b2 { width: 34vw; height: 34vw; right: -4vw; top: 4vw;
  background: radial-gradient(circle at 50% 50%, rgba(201,160,92,.40), transparent 70%); --dur: 24s; animation-delay: -6s; }
.hero-mesh .b3 { width: 30vw; height: 30vw; left: 22vw; bottom: -14vw;
  background: radial-gradient(circle at 50% 50%, rgba(139,45,58,.20), transparent 70%); --dur: 34s; animation-delay: -12s; }
.hero-mesh .b4 { width: 26vw; height: 26vw; right: 14vw; bottom: -6vw;
  background: radial-gradient(circle at 50% 50%, rgba(74,93,35,.30), transparent 70%); --dur: 28s; animation-delay: -3s; }
@keyframes drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(3vw,-2.4vw,0) scale(1.12); }
  100% { transform: translate3d(-2.4vw,2vw,0) scale(.94); }
}
.hero-photo { will-change: transform; }

/* ---------------------------------------------------------
   3 · STAGGERED REVEALS (base .reveal lives in styles.css)
   Children stagger handled by data-d. Add a softer ease here.
   --------------------------------------------------------- */
.reveal { transition-timing-function: cubic-bezier(.22,.65,.3,1); }
.reveal[data-d="5"] { transition-delay: .40s; }
.reveal[data-d="6"] { transition-delay: .48s; }

/* Timeline — sequential milestone reveal */
.tl-item { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.22,.65,.3,1), transform .7s cubic-bezier(.22,.65,.3,1); }
.tl-item::before { transform: scale(.4); transition: transform .5s cubic-bezier(.3,1.4,.4,1) .1s; }
.tl.in .tl-item { opacity: 1; transform: none; }
.tl.in .tl-item::before { transform: scale(1); }
.tl.in .tl-item:nth-child(1) { transition-delay: .05s; } .tl.in .tl-item:nth-child(1)::before { transition-delay: .15s; }
.tl.in .tl-item:nth-child(2) { transition-delay: .18s; } .tl.in .tl-item:nth-child(2)::before { transition-delay: .28s; }
.tl.in .tl-item:nth-child(3) { transition-delay: .31s; } .tl.in .tl-item:nth-child(3)::before { transition-delay: .41s; }
.tl.in .tl-item:nth-child(4) { transition-delay: .44s; } .tl.in .tl-item:nth-child(4)::before { transition-delay: .54s; }
.tl.in .tl-item:nth-child(5) { transition-delay: .57s; } .tl.in .tl-item:nth-child(5)::before { transition-delay: .67s; }
/* draw the vertical line */
.tl::before { transform: scaleY(0); transform-origin: top; transition: transform 1.1s cubic-bezier(.4,0,.2,1) .1s; }
.tl.in::before { transform: scaleY(1); }

/* Count-up stat sits steady; subtle settle when finished */
.stat .n { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------
   4 · GOLD DIVIDERS — draw themselves in on scroll
   --------------------------------------------------------- */
.divider-gold { transform: scaleX(0); transform-origin: center; transition: transform 1.1s cubic-bezier(.45,0,.15,1), opacity .8s ease; opacity: 0; }
.divider-gold.in { transform: scaleX(1); opacity: .5; }

/* ---------------------------------------------------------
   5 · DIAGNOSIS CARDS — lift + breathing icons
   (hover lift already in components.css; refine easing)
   --------------------------------------------------------- */
.diag-card { transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s, border-color .4s; }
.diag-card .ic { animation: breathe 5.5s ease-in-out infinite; transform-origin: center; }
.diag-card:nth-child(2) .ic { animation-delay: -1.4s; }
.diag-card:nth-child(3) .ic { animation-delay: -2.8s; }
.diag-card:nth-child(4) .ic { animation-delay: -4.1s; }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } }
.diag-card:hover .ic { animation-play-state: paused; }

/* ---------------------------------------------------------
   6 · VIDEO CARDS — gentle thumbnail zoom on hover
   --------------------------------------------------------- */
.vid-thumb { overflow: hidden; }
.vid-img { transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.vid-card:hover .vid-img { transform: scale(1.06); }

/* ---------------------------------------------------------
   7 · CTA PULSE — subtle olive ring, no neon
   --------------------------------------------------------- */
.btn.pulse { position: relative; }
.btn.pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(74,93,35,.42);
  animation: cta-pulse 3.4s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events: none;
}
@keyframes cta-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74,93,35,.36); }
  60%  { box-shadow: 0 0 0 16px rgba(74,93,35,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,93,35,0); }
}
.btn-gold.pulse::after { animation: cta-pulse-gold 3.4s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes cta-pulse-gold {
  0%   { box-shadow: 0 0 0 0 rgba(201,160,92,.42); }
  60%  { box-shadow: 0 0 0 16px rgba(201,160,92,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,160,92,0); }
}

/* ---------------------------------------------------------
   8 · QUOTE MARKS — oversized gold, soft fade
   --------------------------------------------------------- */
.bigquote::before {
  opacity: 0; transform: translateY(8px) scale(.9); transform-origin: left top;
  transition: opacity 1s ease .15s, transform 1s cubic-bezier(.2,.7,.3,1) .15s;
}
.bigquote.in::before { opacity: .4; transform: none; }

/* ---------------------------------------------------------
   9 · 3-STEP CONNECTORS — lines draw between steps on scroll
   Applies to .steps (international) and .proc (subpages)
   --------------------------------------------------------- */
.steps, .proc { position: relative; }
.step, .proc-card { position: relative; }
@media (min-width: 921px) {
  .step:not(:last-child)::after,
  .proc-card:not(:last-child)::after {
    content: ""; position: absolute; top: 50%; right: -13px; width: 26px; height: 2px;
    background: var(--gold); transform: scaleX(0); transform-origin: left;
    transition: transform .7s cubic-bezier(.4,0,.2,1); opacity: .55;
  }
  .steps.in .step:not(:last-child)::after { transform: scaleX(1); }
  .proc.in .proc-card:not(:last-child)::after { transform: scaleX(1); }
  .steps.in .step:nth-child(2)::after { transition-delay: .25s; }
  .proc.in .proc-card:nth-child(2)::after { transition-delay: .25s; }
}
/* step number subtle count-in */
.step .sn { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }

/* ---------------------------------------------------------
   10 · SUBPAGE breadcrumb — slide in from left
   --------------------------------------------------------- */
.crumb { opacity: 0; transform: translateX(-16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.crumb.in { opacity: 1; transform: none; }

/* Anatomical watermark (injected per subpage) */
.anatomy-wm {
  position: absolute; pointer-events: none; z-index: 0;
  color: var(--gold); opacity: .07;
  width: min(46vw, 560px); height: auto;
  top: 8%; right: -4%;
}
.anatomy-wm path, .anatomy-wm circle, .anatomy-wm ellipse { vector-effect: non-scaling-stroke; }
.sub-hero { position: relative; overflow: hidden; }
.sub-hero > .wrap { position: relative; z-index: 1; }

/* ---------------------------------------------------------
   11 · FLOATING UI — WhatsApp, back-to-top, progress bar
   (markup injected by app.js)
   --------------------------------------------------------- */
#page-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--olive), var(--gold));
  z-index: 300; transition: width .15s ease-out; box-shadow: 0 0 8px rgba(201,160,92,.5);
}

.fab-wa {
  position: fixed; right: clamp(16px,3vw,30px); bottom: clamp(16px,3vw,30px); z-index: 250;
  width: 60px; height: 60px; border-radius: 50%;
  background: #25D366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 12px 30px -8px rgba(37,211,102,.55), 0 4px 10px rgba(0,0,0,.18);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
  animation: fab-bob 4.5s ease-in-out infinite;
}
.fab-wa svg { width: 30px; height: 30px; }
.fab-wa:hover { transform: scale(1.08); box-shadow: 0 16px 38px -8px rgba(37,211,102,.7); animation-play-state: paused; }
.fab-wa::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37,211,102,.5); animation: fab-ring 4.5s ease-out infinite;
}
@keyframes fab-bob { 0%,88%,100% { transform: translateY(0); } 92% { transform: translateY(-7px); } 96% { transform: translateY(-3px); } }
@keyframes fab-ring { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.45); } 70% { box-shadow: 0 0 0 14px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
.fab-wa .tip {
  position: absolute; right: 72px; top: 50%; transform: translateY(-50%) translateX(8px);
  background: var(--forest); color: #fff; font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  white-space: nowrap; padding: 9px 14px; border-radius: 10px; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; box-shadow: var(--shadow);
}
.fab-wa .tip::after { content:""; position:absolute; right:-5px; top:50%; transform:translateY(-50%); border:6px solid transparent; border-left-color: var(--forest); }
.fab-wa:hover .tip { opacity: 1; transform: translateY(-50%) translateX(0); }

.to-top {
  position: fixed; right: clamp(16px,3vw,30px); bottom: calc(clamp(16px,3vw,30px) + 74px); z-index: 250;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--white); color: var(--olive); border: 1px solid var(--hair);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--shadow-sm);
  opacity: 0; transform: translateY(12px) scale(.85); pointer-events: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.3,1), background .25s, color .25s;
}
.to-top svg { width: 20px; height: 20px; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--olive); color: #fff; transform: translateY(-2px); }

/* ---------------------------------------------------------
   12 · FLOATING LABELS — contact form
   --------------------------------------------------------- */
.field.float { position: relative; gap: 0; }
.field.float label {
  position: absolute; left: 16px; top: 15px; margin: 0;
  font-size: 15.5px; font-weight: 500; color: var(--ink-3); letter-spacing: 0;
  pointer-events: none; transform-origin: left top;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), color .22s; background: transparent; padding: 0 4px;
}
.field.float input, .field.float textarea { padding-top: 22px; }
.field.float.active label,
.field.float input:focus + label,
.field.float textarea:focus + label {
  transform: translateY(-11px) scale(.74); color: var(--olive); font-weight: 700;
}
.field.float .cnt { position: absolute; right: 14px; bottom: 12px; }

/* ---------------------------------------------------------
   Reduced motion — calm everything to a still, legible state
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-mesh .blob,
  .diag-card .ic,
  .fab-wa, .fab-wa::before,
  .btn.pulse::after { animation: none !important; }
  .tl-item, .tl-item::before, .tl::before,
  .divider-gold, .crumb, .bigquote::before,
  .step:not(:last-child)::after, .proc-card:not(:last-child)::after {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .divider-gold { opacity: .5 !important; }
  .bigquote::before { opacity: .4 !important; }
  .anatomy-wm { opacity: .07 !important; }
}