:root{
  --bg-1: #0f1724;
  --accent: #6ee7b7;
  --glass-bg: rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.06);
}
/* Light theme overrides when applied to documentElement */
.light-theme{
  --bg-1: #f7fafc;
  --accent: #60a5fa;
  --glass-bg: rgba(6,8,15,0.04);
  --glass-border: rgba(2,6,23,0.06);
  --text: #051023;
}

/* Invert whole UI for 'light' look, but keep actual images visually correct by counter-inverting them */
/* removed global filter inversion — use explicit colors below */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial}
body{background:linear-gradient(180deg,var(--bg-1) 0%, #071026 100%);color:#e6eef6;overflow-x:hidden}

/* Respect light theme colors */
html.light-theme body{ background: linear-gradient(180deg, var(--bg-1) 0%, #ffffff 100%); color: var(--text); }

/* Background layers */
.bg-gradient{position:fixed;inset:0;z-index:-3;background:radial-gradient(circle at 10% 20%, rgba(110,231,183,0.06), transparent 6%), radial-gradient(circle at 90% 80%, rgba(99,102,241,0.04), transparent 8%)}
.bg-noise{position:fixed;inset:0;z-index:-2;pointer-events:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="n"><feTurbulence baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.02"/></svg>')}

header.nav{display:flex;justify-content:space-between;align-items:center;padding:18px 28px}
.logo{font-weight:700;letter-spacing:2px}
.nav-links a{color:inherit;margin-left:18px;text-decoration:none}

/* group right-side controls */
.nav-right{display:flex;align-items:center;gap:8px}

/* settings button */
.settings-toggle{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px;border-radius:10px;margin-left:8px;color:inherit}
.settings-panel{position:fixed;right:18px;top:calc(64px + 1rem);z-index:220}
.settings-inner{padding:14px;width:260px}
.settings-panel{opacity:0;transform:translateY(-6px);transition:opacity 260ms ease, transform 260ms cubic-bezier(.2,.9,.3,1);pointer-events:none}
.settings-panel.open{opacity:1;transform:none;pointer-events:auto}
.settings-inner{transform:translateY(-6px) scale(.992);transition:transform 320ms cubic-bezier(.2,.9,.3,1), opacity 220ms ease}
.settings-panel.open .settings-inner{transform:none}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.settings-close{position:absolute;right:8px;top:8px;background:transparent;border:none;color:inherit}

/* light theme adjustments for glass */
html.light-theme .glass{
  background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.04));
  border:1px solid rgba(0,0,0,0.08);
  color: var(--text);
  box-shadow: 0 12px 36px rgba(2,6,23,0.06);
}
html.light-theme .nav-links a{ color: var(--text) }

/* Ensure site text and tile content use readable dark text in light mode */
html.light-theme h1, html.light-theme h2, html.light-theme h3, html.light-theme h4,
html.light-theme .logo, html.light-theme .lorem, html.light-theme .profile-info p,
html.light-theme .nav-links a, html.light-theme .note, html.light-theme .small,
html.light-theme .morph-inner, html.light-theme .morph-title, html.light-theme .morph-content,
html.light-theme .card, html.light-theme .morph-card {
  color: var(--text) !important;
}

/* Darken cards/tiles on light theme so they read as panels over the light background */
html.light-theme .card, html.light-theme .morph-card, html.light-theme .profile-card{
  background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.02));
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 30px rgba(2,6,23,0.06);
}

/* Buttons and toggles invert in light mode: darker surfaces with dark text */
html.light-theme .hero-buttons button{
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.08);
  color: var(--text);
}
html.light-theme .nav-toggle, html.light-theme .settings-toggle{
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.08);
  color: var(--text);
}

/* animated slide switch */
#themeToggle{ appearance:none; -webkit-appearance:none; width:46px; height:26px; background: rgba(255,255,255,0.12); border-radius:999px; position:relative; cursor:pointer; border:1px solid rgba(255,255,255,0.08); transition: background .28s ease, border-color .28s ease }
#themeToggle::after{ content:''; position:absolute; left:3px; top:3px; width:20px; height:20px; background:#fff; border-radius:50%; box-shadow:0 4px 10px rgba(2,6,23,0.3); transition: transform .28s cubic-bezier(.2,.9,.3,1), background .28s ease }
#themeToggle:checked{ background: linear-gradient(90deg,var(--accent), #60a5fa); border-color: rgba(0,0,0,0.08) }
#themeToggle:checked::after{ transform: translateX(20px); background: #052026 }

