/* =====================================================================
   ENHANCED VISUAL SYSTEM — 2026
   Deep-space UI, darker liquid glass, responsive depth and micro-motion.
===================================================================== */

:root{
  --glass-bg:rgba(4,7,14,.30);
  --glass-bg-strong:rgba(3,6,12,.46);
  --glass-line:rgba(214,225,255,.13);
  --glass-line-hot:rgba(220,232,255,.22);
  --text-main:#f5f7fb;
  --text-soft:rgba(222,229,241,.78);
  --text-dim:rgba(171,184,207,.72);
  --accent:rgba(132,160,255,.95);
}

/* Never allow the large WebGL panels to become white sheets. */
html.liquid-glass-ready .education-shell,
html.liquid-glass-ready .achievement-shell,
html.liquid-glass-ready .leadership-shell,
html.liquid-glass-ready .contact-shell,
html.liquid-glass-ready .command-panel,
html.liquid-glass-ready .project-modal-card{
  background:rgba(2,5,11,.38)!important;
  border:1px solid var(--glass-line)!important;
  color:var(--text-main)!important;
  box-shadow:
    0 32px 100px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.34)!important;
}

/* Education is deliberately darker than the smaller cards. */
html.liquid-glass-ready .education-shell{
  background:
    radial-gradient(circle at 12% 8%,rgba(104,132,255,.055),transparent 28%),
    radial-gradient(circle at 88% 92%,rgba(116,76,255,.045),transparent 30%),
    rgba(2,5,11,.42)!important;
}

html.liquid-glass-ready .education-shell .glass-card,
html.liquid-glass-ready .education-card,
html.liquid-glass-ready .profile-card{
  background:rgba(7,11,20,.48)!important;
  border-color:rgba(220,230,255,.12)!important;
}

html.liquid-glass-ready .glass-card{
  color:var(--text-main)!important;
}

html.liquid-glass-ready .glass-card h2,
html.liquid-glass-ready .glass-card h3,
html.liquid-glass-ready .glass-panel h2,
html.liquid-glass-ready .glass-panel h3{
  color:#f5f7fb!important;
  text-shadow:0 2px 22px rgba(0,0,0,.42);
}

html.liquid-glass-ready .glass-card p:not(.mini-label):not(.eyebrow),
html.liquid-glass-ready .glass-panel p:not(.mini-label):not(.eyebrow){
  color:var(--text-soft)!important;
}

html.liquid-glass-ready .mini-label,
html.liquid-glass-ready .eyebrow,
html.liquid-glass-ready .meta-row{
  color:var(--text-dim)!important;
}

/* Give the WebGL canvas breathing room instead of a flat opaque surface. */
html.liquid-glass-ready .glass-panel>canvas,
html.liquid-glass-ready .glass-card>canvas{
  opacity:.62!important;
  mix-blend-mode:normal!important;
}

html.liquid-glass-ready .education-shell>canvas{
  opacity:.54!important;
}

/* Subtle optical edge and animated ambient sheen. */
html.liquid-glass-ready .glass-panel,
html.liquid-glass-ready .glass-card{
  isolation:isolate;
  overflow:hidden;
}

html.liquid-glass-ready .glass-panel::after,
html.liquid-glass-ready .glass-card::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:4!important;
  background:
    linear-gradient(112deg,transparent 0%,rgba(255,255,255,.035) 28%,transparent 43%),
    radial-gradient(circle at var(--mx,50%) var(--my,20%),rgba(150,175,255,.055),transparent 30%);
  opacity:.75;
  transform:translateX(-18%);
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
html.liquid-glass-ready .glass-panel:hover::after,
html.liquid-glass-ready .glass-card:hover::after{
  transform:translateX(8%);
}

.glass-card,
.project-card,
.experience-card,
.skill-card,
.certificate-card{
  transition:
    transform .45s cubic-bezier(.2,.7,.2,1),
    border-color .35s ease,
    box-shadow .45s ease,
    filter .35s ease!important;
  transform:translate3d(0,0,0);
}

@media (hover:hover) and (pointer:fine){
  .glass-card:hover{
    transform:translate3d(0,-5px,0);
    will-change:transform;
    border-color:rgba(190,210,255,.19)!important;
    box-shadow:0 28px 70px rgba(0,0,0,.34)!important;
  }
}

/* Make the first viewport feel intentional instead of stretched. */
#education{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:clamp(88px,10vh,132px)!important;
  padding-bottom:clamp(48px,7vh,92px)!important;
}

.education-shell{
  width:min(1240px,calc(100% - 32px))!important;
  margin-inline:auto!important;
}

.education-grid{
  gap:clamp(16px,2vw,28px)!important;
}

.education-card,
.profile-card{
  min-height:0!important;
}

/* Better responsive hierarchy. */
.section-title h2,
.section-intro h1{
  text-wrap:balance;
}

@media(max-width:760px){
  #education{
    min-height:auto;
    padding-top:86px!important;
  }

  .education-shell{
    width:min(100% - 24px,680px)!important;
  }

  html.liquid-glass-ready .education-shell{
    background:rgba(2,5,11,.48)!important;
  }

  html.liquid-glass-ready .glass-panel>canvas,
  html.liquid-glass-ready .glass-card>canvas{
    opacity:.48!important;
  }

  html.liquid-glass-ready .education-shell>canvas{
    opacity:.40!important;
  }
}

/* Small status beacon and technical HUD accents. */
.site-header nav::before{
  content:"LIVE";
  position:absolute;
  left:-64px;
  top:50%;
  transform:translateY(-50%);
  font:700 8px/1 "Space Grotesk",sans-serif;
  letter-spacing:.16em;
  color:rgba(185,205,255,.55);
}

@media(max-width:760px){
  .site-header nav::before{display:none}
}

/* Stronger focus states without breaking the glass visual. */
a:focus-visible,
button:focus-visible,
input:focus-visible{
  outline:1px solid rgba(180,202,255,.72)!important;
  outline-offset:4px!important;
}

/* Better command center readability. */
.command-panel{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.command-panel .command-item{
  border-color:rgba(215,226,255,.09)!important;
  background:rgba(255,255,255,.025)!important;
}
.command-panel .command-item:hover{
  background:rgba(125,153,255,.10)!important;
  border-color:rgba(170,193,255,.22)!important;
}

/* Give the background a little more cinematic depth behind content. */
#scene{
  filter:saturate(112%) contrast(108%)!important;
}
#scene::before{
  opacity:.92!important;
}
.grain{
  animation:grain-drift 9s steps(8) infinite;
}
@keyframes grain-drift{
  0%,100%{transform:translate3d(0,0,0)}
  25%{transform:translate3d(-1%,1%,0)}
  50%{transform:translate3d(1%,-1%,0)}
  75%{transform:translate3d(.5%,1%,0)}
}

/* Reduced motion remains genuinely reduced. */
@media(prefers-reduced-motion:reduce){
  .glass-card,
  .project-card,
  .experience-card,
  .skill-card,
  .certificate-card{
    transition:none!important;
  }
  .grain{animation:none!important}
}