/* ==========================================================
   ReLeaf — glass & motion layer (loaded after style.css)
   Everything that moves is switched off for visitors who
   ask their device for reduced motion.
   ========================================================== */
:root {
  --glass-light: rgba(255, 255, 255, .62);
  --glass-light-strong: rgba(255, 255, 255, .78);
  --glass-light-edge: rgba(255, 255, 255, .85);
  --glass-dark: rgba(255, 255, 255, .07);
  --glass-dark-edge: rgba(255, 255, 255, .16);
  --glass-blur: blur(18px) saturate(160%);
  --glass-shadow: 0 24px 48px -28px rgba(7, 61, 26, .45);
  --glass-shine: inset 0 1px 0 rgba(255, 255, 255, .55);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- Aurora: drifting colour behind the glass ---------- */
.hero, .page-hero, .section, .site-footer { position: relative; isolation: isolate; }
.section, .site-footer, .page-hero, .hero { overflow: hidden; overflow: clip; }
.aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.aurora span { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; }
.aurora span:nth-child(1) { width: 560px; height: 560px; top: -200px; right: -120px; background: #4fa536; opacity: .55; }
.aurora span:nth-child(2) { width: 380px; height: 380px; bottom: -160px; left: 32%; background: var(--sun); opacity: .2; }
.aurora span:nth-child(3) { width: 460px; height: 460px; bottom: -220px; left: -160px; background: #10845a; opacity: .5; }
.aurora.light span:nth-child(1) { background: #bfe3a8; opacity: .7; }
.aurora.light span:nth-child(2) { background: #ffe39a; opacity: .55; }
.aurora.light span:nth-child(3) { background: #bfe9d8; opacity: .7; }
.aurora.dim span { opacity: .22; }
@media (max-width: 700px) { .aurora span { filter: blur(50px); transform: scale(.7); } }

/* ---------- Header: frosted glass that tightens on scroll ---------- */
.site-header {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  transition: border-color .25s, box-shadow .25s, background-color .25s;
  view-transition-name: site-header;
}
.site-header .wrap { transition: height .3s var(--ease-out); }
.site-header.scrolled { background: rgba(255, 255, 255, .8); box-shadow: 0 10px 30px -18px rgba(7, 61, 26, .35); }
.site-header.scrolled .wrap { height: 66px; }
.brand img { width: 72px; height: 72px; object-fit: contain; transition: transform .4s var(--ease-spring), width .3s, height .3s; }
.site-header.scrolled .brand img { width: 60px; height: 60px; }
@media (max-width: 640px) { .brand img { width: 62px; height: 62px; } .site-header.scrolled .brand img { width: 54px; height: 54px; } }
.brand:hover img { transform: rotate(-6deg) scale(1.05); }
.nav a { position: relative; transition: color .2s, background-color .2s; }
@media (min-width: 1061px) {
  .nav a.active { box-shadow: none; }
  .nav a::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px; border-radius: 3px;
    background: var(--leaf); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out);
  }
  .nav a:hover::after, .nav a.active::after { transform: scaleX(1); }
  .nav a:hover { background: transparent; }
}
@media (max-width: 1060px) {
  .nav {
    position: absolute; inset: 100% 0 auto 0; max-height: calc(100vh - 120px);
    background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-light-edge);
  }
  .nav a { transition: padding-left .2s, color .2s; }
  .nav.open a { animation: navIn .4s var(--ease-out) both; }
  .nav.open a:nth-child(2) { animation-delay: .03s; } .nav.open a:nth-child(3) { animation-delay: .06s; }
  .nav.open a:nth-child(4) { animation-delay: .09s; } .nav.open a:nth-child(5) { animation-delay: .12s; }
  .nav.open a:nth-child(6) { animation-delay: .15s; } .nav.open a:nth-child(7) { animation-delay: .18s; }
  .nav.open a:nth-child(8) { animation-delay: .21s; }
}
@keyframes navIn { from { opacity: 0; transform: translateX(-14px); } }

/* ---------- Buttons: lift + light sweep ---------- */
.btn { transition: background-color .2s, color .2s, border-color .2s, transform .25s var(--ease-out), box-shadow .25s; }
.btn-sun, .btn-forest, .btn-wa { position: relative; overflow: hidden; isolation: isolate; }
.btn-sun::after, .btn-forest::after, .btn-wa::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .5) 50%, transparent 75%);
  transform: translateX(-130%); transition: transform .75s var(--ease-out);
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
  .btn-sun:hover { box-shadow: 0 14px 26px -12px rgba(227, 174, 28, .8); }
  .btn-forest:hover { box-shadow: 0 14px 26px -12px rgba(11, 90, 38, .7); }
  .btn-sun:hover::after, .btn-forest:hover::after, .btn-wa:hover::after { transform: translateX(130%); }
}
.btn-ghost-light {
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

/* ---------- Hero ---------- */
.hero-points li {
  padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--glass-dark);
  border: 1px solid var(--glass-dark-edge); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.frame-glass {
  padding: 12px; border-radius: 132px 0 132px 0;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .24);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 40px 70px -35px rgba(0, 0, 0, .55), var(--glass-shine);
}
.frame-glass.light { background: rgba(255, 255, 255, .5); border-color: var(--glass-light-edge); box-shadow: var(--glass-shadow), var(--glass-shine); }
.frame-glass .leaf-frame { box-shadow: none; }
.hero-visual .leaf-frame img { transition: transform 1.2s var(--ease-out); }
.hero-visual:hover .leaf-frame img { transform: scale(1.04); }

