/* =====================================================================
   CINEMATIC LAYER — camera / darkroom motion system
   ---------------------------------------------------------------------
   Loaded after styles.css. Everything here is decorative: it is skipped
   for visitors who prefer reduced motion, and nothing depends on it.
     1. Aperture preloader (first visit per session)
     2. Shutter page transitions
     3. Hero viewfinder HUD (brackets, autofocus, exposure readout)
     4. Light leak
     5. Split-word headline reveals
     6. Darkroom "develop" image reveal
     7. Focus-bracket hovers + focus cursor
     8. Shutter flash (lightbox)
     9. Contact-sheet film strip
    10. Frame counter
   ===================================================================== */

:root { --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --film-amber: #E2A04A; --pencil: #D2483B; }

/* ---------- 1. Aperture preloader ----------------------------------- */
/* CSS-only cover so content never flashes before JS; auto-hides as a fail-safe. */
html.first-visit::before {
  content: ""; position: fixed; inset: 0; z-index: 9998; background: #111;
  animation: fp-hide .5s ease 2.6s forwards;
}
@keyframes fp-hide { to { opacity: 0; visibility: hidden; } }

.preloader { position: fixed; inset: 0; z-index: 9999; background: #111; color: #F5F0E6; display: grid; place-items: center; transition: opacity .7s ease, visibility .7s; }
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader svg { width: min(38vw, 190px); height: auto; overflow: visible; transition: transform 1s cubic-bezier(.7,0,.2,1); }
.preloader.is-opening svg { transform: scale(9) rotate(30deg); }
.preloader .pl-meta { margin-top: 2.25rem; display: flex; justify-content: space-between; gap: 2.5rem; width: min(70vw, 300px); font: 500 .65rem/1 var(--mono); letter-spacing: .28em; text-transform: uppercase; color: rgba(245,240,230,.6); transition: opacity .4s; }
.preloader.is-opening .pl-meta, .preloader.is-opening .pl-brand { opacity: 0; }
.preloader .pl-count { color: #C5A059; }
.preloader .pl-brand { position: absolute; bottom: 2.5rem; left: 0; right: 0; text-align: center; font-family: "Cormorant Garamond", serif; font-size: 1.25rem; font-style: italic; color: rgba(245,240,230,.7); transition: opacity .4s; }

/* ---------- 2. Shutter page transitions ------------------------------ */
.shutter { position: fixed; inset: 0; z-index: 9997; pointer-events: none; }
.shutter span { position: absolute; left: 0; right: 0; height: 50.5%; background: #111; transform: scaleY(0); transition: transform .5s cubic-bezier(.7,0,.25,1); }
.shutter span:first-child { top: 0; transform-origin: top; }
.shutter span:last-child  { bottom: 0; transform-origin: bottom; }
.shutter span::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgba(197,160,89,.6); }
.shutter span:first-child::after { bottom: 0; }
.shutter span:last-child::after  { top: 0; }
html.shutter-out .shutter span { transform: scaleY(1); }
/* Arriving from another page: curtains exist from the first paint (pseudo-
   elements on <html>, class set by the inline <head> script) and open in pure CSS. */
html.shutter-in::before, html.shutter-in::after {
  content: ""; position: fixed; left: 0; right: 0; height: 50.5%; z-index: 9997; background: #111; pointer-events: none;
  animation: fp-open .7s cubic-bezier(.7,0,.25,1) .08s forwards;
}
html.shutter-in::before { top: 0; transform-origin: top; border-bottom: 1px solid rgba(197,160,89,.6); }
html.shutter-in::after  { bottom: 0; transform-origin: bottom; border-top: 1px solid rgba(197,160,89,.6); }
@keyframes fp-open { from { transform: scaleY(1); } to { transform: scaleY(0); } }

/* ---------- 3. Viewfinder HUD (home hero) --------------------------- */
.vf { position: absolute; inset: 92px 16px 64px; pointer-events: none; z-index: 2; }
@media (min-width: 640px) { .vf { inset: 104px 32px 76px; } }
@media (min-width: 1024px) { .vf { inset: 108px 48px 80px; } }
.vf-c { position: absolute; width: 34px; height: 34px; border-color: rgba(245,240,230,.75); border-style: solid; border-width: 0; opacity: 0; animation: vf-in 1s cubic-bezier(.2,.7,.1,1) forwards; }
.vf-c.tl { top: 0; left: 0;  border-top-width: 1.5px; border-left-width: 1.5px; }
.vf-c.tr { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.vf-c.bl { bottom: 0; left: 0;  border-bottom-width: 1.5px; border-left-width: 1.5px; }
.vf-c.br { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
@keyframes vf-in { from { opacity: 0; transform: scale(1.6); } to { opacity: 1; transform: none; } }
.vf-c.tl, .vf-c.tr, .vf-c.bl, .vf-c.br { animation-delay: .4s; }
html.first-visit .vf-c { animation-delay: 2.4s; }

.vf-label { position: absolute; font: 500 .62rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(245,240,230,.75); }
.vf-label.tl { top: 14px; left: 48px; display: flex; align-items: center; gap: .6rem; }
.vf-rec { width: 7px; height: 7px; border-radius: 99px; background: #D2483B; animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Autofocus box */
.af { position: absolute; left: 0; top: 0; width: 86px; height: 62px; margin: -31px 0 0 -43px; z-index: 2; pointer-events: none; will-change: transform; }
.af::before, .af::after { content: ""; position: absolute; inset: 0; transition: inset .35s cubic-bezier(.2,.7,.1,1), opacity .3s; }
.af::before { /* four corner ticks */
  background:
    linear-gradient(currentColor,currentColor) top left / 14px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) top left / 1.5px 14px no-repeat,
    linear-gradient(currentColor,currentColor) top right / 14px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) top right / 1.5px 14px no-repeat,
    linear-gradient(currentColor,currentColor) bottom left / 14px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) bottom left / 1.5px 14px no-repeat,
    linear-gradient(currentColor,currentColor) bottom right / 14px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) bottom right / 1.5px 14px no-repeat;
}
.af::after { inset: 50%; margin: -2px 0 0 -2px; width: 4px; height: 4px; border-radius: 99px; background: currentColor; opacity: .8; }
.af { color: rgba(245,240,230,.85); transition: color .2s; }
.af.is-hunting::before { animation: af-hunt .5s ease-in-out infinite alternate; }
@keyframes af-hunt { from { inset: -6px; } to { inset: 4px; } }
.af.is-locked { color: #C5A059; }
.af.is-locked::before { animation: af-lock .45s cubic-bezier(.2,.7,.1,1); }
@keyframes af-lock { 0% { inset: -14px; opacity: .3; } 60% { inset: 3px; } 100% { inset: 0; } }
.af .af-tag { position: absolute; top: calc(100% + 8px); left: 0; white-space: nowrap; font: 500 .58rem/1 var(--mono); letter-spacing: .2em; opacity: 0; transition: opacity .3s; }
.af.is-locked .af-tag { opacity: 1; }

/* Bottom exposure strip */
.hud { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; border-top: 1px solid rgba(245,240,230,.14); background: linear-gradient(transparent, rgba(0,0,0,.35)); }
.hud-row { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; height: 56px; font: 500 .68rem/1 var(--mono); letter-spacing: .14em; color: rgba(245,240,230,.8); }
.hud-row b { color: #F5F0E6; font-weight: 500; }
.hud-val { display: inline-block; min-width: 3.4em; transition: color .3s; }
.hud-val.flick { color: #C5A059; }
.meter { position: relative; display: flex; align-items: flex-end; gap: 5px; height: 14px; }
.meter i { width: 1px; height: 6px; background: rgba(245,240,230,.5); }
.meter i:nth-child(3n+1) { height: 10px; }
.meter i.zero { height: 14px; background: #F5F0E6; }
.meter .needle { position: absolute; top: -9px; left: 50%; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #C5A059; margin-left: -4px; transition: transform .9s cubic-bezier(.3,1.4,.5,1); }

/* ---------- 4. Light leak ------------------------------------------- */
.light-leak { position: absolute; inset: -20%; pointer-events: none; z-index: 1; mix-blend-mode: screen; opacity: .38;
  background:
    radial-gradient(40% 35% at 85% 20%, rgba(255,140,60,.55), transparent 70%),
    radial-gradient(30% 40% at 10% 85%, rgba(197,90,60,.35), transparent 70%);
  animation: leak 14s ease-in-out infinite alternate; }
@keyframes leak { 0% { transform: translate3d(0,0,0) scale(1); opacity: .25; } 50% { opacity: .45; } 100% { transform: translate3d(-6%,4%,0) scale(1.15); opacity: .3; } }

/* ---------- 5. Split-word headline reveal --------------------------- */
.reveal.is-split { opacity: 1; transform: none; }
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .09em .14em; margin: 0 -.09em -.14em; }
.sw > span { display: inline-block; transform: translate3d(0,108%,0) rotate(5deg); transform-origin: 0 100%; transition: transform 1.15s cubic-bezier(.2,.75,.1,1); transition-delay: calc(var(--d, 0s) + var(--i) * 55ms); }
.is-visible .sw > span { transform: none; }
html.first-visit .is-split .sw > span { transition-delay: calc(2.3s + var(--i) * 70ms); }

/* ---------- 6. Darkroom "develop" reveal ---------------------------- */
/* Images surface like a print in developer: pale, grey, soft → rich colour. */
.frame img.lazy-fade { opacity: 0; filter: grayscale(1) brightness(1.75) contrast(.6) blur(5px); }
.frame img.lazy-fade.is-loaded { opacity: 1; filter: none; }
.frame img { transition: transform 1.4s cubic-bezier(.2,.7,.1,1), opacity .7s ease, filter 2.2s cubic-bezier(.3,.6,.2,1); }
.reveal-mask.reveal-mask > * { transition: clip-path 1.4s cubic-bezier(.7,0,.2,1), transform 1.4s cubic-bezier(.2,.7,.1,1), opacity .7s ease, filter 2.2s cubic-bezier(.3,.6,.2,1); }

/* ---------- 7. Focus brackets on image hover ------------------------ */
.zoom { position: relative; }
.zoom::after {
  content: ""; position: absolute; inset: 18px; pointer-events: none; z-index: 2; opacity: 0; transform: scale(1.12);
  transition: opacity .35s ease, transform .55s cubic-bezier(.2,.7,.1,1);
  --c: rgba(245,240,230,.95);
  background:
    linear-gradient(var(--c),var(--c)) top left / 22px 1.5px no-repeat,
    linear-gradient(var(--c),var(--c)) top left / 1.5px 22px no-repeat,
    linear-gradient(var(--c),var(--c)) top right / 22px 1.5px no-repeat,
    linear-gradient(var(--c),var(--c)) top right / 1.5px 22px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left / 22px 1.5px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left / 1.5px 22px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right / 22px 1.5px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right / 1.5px 22px no-repeat;
}
.zoom:hover::after, .zoom:focus-visible::after { opacity: 1; transform: none; }
@media (hover: none) { .zoom::after { display: none; } }

/* Focus cursor: the ring becomes a framing reticle over images */
.cursor-ring.is-focus {
  width: 92px; height: 66px; margin: -33px 0 0 -46px; border-radius: 0; border-color: transparent; opacity: 1;
  background:
    linear-gradient(#F5F0E6,#F5F0E6) top left / 14px 1px no-repeat,
    linear-gradient(#F5F0E6,#F5F0E6) top left / 1px 14px no-repeat,
    linear-gradient(#F5F0E6,#F5F0E6) top right / 14px 1px no-repeat,
    linear-gradient(#F5F0E6,#F5F0E6) top right / 1px 14px no-repeat,
    linear-gradient(#F5F0E6,#F5F0E6) bottom left / 14px 1px no-repeat,
    linear-gradient(#F5F0E6,#F5F0E6) bottom left / 1px 14px no-repeat,
    linear-gradient(#F5F0E6,#F5F0E6) bottom right / 14px 1px no-repeat,
    linear-gradient(#F5F0E6,#F5F0E6) bottom right / 1px 14px no-repeat;
}
.cursor-ring.is-focus::after { content: attr(data-label); position: absolute; inset: 0; display: grid; place-items: center; font: 500 .55rem/1 var(--mono); letter-spacing: .28em; text-transform: uppercase; color: #F5F0E6; animation: blink .9s steps(2) 2; }
.cursor-dot.is-focus { opacity: 0; }

/* ---------- 8. Shutter flash --------------------------------------- */
.flash { position: fixed; inset: 0; z-index: 85; background: #fff; opacity: 0; pointer-events: none; }
.flash.fire { animation: flash .55s ease-out; }
@keyframes flash { 0% { opacity: 0; } 8% { opacity: .85; } 100% { opacity: 0; } }

/* ---------- 9. Contact-sheet film strip ----------------------------- */
.film-pin { position: relative; height: 320vh; }
.film-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.film-strip { position: relative; background: #0c0c0b; padding: 46px 0; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); transform: rotate(-1.2deg); }
.film-strip::before, .film-strip::after { /* sprocket holes */
  content: ""; position: absolute; left: 0; right: 0; height: 11px;
  background-image: linear-gradient(90deg, rgba(245,240,230,.88) 0 13px, transparent 13px);
  background-size: 28px 100%; background-repeat: repeat-x;
  -webkit-mask: linear-gradient(#000,#000); mask: linear-gradient(#000,#000);
  border-radius: 2px;
}
.film-strip::before { top: 11px; }
.film-strip::after  { bottom: 11px; }
.film-track { display: flex; gap: 14px; padding: 0 6vw; will-change: transform; }
.film-frame { position: relative; flex: 0 0 auto; width: clamp(240px, 36vw, 560px); aspect-ratio: 3 / 2; display: block; }
.film-frame .frame { position: absolute; inset: 0; border-radius: 3px; }
.film-frame .frame img { transform: scale(1.15); transition: opacity .7s ease, filter 2.2s cubic-bezier(.3,.6,.2,1); }
.film-no { position: absolute; top: -18px; left: 4px; font: 600 .62rem/1 var(--mono); letter-spacing: .18em; color: var(--film-amber); opacity: .9; }
.film-no.b { left: auto; right: 4px; }
/* Grease-pencil selection mark */
.pencil { position: absolute; inset: -16px -20px; z-index: 3; pointer-events: none; overflow: visible; }
.pencil path { fill: none; stroke: var(--pencil); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 1600; stroke-dashoffset: 1600; transition: stroke-dashoffset 1.6s cubic-bezier(.6,.1,.3,1) .3s; }
.film-frame.is-picked .pencil path { stroke-dashoffset: 0; }
.pencil-note { position: absolute; right: 0; bottom: -96px; z-index: 3; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 1.6rem; color: var(--pencil); transform: rotate(-6deg); opacity: 0; transition: opacity .6s 1.6s; }
.film-frame.is-picked .pencil-note { opacity: 1; }
.film-progress { height: 1px; background: rgb(var(--line) / .14); }
.film-progress span { display: block; height: 100%; width: 100%; background: #C5A059; transform-origin: left; transform: scaleX(0); }

@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  .film-pin { height: auto; }
  .film-sticky { position: static; height: auto; padding: 6rem 0; }
  .film-strip { transform: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .film-strip::-webkit-scrollbar { display: none; }
  .film-strip::before, .film-strip::after { width: 400%; }
  .film-track { padding: 0 16px; width: max-content; }
  .film-frame { width: 78vw; scroll-snap-align: center; }
  .film-progress { display: none; }
}

/* ---------- 10. Frame counter -------------------------------------- */
.frame-counter { position: fixed; left: 24px; bottom: 22px; z-index: 40; display: none; align-items: center; gap: .9rem; padding: .6rem .95rem; border-radius: 999px; font: 500 .62rem/1 var(--mono); letter-spacing: .2em; color: rgb(var(--ink) / .8); opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; }
.frame-counter.is-on { opacity: 1; transform: none; }
.frame-counter b { color: rgb(var(--accent)); font-weight: 600; display: inline-block; min-width: 1.6em; }
.frame-counter .bar { position: relative; width: 54px; height: 1px; background: rgb(var(--ink) / .2); }
.frame-counter .bar i { position: absolute; inset: 0; background: rgb(var(--accent)); transform-origin: left; transform: scaleX(0); }
@media (min-width: 1024px) and (hover: hover) { .frame-counter { display: flex; } }

/* ---------- Reduced motion: switch the whole layer off -------------- */
@media (prefers-reduced-motion: reduce) {
  html.first-visit::before, .preloader, .shutter, .light-leak, .af, .flash { display: none !important; }
  .sw > span { transform: none !important; }
  .vf-c { opacity: 1; animation: none; }
}