/* ========== GLOBAL BASE ========== *//* ========== 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;
}
.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;
}

.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 — visible by default, hidden on overlays & ≤600 px
   ========================================================= */
.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{display:none}

@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 {
  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{
  position:fixed;
  inset:0;
  transform:translateY(100%);
  transition:transform .9s cubic-bezier(.25,.8,.25,1);
  overflow-y:auto;
  padding-bottom:12vh;
}
body.SHOW-PROJECTS .projects-overlay,
body.SHOW-ABOUT   .about-overlay{transform:translateY(0)}
.back-btn{
  position:sticky;
  top:2rem;
  left:2rem;
  z-index:10;
}

/* ========== UNIVERSAL NEON GLOW ========== */
.neon-title,
.neon-header,
.neon-sub,
.projects-title{
  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{
  font-size:clamp(2.5rem,6vw,5rem);
  letter-spacing:.1em;
  text-align:center;
  margin:12vh auto 6vh;
}

/* ========== PROJECT LIST & 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);
}
.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}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2.5rem;margin:6rem 0;padding:0 2rem}
.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%}

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

/* ========== TRANSITION CLASSES ========== */
.hidden{display:none}
.fade-left      {animation:slideOutLeft  .4s forwards}
.fade-in-right  {animation:slideInRight  .25s forwards}
.fade-out-right {animation:slideOutRight .4s 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%)}}

/* ========== ABOUT PAGE ========== */
.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 10vh;
  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)}

/* ========== MOBILE ≤ 768px ========== */
@media (max-width: 768px) {
  /* stop background warping */
  body {
    background-attachment: scroll;   /* <— added line */
  }

  .feature img { max-height: 200px; }
  .about-overlay { padding-left: 5%; padding-right: 5%; }
  .avatar-box { width: 150px; height: 150px; }
  .skills-card { padding: 2rem 1.2rem; }
}


/* (everything in your original CSS is left untouched) */

/* tiny gallery icon */
.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-card{position:relative;}

/* gallery grid */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.5rem;
  margin:4vh 0 12vh;
}
.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;
}


/* Fullscreen modal overlay for image */
#img-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  display: none; /* hidden by default */
  justify-content: center;
  align-items: center;
  z-index: 11000; /* above all other content */
  cursor: zoom-out;
  user-select: none;
}

#img-modal img {
  max-width: 90vw;
  max-height: 90vh;
  /* Replace white glow with purple neon */
  box-shadow:
    0 0 10px #b084ff,
    0 0 20px #b084ff,
    0 0 40px #a263ff,
    0 0 80px #8e3eff;
  border-radius: 8px;
  user-select: none;
}


/* Fade-in for gallery header and grid */
.fade-in {
  animation: fadeInUp 0.6s ease forwards;
}

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

/* ========== INFO BUTTON & PANEL (desktop only) ========== */

/* button */
.info-btn{
  position:absolute;
  top:1.5rem;
  left:1.5rem;                     /* aligns with other fixed buttons */
  width:42px;
  height:42px;
  padding:0;
  border:none;
  background:none;
  cursor:pointer;
  z-index:50;
  transition:transform .2s ease;
}
.info-btn img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 0 6px #8a2be2);
}
.info-btn:hover{ transform:scale(1.15); }

/* panel */
.info-panel{
  position:absolute;
  /* sit directly under the icon */
  top:calc(1.5rem + 48px + 0.8rem); /* icon height 48px + 0.8rem gap */
  left:1.5rem;

  width:min(90vw, 320px);          /* responsive, never wider than 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;
}

/* animated text fade */
.info-panel p{
  opacity:0;
  animation:fadeText 1.4s forwards ease;
  animation-delay:.4s;
}
@keyframes fadeText{ to{ opacity:1; } }

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

/* mobile: hide button & panel */
@media (max-width:768px){
  .info-btn,
  .info-panel{ display:none; }
}

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

.share-panel{
  position:absolute;
  top:calc(1.5rem + 48px + .8rem);      /* under the button */
  left:4.5rem;
  width:min(90vw, 320px);
  padding:1.2rem 1.4rem;
  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;font-size:.9rem;line-height:1.4;text-align:center;
  pointer-events:none;opacity:0;transform:translateY(-10px);
  transition:opacity .5s ease, transform .5s ease;
}
.share-text{margin:0 0 .6rem;opacity:0;animation:fadeText 1s forwards ease .3s}
.qr-img{width:160px;height:160px;object-fit:contain;display:none;margin:0 auto}

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

/* mobile hide */
@media(max-width:768px){
  .share-btn,.share-panel{display:none}
}


/* ===== collapsible intro bar ===== */
.intro-wrap{max-width:900px;margin:0 auto 4vh;padding:0 2rem}
.intro-toggle{
  width:100%;border:2px solid #312043;border-radius:12px;
  background:rgba(15,5,25,.7);backdrop-filter:blur(3px);
  color:#e3c8ff;font-size:1.05rem;letter-spacing:.05em;
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.2rem;cursor:pointer;
  box-shadow:0 0 10px rgba(138,43,226,.45),inset 0 0 6px rgba(176,132,255,.25);
  transition:background .25s;
}
.intro-toggle:hover{background:rgba(45,15,75,.8)}
.intro-toggle .chevron{width:22px;height:22px;transition:transform .3s}

.intro-panel{
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .45s ease, opacity .45s ease .05s;
}
.intro-panel p{margin:1.2rem 0 0;line-height:1.6;font-size:1rem;opacity:.88}

/* open state */
.intro-toggle[aria-expanded="true"] .chevron{transform:rotate(180deg)}
.intro-toggle[aria-expanded="true"] + .intro-panel{
  max-height:200px; /* enough for one short paragraph */
  opacity:1;
}

/* --- Contact overlay styling (reuses neon theme) --- */
.contact-overlay{position:fixed;inset:0;transform:translateY(100%);
  transition:transform .9s cubic-bezier(.25,.8,.25,1);overflow-y:auto;padding-bottom:12vh}
body.SHOW-CONTACT .contact-overlay{transform:translateY(0)}
/* Snake canvas look */
#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}

.fade-in-up {
  animation: fadeInUp 0.4s forwards;
}
.fade-out-up {
  animation: fadeOutUp 0.4s forwards;
}

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

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

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

.contact-overlay .neon-title {
  opacity: 1 !important;
  animation: none !important;
  /* Remove any transition or animation */
}