/* ==========================================================================
   Motion & depth layer
   Loaded after style.css. Every effect is additive: with JS off, or with
   prefers-reduced-motion, the page falls back to the static composition.
   ========================================================================== */

:root{
  --fx-ease:cubic-bezier(.22,.68,.16,1);
  --fx-ease-out:cubic-bezier(.16,1,.3,1);
  --fx-depth:1400px;
}

/* --- scroll progress ------------------------------------------------------ */
.scroll-progress{
  position:fixed;z-index:1100;inset:0 0 auto;height:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--clay),var(--ember) 62%,#f2a06a);
  transform:scaleX(var(--progress,0));transform-origin:0 50%;
  opacity:0;transition:opacity .4s var(--fx-ease);
}
.is-scrolling .scroll-progress,.site-header.is-scrolled ~ .scroll-progress{opacity:1}

/* --- hero ---------------------------------------------------------------- */
.hero__fx{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:0;transition:opacity 1.6s ease .3s;
}
.hero__fx.is-live{opacity:1}
.hero__picture img{
  transform:scale(var(--hero-scale,1.06)) translate3d(0,var(--hero-shift,0px),0);
  transition:transform .9s var(--fx-ease);
  will-change:transform;
}

/* headline lines lift out of the page as you scroll */
.hero__copy{perspective:var(--fx-depth);perspective-origin:20% 60%}
.hero h1{transform-style:preserve-3d}
.hero h1 span,.hero h1 em{
  display:block;
  transform:translate3d(0,var(--line-y,0px),var(--line-z,0px)) rotateX(var(--line-rx,0deg));
  transform-origin:50% 100%;
  will-change:transform;
}
.fx .hero h1 span,.fx .hero h1 em{opacity:0}
.fx .hero.is-lit h1 span,.fx .hero.is-lit h1 em{
  animation:heroLine 1.15s var(--fx-ease-out) both;
}
.fx .hero.is-lit h1 span:nth-child(1){animation-delay:.15s}
.fx .hero.is-lit h1 span:nth-child(2){animation-delay:.28s}
.fx .hero.is-lit h1 em{animation-delay:.41s}
@keyframes heroLine{
  from{opacity:0;transform:translate3d(0,.42em,-220px) rotateX(38deg)}
  to{opacity:1;transform:translate3d(0,0,0) rotateX(0)}
}

.fx .hero.is-lit .kicker,
.fx .hero.is-lit .hero__service-note,
.fx .hero.is-lit .hero__location,
.fx .hero.is-lit .hero__side-note,
.fx .hero.is-lit .hero__scroll{animation:fadeUp 1s var(--fx-ease-out) both}
.fx .hero .kicker,.fx .hero .hero__service-note,.fx .hero .hero__location,
.fx .hero .hero__side-note,.fx .hero .hero__scroll{opacity:0}
.fx .hero.is-lit .kicker{animation-delay:.05s}
.fx .hero.is-lit .hero__service-note{animation-delay:.55s}
.fx .hero.is-lit .hero__location{animation-delay:.65s}
.fx .hero.is-lit .hero__side-note{animation-delay:.75s}
.fx .hero.is-lit .hero__scroll{animation-delay:.85s}
@keyframes fadeUp{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}

.hero__scroll i{overflow:hidden;position:relative}
.hero__scroll i::after{
  content:"";position:absolute;inset:0;background:var(--ember);
  animation:scrollPulse 2.4s var(--fx-ease) infinite;
}
@keyframes scrollPulse{
  0%{transform:translateY(-100%)}
  55%,100%{transform:translateY(100%)}
}

/* --- word-level heading reveal ------------------------------------------- */
/* the mask needs slack below the baseline or it shears descenders off */
.word{
  display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.18em;margin-bottom:-.18em;
}
.word__in{
  display:inline-block;
  transform:translate3d(0,110%,0) rotateX(-42deg);
  opacity:0;
  transition:transform .95s var(--fx-ease-out),opacity .7s ease;
  transition-delay:var(--d,0ms);
}
[data-split].is-shown .word__in{transform:none;opacity:1}
[data-split]{perspective:900px}

/* --- generic 3D reveal ---------------------------------------------------- */
.fx [data-anim]{
  opacity:0;
  transform:translate3d(0,var(--anim-y,34px),var(--anim-z,-60px)) rotateX(var(--anim-rx,7deg));
  transition:opacity .9s var(--fx-ease-out),transform 1.05s var(--fx-ease-out);
  transition-delay:var(--d,0ms);
}
.fx [data-anim].is-shown{opacity:1;transform:none}
.fx [data-anim="left"]{transform:translate3d(-50px,0,-70px) rotateY(9deg)}
.fx [data-anim="right"]{transform:translate3d(50px,0,-70px) rotateY(-9deg)}
.fx [data-anim="scale"]{transform:scale(.93) translateZ(-80px)}

