/*
  Insane Dark Portfolio — CSS
  Inspired by the *vibe* of Sintra AI: neon glows, glass, oversized type, motion.
  No external assets. No libraries. Accessible. Responsive. Performant.
*/

:root{
  --bg: #0a0c12;
  --bg-2: #0f1220;
  --fg: #e7e9ee;
  --muted: #a2a8b3;
  --line: #2a2f3f;
  --card: #0f1324cc; /* glassy */
  --accentA: 200 100% 60%; /* cyan */
  --accentB: 280 100% 70%; /* purple */
  --accentC: 340 100% 62%; /* pink */
  --shadow: 0 10px 35px rgba(0,0,0,.45);
  --radius: 20px;
}

/* Reset / base */
*, *::before, *::after{ box-sizing:border-box }
html, body{ height:100% }
body{
  margin:0; color:var(--fg); background:var(--bg);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }
section{ position:relative }

/* Global background flair */
.backdrop{ position:fixed; inset:0; z-index:-2; pointer-events:none; }
.backdrop::before,
.backdrop::after{
  content:""; position:absolute; inset:-20% -10% -10% -20%;
  background:
    radial-gradient(60vmax 60vmax at 10% 20%, hsl(var(--accentA)/.18), transparent 60%),
    radial-gradient(60vmax 60vmax at 90% 10%, hsl(var(--accentB)/.16), transparent 60%),
    radial-gradient(70vmax 70vmax at 50% 100%, hsl(var(--accentC)/.12), transparent 60%);
  filter: blur(40px); transform: translateZ(0);
}
.backdrop::after{ animation: drift 24s linear infinite alternate }
@keyframes drift{ to{ transform: translate3d(4%, -2%, 0) rotate(2deg) } }

