@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap");

/* enter screen */
#enter-screen {
  position:fixed;inset:0;z-index:99999;
  background:#ffffff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
#enter-label {
  font-family:'Share Tech Mono',monospace;
  color:#aaa;font-size:12px;letter-spacing:4px;margin-bottom:40px;
  animation: labelBlink 2s step-end infinite;
}
@keyframes labelBlink {
  0%,100%{opacity:1}50%{opacity:0.3}
}
#enter-btn {
  position:relative;
  background:transparent;
  border:2px solid crimson;
  touch-action:manipulation;
  color:crimson;
  font-family:'Share Tech Mono',monospace;
  font-size:20px;letter-spacing:8px;
  padding:20px 56px;
  cursor:pointer;
  text-transform:uppercase;
  overflow:hidden;
  animation: glowPulse 1.2s ease-in-out infinite alternate, glitch 4s infinite;
}
#enter-btn::before {
  content:'';
  position:absolute;top:-100%;left:0;width:100%;height:100%;
  background:linear-gradient(transparent 0%, rgba(220,20,60,0.15) 50%, transparent 100%);
  animation: scanLine 2s linear infinite;
}
#enter-btn::after {
  content:'';
  position:absolute;inset:0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(220,20,60,0.03) 2px, rgba(220,20,60,0.03) 4px);
  pointer-events:none;
}
@keyframes glowPulse {
  from { box-shadow:0 0 10px crimson, 0 0 30px #dc143c66, inset 0 0 10px #dc143c11; }
  to   { box-shadow:0 0 25px crimson, 0 0 60px #dc143caa, 0 0 100px #dc143c44, inset 0 0 20px #dc143c33; }
}
@keyframes scanLine {
  0%   { top:-100%; }
  100% { top:200%; }
}
@keyframes glitch {
  0%,90%,100%{ transform:translate(0); }
  92%         { transform:translate(-3px,1px); filter:hue-rotate(90deg); }
  94%         { transform:translate(3px,-1px); }
  96%         { transform:translate(-2px,2px); filter:hue-rotate(-90deg); }
  98%         { transform:translate(2px,-1px); }
}
#enter-btn:hover {
  background:#dc143c11;
  letter-spacing:10px;
  transition:letter-spacing 0.3s;
}
#enter-cursor {
  font-family:'Share Tech Mono',monospace;
  color:#bbb;font-size:11px;letter-spacing:2px;margin-top:24px;
  animation:labelBlink 1s step-end infinite;
}

/* pre loader */
.loader-container {
  position: fixed;
  top: 0; left: 0;
  z-index: 10000;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; width: 100%;
  transition: opacity 0.8s ease;
}
.loader-container.fade-out { opacity: 0; pointer-events: none; }

.scan-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.scan-phase.hidden { opacity: 0; pointer-events: none; }

.scan-frame {
  position: relative;
  width: min(220px, 58vw);
  height: min(220px, 58vw);
}
.scan-corner {
  position: absolute;
  width: 20px; height: 20px;
  border-color: #1a1a1a;
  border-style: solid;
}
.scan-corner.tl { top: 0;    left: 0;  border-width: 2px 0 0 2px; }
.scan-corner.tr { top: 0;    right: 0; border-width: 2px 2px 0 0; }
.scan-corner.bl { bottom: 0; left: 0;  border-width: 0 0 2px 2px; }
.scan-corner.br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

.scan-beam {
  position: absolute;
  left: 0; right: 0;
  top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #10b981 20%, #10b981 80%, transparent);
  box-shadow: 0 0 12px 4px rgba(16,185,129,0.5);
  animation: scanDown 1.6s ease-in-out 0.3s infinite;
}
@keyframes scanDown {
  0%   { top: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  85%  { opacity: 1; }
  99%  { top: 100%; opacity: 0; }
  100% { top: 0%;   opacity: 0; }
}
.scan-label {
  color: #999;
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  margin: 0;
  animation: scanLabelBlink 0.9s ease-in-out 0.3s 3 alternate;
}
@keyframes scanLabelBlink {
  from { opacity: 0.2; }
  to   { opacity: 1; }
}

.terminal-phase {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
  width: min(520px, 92vw);
}
.terminal-phase.visible { opacity: 1; pointer-events: auto; }

.terminal-window {
  border-radius: 10px;
  overflow: hidden;
  background: #080808;
  border: 1px solid rgba(0,230,118,0.18);
  box-shadow:
    0 24px 70px rgba(0,0,0,0.25),
    0 0 0 1px rgba(0,230,118,0.06),
    0 0 40px rgba(0,230,118,0.08);
  animation: termFlicker 6s linear infinite;
}
@keyframes termFlicker {
  0%,100% { opacity: 1; }
  92%     { opacity: 1; }
  93%     { opacity: 0.85; }
  94%     { opacity: 1; }
  97%     { opacity: 1; }
  98%     { opacity: 0.9; }
  99%     { opacity: 1; }
}
.terminal-titlebar {
  background: #1a1a1a;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid rgba(0,230,118,0.1);
}
.terminal-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
}
.terminal-dot.red    { background: #ff5f57; }
.terminal-dot.yellow { background: #febc2e; }
.terminal-dot.green  { background: #28c840; }
.terminal-title {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 1.1rem;
  color: rgba(0,230,118,0.45);
  margin-left: 6px;
}
.terminal-body {
  position: relative;
  padding: 18px 22px 24px;
  min-height: 180px;
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 1.25rem;
  color: #00e676;
  line-height: 1.9;
  text-shadow: 0 0 8px rgba(0,230,118,0.55);
}
.terminal-body::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.12) 3px,
    rgba(0,0,0,0.12) 4px
  );
  pointer-events: none;
}
.terminal-cursor {
  display: inline-block;
  width: 8px; height: 15px;
  background: #00e676;
  vertical-align: text-bottom;
  box-shadow: 0 0 6px rgba(0,230,118,0.8);
  animation: cursorBlink 0.75s step-end infinite;
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}