/* ─────────────────────────────────────────────────────────────────────────
   easter-eggs.css — Pop-Up Signal Layer (SmakStudios v26)

   Self-contained add-on. Removing the layer = delete the two include lines
   in index.html (this file + easter-eggs.js). Nothing here touches the base
   site; every rule is scoped under .popup-* or body.eggs-on, and the whole
   layer is OFF by default (off-by-default guardrail, docs/EASTER_EGGS.md).

   Brand gold: #c8a96e (matches the radio-tower beacons + site accents).
   ───────────────────────────────────────────────────────────────────────── */

:root{ --egg-gold:#c8a96e; }

/* ── Footer trigger ──────────────────────────────────────────────────────
   The "Smak Motion Studios Inc." line IS the switch (the production-company
   stamp on the end-credits card). Styled to read as inline text, not a
   button: a whisper of an affordance on hover, lit gold when the layer is on
   (doubles as the on-air status light). Real <button> underneath for a11y. */
.popup-trigger{
  appearance:none; background:none; border:0; padding:0; margin:0;
  font:inherit; letter-spacing:inherit; color:inherit;
  cursor:pointer; transition:color .18s ease, text-shadow .18s ease;
}
.popup-trigger:hover,
.popup-trigger:focus-visible{ color:var(--egg-gold); outline:none; }
.popup-trigger:focus-visible{ text-decoration:underline; text-underline-offset:3px; }
body.eggs-on .popup-trigger{
  color:var(--egg-gold); text-shadow:0 0 16px rgba(200,169,110,.45);
}

/* ── Focus rack done with LIGHT, not a DOF blur ──────────────────────────
   When a bubble is open, the rest of the frame dims and a soft key light
   warms the active dot. Cheap (opacity + one gradient), on-brand with the
   site's cinematic grammar. Fixed, full-viewport, never intercepts clicks. */
.popup-dim{
  position:fixed; inset:0; z-index:100000; pointer-events:none;
  background:rgba(0,0,0,0); transition:background .4s ease;
}
body.popup-focused .popup-dim{ background:rgba(0,0,0,.6); }
.popup-keylight{
  position:fixed; width:44vmax; height:44vmax; border-radius:50%;
  transform:translate(-50%,-50%); z-index:100001; pointer-events:none; opacity:0;
  background:radial-gradient(circle, rgba(200,169,110,.22) 0%, rgba(200,169,110,.06) 30%, transparent 58%);
  mix-blend-mode:screen; transition:opacity .44s ease;
}
body.popup-focused .popup-keylight{ opacity:1; }

/* ── The dots (beacon-glow markers) ──────────────────────────────────────
   Each dot is a child of its scene's plate-synced overlay (e.g. the hero
   beacon layer), positioned by % of that overlay — so it rides the plate
   through every breakpoint AND the GSAP dolly for free. Hidden until the
   layer is toggled on. */
.popup-dot{
  position:absolute; width:22px; height:22px; transform:translate(-50%,-50%);
  z-index:9005; cursor:pointer; opacity:0; pointer-events:none;
  transition:opacity .6s ease;
}
/* Overlay containers are layout-only; only the dots inside take pointer events. */
.popup-cover-layer, .popup-track-layer{ pointer-events:none; }
body.eggs-on .popup-dot{ opacity:1; pointer-events:auto; }
body.popup-focused .popup-dot:not(.is-active){ opacity:.16; }
.popup-dot .glow{
  position:absolute; inset:-20px; border-radius:50%;
  background:radial-gradient(circle, rgba(200,169,110,.62) 0%, rgba(200,169,110,.18) 40%, transparent 72%);
  animation:popup-beacon 3.4s ease-in-out infinite;
}
.popup-dot .core{
  position:absolute; inset:6px; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, var(--egg-gold) 55%, rgba(200,169,110,.5) 100%);
  box-shadow:0 0 10px 2px rgba(200,169,110,.7), 0 0 2px 1px rgba(0,0,0,.4);
  animation:popup-beacon-core 3.4s ease-in-out infinite;
}
@keyframes popup-beacon{ 0%,100%{ opacity:.4; transform:scale(.85);} 50%{ opacity:.85; transform:scale(1.12);} }
@keyframes popup-beacon-core{ 0%,100%{ opacity:.7;} 50%{ opacity:1;} }
.popup-dot.is-active .glow{ opacity:1; transform:scale(1.25); animation:none; }
.popup-dot.is-active .core{ opacity:1; animation:none; box-shadow:0 0 13px 3px rgba(200,169,110,.85); }
@media (prefers-reduced-motion: reduce){
  .popup-dot .glow, .popup-dot .core{ animation:none; }
}

/* ── The loupe / viewfinder card ─────────────────────────────────────────
   Opens beside the active dot. Framed like a colourist's loupe pull. */
.popup-loupe{
  position:fixed; width:min(330px,86vw); z-index:100010;
  opacity:0; transform:translateY(8px) scale(.98); pointer-events:none;
  transition:opacity .24s ease, transform .24s ease;
  /* Brand system: Inter for body/labels (site copy font). */
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}
.popup-loupe.open{ opacity:1; transform:none; pointer-events:auto; }
.popup-loupe .card{
  position:relative; background:rgba(8,8,10,.94); border:1px solid rgba(200,169,110,.34);
  border-radius:5px; box-shadow:0 24px 70px rgba(0,0,0,.55); overflow:hidden;
}
/* Viewfinder window — only present when a bubble has media (video/map/image).
   No corner marks; the card's rounded clip frames it. */