/* --- pointer-driven card tilt -------------------------------------------- */
.tilt{
  transform:
    perspective(var(--fx-depth))
    rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
    translate3d(0,0,var(--tz,0px));
  transition:transform .5s var(--fx-ease);
  will-change:transform;
}
.tilt.is-tilting{transition:transform .12s linear}
.tilt__glare{
  position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;
  opacity:var(--glare,0);transition:opacity .45s var(--fx-ease);
  background:radial-gradient(
    46% 46% at var(--gx,50%) var(--gy,50%),
    rgba(255,236,214,.30),rgba(255,180,120,.10) 42%,transparent 72%);
  mix-blend-mode:screen;
}
.occasion,.journal-item,.service-scene,.review-placeholders article{position:relative}

/* the rail itself gets a little perspective so tilted cards sit in a room */
.occasion-rail{perspective:1800px;perspective-origin:50% 45%}
.journal-grid{perspective:2000px;perspective-origin:50% 40%}
.service-scenes{perspective:1900px}
.review-placeholders{perspective:1600px}

/* --- magnetic controls ---------------------------------------------------- */
.magnetic{
  transform:translate3d(var(--mx,0px),var(--my,0px),0);
  transition:transform .55s var(--fx-ease);
}
.magnetic.is-pulled{transition:transform .18s ease-out}
.button{position:relative;overflow:hidden;isolation:isolate}
.button::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 22%,rgba(255,255,255,.32) 50%,transparent 78%);
  transform:translateX(-130%);
}
.button:hover::after{animation:sheen .9s var(--fx-ease)}
@keyframes sheen{to{transform:translateX(130%)}}

/* --- header -------------------------------------------------------------- */
.brand__seal svg{
  transform:none;
}
.primary-nav a::after{transition:right .35s var(--fx-ease)}

/* --- mobile menu opens as a plane ---------------------------------------- */
.fx .mobile-menu{
  transform-origin:50% 0;
  transform:perspective(1500px) rotateX(-9deg) translate3d(0,-3%,0);
  opacity:0;transition:opacity .45s ease,transform .6s var(--fx-ease-out);
}
.fx body.menu-open .mobile-menu{opacity:1;transform:none}
.fx .mobile-menu nav a{
  opacity:0;transform:translate3d(0,28px,-40px);
  transition:opacity .5s ease,transform .7s var(--fx-ease-out);
}
.fx body.menu-open .mobile-menu nav a{opacity:1;transform:none}
.fx body.menu-open .mobile-menu nav a:nth-child(1){transition-delay:.10s}
.fx body.menu-open .mobile-menu nav a:nth-child(2){transition-delay:.16s}
.fx body.menu-open .mobile-menu nav a:nth-child(3){transition-delay:.22s}
.fx body.menu-open .mobile-menu nav a:nth-child(4){transition-delay:.28s}
.fx body.menu-open .mobile-menu nav a:nth-child(5){transition-delay:.34s}
.fx body.menu-open .mobile-menu nav a:nth-child(6){transition-delay:.40s}

/* --- process steps -------------------------------------------------------- */
.process__steps{perspective:1500px}
.fx .process__steps li{
  opacity:0;transform:translate3d(0,40px,-120px) rotateX(12deg);
  transform-origin:50% 0;
  transition:opacity .8s ease,transform 1s var(--fx-ease-out);
  transition-delay:var(--d,0ms);
}
.fx .process__steps li.is-shown{opacity:1;transform:none}
.process__number{
  display:inline-block;
  transform:translateZ(var(--num-z,0px));
  transition:transform .6s var(--fx-ease),color .6s var(--fx-ease);
}
.process__steps li:hover .process__number{--num-z:60px;color:var(--ember)}

/* --- menu directions ------------------------------------------------------ */
.menu-directions{perspective:1200px}
.fx .menu-directions div{
  opacity:0;transform:translate3d(0,18px,-50px);
  transition:opacity .6s ease,transform .75s var(--fx-ease-out),background .35s ease;
  transition-delay:var(--d,0ms);
}
.fx .menu-directions.is-shown div{opacity:1;transform:none}
.menu-directions div{position:relative}
.menu-directions div::before{
  content:"";position:absolute;inset:0;background:rgba(216,100,50,.07);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--fx-ease);
}
.menu-directions div:hover::before{transform:scaleX(1)}
.menu-directions p,.menu-directions span{position:relative}

/* --- map ------------------------------------------------------------------ */
.map-route{stroke-dasharray:var(--route-len,900);stroke-dashoffset:var(--route-len,900)}
.area__map.is-shown .map-route{
  animation:drawRoute 2.6s var(--fx-ease-out) .3s forwards;
}
@keyframes drawRoute{to{stroke-dashoffset:0}}
.map-island{
  stroke-dasharray:var(--island-len,2600);stroke-dashoffset:var(--island-len,2600);
  fill-opacity:0;
}
.area__map.is-shown .map-island{
  animation:drawIsland 2.2s var(--fx-ease-out) forwards,
            fillIsland 1.2s ease 1.4s forwards;
}
@keyframes drawIsland{to{stroke-dashoffset:0}}
@keyframes fillIsland{to{fill-opacity:1}}
.map-points circle{transform-box:fill-box;transform-origin:50% 50%;transform:scale(0)}
.map-points text{opacity:0}
.area__map.is-shown .map-points circle{
  animation:popPoint .6s var(--fx-ease-out) forwards;
  animation-delay:calc(1.5s + var(--i,0) * .13s);
}
.area__map.is-shown .map-points text{
  animation:fadeIn .7s ease forwards;
  animation-delay:calc(1.65s + var(--i,0) * .13s);
}
@keyframes popPoint{60%{transform:scale(1.35)}to{transform:scale(1)}}
@keyframes fadeIn{to{opacity:1}}

