/* Elevation Technology — Styles */
/* Theme variables */
:root{
  /* Dark (default) */
  --bg:#070a12;
  --panel:#0c1220;
  --muted:#0f1626;
  --text:#e7ecf6;
  --dim:#a9b3c7;
  --primary:#0ea5e9; /* sky blue */
  --primary-2:#6366f1; /* indigo */
  --accent:#22c55e;
  --danger:#ef4444;
  --ring: rgba(99,102,241,.35);
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.18);
  --max:1200px;
}
/* Light theme overrides (aligned with existing blue/indigo tone) */
:root[data-theme="light"]{
  --bg:#f6f8fc;
  --panel:#ffffff;
  --muted:#f0f4fb;
  --text:#0b1020;
  --dim:#475569; /* slate */
  --primary:#0ea5e9;
  --primary-2:#6366f1;
  --accent:#059669; /* tealish accent for better cb-friendliness in light */
  --danger:#b91c1c;
  --ring: rgba(14,165,233,.35);
  --border: rgba(0,0,0,.08);
  --border-strong: rgba(0,0,0,.16);
}
/* Color-blind friendly theme (reduce red/green reliance, keep brand tone) */
:root[data-theme="cb"]{
  --bg:#0a0f1a;
  --panel:#121a2a;
  --muted:#0f1626;
  --text:#eef3fb;
  --dim:#b8c2d8;
  --primary:#2bb3ff; /* brighter cyan for clarity */
  --primary-2:#7d83ff; /* lighter indigo */
  --accent:#ffb347; /* orange accent instead of green */
  --danger:#ff6b6b; /* salmon for clearer separation from greens */
  --ring: rgba(43,179,255,.35);
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.18);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text); background: radial-gradient(1200px 600px at 80% -10%, rgba(0,212,255,.10), transparent 60%),
           radial-gradient(900px 500px at -10% 10%, rgba(99,102,241,.10), transparent 60%),
           radial-gradient(1000px 600px at 120% 120%, rgba(14,165,233,.08), transparent 60%), var(--bg);
  line-height:1.6; letter-spacing:.2px;
  padding-top:64px; /* reserve space for fixed header */
}
.container{max-width:var(--max); margin:auto; padding:0 24px}
.section{padding:72px 0}
.section.alt{background:linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,.02)), var(--panel)}
.section-title{font-size:32px; margin:0 0 24px}

.site-header{position:fixed; top:0; left:0; right:0; z-index:1200; background:color-mix(in oklab, var(--panel) 88%, transparent); backdrop-filter: saturate(140%) blur(10px); border-bottom:1px solid var(--border)}
.nav{display:flex; align-items:center; justify-content:space-between; min-height:64px}
.brand{display:flex; gap:10px; align-items:center; color:var(--text); text-decoration:none; font-weight:700}
.brand .logo{filter: drop-shadow(0 2px 8px rgba(0,212,255,.25))}

.primary-nav{display:flex; gap:18px; align-items:center}
.primary-nav a{color:var(--text); text-decoration:none; opacity:.9}
.primary-nav a:hover{opacity:1}
.primary-nav .btn-small{padding:8px 12px; border:1px solid var(--border-strong); border-radius:8px}
.site-header .btn{ color: var(--text); }

/* Theme switcher */
.theme-control{display:inline-flex; align-items:center; gap:8px; margin-left:8px}
.theme-select{appearance:none; background:var(--panel); color:var(--text); border:1px solid var(--border-strong); border-radius:10px; padding:8px 10px; font-size:14px}

.nav-toggle{display:none; font-size:22px; background:none; border:0; color:var(--text)}

