/* ========== GLOBAL BASE ========== */
*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  color:#e3c8ff;
  background:url('images/peakpx.jpg') no-repeat center/cover fixed;
  overflow:hidden;
  position:relative;
}
body::after{
  content:'';
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  z-index:-1;
}

/* CRITICAL: Dark background fix for detail views */
body.marv-details-open,
body.marv-gallery-open {
  background: #0a0a0f !important;
  overflow: hidden;
}

body.marv-details-open::after,
body.marv-gallery-open::after {
  display: none !important;
}

.black-screen{
  position:fixed;
  inset:0;
  background:#000;
  z-index:1000;
  animation:fadeOut 1s 1s forwards;
  pointer-events:none;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
  to { opacity: 0; visibility: hidden; }
}

@keyframes fadeText {
  to { opacity: 1; }
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOutUp {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(10px); }
}

@keyframes splineFade {
  from { opacity: 0; transform: translateY(-50%) scale(.9); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}

/* ---------- HERO CONTAINER ---------- */
.container{text-align:center;padding:10vh 2rem}
h1{
  font-size:clamp(2rem,6vw,3.2rem);
  color:#fff;
  text-shadow:0 0 10px #8a2be2,0 0 20px #8a2be2;
  opacity:0;
  animation:fadeInUp 1s 2s forwards;
  margin:0 auto;
}

.flicker-text {
  animation: neonFlicker 3s ease-in-out 3.5s forwards;
}

@keyframes neonFlicker {
  0%, 5% { 
    opacity: 0; 
    text-shadow: none;
  }
  6% { 
    opacity: 1; 
    text-shadow: 0 0 5px #8a2be2, 0 0 10px #8a2be2, 0 0 15px #b084ff;
  }
  7% { 
    opacity: 0.3; 
    text-shadow: none;
  }
  8%, 12% { 
    opacity: 1; 
    text-shadow: 0 0 5px #8a2be2, 0 0 10px #8a2be2, 0 0 15px #b084ff;
  }
  13% { 
    opacity: 0.6; 
    text-shadow: 0 0 2px #8a2be2;
  }
  14%, 16% { 
    opacity: 1; 
    text-shadow: 0 0 5px #8a2be2, 0 0 10px #8a2be2, 0 0 15px #b084ff;
  }
  17% { 
    opacity: 0.4; 
    text-shadow: none;
  }
  18% { 
    opacity: 0.8; 
    text-shadow: 0 0 3px #8a2be2, 0 0 6px #8a2be2;
  }
  19%, 22% { 
    opacity: 1; 
    text-shadow: 0 0 5px #8a2be2, 0 0 10px #8a2be2, 0 0 15px #b084ff;
  }
  23% { 
    opacity: 0.7; 
    text-shadow: 0 0 2px #8a2be2;
  }
  24%, 100% { 
    opacity: 1; 
    text-shadow: 0 0 10px #8a2be2, 0 0 20px #8a2be2, 0 0 30px #b084ff, 0 0 40px #c98eff;
  }
}

.subtitle{
  font-size:1.3rem;
  margin-bottom:3rem;
  color:#fff;
  text-shadow:0 0 10px #8a2be2,0 0 20px #8a2be2;
  opacity:0;
  animation:fadeInUp 1s 2.5s forwards;
}

.buttons{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:1rem;
  opacity:0;
  animation:fadeInUp 1s 3s forwards;
}

.btn{
  background:#0b0b0f;
  border:2px solid #b084ff;
  padding:1rem 2rem;
  border-radius:12px;
  color:#e3c8ff;
  font-weight:bold;
  text-decoration:none;
  box-shadow:0 0 10px #8a2be2,inset 0 0 5px #b084ff;
  transition:.2s;
  cursor:pointer;
}

.btn:hover{
  background:#b084ff;
  color:#0b0b0f;
  transform:scale(1.05);
  box-shadow:0 0 20px #c98eff,inset 0 0 10px #fff;
}

/* ========== SPLINE ========== */
.spline-box{
  position:fixed;
  top:50%;
  right:20px;
  transform:translateY(-50%);
  width:340px;
  height:340px;
  z-index:50;
  pointer-events:none;
  opacity:0;
  animation:splineFade .5s ease-out forwards 2s;
}

.spline-box spline-viewer{width:100%;height:100%}
.spline-mask{position:absolute;bottom:0;right:0;width:70px;height:28px;background:#000}

body.SHOW-PROJECTS .spline-box,
body.SHOW-ABOUT    .spline-box,
body.SHOW-CONTACT  .spline-box{display:none}

/* Spline Warning Text */
.spline-warning {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.95);
  border: 2px solid #ff3333;
  padding: 0.6rem 1.2rem;
  color: #ffcccc;
  font-size: 0.9rem;
  font-weight: bold;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 0 5px rgba(255, 50, 50, 0.3);
  text-shadow: 0 0 2px rgba(255, 100, 100, 0.3);
  opacity: 1;
  transition: opacity 0.3s ease;
  z-index: 100;
  animation: warningPulse 2s ease-in-out infinite;
}

.spline-warning::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #ff3333;
}

