/* Motion for pages with `motion: true` in their front matter (the home page).
   Every rule is keyed off html.motion, which the head script adds only when the
   visitor hasn't asked for reduced motion, so without it the page is static.
   Scroll reveals: [data-reveal] reveals that element, [data-reveal-each] each
   of its children; motion.js adds .is-in on entering view, .is-done once settled. */

.motion{--m-ease:cubic-bezier(.22,1,.36,1);--m-spring:cubic-bezier(.34,1.45,.64,1);scroll-behavior:smooth}

/* Hero: the text rises in line by line and the photo settles into its frame */
@keyframes m-rise{from{opacity:0;transform:translateY(24px)}}
@keyframes m-photo-in{from{opacity:0;transform:translateY(20px) scale(.97)}}
@keyframes m-settle{from{transform:scale(1.14)}}
@keyframes m-breathe{from{transform:scale(.94) translate(0,0)}to{transform:scale(1.06) translate(-3%,2%)}}
@keyframes m-fade{from{opacity:0}}
.motion .w-hero__text>*{animation:m-rise .9s var(--m-ease) both}
.motion .w-hero__text>:nth-child(2){animation-delay:.12s}
.motion .w-hero__text>:nth-child(3){animation-delay:.24s}
.motion .w-hero .w-photo{animation:m-photo-in 1.2s var(--m-ease) .15s both}
.motion .w-hero .w-photo>*{animation:m-settle 2s var(--m-ease) .15s both}
/* A soft blush halo behind the photo that slowly breathes */
.motion .w-hero{position:relative;isolation:isolate}
.motion .w-hero::before{content:"";position:absolute;z-index:-1;top:-2%;right:0;width:64%;aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(243,222,211,.95),rgba(243,222,211,.5) 55%,rgba(243,222,211,0));animation:m-fade 2s ease .3s both,m-breathe 10s ease-in-out infinite alternate}
@media (max-width:900px){.motion .w-hero::before{top:auto;bottom:0;width:100%}}

/* Header: frosts and lifts once the page scrolls, with a thin reading-progress line */
.motion .w-hdr{transition:background-color .35s ease,box-shadow .35s ease}
.motion .w-hdr.is-scrolled{background:rgba(251,247,241,.84);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 8px 28px rgba(74,49,40,.08)}
@keyframes m-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@supports (animation-timeline:scroll()){
.motion .w-hdr::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--terra);opacity:.55;transform-origin:0 50%;animation:m-progress linear both;animation-timeline:scroll(root)}
}

/* Scroll reveals: the hidden state, and the transition into view */
.motion :is([data-reveal],[data-reveal-each]>*):not(.is-in){opacity:0;transform:translateY(28px)}
.motion :is([data-reveal],[data-reveal-each]>*):not(.is-done){transition:opacity .8s var(--m-ease) var(--d,0s),transform .95s var(--m-ease) var(--d,0s),filter .95s var(--m-ease) var(--d,0s)}
/* left: list items slide in from the bullet side */
.motion :is([data-reveal=left],[data-reveal-each=left]>*):not(.is-in){transform:translateX(-18px)}
/* focus: a heading comes into focus */
.motion [data-reveal=focus]:not(.is-in){filter:blur(10px);transform:translateY(14px) scale(.98)}
/* write: handwriting is drawn on, left to right. The clip is on the inner text,
   since a fully clipped element never counts as in view. */
.motion [data-reveal=write]:not(.is-in){opacity:1;transform:none}
.motion [data-reveal=write]>*{display:inline-block;clip-path:inset(-30% -10% -30% -10%);transition:clip-path 1.6s cubic-bezier(.65,0,.35,1) calc(var(--d,0s) + .2s)}
.motion [data-reveal=write]:not(.is-in)>*{clip-path:inset(-30% 100% -30% -10%)}
/* photo: the frame fades up and the picture settles inside it */
.motion [data-reveal=photo]:not(.is-in){transform:translateY(24px) scale(.97)}
.motion [data-reveal=photo]>*{transition:transform 1.8s var(--m-ease) var(--d,0s)}
.motion [data-reveal=photo]:not(.is-in)>*{transform:scale(1.14)}
/* drop: polaroids are tossed onto the album and settle at their angle */
.motion [data-reveal-each=drop]>*:not(.is-done){transition:opacity .6s var(--m-ease) var(--d,0s),transform 1.1s var(--m-spring) var(--d,0s)}
.motion [data-reveal-each=drop]>:nth-child(odd):not(.is-in){transform:translateY(-44px) rotate(-10deg) scale(1.06)}
.motion [data-reveal-each=drop]>:nth-child(even):not(.is-in){transform:translateY(-44px) rotate(9deg) scale(1.06)}

/* Steps: each number pops in just after its card */
.motion .w-steps .w-step__n{transition:transform .7s var(--m-spring) calc(var(--d,0s) + .35s),opacity .4s ease calc(var(--d,0s) + .35s)}
.motion .w-steps>:not(.is-in) .w-step__n{transform:scale(.3);opacity:0}

/* Promises: the rule above each one draws across */
.motion .w-promise{position:relative;border-top-color:transparent}
.motion .w-promise::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--terra-soft);transform-origin:0 50%;transition:transform 1.3s var(--m-ease) calc(var(--d,0s) + .1s)}
.motion .w-promises>:not(.is-in)::before{transform:scaleX(0)}

/* Trust list: the sage dots pop as their line arrives */
.motion .w-list>*::before{transition:transform .6s var(--m-spring) calc(var(--d,0s) + .25s)}
.motion .w-list>:not(.is-in)::before{transform:scale(0)}

/* Polaroids straighten and lift when you point at them */
.motion .w-snap{transition:transform .5s var(--m-spring),box-shadow .5s var(--m-ease)}
.motion .w-snap.is-done:hover{transform:rotate(0) translateY(-8px) scale(1.03);box-shadow:0 4px 8px rgba(74,49,40,.08),0 22px 44px rgba(74,49,40,.16)}

/* Contact cards lift; the phone icon gives a little ring */
.motion .w-way{transition:transform .45s var(--m-ease),box-shadow .45s var(--m-ease)}
.motion .w-way.is-done:hover{transform:translateY(-4px);box-shadow:var(--w-shadow-md)}
@keyframes m-ring{20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}
.motion :is(.w-tel,.w-way__num):hover .lt-icon{animation:m-ring .8s ease-in-out}
.motion .w-hero .lt-btn{transition:var(--motion-hover),transform .3s var(--m-ease)}
.motion .w-hero .lt-btn:hover{transform:translateY(-2px);box-shadow:var(--w-shadow-sm)}

/* FAQ: answers glide open; the toggle fills and turns */
.motion .w-faq details{transition:box-shadow .35s var(--m-ease)}
.motion .w-faq details.is-done:hover{box-shadow:var(--w-shadow-md)}
.motion .w-faq summary::after{transition:background-color .3s ease,color .3s ease,transform .5s var(--m-ease)}
.motion .w-faq details[open] summary::after{background:var(--terra);color:#fff;transform:rotate(180deg)}
@supports selector(::details-content){
.motion .w-faq details{interpolate-size:allow-keywords}
.motion .w-faq details::details-content{height:0;overflow:clip;transition:height .45s var(--m-ease),content-visibility .45s allow-discrete}
.motion .w-faq details[open]::details-content{height:auto}
}