/* Glass header */
header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(10px);
  background: linear-gradient(to bottom, #0a0c12cc, #0a0c1200);
  border-bottom: 1px solid #0e1222;
}
.nav{
  max-width:1200px; margin:0 auto; padding:16px 20px; display:flex; align-items:center; gap:18px;
}
.logo{ font-weight:800; letter-spacing:.5px; font-size:18px; display:flex; align-items:center; gap:10px }
.logo-dot{ width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,hsl(var(--accentA)),hsl(var(--accentB))); box-shadow:0 0 22px hsl(var(--accentB)/.7) }
.nav ul{ margin-left:auto; display:flex; gap:14px; list-style:none; padding:0 }
.nav a{ padding:8px 12px; border-radius:999px; border:1px solid transparent }
.nav a:hover{ border-color:#1c2235; background:#0c1020 }
.cta{ margin-left:6px; padding:8px 14px; border-radius:999px; border:1px solid #1f2540; background:linear-gradient(135deg,#0f1430,#0b0f24); box-shadow: inset 0 0 0 1px #202646, 0 8px 24px #0006 }

/* Hero */
.hero{ max-width:1200px; margin:0 auto; padding:90px 20px 40px }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border-radius:999px; border:1px solid #1e2540; background:#0b0f22; font-size:12px; color:var(--muted) }
.eyebrow .pill{ width:8px; height:8px; border-radius:50%; background:conic-gradient(from 90deg, hsl(var(--accentA)), hsl(var(--accentB)), hsl(var(--accentC))) }

.headline{ font-size: clamp(38px, 7vw, 96px); line-height: 1.02; letter-spacing:-.02em; margin:18px 0; font-weight:900 }
.headline .glow{ background: linear-gradient(90deg, hsl(var(--accentA)), hsl(var(--accentB)) 50%, hsl(var(--accentC))); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow: 0 0 30px hsl(var(--accentB)/.25) }
.sub{ max-width:780px; color:var(--muted); font-size: clamp(16px, 1.6vw, 20px) }

/* Typewriter */
.typewriter{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-size: clamp(14px, 1.3vw, 18px); color:#b6bbca }
.typewriter .cursor{ width:2px; height:1.1em; background:#b6bbca; display:inline-block; animation: blink 1s steps(2,end) infinite }
@keyframes blink { 50%{ opacity: 0 } }

/* Marquee */
.marquee{ margin-top:42px; border-block:1px solid #12172a; background: #0b0f21; overflow:hidden; mask-image:linear-gradient(to right, transparent, black 7%, black 93%, transparent) }
.marquee__track{ display:flex; gap:28px; padding:16px 0; will-change: transform }
.tag{ display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:999px; border:1px solid #1b2140; background:linear-gradient(180deg,#0b0f22,#090d1c); white-space:nowrap; box-shadow: inset 0 0 0 1px #151b33 }
.tag i{ width:8px; height:8px; border-radius:4px; background:linear-gradient(135deg,hsl(var(--accentA)),hsl(var(--accentB))) }

/* 3D ID card */
.id-wrap{ max-width:1200px; margin:70px auto; padding:0 20px; }
.id3d{
  position:relative; margin:auto; width:100%; height: clamp(420px, 44vw, 560px); border-radius:28px; background:linear-gradient(145deg,#0b0f21,#0a0c18);
  border:1px solid #1a2140; box-shadow: var(--shadow), inset 0 0 0 1px #161c33; transform-style:preserve-3d; transition: transform .2s ease, box-shadow .2s ease;
  perspective:1200px;
}
.id3d::before{ /* glossy stripes */
  content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  background: conic-gradient(from 210deg, hsl(var(--accentB)/.0) 0 10%, hsl(var(--accentB)/.25) 14%, transparent 15% 60%, hsl(var(--accentA)/.2) 64%, transparent 65% 100%);
  filter: blur(20px); mix-blend:screen; transform: translateZ(40px);
}
.id-glare{ position:absolute; inset:0; border-radius:inherit; background: radial-gradient(600px 200px at var(--mx,50%) -20%, hsl(var(--accentA)/.25), transparent 60%); pointer-events:none; transform: translateZ(60px); }
.id-content{ position:relative; display:grid; grid-template-columns: clamp(180px, 22vw, 320px) 1fr; gap:26px; padding:30px; height:100%; align-items:center }
.portrait{ width: clamp(160px, 18vw, 260px); height: clamp(200px, 24vw, 340px); border-radius:18px; background:
  radial-gradient(120px 80px at 80% 20%, hsl(var(--accentC)/.2), transparent),
  linear-gradient(145deg,#0d1228,#0b0f1d);
  border:1px solid #1a2242; box-shadow: inset 0 0 0 1px #151b33;
  transform: translateZ(50px);
}
.chip{ position:absolute; left:24px; top:24px; width:56px; height:40px; border-radius:8px; background:linear-gradient(145deg,#c7b573,#7f6c32); box-shadow: inset 0 -8px 18px #0005; transform: translateZ(60px) }
.id-text h3{ margin:0; font-size: clamp(22px, 2.5vw, 34px) }
.id-text p{ margin:6px 0 0; color:var(--muted) }
.id-grid{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:14px; margin-top:16px }
.cell{ padding:10px 12px; border:1px dashed #1a2242; border-radius:12px; background:linear-gradient(180deg,#0c1022,#090d1c); }
.cell small{ display:block; color:#98a0b8; letter-spacing:.04em; text-transform:uppercase; font-size:10px }
.cell strong{ font-size:14px }

/* Sticky timeline */
.timeline{ max-width:1200px; margin:120px auto; padding:0 20px; display:grid; grid-template-columns: 160px 1fr; gap:26px }
.years{ position:sticky; top:90px; align-self:start; height:max-content }
.years .y{ font-weight:800; font-size:28px; opacity:.35; line-height:1 }
.years .y.active{ opacity:1; background:linear-gradient(90deg,hsl(var(--accentA)),hsl(var(--accentB))); -webkit-background-clip:text; color:transparent }
.track{ position:relative; }
.vline{ position:absolute; left:12px; top:0; bottom:0; width:2px; background:#1a2140 }
.titem{ position:relative; margin-left:40px; padding:18px 18px 18px 18px; border:1px solid #1a2140; border-radius:16px; background: linear-gradient(180deg,#0b0f21,#0a0d1b); box-shadow: var(--shadow); margin-bottom:18px; opacity:.6; transform: translateY(8px); transition: .6s ease }
.titem.revealed{ opacity:1; transform: translateY(0) }
.titem::before{ content:""; position:absolute; left:-30px; top:22px; width:16px; height:16px; border-radius:50%; background:radial-gradient(circle at 30% 30%, #fff, #fff0 60%), linear-gradient(135deg,hsl(var(--accentA)),hsl(var(--accentB))); box-shadow:0 0 24px hsl(var(--accentB)/.6) }
.titem h4{ margin:0 0 6px; font-size:18px }
.titem .role{ color:#b3b8c7 }

/* Section Head (Projects & Experience) */
.work-head{ max-width:1200px; margin:80px auto 0; padding:0 20px }
.work-title{ font-size: clamp(28px, 5vw, 56px); line-height:1.05; letter-spacing:-.015em; margin:8px 0 6px; font-weight:900 }
.work-sub{ color: var(--muted); max-width: 780px; margin: 0 }
.grad{ background: linear-gradient(90deg, hsl(var(--accentA)), hsl(var(--accentB)) 50%, hsl(var(--accentC))); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow: 0 0 30px hsl(var(--accentB)/.25) }

/* Horizontal layout (vertical scroll -> horizontal motion) */
.projects{ margin:140px 0 80px; }
.pin{ position:sticky; top:160px; height:100vh; display:grid; place-items:start center; overflow:hidden; }
.h-mask{ width:calc(min(1200px, 100vw - 40px)); margin-inline:auto; overflow:hidden; position:relative }
.h-wrap{ position:relative; width:100%; will-change: transform; }
.h-track{ display:flex; gap:24px; padding:0; }
.card{ width:100%; max-width:100%; flex:0 0 100%; aspect-ratio: 16/10; border-radius:18px; background:linear-gradient(180deg,#0c1022,#0a0d1b); border:1px solid #1c2342; box-shadow: var(--shadow); padding:18px; display:flex; flex-direction:column; justify-content:space-between }
.card .thumb{ height:62%; border-radius:12px; border:1px solid #1b2140; background:
  radial-gradient(100% 80% at 20% 30%, hsl(var(--accentB)/.28), transparent 40%),
  radial-gradient(100% 80% at 80% 80%, hsl(var(--accentA)/.18), transparent 50%),
  linear-gradient(145deg,#0e1330,#0a0e1f);
}
.card h5{ margin:8px 0 0; font-size:18px }
.card p{ margin:6px 0 0; color:#a6aec4; font-size:14px }

/* Horizontal Experience (side-scrolling panels) */
.hsection{ margin:8px 0 24px; }
.hsection .xpanel{ height: clamp(460px, 76vh, 820px); border-radius:18px; background:linear-gradient(180deg,#0c1022,#0a0d1b); border:1px solid #1c2342; box-shadow: var(--shadow); padding:28px; display:flex; flex-direction:column; justify-content:center; width:100%; max-width:100%; flex:0 0 100%; }
.hsection .xpanel h3{ font-size: clamp(22px, 3vw, 36px); margin:0 0 10px }
.hsection .xpanel p{ color:#a6aec4; max-width: 64ch }
.hsection .pillrow{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px }
.hsection .pillrow .tag{ font-size:12px; padding:8px 12px }

/* align panels with container width like the ID card */
.hsection .h-track{ padding:0; }

/* Skills (interactive) */
.skills{ max-width:1200px; margin:-180px auto 80px; padding:0 20px }
.skills .skills-wrap{ margin-top:10px }
.skill-filters{ display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 16px }
.fchip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid #1b2140; background:linear-gradient(180deg,#0c1022,#0a0e1f); cursor:pointer; user-select:none; color: var(--fg); }
.fchip.active{ outline:1px solid #243060; box-shadow:0 0 0 1px #243060 inset, 0 0 22px hsl(var(--accentB)/.25) }

.skills-grid-wrap{ display:grid; grid-template-columns:1fr; gap:20px }
@media (max-width: 900px){ .skills-grid-wrap{ grid-template-columns:1fr } }

.grid{ display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap:12px }
@media (max-width: 1100px){ .grid{ grid-template-columns: repeat(4, 1fr) } }
@media (max-width: 700px){ .grid{ grid-template-columns: repeat(2, 1fr) } }

.pill2{ border:1px solid #1b2140; background:linear-gradient(180deg,#0c1022,#0a0e1f); padding:12px 14px; border-radius:999px; text-align:center; color:#c4c9d9; transition: transform .18s ease, box-shadow .25s ease, background .25s ease; position:relative; overflow:hidden; outline:none; display:inline-flex; align-items:center; justify-content:center; font: inherit; cursor:pointer }
.pill2::after{ content:""; position:absolute; inset:-2px; border-radius:inherit; background: radial-gradient(120px 40px at var(--hx,50%) -10%, hsl(var(--accentA)/.45), transparent 60%), radial-gradient(120px 40px at var(--hx,50%) 120%, hsl(var(--accentB)/.35), transparent 60%); filter: blur(18px); opacity:.0; transition:opacity .25s ease; }
.pill2:hover,.pill2:focus-visible{ transform: translateY(-1px) scale(1.06); box-shadow: 0 12px 30px #0007, 0 0 24px hsl(var(--accentB)/.35) }
.pill2:hover::after,.pill2:focus-visible::after{ opacity:.9 }
.pill2[hidden]{ display:none !important }
.pill2:active{ transform: translateY(0) scale(1.03) }

/* Contact */
.contact{ max-width:1200px; margin:24px auto 120px; padding:0 20px; display:grid; grid-template-columns:1.2fr .8fr; gap:28px }
@media (max-width: 900px){ .contact{ grid-template-columns:1fr } }
.contact .panel{ border:1px solid #1a2140; border-radius:18px; background:linear-gradient(180deg,#0b0f21,#0a0d1b); box-shadow: var(--shadow); padding:22px; position:relative; overflow:hidden; isolation:isolate; margin-bottom: 80px; }
.contact .panel::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background: radial-gradient(circle 110px at var(--mx,50%) var(--my,50%), hsl(var(--accentA)/.09) 0%, hsl(var(--accentA)/.06) 45%, hsl(var(--accentA)/.025) 80%, transparent 100%); filter: blur(12px); opacity:.0; transition: opacity .25s ease }
.contact .panel:hover::before, .contact .panel:focus-within::before{ opacity:.72 }
.contact .panel > *{ position:relative; z-index:1 }
.contact label{ display:block; font-size:12px; color:#9aa3b8; margin:6px 0 4px }
.contact input, .contact textarea{ width:100%; background:#0a0e1d; color:var(--fg); border:1px solid #1a2140; border-radius:12px; padding:12px 14px; outline:none }
.contact textarea{ min-height:120px; resize:vertical }
.btn{ margin-top:12px; display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; border:1px solid #20284a; background:linear-gradient(135deg,#0f1430,#0b0f24); cursor:pointer }
.btn:hover{ box-shadow: 0 10px 30px #0007 }

footer{ max-width:1200px; margin:40px auto 80px; padding:0 20px; color:#9aa3b8 }

/* Scroll progress circle */
.progress{
  position:fixed; right:16px; bottom:16px; z-index:60; width:58px; height:58px; display:grid; place-items:center;
  background:#0a0f1fcc; border:1px solid #1b2140; border-radius:50%; backdrop-filter: blur(6px);
}
.progress svg{ transform: rotate(-90deg) }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation:none }
  .backdrop::after{ animation:none }
  .titem, .id3d{ transition:none }
}

/* Screen reader only utility */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.about-id {
  margin-bottom: 10px;
  margin-left: 10px;
  margin-top: 10px;
}

.flex-text-image {
  display: flex;
  gap: 50px;
}

.center {
  display: flex;
  justify-content: center;
}

.video {
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.image {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.send-msg-btn {
  color: white;
  font-weight:900;
  background: hsl(340, 100%, 62%);
}

.profile-image{
  border-radius: 20px;
  position: relative;
  transform: translateZ(100px);
  z-index: 9999;
}

.portrait {
  position: relative;
  transform: translateZ(120px);
  z-index: 5000;
}