:root{
  --bg:#0b0f14; --bg-alt:#0f141b; --panel:#0e141c;
  --text:#e6edf3; --muted:#9fb1c3; --accent:#ffcd78;
  --cmd:#ffcd78; --file:#5daeff; --desc:#9fb1c3; --sys:#7fd36a;
  --card:#121924; --border:#1e2732;
}

/* ===== Base / Layout ===== */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:auto}
body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow:hidden;
}
.no-scroll{overflow:hidden}
.section{padding:80px 16px}
.full-height{min-height:100vh;display:flex;align-items:center}
.section.alt{background:var(--bg-alt)}
.container{max-width:1200px;margin:0 auto}
.container.narrow{max-width:820px}
.center{text-align:center}
.section-title{font-size:28px;margin:0 0 24px}

/* ===== Header / Nav ===== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(11,15,20,.6);
  backdrop-filter:saturate(180%) blur(10px);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;
}
.brand{color:var(--text);text-decoration:none;font-weight:700}
.nav-toggle{display:none;background:none;border:0;color:var(--text);font-size:20px}
.nav-links{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--muted);text-decoration:none;padding:8px;border-radius:10px}
.nav-links a:hover,.nav-links a.active{color:var(--text);background:var(--card)}
@media (max-width:800px){
  .nav-toggle{display:inline-block}
  .nav-links{
    display:none;position:absolute;right:16px;top:52px;
    background:var(--card);padding:12px;border:1px solid var(--border);border-radius:12px;flex-direction:column;
  }
  .nav.open .nav-links{display:flex}
}

/* ===== Hero ===== */
.hero-inner{max-width:920px;text-align:center;padding:24px;margin:0 auto}
.typing{font-size:42px;font-weight:800;margin:0 0 10px;color:var(--accent);min-height:1.2em}
.hero .subtle{font-size:18px;color:var(--muted)}
.scroll-down{
  position:absolute;bottom:16px;left:50%;
  transform:translateX(-50%);
  opacity:.6;font-size:12px;letter-spacing:.3em;text-transform:uppercase;
}
.pulse{animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.3}}

/* ===== Buttons ===== */
.btn{
  display:inline-block;padding:10px 16px;border-radius:12px;
  border:1px solid var(--border);color:var(--text);text-decoration:none;
  transition:transform .15s ease, background .2s ease;
}
.btn.primary{background:var(--accent);border-color:transparent;color:#0b0f14;font-weight:700}
.btn.ghost{background:transparent}
.btn:hover{transform:translateY(-1px)}

/* ===== Scene Transitions ===== */
.scene{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  transform:translate3d(0,40px,0);
  transition:opacity .9s ease, transform .9s ease;
}
.scene.active{opacity:1;transform:none;pointer-events:auto}
.scene.leaving{opacity:0;transform:translate3d(0,-40px,0)}
.scene .scene-in{
  opacity:0;transform:translate3d(0,16px,0);
  transition:opacity .9s ease .15s, transform .9s ease .15s;
}
.scene.active .scene-in{opacity:1;transform:none}
.scene .scene-in-delay{
  opacity:0;transform:translate3d(0,16px,0);
  transition:opacity .9s ease .3s, transform .9s ease .3s;
}
.scene.active .scene-in-delay{opacity:1;transform:none}
.scene .scene-in-delay2{
  opacity:0;transform:translate3d(0,16px,0);
  transition:opacity .9s ease .45s, transform .9s ease .45s;
}
.scene.active .scene-in-delay2{opacity:1;transform:none}

/* Film intro overlay */
#film-intro{
  position:fixed;inset:0;background:#000;opacity:1;pointer-events:none;z-index:80;
  animation:filmfade 1.1s ease forwards;
}
@keyframes filmfade{to{opacity:0}}

