/* The Nurturing Spot — homepage v2: animations & effects */

/* Scroll progress */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 100; background: linear-gradient(90deg, var(--gold), #e7b45e); transform-origin: left; transform: scaleX(0); }

/* Hero headline: lines slide up */
.hero h1 span { display: inline; color: inherit; }
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.hero h1 .ln > span { display: block; transform: translateY(110%); animation: lineUp 1s var(--ease) forwards; }
.hero h1 .ln:nth-child(1) > span { animation-delay: .15s; }
.hero h1 .ln:nth-child(2) > span { animation-delay: .32s; color: var(--gold); }
@keyframes lineUp { to { transform: none; } }

/* Hero gold spots, taken from the logo */
.spots { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.spots i { position: absolute; border-radius: 50%; background: var(--gold); opacity: .55; animation: spotDrift var(--t, 12s) ease-in-out infinite alternate; }
@keyframes spotDrift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(var(--x, 20px), var(--y, -24px)) scale(1.15); } 100% { transform: translate(calc(var(--x, 20px) * -.6), calc(var(--y, -24px) * .8)) scale(.9); } }
.hero-leaf { will-change: transform; }

/* Badge shimmer */
.badge { position: relative; overflow: hidden; }
.badge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .75) 50%, transparent 70%); transform: translateX(-120%); animation: sweep 5s ease-in-out 1.6s infinite; }
@keyframes sweep { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(120%); } }

/* Button shine and fill */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn-gold::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-130%); transition: transform .8s var(--ease); }
.btn-gold:hover::after { transform: translateX(130%); }
.btn-outline::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.btn-outline:hover { background: transparent; color: #fff; }
.btn-outline:hover::before { transform: scaleX(1); }

/* Pulse ring for key calls to action */
.pulse { animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(200, 137, 43, .55); } 70% { box-shadow: 0 0 0 16px rgba(200, 137, 43, 0); } 100% { box-shadow: 0 0 0 0 rgba(200, 137, 43, 0); } }

/* Hero chip pops in, WhatsApp ring */
.hero-chip { opacity: 0; animation: chipIn .8s var(--ease) 1.2s forwards, float 6s ease-in-out 2s infinite; }
@keyframes chipIn { from { opacity: 0; transform: translateY(20px) scale(.92); } to { opacity: 1; transform: none; } }
.hero-chip .wa { position: relative; }
.hero-chip .wa::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #25d366; animation: ring 2s ease-out 2s infinite; }
@keyframes ring { from { transform: scale(.8); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }

/* Trust bar icons pop in sequence */
.trust-inner.in .ti { animation: pop .7s var(--ease) both; }
.trust-inner.in .trust-item:nth-child(2) .ti { animation-delay: .12s; }
.trust-inner.in .trust-item:nth-child(3) .ti { animation-delay: .24s; }
.trust-inner.in .trust-item:nth-child(4) .ti { animation-delay: .36s; }
@keyframes pop { 0% { transform: scale(.4) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.12) rotate(4deg); opacity: 1; } 100% { transform: none; } }
.trust-item .ti { transition: transform .3s var(--ease), background-color .3s, color .3s; }
.trust-item:hover .ti { transform: translateY(-4px); background: var(--gold); color: #fff; }

/* Section heading lines draw in */
.section-head::before, .section-head::after { transform: scaleX(0); transition: transform 1.1s var(--ease) .2s; }
.section-head::before { transform-origin: right; }
.section-head::after { transform-origin: left; }
.section-head.in::before, .section-head.in::after { transform: scaleX(1); }

/* Steps: number pulse + arrow nudge */
.step-num { position: relative; }
.step-num::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gold); animation: ring 2.6s ease-out infinite; }
.steps-row > .step:nth-child(3) .step-num::after { animation-delay: .8s; }
.steps-row > .step:nth-child(5) .step-num::after { animation-delay: 1.6s; }
.step-arrow .ico { animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(-4px); opacity: .5; } 50% { transform: translateX(6px); opacity: 1; } }

