/* =========================================================
   WHOLESOME LIVING — PREMIUM MOTION & DEPTH LAYER
   Additive layer on top of main.css. Adds glass, gradient-mesh
   backdrops, 3D tilt, magnetic buttons, and orchestrated motion.
   Nothing here changes layout structure — only depth & polish.
   ========================================================= */

:root{
  --wl-glow-teal: rgba(43,60,36,.35);
  --wl-glow-taupe: rgba(190,156,137,.45);
  --wl-glass-bg: rgba(255,255,255,.6);
  --wl-glass-border: rgba(255,255,255,.55);
  --wl-ease: cubic-bezier(.16,.84,.44,1);
}

/* ---------- Perf / accessibility baseline ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .wl-blob,.wl-scroll-progress,.wl-cursor-glow{display:none!important}
}

/* ---------- Scroll progress ---------- */
.wl-scroll-progress{position:fixed;top:0;left:0;height:2px;width:0%;z-index:2000;background:linear-gradient(90deg,var(--wl-taupe-dark,#9b7767),var(--wl-teal,#2b3c24));box-shadow:0 0 12px var(--wl-glow-teal);pointer-events:none;transition:width .08s linear}

/* ---------- Ambient cursor glow (desktop, fine pointer only) ---------- */
.wl-cursor-glow{position:fixed;top:0;left:0;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,var(--wl-glow-teal) 0%,transparent 68%);opacity:0;transform:translate(-50%,-50%);filter:blur(6px);transition:opacity .4s ease;mix-blend-mode:multiply}
.wl-cursor-glow.is-active{opacity:.5}
@media (pointer:coarse){.wl-cursor-glow{display:none}}

/* ---------- Gradient-mesh ambient blobs ---------- */
.wl-blob{position:absolute;border-radius:44% 56% 62% 38%/40% 46% 54% 60%;filter:blur(42px);opacity:.55;pointer-events:none;will-change:transform,border-radius;z-index:0}
@keyframes wl-blob-morph{
  0%{border-radius:44% 56% 62% 38%/40% 46% 54% 60%;transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  33%{border-radius:56% 44% 38% 62%/58% 34% 66% 42%;transform:translate3d(18px,-22px,0) rotate(6deg) scale(1.04)}
  66%{border-radius:38% 62% 54% 46%/50% 62% 38% 50%;transform:translate3d(-14px,16px,0) rotate(-5deg) scale(.98)}
  100%{border-radius:44% 56% 62% 38%/40% 46% 54% 60%;transform:translate3d(0,0,0) rotate(0deg) scale(1)}
}
.wl-blob{animation:wl-blob-morph 22s var(--wl-ease) infinite}
.wl-blob--teal{background:radial-gradient(circle at 35% 30%,rgba(43,60,36,.5),rgba(43,60,36,0) 70%)}
.wl-blob--taupe{background:radial-gradient(circle at 60% 40%,rgba(190,156,137,.55),rgba(190,156,137,0) 70%)}
.wl-blob--cream{background:radial-gradient(circle at 50% 50%,rgba(255,253,249,.9),rgba(255,253,249,0) 70%)}

.wl-hero,.wl-section--brand,.wl-cta,.wl-store-hero,.wl-store-editorial{position:relative;overflow:hidden}
.wl-hero .wl-blob--one{width:480px;height:480px;top:-160px;right:-120px;animation-duration:26s}
.wl-hero .wl-blob--two{width:340px;height:340px;bottom:-140px;left:-100px;animation-duration:19s;animation-delay:-6s}
.wl-section--brand .wl-blob--one{width:520px;height:520px;top:-220px;left:60%;background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.18),rgba(255,255,255,0) 70%);animation-duration:24s}
.wl-cta .wl-blob--one{width:420px;height:420px;bottom:-220px;right:-80px;background:radial-gradient(circle at 40% 35%,rgba(190,156,137,.28),rgba(190,156,137,0) 70%);animation-duration:20s}
.wl-store-hero .wl-blob--one{width:460px;height:460px;top:-180px;left:-100px;animation-duration:25s}
.wl-store-editorial .wl-blob--one{width:520px;height:520px;top:-200px;right:-140px;background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.12),rgba(255,255,255,0) 70%);animation-duration:23s}

/* keep blobs strictly behind content */
.wl-hero__grid,.wl-brand-story,.wl-cta__inner,.wl-store-hero__inner,.wl-store-editorial__grid{position:relative;z-index:2}

/* ---------- Fine grain texture for editorial depth ---------- */
.wl-section--brand:after,.wl-store-editorial:after,.wl-cta:after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
}

