/* =====================================================================
   Motion layer: smooth, professional micro-interactions.
   Only transform / opacity / scale / translate are animated (GPU friendly), nothing that forces layout.
   Everything is switched off for visitors who ask for reduced motion.
   ===================================================================== */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.65,0,.35,1)}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
a,button,summary{-webkit-tap-highlight-color:transparent}

/* ---------- smoother scroll reveal (replaces the basic fade-up) */
.rv{opacity:0;transform:translate3d(0,34px,0) scale(.985);transition:opacity .9s var(--ease-out),transform 1.05s var(--ease-out);will-change:opacity,transform}
.rv.is-in{opacity:1;transform:none;will-change:auto}
@media (min-width:901px){
  .split>.rv:first-child:not(.is-in){transform:translate3d(-44px,0,0)}
  .split>.rv:last-child:not(.is-in){transform:translate3d(44px,0,0)}
}
.rv[data-anim="zoom"]:not(.is-in){transform:scale(.92)}
.rv[data-anim="left"]:not(.is-in){transform:translate3d(-40px,0,0)}
.rv[data-anim="right"]:not(.is-in){transform:translate3d(40px,0,0)}

/* ---------- images: fade in as they load, zoom out gently as they enter */
.js img[loading="lazy"]{opacity:0;transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.js img[loading="lazy"].is-loaded{opacity:1}
.frame.px img,.pillar.px>img{scale:1.12;transition:scale 1.8s var(--ease-out),opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.frame.px:not(.is-in) img,.pillar.px:not(.is-in)>img{scale:1.26}
.frame.px{clip-path:inset(0 0 0 0 round var(--r-lg));transition:clip-path 1.2s var(--ease-out)}
.frame.px:not(.is-in){clip-path:inset(7% 7% 7% 7% round var(--r-lg))}

/* ---------- section headings: a gold rule draws in */
.sechead h2::after{content:"";display:block;width:64px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--gold-d),var(--gold-2));margin:.8rem auto 0;transform:scaleX(0);transform-origin:center;transition:transform 1.1s .25s var(--ease-out)}
.sechead--left h2::after{margin-left:0;transform-origin:left}
.sechead.is-in h2::after{transform:scaleX(1)}

/* ---------- header: slides away while reading, returns on scroll up */
.nav{transition:transform .5s var(--ease-out),background .3s,box-shadow .3s,padding .3s}
.nav.is-hidden:not(.is-open){transform:translate3d(0,-115%,0)}
.nav.is-solid{backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}

/* ---------- hero extras */
.hero__in{will-change:transform,opacity}
.hdots button[aria-selected="true"]::after{width:30px;margin-left:-15px;border-radius:6px;background:rgba(255,255,255,.3)}
.hdots button::before{content:"";position:absolute;left:50%;top:50%;width:30px;height:10px;margin:-5px 0 0 -15px;border-radius:6px;background:#fff;transform:scaleX(0);transform-origin:left;z-index:1}
.hdots button[aria-selected="true"]::before{animation:heroFill 7s linear forwards}
.hero:hover .hdots button::before,.hero.is-paused .hdots button::before{animation-play-state:paused}
@keyframes heroFill{to{transform:scaleX(1)}}
.hslide.is-active .hslide__bg{animation:kb 9s var(--ease-io) both}

/* ---------- buttons: shine on hover, ripple on press */
.btn,.chip,.tab{position:relative;overflow:hidden;transition:transform .3s var(--ease-out),box-shadow .3s,background .25s,color .25s,border-color .25s}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-20deg) translateX(-120%);pointer-events:none}
@media (hover:hover){.btn:hover::after{animation:shine .9s var(--ease-out)}.btn:hover{transform:translateY(-2px)}}
@keyframes shine{to{transform:skewX(-20deg) translateX(520%)}}
.btn:active,.chip:active,.tab:active{transform:scale(.97)}
.rpl{position:absolute;border-radius:50%;background:currentColor;opacity:.22;transform:scale(0);pointer-events:none;animation:rpl .7s var(--ease-out) forwards}
@keyframes rpl{to{transform:scale(1);opacity:0}}

/* ---------- cards and tiles */
.card,.pillar{transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.card:active,.pillar:active{transform:scale(.985)}
.card__img img,.mason img,.pillar>img{transition-timing-function:var(--ease-out)}
@media (hover:hover){.mason a:hover img{transform:scale(1.07)}}

/* ---------- links in articles */
.prose a:not(.btn){text-decoration:none;background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 2px no-repeat;transition:background-size .45s var(--ease-out),color .25s}
.prose a:not(.btn):hover{background-size:100% 2px}

/* ---------- FAQ accordion: height animates, icon turns */
details>summary{transition:color .25s}
details[open]>summary .i,details[open]>summary svg{transform:rotate(180deg)}
details>summary .i,details>summary svg{transition:transform .4s var(--ease-out)}
details.is-closing>summary .i,details.is-closing>summary svg{transform:none}
details>p,details>div{animation:none}
details[open]:not(.is-closing)>p{animation:faqIn .5s .05s var(--ease-out) both}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- forms */
input,select,textarea{transition:border-color .25s,box-shadow .3s var(--ease-out),transform .3s var(--ease-out)}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px rgba(201,151,63,.2)}

/* ---------- floating bits */
.wa-float{animation:popIn .7s 1.4s var(--ease-out) both}
@keyframes popIn{from{opacity:0;transform:translateY(24px) scale(.5)}to{opacity:1;transform:none}}
.mnav{animation:slideUp .7s .35s var(--ease-out) both}
@keyframes slideUp{from{transform:translateY(120%)}to{transform:none}}
.to-top{position:fixed;left:1rem;bottom:1rem;z-index:109;width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--ink-3,#2b180e);color:var(--gold-2,#e3b866);box-shadow:0 8px 22px rgba(27,15,8,.3);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(16px) scale(.8);transition:opacity .4s,visibility .4s,transform .5s var(--ease-out)}
.to-top.is-on{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--gold,#c9973f);color:#1d1208}
.to-top svg{width:20px;height:20px}
@media (max-width:900px){.to-top{bottom:84px;left:.8rem}}

/* ---------- respect reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.rv:not(.is-in),.split>.rv:not(.is-in){opacity:1!important;transform:none!important}
  .js img[loading="lazy"]{opacity:1}
  .frame.px,.frame.px:not(.is-in){clip-path:none}.frame.px img,.pillar.px>img{scale:1!important}
  .sechead h2::after{transform:scaleX(1)}.nav.is-hidden{transform:none!important}
  .btn::after,.rpl,.hdots button::before{display:none}.wa-float,.mnav{animation:none}
}