.popup-loupe .frame{ position:relative; aspect-ratio:16/9; overflow:hidden; }
.popup-loupe .frame .popup-video{
  position:absolute; inset:0; width:100%; height:100%; border:0; z-index:1;
}
.popup-loupe .frame .popup-img{ object-fit:cover; display:block; }
.popup-loupe .body{ padding:14px 16px 16px; }
/* No-media cards: keep the title clear of the close button (top-right). */
.popup-loupe .card--nomedia h3{ padding-right:24px; }
/* Title in Cormorant Garamond to match the site's scene headings. */
.popup-loupe h3{ font-family:'Cormorant Garamond', Georgia, serif; font-weight:400;
  font-size:22px; letter-spacing:.01em; margin:0 0 6px; color:#fff; }
.popup-loupe p{ margin:0; font-size:12.5px; line-height:1.55; color:rgba(255,255,255,.7); }
.popup-loupe .more{
  display:inline-block; margin-top:13px; font-size:11px; letter-spacing:.1em;
  color:var(--egg-gold); text-decoration:none; border-bottom:1px solid rgba(200,169,110,.4); padding-bottom:2px;
}
.popup-loupe .more:hover{ border-bottom-color:var(--egg-gold); }
.popup-loupe .note{ margin-top:11px; font-size:10.5px; letter-spacing:.08em;
  color:rgba(255,255,255,.4); font-family:ui-monospace,Menlo,monospace; }
/* Inside the frame's top-right (replaces the tr viewfinder corner) so the top
   nav bar can never bury it. */
.popup-loupe .close{
  position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%; z-index:2;
  background:rgba(8,8,10,.82); border:1px solid rgba(200,169,110,.45); color:rgba(255,255,255,.7);
  font-size:13px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:color .15s, border-color .15s, background .15s;
}
.popup-loupe .close:hover{ color:var(--egg-gold); border-color:var(--egg-gold); }
/* Short viewports (landscape phones): when Safari's chrome eats the height,
   cap the card to what's actually visible and let the body scroll, instead of
   running text off the bottom. Roomy landscape (chrome hidden) is unaffected. */
@media (max-height: 480px){
  .popup-loupe{ width:min(310px, 80vw); }
  .popup-loupe .card{ display:flex; flex-direction:column; max-height:calc(100dvh - 24px); }
  .popup-loupe .frame{ flex:0 0 auto; }
  .popup-loupe .body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:10px 14px 12px; }
}

/* ── ))) SIGNAL LAYER ON flag ────────────────────────────────────────────*/
/* Bottom-left, clear of the top nav's background bar. Hidden in #eggdev so it
   doesn't collide with the dev readout, which lives in the same corner. */
.popup-modeflag{
  position:fixed; bottom:24px; left:24px; font-size:11px; letter-spacing:.15em;
  color:var(--egg-gold); opacity:0; z-index:100008; pointer-events:none; white-space:nowrap;
  font-family:'Inter', ui-sans-serif, system-ui, sans-serif;
  text-shadow:0 1px 6px rgba(0,0,0,.75);
  transition:opacity .45s, color .2s;
}
/* Clickable off-switch when the layer is on. */
body.eggs-on .popup-modeflag{ opacity:1; pointer-events:auto; cursor:pointer; }
.popup-modeflag:hover{ color:#fff; }
/* Brief "SIGNAL LAYER OFF" confirmation that stays lit, then fades. */
.popup-modeflag.popup-modeflag--offnotice{ opacity:1; pointer-events:none; }
body.eggdev .popup-modeflag{ display:none; }
/* Mobile: match the footer copy line, which drops to 8px (it looked oversized). */
@media (max-width: 767px){
  .popup-modeflag{ font-size:8px; letter-spacing:.05em; bottom:20px; left:20px; }
}

/* ── DEV / placement mode (URL #eggdev) ──────────────────────────────────
   Numbers each dot and shows its live % coordinate, so dots can be
   identified and nudged ("move 2 left"). Drag a dot to reposition; the
   readout updates live. NONE of this renders without the #eggdev flag, so
   nothing here can ever ship to production. */
.popup-dot .devbadge{
  position:absolute; left:50%; top:-22px; transform:translateX(-50%);
  display:none; white-space:nowrap; font-family:ui-monospace,Menlo,monospace;
  font-size:10px; line-height:1.3; text-align:center; color:#fff;
  background:rgba(8,8,10,.92); border:1px solid rgba(200,169,110,.5);
  border-radius:4px; padding:2px 5px; pointer-events:none;
}
.popup-dot .devbadge .num{ color:var(--egg-gold); font-weight:700; }
body.eggdev .popup-dot{ opacity:1; pointer-events:auto; cursor:grab; }
body.eggdev .popup-dot.dragging{ cursor:grabbing; }
body.eggdev .popup-dot .devbadge{ display:block; }
/* High-contrast ring so the dot is findable + grabbable on ANY plate while
   placing. Dev-only — production keeps the subtle gold glow (discovery is
   the egg). */
body.eggdev .popup-dot::before{
  content:''; position:absolute; inset:-9px; border-radius:50%;
  border:2px solid #fff; box-shadow:0 0 0 1.5px rgba(0,0,0,.65), 0 0 10px rgba(0,0,0,.5);
  pointer-events:none;
}
.popup-devbar{
  position:fixed; left:14px; bottom:14px; z-index:100020;
  font-family:ui-monospace,Menlo,monospace; font-size:11px; color:var(--egg-gold);
  background:rgba(8,8,10,.92); border:1px solid rgba(200,169,110,.4);
  border-radius:5px; padding:7px 10px; max-width:60vw; pointer-events:none; display:none;
}
body.eggdev .popup-devbar{ display:block; }