/* ---------- Header glass depth ---------- */
.wl-header{background:rgba(255,253,249,.72)!important;backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border-bottom:1px solid rgba(43,60,36,.08)}
.wl-header.is-scrolled{background:rgba(255,253,249,.9)!important;box-shadow:0 18px 50px rgba(16,47,51,.1)}
.wl-header:before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--wl-teal,#2b3c24) 50%,transparent);opacity:0;transition:opacity .4s ease}
.wl-header.is-scrolled:before{opacity:.5}

/* ---------- 3D perspective stage for tiltable cards ---------- */
.wl-service-grid,.wl-package-grid,.wl-home-brand-grid,.wl-shop-grid,.wl-store-category-grid,.wl-commerce-main .products{perspective:1400px}
.wl-tilt{transform-style:preserve-3d;will-change:transform;transition:transform .5s var(--wl-ease),box-shadow .5s var(--wl-ease)}
.wl-tilt .wl-tilt-shine{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(circle at var(--wl-mx,50%) var(--wl-my,50%),rgba(255,255,255,.55),transparent 55%);mix-blend-mode:soft-light;z-index:3}
.wl-tilt.is-hovering .wl-tilt-shine{opacity:1}

/* Service cards get real depth */
.wl-service-card{position:relative}
.wl-service-card.is-hovering{box-shadow:0 34px 70px rgba(43,60,36,.22)}
.wl-service-card__number{transform:translateZ(28px)}
.wl-service-card h3,.wl-service-card p,.wl-service-card__arrow{transform:translateZ(18px)}

/* Product / shop cards depth + image zoom */
.wl-shop-card,.wl-home-brand-card,.wl-store-category-card,.wl-commerce-main ul.products li.product{position:relative}
.wl-shop-card.is-hovering,.wl-commerce-main ul.products li.product.is-hovering{box-shadow:0 40px 80px rgba(43,60,36,.24)}
.wl-shop-card__image img,.wl-commerce-main ul.products li.product img,.wl-store-category-card img{transition:transform .7s var(--wl-ease)}
.wl-shop-card:hover .wl-shop-card__image img,.wl-commerce-main ul.products li.product:hover img{transform:scale(1.07)}

/* Hero photo — real parallax tilt card */
.wl-hero-photo{transform-style:preserve-3d;transition:transform .4s var(--wl-ease),box-shadow .4s var(--wl-ease);will-change:transform}
.wl-hero-photo:before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .4s ease;background:linear-gradient(115deg,rgba(255,255,255,.35) 0%,transparent 30%,transparent 70%,rgba(255,255,255,.15) 100%)}
.wl-hero__visual--photo.is-tilting .wl-hero-photo:before{opacity:1}
.wl-mini-card{transition:transform .5s var(--wl-ease)}
.wl-hero__visual--photo.is-tilting .wl-mini-card--top{transform:translate3d(0,-6px,60px)}
.wl-hero__visual--photo.is-tilting .wl-mini-card--bottom{transform:translate3d(0,6px,60px)}
@keyframes wl-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.wl-mini-card{animation:wl-float 6s ease-in-out infinite}
.wl-mini-card--bottom{animation-delay:-3s}
.wl-hero-orbit{animation:wl-spin-slow 46s linear infinite}
.wl-hero-orbit--two{animation-duration:60s;animation-direction:reverse}
@keyframes wl-spin-slow{to{transform:rotate(360deg)}}
.wl-hero__visual--photo:before,.wl-hero__visual--photo:after{animation:wl-spin-slow 70s linear infinite}
.wl-hero__visual--photo:after{animation-duration:90s;animation-direction:reverse}

/* ---------- Buttons: shine sweep + magnetic glow ---------- */
.wl-button{position:relative;overflow:hidden;isolation:isolate}
.wl-button:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .7s var(--wl-ease);z-index:1;pointer-events:none}
.wl-button:hover:after{left:120%}
.wl-button:not(.wl-button--ghost):not(.wl-button--outline-light):hover{box-shadow:0 16px 34px var(--wl-glow-teal)}
.wl-button--cream:hover{box-shadow:0 16px 34px var(--wl-glow-taupe)}
.wl-button span,.wl-button>*{position:relative;z-index:2}

/* ---------- Animated gradient-underline text links ---------- */
.wl-text-link{position:relative}
.wl-text-link:after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;background:currentColor;opacity:.5;transition:right .35s var(--wl-ease)}
.wl-text-link:hover:after{right:0}