/* Shown until a photo is added: glass tiles of the services */
.leaf-frame.art {
  position: relative; isolation: isolate; display: grid; place-items: center;
  background: linear-gradient(155deg, #f1f8ec 0%, #d4ebc4 55%, #b9dda5 100%);
}
.leaf-frame.art::before, .leaf-frame.art::after { content: ""; position: absolute; border-radius: 50%; filter: blur(30px); z-index: -1; }
.leaf-frame.art::before { width: 55%; height: 45%; top: 8%; left: 6%; background: #8ccc6c; opacity: .8; }
.leaf-frame.art::after { width: 50%; height: 40%; bottom: 8%; right: 4%; background: #ffd862; opacity: .75; }
.hero-art { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; padding: 19% 12% 17%; }
.art-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 16px; border-radius: 18px;
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 16px 30px -20px rgba(7, 61, 26, .5), var(--glass-shine);
  font-weight: 700; color: var(--forest-deep); font-size: .95rem; line-height: 1.2;
}
.art-tile:nth-child(even) { transform: translateY(18px); }
.art-tile .icon { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--forest); color: #fff; }
.art-tile:nth-child(3n+2) .icon { background: var(--sun); color: var(--forest-deep); }
@media (max-width: 480px) { .art-tile { padding: 12px; font-size: .82rem; } .hero-art { gap: 10px; padding: 12% 8%; } }

.hero-badge {
  background: var(--glass-light-strong); border: 1px solid var(--glass-light-edge);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .5), var(--glass-shine);
}

/* ---------- Light glass surfaces ---------- */
.category-panel:not(.dark), .why-item, .review:not(.review-feature), .vm-card:not(.alt), .pillar.light,
.price-table, .glass-card, .cal, .svc-pick .opt-card, .slot-list .slot, .svc-card, .track-card {
  background: var(--glass-light); border: 1px solid var(--glass-light-edge);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), var(--glass-shine);
}
.section:not(.section-mist):not(.section-forest) .svc-card { background: rgba(255, 255, 255, .85); border-color: var(--line); }
.price-table thead th { background: rgba(238, 244, 234, .7); }
.price-table .callout td { background: rgba(255, 246, 214, .7); }
.svc-pick input:checked + .opt-card { background: rgba(238, 244, 234, .9); }
.slot-list input:checked + .slot { background: rgba(238, 244, 234, .95); }