/* matchable slide for disable animations toggle */
#disableAnimationsToggle{ appearance:none; -webkit-appearance:none; width:46px; height:26px; background: rgba(255,255,255,0.08); border-radius:999px; position:relative; cursor:pointer; border:1px solid rgba(255,255,255,0.06); transition: background .28s ease, border-color .28s ease }
#disableAnimationsToggle::after{ content:''; position:absolute; left:3px; top:3px; width:20px; height:20px; background:#fff; border-radius:50%; box-shadow:0 4px 10px rgba(2,6,23,0.18); transition: transform .28s cubic-bezier(.2,.9,.3,1), background .28s ease }
#disableAnimationsToggle:checked{ background: linear-gradient(90deg,#cbd5e1, #94a3b8); border-color: rgba(0,0,0,0.06) }
#disableAnimationsToggle:checked::after{ transform: translateX(20px); background: #0b1220 }

/* theme fade transitions */
html, body, .bg-gradient, .glass, .card, .morph-card, .nav, .nav-links a, .hero-buttons button { transition: background 1200ms ease, color 1200ms ease, box-shadow 1200ms ease, border-color 1200ms ease, filter 1200ms ease }


.hero{padding:80px 24px 160px;position:relative}
.hero-content{max-width:1100px;margin:0 auto;display:flex;gap:36px;align-items:flex-start}
.hero-top{flex:1}
.profile-card{width:340px;padding:18px;border-radius:14px;background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(6px);will-change:transform}
.avatar{width:96px;height:96px;border-radius:10px;object-fit:cover}
.avatar-fallback{width:96px;height:96px;border-radius:10px;background:linear-gradient(135deg,#6ee7b7,#60a5fa);display:flex;align-items:center;justify-content:center;font-weight:700}


.section{padding:80px 24px}
.glass{transition:box-shadow .25s ease;}

.showcase{display:flex;gap:18px;max-width:1100px;margin:0 auto}
.showcase-main{flex:1.4;border-radius:14px;overflow:hidden;min-width:420px}
.showcase-side{flex:0 0 320px;display:flex;flex-direction:column;gap:12px}
.thumb{height:80px;border-radius:10px;background:linear-gradient(90deg,#334155,#0f1724)}

/* Media viewer styles */
.media-viewer{display:flex;flex-direction:column;gap:8px}
.media-stage{position:relative;background:linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02));border-radius:12px;overflow:hidden}
.media-slides{position:relative;width:100%;height:420px;/* fixed height so surrounding layout doesn't shift */}
.media-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.media-slide img, .media-slide video{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:center center;border-radius:10px}
.media-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.36);border:none;color:#fff;padding:10px;border-radius:8px;cursor:pointer;z-index:60}
.media-arrow.prev{left:8px}
.media-arrow.next{right:8px}
.media-controls{display:flex;align-items:center;justify-content:space-between;padding:8px}
.media-dots{display:flex;gap:6px;align-items:center;justify-content:center}
.media-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.18);cursor:pointer}
.media-dot.active{background:var(--accent)}

.media-dots .media-mute{background:transparent;border:0;color:rgba(255,255,255,0.9);margin-left:8px;padding:6px;border-radius:8px;cursor:pointer}
.media-mute svg{width:16px;height:16px}

/* Settings mute toggle styled like other switches */
#muteToggleSettings{ appearance:none; -webkit-appearance:none; width:46px; height:26px; background: rgba(255,255,255,0.12); border-radius:999px; position:relative; cursor:pointer; border:1px solid rgba(255,255,255,0.08); transition: background .28s ease, border-color .28s ease }
#muteToggleSettings::after{ content:''; position:absolute; left:3px; top:3px; width:20px; height:20px; background:#fff; border-radius:50%; box-shadow:0 4px 10px rgba(2,6,23,0.3); transition: transform .28s cubic-bezier(.2,.9,.3,1), background .28s ease }
#muteToggleSettings:checked{ background: linear-gradient(90deg,var(--accent), #60a5fa); border-color: rgba(0,0,0,0.08) }
#muteToggleSettings:checked::after{ transform: translateX(20px); background: #052026 }

@media (max-width:900px){
  .media-slides{height:260px}
}


