/* ============================================================
   CAMERA LAYER
   Photography-native furniture: viewfinder HUD, focus brackets,
   aperture iris, shutter-and-flash page transition, film strip.
   ============================================================ */

/* ---------------------------------------------------------------
   VIEWFINDER — overlays the hero like a camera's eyepiece
   --------------------------------------------------------------- */
.vf{
  position:absolute; inset: clamp(1rem, 3vw, 2.6rem);
  top: calc(var(--header-h) + clamp(.5rem,1.5vw,1.2rem));
  z-index:1; pointer-events:none;
  opacity:0; animation: vfIn 1.1s var(--e-out) .35s forwards;
}
@keyframes vfIn{ to{ opacity:1 } }

/* corner brackets */
.vf__c{
  position:absolute; width: clamp(20px, 2.6vw, 34px); aspect-ratio:1;
  border:1.5px solid rgba(255,255,255,.42);
}
.vf__c--tl{ top:0; left:0;  border-right:0; border-bottom:0; }
.vf__c--tr{ top:0; right:0; border-left:0;  border-bottom:0; }
.vf__c--bl{ bottom:0; left:0;  border-right:0; border-top:0; }
.vf__c--br{ bottom:0; right:0; border-left:0;  border-top:0; }

/* rule-of-thirds grid */
.vf__grid{ position:absolute; inset:0; opacity:.09; }
.vf__grid i{ position:absolute; background:#fff; }
.vf__grid i:nth-child(1){ left:33.333%; top:0; bottom:0; width:1px; }
.vf__grid i:nth-child(2){ left:66.666%; top:0; bottom:0; width:1px; }
.vf__grid i:nth-child(3){ top:33.333%; left:0; right:0; height:1px; }
.vf__grid i:nth-child(4){ top:66.666%; left:0; right:0; height:1px; }

/* centre focus reticle */
.vf__ret{
  position:absolute; left:72%; top:44%; translate:-50% -50%;
  width: clamp(34px,3.4vw,48px); aspect-ratio:1;
  border:1px solid rgba(255,255,255,.34); border-radius:2px;
  animation: retBreathe 3.6s var(--e-in-out) infinite;
}
@media (max-width:900px){ .vf__ret{ display:none; } }
.vf__ret::before,.vf__ret::after{
  content:""; position:absolute; left:50%; top:50%; background:rgba(255,255,255,.7);
  translate:-50% -50%;
}
.vf__ret::before{ width:11px; height:1px; }
.vf__ret::after { width:1px; height:11px; }
@keyframes retBreathe{
  0%,100%{ transform:scale(1);    opacity:.55 }
  50%    { transform:scale(1.14); opacity:.95 }
}

/* HUD readouts */
.vf__hud{
  position:absolute; display:flex; align-items:center; gap: clamp(.7rem,1.6vw,1.4rem);
  font-family: var(--f-mono); font-size: clamp(8px, .78vw, 10.5px);
  letter-spacing:.2em; text-transform:uppercase; color: rgba(255,255,255,.82);
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.vf__hud--top{ top: clamp(-.2rem,-.1vw,0rem); left:50%; translate:-50% -140%; }
.vf__hud--bl{ left:0; bottom:0; translate:0 190%; }
.vf__hud--br{ right:0; bottom:0; translate:0 190%; }
@media (max-width:760px){ .vf__hud--top{ display:none; } }

.vf__rec{ display:inline-flex; align-items:center; gap:.42rem; }
.vf__rec i{
  width:7px; height:7px; border-radius:50%; background: var(--th-fuchsia);
  box-shadow: 0 0 10px var(--th-fuchsia);
  animation: recBlink 1.5s steps(1) infinite;
}
@keyframes recBlink{ 0%,55%{ opacity:1 } 56%,100%{ opacity:.15 } }

.vf__bat{
  display:inline-flex; align-items:center; gap:.3rem;
}
.vf__bat b{
  display:block; width:20px; height:9px; border:1px solid currentColor; border-radius:2px;
  position:relative; font-weight:400;
}
.vf__bat b::before{
  content:""; position:absolute; inset:1.5px; right:auto; width:11px; background:var(--th-gold);
}
.vf__bat b::after{
  content:""; position:absolute; right:-3px; top:2.5px; width:2px; height:4px;
  background:currentColor; border-radius:0 1px 1px 0;
}

/* ---------------------------------------------------------------
   FOCUS BRACKETS — snap onto any .frame on hover, like AF points
   --------------------------------------------------------------- */
.frame{ --af: rgba(255,255,255,.9); }
.frame::before,
.frame::after{
  content:""; position:absolute; z-index:4; pointer-events:none;
  width: clamp(16px,2.4vw,30px); aspect-ratio:1;
  border:2px solid var(--af);
  opacity:0; transition: opacity .35s var(--e-out), transform .5s var(--e-out);
}
.frame::before{
  top: clamp(.6rem,1.4vw,1.1rem); left: clamp(.6rem,1.4vw,1.1rem);
  border-right:0; border-bottom:0; transform: translate(-9px,-9px);
}
.frame::after{
  bottom: clamp(.6rem,1.4vw,1.1rem); right: clamp(.6rem,1.4vw,1.1rem);
  border-left:0; border-top:0; transform: translate(9px,9px);
}
.frame:hover::before,
.frame:hover::after,
a:hover > .frame::before, a:hover > .frame::after,
figure:hover > .frame::before, figure:hover > .frame::after{
  opacity:1; transform: translate(0,0);
}
.frame--noaf::before,.frame--noaf::after{ display:none; }

/* AF-LOCK tag */
.af-tag{
  position:absolute; z-index:5; pointer-events:none;
  left: clamp(.6rem,1.4vw,1.1rem); bottom: clamp(.6rem,1.4vw,1.1rem);
  font-family:var(--f-mono); font-size:8.5px; letter-spacing:.22em; text-transform:uppercase;
  color:#fff; padding:.32em .6em; border-radius:3px;
  background: rgba(12,3,10,.5); border:1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  opacity:0; transform: translateY(6px);
  transition: opacity .35s var(--e-out), transform .45s var(--e-out);
}
.frame:hover .af-tag,
figure:hover .af-tag, a:hover .af-tag{ opacity:1; transform:none; }

/* ---------------------------------------------------------------
   APERTURE IRIS — preloader mark
   --------------------------------------------------------------- */
.iris{ width: clamp(84px,11vw,124px); aspect-ratio:1; position:relative; }
.iris svg{ width:100%; height:100%; overflow:visible; }
.iris .blade{
  fill: var(--accent); opacity:.9;
  transform-origin: 50% 50%;
  animation: irisOpen 2.4s var(--e-in-out) infinite alternate;
}
.iris .blade:nth-child(1){ animation-delay:0ms }
.iris .blade:nth-child(2){ animation-delay:60ms }
.iris .blade:nth-child(3){ animation-delay:120ms }
.iris .blade:nth-child(4){ animation-delay:180ms }
.iris .blade:nth-child(5){ animation-delay:240ms }
.iris .blade:nth-child(6){ animation-delay:300ms }
.iris .ring{ fill:none; stroke: var(--line-strong); stroke-width:1.4; }
@keyframes irisOpen{
  from{ transform: rotate(0deg)  scale(1);   opacity:.95 }
  to  { transform: rotate(42deg) scale(.34); opacity:.55 }
}

/* ---------------------------------------------------------------
   SHUTTER + FLASH page transition
   --------------------------------------------------------------- */
.shutter{
  position:fixed; inset:0; z-index:var(--z-overlay);
  pointer-events:none; overflow:hidden; visibility:hidden;
}
.shutter.is-on{ visibility:visible; }

.shutter__blade{
  position:absolute; left:-25%; right:-25%; height:62%;
  background: var(--bg-invert);
}
.shutter__blade--t{ top:0;    transform: translateY(-101%); }
.shutter__blade--b{ bottom:0; transform: translateY(101%); }

.shutter.is-close .shutter__blade--t{ animation: bladeDown .24s var(--e-in-out) forwards; }
.shutter.is-close .shutter__blade--b{ animation: bladeUp   .24s var(--e-in-out) forwards; }
.shutter.is-open  .shutter__blade--t{ animation: bladeUpOut .32s var(--e-in-out) forwards; }
.shutter.is-open  .shutter__blade--b{ animation: bladeDownOut .32s var(--e-in-out) forwards; }

@keyframes bladeDown   { from{ transform:translateY(-101%) } to{ transform:translateY(0) } }
@keyframes bladeUp     { from{ transform:translateY(101%) }  to{ transform:translateY(0) } }
@keyframes bladeUpOut  { from{ transform:translateY(0) } to{ transform:translateY(-101%) } }
@keyframes bladeDownOut{ from{ transform:translateY(0) } to{ transform:translateY(101%) } }

/* the flash pop */
.flash{
  position:fixed; inset:0; z-index: calc(var(--z-overlay) + 2);
  background:#fff; opacity:0; pointer-events:none;
}
.flash.is-pop{ animation: flashPop .3s ease-out; }
@keyframes flashPop{
  0%  { opacity:0 }
  8%  { opacity:.92 }
  26% { opacity:.30 }
  100%{ opacity:0 }
}

/* shutter status line */
.shutter__read{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.34em;
  text-transform:uppercase; color: var(--text-invert);
  opacity:0; white-space:nowrap;
}
.shutter.is-close .shutter__read{ animation: readIn .2s var(--e-out) .05s forwards; }
@keyframes readIn{ to{ opacity:.8 } }

/* ---------------------------------------------------------------
   RETICLE CURSOR — the ring becomes a focus box on media
   --------------------------------------------------------------- */
.cursor-ring.is-view{
  border-radius:4px;
  border-color: rgba(255,255,255,.92);
}
.cursor-ring.is-view::before,
.cursor-ring.is-view::after{
  content:""; position:absolute; left:50%; top:50%; background:rgba(255,255,255,.9);
  translate:-50% -50%;
}
.cursor-ring.is-view::before{ width:13px; height:1px; }
.cursor-ring.is-view::after { width:1px; height:13px; }
.cursor-ring.is-view .cur-label{ align-items:flex-end; padding-bottom:8px; }

/* ---------------------------------------------------------------
   EXPOSURE STRIP — decorative f-stop scale used as a section rule
   --------------------------------------------------------------- */
.fstops{
  display:flex; align-items:center; gap: clamp(.8rem,2vw,1.8rem);
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.2em;
  color: var(--text-mut); flex-wrap:wrap;
}
.fstops span{ position:relative; padding-top:.9rem; }
.fstops span::before{
  content:""; position:absolute; top:0; left:50%; width:1px; height:6px;
  background: var(--line-strong);
}
.fstops span.on{ color: var(--accent); }
.fstops span.on::before{ height:11px; background-image: var(--grad-hot); }

@media (prefers-reduced-motion: reduce){
  .vf,.vf__ret,.vf__rec i,.iris .blade{
    animation:none !important; opacity:1 !important;
  }
  .shutter,.flash{ display:none !important; }
}

/* masonry cells are the frame themselves */
.masonry__item:hover .af-tag{ opacity:1; transform:none; }
.masonry__item::before,.masonry__item::after{
  content:""; position:absolute; z-index:4; pointer-events:none;
  width:clamp(16px,2.4vw,26px); aspect-ratio:1; border:2px solid rgba(255,255,255,.9);
  opacity:0; transition:opacity .35s var(--e-out), transform .5s var(--e-out);
}
.masonry__item::before{ top:.7rem; left:.7rem; border-right:0; border-bottom:0; transform:translate(-9px,-9px); }
.masonry__item::after{ bottom:.7rem; right:.7rem; border-left:0; border-top:0; transform:translate(9px,9px); }
.masonry__item:hover::before,.masonry__item:hover::after{ opacity:1; transform:translate(0,0); }