/* Motion layer: scroll reveals, parallax and 3D.
   Every rule hangs on a class that motion.js adds, so without JavaScript,
   on old browsers, or with "reduce motion" switched on, the pages look
   exactly as they did before. Colours stay inside the site palette. */

/* Reading progress along the bottom edge of the header */
.fx-progress { position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: #AA1120; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; will-change: transform; }
html.fx .site-header { transition: box-shadow .3s ease; }
html.fx .site-header.fx-scrolled { box-shadow: 0 14px 28px -22px rgba(0,14,53,.6); }

/* The site's own "section arrived" fade is replaced by the reveals below */
html.fx .section-arrived { animation: none; }

/* Reveal on scroll: blocks lift up out of the page in 3D */
.fx-r { opacity: 0; transform: perspective(1000px) translate3d(0,42px,0) rotateX(14deg) scale(.985); transform-origin: 50% 100%; transition: opacity .7s ease var(--fx-d,0ms), transform 1s cubic-bezier(.16,.8,.24,1) var(--fx-d,0ms); will-change: opacity, transform; }
.fx-r.fx-soft { transform: perspective(1000px) translate3d(0,26px,0) rotateX(5deg) scale(1); }
.fx-r.fx-in { opacity: 1; transform: perspective(1000px) translate3d(0,0,0) rotateX(0deg) scale(1); }

/* The short red rule in front of each label draws itself */
.fx-r .kicker-rule { transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s cubic-bezier(.2,.7,.2,1) calc(var(--fx-d,0ms) + 260ms); }
.fx-r.fx-in .kicker-rule { transform: scaleX(1); }

/* Step numbers flip up like a split-flap board */
.process-list li.fx-r::before { opacity: 0; transform: perspective(260px) rotateX(-88deg); transform-origin: 50% 100%; transition: transform .8s cubic-bezier(.2,.8,.2,1) calc(var(--fx-d,0ms) + 200ms), opacity .35s ease calc(var(--fx-d,0ms) + 200ms); }
.process-list li.fx-r.fx-in::before { opacity: 1; transform: perspective(260px) rotateX(0deg); }

/* Parallax: the photo sits slightly deeper than its frame */
.fx-par { overflow: hidden; isolation: isolate; }
html.fx .fx-par-img { scale: 1.14; will-change: transform; transition: transform .65s cubic-bezier(.2,.68,.25,1), scale 1.4s cubic-bezier(.2,.7,.2,1); }
html.fx .fx-par-img.fx-settle { transition: transform .65s cubic-bezier(.2,.68,.25,1), scale 1.4s cubic-bezier(.2,.7,.2,1), translate 1.2s cubic-bezier(.2,.7,.2,1); }

/* Home page: the photo that used to sit straight in the dark panel gets a frame */
.invite-inner > .fx-frame { width: 100%; height: 100%; max-height: 380px; }
.invite-inner > .fx-frame > img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
@media (max-width: 600px) {
  .invite-inner > .fx-frame { height: 152px; }
  .invite-inner > .fx-frame > img { object-position: center 57%; }
}

/* Home page hero: slow push-in, then scroll and pointer depth */
html.fx .hero .gallery-photos { scale: 1.05; will-change: transform; transition: scale 1.8s cubic-bezier(.2,.7,.2,1); }
html.fx .hero .hero-copy { will-change: transform, opacity; }

/* Panels that tilt in 3D as they travel through the screen */
.fx-free { animation: none !important; }
.fx-scrub { will-change: transform; }
.fx-scrub.fx-ease { transition: transform .8s cubic-bezier(.2,.7,.2,1); }

/* Cards lean towards the pointer and catch a highlight */
.fx-tilt { transform: perspective(900px) rotateX(var(--fx-rx,0deg)) rotateY(var(--fx-ry,0deg)) scale(var(--fx-sc,1)); transition: transform .5s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.fx-tilt.fx-live { transition-duration: .14s; transition-timing-function: ease-out; }
html.fx .service-photo, html.fx .guide-card-image, html.fx .related-image { position: relative; }
html.fx .service-photo::after, html.fx .guide-card-image::after, html.fx .related-image::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--fx-gx,50%) var(--fx-gy,50%), rgba(255,255,255,.42), rgba(255,255,255,0) 58%); transition: opacity .35s ease; }
.fx-live .service-photo::after, .fx-live .guide-card-image::after, .fx-live .related-image::after { opacity: 1; }

/* The monogram turns once in 3D when a page opens, and again under the pointer */
html.fx .brand { perspective: 520px; }
html.fx .monogram { transition: rotate .9s cubic-bezier(.3,.6,.2,1); }
html.fx .monogram.fx-spin { animation: fx-spin 1.25s cubic-bezier(.45,.05,.25,1) .35s both; }
@keyframes fx-spin { from { rotate: y 0deg; } to { rotate: y 360deg; } }
@media (max-width: 760px) { html.fx .monogram { transform-origin: center; translate: -2.16px 0; } }
@media (max-width: 350px) { html.fx .monogram { translate: -3.41px 0; } }
@media (hover: hover) and (pointer: fine) {
  html.fx .brand:hover .monogram:not(.fx-spin) { rotate: y 360deg; }
}

@media print {
  .fx-r { opacity: 1 !important; transform: none !important; }
  .fx-r::before, .fx-r .kicker-rule { opacity: 1 !important; transform: none !important; }
  .fx-scrub, .fx-tilt { transform: none !important; }
  .fx-progress { display: none; }
}