/* Styles supporting the Framer Motion layer (src/motion). Animations themselves
   live in JavaScript; this file only holds initial states and the elements
   the animations need. */

/* Initial states: applied only when the boot script enabled motion. */
html.motion [data-reveal]:not([data-revealed]),
html.motion [data-reveal-stagger]:not([data-revealed]) > *,
html.motion .lu-hero h1,
html.motion .lu-hero-copy,
html.motion .lu-actions > *,
html.motion .lu-slider-controls button,
html.motion .scroll-cue {
  opacity: 0;
}

/* Line-by-line heading reveal */
.lu-line {display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em}
.lu-line-inner {display: block}

/* Arrows move on hover, so they need a box */
.lu-arrow {display: inline-block; will-change: transform}

/* Hover underline, drawn from the left by animating --u */
.lu-link, .lu-nav a:not(:last-child), .lu-footer nav a, .crumb a, .scroll-cue {position: relative}
.lu-link::after, .lu-nav a:not(:last-child)::after, .lu-footer nav a::after, .crumb a::after, .scroll-cue::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: currentColor; transform: scaleX(var(--u, 0)); transform-origin: left center; pointer-events: none;
}
.lu-nav a:not(:last-child)::after {bottom: 4px; height: 1px; background: var(--ink)}
.lu-footer nav a::after, .crumb a::after {bottom: 8px; height: 1px}

/* Colour fills used by the hover animations */
.lu-button {--hover-bg: var(--nuit); --hover-fg: var(--blanc)}
.lu-hero .lu-button {--hover-bg: var(--sable-clair); --hover-fg: var(--ink)}
.next-steps .lu-button {--hover-bg: var(--blanc); --hover-fg: var(--ink)}
.lu-nav a:last-child {--hover-bg: var(--ink); --hover-fg: var(--blanc)}
.lu-menu {--hover-bg: var(--sable-clair)}
.lu-slider-controls button[aria-pressed=false], .lu-slider-controls .lu-pause {--hover-bg: color-mix(in srgb,var(--blanc) 30%,transparent)}
.gallery-filters button[aria-pressed=false] {--hover-bg: var(--sable)}

/* Sticky header with reading progress */
.lu-header {position: sticky; top: 0; z-index: 60}
.lu-header.is-scrolled {box-shadow: 0 10px 30px color-mix(in srgb,var(--ink) 8%,transparent)}
.lu-progress {position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left center; pointer-events: none}

/* Hero media layer: holds the slide image and the cross-fade layer */
.lu-hero-media {position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--ink)}
.lu-hero-media img {position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center}
.photo-link {position: relative}
.lu-crossfade {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover}
@media (max-width: 760px) {.lu-hero-media img {object-position: 62% center}}

/* Page transition veil */
.brand-transition {position: fixed; inset: 0; background: var(--blanc); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; overflow: hidden}
.brand-transition.active, html.lu-entering .brand-transition {visibility: visible; opacity: 1; pointer-events: auto}
.brand-transition-mark {width: 240px; height: 180px; position: relative; overflow: hidden; flex-shrink: 0}
.brand-transition-mark img {position: absolute; width: 300px; height: auto; max-width: none; left: -30px; top: -69px}

/* Image viewer */
.lu-lightbox {position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: color-mix(in srgb,var(--nuit) 94%,transparent); color: var(--blanc); overscroll-behavior: contain}
.lu-lightbox::backdrop {background: transparent}
.lb-frame {position: relative; height: 100%; display: grid; grid-template-rows: auto 1fr; gap: 12px; padding: 18px clamp(16px, 5vw, 80px) 26px}
.lb-bar {display: flex; align-items: center; justify-content: space-between; gap: 16px}
.lb-count {font-size: 14px; letter-spacing: .14em}
.lb-close {margin-left: auto; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 20px; border: 1px solid color-mix(in srgb,var(--blanc) 45%,transparent); background: transparent; color: var(--blanc); font-size: 14px; --hover-bg: var(--blanc); --hover-fg: var(--ink)}
.lb-figure {margin: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px}
.lb-figure img {max-width: 100%; max-height: calc(100svh - 170px); object-fit: contain; background: var(--blanc); touch-action: pan-y; user-select: none}
.lb-figure figcaption {font-size: 14px; color: var(--sable); text-align: center}
.lb-nav {position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; border: 1px solid color-mix(in srgb,var(--blanc) 45%,transparent); background: color-mix(in srgb,var(--nuit) 70%,transparent); color: var(--blanc); font: 26px/1 var(--serif); display: grid; place-items: center; --hover-bg: var(--blanc); --hover-fg: var(--ink)}
.lb-prev {left: clamp(8px, 2vw, 28px)}
.lb-next {right: clamp(8px, 2vw, 28px)}
@media (max-width: 760px) {.lb-nav {top: auto; bottom: 18px; margin: 0} .lb-figure img {max-height: calc(100svh - 210px)}}

/* Contact form feedback */
.field-error {color: var(--danger); font-size: 14px; min-height: 0}
[aria-invalid] {border-color: var(--danger) !important}

.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0}

/* Circles of the brand drawn once on scroll (src/motion/circles.js).
   A conic mask uncovers the border from --cercle-depart over --cercle-trace;
   the angle is animated on the circle itself, then data-cercle-trace removes
   the mask. Without motion (reduced motion, no JS) the circle is whole.
   The mask colour only carries opacity. */
@property --cercle-trace {syntax: '<angle>'; inherits: false; initial-value: 360deg}
html.motion .lu-cercle:not([data-cercle-trace])::before,
html.motion .lu-cercle-forme:not([data-cercle-trace]) {
  --cercle-trace: 0deg;
  -webkit-mask-image: conic-gradient(from var(--cercle-depart, -90deg), black var(--cercle-trace), transparent 0);
  mask-image: conic-gradient(from var(--cercle-depart, -90deg), black var(--cercle-trace), transparent 0);
}

@media (prefers-reduced-motion: reduce) {
  .brand-transition {display: none !important}
  .lu-arrow {will-change: auto}
}
.brand-transition-mark img[src$=".svg"] {position: static; width: 100%; height: 100%; object-fit: contain}