/* ===== Terminal ===== */
.terminal-section .container{position:relative;display:flex;justify-content:center}
.terminal-window{
  background:#111824;border:1px solid var(--border);border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  width:clamp(560px,70vw,900px);
}
@media (max-width:640px){.terminal-window{width:92vw}}
.terminal-header{
  background:#18202b;padding:6px 10px;display:flex;align-items:center;gap:6px;
  border-bottom:1px solid var(--border);
  border-radius: 10px 10px 0 0; 
}
.dot{width:10px;height:10px;border-radius:50%}
.red{background:#ff5f56}.yellow{background:#ffbd2e}.green{background:#27c93f}
.title{color:#9fb1c3;font-size:12px;margin-left:6px}
.term-replay{
  margin-left:auto;background:#0f1a26;border:1px solid var(--border);color:var(--muted);
  border-radius:8px;padding:4px 10px;cursor:pointer;
}
.term-replay:hover{color:var(--text);border-color:var(--accent)}

.terminal-body{
  padding:18px 16px;color:var(--cmd);
  font:14px/1.6 "Fira Code",ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:pre-wrap;min-height:480px;max-height:540px;
  overflow-y:auto;overflow-x:hidden;position:relative;word-break:break-word;
  scrollbar-color:#232d3a #0e141b; /* Firefox */
}
.terminal-body::-webkit-scrollbar{width:10px}
.terminal-body::-webkit-scrollbar-track{background:#0e141b;border-radius:10px}
.terminal-body::-webkit-scrollbar-thumb{background:#232d3a;border-radius:10px}
.terminal-body::-webkit-scrollbar-thumb:hover{background:#3a4658}

.term-output{margin:0;display:inline}
#term-output{white-space:pre-wrap;word-break:break-word;max-width:100%}

/* Cursor (final override retained) */
.cursor-inline{
  display:inline-block;width:0.8ch;height:1em;vertical-align:-0.16em;
  background-color:#f5c76a;animation:blink .8s step-end infinite;
}
@keyframes blink{50%{opacity:0}}

.line-cmd{color:var(--cmd)}
.line-file{color:var(--file)}
.line-bullet{color:var(--text)}
.line-desc{color:var(--desc)}
.line-sys{color:var(--sys)}

/* ===== Simple Showcase Grid (cards) ===== */
.showcase-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:18px;margin:10px 0 26px;
}
.showcase-card{
  position:relative;display:block;border:1px solid var(--border);
  border-radius:16px;overflow:hidden;background:var(--card);
}
.showcase-card .media{aspect-ratio:16/9;background:#0b0f14}
.showcase-card img{width:100%;height:100%;object-fit:cover;display:block}
.showcase-card .overlay{
  position:absolute;inset:auto 0 0 0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.6));padding:14px;
}
.showcase-card h3{margin:0 0 6px}
.showcase-card p{margin:0;color:var(--muted)}

/* ===== Footer ===== */
.site-footer{
  position:fixed;bottom:-120px;left:0;right:0;z-index:65;
  padding:20px 0 24px;background:rgba(11,15,20,.8);
  transition:bottom .6s ease;
}
.divider{border:0;border-top:1px solid var(--border);margin:0 0 16px}
.footer-links{display:flex;gap:10px;justify-content:center;align-items:center;margin-bottom:6px}
.footer-links a{color:var(--muted);text-decoration:none}
.footer-links a:hover{color:var(--accent)}
.copy{color:var(--text);opacity:.8;text-align:center}

/* Ghost helpers */
.kg-width-wide{max-width:1100px;margin:auto}
.kg-width-full{width:100%}
.terminal-body pre{margin:0}

/* ===== Projects “App Window” ===== */
#projects .container{min-height:100vh;display:flex;align-items:center;justify-content:center}

.app-window{
  position:relative;border:1px solid rgba(255,255,255,.16);border-radius:14px;
  background:rgba(255,255,255,0);
  backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  width:clamp(560px,70vw,900px);
  transform:translate3d(0,24px,0) scale(.98);
  opacity:0;pointer-events:none;
  transition:opacity .8s ease, transform .8s ease;
}
.app-window.light{background:rgba(250,250,255,0);border-color:rgba(255,255,255,.28)}
.app-window.fit-viewport{width:min(1100px,92vw)}
/* Brighter glass variant (kept) */
.app-window.light.bright{
  background:rgba(255,255,255,0);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 25px 70px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.3);
  backdrop-filter:blur(20px) saturate(100%); -webkit-backdrop-filter:blur(20px) saturate(100%);
  color:#f2f4f6;
}

/* Header INSIDE app (final override kept — white glass) */
.app-header{
  display:flex;align-items:center;gap:8px;padding:10px 12px;
  border-bottom:1px solid rgba(0,0,0,.1);
  background:rgba(255,255,255,.85);
  border-radius:14px 14px 0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.app-dots .dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.app-dots .red{background:#ff5f56}
.app-dots .yellow{background:#ffbd2e}
.app-dots .green{background:#27c93f}
.app-title{font-weight:700;letter-spacing:.2px;color:#111;opacity:.9}

/* When Projects scene is active */
.scene#projects.active .app-window{opacity:1;transform:none;pointer-events:auto}

/* ===== “Magic Window” / Showcase ===== */
.app-body-showcase{
  height:78vh;min-height:520px;position:relative;overflow:hidden;cursor:none;
}
.showcase-stage{position:relative;inset:0;width:100%;height:100%;perspective:1200px;pointer-events:auto}
.magic-cursor{
  position:absolute;top:0;left:0;width:14px;height:14px;border-radius:50%;
  background:var(--accent);mix-blend-mode:screen;
  box-shadow:0 0 18px var(--accent), 0 0 42px rgba(255,205,120,.55);
  pointer-events:none;transform:translate(-50%,-50%);opacity:.9;transition:transform .08s linear;
}
.app-body-showcase:hover .magic-cursor{opacity:1}

/* 3D grid */
.showcase-grid3d{
  position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(180px,1fr);
  gap:18px;padding:18px;transform-style:preserve-3d;
}
@media (max-width:900px){.showcase-grid3d{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.showcase-grid3d{grid-template-columns:1fr}}

/* 3D Card */
.card3d{
  position:relative;display:block;color:var(--text);text-decoration:none;overflow:hidden;
  background:rgba(10,14,20,.55);border:1px solid rgba(255,255,255,.14);border-radius:16px;
  transform-style:preserve-3d;transition:transform .18s ease, box-shadow .25s ease;
  /* base transforms + drift */
  --rx:0deg; --ry:0deg; --tz:0px; --tx:0px; --ty:0px;
  transform:translate3d(var(--tx),var(--ty),var(--tz)) rotateX(var(--rx)) rotateY(var(--ry));
  animation:drift 5.5s ease-in-out infinite, orbit-drift var(--orbit-duration,26s) ease-in-out infinite;
  animation-delay:calc(var(--i,0)*.25s), calc(var(--i,0)*1.2s);
}
.card3d .card-inner{position:absolute;inset:0;display:flex;flex-direction:column}
.card3d .card-media{flex:1;background:#0b0f14 center/cover no-repeat;filter:saturate(1.1)}
.card3d .card-meta{
  padding:12px 14px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.card3d h3{margin:0 0 4px;font-size:16px}
.card3d p{margin:0;color:var(--muted);font-size:13px;line-height:1.4}
.card3d .card-glow{
  position:absolute;inset:-40%;
  background:radial-gradient(600px 300px at var(--mx,50%) var(--my,50%), rgba(255,205,120,.2), transparent 60%);
  opacity:0;transition:opacity .2s ease;pointer-events:none;transform:translateZ(30px);
}
.card3d:hover .card-glow{opacity:.8}
.card3d:hover{
  animation-play-state:paused, paused;
  transform:scale(1.03) rotateX(2deg) rotateY(2deg);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
@keyframes drift{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
@keyframes orbit-drift{
  0%{transform:translate3d(0,0,0) rotateX(0deg) rotateY(0deg)}
  25%{transform:translate3d(20px,-10px,10px) rotateX(2deg) rotateY(3deg)}
  50%{transform:translate3d(-25px,20px,-10px) rotateX(-2deg) rotateY(-3deg)}
  75%{transform:translate3d(10px,-20px,8px) rotateX(1.5deg) rotateY(-2deg)}
  100%{transform:translate3d(0,0,0) rotateX(0deg) rotateY(0deg)}
}
@keyframes hover-drift{
  0%,100%{transform:scale(1.03) rotateX(2deg) rotateY(2deg)}
  50%{transform:scale(1.035) rotateX(1.5deg) rotateY(1.5deg)}
}

/* Glass tweaks + metadata clamping */
.app-body-showcase{height:68vh;min-height:460px}
#showcase-stage{position:relative;isolation:isolate}
.magic-cursor{z-index:30}
.showcase-ring{position:absolute;inset:0;transform-style:preserve-3d;perspective:1200px}
.card3d{aspect-ratio:16/10;height:auto}
.card3d .card-media{aspect-ratio:16/9;height:auto;min-height:160px}
.card3d .card-meta{height:84px;overflow:hidden}
.card3d .card-meta h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card3d .card-meta p{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* Particles (canvas) */
#particles{
  position:absolute;top:0;left:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}
.particle-layer{position:absolute;inset:0;z-index:15;pointer-events:none;animation:debris-drift 40s ease-in-out infinite alternate}
@keyframes debris-drift{0%{transform:translate(0,0)}50%{transform:translate(10px,-6px)}100%{transform:translate(0,0)}}

/* Ensure cards above background */
.showcase-grid3d,.showcase-ring{z-index:12}

/* ===== Floating Board (orbiting grid) ===== */
.floating-board{
  position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
  gap:22px;padding:20px;justify-items:center;align-items:center;
  perspective:1400px;transform-style:preserve-3d;z-index:18;
}

/* Floating cards (final style + hover) */
.float-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 16/9;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  box-shadow: 0 20px 45px rgba(0,0,0,.35);
  transition: transform .6s ease, box-shadow .6s ease;
  animation:
    slow-float var(--duration, 50s) ease-in-out infinite,
    orbit-drift var(--orbit-duration, 28s) ease-in-out infinite;
  animation-delay:
    var(--delay, 0s),
    calc(var(--delay, 0s) * 1.5); /* ✅ makes orbit also desynchronised */
  transform: translate3d(var(--ox, 0px), var(--oy, 0px), var(--oz, 0px));
  color: var(--text);
  text-decoration: none;
}

.float-card:nth-child(1) { --duration: 46s; --delay: -4s; }
.float-card:nth-child(2) { --duration: 52s; --delay: -6s; }
.float-card:nth-child(3) { --duration: 57s; --delay: -8s; }
.float-card:nth-child(4) { --duration: 49s; --delay: -3s; }
.float-card:nth-child(5) { --duration: 63s; --delay: -7s; }
.float-card:nth-child(6) { --duration: 55s; --delay: -9s; }

.float-card:hover {
  animation-play-state: running, paused;
  transform: translate3d(var(--ox, 0px), var(--oy, 0px), var(--oz, 0px))
             scale(1.03) rotateX(1.5deg) rotateY(1deg);
  box-shadow: 0 0 35px rgba(255,230,160,.6),
              0 0 60px rgba(255,255,255,.25);
  z-index: 20;
}

@keyframes slow-float {
  0%   { transform: translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  25%  { transform: translate3d(10px,-12px,8px) rotateX(1.2deg) rotateY(-1deg) rotateZ(.4deg); }
  50%  { transform: translate3d(-14px,10px,-10px) rotateX(-1deg) rotateY(1.2deg) rotateZ(-.4deg); }
  75%  { transform: translate3d(8px,6px,6px) rotateX(.8deg) rotateY(-1deg) rotateZ(.5deg); }
  100% { transform: translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
}

/* Floating card content */
.float-card-inner{position:absolute;inset:0;display:flex;flex-direction:column}
.float-card-img{flex:1;min-height:160px;background:#0b0f14 center/cover no-repeat;filter:saturate(1.1)}
.float-card-meta{
  position:absolute;bottom:0;left:0;right:0;height:86px;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center;
  padding:12px 16px;background:rgba(15,20,27,.65);
  border-top:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px) saturate(150%); -webkit-backdrop-filter:blur(8px) saturate(150%);
}
.float-card-meta h3{margin:0 0 4px;font-size:16px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.float-card-meta p{margin:0;color:var(--muted);font-size:13px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Randomised offsets */
.float-card:nth-child(1){--ox:6px; --oy:-4px; --oz:12px; --duration:56s; --delay:-3s}
.float-card:nth-child(2){--ox:-8px; --oy:6px; --oz:-8px; --duration:58s; --delay:-5s}
.float-card:nth-child(3){--ox:10px; --oy:3px; --oz:6px; --duration:60s; --delay:-7s}
.float-card:nth-child(4){--ox:-5px; --oy:-6px; --oz:10px; --duration:62s; --delay:-4s}
.float-card:nth-child(5){--ox:7px; --oy:5px; --oz:-6px; --duration:57s; --delay:-2s}
.float-card:nth-child(6){--ox:-9px; --oy:8px; --oz:9px; --duration:63s; --delay:-9s}

/* Interactivity helpers */
.float-card,.float-card *{pointer-events:auto}
.float-card a,.float-card button{pointer-events:auto}
.stretched-link{position:absolute;inset:0;z-index:10;pointer-events:auto;text-indent:-9999px}

.showcase-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at 20% 40%, rgba(255,205,120,0.1) 0%, transparent 40%),
              radial-gradient(circle at 80% 60%, rgba(93,174,255,0.15) 0%, transparent 50%),
              radial-gradient(circle at 50% 90%, rgba(127,211,106,0.1) 0%, transparent 50%);
  filter: blur(1px) saturate(160%);
  pointer-events: none;
}


.scene {
  position: fixed;        /* instead of absolute */
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 40px, 0);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.scene.active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  z-index: 10;
}
.scene.leaving {
  opacity: 0;
  transform: translate3d(0, -40px, 0);
  z-index: 5;
}

/* Base: hidden background */
#projects::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(
    circle at 20% 30%,
    #ffcd78 0%,
    #ffd8a8 10%,
    #a3e4ff 35%,
    #b9a8ff 60%,
    #ffe6f7 100%
  );
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}

/* Active once loaded */
#projects.bg-active::before {
  opacity: 0.35;
  animation: floatGradient 60s ease-in-out infinite alternate;
}

@keyframes floatGradient {
  0%   { background-position: 0% 0%, 100% 100%, 50% 50%; }
  50%  { background-position: 20% 30%, 80% 70%, 40% 80%; }
  100% { background-position: 0% 0%, 100% 100%, 50% 50%; }
}

/* === PROJECTS SECTION SMOOTH ENTRY === */

/* Background gradient (always loaded first) */
#projects::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, #ffdca8, #a8d8ff, #cba8ff, #ffdca8);
  background-size: 200% 200%;
  /*filter: blur(10px);*/
  opacity: 0;
  transition: opacity 1.4s ease;
  z-index: 0;
}
.scene#projects.active::before {
  opacity: 0.25; /* fade in background first */
}

/* App window spawns from middle */
.app-window.light.bright {
  transform: scale(0.92) translateY(30px);
  opacity: 0;
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.9s ease;
}
.scene#projects.active .app-window.light.bright {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Project cards fade-in staggered */
.float-card {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}
.scene#projects.active .float-card {
  opacity: 1;
  transform: none;
}

/* === Light Rays Background === */
#projects::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* above the static gradient, below app window */
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 10%, rgba(255, 205, 120, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 90%, rgba(93, 174, 255, 0.15) 0%, transparent 60%);
  filter: blur(60px) saturate(160%);
  transform-origin: center center;
  animation: sweepRays 22s linear infinite;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.scene#projects.active::after {
  opacity: 0.4;
  animation: sweepRays 30s linear infinite;
}

@keyframes sweepRays {
  0% {
    transform: rotate(0deg) scale(1.1);
  }
  50% {
    transform: rotate(180deg) scale(1.05);
  }
  100% {
    transform: rotate(360deg) scale(1.1);
  }
}

/* Default showcase window (always transparent base) */
/* Always bright, even during transitions */
#projects .app-window.light.bright,
.scene#projects .app-window.light.bright,
.scene#projects.active .app-window.light.bright,
.scene#projects.leaving .app-window.light.bright {
  background: rgba(255, 255, 255, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow:
    0 25px 70px rgba(255, 255, 255, 0.2),
    0 30px 80px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
  color: #f8f9fb !important;
  opacity: 1 !important;
  transition: none !important;
}

/* Also make the scene background bright throughout */
.scene#projects,
.scene#projects.active,
.scene#projects.leaving {
  background: rgba(255, 255, 255, 0.08) !important;
}

.contact-links {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 28px;
  flex-wrap: wrap;
}
.contact-links a {
  min-width: 120px;
  text-align: center;
}
.contact-info {
  font-size: 18px;
  line-height: 1.8;
  color: var(--text);
  margin-top: 20px;
}
.contact-info a {
  color: var(--accent);
  text-decoration: none;
}
.contact-info a:hover {
  text-decoration: underline;
}

.see-more-inside {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  text-align: center;
}

.see-more-inside .btn.primary {
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 14px;
  background: var(--accent);
  color: #0b0f14;
  box-shadow: 0 6px 20px rgba(255,205,120,0.35);
  transition: transform .2s ease, box-shadow .2s ease;
}

.see-more-inside .btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(255,205,120,0.5);
}
.see-more-inside {
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.scene#projects.active .see-more-inside {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 1.5s;
}

/* === Projects Page Searchbar === */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
  margin-top: 24px;
  align-items: stretch; /* ensure consistent height alignment */
}

.showcase-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.showcase-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}

.showcase-card a {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.showcase-card .media {
  flex-shrink: 0;
}

.showcase-card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

.showcase-card .overlay {
  flex-grow: 1;
  padding: 16px 18px;
  background: rgba(15,20,27,0.6);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120px; /* fixed consistent height */
}

.showcase-card h3 {
  color: #fff;
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
}

.showcase-card p {
  color: #9fb1c3;
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;   /* limit lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-search {
  text-align: center;
  margin-bottom: 24px;
}

.project-search input {
  width: 100%;
  max-width: 400px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.project-search input:focus {
  border-color: var(--accent);
  background: rgba(255,255,255,0.12);
}

.showcase-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.showcase-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}

/* Image always on top, no overlay text */
.showcase-card .media {
  flex-shrink: 0;
}

.showcase-card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Text section below */
.showcase-card .content {
  flex-grow: 1;
  padding: 14px 16px;
  background: rgba(15, 20, 27, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 130px;
}

.showcase-card h3 {
  color: #fff;
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 600;
}

.showcase-card p {
  color: #9fb1c3;
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* limit to 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Make all cards same height */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  align-items: stretch;
}
.showcase-card p {
  color: #9fb1c3;
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0;
  flex-grow: 1;

  display: -webkit-box;
  -webkit-line-clamp: 3;         /* show up to 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;           /* ensures wrapping works */
  max-height: calc(1.6em * 2.7);
}

.project-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 20px 45px rgba(0,0,0,0.35);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.project-card:hover {
  transform: scale(1.5);
  box-shadow: 0 0 30px rgba(255,230,160,0.4);
}

.project-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.project-content {
  padding: 18px;
  color: var(--text);
  background: rgba(15, 20, 27, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.project-content h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.no-projects {
  text-align: center;
  color: var(--muted);
  margin-top: 40px;
  font-size: 18px;
  transition: opacity 0.3s ease;
}

.hidden {
  display: none;
}
/* Allow scrolling on Projects page */
.projects-page {
  min-height: 100vh;
  padding: 80px 16px;
  overflow-y: auto;
}

body {
  overflow-y: auto !important;
}

/* === Projects Page Styling === */
.projects-page {
  position: relative;
  min-height: 100vh;
  padding: 80px 16px;
  overflow-y: auto;
  color: var(--text);
}

/* Animated gradient background */
.projects-bg {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 20% 30%, rgba(255,205,120,0.25), transparent 60%),
              radial-gradient(circle at 80% 70%, rgba(93,174,255,0.25), transparent 60%),
              radial-gradient(circle at 50% 90%, rgba(155,120,255,0.25), transparent 70%);
  filter: blur(100px) saturate(180%);
  animation: bgDrift 25s ease-in-out infinite alternate;
  z-index: 0;
  pointer-events: none;
}
@keyframes bgDrift {
  0% { transform: translate(0,0) scale(1); }
  50% { transform: translate(20px,-20px) scale(1.05); }
  100% { transform: translate(-10px,10px) scale(1); }
}

/* Glassy cards */
.showcase-card.glassy {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0,0,0,0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.showcase-card.glassy:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 55px rgba(0,0,0,0.45);
}

/* Image fixed height for nice grid */
.showcase-card .media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.showcase-card .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Content below image */
.showcase-card .content {
  padding: 14px 16px;
  height: 90px; /* fixes uneven text height */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.showcase-card .content h3 {
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.showcase-card .content p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Search bar + message */
.project-search { text-align: center; margin: 20px 0 30px; }
.project-search input {
  width: 100%; max-width: 420px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--text);
}
.project-search input:focus {
  border-color: var(--accent);
  background: rgba(255,255,255,0.1);
  outline: none;
}
.no-projects {
  text-align: center;
  color: var(--muted);
  margin-top: 20px;
}
.hidden { display: none; }

/* Grid layout (3-wide on desktop, 2 on tablet, 1 on mobile) */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
  position: relative;
  z-index: 1;
}
/* === Ultra-transparent smoky glass for card content === */
.showcase-card .content {
  padding: 14px 16px;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(20, 24, 30, 0.3); /* ✅ ~98% transparent */
  border-top: none; /* no divider line */
  backdrop-filter: none saturate(200%);
  -webkit-backdrop-filter: blur(18px) saturate(200%);
  border-radius: 0 0 18px 18px;
  transition: background 0.3s ease, transform 0.3s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Hover brightens very slightly for readability */
.showcase-card:hover .content {
  background: rgba(40, 46, 56, 0.06); /* faint gray tint */
  transform: translateY(-2px);
}

/* Text inside remains readable */
.showcase-card .content h3 {
  margin: 0 0 4px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.showcase-card .content p {
  margin: 0;
  color: rgba(230, 237, 243, 0.85);
  font-size: 13px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* === Make “All Projects” sit above gradient === */
.section-title {
  position: relative;
  z-index: 5; /* ✅ ensures it renders above .projects-bg */
  text-align: center;
  font-size: 30px;
  margin: 0 0 24px;
  color: #fff;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
}