/* Zeenia Studios — camera lens intro (see intro.js). Overlay only; never styles the site itself. */
#zi {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  background: transparent;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#zi.zi-passive { pointer-events: none; }
#zi.zi-fade { transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; }

#zi .zi-focus {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  will-change: transform;
}
#zi .zi-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

#zi .zi-brand { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform, opacity; }
/* Same lockup as the site header (mark + Zeenia / STUDIOS), sitting just above the pinhole. */
#zi .zi-lock {
  position: absolute;
  left: 0;
  bottom: var(--g, 16px);
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  transform: translateX(-50%);
  line-height: 1;
}
/* max-width:none — the lockup's container is 0-wide, so the page's img{max-width:100%} would collapse it. */
#zi .zi-logo { width: 150px; max-width: none; height: auto; display: block; }
@media (min-width: 768px) {
  #zi .zi-logo { width: 200px; }
}

#zi .zi-frame {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 0.9em;
  white-space: nowrap;
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: 0.5em;
  color: rgba(198, 164, 104, 0.88);
  opacity: 0;
  will-change: transform, opacity;
}
#zi .zi-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1px solid rgba(198, 164, 104, 0.8);
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
#zi .zi-frame.zi-lock .zi-dot { background: #d9bb82; box-shadow: 0 0 6px rgba(233, 196, 128, 0.7); }

#zi .zi-leak { position: absolute; inset: -20%; opacity: 0; mix-blend-mode: screen; pointer-events: none; will-change: opacity, transform; }
#zi .zi-ghost { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); }
#zi .zi-vig {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.5) 100%);
}
#zi .zi-grain {
  position: absolute;
  inset: -64px;
  pointer-events: none;
  opacity: 0.55;
  background-size: 128px 128px;
  animation: zi-grain 0.8s steps(5) infinite;
}
#zi .zi-cover { position: absolute; inset: 0; background: #0d0b09; pointer-events: none; }

@keyframes zi-grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-37px, 21px); }
  40% { transform: translate(18px, -44px); }
  60% { transform: translate(-51px, -12px); }
  80% { transform: translate(29px, 38px); }
  100% { transform: translate(0, 0); }
}