/* ============================================================
   CAMERA INTRO — extracted verbatim from legacy build.
   Timing, easing, structure and behavior are UNCHANGED.
   UPDATE: added a transition on .intro so intro.js can crossfade
   it out smoothly instead of an abrupt display:none flash.
   ============================================================ */
:root{
  --intro-accent:#FF6B35;
  --intro-accent-light:#FFE7DB;
  --intro-charcoal:#0E0E0E;
  --intro-text:#FFFFFF;
  --intro-text-muted:rgba(255,255,255,0.5);
  --intro-text-dim:rgba(255,255,255,0.28);
  --intro-serif:'Poppins',sans-serif;
  --intro-sans:'Inter',sans-serif;
  --intro-ease:cubic-bezier(0.25,0,0,1);
}

@media (prefers-reduced-motion: reduce){
  #rdIntro *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;}
}

html, body{
  background:var(--intro-charcoal); /* prevents a white flash on first paint */
}

.intro{
  position:fixed;inset:0;z-index:900;
  background:radial-gradient(120% 100% at 50% 20%,#1c1c1c 0%,var(--intro-charcoal) 60%);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;cursor:pointer;
  transition:opacity 0.3s ease; /* backs up the JS-driven fade, avoids any hard cut */
}
.intro-cam-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
  filter:saturate(0.85) contrast(1.05) brightness(0.55);
  transform:scale(1.03);will-change:transform;
}
.intro-vignette{
  position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 220px 90px rgba(0,0,0,0.85);
  background:linear-gradient(180deg,rgba(14,14,14,0.1) 0%,rgba(14,14,14,0.55) 60%,rgba(14,14,14,0.92) 100%);
}
.intro-content{position:relative;z-index:2;text-align:center;padding:0 1.5rem}
.intro-logo{width:64px;height:64px;object-fit:contain;margin:0 auto 1.3rem;opacity:0.95}
.intro-eyebrow{
  font-family:var(--intro-sans);
  font-size:0.68rem;font-weight:400;letter-spacing:0.34em;
  text-transform:uppercase;color:var(--intro-accent);margin-bottom:1rem;
  opacity:0;animation:introFadeUp 0.9s 0.3s var(--intro-ease) forwards;
}
.intro-title{
  font-family:var(--intro-serif);font-size:clamp(2.6rem,8vw,4.6rem);font-weight:300;color:var(--intro-text);
  text-transform:uppercase;letter-spacing:0.02em;
  opacity:0;animation:introFadeUp 0.9s 0.5s var(--intro-ease) forwards;
}
.intro-title span{color:var(--intro-accent);font-style:normal}
.intro-tagline{
  font-family:var(--intro-serif);font-style:italic;font-size:0.95rem;color:var(--intro-text-muted);margin-top:1.1rem;
  opacity:0;animation:introFadeUp 0.9s 0.7s var(--intro-ease) forwards;
}
.intro-enter-btn{
  font-family:var(--intro-sans);
  margin-top:2.6rem;background:none;border:0.5px solid rgba(255,107,53,0.5);
  color:var(--intro-accent-light);font-size:0.72rem;letter-spacing:0.25em;text-transform:uppercase;
  padding:0.9rem 2.2rem;cursor:pointer;transition:background 0.3s,color 0.3s;
  opacity:0;animation:introFadeUp 0.9s 0.9s var(--intro-ease) forwards;
}
.intro-enter-btn:hover{background:rgba(255,107,53,0.1)}
.intro-enter-btn:disabled{opacity:0.5;pointer-events:none}
.intro-tap-hint{
  font-family:var(--intro-sans);
  margin-top:1.4rem;font-size:0.62rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--intro-text-dim);
  opacity:0;animation:introFadeUp 0.9s 1.05s var(--intro-ease) forwards;
}
@keyframes introFadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

.intro-glow{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(36% 30% at 50% 42%,rgba(255,107,53,0.16) 0%,rgba(255,107,53,0) 72%);
  opacity:0;mix-blend-mode:screen;transition:opacity 1.4s ease;
}
.intro-glow.show{opacity:0}

.intro-particles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.intro-particles .ip{position:absolute;bottom:-10px;width:2px;height:2px;border-radius:50%;background:rgba(255,231,219,0.5);opacity:0}

@media(prefers-reduced-motion:reduce){
  .intro-glow{transition:none}
}
@media(max-width:560px){
  .intro-logo{width:52px;height:52px}
  .intro-tap-hint{display:block}
}

#site{opacity:0;visibility:hidden}
#site{
    opacity:0;
    visibility:hidden;
}

#site.site-visible{
    opacity:1;
    visibility:visible;
    transition:opacity 1.2s ease;
}