.spline-warning.hidden {
  opacity: 0 !important;
  pointer-events: none;
  display: none;
}

body:not(.glitch-mode) .spline-warning {
  display: none !important;
}

@keyframes warningPulse {
  0%, 100% { 
    box-shadow: 0 0 5px rgba(255, 50, 50, 0.3);
  }
  50% { 
    box-shadow: 0 0 10px rgba(255, 50, 50, 0.5);
  }
}

/* Spline Glitch Teleport */
body.glitch-mode .spline-box.teleporting {
  animation: splineTeleport 1.2s steps(15);
  z-index: 99999 !important;
  border: 3px solid lime !important; /* DEBUG - to see if it's moving */
  background: rgba(255, 0, 0, 0.3) !important; /* DEBUG */
}

body.glitch-mode .spline-box.teleporting .spline-mask {
  display: none;
}

body.glitch-mode .spline-box.teleporting spline-viewer {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

@keyframes splineTeleport {
  0% { top: 50%; right: 20px; transform: translateY(-50%) scale(1) rotate(0deg); }
  6.67% { top: 20%; right: 60%; transform: translateY(-50%) scale(0.7) rotate(45deg); }
  13.33% { top: 70%; right: 15%; transform: translateY(-50%) scale(1.3) rotate(-90deg); }
  20% { top: 30%; right: 80%; transform: translateY(-50%) scale(0.5) rotate(180deg); }
  26.67% { top: 80%; right: 25%; transform: translateY(-50%) scale(1.5) rotate(270deg); }
  33.33% { top: 15%; right: 50%; transform: translateY(-50%) scale(0.8) rotate(-45deg); }
  40% { top: 65%; right: 10%; transform: translateY(-50%) scale(1.2) rotate(135deg); }
  46.67% { top: 25%; right: 70%; transform: translateY(-50%) scale(0.6) rotate(-180deg); }
  53.33% { top: 75%; right: 35%; transform: translateY(-50%) scale(1.4) rotate(90deg); }
  60% { top: 35%; right: 85%; transform: translateY(-50%) scale(0.7) rotate(-270deg); }
  66.67% { top: 85%; right: 15%; transform: translateY(-50%) scale(1.1) rotate(225deg); }
  73.33% { top: 10%; right: 65%; transform: translateY(-50%) scale(0.9) rotate(-315deg); }
  80% { top: 60%; right: 30%; transform: translateY(-50%) scale(1.3) rotate(120deg); }
  86.67% { top: 40%; right: 75%; transform: translateY(-50%) scale(0.6) rotate(-120deg); }
  93.33% { top: 55%; right: 25%; transform: translateY(-50%) scale(1.0) rotate(60deg); }
  100% { top: 50%; right: 20px; transform: translateY(-50%) scale(1) rotate(0deg); }
}

/* Screen Tear Effect */
.screen-tear {
  position: fixed;
  inset: 0;
  z-index: 10500;
  pointer-events: none;
  background-image: 
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 8px,
      rgba(0, 0, 0, 0.9) 8px,
      rgba(0, 0, 0, 0.9) 12px
    );
  opacity: 0;
  animation: screenTearEffect 0.5s;
}

@keyframes screenTearEffect {
  0% { 
    opacity: 0;
    transform: translateY(0) scaleY(1);
  }
  5% { 
    opacity: 1;
    transform: translateY(30px) scaleY(1.2);
  }
  15% { 
    opacity: 1;
    transform: translateY(-40px) scaleY(0.8);
  }
  25% { 
    opacity: 1;
    transform: translateY(20px) scaleY(1.3);
  }
  35% { 
    opacity: 1;
    transform: translateY(-30px) scaleY(0.7);
  }
  45% { 
    opacity: 1;
    transform: translateY(35px) scaleY(1.4);
  }
  55% { 
    opacity: 1;
    transform: translateY(-15px) scaleY(0.9);
  }
  65% { 
    opacity: 1;
    transform: translateY(10px) scaleY(1.1);
  }
  75% { 
    opacity: 0.8;
    transform: translateY(-8px) scaleY(1.05);
  }
  85% { 
    opacity: 0.4;
    transform: translateY(4px) scaleY(1.02);
  }
  100% { 
    opacity: 0;
    transform: translateY(0) scaleY(1);
  }
}

