/* EVA-style Splash: subtle cyberpunk tear + background three-digit scroller */

:root {
  /* Yellow EVA theme */
  --eva-primary: var(--primary-color, #ffdd00);
  --eva-secondary: var(--secondary-color, #ffe88a);
  --eva-accent: var(--accent-color, #ffdd00);
  --eva-bg: var(--dark-color, #0b0a10);
}

#eva-splash {
  position: fixed;
  inset: 0;
  z-index: 10000; /* above existing loading overlay */
  background: color-mix(in oklab, var(--eva-bg) 94%, black);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#eva-splash.hidden { display: none; }

#eva-splash .eva-layer { position: absolute; inset: 0; pointer-events: none; }

/* Scanlines */
#eva-splash .eva-scanlines {
  background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.35) 50%);
  background-size: 100% 4px;
  opacity: 0.15;
}

/* Subtle periodic horizontal tear (CP2077-style, very gentle) */
#eva-splash .eva-tear {
  mix-blend-mode: screen;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,221,0,0.10), rgba(255,221,0,0.10) 1px,
    transparent 1px, transparent 5px
  );
  animation: eva-tear-field 7.5s infinite;
  opacity: 0.14;
}

@keyframes eva-tear-field {
  0%,94%,100% { clip-path: inset(0 0 0 0); transform: translateX(0); }
  95% { clip-path: inset(46% 0 46% 0); transform: translateX(1px); }
  96% { clip-path: inset(52% 0 38% 0); transform: translateX(-1px); }
  97% { clip-path: inset(40% 0 52% 0); transform: translateX(0.5px); }
  98% { clip-path: inset(49% 0 45% 0); transform: translateX(-0.5px); }
}

/* Center card */
#eva-splash .eva-center {
  position: relative;
  z-index: 2;
  width: min(760px, 92vw);
  padding: 28px 24px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
  text-align: center;
}

#eva-splash .eva-title {
  font-family: 'VT323', ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: clamp(28px, 6vw, 48px);
  color: var(--eva-primary);
  text-shadow: 0 0 18px color-mix(in oklab, var(--eva-primary) 35%, transparent);
  margin: 0;
}

/* Apply the same glitch layering to the splash title, but avoid double scanlines by scoping overlay to the title area only */
#eva-splash .eva-title.glitch { position: relative; overflow: hidden; }
#eva-splash .eva-title.glitch::before { content: ''; position: absolute; inset: 0; background-size: 100% 8px; background-image: linear-gradient(0deg, rgba(255,255,255,.05) 10%, transparent 10%, transparent 50%, rgba(255,255,255,.05) 50%, rgba(255,255,255,.05) 60%, transparent 60%, transparent); animation: bg-move 2s linear infinite; pointer-events: none; opacity: .6; }
#eva-splash .eva-title .glitch-text { position: relative; display: inline-block; z-index: 2; }
#eva-splash .eva-title .glitch-text::before, 
#eva-splash .eva-title .glitch-text::after { content: attr(data-text); position: absolute; top:0; left:0; width:100%; height:100%; color: var(--eva-primary); overflow: hidden; clip: rect(0,900px,0,0); }
#eva-splash .eva-title .glitch-text::before { left: -2px; text-shadow: 2px 0 blue; animation: c2 1s infinite linear alternate-reverse; }
#eva-splash .eva-title .glitch-text::after  { left: 3px;  text-shadow: -2px 0 red; animation: c1 2s infinite linear alternate-reverse; }
#eva-splash .eva-title .glitch-text { transform: skewX(0deg) scaleY(1); animation: clock-bag-lite 4s linear infinite; }

#eva-splash .eva-sub {
  margin-top: 8px;
  color: color-mix(in oklab, var(--eva-secondary) 85%, transparent);
  opacity: 0.9;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
  font-size: clamp(11px, 2.2vw, 14px);
}