.hero{padding:72px 0}
.hero-grid{display:grid; grid-template-columns: 1.6fr .4fr; align-items:center; gap:32px}
.hero h1{font-size:40px; line-height:1.1; margin:0 0 12px}
.hero p{color:var(--dim); font-size:18px}
.cta{display:flex; gap:12px; margin:18px 0 8px}
.trust{display:flex; gap:18px; padding:0; margin:14px 0 0; list-style:none; color:var(--dim); font-size:14px}
.hero-art{position:relative; min-height:260px; isolation:isolate; justify-self:end; max-width:420px}
.hero-img{width:100%; max-height:320px; object-fit:cover; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.35); animation:floatIn .9s ease both}
.mesh{position:absolute; inset:0; background: radial-gradient(600px 300px at 70% 20%, rgba(0,212,255,.18), transparent 60%), radial-gradient(500px 220px at 30% 80%, rgba(99,102,241,.25), transparent 60%)}
.orb{position:absolute; filter: blur(20px); opacity:.65}
.orb-a{top:10%; right:15%; width:160px; height:160px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #fff, var(--primary-2) 40%, transparent 70%)}
.orb-b{bottom:10%; left:10%; width:140px; height:140px; border-radius:50%; background: radial-gradient(circle at 70% 70%, #fff, var(--primary) 40%, transparent 70%)}

.cards{display:grid; grid-template-columns: repeat(5, 1fr); gap:16px}
.cards.three{grid-template-columns: repeat(3, 1fr)}
.card{background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:18px; transition: transform .25s ease, box-shadow .25s ease; display:flex; flex-direction:column}
.card:hover{transform:translateY(-4px); box-shadow:0 12px 30px rgba(0,0,0,.25)}
.card h3{margin:0 0 8px; font-size:18px}
.card p{margin:0 0 6px; color:var(--dim)}
.card.compact{padding:16px}

.pill-grid{display:flex; flex-wrap:wrap; gap:10px}
.pill{background: linear-gradient(90deg, color-mix(in oklab, var(--primary-2) 35%, transparent), color-mix(in oklab, var(--primary) 35%, transparent)); border:1px solid rgba(255,255,255,.06); color:var(--text); padding:8px 12px; border-radius:999px; font-size:14px}

.steps{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; padding-left:18px}
.steps li{background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:14px}
.steps h3{margin:0 0 6px; font-size:16px}

.about-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:24px; align-items:start}
.about-card{background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:18px}
.profile{display:flex; gap:12px; align-items:center; margin-bottom:12px}
.avatar{width:44px; height:44px; border-radius:10px; display:grid; place-items:center; background: linear-gradient(135deg, var(--primary), var(--primary-2)); font-weight:800}
.avatar-img{width:56px; height:56px; border-radius:10px; object-fit:cover; border:1px solid rgba(255,255,255,.12); box-shadow:0 2px 8px rgba(0,0,0,.3)}
.name{font-weight:700}
.title{color:var(--dim); font-size:14px}
.link{color:#cde7ff; text-decoration:none}

/* Social links under profile */
.social-links{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px }
.social-links .link{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--border-strong); border-radius:999px; color:var(--text); background: transparent }
.social-links .link:hover{ background: rgba(255,255,255,.04); border-color: color-mix(in oklab, var(--text) 20%, transparent) }
.social-links .icon{ width:16px; height:16px; margin:0; vertical-align:0; filter:none }

.contact-grid{display:grid; grid-template-columns: .9fr 1.1fr; gap:24px}
.form{background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:18px}
.row{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.field{display:flex; flex-direction:column; gap:8px}
.field.checkbox{flex-direction:row; align-items:center; gap:10px}
label{font-weight:600}
input, textarea{background:var(--muted); color:var(--text); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:12px 12px; outline:none}
input:focus, textarea:focus{border-color:var(--primary); box-shadow:0 0 0 6px var(--ring)}
.hp{display:none !important}
.status{margin-left:12px; color:var(--dim)}
.small{font-size:12px}
.dim{color:var(--dim)}

.btn{display:inline-flex; align-items:center; justify-content:center; text-decoration:none; color:#fff; background:transparent; border:1px solid var(--border-strong); padding:12px 16px; border-radius:12px}
.btn:hover{border-color: color-mix(in oklab, var(--text) 24%, transparent)}
.btn-ghost{background: transparent}
.btn-primary{background: linear-gradient(90deg, var(--primary), var(--primary-2)); border:0}
.btn-small{padding:8px 12px}

.icon{width:20px; height:20px; vertical-align:-4px; margin-right:8px; filter: drop-shadow(0 1px 4px rgba(0,212,255,.25))}

.site-footer{margin-top:48px; border-top:1px solid rgba(255,255,255,.08); padding:28px 0 48px}
.footer-grid{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.footer-nav{display:flex; gap:16px}
.footer-nav a{color:var(--dim); text-decoration:none}
.footer-nav a:hover{color:var(--text)}

/* Responsive */
@media (max-width: 1024px){
  .cards{grid-template-columns: repeat(3, 1fr)}
  .steps{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 820px){
  .hero-grid, .about-grid, .contact-grid{grid-template-columns: 1fr}
}
@media (max-width: 720px){
  .cards{grid-template-columns: 1fr}
  .cards.three{grid-template-columns: 1fr}
  .row{grid-template-columns: 1fr}
  .nav-toggle{display:block}
  .primary-nav{position:absolute; top:64px; right:12px; left:12px; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:10px; display:none; flex-direction:column}
  .primary-nav.open{display:flex}
}

/* Video embeds */
.video-embed{position:relative; width:100%; padding-top:56.25%; border-radius:12px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.35); background:#000}
.card .video-embed{ margin-top:auto }
.video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* Simple enter animation */
@keyframes floatIn{from{opacity:0; transform:translateY(12px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)}}

/* Utilities */
.hidden{display:none !important}
.visually-hidden{position:absolute!important; width:1px!important; height:1px!important; margin:-1px!important; border:0!important; padding:0!important; white-space:nowrap!important; clip-path:inset(100%)!important; clip:rect(0 0 0 0)!important; overflow:hidden!important}


/* === Dynamic Enhancements (non-invasive) === */
/* Morphing gradient background */
body::before{
  content:""; position:fixed; inset:-20%; z-index:-2; pointer-events:none;
  background: radial-gradient(60% 80% at 20% 20%, color-mix(in oklab, var(--primary) 35%, transparent), transparent 70%),
              radial-gradient(70% 70% at 80% 30%, color-mix(in oklab, var(--primary-2) 35%, transparent), transparent 75%),
              radial-gradient(60% 60% at 50% 80%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 80%);
  filter: saturate(140%) blur(40px);
  animation: gradientShift 22s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce){ body::before{ animation: none } }
@keyframes gradientShift{
  0%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(2%, -1%, 0) scale(1.04); }
  100%{ transform: translate3d(-2%, 1%, 0) scale(1.02); }
}

/* Background canvas for particles */
#bgfx{ position: fixed; inset:0; z-index:-1; pointer-events:none; opacity:.8 }

/* Floating orbs for depth */
.bg-orb{ position: fixed; z-index:-1; width:220px; height:220px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--primary) 55%, #fff0), #0000 70%);
  filter: blur(18px) saturate(130%); opacity:.35; animation: floatOrb 28s ease-in-out infinite; mix-blend-mode: screen;
}
.bg-orb.alt{ background: radial-gradient(circle at 70% 60%, color-mix(in oklab, var(--primary-2) 55%, #fff0), #0000 70%); animation-duration: 34s }
@keyframes floatOrb{
  0%{ transform: translate3d(0,0,0) }
  25%{ transform: translate3d(-6vw, -2vh, 0) }
  50%{ transform: translate3d(4vw, 3vh, 0) }
  75%{ transform: translate3d(-3vw, 5vh, 0) }
  100%{ transform: translate3d(0,0,0) }
}

/* Gradient text & glow */
.gradient-text{ background: linear-gradient(90deg, var(--primary), var(--primary-2)); -webkit-background-clip:text; background-clip:text; color: transparent }
.text-glow{ text-shadow: 0 0 14px color-mix(in oklab, var(--primary) 35%, transparent), 0 0 28px color-mix(in oklab, var(--primary-2) 25%, transparent); animation: textGlow 4s ease-in-out infinite alternate }
@keyframes textGlow{ from{ text-shadow: 0 0 8px color-mix(in oklab, var(--primary) 25%, transparent) } to{ text-shadow: 0 0 18px color-mix(in oklab, var(--primary-2) 35%, transparent) } }

/* Non-flicker animated appearance for headings */
.gradient-animate{ background-size: 200% 100%; animation: gradientTextShift 8s ease-in-out infinite }
@keyframes gradientTextShift{ 0%{ background-position: 0% 50% } 50%{ background-position: 100% 50% } 100%{ background-position: 0% 50% } }
@media (prefers-reduced-motion: reduce){ .gradient-animate{ animation-play-state: paused } }

/* Motion override: allow forcing animations ON or OFF regardless of OS */
html[data-motion="on"] .gradient-animate{ animation-play-state: running !important }
html[data-motion="off"] .gradient-animate{ animation-play-state: paused !important }
html[data-motion="on"] .text-glow{ animation-play-state: running !important }
html[data-motion="off"] .text-glow{ animation-play-state: paused !important }
html[data-motion="on"] body::before{ animation-play-state: running !important }
html[data-motion="off"] body::before{ animation-play-state: paused !important }
html[data-motion="on"] body::after{ animation-play-state: running !important }
html[data-motion="off"] body::after{ animation-play-state: paused !important }

/* One-time gentle fade-in that does not rewrite text */
.fade-in-once{ opacity:0; animation: fadeInOnce .9s ease both }
@keyframes fadeInOnce{ from{ opacity:0; transform: translateY(6px) } to{ opacity:1; transform: none } }

/* Typewriter effect (used with JS for content management) */
.typewriter{ border-right: 2px solid color-mix(in oklab, var(--primary) 80%, #fff); white-space: nowrap; overflow: hidden }
@keyframes caretPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.2 } }
.typewriter{ animation: caretPulse 1s steps(1) infinite }

/* Button interactions */
.btn{ position: relative; overflow: hidden; transform: translateZ(0) }
.btn.pulse{ animation: pulse 2.2s ease-in-out infinite }
@keyframes pulse{ 0%,100%{ box-shadow: 0 0 0 0 rgba(99,102,241,.0) } 50%{ box-shadow: 0 0 0 12px rgba(99,102,241,.12) } }
.btn.rotating-border::before{ content:""; position:absolute; inset:-2px; border-radius: inherit; padding:2px; background:
  conic-gradient(from var(--angle, 0deg), var(--primary), var(--primary-2), var(--accent), var(--primary)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: rotateBorder 6s linear infinite }
@keyframes rotateBorder{ to{ --angle: 360deg } }
.btn:active{ animation: bounceClick .3s ease-out }
@keyframes bounceClick{ 0%{ transform: translateZ(0) scale(1) } 50%{ transform: scale(.96) } 100%{ transform: scale(1) } }

/* Reveal on scroll */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease }
.reveal.is-visible{ opacity:1; transform:none }

/* Card tilt visual helpers */
.card{ transform-style: preserve-3d; transition: transform .2s ease, box-shadow .2s ease }
.card.tilt{ box-shadow: 0 14px 35px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) }
.card .glow{ position:absolute; inset:-1px; border-radius:12px; pointer-events:none; background: radial-gradient(120px 80px at var(--mx,50%) var(--my,50%), color-mix(in oklab, var(--primary) 20%, transparent), transparent 80%); opacity:0; transition: opacity .2s ease }
.card.tilt .glow{ opacity:.8 }

/* Custom cursor (no trail) */
.cursor{ position: fixed; top:0; left:0; width:14px; height:14px; border-radius:50%; pointer-events:none; z-index:9999; transform: translate(-50%, -50%); mix-blend-mode: difference; background:#fff; opacity:.9 }
.cursor-ring{ position: fixed; top:0; left:0; width:36px; height:36px; border-radius:50%; pointer-events:none; z-index:9998; transform: translate(-50%, -50%); border:2px solid rgba(255,255,255,.6); mix-blend-mode: difference; transition: width .12s ease, height .12s ease, opacity .2s ease }
@media (pointer: coarse){ .cursor, .cursor-ring{ display:none } }

/* Floating Action Buttons */
.fab-wrap{ position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:10px; z-index:1000 }
.fab{ display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background: linear-gradient(135deg, var(--primary), var(--primary-2)); color:#fff; border:1px solid rgba(255,255,255,.18); box-shadow: 0 8px 24px rgba(0,0,0,.3); transform: translateY(20px); opacity:0; animation: fabIn .6s ease forwards }
.fab.secondary{ background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 65%, #0000), color-mix(in oklab, var(--primary-2) 65%, #0000)) }
@keyframes fabIn{ to{ transform:none; opacity:1 } }
.fab:hover{ filter: brightness(1.05) }

/* Smooth section transitions helper */
.section.reveal{ will-change: opacity, transform }


/* === Dynamic Pulse Lines background (replaces bubbles/particles) === */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    repeating-linear-gradient( 90deg,
      color-mix(in oklab, var(--primary) 18%, transparent) 0 2px,
      transparent 2px 8px
    ),
    repeating-linear-gradient( 0deg,
      color-mix(in oklab, var(--primary-2) 12%, transparent) 0 2px,
      transparent 2px 10px
    );
  background-size: 200% 200%, 150% 150%;
  background-position: 0% 0%, 0% 0%;
  mix-blend-mode: screen;
  opacity: .22;
  transform: translateZ(0);
  animation: pulseLines 14s ease-in-out infinite;
}
@keyframes pulseLines{
  0%{ background-position: 0% 0%, 0% 0%; opacity:.18 }
  50%{ background-position: 100% 50%, 50% 100%; opacity:.28 }
  100%{ background-position: 0% 0%, 0% 0%; opacity:.18 }
}
@media (prefers-reduced-motion: reduce){ body::after{ animation: none } }


/* Disable pulse lines when waves effect is active */
html[data-effect="waves"] body::after{ content: none; }


/* Hide any legacy Motion selector UI (on/off/auto) */
#motion,
#motion-select,
.motion-select,
.motion-control,
[data-motion-control]{
  display:none !important;
}


/* About CTA alignment: center the Start a project button on About page */
.about-cta{ display:flex; justify-content:center; }


/* Project card subsections */
.subsections{ display:flex; flex-direction:column; gap:10px; margin-bottom:10px }
.subsec{}
.subsection-title{ margin:8px 0 4px; font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--dim) }


/* --- Consistent alignment for YouTube embeds across project cards --- */
/* Ensure each card stretches to the full row height so internal flex layout works uniformly */
.cards .card{ height:100% }

/* Create a consistent space for text above the video so iframes start at the same vertical position */
.cards.three .card .subsections{ min-height:180px }

/* Tweak for tablet widths where copy wraps differently */
@media (max-width: 1024px){
  .cards .card .subsections{ min-height:160px }
}

/* On single-column mobile, let content flow naturally */
@media (max-width: 720px){
  .cards .card .subsections{ min-height:0 }
}