#matrixCanvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.45;
  pointer-events: none;
}
#intro-overlay{
  position:fixed;inset:0;z-index:9999;
  background: linear-gradient(135deg, var(--midnight) 0%, var(--imperial) 40%, var(--navy2) 100%);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap: 0;
  transition: clip-path 1.2s cubic-bezier(0.76, 0, 0.24, 1), -webkit-clip-path 1.2s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.8s ease, filter 0.8s ease;
  -webkit-clip-path: circle(100% at 50% 50%);
  clip-path: circle(100% at 50% 50%);
  overflow:hidden;
  padding: 20px;
}
#intro-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}
.intro-reveal {
  -webkit-clip-path: circle(0% at 50% 50%) !important;
  clip-path: circle(0% at 50% 50%) !important;
  opacity: 0 !important;
  pointer-events: none;
}
#intro-overlay.intro-reveal > * {
  transform: scale(0.8) translateY(-30px);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.6s ease;
}
.glitch-out {
  animation: glitch-skew 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
  color: var(--lavanda) !important;
  text-shadow: -2px 2px 0px var(--neon-purple), 2px -2px 0px var(--lavanda) !important;
}
@keyframes glitch-skew {
  0% { transform: skew(0deg) translate(0); }
  20% { transform: skew(-10deg) translate(-2px, 2px); }
  40% { transform: skew(10deg) translate(2px, -2px); }
  60% { transform: skew(-5deg) translate(-2px, -2px); }
  80% { transform: skew(5deg) translate(2px, 2px); }
  100% { transform: skew(0deg) translate(0); }
}
.intro-bg-grid {
  position: absolute;
  inset: 0;
  background-image: 
    repeating-linear-gradient(45deg, rgba(188,134,255,0.02) 0px, rgba(188,134,255,0.02) 1px, transparent 1px, transparent 40px);
  z-index: 0;
  pointer-events: none;
}
#intro-overlay > * {
  z-index: 1;
}
.intro-badge {
  font-family:'Orbitron',monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.35em;
  color: var(--lavanda);
  text-transform: uppercase;
  padding: 5px 16px;
  border: 1px solid rgba(188,134,255,0.25);
  border-radius: 100px;
  background: rgba(85,4,213,0.1);
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.intro-badge::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--lavanda);
  box-shadow: 0 0 6px var(--lavanda);
  animation: ping 2s ease-in-out infinite;
}
@keyframes ping{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:0.4}}
.intro-label-top{
  font-family:'Orbitron',monospace;
  font-size:clamp(11px,1.6vw,15px);
  letter-spacing:0.2em;
  color: var(--lavanda);
  text-transform:uppercase;
  margin-top: 14px;
  margin-bottom: 6px;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 0 12px rgba(188,134,255,0.6), 0 0 30px rgba(85,4,213,0.3);
}
.terminal-prefix {
  color: var(--lavanda);
  margin-right: 8px;
  opacity: 0.8;
}
.cursor-blink {
  animation: blink 1s step-end infinite;
  color: var(--lavanda);
}
@keyframes blink { 50% { opacity: 0; } }
.intro-title-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.intro-title{
  font-family:'Orbitron',monospace;
  font-size:clamp(4.5rem,11vw,9rem);
  font-weight:900;
  letter-spacing:0.05em;
  background: linear-gradient(180deg, var(--white) 0%, var(--b-pale) 40%, var(--lavanda) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height:0.85;
  text-align: center;
  filter: drop-shadow(0 0 30px rgba(85,4,213,0.6)) drop-shadow(0 0 60px rgba(188,134,255,0.4));
  position: relative;
}
.intro-title-gold {
  font-family:'Orbitron',monospace;
  font-size:clamp(1.8rem,5.5vw,4rem);
  font-weight:700;
  letter-spacing:0.3em;
  color:transparent;
  -webkit-text-stroke: 1.5px var(--lavanda);
  margin-top: 4px;
  text-align: center;
  text-shadow: 0 0 20px rgba(188,134,255,0.4), 0 0 40px rgba(85,4,213,0.2);
}
.intro-subtitle-italic {
  font-family:'Rajdhani',sans-serif;
  font-size:clamp(0.85rem,2vw,1.3rem);
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--b-pale);
  margin-top: 16px;
  text-align: center;
  text-transform: uppercase;
  background: rgba(85,4,213,0.12);
  border: 1px solid rgba(188,134,255,0.3);
  padding: 6px 20px;
  border-radius: 4px;
  box-shadow: inset 0 0 15px rgba(85,4,213,0.15), 0 0 20px rgba(85,4,213,0.1);
}
.intro-divider {
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon-purple), var(--lavanda), var(--neon-purple), transparent);
  margin: 16px 0;
}
.intro-candidate {
  font-family:'Rajdhani',sans-serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--soft-lav);
  text-transform: uppercase;
  margin-bottom: 20px;
  text-align: center;
}
.fp-wrap{
  position:relative;
  width:200px;height:200px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom: 12px;
}
.fp-wrap::before {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  border: 1.5px dashed rgba(188,134,255,0.45);
  border-radius: 50%;
  animation: rotate-cw 25s linear infinite;
  pointer-events: none;
  z-index: 1;
}
.fp-wrap::after {
  content: '';
  position: absolute;
  width: 165px;
  height: 165px;
  border: 1px double rgba(85,4,213,0.35);
  border-radius: 50%;
  animation: rotate-ccw 15s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes rotate-cw {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes rotate-ccw {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
.fp-btn{
  position:relative;
  z-index:2;
  cursor:pointer;
  width: 145px; height: 145px;
  border-radius: 50%;
  border: 2px solid rgba(188,134,255,0.6);
  box-shadow: 
    0 0 35px rgba(85,4,213,0.4), 
    0 0 70px rgba(188,134,255,0.15),
    inset 0 0 20px rgba(85,4,213,0.2);
  background: rgba(5,20,100,0.6);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fp-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(85,4,213,0.2) 0%, rgba(188,134,255,0.08) 50%, transparent 70%);
  animation: pulse-overlay 3s ease-in-out infinite alternate;
  z-index: 1;
  pointer-events: none;
}
@keyframes pulse-overlay {
  0% { opacity: 0.3; }
  100% { opacity: 0.8; }
}
.fp-btn::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--lavanda), var(--neon-purple), var(--lavanda), transparent);
  box-shadow: 0 0 12px var(--lavanda), 0 0 6px var(--neon-purple);
  top: -10%;
  animation: scan-loop 2.5s ease-in-out infinite;
  z-index: 3;
  pointer-events: none;
}
@keyframes scan-loop {
  0% { top: -10%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 110%; opacity: 0; }
}
.fp-btn:hover{
  transform: scale(1.03);
  border-color: var(--lavanda);
  box-shadow: 
    0 0 50px rgba(85,4,213,0.6), 
    0 0 100px rgba(188,134,255,0.2),
    inset 0 0 30px rgba(85,4,213,0.3);
}
.fp-btn img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:50%;
  animation: logo-pulse-glow 3s ease-in-out infinite alternate;
  transition: transform 0.4s ease, filter 0.4s ease;
  z-index: 2;
}
@keyframes logo-pulse-glow {
  0% {
    transform: scale(0.95);
    filter: drop-shadow(0 0 8px rgba(85,4,213,0.4)) brightness(0.95);
  }
  100% {
    transform: scale(1.02);
    filter: drop-shadow(0 0 25px rgba(188,134,255,0.8)) drop-shadow(0 0 50px rgba(85,4,213,0.5)) brightness(1.1);
  }
}
.fp-btn:hover img {
  transform: scale(1.05) rotate(2deg);
  filter: drop-shadow(0 0 35px rgba(188,134,255,0.95)) drop-shadow(0 0 60px rgba(85,4,213,0.6));
  animation-play-state: paused;
}
.intro-enter-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 36px;
  background: linear-gradient(135deg, rgba(85,4,213,0.35), rgba(34,40,229,0.3));
  border: 1px solid rgba(188,134,255,0.45);
  border-radius: 40px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--white);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(85,4,213,0.2), 0 4px 16px rgba(0,0,0,0.3);
}
.intro-enter-btn:hover {
  background: linear-gradient(135deg, rgba(85,4,213,0.6), rgba(34,40,229,0.5));
  border-color: var(--lavanda);
  box-shadow: 0 0 30px rgba(85,4,213,0.4), 0 0 60px rgba(188,134,255,0.15), 0 6px 20px rgba(0,0,0,0.4);
  color: var(--white);
  transform: translateY(-2px);
}
.intro-year {
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5em;
  color: rgba(188,134,255,0.35);
  text-transform: uppercase;
  margin-top: 18px;
}
.intro-credits {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  letter-spacing: 0.15em;
  color: var(--soft-lav);
  text-transform: uppercase;
  margin-top: 22px;
  text-align: center;
  z-index: 10;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}
.intro-credits span {
  color: var(--white);
  font-weight: 600;
  text-shadow: 0 0 8px rgba(188, 134, 255, 0.7), 0 2px 4px rgba(0, 0, 0, 0.9);
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.intro-credits span:hover {
  color: var(--lavanda);
  text-shadow: 0 0 15px var(--lavanda), 0 2px 4px rgba(0, 0, 0, 0.9);
}