/* the map tilts with the pointer once drawn */
.area__map svg{
  transform:perspective(1400px) rotateX(var(--map-rx,0deg)) rotateY(var(--map-ry,0deg));
  transition:transform .6s var(--fx-ease);
}

/* --- occasion rail -------------------------------------------------------- */
.occasion__image img{will-change:transform}
.occasion__copy h3{
  transform:translateZ(var(--h3-z,0px));
  transition:transform .6s var(--fx-ease);
}
.occasion:hover .occasion__copy h3{--h3-z:38px}
.occasion{transform-style:preserve-3d}

/* --- journal -------------------------------------------------------------- */
.journal-item figcaption{
  transform:translate3d(0,var(--cap-y,0px),var(--cap-z,0px));
  transition:transform .6s var(--fx-ease);
}
.journal-item:hover figcaption{--cap-y:-6px;--cap-z:50px}
.journal-item{transform-style:preserve-3d}

/* --- reviews -------------------------------------------------------------- */
.review-placeholders article{transition:background .5s var(--fx-ease)}
.review-placeholders article:hover{background:rgba(255,255,255,.035)}

/* --- form ----------------------------------------------------------------- */
.form-step{perspective:1200px}
.form-step.is-active .field,.form-step.is-active legend{
  animation:stepIn .7s var(--fx-ease-out) both;
}
.form-step.is-active legend{animation-delay:0s}
.form-step.is-active .field:nth-child(1){animation-delay:.06s}
.form-step.is-active .field:nth-child(2){animation-delay:.12s}
.form-step.is-active .field:nth-child(3){animation-delay:.18s}
.form-step.is-active .field:nth-child(4){animation-delay:.24s}
.form-step.is-active .field:nth-child(5){animation-delay:.30s}
@keyframes stepIn{
  from{opacity:0;transform:translate3d(0,20px,-40px) rotateX(8deg)}
  to{opacity:1;transform:none}
}
.field input,.field select,.field textarea{position:relative}
.field{position:relative}
.field::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--clay);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .45s var(--fx-ease);
}
.field:focus-within::after{transform:scaleX(1)}

/* --- closing -------------------------------------------------------------- */
.closing__picture img{
  transform:scale(var(--closing-scale,1.08)) translate3d(0,var(--closing-y,0px),0);
  will-change:transform;
}
.closing__copy{perspective:1400px}

/* --- section index counters ---------------------------------------------- */
.section-index span{
  transform:none;
}
.section-index span::before{
  transform:rotate(var(--idx-spin,0deg));
  transition:transform .9s var(--fx-ease);
}

/* --- villa / menus / manifesto media depth -------------------------------- */
.villa-story__visual,.menus__visual,.manifesto__image,.service-scene{overflow:hidden}
.villa-story__visual img,.service-scene img{
  transform:translate3d(0,var(--media-y,0px),0) scale(var(--media-scale,1.06));
  will-change:transform;
}
.villa-story__stamp{
  transform:translate3d(0,var(--stamp-y,0px),0);
  transition:transform .6s var(--fx-ease);
}

/* --- generated-art credit chip ------------------------------------------- */
.art-note{
  position:absolute;z-index:3;left:16px;bottom:14px;margin:0;
  padding:7px 11px;background:rgba(23,23,17,.82);color:#cfc7b8;
  font-size:0.72rem;text-transform:uppercase;letter-spacing:.12em;line-height:1.5;
  backdrop-filter:blur(6px);max-width:min(300px,72%);
}

/* --- reduced motion: strip everything ------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .hero__fx{display:none}
  .fx .hero h1 span,.fx .hero h1 em,
  .fx .hero .kicker,.fx .hero .hero__service-note,.fx .hero .hero__location,
  .fx .hero .hero__side-note,.fx .hero .hero__scroll{opacity:1;animation:none;transform:none}
  .word__in{transform:none;opacity:1;transition:none}
  .fx [data-anim],.fx .process__steps li,.fx .menu-directions div{
    opacity:1!important;transform:none!important;transition:none!important;
  }
  .tilt,.magnetic,.hero__picture img,.closing__picture img,
  .villa-story__visual img,.service-scene img{transform:none!important}
  .tilt__glare,.scroll-progress,.hero__scroll i::after{display:none}
  .map-route,.map-island{stroke-dashoffset:0;fill-opacity:1;animation:none}
  .map-points circle{transform:none;animation:none}
  .map-points text{opacity:1;animation:none}
  .area__map svg{transform:none}
  .fx .mobile-menu{opacity:1;transform:none;transition:none}
  .fx .mobile-menu nav a{opacity:1;transform:none;transition:none}
  .form-step.is-active .field,.form-step.is-active legend{animation:none}
  .button::after{display:none}
}