/* splash-scene — animated billboard hero, scoped to #splashScene
   so it can't collide with mod-signup's form CSS. */

#splashScene {
  position: relative;
  width: 100%;
  background: #000;
  overflow: hidden;
}

#splashScene .splash-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 1672/941;
  overflow: hidden;
  background: #000;
}

#splashScene .layer {
  position: absolute;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

#splashScene .layer.icon {
  left: 0; top: 0; width: 53.83%; height: 100%;
  /* contain (not cover) so resizing the layer via pen tool scales
     the image down without cropping. cover would lop off the right
     side of the gamoid icon when width shrinks. */
  object-fit: contain;
  object-position: left center;
  opacity: 0;
  transform: translateX(-7%);
  transition: opacity 900ms ease, transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 1;
}

#splashScene .layer.billboard {
  right: 0; top: 0; width: 68.78%; height: 100%;
  object-fit: contain;
  object-position: right center;
  opacity: 0;
  transform: translateX(7%);
  transition: opacity 700ms ease, transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 3;
}
#splashScene .splash-scene.intro-in .layer.billboard { opacity: 1; transform: translateX(0); }
#splashScene .splash-scene.intro-in .layer.icon       { opacity: 1; transform: translateX(0); }

#splashScene .hit.hit-billboard { right: 0; top: 0; width: 68.78%; height: 55%; z-index: 4; }

#splashScene .layer.gamoid {
  left: 52%; top: -16%; width: 38%;
  opacity: 0;
  filter: drop-shadow(0 0 0 rgba(255, 40, 80, 0));
  transform: rotate(-2deg);
  transition: opacity 800ms ease, filter 800ms ease;
  z-index: 2;
}
#splashScene .splash-scene.gamoid-docked .layer.gamoid {
  opacity: 0.8;
  filter: drop-shadow(0 0 18px rgba(255, 40, 80, 0.5));
}

@keyframes splash-gamoid-flash {
  0%   { filter: brightness(1)    saturate(1)   drop-shadow(0 0 18px rgba(255, 40, 80, 0.5)); }
  18%  { filter: brightness(1.55) saturate(1.4) drop-shadow(0 0 34px rgba(255, 40, 80, 0.95)); }
  55%  { filter: brightness(1.2)  saturate(1.15) drop-shadow(0 0 22px rgba(255, 40, 80, 0.7)); }
  100% { filter: brightness(1)    saturate(1)   drop-shadow(0 0 18px rgba(255, 40, 80, 0.5)); }
}
#splashScene .layer.gamoid.flash { animation: splash-gamoid-flash 750ms ease-out; }

/* Phone: 40% pixel pulse + a TIGHT white drop-shadow that hugs the
   alpha silhouette (2-4px radii — not a wide background halo). The
   tight shadow reads as the artwork edge lighting up; brightness/
   saturate/contrast pumps the pixel content inside. */
@keyframes splash-phone-flash {
  0%   { filter: brightness(1)    saturate(1)    contrast(1)
                 drop-shadow(0 0 0 transparent); }
  16%  { filter: brightness(1.36) saturate(1.28) contrast(1.06)
                 drop-shadow(0 0 2px rgba(255,255,255,0.9))
                 drop-shadow(0 0 5px rgba(255,255,255,0.6)); }
  45%  { filter: brightness(1.14) saturate(1.11) contrast(1.02)
                 drop-shadow(0 0 1px rgba(255,255,255,0.6))
                 drop-shadow(0 0 3px rgba(255,255,255,0.35)); }
  100% { filter: brightness(1)    saturate(1)    contrast(1)
                 drop-shadow(0 0 0 transparent); }
}
/* Text: even tighter glow — the billboard text reads as a quick
   edge-shimmer. */
@keyframes splash-text-flash {
  0%   { filter: brightness(1)    saturate(1)    contrast(1)
                 drop-shadow(0 0 0 transparent); }
  18%  { filter: brightness(1.15) saturate(1.1)  contrast(1.02)
                 drop-shadow(0 0 1px rgba(255,255,255,0.8))
                 drop-shadow(0 0 3px rgba(255,255,255,0.4)); }
  50%  { filter: brightness(1.07) saturate(1.05) contrast(1.01)
                 drop-shadow(0 0 1px rgba(255,255,255,0.4)); }
  100% { filter: brightness(1)    saturate(1)    contrast(1)
                 drop-shadow(0 0 0 transparent); }
}

#splashScene .layer.phone {
  left: 35.52%; top: 14%; width: 12.96%;
  opacity: 0;
  transition: opacity 200ms ease;
  z-index: 4;
}
#splashScene .layer.phone.in {
  opacity: 1;
  transition: opacity 1200ms ease;
  animation: splash-phone-flash 800ms ease-out;
}

