/* Andover Groundworks concepts: shared motion and hover effects.
   Vanilla port of the TRS hover kit (Fx.tsx + globals.css), in the client's orange.
   Every effect is switched off for visitors who ask for reduced motion. */

:root{--fx-gold:#D76B38;--fx-gold-deep:#C54508;--fx-ease:cubic-bezier(.16,1,.3,1)}

/* reading progress line across the very top */
.fx-progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:200;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg,var(--fx-gold-deep),var(--fx-gold),#F0A47C);pointer-events:none}

/* soft light that follows the cursor across a card */
.fx-spot{position:relative;isolation:isolate}
.fx-spot::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;background:radial-gradient(var(--spot-size,378px) circle at var(--mx,50%) var(--my,50%),var(--spot,rgba(215,107,56,.16)),transparent 70%);opacity:0;transition:opacity .5s ease;mix-blend-mode:screen}
.fx-spot:hover::before{opacity:1}

/* a lit orange edge that follows the cursor round the border */
.fx-glow{position:relative}
.fx-glow::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;background:radial-gradient(var(--glow-size,252px) circle at var(--mx,50%) var(--my,50%),var(--glow,rgba(215,107,56,.95)),transparent 65%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .45s ease}
.fx-glow:hover::after{opacity:1}

/* 3D tilt towards the cursor, with a small lift. Put it on an INNER element,
   never on something that also has a reveal transform. */
.fx-tilt{transform:perspective(990px) translateY(var(--lift,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .8s var(--fx-ease),box-shadow .5s ease;will-change:transform;transform-style:preserve-3d}
.fx-tilt.is-active{transition:transform .18s ease-out,box-shadow .5s ease}

/* buttons that lean towards the cursor */
.fx-mag{transform:translate3d(var(--mgx,0px),var(--mgy,0px),0);transition:transform .5s var(--fx-ease),background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease}
.fx-mag.is-active{transition:transform .15s ease-out,background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease}

/* layers that drift with the mouse inside an .fx-zone */
.fx-layer{transform:translate3d(calc(var(--px,0) * var(--depth,12.6px) * -1),calc(var(--py,0) * var(--depth,12.6px) * -1),0) scale(var(--layer-scale,1.06));transition:transform 1.4s var(--fx-ease)}

/* photos that move a little slower than the page */
.fx-par{transform:translate3d(0,calc(var(--sp,0) * var(--sp-range,36px)),0) scale(var(--sp-scale,1.14));will-change:transform}

/* a band of light that sweeps across a photo on hover */
.fx-shine{position:relative;overflow:hidden}
.fx-shine::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-60%;width:40%;z-index:2;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-18deg) translateX(0);opacity:0}
.fx-shine:hover::after{animation:fx-sweep 1.1s var(--fx-ease) forwards}
@keyframes fx-sweep{0%{opacity:0;transform:skewX(-18deg) translateX(0)}20%{opacity:1}100%{opacity:0;transform:skewX(-18deg) translateX(420%)}}

/* orange rule that draws in under a heading when it scrolls into view */
[data-rule]{position:relative}
[data-rule]::after{content:"";display:block;height:1px;width:var(--rule-w,64.8px);margin-top:var(--rule-gap,19.8px);background:linear-gradient(90deg,var(--fx-gold),transparent);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--fx-ease) .2s}
[data-rule].is-in::after{transform:scaleX(1)}
[data-rule="center"]::after{margin-left:auto;margin-right:auto;transform-origin:center;background:linear-gradient(90deg,transparent,var(--fx-gold),transparent)}

/* headings that rise in word by word */
[data-split] .fx-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
[data-split] .fx-wi{display:inline-block;transform:translateY(105%);transition:transform 1.15s var(--fx-ease);transition-delay:var(--d,0s)}
[data-split].is-in .fx-wi{transform:none}

/* photos revealed by a wipe as they arrive */
[data-wipe]{clip-path:inset(0 0 100% 0);transition:clip-path 1.5s var(--fx-ease)}
[data-wipe="left"]{clip-path:inset(0 100% 0 0)}
[data-wipe].is-in{clip-path:inset(0 0 0 0)}
[data-wipe] img{transform:scale(1.18);transition:transform 2.2s var(--fx-ease)}
[data-wipe].is-in img{transform:scale(1)}

/* "View" pill that trails the cursor over photos that open */
.fx-cursor{position:fixed;left:0;top:0;z-index:180;pointer-events:none;opacity:0;transition:opacity .25s ease}
.fx-cursor.is-on{opacity:1}
.fx-cursor>span{display:inline-flex;align-items:center;gap:7.2px;border-radius:899.1px;background:rgba(20,21,24,.82);color:#fff;padding:8.1px 13.5px;font:600 9.9px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 10.8px 27px -10px rgba(0,0,0,.6);border:1px solid rgba(215,107,56,.45);backdrop-filter:blur(7.2px);-webkit-backdrop-filter:blur(7.2px);transform:scale(.6);transition:transform .35s var(--fx-ease)}
.fx-cursor>span i{width:5.4px;height:5.4px;border-radius:50%;background:var(--fx-gold)}
.fx-cursor.is-on>span{transform:scale(1)}

/* fine film grain over the whole page for a printed, editorial finish */
.fx-grain::after{content:"";position:fixed;inset:-50%;z-index:170;pointer-events:none;opacity:var(--grain,.045);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:fx-grain 1.2s steps(6) infinite}
@keyframes fx-grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* arrows that nudge forward when their link is hovered */
.fx-arr{display:inline-block;transition:transform .4s var(--fx-ease)}
a:hover .fx-arr,button:hover .fx-arr{transform:translateX(5.4px)}

@media (prefers-reduced-motion:reduce){
  .fx-tilt,.fx-mag,.fx-layer,.fx-par{transform:none!important}
  .fx-progress,.fx-cursor,.fx-shine::after{display:none}
  .fx-grain::after{animation:none}
  [data-split] .fx-wi,[data-wipe],[data-wipe] img{transform:none!important;clip-path:none!important;transition:none!important}
  [data-rule]::after{transform:none;transition:none}
}