@media (max-width:900px){
  .showcase{flex-direction:column}
  .showcase-main{min-width:0}
  .showcase-side{flex-basis:auto}
}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.card{padding:16px;border-radius:12px;border:1px solid var(--glass-border);background:var(--glass-bg);cursor:pointer}

/* Liquid / Warp visual helpers */
.liquid-layer{transform-origin:center;will-change:transform;transition:transform .08s linear}
.warp-tilt{transform-origin:center;will-change:transform}

:root.prefers-reduced-motion, @media (prefers-reduced-motion: reduce){
  .liquid-layer, .warp-tilt{transition:none}
}

/* Explicit user toggle to disable animations */
html.no-animations *, html.no-animations *::before, html.no-animations *::after{
  transition: none !important;
  animation: none !important;
}

/* Subtle glow */
.hero-glow{position:absolute;left:50%;top:40%;width:800px;height:800px;border-radius:50%;transform:translateX(-50%);filter:blur(120px);background:radial-gradient(circle,#6ee7b7,transparent 30%);opacity:.08;pointer-events:none}

/* Page load reveal animation */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Ensure cards/sections start hidden (unless reduced motion or explicitly revealed) */
.card, .section { opacity: 0; transform: translateY(30px); }

/* When body has .loaded run a staggered fadeUp on tiles */
body.loaded .card:not(.revealed), body.loaded .section:not(.revealed) {
  animation-name: fadeUp;
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(.2,.9,.3,1);
  animation-fill-mode: both;
  animation-delay: calc(var(--i, 0) * 80ms);
  animation-iteration-count: 1;
}

/* once revealed, ensure the element doesn't re-run the animation */
.revealed { animation: none !important; opacity: 1 !important; transform: none !important }

@media (prefers-reduced-motion: reduce) {
  body.loaded .card, body.loaded .section { animation: none; opacity:1; transform:none }
}

footer{padding:40px 24px;text-align:center;color:rgba(230,238,246,0.6)}

/* Utility for depth weighting */
[data-warp-depth]{--warp-depth:1}
/* ================= BASE ================= */

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  background: #05070f;
  color: #edf2ff;
  overflow-x: hidden;
  -webkit-font-smoothing:antialiased;
}

/* ================= BACKGROUND ================= */

.bg-gradient {
  position: fixed;
  inset: 0;
  background: radial-gradient(1000px circle at 10% 20%, #2b2fff33, transparent 25%),
              radial-gradient(800px circle at 90% 80%, #8a2be233, transparent 25%),
              linear-gradient(180deg,#050514 0%, #07122a 100%);
  z-index: -2;
}

.bg-noise {
  position: fixed;
  inset: 0;
  background-image: url("https://cdn.jsdelivr.net/gh/stephband/grainy-gradients@main/noise.svg");
  opacity: 0.12;
  z-index: -1;
}

/* Light theme: make background bright/white and reduce noise */
/* Use an overlay pseudo-element to fade the background into light mode smoothly */
.bg-gradient::after{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(1000px circle at 10% 20%, rgba(102,163,255,0.08), transparent 20%),
              radial-gradient(800px circle at 90% 80%, rgba(250,200,200,0.04), transparent 20%),
              linear-gradient(180deg,#ffffff 0%, #f7fafc 100%);
  opacity: 0;
  transition: opacity 1200ms ease;
  z-index: -1;
}
html.light-theme .bg-gradient::after{ opacity: 1 }
html.light-theme .bg-noise{ opacity: 0.06; filter:none }

/* ================= NAV ================= */

.nav {
  position: fixed;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 60;
}

.logo { font-weight:700; letter-spacing:2px }

.nav-toggle {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  backdrop-filter: blur(8px);
}

.nav-links {
  display: flex;
  gap: 12px;
  align-items: center;
}

.nav-links a {
  color: #e9f0ff;
  text-decoration: none;
  opacity: 0.9;
  padding: 8px 10px;
  border-radius: 8px;
}

.nav-links a.active{ background: rgba(255,255,255,0.06); box-shadow: 0 6px 20px rgba(2,6,23,0.45) }

.nav.open .nav-links { display:flex }

/* Mobile dropdown animation for nav */
@media (max-width: 880px){
  .nav-toggle{display:inline-flex}
  .nav-links{position:absolute;right:12px;top:58px;flex-direction:column;background:var(--glass-bg);border:1px solid var(--glass-border);padding:10px;border-radius:10px;backdrop-filter:blur(8px);opacity:0;transform:translateY(-8px) scale(.995);transition:opacity 320ms ease, transform 320ms cubic-bezier(.2,.9,.3,1);pointer-events:none;min-width:180px}
  .nav-links a{padding:8px 10px}
  .nav.open .nav-links{opacity:1;transform:none;pointer-events:auto}
}

/* ================= HERO ================= */

.hero {
  min-height: 84vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  padding: 40px 18px;
  background-image: radial-gradient(circle at 20% 30%, rgba(106,92,255,0.06), transparent 20%);
  background-size: cover;
}

.hero-top h1 { font-size: clamp(1.6rem,4vw,2.6rem); margin:0 }
.tagline { opacity:0.85; margin-top:6px }

.hero-glow {
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #6a5cff, transparent);
  filter: blur(80px);
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%,100% { transform: translateY(0px); }
  50% { transform: translateY(-30px); }
}

/* ================= GLASS ================= */

.glass {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px) saturate(120%);
  border-radius: 14px;
  overflow: hidden;
}

.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px circle at 10% 10%, rgba(255,255,255,0.03), transparent 20%),
              linear-gradient(180deg, rgba(255,255,255,0.01), transparent 60%);
  mix-blend-mode: overlay;
  pointer-events: none;
}

.glass.liquid::after {
  content: "";
  position: absolute;
  left: -30%;
  top: -40%;
  width: 160%;
  height: 160%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.05), transparent 20%);
  transform: rotate(-12deg);
  filter: blur(18px);
  opacity: 0.6;
}