#eva-splash .eva-progress {
  margin-top: 16px;
  height: 6px;
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  overflow: hidden;
}

#eva-splash .eva-progress > .bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--eva-accent), color-mix(in oklab, var(--eva-primary) 70%, white));
  box-shadow: 0 0 12px color-mix(in oklab, var(--eva-accent) 40%, transparent);
}

#eva-splash .eva-boot {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.35em;
  color: rgba(255,255,255,0.7);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
}

/* Embedded random animation (small canvas) */
#eva-splash .eva-anim {
  width: min(180px, 38vw);
  height: min(180px, 38vw);
  margin: 12px auto 6px auto;
  border: none;
  border-radius: 0;
  background: transparent;
  position: relative;
  overflow: hidden;
}

/* Ensure no outlines/teal frames from any global styles */
#eva-splash .eva-anim,
#eva-splash .eva-anim *,
#eva-splash .eva-anim canvas {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}


/* Background three-digit preloader (barely visible) */
#eva-splash .background-preloader {
  position: absolute; top: 12vh; left: 50%; transform: translateX(-50%);
  z-index: 1; user-select: none; pointer-events: none;
  display: flex; align-items: center; justify-content: center; gap: 0;
  opacity: 0.16; /* faint but noticeable */
}

#eva-splash .preloader-digit-column { position: relative; width: min(180px, 30vw); height: min(280px, 40vh); overflow: hidden; display: flex; flex-direction: column; text-align: center; }
#eva-splash .preloader-digit-strip { position: absolute; top: 0; left: 0; width: 100%; will-change: transform; }
#eva-splash .preloader-digit { width: 100%; height: min(280px, 40vh); position: relative; display: flex; align-items: center; justify-content: center; }
#eva-splash .preloader-digit span {
  font-size: min(280px, 40vh);
  font-weight: 900; color: var(--eva-primary, #ffdd00); opacity: 0.5;
  font-family: var(--font-primary, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace);
  letter-spacing: -0.05em; line-height: 1; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  #eva-splash .eva-tear { animation: none !important; }
  #eva-splash .eva-title::before,
  #eva-splash .eva-title .glitch-text,
  #eva-splash .eva-title .glitch-text::before,
  #eva-splash .eva-title .glitch-text::after { animation: none !important; clip: auto !important; }
}

/* ================= Exit Sequence: Glitch Burst + Center-Out Wipe ================= */
/* Skip/Reduced-motion quick fade */
#eva-splash.eva-skip-exit { animation: eva-skip-fade 160ms ease-out forwards; }
@keyframes eva-skip-fade { to { opacity: 0; } }

/* Main exit: add .eva-exit to root to trigger a 500ms smooth fade */
#eva-splash.eva-exit { position: fixed; } /* ensure stable stacking */

/* Center-out transparent fade: animate a radial mask that grows from center with a soft edge */
#eva-splash { --eva-hole: 0%; --eva-feather: 10vmax; }
#eva-splash.eva-exit {
  /* Soft feathered radial mask: large transition band from hidden to shown */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--eva-hole), white calc(var(--eva-hole) + var(--eva-feather)));
  mask-image: radial-gradient(circle at 50% 50%, transparent var(--eva-hole), white calc(var(--eva-hole) + var(--eva-feather)));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* Crossfade opacity along with the mask to make the reveal even smoother */
  animation: eva-hole-mask 500ms ease-in forwards, eva-opacity 500ms ease-in forwards;
}
@keyframes eva-hole-mask { from { --eva-hole: 0%; } to { --eva-hole: 160vmax; } }
@keyframes eva-opacity { to { opacity: 0; } }

/* Reduce motion: disable the glitch and wipe */
@media (prefers-reduced-motion: reduce) {
  #eva-splash.eva-exit .eva-title::before,
  #eva-splash.eva-exit .eva-title::after,
  #eva-splash.eva-exit .eva-center,
  #eva-splash.eva-exit .eva-tear { animation: none !important; }
}