@media (max-width:600px){.spline-box{display:none;}}

/* ========== HOME VISIBILITY ========== */
.home-screen {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity 0.6s ease;
}

body.SHOW-PROJECTS .home-screen,
body.SHOW-ABOUT .home-screen,
body.SHOW-CONTACT .home-screen {
  opacity: 0;
  pointer-events: none;
}

/* ========== TRANSITION CLASSES ========== */
.hidden {display: none;}
.fade-in-up {animation: fadeInUp 0.6s ease-out forwards;}
.fade-out-up {animation: fadeOutUp 0.4s ease forwards;}
.fade-left {animation: slideOutLeft 0.4s forwards;}
.fade-in-right {animation: slideInRight 0.25s forwards;}
.fade-out-right {animation: slideOutRight 0.4s forwards;}
.fade-slide-up {animation: fadeSlideUp 0.6s ease-out forwards;}

@keyframes slideInRight {
  from {opacity: 0;transform: translateX(100%);}
  to   {opacity: 1;transform: translateX(0);}
}

@keyframes slideOutRight {
  from {opacity: 1;transform: translateX(0);}
  to   {opacity: 0;transform: translateX(120%);}
}

@keyframes slideOutLeft {
  from {opacity: 1;transform: translateX(0);}
  to   {opacity: 0;transform: translateX(-120%);}
}

/* ========== OVERLAYS ========== */
.projects-overlay,
.about-overlay,
.contact-overlay{
  position:fixed;
  inset:0;
  transform:translateY(100%);
  transition:transform .9s cubic-bezier(.25,.8,.25,1);
  overflow-y:auto;
  padding-bottom:12vh;
  background:url('images/peakpx.jpg') no-repeat center/cover fixed;
}

.projects-overlay::after,
.about-overlay::after,
.contact-overlay::after{
  content:'';
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  z-index:-1;
}

.projects-overlay {
  overflow: hidden;
}

/* ========== CONTACT OVERLAY NO SCROLL ========== */
.contact-overlay {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.contact-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  overflow: hidden;
}

body.SHOW-PROJECTS .projects-overlay,
body.SHOW-ABOUT   .about-overlay,
body.SHOW-CONTACT .contact-overlay{transform:translateY(0)}

.back-btn{
  position:absolute;
  top:2rem;
  left:2rem;
  z-index:10;
}

/* ========== SNAP SCROLL SYSTEM ========== */
.projects-container {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.project-section {
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2rem;
}

.section-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* ========== INTRO SECTION STYLING ========== */
.intro-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding-top: 8vh;
}

.intro-content {
  max-width: 800px;
  margin: 3rem auto 0;
}

.intro-content p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #e3c8ff;
  opacity: 0.9;
  margin: 0;
}

/* ========== ANIMATED SPLINE GUIDE ========== */
.spline-guide {
  position: fixed;
  width: 200px;
  height: 200px;
  z-index: 100;
  pointer-events: none;
  transition: all 1.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 0;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
}

.spline-guide.active {
  opacity: 1;
}

.spline-character {
  width: 100%;
  height: 100%;
  position: relative;
}

.spline-character spline-viewer {
  width: 100%;
  height: 100%;
}

/* ========== SPEECH BUBBLE SYSTEM ========== */
.speech-bubble {
  position: absolute;
  top: -60px;
  left: -150px;
  background: rgba(15, 5, 25, 0.95);
  border: 2px solid #b084ff;
  border-radius: 15px;
  padding: 1rem 1.5rem;
  min-width: 280px;
  max-width: 400px;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 20px rgba(176, 132, 255, 0.4);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease;
  pointer-events: auto;
}

.spline-guide.position-marv-left .speech-bubble {
  left: 220px;
  top: -30px;
}

.spline-guide.position-marv-left .speech-arrow {
  bottom: 50%;
  left: -8px;
  transform: translateY(50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #b084ff;
  border-left: none;
}

.spline-guide.position-marv-left .speech-arrow::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 2px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid rgba(15, 5, 25, 0.95);
  border-left: none;
}

.speech-bubble.show {
  opacity: 1;
  transform: translateY(0);
}

