/* The native pointer stays intact; a single fine ring follows a mouse. */
.pointer-halo { display: none; position: fixed; top: 0; left: 0; width: 24px; height: 24px; z-index: 100; pointer-events: none; opacity: 0; transition: opacity .18s; }
.pointer-halo::before { content: ''; position: absolute; inset: 0; border: 1px solid #dbc5a56b; border-radius: 50%; transform: scale(1); transition: transform .22s ease,border-color .22s ease; }
.pointer-halo.is-visible { opacity: 1; }
.pointer-halo.is-interactive::before { transform: scale(1.25); border-color: #dbc5a594; }
.pointer-halo.is-pressed::before { transform: scale(.8); }
body.modal-open .pointer-halo { opacity: 0; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pointer-halo { display: block; }
}

/* Fixed navigation becomes quieter as the work takes over the screen. */
.rail { transform: translateY(-50%) scale(calc(1 - var(--header-scroll,0)*.09)); transform-origin: left center; }
.nav-indicator { transition: transform var(--motion-control) var(--motion-ease); }
.brand img, .rail-nav > a, .rail-bottom a { transition-duration: var(--motion-control); transition-timing-function: var(--motion-ease); }

/* One entrance rhythm: small lift, clean photographic edge, brief stagger. */
.scroll-stage, .quote-layout { --retreat-amount: .10; scale: calc(1 - var(--scroll-retreat,0)*var(--retreat-amount)); transform-origin: 50% 65%; }
.scroll-stage.is-retreating, .quote-held .quote-layout { will-change: scale; }
.quote-section.quote-held { height: var(--quote-scene-height); padding-block: 0; }
.quote-held .quote-pin { position: sticky; top: var(--quote-pin-top); padding-block: 32px; }
.motion-ready .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--motion-reveal) var(--motion-ease), transform var(--motion-reveal) var(--motion-ease); transition-delay: var(--reveal-delay,0ms); }
.motion-ready .reveal.is-visible, .motion-ready .reveal:focus-within { opacity: 1; transform: none; }
.motion-ready .photo-figure.reveal .photo-button { clip-path: inset(0 0 9% 0); transition: clip-path var(--motion-reveal) var(--motion-ease); transition-delay: var(--reveal-delay,0ms); }
.motion-ready .photo-figure.reveal.is-visible .photo-button, .motion-ready .photo-figure.reveal:focus-within .photo-button { clip-path: inset(0); }
.gallery-opening .reveal:nth-child(2), .details-grid .reveal:nth-child(2) { --reveal-delay: var(--motion-step); }
.details-grid .reveal:nth-child(3) { --reveal-delay: calc(var(--motion-step)*2); }
.about-copy.reveal, .contact-photo.reveal { --reveal-delay: var(--motion-step); }
.about-services li:nth-child(2) { --reveal-delay: 40ms; }
.about-services li:nth-child(3) { --reveal-delay: 80ms; }
.about-services li:nth-child(4) { --reveal-delay: 120ms; }
.quote-word, .photo-open { transition-duration: var(--motion-control); transition-timing-function: var(--motion-ease); }
.button, .button::after, .contact-details a { transition-duration: var(--motion-control); transition-timing-function: var(--motion-ease); }
.footer-credit strong { transition: color var(--motion-control) var(--motion-ease); }
.photo-button img { transition: transform var(--motion-reveal) var(--motion-ease); }
.about-services li > span { display: inline-block; transition: transform var(--motion-control) var(--motion-ease), color var(--motion-control) var(--motion-ease); }

/* Pointer movement stays inside the compositions; their frames and hit areas stay still. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero h1, .portrait-composition { transition: transform var(--motion-reveal) var(--motion-ease); }
  .hero h1 { transform: translate3d(calc(var(--pointer-x,0)*-3px),calc(var(--pointer-y,0)*-2px),0); }
  .portrait-composition { transform: translate3d(calc(var(--pointer-x,0)*3px),calc(var(--pointer-y,0)*2px),0); }
  .photo-button:hover img { transform: translate3d(calc(var(--pointer-x,0)*3px),calc(var(--pointer-y,0)*3px),0) scale(1.035); }
  .contact-photo img { transition: transform var(--motion-reveal) var(--motion-ease); }
  .contact-photo:hover img { transform: translate3d(calc(var(--pointer-x,0)*2px),calc(var(--pointer-y,0)*2px),0) scale(1.02); }
  [data-pointer-scene="action"] > .button-label { transform: translate3d(calc(var(--pointer-x,0)*3px),calc(var(--pointer-y,0)*2px),0); transition: transform var(--motion-control) var(--motion-ease); }
  .about-services li:hover > span { transform: translateY(3px); }
}

/* Menus and the viewer arrive with the same short, unhurried easing. */
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes panel-out { from { opacity: 1; } to { opacity: 0; } }
.lightbox[open] .lightbox-view { animation: panel-in var(--motion-control) var(--motion-ease) both; }
dialog.is-closing { animation: panel-out var(--motion-fast) ease both; }
.lightbox-stage img, .lightbox-neighbor > img, .lightbox-thumb { transition-duration: var(--motion-control); transition-timing-function: var(--motion-ease); }

@media (max-width: 700px) {
  .scroll-stage, .quote-layout { --retreat-amount: .045; }
  .motion-ready .reveal { transform: translateY(14px); }
  .motion-ready .reveal.is-visible, .motion-ready .reveal:focus-within { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-stage, .quote-layout { scale: none; will-change: auto; }
  .quote-section.quote-held { height: auto; padding-block: 64px 56px; }
  .quote-held .quote-pin { position: static; padding: 0; }
  .rail { transform: translateY(-50%); }
  .motion-ready .reveal, .hero h1, .portrait-composition { opacity: 1; transform: none; transition: none; }
  .motion-ready .photo-figure.reveal .photo-button { clip-path: none; transition: none; }
  .lightbox[open] .lightbox-view, dialog.is-closing { animation: none; }
}