#splashScene .layer.text {
  left: 56.14%; top: 29%; width: 26.73%;
  opacity: 0;
  transition: opacity 200ms ease;
  z-index: 4;
}
#splashScene .layer.text.in {
  opacity: 1;
  transition: opacity 1200ms ease;
  animation: splash-text-flash 800ms ease-out;
}

@keyframes splash-neon-flash {
  0%   { filter: brightness(1)   saturate(1)   contrast(1); }
  16%  { filter: brightness(1.9) saturate(1.7) contrast(1.15); }
  45%  { filter: brightness(1.35) saturate(1.3) contrast(1.05); }
  100% { filter: brightness(1)   saturate(1)   contrast(1); }
}
#splashScene .layer.neon {
  width: 28%; top: 53.5%;
  opacity: 0;
  transition: opacity 90ms ease;
  z-index: 11;  /* above .hit-billboard (z:4) so neon clicks win on overlap */
}
/* Neon images are clickable buttons themselves — click anywhere on the
   visible graphic jumps to that state. Always enabled so unlit neons
   are still clickable as nav. cursor:pointer + pointer-events:auto. */
#splashScene .layer.neon.neon-hot {
  pointer-events: auto;
  cursor: pointer;
}
#splashScene .layer.neon.lit {
  opacity: 1;
  transition: opacity 160ms ease;
  animation: splash-neon-flash 750ms ease-out;
}
#splashScene .layer.neon-play    { left: 26%;    }
#splashScene .layer.neon-build   { left: 41%;    }
#splashScene .layer.neon-deploy  { left: 56.4%;  }
#splashScene .layer.neon-promote { left: 71.75%; }

#splashScene .hit {
  position: absolute;
  background: transparent; border: 0; padding: 0; margin: 0;
  cursor: pointer;
  top: 55%; height: 12%; width: 17.2%;
  z-index: 10;
  outline: none;
}
#splashScene .hit:focus-visible { outline: 2px solid rgba(255,255,255,0.4); outline-offset: -4px; }
#splashScene .hit-play    { left: 31.22%; }
#splashScene .hit-build   { left: 48.42%; }
#splashScene .hit-deploy  { left: 65.62%; }
#splashScene .hit-promote { left: 82.82%; }

#splashScene .splash-scene.pen-on .hit { pointer-events: none; }
#splashScene .splash-scene.pen-on .layer.neon,
#splashScene .splash-scene.pen-on .layer.phone,
#splashScene .splash-scene.pen-on .layer.text { opacity: 1 !important; }

#splashScene .pen-toggle {
  position: absolute; top: 10px; right: 10px; z-index: 200;
  background: rgba(0,0,0,0.7); color: #00e6d2;
  border: 1px solid #00e6d2;
  padding: 5px 10px;
  font-family: monospace; font-size: 12px; letter-spacing: 1px;
  cursor: pointer; border-radius: 3px;
  pointer-events: auto;
}
#splashScene .pen-toggle.on { background: #00e6d2; color: #000; }

#splashScene .pen-save {
  position: absolute; top: 10px; right: 78px; z-index: 200;
  background: rgba(0,0,0,0.7); color: #39ff7f;
  border: 1px solid #39ff7f;
  padding: 5px 10px;
  font-family: monospace; font-size: 12px;
  cursor: pointer; border-radius: 3px;
  pointer-events: auto;
  display: none;
}
#splashScene .pen-save:disabled { opacity: 0.6; cursor: wait; }

#splashScene .pen-reset {
  position: absolute; top: 10px; right: 150px; z-index: 200;
  background: rgba(0,0,0,0.7); color: #ff3997;
  border: 1px solid #ff3997;
  padding: 5px 10px;
  font-family: monospace; font-size: 12px;
  cursor: pointer; border-radius: 3px;
  pointer-events: auto;
  display: none;
}
#splashScene .splash-scene.pen-on .pen-save,
#splashScene .splash-scene.pen-on .pen-reset { display: block; }

#splashScene .splash-scene.pen-on .pen-target {
  cursor: pointer;
  pointer-events: auto !important;
}
#splashScene .splash-scene.pen-on .pen-target:hover {
  outline: 2px dashed rgba(0,230,210,0.6);
  outline-offset: 0;
}

/* Pen frame lives on document.body (not inside #splashScene) so it
   floats above the signup-app overlay's stacking context. */