.speech-content {
  color: #e3c8ff;
  font-size: 0.95rem;
  line-height: 1.4;
  text-align: center;
}

.speech-arrow {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #b084ff;
}

.speech-arrow::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: -6px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(15, 5, 25, 0.95);
}

/* ========== GUIDE POSITIONS ========== */
.spline-guide.position-intro {
  left: 80%;
  top: 20%;
  transform: translateX(-50%);
}

.spline-guide.position-marv-right {
  left: 90%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.spline-guide.position-marv-left {
  left: 10%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.spline-guide.position-project-2 {
  left: 85%;
  top: 30%;
  transform: translateX(-50%);
}

.spline-guide.position-project-3 {
  left: 15%;
  top: 60%;
  transform: translateX(-50%);
}

.spline-guide.position-project-4 {
  left: 87%;
  top: 40%;
  transform: translateX(-50%);
}

/* ========== NEON STYLING ========== */
.neon-title,
.neon-header,
.neon-sub{
  color:#ffffff;
  text-shadow:0 0 10px #8a2be2, 0 0 22px #b084ff;
}
.neon-title{
  font-size:clamp(2.8rem,6vw,5rem);
  letter-spacing:.12em;
  margin:8vh auto 5vh;
  text-align:center;
}
.neon-header{
  font-size:clamp(2.3rem,6vw,4rem);
  margin:4vh 2rem;
  text-align:center;
}
.neon-sub{font-size:1.4rem;margin-bottom:1rem}

.projects-title{
  color:#ffffff;
  text-shadow:0 0 10px #8a2be2, 0 0 22px #b084ff;
  font-size:clamp(2.5rem,6vw,5rem);
  letter-spacing:.1em;
  text-align:center;
  margin:0 auto 3vh;
}

/* ========== PROJECT CARDS ========== */
.feature{
  width:min(90%,620px);
  margin:0 auto;
  padding:2.5rem 2rem 3.5rem;
  border:2px solid #b084ff;
  border-radius:20px;
  box-shadow:0 0 15px 2px rgba(200,150,255,.8), inset 0 0 8px rgba(176,132,255,.6);
  backdrop-filter:blur(2px);
  position:relative;
}
.feature img{
  display:block;
  max-height:300px;
  width:auto;
  margin:0 auto 1.8rem;
  object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(200,150,255,.35));
}
.feature h2{text-align:center;font-size:1.8rem;letter-spacing:.08em;margin:0 0 .3rem}
.feature p{text-align:center;font-size:1rem;opacity:.8;margin-bottom:2rem}
.cta-row{display:flex;justify-content:center;gap:1.5rem}
.cta-row .btn{flex:1 1 150px}

.card{
  padding:2.5rem 1.6rem 2rem;
  border:2px solid #b084ff;
  border-radius:18px;
  text-align:center;
  box-shadow:0 0 15px rgba(200,150,255,.8),inset 0 0 6px rgba(176,132,255,.6);
  transition:transform .25s;
}
.card:hover{transform:translateY(-6px) scale(1.02)}
.card h3{font-size:1.1rem;letter-spacing:.06em;margin-bottom:2.2rem}
.card .btn{width:100%}

.mini-gallery-btn{
  position:absolute;top:16px;right:16px;width:32px;height:32px;padding:0;
  background:none;border:none;cursor:pointer;transition:transform .25s;
}
.mini-gallery-btn img{width:100%;height:100%}
.mini-gallery-btn:hover{transform:scale(1.15)}

/* ========== MARV DETAILS ========== */
.marv-details{
  position: fixed;
  inset: 0;
  background: #0a0a0f;
  overflow-y: auto;
  padding: 2rem;
  z-index: 1000;
}

.marv-details .back-btn {
  position: sticky;
  top: 2rem;
  margin-bottom: 2rem;
}

.marv-details .neon-header {
  max-width: 900px;
  margin: 2rem auto 4rem;
}

/* ========== MARV HEADER ANIMATION ========== */
.marv-header {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.marv-par{
  max-width: 900px;
  margin: 0 auto 4rem;
  opacity:0;
  transform:translateX(50px);
  transition:opacity .6s ease,transform .6s ease;
}
.marv-par.left{transform:translateX(-50px)}
.marv-par.visible{opacity:1;transform:translateX(0)}
.marv-par table{width:100%;border-collapse:collapse;margin-top:.5rem}
.marv-par th,.marv-par td{border:1px solid #444;padding:.6rem .8rem;text-align:left}
.marv-par th{background:#1a0c28;color:#e3c8ff}

/* ========== MARV GALLERY ========== */
.marv-gallery {
  position: fixed;
  inset: 0;
  background: #0a0a0f;
  overflow-y: auto;
  padding: 2rem;
  z-index: 1000;
}

.marv-gallery .back-btn {
  position: sticky;
  top: 2rem;
  margin-bottom: 2rem;
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.5rem;
  margin:4vh 0 12vh;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.gallery-grid img{
  width:100%;
  border-radius:12px;
  border:2px solid #b084ff;
  box-shadow:0 0 10px rgba(200,150,255,.7);
  object-fit:cover;
  cursor:zoom-in;
  transition:transform .3s;
}
.gallery-grid img:hover{transform:scale(1.05)}

/* ========== IMAGE MODAL WITH LARGE PURPLE ARROWS ========== */
#img-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 11000;
  cursor: zoom-out;
  user-select: none;
}

#img-modal img {
  max-width: 70vw;
  max-height: 85vh;
  box-shadow: 0 0 10px #b084ff, 0 0 20px #b084ff, 0 0 40px #a263ff, 0 0 80px #8e3eff;
  border-radius: 8px;
  user-select: none;
  cursor: default;
}

.modal-prev,
.modal-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, rgba(15, 5, 25, 0.85), rgba(35, 15, 55, 0.85));
  border: 3px solid #b084ff;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #e3c8ff;
  font-size: 3rem;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(176, 132, 255, 0.5), inset 0 0 15px rgba(176, 132, 255, 0.2);
  backdrop-filter: blur(10px);
  z-index: 11001;
}

.modal-prev:hover,
.modal-next:hover {
  background: linear-gradient(135deg, rgba(176, 132, 255, 0.4), rgba(200, 150, 255, 0.4));
  transform: translateY(-50%) scale(1.15);
  box-shadow: 0 0 30px rgba(176, 132, 255, 0.9), 0 0 50px rgba(138, 43, 226, 0.6), inset 0 0 20px rgba(200, 150, 255, 0.4);
  border-color: #c98eff;
}

.modal-prev:active,
.modal-next:active {
  transform: translateY(-50%) scale(1.05);
}

.modal-prev { 
  left: 2rem;
}

.modal-next { 
  right: 2rem;
}

.modal-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background: rgba(15, 5, 25, 0.8);
  border: 2px solid #b084ff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #e3c8ff;
  font-size: 1.5rem;
  transition: all 0.3s ease;
  z-index: 11001;
}