/* ---------- Dark glass surfaces ---------- */
.category-panel.dark, .review-feature, .vm-card.alt {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(155deg, #0f6e31 0%, #0a4f23 60%, #073d1a 100%);
  box-shadow: 0 30px 60px -30px rgba(7, 61, 26, .7), var(--glass-shine);
}
.category-panel.dark::before, .review-feature::before, .vm-card.alt::before {
  content: ""; position: absolute; z-index: -1; width: 70%; height: 60%; top: -25%; right: -20%;
  border-radius: 50%; background: #5bb13c; opacity: .4; filter: blur(60px);
}
.category-panel.dark::after { content: ""; position: absolute; z-index: -1; width: 50%; height: 40%; bottom: -15%; left: -10%; border-radius: 50%; background: var(--sun); opacity: .14; filter: blur(60px); }
.pillar, .steps li {
  background: var(--glass-dark); border: 1px solid var(--glass-dark-edge);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.section-mist .pillar, .pillar.light { box-shadow: var(--glass-shadow), var(--glass-shine); }

/* ---------- Hover lifts (pointer devices only) ---------- */
@media (hover: hover) {
  .category-panel, .why-item, .svc-card, .review, .pillar, .vm-card, .steps li, .art-tile, .post-card .thumb {
    transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .25s, background-color .25s;
  }
  .category-panel:hover, .why-item:hover, .svc-card:hover, .review:hover, .pillar:hover, .vm-card:hover, .steps li:hover {
    transform: translateY(-6px); box-shadow: 0 34px 60px -30px rgba(7, 61, 26, .55), var(--glass-shine);
  }
  .pillar:hover, .steps li:hover { background: rgba(255, 255, 255, .11); }
  .why-icon { transition: transform .45s var(--ease-spring), background-color .25s, color .25s; }
  .why-item:hover .why-icon, .svc-card:hover .why-icon, .pillar:hover .why-icon, .vm-card:hover .why-icon { transform: rotate(-8deg) scale(1.08); }
  .why-item:hover .why-icon, .svc-card:hover .why-icon { background: var(--forest); color: #fff; }
  .post-card:hover .thumb { transform: translateY(-4px); box-shadow: var(--glass-shadow); }
  .svc-list li .icon { transition: transform .35s var(--ease-spring); }
  .svc-list li:hover .icon { transform: scale(1.2) rotate(-6deg); }
  .footer-social a, .topbar-social a { transition: transform .3s var(--ease-spring), background-color .2s, color .2s; }
  .footer-social a:hover, .topbar-social a:hover { transform: translateY(-3px); }
}

/* ---------- Booking ---------- */
.summary {
  overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, #0f6e31 0%, #0a4f23 55%, #073d1a 100%);
  box-shadow: 0 30px 60px -30px rgba(7, 61, 26, .7);
}
.summary::before, .summary::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(50px); }
.summary::before { width: 240px; height: 240px; top: -90px; right: -70px; background: #5bb13c; opacity: .55; }
.summary::after { width: 200px; height: 200px; bottom: -80px; left: -60px; background: var(--sun); opacity: .2; }
.summary dl {
  background: var(--glass-dark); border: 1px solid var(--glass-dark-edge); border-radius: 16px; padding: 2px 16px 16px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.summary dd { transition: color .3s; }
.summary dd.flash { animation: flash .6s var(--ease-out); }
@keyframes flash { 0% { color: var(--sun); transform: translateX(4px); } 100% { color: #fff; transform: none; } }
.svc-pick .opt-card, .slot-list .slot { transition: border-color .2s, background-color .2s, transform .3s var(--ease-out), box-shadow .3s; }
@media (hover: hover) {
  .svc-pick label:hover .opt-card, .slot-list label:hover input:not(:disabled) + .slot { transform: translateY(-3px); border-color: var(--leaf); }
}
.svc-pick input:checked + .opt-card .icon { animation: pop .5s var(--ease-spring); }
.progress li::before { transition: background-color .4s, box-shadow .4s; }
.progress li.current::before { box-shadow: 0 0 0 4px rgba(84, 155, 51, .18); }
.cal-grid button { transition: background-color .2s, color .2s, transform .25s var(--ease-spring); }
.cal-grid button.available:hover { transform: scale(1.08); }
.cal-grid button.selected { box-shadow: 0 10px 20px -10px rgba(11, 90, 38, .8); }

/* ---------- WhatsApp button pulse ---------- */
.wa-float { isolation: isolate; transition: transform .3s var(--ease-spring), background-color .2s; }
.wa-float::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: #1fa855; }
@media (hover: hover) { .wa-float:hover { transform: scale(1.08); } }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(115deg, #f5c542 0%, #f9d975 45%, #f5c542 100%); background-size: 220% 100%; }
.cta-band::before { content: ""; position: absolute; z-index: -1; width: 340px; height: 340px; right: -80px; top: -120px; border-radius: 50%; background: #fff; opacity: .35; filter: blur(60px); }

.footer-brand img { width: 120px; height: 120px; object-fit: contain; padding: 10px; border-radius: 28px 0 28px 0; }

/* ==========================================================
   Motion (only when the visitor has not asked for less)
   ========================================================== */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vtOut .25s ease both; }
  ::view-transition-new(root) { animation: vtIn .4s var(--ease-out) both; }

  .aurora span { animation: drift 22s ease-in-out infinite alternate; }
  .aurora span:nth-child(2) { animation-duration: 28s; animation-delay: -6s; }
  .aurora span:nth-child(3) { animation-duration: 34s; animation-delay: -12s; }

  /* scroll reveals: hidden only once JS is confirmed running */
  .js [data-reveal], .js [data-stagger] > * {
    opacity: 0; transform: translateY(28px);
    transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  }
  .js [data-stagger] > * { transition-delay: calc(var(--i, 0) * 90ms); }
  .js [data-reveal].in, .js [data-stagger].in > * { opacity: 1; transform: none; }
  .js [data-stagger].done > * { transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .25s, background-color .25s, opacity .3s; transition-delay: 0s; }

  .frame-glass { animation: frameIn 1s .1s var(--ease-out) both; }
  .leaf-frame { animation: none; }
  .art-tile { animation: floaty 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.1s); }
  .hero-badge.b1 { animation: rise .6s .75s forwards, bob 7s 1.4s ease-in-out infinite; }
  .hero-badge.b2 { animation: rise .6s .9s forwards, bob 8s 1.6s ease-in-out infinite reverse; }
  .hero-points li { animation: riseIn .6s var(--ease-out) both; }
  .hero-points li:nth-child(1) { animation-delay: .7s; } .hero-points li:nth-child(2) { animation-delay: .8s; } .hero-points li:nth-child(3) { animation-delay: .9s; }

  .wa-float::before { animation: ripple 3s ease-out infinite; }
  .cta-band { animation: sheen 9s ease-in-out infinite; }

  .step:not([hidden]) { animation: stepIn .5s var(--ease-out); }
  .tab-panel:not([hidden]) { animation: riseIn .5s var(--ease-out) both; }
  .slot-list label { animation: popIn .4s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
  .cal-grid button { animation: fadeIn .35s ease both; }
  .confirm-box .tick { animation: popIn .7s var(--ease-spring) both; }
  .confirm-box .tick path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .6s .45s var(--ease-out) forwards; }
  .confirm-box .ref { animation: popIn .6s .3s var(--ease-spring) both; }
  .alert { animation: riseIn .45s var(--ease-out) both; }
}
@keyframes drift { to { transform: translate3d(60px, -40px, 0) scale(1.12); } }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } }
@keyframes frameIn { from { opacity: 0; transform: translateY(30px) scale(.96); } }
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes ripple { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(1.8); opacity: 0; } }
@keyframes sheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes stepIn { from { opacity: 0; transform: translateX(28px); } }
@keyframes popIn { from { opacity: 0; transform: scale(.85); } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(-10deg); } 100% { transform: scale(1); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(12px); } }

/* Browsers without backdrop-filter get solid, readable panels */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header, .nav { background: #fff; }
  .category-panel:not(.dark), .why-item, .review:not(.review-feature), .vm-card:not(.alt), .pillar.light,
  .price-table, .glass-card, .cal, .svc-pick .opt-card, .slot-list .slot, .svc-card, .hero-badge, .art-tile { background: #fff; }
}

.hero-badge.b1 { top: -3%; left: -30px; }
.hero-badge.b2 { bottom: -3%; right: -22px; }
@media (max-width: 920px) { .hero-badge.b1 { left: -6px; } .hero-badge.b2 { right: -6px; } }

/* Choices keep a visible outline so they read as tappable */
.svc-pick .opt-card, .slot-list .slot, .cal { border-color: var(--line); }
@media (max-width: 480px) { .hero-art { padding: 16% 8% 24%; } }