.pen-frame {
  position: fixed; z-index: 9000;
  outline: 2px solid #00e6d2; outline-offset: 0;
  box-sizing: border-box; cursor: move;
  pointer-events: auto;
}
.pen-frame .pen-handle {
  position: absolute;
  width: 14px; height: 14px;
  background: #00e6d2;
  border: 2px solid #000;
  border-radius: 50%;
  pointer-events: auto;
  box-sizing: border-box;
}
.pen-frame .pen-handle-nw { left: -8px; top: -8px; cursor: nw-resize; }
.pen-frame .pen-handle-ne { right: -8px; top: -8px; cursor: ne-resize; }
.pen-frame .pen-handle-sw { left: -8px; bottom: -8px; cursor: sw-resize; }
.pen-frame .pen-handle-se { right: -8px; bottom: -8px; cursor: se-resize; }
.pen-frame .pen-handle-rot {
  left: 50%; top: -32px; margin-left: -7px;
  cursor: grab;
  background: #ff3997; border-color: #000;
}
.pen-frame .pen-handle-rot::after {
  content: '';
  position: absolute; left: 50%; top: 100%;
  width: 1px; height: 18px;
  background: #ff3997;
  transform: translateX(-50%);
}
.pen-frame .pen-readout {
  position: absolute; top: -52px; left: 0;
  background: rgba(0,0,0,0.85); color: #00e6d2;
  font-family: monospace; font-size: 11px;
  padding: 3px 7px;
  border: 1px solid #00e6d2;
  pointer-events: none;
  white-space: nowrap;
  border-radius: 2px;
}

#splashScene .pen-handle {
  position: absolute;
  width: 14px; height: 14px;
  background: #00e6d2;
  border: 2px solid #000;
  border-radius: 50%;
  pointer-events: auto;
  box-sizing: border-box;
}
#splashScene .pen-handle-nw { left: -8px; top: -8px; cursor: nw-resize; }
#splashScene .pen-handle-ne { right: -8px; top: -8px; cursor: ne-resize; }
#splashScene .pen-handle-sw { left: -8px; bottom: -8px; cursor: sw-resize; }
#splashScene .pen-handle-se { right: -8px; bottom: -8px; cursor: se-resize; }
#splashScene .pen-handle-rot {
  left: 50%; top: -32px; margin-left: -7px;
  cursor: grab;
  background: #ff3997; border-color: #000;
}
#splashScene .pen-handle-rot::after {
  content: '';
  position: absolute; left: 50%; top: 100%;
  width: 1px; height: 18px;
  background: #ff3997;
  transform: translateX(-50%);
}

#splashScene .pen-readout {
  position: absolute; top: -52px; left: 0;
  background: rgba(0,0,0,0.85); color: #00e6d2;
  font-family: monospace; font-size: 11px;
  padding: 3px 7px;
  border: 1px solid #00e6d2;
  pointer-events: none;
  white-space: nowrap;
  border-radius: 2px;
}

#splashScene .splash-missing {
  padding: 32px;
  color: #e4e4f0;
  font-family: monospace;
  line-height: 1.6;
}
#splashScene .splash-missing h2 { margin: 0 0 12px; color: #ff3997; }
#splashScene .splash-missing code { color: #00e6d2; }

/* ── Layered layout: scene behind, signup-app on top ───────────
   When the page has both #splashScene + #signup-app, position the
   scene as an absolute backdrop and let the signup-app float over
   it on the right half of the billboard. The pen tool can drag
   #signup-app around (its EDITABLE entry targets #signup-app). */
html[data-su-splash="1"] body {
  position: relative;
  min-height: 100vh;
  background: #000;
}
html[data-su-splash="1"] #splashScene {
  position: relative;
  z-index: 1;
}
html[data-su-splash="1"] #signup-app {
  position: absolute;
  left: 50%;
  top: 12%;
  width: 47%;
  z-index: 12;
  background: transparent;
  pointer-events: auto;
  /* No inner scrollbar in splash mode — let the page scroll handle it.
     The base rule sets overflow-y:auto for embedded/iframe contexts
     (where signup-app IS the scroll container); here the page is. */
  height: auto;
  overflow: visible;
  /* Hide until saved overrides have been applied, then fade in.
     Avoids the flash where signup-app paints at default CSS coords
     (left:50% top:12%) before splash-scene.js patches it to the
     saved position. */
  opacity: 0;
  transition: opacity 220ms ease;
}
html[data-su-splash="1"][data-splash-ready="1"] #signup-app { opacity: 1; }
/* Make the signup-app's outer hero invisible when we're sitting on
   top of the splash scene — the scene's GAMOID text is the hero. */
html[data-su-splash="1"] #signup-app .su-hero { display: none !important; }