.modal-close:hover {
  background: rgba(176, 132, 255, 0.3);
  transform: scale(1.15);
  box-shadow: 0 0 15px rgba(176, 132, 255, 0.6);
}

.fade-in {
  animation: fadeInUp 0.6s ease forwards;
}

.fade-in.delayed {
  animation-delay: 0.3s;
}

/* ========== ABOUT PAGE WITH SNAP SCROLL ========== */
.about-overlay {
  overflow: hidden;
}

.about-overlay .back-btn {
  position: absolute;
  top: 2rem;
  left: 2rem;
  z-index: 100;
}

.about-container {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.about-section {
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.about-content {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.avatar-box{
  width:220px;height:220px;border:2px solid #b084ff;border-radius:50%;margin:0 auto 3.5vh;overflow:hidden;
  box-shadow:0 0 15px rgba(200,150,255,.7),inset 0 0 6px rgba(176,132,255,.5);
}
.avatar-box img{width:100%;height:100%;object-fit:cover}
.tagline{font-size:1.6rem;letter-spacing:.08em;margin-bottom:3vh;color:#c391ff;text-shadow:0 0 8px #8a2be2;text-align:center}
.bio{font-size:1.05rem;line-height:1.7;max-width:750px;margin:0 auto 8vh;color:#e3c8ff;opacity:.9;text-align:left}
.skills-card{
  margin:0 auto;
  max-width:850px;
  border:2px solid #b084ff;
  border-radius:22px;
  padding:3rem 2rem 2.5rem;
  box-shadow:0 0 15px rgba(200,150,255,.8), inset 0 0 10px rgba(176,132,255,.6);
}
.skills-title{
  font-size:1.8rem;
  letter-spacing:.1em;
  margin-bottom:2.5rem;
  color:#ffffff;
  text-shadow:0 0 10px #8a2be2, 0 0 20px #b084ff;
  text-align:center;
}
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.4rem 1rem}
.skills-grid span{font-size:1.05rem;padding:.4rem .6rem;border-bottom:1px solid rgba(195,145,255,.25);transition:transform .25s}
.skills-grid span:hover{transform:scale(1.05)}
.avatar-box,.bio,.skills-card{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease}
body.loaded .avatar-box,body.loaded .bio,body.loaded .skills-card{opacity:1;transform:translateY(0)}

/* CV Download Button */
.cv-download-btn {
  display: block;
  width: fit-content;
  margin: 3rem auto 2rem;
  padding: 1.2rem 2.5rem;
  font-size: 1.1rem;
  text-decoration: none;
  background: linear-gradient(135deg, #0b0b0f, #1a0033);
  border: 2px solid #b084ff;
  border-radius: 12px;
  color: #e3c8ff;
  font-weight: bold;
  box-shadow: 0 0 15px rgba(176, 132, 255, 0.5), inset 0 0 10px rgba(176, 132, 255, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
}

.cv-download-btn:hover {
  background: linear-gradient(135deg, #b084ff, #c98eff);
  color: #0b0b0f;
  transform: scale(1.05) translateY(-3px);
  box-shadow: 0 0 25px rgba(176, 132, 255, 0.8), 0 5px 15px rgba(0, 0, 0, 0.3);
}

.cv-download-btn:active {
  transform: scale(1.0) translateY(0);
}

/* ========== INFO & SHARE BUTTONS ========== */
.info-btn, .share-btn{
  position:absolute;
  top:1.5rem;
  width:42px;
  height:42px;
  padding:0;
  border:none;
  background:none;
  cursor:pointer;
  z-index:50;
  transition:transform .2s ease;
}
.info-btn{left:1.5rem}
.share-btn{left:4.5rem}
.info-btn img, .share-btn img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 0 6px #8a2be2);
}
.info-btn:hover, .share-btn:hover{transform:scale(1.15)}

.info-panel, .share-panel{
  position:absolute;
  top:calc(1.5rem + 48px + 0.8rem);
  width:min(90vw, 320px);
  padding:1.4rem 1.6rem 1.6rem;
  border:2px solid #312043;
  border-radius:14px;
  background:rgba(15, 5, 25, .85);
  backdrop-filter:blur(4px);
  box-shadow:0 0 14px rgba(138,43,226,.5), inset 0 0 6px rgba(176,132,255,.35);
  color:#e3c8ff;
  line-height:1.4;
  font-size:.92rem;
  pointer-events:none;
  opacity:0;
  transform:translateY(-10px);
  transition:opacity .5s ease, transform .5s ease;
}
.info-panel{left:1.5rem}
.share-panel{left:4.5rem;text-align:center}

.info-panel p, .share-text{
  opacity:0;
  animation:fadeText 1.4s forwards ease;
  animation-delay:.4s;
}

.info-btn:hover + .info-panel,
.info-panel:hover,
.share-btn:hover + .share-panel,
.share-panel:hover{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.share-text{margin:0 0 .6rem}
.qr-img{width:160px;height:160px;object-fit:contain;display:none;margin:0 auto}

/* ========== CONTACT ========== */
#snake-canvas{
  display:block;
  margin:2rem auto;
  background:#0b0b0f;
  border:2px solid #b084ff;
  box-shadow:0 0 10px #8a2be2,0 0 20px rgba(176,132,255,.7), inset 0 0 6px rgba(176,132,255,.5);
}

.snake-hint{
  text-align:center;
  font-size:.9rem;
  opacity:.75;
  margin-top:.4rem;
}

/* ========== REALITY GLITCH EASTER EGG ========== */

/* Reality Button */
.reality-btn {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  width: 50px;
  height: 50px;
  border: 2px solid #b084ff;
  border-radius: 50%;
  background: rgba(15, 5, 25, 0.8);
  color: #e3c8ff;
  font-size: 1.8rem;
  font-weight: bold;
  cursor: pointer;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(176, 132, 255, 0.5), inset 0 0 10px rgba(176, 132, 255, 0.2);
  transition: all 0.3s ease;
  animation: pulseGlow 3s ease-in-out infinite;
  backdrop-filter: blur(10px);
}

.reality-btn:hover {
  transform: scale(1.15);
  box-shadow: 0 0 25px rgba(176, 132, 255, 0.8), inset 0 0 15px rgba(176, 132, 255, 0.4);
  background: rgba(176, 132, 255, 0.2);
}

.reality-btn.reset-mode {
  animation: spinPulse 2s linear infinite;
  border-color: #ff3bff;
}

@keyframes pulseGlow {
  0%, 100% { 
    box-shadow: 0 0 15px rgba(176, 132, 255, 0.5), inset 0 0 10px rgba(176, 132, 255, 0.2);
  }
  50% { 
    box-shadow: 0 0 30px rgba(176, 132, 255, 0.8), inset 0 0 15px rgba(176, 132, 255, 0.4);
  }
}

@keyframes spinPulse {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Warp Canvas */
#warp-canvas {
  position: fixed;
  inset: 0;
  z-index: 10500;
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

/* Fade to Black Transition */
#fade-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

#fade-overlay.active {
  opacity: 1;
}

/* Flash Effect */
body.flash::after {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(45deg, #b084ff, #ff3bff, #b084ff);
  z-index: 9999;
  animation: flashEffect 0.2s;
  pointer-events: none;
}

@keyframes flashEffect {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* Glitch Overlay */
#glitch-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: 0;
  transition: opacity 0.5s ease;
}

#glitch-overlay.active {
  opacity: 0.3;
  background: 
    repeating-linear-gradient(
      0deg,
      rgba(176, 132, 255, 0.03) 0px,
      transparent 1px,
      transparent 2px,
      rgba(176, 132, 255, 0.03) 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 59, 255, 0.02) 0px,
      transparent 1px,
      transparent 2px,
      rgba(255, 59, 255, 0.02) 3px
    );
  animation: scanlines 8s linear infinite;
}

@keyframes scanlines {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 0 100vh, 0 0; }
}

@keyframes glitchNoise {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 1; }
}

/* Glitch Mode Effects */
body.glitch-mode {
  /* Minimal shake only */
  animation: glitchShake 0.3s infinite;
}

/* Simple static chromatic aberration - NO ANIMATION */
body.glitch-mode h1,
body.glitch-mode h2,
body.glitch-mode h3 {
  text-shadow: 
    0 0 10px #8a2be2, 0 0 20px #8a2be2,
    2px 0 0 rgba(255, 0, 0, 0.6),
    -2px 0 0 rgba(0, 255, 255, 0.6);
}

body.glitch-mode p,
body.glitch-mode .btn,
body.glitch-mode span,
body.glitch-mode a {
  text-shadow: 
    1px 0 0 rgba(255, 0, 0, 0.6),
    -1px 0 0 rgba(0, 255, 255, 0.6);
  /* NO animation */
}

/* Slight purple hue shift on images - NO ANIMATION */
body.glitch-mode img {
  filter: hue-rotate(280deg) saturate(1.2);
}

body.glitch-mode spline-viewer {
  filter: hue-rotate(280deg) saturate(1.2);
}

body.glitch-spike {
  animation: glitchSpikeShake 0.2s !important;
}

body.glitch-spike * {
  animation: glitchSpikeText 0.2s !important;
}

@keyframes glitchShake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, -1px); }
}

