:root{
  --bg-1:#040406;
  --bg-2:#0a0a0b;
  --card:#0e0f10;
  --muted:#bfc3c7;
  --neon-yellow:#ffe154;
  --neon-cyan:#26f7e6;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(20,25,30,0.35), transparent), linear-gradient(180deg,var(--bg-1),var(--bg-2));
  color:#e6e6e6;
  display:grid;
  place-items:center;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:40px 20px;
  overflow-x:hidden;
}

.card{
  width:380px;
  max-width:92vw;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:22px;
  position:relative; /* enable absolute positioning of the link inside the card */
  padding:34px 26px 140px; /* extended bottom padding to make the box taller */
  box-shadow: 0 30px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.02);
  text-align:center;
}

.avatar-wrap{position:relative;height:160px;margin-top:4px;margin-bottom:8px;display:flex;align-items:center;justify-content:center}
.avatar{width:112px;height:112px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;background:linear-gradient(180deg,#ffe154,#ffe154);box-shadow: 0 6px 20px rgba(0,0,0,0.45) inset}
.avatar-img{width:88px;height:88px;border-radius:50%;display:block;object-fit:cover;box-shadow: 0 6px 18px rgba(0,0,0,0.6)}
.avatar-halo{position:absolute;left:50%;top:4px;transform:translateX(-50%);width:150px;height:150px;border-radius:50%;z-index:1;pointer-events:none;
  background: radial-gradient(circle at 50% 40%, rgba(38,247,230,0.18), rgba(38,247,230,0.06) 30%, transparent 55%);
  box-shadow: 0 12px 40px rgba(38,247,230,0.06), 0 0 40px rgba(38,247,230,0.14);
  border:3px solid rgba(0,0,0,0.25);
}

.title{
  font-family: 'Orbitron', sans-serif;
  font-size:42px;
  margin:6px 0 6px;
  color:var(--neon-yellow);
  letter-spacing:1px;
  text-shadow: 0 6px 18px rgba(0,0,0,0.7), 0 0 20px rgba(255,225,84,0.18), 0 0 6px rgba(255,225,84,0.25);
}

.subtitle{
  margin:6px auto 22px;
  color:var(--muted);
  max-width:320px;
  font-size:14.5px;
  line-height:1.5;
}

.progress-outer{display:flex;justify-content:center}
.progress-border{
  width:320px;
  max-width:86%;
  padding:18px 20px; /* give extra vertical room for a taller fill */
  border-radius:16px;
  position:relative;
  background: rgba(6,8,10,0.45);
  border:2px solid rgba(6,200,160,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6), inset 0 0 30px rgba(6,200,160,0.02);
}

.progress-fill{
  position:relative;
  height:18px; /* increased thickness */
  border-radius:999px;
  background: linear-gradient(90deg, rgba(38,247,230,0.95), rgba(32,150,255,0.95));
  box-shadow: 0 10px 30px rgba(38,247,230,0.14), 0 0 46px rgba(32,150,255,0.08);
  width:0%;
  transition:width 900ms cubic-bezier(.2,.9,.2,1);
}

.progress-content{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:100%;
  padding:0 12px;
  box-sizing:border-box;
}

.progress-label{
  font-family: 'Orbitron', sans-serif;
  font-weight:700;
  color:var(--neon-cyan);
  font-size:13px;
  letter-spacing:1.5px;
  -webkit-text-stroke: 1px rgba(0,0,0,0.95);
  text-stroke: 1px rgba(0,0,0,0.95);
  text-shadow: -1px -1px 0 rgba(0,0,0,0.95), 1px -1px 0 rgba(0,0,0,0.95), -1px 1px 0 rgba(0,0,0,0.95), 1px 1px 0 rgba(0,0,0,0.95);
}

.progress-percent{
  font-family: 'Orbitron', sans-serif;
  font-weight:800;
  color:var(--neon-cyan);
  font-size:15px;
  letter-spacing:1.5px;
  -webkit-text-stroke: 1px rgba(0,0,0,0.95);
  text-stroke: 1px rgba(0,0,0,0.95);
  text-shadow: -1px -1px 0 rgba(0,0,0,0.95), 1px -1px 0 rgba(0,0,0,0.95), -1px 1px 0 rgba(0,0,0,0.95), 1px 1px 0 rgba(0,0,0,0.95);
}

/* READY state styling */
.progress-content.ready{ }

.progress-ready{
  font-family: 'Orbitron', sans-serif;
  font-weight:800;
  color:#7ef4d9;
  font-size:16px;
  letter-spacing:2px;
  -webkit-text-stroke: 1px rgba(0,0,0,0.95);
  text-stroke: 1px rgba(0,0,0,0.95);
  text-shadow: -1px -1px 0 rgba(0,0,0,0.95), 1px -1px 0 rgba(0,0,0,0.95), -1px 1px 0 rgba(0,0,0,0.95), 1px 1px 0 rgba(0,0,0,0.95), 0 10px 36px rgba(34,255,230,0.18), 0 0 28px rgba(34,255,230,0.06);
  transition:all 320ms ease-out;
}

/* tiny fill pulse when finished */
.progress-fill.ready-fill{
  animation:fillPulse 900ms ease-out 1;
}
@keyframes fillPulse{
  0%{box-shadow: 0 8px 24px rgba(38,247,230,0.12), 0 0 40px rgba(32,150,255,0.06);}
  50%{box-shadow: 0 12px 36px rgba(38,247,230,0.18), 0 0 56px rgba(32,150,255,0.12);}
  100%{box-shadow: 0 8px 24px rgba(38,247,230,0.12), 0 0 40px rgba(32,150,255,0.06);}
}

@media (max-width:768px){
  body{padding:30px 16px}
  .card{padding:30px 22px 120px}
  .title{font-size:36px}
  .subtitle{font-size:13.5px; max-width:280px}
  .vortex-wrap{margin-top:100px}
  .vortex-back-wrap{width:200px;height:200px}
  .vortex-front-wrap{width:160px;height:160px}
  .progress-border{width:280px; padding:14px 16px}
  .skip-animation-btn{bottom:20px;right:20px;padding:8px 18px;font-size:0.8rem}
}

@media (max-width:420px){
  body{padding:16px 10px}
  .card{padding:20px 14px 100px}
  .title{font-size:28px}
  .subtitle{font-size:13px; max-width:240px}
  .avatar-wrap{height:130px}
  .avatar{width:74px;height:74px}
  .avatar-img{width:60px;height:60px}
  .avatar-halo{width:120px;height:120px}
  .vortex-wrap{margin-top:60px}
  .vortex-back-wrap{width:140px;height:140px}
  .vortex-front-wrap{width:115px;height:115px}
  .progress-border{width:100%; padding:12px 14px}
  .progress-fill{height:14px}
  .progress-label{font-size:11px}
  .progress-percent{font-size:12px}
  .progress-ready{font-size:13px}
  .skip-animation-btn{bottom:16px;right:16px;padding:7px 14px;font-size:0.75rem}
}

/* Vortex / loader */
.vortex-wrap{display:flex;justify-content:center;margin-top:178px;position:relative}

/* Back wrapper: positions the back portal and mirrors it; animation applied to the inner img */
.vortex-back-wrap{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scaleX(-1);
  width:260px;
  height:260px;
  border-radius:50%;
  z-index:1;
  pointer-events:none;
}
.vortex-back-img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  box-shadow: 0 44px 120px rgba(0,0,0,0.7), inset 0 10px 30px rgba(0,0,0,0.34), 0 0 72px rgba(38,247,230,0.08), 0 0 100px rgba(32,150,255,0.06);
  filter:drop-shadow(0 22px 60px rgba(0,0,0,0.6)) drop-shadow(0 0 40px rgba(32,150,255,0.12));
  background:radial-gradient(circle at 50% 45%, rgba(0,0,0,0.18), transparent 60%);
  transform-origin:center center;
  will-change:transform;
  animation:rotateImgCCW 36s linear infinite;
  position:relative;
  z-index:2;
}

/* Front wrapper */
.vortex-front-wrap{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:210px;
  height:210px;
  border-radius:50%;
  z-index:2;
  pointer-events:none;
}
.vortex-front-img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  box-shadow: 0 36px 100px rgba(0,0,0,0.66), inset 0 8px 24px rgba(0,0,0,0.32), 0 0 56px rgba(38,247,230,0.08), 0 0 96px rgba(32,150,255,0.08);
  filter:drop-shadow(0 20px 48px rgba(0,0,0,0.6)) drop-shadow(0 0 48px rgba(32,150,255,0.18));
  background:radial-gradient(circle at 50% 45%, rgba(0,0,0,0.18), transparent 60%);
  transform-origin:center center;
  will-change:transform;
  animation:rotateImgCCW 16s linear infinite;
  opacity:0.5; /* make front portal semi-transparent */
  position:relative;
  z-index:3;
}

