/* =========================================================
   ARDEN — MOTION LAYER
   Slow, weighted, deliberate. One easing curve everywhere.
   Loaded after each page's own styles.
   ========================================================= */
:root{
  --ease-lux: cubic-bezier(0.19, 1, 0.22, 1);   /* long, soft landing */
  --ease-io:  cubic-bezier(0.76, 0, 0.24, 1);   /* for veils and wipes */
}

/* Smooth scrolling is handled in motion.js on desktop */
html.has-smooth{scroll-behavior:auto;}

/* ---------- Page veil: fades in between pages ---------- */
body{transition:none;}
body.page-leaving{opacity:1;}
.page-veil{display:none;}
.js-motion .page-veil{
  display:block; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:#0B0B0B;
  opacity:1; transition:opacity 1s var(--ease-io);
}
.page-veil::after{ /* thin champagne line that draws across while leaving */
  content:''; position:absolute; left:50%; top:50%; height:1px; width:0;
  background:var(--champagne); transform:translateX(-50%);
  transition:width 0.7s var(--ease-io);
}
body.is-loaded .page-veil{opacity:0;}
body.page-leaving .page-veil{opacity:1; transition-duration:0.6s;}
body.page-leaving .page-veil::after{width:120px;}

/* ---------- Nav: slides away on scroll down, returns on scroll up ---------- */
nav{transition:transform 0.9s var(--ease-lux), background-color 0.6s ease;}
nav.nav-hidden{transform:translateY(-101%);}
.js-motion nav{opacity:0; transform:translateY(-16px);}
.js-motion body.is-loaded nav{opacity:1; transform:none; transition:opacity 1.2s ease 0.9s, transform 1.4s var(--ease-lux) 0.9s;}
.js-motion body.is-loaded nav.nav-ready{transition:transform 0.9s var(--ease-lux);}
.js-motion body.is-loaded nav.nav-hidden{transform:translateY(-101%);}

/* ---------- Base reveal: softer and longer than before ---------- */
.js-motion .reveal{
  opacity:0; transform:translateY(40px);
  transition:opacity 1.6s var(--ease-lux), transform 1.8s var(--ease-lux);
}
.js-motion .reveal.is-visible{opacity:1; transform:none;}

/* Staggered groups: children arrive one after another */
.js-motion .reveal.stagger{opacity:1; transform:none;}
.js-motion .reveal.stagger > *{
  opacity:0; transform:translateY(32px);
  transition:opacity 1.4s var(--ease-lux), transform 1.6s var(--ease-lux);
  transition-delay:var(--d, 0ms);
}
.js-motion .reveal.stagger.is-visible > *{opacity:1; transform:none;}
/* split headings animate their own words instead of fading as a block */
.js-motion .reveal.split, .js-motion .reveal.stagger > .split{opacity:1; transform:none;}

/* ---------- Headings: words rise out of a mask ---------- */
.split-word{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:0.12em; margin-bottom:-0.12em;}
.split-word > span{
  display:inline-block; transform:translateY(110%) rotate(3deg); transform-origin:left bottom;
  transition:transform 1.5s var(--ease-lux);
  transition-delay:calc(var(--w, 0) * 70ms + var(--d, 0ms));
}
.split-in .split-word > span{transform:none;}

/* ---------- Wordmark: letters fade up out of a soft blur, tracking settles ---------- */
.hero-wordmark .wm-letter{
  display:inline-block; opacity:0; filter:blur(12px); transform:translateY(0.35em);
  transition:opacity 1.6s var(--ease-lux), filter 1.8s var(--ease-lux), transform 1.8s var(--ease-lux);
  transition-delay:calc(var(--l) * 110ms + 250ms);
}
.split-in .wm-letter{opacity:1; filter:none; transform:none;}

