/* The viewfinder opening (from the website directions, 9-11 Oct 2026), set in Figtree for Snapshots. */
[data-hero]{--zoom:.6;--per:.2;--hold:.18;--n:5;position:relative;
  margin-top:calc(-1px - var(--head,0px));
  height:calc(100vh * (1 + var(--zoom) + var(--per) * var(--n) + var(--hold)));
  height:calc(100svh * (1 + var(--zoom) + var(--per) * var(--n) + var(--hold)))}
/* A mouse wheel or trackpad covers more ground than a thumb, so laptops and desktops get
   a longer run: the zoom and each photo take about a third more scrolling. */
@media (hover:hover) and (pointer:fine){[data-hero]{--zoom:.8;--per:.26;--hold:.22}}
.hero-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--hero-bg)}
/* No fill colour behind the photos. A layer that is only a colour can be drawn straight away, before
   anything else on the screen and before its window shape is applied: that was the whole screen
   turning black on the way out of the camera. Each photo carries its own blurred stand-in instead. */
.hero-shots{position:absolute;inset:0;z-index:1;clip-path:inset(50% 50% 50% 50%)}
.hero-shots img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;background:50% 50%/cover no-repeat}
/* the photo showing, over the one before it (kept drawn until the next change) */
.hero-shots img.was{opacity:1;z-index:1}
.hero-shots img.on{opacity:1;z-index:2}
.hero-glass{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(128deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.08) 34%,rgba(255,255,255,0) 35%),
             radial-gradient(120% 120% at 50% 45%,rgba(0,0,0,0) 55%,rgba(10,12,20,.55) 100%)}
.hero-cam{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero-cam>*{position:absolute;left:0;top:0;display:block;transform-origin:0 0;will-change:transform;user-select:none;-webkit-user-drag:none}
.hero-cam .cam-close{opacity:0;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(transparent,#000 9%,#000 91%,transparent);
  mask-composite:intersect}
.hero-cam .cam-shadow{background:radial-gradient(50% 50% at 50% 50%,var(--cam-shadow,rgba(26,32,51,.26)),rgba(26,32,51,0) 72%)}
.hero-flash{position:absolute;inset:0;z-index:4;background:#fff;opacity:0;pointer-events:none}
.hero-flash.pop{animation:tt-flash .45s ease-out}
@keyframes tt-flash{0%{opacity:.9}100%{opacity:0}}
.hero-finder{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;color:#fff;
  font:500 14px/1.3 "Figtree","Helvetica Neue",Arial,sans-serif}
.hero-finder::before{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(rgba(8,10,18,0),rgba(8,10,18,.55))}
.hero-finder .f-frame{position:absolute;inset:max(76px,9vh) max(18px,6vw) max(22px,6vh)}
.hero-finder .f-frame i{position:absolute;width:28px;height:28px;border:2px solid rgba(255,255,255,.85)}
.hero-finder .f-frame i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
.hero-finder .f-frame i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.hero-finder .f-frame i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
.hero-finder .f-frame i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.hero-finder .f-meta{position:absolute;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.hero-finder .f-stamp{color:#FF8A2A;font-size:22px;text-shadow:0 0 6px rgba(255,120,30,.55)}
.hero-copy{position:absolute;inset:0;z-index:5}
.hero-slot{visibility:hidden;aspect-ratio:1872/1089;max-width:100%}
.hero-skip{position:absolute;z-index:6}
/* no motion: the camera sits on the page and the photos wait further down */
[data-hero].is-static{height:auto}
.is-static .hero-stage{position:relative;height:auto;min-height:100svh}
.is-static .hero-copy{position:relative}
@media (prefers-reduced-motion: reduce){.hero-flash.pop{animation:none}}