/* Soft blue halo/glow around portal images */
.vortex-back-wrap::before,
.vortex-front-wrap::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:120%;
  height:120%;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  background: radial-gradient(circle at 50% 50%, rgba(32,150,255,0.20), rgba(32,150,255,0.10) 35%, rgba(32,150,255,0.04) 55%, transparent 68%);
  filter: blur(18px);
}

@keyframes rotateImgCW{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

@keyframes rotateImgCCW{
  from{transform:rotate(0deg)}
  to{transform:rotate(-360deg)}
}

/* Clickable portal center trigger */
.portal-trigger{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:62%;
  height:62%;
  border-radius:50%;
  background:transparent;
  border:0;
  cursor:pointer;
  z-index:4;
  outline: none;
}
.vortex-front-wrap .portal-trigger{pointer-events:auto}
.portal-trigger:focus{box-shadow: 0 0 0 6px rgba(32,150,255,0.12);}

/* Portal video overlay */
.portal-video{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:320px;
  max-width:78%;
  height:auto;
  border-radius:12px;
  z-index:6;
  display:none;
  pointer-events:none;
  box-shadow: 0 30px 120px rgba(32,150,255,0.18), 0 0 140px rgba(32,150,255,0.12);
}

/* Zoom effect when playing */
.portal-overlay{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9998;
  isolation:isolate;
  background: rgba(0,0,0,0.0);
  transform-origin: var(--portal-origin, 50% 50%);
  transform: scale(0.5);
  transition: transform 1200ms cubic-bezier(.15,.85,.25,1), opacity 1800ms ease-in;
  opacity:0.0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.portal-overlay.open{
  transform: scale(1);
  opacity:1;
  pointer-events:auto;
  /* subtle darken behind video to sell the transition */
  background: rgba(6,8,10,0.06);
}

/* When showing the preloaded about page or exiting, make overlay fully opaque
   so the original page content is completely hidden during the crossfade. */
.portal-overlay.show-iframe,
.portal-overlay.exit{
  background: rgba(0,0,0,1);
  transition: background 800ms ease, opacity 1400ms ease;
}

/* Center video inside overlay */
.portal-overlay .portal-video{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(1);
  /* cover height and ensure width is at least viewport so crop is even both sides */
  height:100vh;
  width:auto;
  min-width:100%;
  object-fit:cover;
  /* visual darken fallback (keeps portal visible) */
  background-color:#000;
  mix-blend-mode:multiply;
  filter: saturate(0.45) contrast(1.05) brightness(0.6);
  border-radius:0;
  display:block;
  pointer-events:none;
  opacity:0;
  z-index:6;
}

/* Preloaded about page shown behind the video during reveal */
.portal-overlay .portal-iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  z-index:5;
  opacity:0;
  pointer-events:none;
  transition:opacity 1200ms ease;
  background:#000;
}
.portal-overlay.show-iframe .portal-iframe{opacity:1}

/* Video fade-in + slow zoom-in */
.portal-overlay.open .portal-video{
  animation: videoFadeZoom 2500ms ease-out forwards;
}

@keyframes videoFadeZoom{
  0%{opacity:0; transform:translate(-50%,-50%) scale(1);}
  50%{opacity:1; transform:translate(-50%,-50%) scale(1.04);}
  100%{opacity:1; transform:translate(-50%,-50%) scale(1.15);}
}

/* Fade out the video when overlay exits */
.portal-overlay.exit .portal-video{
  animation: videoFadeOut 1400ms ease-in-out forwards;
}

@keyframes videoFadeOut{
  0%{opacity:1; transform:translate(-50%,-50%) scale(1.15);}
  15%{opacity:1; transform:translate(-50%,-50%) scale(1.16);}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1.22);}
}