/* Program cards: 3D tilt + light that follows the pointer */
.prog-grid { perspective: 1000px; }
.prog { position: relative; transition: transform .5s var(--ease), box-shadow .35s var(--ease); }
.prog.tilting { transition: transform .12s linear, box-shadow .35s var(--ease); }
.prog:hover { transform: translateY(-8px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.prog::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .35), transparent 60%); opacity: 0; transition: opacity .3s; }
.prog:hover::after { opacity: 1; }
.prog figure { position: relative; }
.prog figure::after { content: "View program"; position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(31, 74, 57, .9); color: #fff; font-size: 13px; font-weight: 700; transform: translateY(14px); opacity: 0; transition: .35s var(--ease); }
.prog:hover figure::after { transform: none; opacity: 1; }

/* Results panel: drifting gold glow, wins rise in */
.results { isolation: isolate; }
.results::before { content: ""; position: absolute; inset: -40%; z-index: -1; background: radial-gradient(closest-side, rgba(200, 137, 43, .22), transparent); animation: glow 9s ease-in-out infinite alternate; }
@keyframes glow { from { transform: translate(-25%, -20%); } to { transform: translate(25%, 20%); } }
.wins span { opacity: 0; transform: translateY(10px); transition: .6s var(--ease); }
.results.in .wins span { opacity: 1; transform: none; }
.results.in .wins span:nth-child(2) { transition-delay: .12s; }
.results.in .wins span:nth-child(3) { transition-delay: .24s; }

/* WhatsApp typing indicator */
.typing { display: none; width: 64px; padding: 12px 14px; background: #fff; border-radius: 4px 14px 14px 14px; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); gap: 5px; }
.typing i { width: 8px; height: 8px; border-radius: 50%; background: #9aa39d; animation: typing 1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }
.chat.is-typing .typing { display: flex; }
.chat.is-typing .bubble { display: none; }
.bubble.arrive { animation: arrive .5s var(--ease); }
@keyframes arrive { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.phone { transition: transform .5s var(--ease); }
.updates:hover .phone { transform: translateY(-6px) rotate(-1deg); }

/* Cards lift, leaf sways, checklist ticks in, founder ring spins */
.card { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card-leaf { animation: sway 8s ease-in-out infinite alternate; transform-origin: bottom right; }
@keyframes sway { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
.checks li { opacity: 0; transform: translateX(-12px); transition: .55s var(--ease); }
.card.in .checks li { opacity: 1; transform: none; }
.card.in .checks li:nth-child(2) { transition-delay: .08s; }
.card.in .checks li:nth-child(3) { transition-delay: .16s; }
.card.in .checks li:nth-child(4) { transition-delay: .24s; }
.card.in .checks li:nth-child(5) { transition-delay: .32s; }
.card.in .checks li:nth-child(6) { transition-delay: .4s; }
.portrait::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent 0 70%, rgba(200, 137, 43, .7) 85%, transparent 100%); animation: spin 6s linear infinite; }
.portrait::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--green); }
.portrait b { position: relative; z-index: 1; }
@keyframes spin { to { transform: rotate(1turn); } }

/* FAQ answer slides in */
.faq-list details[open] p { animation: faqIn .45s var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq-list details:hover { box-shadow: var(--shadow-lg); }

/* Booking photo slow zoom */
.book-photo img { transition: transform 1.6s var(--ease); }
.book-card:hover .book-photo img { transform: scale(1.05); }

/* CTA band drifting glow */
.cta { isolation: isolate; }
.cta::after { content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; left: 30%; top: -260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(200, 137, 43, .28), transparent); animation: glow 10s ease-in-out infinite alternate; }

/* Socials hop */
.socials a:hover .ico { animation: hop .5s var(--ease); }
@keyframes hop { 50% { transform: translateY(-4px) scale(1.15); } }

/* Floating WhatsApp button */
.fab { position: fixed; right: 22px; bottom: 22px; z-index: 70; width: 60px; height: 60px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 12px 28px -10px rgba(18, 140, 75, .7); transform: scale(0); transition: transform .45s var(--ease); }
.fab.show { transform: scale(1); }
.fab .ico { width: 30px; height: 30px; }
.fab::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: ring 2.2s ease-out infinite; }
.fab span { position: absolute; right: 72px; white-space: nowrap; background: #fff; color: var(--ink); font-size: 14px; font-weight: 700; padding: 9px 14px; border-radius: 12px; box-shadow: var(--shadow); opacity: 0; transform: translateX(8px); transition: .3s var(--ease); pointer-events: none; }
.fab:hover span { opacity: 1; transform: none; }

@media (hover: none) {
  .prog:hover { transform: none; }
  .prog figure::after { display: none; }
}
@media (max-width: 860px) {
  .fab { width: 54px; height: 54px; right: 16px; bottom: 16px; }
  .spots i:nth-child(n+6) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .ln > span { transform: none; }
  .hero-chip { opacity: 1; }
  .section-head::before, .section-head::after { transform: none; }
  .checks li, .wins span { opacity: 1; transform: none; }
  .fab { transform: scale(1); }
  .progress { display: none; }
}