/* ==========================================================================
   BEL-AIR public site (Mockup 02) — MOTION SYSTEM (cinematic photography direction)
   Level 1 ambient: photographs drift slowly (a camera on a dolly), the
   light washes breathe, the hero frames dissolve into one another, the map
   route carries a point of light, service glyphs breathe one at a time.
   Level 2 scroll: headlines mask in, photographs reveal, numbers count,
   the wipe moves with the page, the day's photographs change by scroll.
   Level 3 interaction: panels open, hover zooms, the lightbox, the map.
   Gates: html.motion (not reduced-motion) · .is-live (section on screen) ·
   html.motion-lite (phones / under 40 fps). Transform and opacity only.
   ========================================================================== */

/* ---- ambient --------------------------------------------------------- */
@keyframes drift-photo { from { transform: scale(1.03) translate(0, 0); } to { transform: scale(1.07) translate(-1.4%, -.9%); } }
@keyframes drift-photo-r { from { transform: scale(1.03) translate(0, 0); } to { transform: scale(1.07) translate(1.4%, -.6%); } }
html.motion .is-live .photo--drift img { animation: drift-photo var(--kd, 36s) ease-in-out var(--ko, 0s) infinite alternate; }
html.motion .is-live .photo--drift-r img { animation: drift-photo-r var(--kd, 40s) ease-in-out var(--ko, 0s) infinite alternate; }
html.motion .is-live .thumb img { animation: drift-photo var(--kd, 30s) ease-in-out var(--ko, 0s) infinite alternate; }
.meet__words li:nth-child(3) .thumb img { --ko: -8s; } .meet__words li:nth-child(4) .thumb img { --ko: -16s; } .meet__words li:nth-child(5) .thumb img { --ko: -24s; }

@keyframes kb { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.13) translate(-1.6%, -1%); } }
html.motion .hero__frames img.is-on { animation: kb 16s linear forwards; }

@keyframes glow-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(var(--gx, 6vw), var(--gy, -4vw)) scale(1.08); } }
html.motion .is-live .glow { animation: glow-drift var(--d, 24s) ease-in-out var(--dl, 0s) infinite alternate; }
html.motion .hero .glow { animation: glow-drift var(--d, 24s) ease-in-out var(--dl, 0s) infinite alternate; }

@keyframes pano { from { transform: translateX(0); } to { transform: translateX(-9%); } }
html.motion .glance.is-live .glance__pano img { animation: pano 60s linear infinite alternate; }

@keyframes green-bg { from { transform: scale(1) translateY(0); } to { transform: scale(1.06) translateY(-2%); } }
html.motion .green.is-live .green__bg img { animation: green-bg 48s ease-in-out infinite alternate; }

html.motion .is-live .panel img { animation: drift-photo 44s ease-in-out var(--ko, 0s) infinite alternate; }
.panel:nth-child(2) img { --ko: -14s; } .panel:nth-child(3) img { --ko: -28s; }

html.motion .day.is-live .day__frames img.is-on { animation: drift-photo 30s ease-in-out infinite alternate; }
html.motion .afterdark.is-live .afterdark__bg img { animation: drift-photo-r 50s ease-in-out infinite alternate; }
html.motion .cta.is-live > img { animation: drift-photo 46s ease-in-out infinite alternate; }

.route { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease-soft) .2s; }
.is-live .route { stroke-dashoffset: 0; }
html.motion .is-live .pin { animation: breathe 4.5s ease-in-out var(--dl, 0s) infinite; transform-origin: 50% 50%; transform-box: fill-box; }
@keyframes breathe { 0%, 72%, 100% { transform: scale(1); } 82% { transform: scale(1.25); } }

.svc .ico { transform-origin: 50% 50%; }
html.motion .is-live .svc .ico { animation: svc-breathe 12s ease-in-out infinite; animation-delay: calc(var(--n, 0) * 2s); }
.svc:nth-child(2) { --n: 1; } .svc:nth-child(3) { --n: 2; } .svc:nth-child(4) { --n: 3; } .svc:nth-child(5) { --n: 4; } .svc:nth-child(6) { --n: 5; }
@keyframes svc-breathe { 0%, 100% { transform: scale(1); } 3% { transform: scale(1.1); } 6% { transform: scale(1); } }

/* ---- scroll ---------------------------------------------------------- */
.reveal { transition: opacity var(--d-reveal) var(--ease-premium), transform var(--d-reveal) var(--ease-premium); transition-delay: var(--delay, 0ms); }
/* hidden only once scripts run (html.js, set in <head>): without them, or if they fail, everything shows */
.js .reveal:not(.in-view) { opacity: 0; transform: translateY(18px); }
.reveal--mask { clip-path: inset(0 0 0 0); opacity: 1; transform: none; transition: clip-path 1s var(--ease-soft); transition-delay: var(--delay, 0ms); }
.js .reveal--mask:not(.in-view) { clip-path: inset(0 100% 0 0); }
.meet__words li.is-live .reveal--mask { clip-path: inset(0 0 0 0); }
.reveal--photo { clip-path: inset(0 0 0 0); opacity: 1; transition: clip-path 1.1s var(--ease-soft); transition-delay: var(--delay, 0ms); }
.js .reveal--photo:not(.in-view) { clip-path: inset(8% 5% 8% 5%); }
.words .w { display: inline-block; clip-path: inset(-10% 0 -12% 0); transition: clip-path .7s var(--ease-premium), transform .8s var(--ease-premium); transition-delay: calc(var(--k) * 90ms); }
.js .words:not(.in-view) .w { clip-path: inset(0 0 100% 0); transform: translateY(.3em); }

/* ---- interaction ----------------------------------------------------- */
.btn .arrow { transition: transform var(--d-micro) var(--ease-premium); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--down:hover .arrow { transform: translateY(4px); }
.photo img { transition: scale 1.2s var(--ease-soft); }
.photo--hover:hover img { scale: 1.03; }
.exp:hover .photo img, .story:hover .photo img, .rail button:hover .photo img { scale: 1.03; }

/* ---- lighter set ------------------------------------------------------ */
html.motion-lite .glow, html.motion-lite .thumb img, html.motion-lite .panel img { animation: none !important; }
html.motion-lite .glance__pano img, html.motion-lite .green__bg img { animation: none !important; }

/* ---- motion paused by the reader ("Pause motion", js/public/site.js) ---------- */
/* the same as reduced motion: nothing moves on its own, everything is shown at once */
html.still { scroll-behavior: auto; }
html.still *, html.still *::before, html.still *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
html.still .reveal:not(.in-view), html.still .reveal, html.still .reveal--mask, html.still .reveal--mask:not(.in-view), html.still .reveal--photo, html.still .reveal--photo:not(.in-view), html.still .words .w, html.still .words:not(.in-view) .w { opacity: 1; transform: none; clip-path: none; }
html.still .route { stroke-dashoffset: 0; }
html.still .hero__frames img { transform: none; }

/* ---- reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal, .reveal--mask, .reveal--photo, .words .w { opacity: 1; transform: none; clip-path: none; }
  .route { stroke-dashoffset: 0; }
  .hero__frames img { transform: none; }
}