@keyframes glitchText {
  0%, 100% { 
    text-shadow: 
      1px 0 0 rgba(255, 0, 0, 0.5),
      -1px 0 0 rgba(0, 255, 255, 0.5);
  }
  25% { 
    text-shadow: 
      -1px 0 0 rgba(255, 0, 0, 0.5),
      1px 0 0 rgba(0, 255, 255, 0.5);
  }
  50% { 
    text-shadow: 
      1px 1px 0 rgba(255, 0, 0, 0.5),
      -1px -1px 0 rgba(0, 255, 255, 0.5);
  }
  75% { 
    text-shadow: 
      0 1px 0 rgba(255, 0, 0, 0.5),
      0 -1px 0 rgba(0, 255, 255, 0.5);
  }
}

@keyframes glitchImage {
  0%, 100% { 
    filter: hue-rotate(280deg) saturate(1.5) contrast(1.2);
  }
  33% { 
    filter: hue-rotate(280deg) saturate(1.5) contrast(1.2) brightness(1.1);
  }
  66% { 
    filter: hue-rotate(285deg) saturate(1.6) contrast(1.3);
  }
}

@keyframes glitchSpikeShake {
  0%, 100% { transform: translate(0, 0) skew(0deg); }
  10% { transform: translate(-5px, 2px) skew(-2deg); }
  20% { transform: translate(5px, -2px) skew(2deg); }
  30% { transform: translate(-3px, 3px) skew(-1deg); }
  40% { transform: translate(4px, -3px) skew(1deg); }
  50% { transform: translate(-4px, 2px) skew(-1deg); }
  60% { transform: translate(3px, -4px) skew(2deg); }
  70% { transform: translate(-2px, 4px) skew(-2deg); }
  80% { transform: translate(5px, -1px) skew(1deg); }
  90% { transform: translate(-3px, -3px) skew(-1deg); }
}

