/* ============================================================
   FRANCESCO LA ROSA — animations.css
   Shutter + flash intro
   ============================================================ */

.intro-overlay {
  position: fixed; inset: 0; z-index: 200; background: var(--near-black);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
}
.intro-overlay.running { opacity: 1; pointer-events: auto; }

.iris { width: 220px; height: 220px; border-radius: 50%; position: relative; border: 1px solid rgba(244,239,217,.35); }
.blade {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg,
    var(--flash) 0 40deg, transparent 40deg 45deg,
    var(--flash) 45deg 85deg, transparent 85deg 90deg,
    var(--flash) 90deg 130deg, transparent 130deg 135deg,
    var(--flash) 135deg 175deg, transparent 175deg 180deg,
    var(--flash) 180deg 220deg, transparent 220deg 225deg,
    var(--flash) 225deg 265deg, transparent 265deg 270deg,
    var(--flash) 270deg 310deg, transparent 310deg 315deg,
    var(--flash) 315deg 355deg, transparent 355deg 360deg);
  transform: scale(0.001);
  transition: transform 520ms cubic-bezier(.6,0,.2,1);
}
.intro-overlay.closing .blade { transform: scale(1.6); }

.intro-overlay .flash { position: absolute; inset: 0; background: var(--flash); opacity: 0; }
.intro-overlay.flashing .flash { opacity: 1; transition: opacity 90ms linear; }
.intro-overlay.fading { opacity: 0; transition: opacity 420ms ease 90ms; }

.intro-skip {
  position: absolute; bottom: 34px; right: 34px; z-index: 2;
  color: var(--flash); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid rgba(244,239,217,.4); border-radius: 999px; padding: 9px 18px;
}

@media (prefers-reduced-motion: reduce) {
  .intro-overlay { display: none !important; }
}

/* ---------- aspect-ratio guide lines (studied from figurefilm.co.uk's persistent
   labeled vertical rules — real formats relevant to a photo/video shooter) ---------- */
.aspect-lines {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  display: none;
}
.aspect-lines span {
  position: absolute; top: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center;
}
.aspect-lines span i {
  display: block; width: 1px; flex: 1; background: var(--line);
}
.aspect-lines span b {
  font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .05em;
  color: var(--stone); white-space: nowrap; padding-bottom: 10px;
}
@media (min-width: 900px) {
  .aspect-lines { display: block; }
}

/* ---------- custom cursor: soft blend-invert ring that morphs into a text label ---------- */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 300; will-change: transform; }
.cursor-dot { width: 6px; height: 6px; background: var(--ink); opacity: .9; }
.cursor-ring {
  width: 38px; height: 38px; border: 1px solid var(--ink); mix-blend-mode: difference;
  display: flex; align-items: center; justify-content: center;
  transition: width .3s var(--ease-cine), height .3s var(--ease-cine), background .3s var(--ease-cine), opacity .2s var(--ease-cine);
}
.cursor-ring.hover { width: 84px; height: 84px; background: var(--ink); }
.cursor-ring .cursor-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--near-black);
  opacity: 0; transition: opacity .2s var(--ease-cine);
}
.cursor-ring.hover .cursor-label { opacity: 1; }
body.has-cursor a, body.has-cursor button, body.has-cursor .card, body.has-cursor .brand--photo { cursor: none; }
@media (pointer: coarse), (max-width: 900px) {
  .cursor-dot, .cursor-ring { display: none !important; }
  body.has-cursor a, body.has-cursor button { cursor: auto; }
}

/* ---------- split-word title reveal ---------- */
.hero h1, .hero-mark { opacity: 0; }
.hero h1.split-ready, .hero-mark.split-ready { opacity: 1; }
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.sw-i { display: inline-block; transform: translateY(115%) rotate(3deg); opacity: 0; transition: transform .9s var(--ease), opacity .7s var(--ease); }
.split-in .sw-i { transform: translateY(0) rotate(0); opacity: 1; }

/* ---------- curtain reveal for cards & frames ---------- */
.card.img-reveal, .frame.img-reveal {
  opacity: 0; transform: scale(1.06);
  transition: opacity .9s var(--ease), transform 1.1s var(--ease), flex-grow .55s var(--ease);
}
.card.img-reveal.in, .frame.img-reveal.in { opacity: 1; transform: scale(1); }

/* ---------- iris page-wipe on internal navigation ---------- */
.pt-overlay {
  position: fixed; inset: 0; z-index: 250; background: var(--near-black);
  display: flex; align-items: center; justify-content: center;
  clip-path: circle(0% at var(--px, 50%) var(--py, 50%)); pointer-events: none;
}
.pt-overlay.covering {
  clip-path: circle(150% at var(--px, 50%) var(--py, 50%));
  transition: clip-path .6s cubic-bezier(.76,0,.24,1);
  pointer-events: auto;
}
.pt-overlay .pt-mark {
  font-family: var(--display); text-transform: uppercase; color: var(--ink); font-size: 22px;
  opacity: 0; transition: opacity .3s ease .22s;
}
.pt-overlay.covering .pt-mark { opacity: 1; }
.pt-overlay .pt-mark em { font-style: normal; color: var(--stone); margin: 0 8px; font-size: 13px; font-family: var(--mono); }

/* ---------- vignette over the whole viewport (A24-style filmic grade); grain now lives in body's own background, base.css ---------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(120% 85% at 50% 45%, transparent 55%, rgba(0,0,0,.38) 100%);
  mix-blend-mode: multiply;
}
/* warm analog grading now lives on .frame/.card directly in style.css, so their
   hover states aren't clobbered by this later-loaded stylesheet overriding filter */

/* ---------- section-title reel punch: a lighter version of the homepage
   logo's "analog reel-change" jolt (logo-header.css), reused on every
   .sec-head h2 site-wide. Piggybacks on the existing .reveal/.in system —
   .in is added exactly once by main.js's IntersectionObserver, so this plays
   once as each section title scrolls into view, no extra JS needed. ---------- */
.sec-head.reveal.in h2 {
  animation: title-punch 480ms cubic-bezier(.22,1.61,.36,1) .38s both;
  transform-origin: left bottom;
}
@keyframes title-punch {
  0%   { transform: translateX(0)     scale(1);      filter: brightness(1) contrast(1); }
  14%  { transform: translateX(-9px)  scale(1.065);   filter: brightness(1.55) contrast(1.35); }
  30%  { transform: translateX(6px)   scale(0.955);   filter: brightness(0.82) contrast(1.15); }
  48%  { transform: translateX(-4px)  scale(1.022);   filter: brightness(1.2) contrast(1.05); }
  68%  { transform: translateX(2px)   scale(0.99);    filter: brightness(0.96); }
  100% { transform: translateX(0)     scale(1);       filter: brightness(1) contrast(1); }
}

@media (prefers-reduced-motion: reduce) {
  .sw-i { transition: none !important; }
  .sec-head.reveal.in h2 { animation: none; }
}