/* ---------- Stat counters: gradient glow numerals ---------- */
.wl-stat-row strong{background:linear-gradient(120deg,#fff,#dff0ea 60%,#fff);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}

/* ---------- Section heading reveal refinement (single orchestrated stagger) ---------- */
.wl-service-card.wl-reveal,.wl-package.wl-reveal,.wl-post-card.wl-reveal,.wl-shop-card.wl-reveal{transition:opacity .7s var(--wl-ease),transform .7s var(--wl-ease)}
.wl-reveal{transform:translateY(26px) scale(.985)}
.wl-reveal.is-visible{transform:none}

/* ---------- Brand logo mark entrance ---------- */
.wl-brand__mark:before,.wl-brand__mark:after{transition:transform .4s var(--wl-ease)}
.wl-brand:hover .wl-brand__mark:before{transform:rotate(-42deg) scale(1.08)}
.wl-brand:hover .wl-brand__mark:after{transform:rotate(42deg) scale(1.08)}

/* ---------- Package / brand cards subtle lift depth ---------- */
.wl-package{transition:transform .4s var(--wl-ease),box-shadow .4s var(--wl-ease),border-color .4s ease}
.wl-package:hover{transform:translateY(-6px) translateZ(0);box-shadow:0 26px 54px rgba(43,60,36,.14);border-color:rgba(43,60,36,.18)}
.wl-post-card{transition:transform .4s var(--wl-ease),box-shadow .4s var(--wl-ease)}
.wl-post-card:hover{transform:translateY(-5px);box-shadow:0 24px 50px rgba(43,60,36,.1)}

/* ---------- CTA & journey premium glow border ---------- */
.wl-journey{position:relative;overflow:hidden}
.wl-journey:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--wl-angle,0deg),transparent 0%,rgba(43,60,36,.35) 18%,transparent 34%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:wl-rotate-border 8s linear infinite;pointer-events:none}
@property --wl-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes wl-rotate-border{to{--wl-angle:360deg}}
.wl-journey__steps b{transition:transform .35s var(--wl-ease),box-shadow .35s var(--wl-ease)}
.wl-journey__steps span:hover b{transform:scale(1.14);box-shadow:0 8px 20px rgba(43,60,36,.35)}

/* ---------- WhatsApp float: breathing glow ---------- */
@keyframes wl-pulse-glow{0%,100%{box-shadow:0 14px 36px rgba(31,122,73,.25)}50%{box-shadow:0 14px 44px rgba(31,122,73,.5)}}
.wl-floating-whatsapp{animation:wl-pulse-glow 3.2s ease-in-out infinite;bottom:calc(22px + env(safe-area-inset-bottom));right:calc(22px + env(safe-area-inset-right))}
.wl-floating-whatsapp--left{right:auto;left:calc(22px + env(safe-area-inset-left))}
@media(max-width:640px){
  .wl-floating-whatsapp{bottom:calc(14px + env(safe-area-inset-bottom));right:calc(14px + env(safe-area-inset-right))}
  .wl-floating-whatsapp--left{right:auto;left:calc(14px + env(safe-area-inset-left))}
}
.wl-floating-whatsapp:hover{transform:translateY(-3px) scale(1.04)}

/* ---------- Store editorial image: soft 3D frame ---------- */
.wl-store-editorial__image img{transition:transform .6s var(--wl-ease)}
.wl-store-editorial__image{perspective:1200px}
.wl-store-editorial__image:hover img{transform:scale(1.02) rotateY(-2deg)}

/* ---------- Category cards: layered shadow depth on hover ---------- */
.wl-store-category-card{transition:transform .45s var(--wl-ease),box-shadow .45s var(--wl-ease)}
.wl-store-category-card:hover{transform:translateY(-6px)}

/* ---------- Loading page fade-in ---------- */
body.wl-site{animation:wl-page-in .6s var(--wl-ease) both}
@keyframes wl-page-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Premium scrollbar ---------- */
body.wl-site{scrollbar-color:var(--wl-teal,#2b3c24) transparent}
body.wl-site::-webkit-scrollbar{width:10px}
body.wl-site::-webkit-scrollbar-track{background:transparent}
body.wl-site::-webkit-scrollbar-thumb{background:linear-gradient(var(--wl-taupe,#be9c89),var(--wl-teal,#2b3c24));border-radius:99px;border:2px solid var(--wl-ivory,#fffdf9)}

@media (max-width:780px){
  .wl-blob{filter:blur(30px);opacity:.35}
  .wl-cursor-glow{display:none}
}