/* ================= SECTIONS ================= */

.section {
  padding: 48px 18px;
  max-width: 1100px;
  margin: auto;
}

/* ================= GRID ================= */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.card {
  padding: 20px;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-10px);
}

/* ================= PLACEHOLDER ================= */

.placeholder {
  height: 120px;
  margin-top: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

/* ================= TIMELINE ================= */

.timeline {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.dot {
  padding: 10px;
  border-left: 2px solid #6a5cff;
  padding-left: 15px;
}

/* ================= FOOTER ================= */

footer {
  text-align: center;
  padding: 40px;
  opacity: 0.6;
}

/* Profile card inside hero */
.profile-card {
  display:flex;
  gap:12px;
  align-items:center;
  padding:14px;
  max-width:520px;
  margin:18px auto 0;
}
.avatar-wrap{width:72px;height:72px;flex:0 0 72px;border-radius:12px;overflow:hidden;position:relative;background:linear-gradient(135deg,#6a5cff,#8a2be2);display:flex;align-items:center;justify-content:center}
.avatar{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:2}
.avatar-fallback{position:absolute;color:white;font-weight:700;font-size:28px;z-index:1}
.profile-info p{margin:6px 0 0;font-size:0.9rem;opacity:0.95}
.hero-buttons{display:flex;gap:10px;margin-top:10px}
.hero-buttons button{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.06);color:white;padding:8px 12px;border-radius:10px}

/* Showcase */
.showcase{display:flex;gap:12px;padding:12px}
.showcase-main{flex:2;min-height:220px}
.showcase-side{flex:1;display:flex;flex-direction:column;gap:10px}
.thumb{height:66px}

/* Hobbies as clickable cards */
.hobbies-grid .card{cursor:pointer;text-align:center;padding:18px}

/* Modal + overlay */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(6px);z-index:120;display:flex;align-items:center;justify-content:center}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:130;max-width:520px;width:92%;background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));border-radius:12px;padding:18px;box-shadow:0 8px 30px rgba(2,6,23,0.6)}
.modal-close{position:absolute;right:12px;top:12px;background:transparent;border:none;color:#fff;font-size:18px}

/* Desktop tweaks */
@media(min-width:820px){
  .nav { top:18px; left:24px; right:24px }
  .nav-links{display:flex}
  .nav-toggle{display:none}
  .hero { padding:72px 40px }
  .hero-content{display:flex;align-items:center;justify-content:space-between;gap:24px}
  .profile-card { margin:0 }
  .showcase-main{min-height:320px}
}

/* Respect hidden attribute so overlay isn't visible by default */
.overlay[hidden], .modal[hidden] { display: none !important; opacity: 0; pointer-events: none }

/* Modal open animation: magic lamp pop */
.overlay.open{ animation: fadeInOverlay 220ms ease both }
.modal.open{ animation: magicLamp 420ms cubic-bezier(.2,.9,.3,1) both }

@keyframes fadeInOverlay {
  from { opacity: 0 }
  to { opacity: 1 }
}

@keyframes magicLamp {
  0% { transform: translate(-50%,-40%) scale(0.85) rotate(-6deg); opacity: 0 }
  60% { transform: translate(-50%,-52%) scale(1.03) rotate(2deg); opacity: 1 }
  100% { transform: translate(-50%,-50%) scale(1) rotate(0deg); opacity: 1 }
}

/* Wobble tiles: subtle continuous motion + pointer-driven momentum */
.card{ --tx:0; --ty:0; --r:0; --s:1; transform: translate3d(var(--tx), var(--ty), 0) rotate(var(--r)) scale(var(--s)); transition: transform 220ms cubic-bezier(.2,.9,.3,1) }
.card.wobble { animation: slowWobble 6s ease-in-out infinite }

@keyframes slowWobble{
  0%{ transform: translate3d(0,0,0) rotate(-0.3deg) }
  50%{ transform: translate3d(0.6px,-1px,0) rotate(0.4deg) }
  100%{ transform: translate3d(0,0,0) rotate(-0.3deg) }
}

/* Liquid sheen hover */
.glass:hover::after{ transform: translateX(12%) rotate(-8deg); opacity:0.85 }

/* Mobile full-screen nav when open */
.nav.open .nav-links{
  /* compact dropdown panel anchored under the header */
  position:absolute;
  top:64px;
  right:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
  justify-content:flex-start;
  width:220px;
  padding:12px;
  background: linear-gradient(180deg, rgba(6,10,26,0.95), rgba(6,10,26,0.98));
  border-radius:12px;
  box-shadow: 0 18px 60px rgba(2,6,23,0.6);
  z-index:80;
  animation: panelIn 220ms cubic-bezier(.2,.9,.3,1) both;
}

@keyframes panelIn{ from{ transform: translateY(8px); opacity:0 } to{ transform:none; opacity:1 } }

/* depth */
.card{ box-shadow: 0 6px 24px rgba(2,6,23,0.5) }

/* Text placeholders */
.lorem{ color: rgba(255,255,255,0.85); opacity:0.95; line-height:1.4 }

/* Morphing card (button -> full tile) */
.morph-card{
  position:fixed; z-index:140; left:0; top:0; width:100px; height:40px; border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  box-shadow: 0 18px 60px rgba(2,6,23,0.6);
  overflow:hidden; display:flex; flex-direction:column; transition: all 420ms cubic-bezier(.2,.9,.3,1);
}
.morph-inner{ padding:0; color: #f2f6ff; display:flex; flex-direction:row; gap:0; height:100%; }
.morph-media{flex:0 0 44%; background:#081018; display:flex; align-items:center; justify-content:center; overflow:hidden}
.morph-media img{width:100%; height:100%; object-fit:cover}
.morph-body{flex:1; padding:18px; display:flex; flex-direction:column; gap:12px}
.morph-title{ font-size:1.05rem; font-weight:700; transform-origin:left top; transition: transform 320ms cubic-bezier(.2,.9,.3,1); }
.morph-content{ opacity:0; transform: translateY(8px); transition: opacity 240ms ease, transform 240ms ease; color: rgba(255,255,255,0.9); max-height:56vh; overflow:auto }
.morph-content a{ color: inherit; text-decoration: underline; pointer-events: auto }
.morph-content.show{ opacity:1; transform:none }
.morph-close{ position:absolute; right:12px; top:12px; background:transparent; border:none; color:#fff; font-size:18px; cursor:pointer }

/* Hobbies: ensure text reads white on tiles */
.hobbies-grid .card { color: #ffffff; }

/* Dock-like scale origin for hobby buttons */
.hobbies-grid .card { transform-origin: 50% 90%; }

/* ================= MOBILE TUNING ================= */
html{ -webkit-text-size-adjust:100%; }

@media (max-width: 820px){
  .hero { padding: 40px 18px; min-height:68vh }
}

@media (max-width: 480px){
  /* general spacing and scale */
  body{font-size:15px}
  .hero{padding:28px 12px;min-height:66vh}
  .hero-top h1{font-size:1.4rem}
  .tagline{font-size:0.92rem}

  /* stack hero content */
  .hero-content{flex-direction:column;align-items:center;gap:14px}
  .profile-card{width:100%;max-width:720px;padding:12px;border-radius:12px;margin:8px 0}
  .avatar-wrap{width:56px;height:56px;flex:0 0 56px}

  /* showcase stack */
  .showcase{flex-direction:column}
  .showcase-side{width:100%;flex-direction:row;gap:10px}
  .thumb{height:56px}

  /* ensure morph occupies readable area and doesn't overflow */
  .morph-card{left:4% !important; top:6% !important; width:92% !important; height:auto !important; max-height:86vh}

  /* Stack morph media above text on small screens */
  .morph-inner{ flex-direction: column }
  .morph-media{ width:100%; flex:0 0 auto; height:200px }
  .morph-media img{ height:100%; object-fit:cover }
  .morph-body{ padding:12px }
  .morph-close{ right:10px; top:10px }

  /* reduce visual noise on small screens */
  .hero-glow{display:none}
  .glass::after{display:none}

  /* touch-friendly nav */
  .nav { top:8px; left:8px; right:8px; padding:8px 12px }
  .nav-links a{ padding:12px 10px }

  /* disable hover lift on touch devices */
  .card:hover { transform: none }

  /* lighten shadows for battery/perf */
  .card, .morph-card, .profile-card{box-shadow: 0 8px 20px rgba(2,6,23,0.35)}
}

@media (hover: none){
  /* disable hover-only effects on touch devices */
  .glass:hover::after{ transform: none; opacity: 0.6 }
  .card:hover{ transform:none }
}

/* Contact form styles */
.contact-grid{ display:flex; gap:20px; align-items:flex-start; justify-content:space-between; max-width:1100px; margin:12px auto }
.contact-form{ flex:1; min-width:260px; display:flex; flex-direction:column; gap:10px }
.contact-form label{ font-size:0.85rem; opacity:0.9 }
.contact-form input, .contact-form textarea{ background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); padding:10px 12px; color:inherit; border-radius:10px; outline:none }
.contact-form input:focus, .contact-form textarea:focus{ box-shadow:0 8px 30px rgba(6,8,20,0.5); border-color: rgba(110,231,183,0.18) }
.contact-actions{ display:flex; gap:8px; align-items:center }
.btn-primary{ display:inline-flex; align-items:center; gap:8px; background: linear-gradient(90deg,#6ee7b7,#60a5fa); color:#052026; border:none; padding:10px 16px; border-radius:12px; cursor:pointer; font-weight:700; box-shadow:0 8px 26px rgba(6,22,32,0.18); text-decoration:none }
.btn-ghost{ background:transparent; border:1px solid rgba(255,255,255,0.06); color:inherit; padding:8px 12px; border-radius:10px; cursor:pointer }
/* Icon styling inside ghost buttons */
.btn-ghost svg{ width:16px; height:16px; margin-right:8px; vertical-align:middle; display:inline-block }
.btn-ghost span{ vertical-align:middle }
.social-yt svg{ color: #ff0000 }
.social-ig svg{ color: #E1306C }
.note{ font-size:0.86rem; opacity:0.9 }

.contact-aside{ width:260px; flex:0 0 260px }
.contact-aside h3{ margin-top:0 }
.social-links{ display:flex; flex-direction:column; gap:8px }
.social{ display:flex; gap:10px; align-items:center; padding:8px 10px; border-radius:10px; color:inherit; text-decoration:none; border:1px solid rgba(255,255,255,0.03); background: rgba(255,255,255,0.02) }
.social svg{ opacity:0.95 }
.social span{ font-size:0.95rem }

@media (max-width: 820px){
  .contact-grid{ flex-direction:column-reverse; gap:18px }
  .contact-aside{ width:100% }
}

/* Mobile / small-screen spacing fixes so sections don't touch the screen edges */
@media (max-width: 900px){
  body{padding-left:12px;padding-right:12px}
  .section, .hero, .showcase, .contact-grid{ padding-left:18px;padding-right:18px }
  .hero-content{flex-direction:column;align-items:center;gap:18px}
  .profile-card{width:100%;max-width:420px}
  .avatar-wrap{width:72px;height:72px;flex:0 0 72px}
  .showcase{gap:12px;padding:12px}
  .card{padding:14px}
}