/* ---------- Eyebrows: tracking opens out as they appear ---------- */
.js-motion .eyebrow.eb-anim, .js-motion .hero-location.eb-anim{
  opacity:0; letter-spacing:0.05em;
  transition:opacity 1.4s var(--ease-lux), letter-spacing 2s var(--ease-lux);
  transition-delay:var(--d, 0ms);
}
.js-motion .eyebrow.eb-anim.eb-in{opacity:1; letter-spacing:0.24em;}
.js-motion .hero-location.eb-anim.eb-in{opacity:1; letter-spacing:0.16em;}

/* ---------- Images: curtain unveil + slow settle ---------- */
.img-reveal{
  clip-path:inset(100% 0 0 0 round 10px);
  transition:clip-path 1.6s var(--ease-io);
  transition-delay:var(--d, 0ms);
}
.img-reveal img{
  transform:translate3d(0, var(--py, 0px), 0) scale(1.28);
  transition:transform 2.6s var(--ease-lux);
  transition-delay:var(--d, 0ms);
  will-change:transform;
}
.img-reveal.img-in{clip-path:inset(0 0 0 0 round 10px);}
.img-reveal.img-in img{transform:translate3d(0, var(--py, 0px), 0) scale(var(--rest, 1));}
/* parallax images rest slightly zoomed so they can drift without showing edges */
.img-reveal.parallax{--rest:1.08;}
/* once settled, parallax follows the scroll without lag */
.img-reveal.img-done img{transition:transform 0.15s linear;}
.img-reveal.no-anim, .img-reveal.no-anim img{transition:none !important;}

/* wrapper added around standalone large images */
.lr-wrap{max-width:1180px; margin:0 auto; border-radius:10px; overflow:hidden; border:1px solid var(--line);}
.lr-wrap .large-result-image{border:0; border-radius:0; max-width:none;}

/* Cards: slower, softer hover zoom */
.care-card .care-image img{transition:transform 1.4s var(--ease-lux) !important;}
.care-card:hover .care-image.img-in img{transform:scale(1.05);}
.gallery-slot.img-in:hover img{transform:scale(1.05);}

/* ---------- Buttons: fill sweeps across ---------- */
.btn-primary, .btn-secondary{position:relative; overflow:hidden; isolation:isolate;
  transition:color 0.6s var(--ease-lux), border-color 0.6s var(--ease-lux), background-color 0.6s var(--ease-lux) !important;}
.btn-primary::before, .btn-secondary::before{
  content:''; position:absolute; inset:0; z-index:-1;
  transform:scaleX(0); transform-origin:right center;
  transition:transform 0.8s var(--ease-lux);
}
.btn-primary::before{background:var(--black);}
.btn-secondary::before{background:var(--champagne);}
.btn-primary:hover::before, .btn-secondary:hover::before{transform:scaleX(1); transform-origin:left center;}
.btn-primary:hover{background:var(--champagne); color:var(--champagne);}
.btn-secondary:hover{color:var(--black); border-color:var(--champagne);}

/* Nav links: underline draws in */
.nav-links a, .nav-cta, .footer-col a{position:relative;}
.nav-links a::after, .nav-cta::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--champagne);
  transform:scaleX(0); transform-origin:right; transition:transform 0.7s var(--ease-lux);
}
.nav-links a:hover::after, .nav-cta:hover::after{transform:scaleX(1); transform-origin:left;}

/* ---------- Reduced motion: show everything, move nothing ---------- */
@media (prefers-reduced-motion: reduce){
  .page-veil{display:none;}
  .js-motion .reveal, .js-motion .reveal.stagger > *, .split-word > span, .hero-wordmark .wm-letter,
  .js-motion .eyebrow.eb-anim, .js-motion .hero-location.eb-anim, .img-reveal, .img-reveal img, .js-motion nav{
    opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important;
  }
}

/* ---------- WhatsApp buttons (shared across all pages) ---------- */
.btn-whatsapp{display:inline-flex; align-items:center; justify-content:center; gap:12px;}
.btn-whatsapp svg{width:18px; height:18px; flex-shrink:0;}