@keyframes glitchSpikeText {
  0%, 100% { 
    text-shadow: 
      0.1em 0 0 rgba(255, 0, 0, 0.9),
      -0.1em -0.1em 0 rgba(0, 255, 0, 0.9),
      0.1em 0.1em 0 rgba(0, 0, 255, 0.9);
    transform: translate(0);
  }
  33% { 
    text-shadow: 
      -0.1em -0.05em 0 rgba(255, 0, 0, 0.9),
      0.1em 0.05em 0 rgba(0, 255, 0, 0.9),
      -0.1em 0.1em 0 rgba(0, 0, 255, 0.9);
    transform: translate(-2px, 2px);
  }
  66% { 
    text-shadow: 
      0.1em 0.1em 0 rgba(255, 0, 0, 0.9),
      -0.1em 0 0 rgba(0, 255, 0, 0.9),
      0 -0.1em 0 rgba(0, 0, 255, 0.9);
    transform: translate(2px, -2px);
  }
}

/* Terminal Overlay */
.terminal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  animation: fadeIn 0.3s;
  backdrop-filter: blur(5px);
}

.terminal-overlay.hidden {
  display: none;
}

.terminal-window {
  width: min(90vw, 700px);
  background: #0a0a0f;
  border: 2px solid #b084ff;
  border-radius: 12px;
  box-shadow: 0 0 40px rgba(176, 132, 255, 0.6), inset 0 0 20px rgba(176, 132, 255, 0.1);
  overflow: hidden;
  animation: terminalSlideIn 0.4s ease-out;
}