/* Skip animation button */
.skip-animation-btn{
  position:fixed;
  bottom:32px;
  right:32px;
  z-index:99999;
  background:rgba(0,0,0,0.5);
  color:#ffe154;
  border:1px solid #ffe154;
  border-radius:8px;
  padding:10px 22px;
  font-family:'Orbitron','Inter',sans-serif;
  font-size:0.85rem;
  letter-spacing:0.08em;
  cursor:pointer;
  backdrop-filter:blur(6px);
  transition:background 200ms ease, transform 150ms ease;
  opacity:0;
  animation:skipFadeIn 600ms 400ms forwards;
}
.skip-animation-btn:hover{
  background:rgba(255,216,77,0.2);
  transform:scale(1.06);
}
@keyframes skipFadeIn{
  to{opacity:1}
}
.skip-home-btn{
  animation-delay:0ms;
}

/* Slight fade of other page content while portal animates */
.portal-overlay.open ~ *{opacity:0.18;transition:opacity 600ms ease}

/* Slight pulsing for the halo */
.avatar-halo{animation:haloPulse 2200ms ease-in-out infinite}
@keyframes haloPulse{
  0%{transform:translateX(-50%) scale(1);opacity:0.9}
  50%{transform:translateX(-50%) scale(1.06);opacity:0.75}
  100%{transform:translateX(-50%) scale(1);opacity:0.9}
}

