/* ============================================================
   M.S Photography by Marta — ENHANCE LAYER
   Loads after styles.css. Adds the signature moments:
   · "Developing tray" intro loader (first visit)
   · Darkroom "develop" reveals on photographs
   · The Reel — scroll-driven filmstrip
   · Premium blur-in entrances + small polish
   Everything degrades to fully-visible with motion disabled.
   ============================================================ */
:root{ --ease-out: cubic-bezier(.16,1,.3,1); }

/* ------------------------------------------------------------
   1 · Premium blur-in for text/content reveals (not photos)
   ------------------------------------------------------------ */
.reveal:not(.shot){
  filter:blur(6px);
  transition:opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out);
}
.reveal:not(.shot).in{ filter:blur(0); }
@media (prefers-reduced-motion:reduce){ .reveal:not(.shot){ filter:none; } }

/* ------------------------------------------------------------
   2 · Darkroom "develop" — photographs surface out of the dark
   ------------------------------------------------------------ */
/* No blur() here — animating blur on dozens of gallery images janks the scroll.
   Brightness + scale give the same darkroom "surfacing from the dark" read, cheaply. */
.shot.reveal img{
  filter:brightness(.26) contrast(1.22) saturate(.68);
  transform:scale(1.04);
  transition:filter 1.1s var(--ease-out), transform 1.3s var(--ease-out);
}
.shot.reveal.in img{ filter:contrast(1.02) saturate(1.01); transform:none; }
.shot.reveal.in:hover img{ transform:scale(1.05); }
@media (prefers-reduced-motion:reduce){
  .shot.reveal img{ filter:contrast(1.02) saturate(1.01); transform:none; transition:none; }
}

/* ------------------------------------------------------------
   3 · Developing-tray loader (index only, first visit per session)
   ------------------------------------------------------------ */
html.is-loading, html.is-loading body{ overflow:hidden; height:100%; }
.loader{
  position:fixed; inset:0; z-index:9000; background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.9rem;
  animation:loaderOut .9s var(--ease-out) 2.35s forwards;
}
html.loader-skip .loader{ display:none !important; }
@media (prefers-reduced-motion:reduce){ .loader{ display:none !important; } }
.loader__sheet{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  width:min(90vw,660px);
}
@media (max-width:560px){ .loader__sheet{ grid-template-columns:repeat(3,1fr); width:92vw; } }
/* square contact-sheet cells, cover fill (Dylan's preference); square crops
   less than the original 3/4 tiles, so more of each frame still shows */
.loader__frame{ position:relative; overflow:hidden; aspect-ratio:1/1; background:var(--char); }
.loader__frame img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.02) blur(11px); opacity:.12; transform:scale(1.08);
  animation:develop .95s var(--ease-out) forwards;
  animation-delay:calc(var(--i) * .07s);
}
.loader__brand{ display:flex; flex-direction:column; align-items:center; gap:.85rem; }
.loader__brand img{ height:42px; width:auto; opacity:0; animation:fadeUp .8s var(--ease-out) .55s forwards; }
.loader__cap{
  font-size:.58rem; letter-spacing:.36em; text-transform:uppercase; color:var(--smoke);
  opacity:0; animation:fadeUp .8s var(--ease-out) .7s forwards; display:flex; align-items:center; gap:.7rem;
}
.loader__cap::before,.loader__cap::after{ content:""; width:22px; height:1px; background:var(--gold); opacity:.6; }
@keyframes develop{ to{ filter:brightness(1) blur(0); opacity:1; transform:none; } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes loaderOut{ to{ transform:translateY(-101%); visibility:hidden; } }
.loader-hidden{ display:none !important; }

/* Hero blooms in once (paired with the loader's exit) */
.hero__inner .reveal{ }

/* ------------------------------------------------------------
   4 · The Reel — scroll-driven filmstrip
   Base = a horizontally scrollable strip (works with no JS).
   Enhanced (desktop + motion) = pinned parallax via GSAP.
   ------------------------------------------------------------ */
.reel{ position:relative; z-index:2; padding-block:clamp(3.2rem,7vw,6rem); overflow:hidden; }
.reel__head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap;
  gap:1rem; margin-bottom:clamp(1.8rem,3vw,2.6rem); }
.reel__head h2{ font-size:clamp(2rem,4.5vw,3.6rem); margin-top:.8rem; }
.reel__viewport{ display:flex; flex-direction:column; gap:12px; }
.reel__row{ overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.reel__row::-webkit-scrollbar{ display:none; }
.reel__track{ display:flex; gap:12px; width:max-content; padding-inline:2px; }
.reel__frame{
  position:relative; height:clamp(170px,34vh,340px); flex:none; overflow:hidden;
  background:var(--char); scroll-snap-align:center; border:1px solid var(--line-2);
}
.reel__frame img{ height:100%; width:auto; max-width:none; object-fit:cover; display:block;
  filter:contrast(1.03) saturate(1.02); transition:filter .6s var(--ease); }
.reel__frame:hover img{ filter:contrast(1.06) saturate(1.08) brightness(1.03); }
.reel__cap{ position:absolute; left:0; bottom:0; right:0; padding:.7rem .8rem .55rem;
  background:linear-gradient(0deg, rgba(11,11,12,.82), transparent);
  font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
  opacity:0; transform:translateY(6px); transition:.45s var(--ease); }
.reel__frame:hover .reel__cap{ opacity:1; transform:none; }

/* Enhanced pinned mode: the section becomes exactly one screen tall and
   vertically centres its header + three rows so all three are always visible. */
.reel.is-pinned{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(1.4rem,4vh,3rem);
}
.reel.is-pinned .reel__head{ margin-bottom:clamp(.9rem,2.4vh,1.8rem); }
.reel.is-pinned .reel__note{ margin-top:clamp(.8rem,2vh,1.4rem); }
.reel.is-pinned .reel__row{ overflow:hidden; scroll-snap-type:none; }
.reel.is-pinned .reel__track{ will-change:transform; }
.reel__note{ margin-top:1.4rem; font-size:.64rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--smoke); display:flex; align-items:center; gap:.7rem; }
.reel__note::before{ content:""; width:30px; height:1px; background:var(--gold); opacity:.6; }
.reel.is-pinned .reel__note--scroll{ display:none; }

/* ------------------------------------------------------------
   Mobile nav fix: a scrolled header carries backdrop-filter, which makes it
   the containing block for the fixed nav overlay — so the drawer only covered
   the header when the page was scrolled. Drop it while the menu is open.
   ------------------------------------------------------------ */
body.nav-open .site-header{ backdrop-filter:none; -webkit-backdrop-filter:none; background:transparent; }

/* ------------------------------------------------------------
   5 · Small polish
   ------------------------------------------------------------ */
.btn[data-magnetic]{ will-change:transform; }
/* scroll progress hairline under the header */
.scrollbar{ position:fixed; top:0; left:0; height:2px; width:100%; transform:scaleX(0);
  transform-origin:0 50%; background:linear-gradient(90deg,var(--gold),var(--gold-dim));
  z-index:65; pointer-events:none; opacity:.9; }
@media (prefers-reduced-motion:reduce){ .scrollbar{ display:none; } }

/* let the filmstrip divider feel intentional above the reel */
.filmstrip{ background-color:var(--ink); }