@keyframes terminalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.terminal-header {
  background: linear-gradient(135deg, #1a0033, #0f051a);
  padding: 0.8rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #b084ff;
}

.terminal-title {
  color: #e3c8ff;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  font-weight: bold;
}

.terminal-dots {
  display: flex;
  gap: 0.5rem;
}

.terminal-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #b084ff;
  box-shadow: 0 0 5px #b084ff;
}

.terminal-dots span:nth-child(1) { background: #ff3bff; box-shadow: 0 0 5px #ff3bff; }
.terminal-dots span:nth-child(2) { background: #8a2be2; box-shadow: 0 0 5px #8a2be2; }
.terminal-dots span:nth-child(3) { background: #b084ff; box-shadow: 0 0 5px #b084ff; }

.terminal-body {
  padding: 1.5rem;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  color: #0f0;
  background: #000;
  min-height: 300px;
  max-height: 60vh;
  overflow-y: auto;
}

.terminal-line {
  margin-bottom: 0.5rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
  animation: terminalFlicker 0.1s;
}

@keyframes terminalFlicker {
  from { opacity: 0; }
  to { opacity: 1; }
}

.terminal-body::-webkit-scrollbar {
  width: 8px;
}

.terminal-body::-webkit-scrollbar-track {
  background: #0a0a0f;
}

.terminal-body::-webkit-scrollbar-thumb {
  background: #b084ff;
  border-radius: 4px;
}

/* ========== MOBILE ========== */
@media (max-width: 768px) {
  body { background-attachment: scroll; }
  .feature img { max-height: 200px; }
  .avatar-box { width: 150px; height: 150px; }
  .skills-card { padding: 2rem 1.2rem; }
  
  .spline-guide { width: 150px; height: 150px; }
  
  .speech-bubble { max-width: 250px; left: -125px; }
  
  .spline-guide.position-marv-left .speech-bubble {
    left: 170px;
    min-width: 220px;
    max-width: 280px;
  }
  
  .spline-guide.position-intro { left: 75%; }
  .spline-guide.position-marv-right { left: 85%; }
  .spline-guide.position-marv-left { left: 15%; }
  .spline-guide.position-project-2 { left: 80%; }
  .spline-guide.position-project-3 { left: 20%; }
  .spline-guide.position-project-4 { left: 82%; }
  
  .modal-prev,
  .modal-next { 
    width: 50px; 
    height: 50px; 
    font-size: 1.8rem;
    border-width: 2px;
  }
  .modal-prev { left: 0.5rem; }
  .modal-next { right: 0.5rem; }
  
  .modal-close {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  
  #img-modal img {
    max-width: 80vw;
  }
  
  .info-btn, .info-panel, .share-btn, .share-panel { display:none; }
}