/* Make fill animate nicely on load */
.progress-fill{transition:width 900ms cubic-bezier(.2,.9,.2,1)}

/* Projects grid + card styles */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
  margin-top:8px;
}
.project-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:14px;
  padding:18px;
  border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  transition: transform 220ms ease, box-shadow 220ms ease;
  display:flex;
  flex-direction:column;
  gap:12px;
  text-decoration:none; /* anchor reset */
  color:inherit;
}
.project-card:hover{transform:translateY(-6px);box-shadow: 0 22px 44px rgba(0,0,0,0.6)}
.project-card h3{margin:0;color:var(--neon-yellow);font-size:18px}
.project-card .muted{color:var(--muted);font-size:13px;margin:0}
.project-link{margin-top:auto;color:var(--neon-cyan);font-weight:700;text-decoration:none}
.project-link:hover{text-decoration:underline}

.project-thumb{width:100%;height:64px;border-radius:8px;overflow:hidden;display:block}
.project-thumb svg{display:block;width:100%;height:100%}

/* positioned projects link styles */
.projects-link{position:absolute;right:26px;bottom:26px}

/* shared card link style used by both back + projects links */
.card-link{
  color:var(--neon-cyan);
  font-weight:700;
  text-decoration:none;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.card-link:focus{outline:2px solid rgba(38,247,230,0.16);outline-offset:4px;border-radius:6px}
.card-link .arrow{margin-left:4px}
.card-link .arrow-left{margin-right:6px}
.projects-link-a{ /* kept for specific positioning but inherits visual style from .card-link */
  /* no-op: visual rules live on .card-link */
}
.gap-underline{/* removed: no-op kept for backwards-compatibility */display:none}

/* Glowing yellow accent for important links (Back / Projects) */
.glow-yellow{
  color:var(--neon-yellow) !important;
  text-shadow: 0 6px 20px rgba(0,0,0,0.6), 0 0 12px rgba(255,225,84,0.18), 0 0 6px rgba(255,225,84,0.25);
  box-shadow: 0 6px 20px rgba(255,225,84,0.06), 0 0 18px rgba(255,225,84,0.12);
  transition: box-shadow 220ms ease, transform 180ms ease, text-shadow 220ms ease;
  border-radius:6px;
  padding:4px 6px;
}
.glow-yellow:hover{
  transform:translateY(-3px);
  box-shadow: 0 10px 36px rgba(255,225,84,0.12), 0 0 28px rgba(255,225,84,0.22);
  text-shadow: 0 8px 36px rgba(255,225,84,0.22), 0 0 18px rgba(255,225,84,0.28);
}
.glow-yellow:focus{outline:2px solid rgba(255,225,84,0.18);outline-offset:4px}