/* ==========================================================================
   GLASS LOOK (glassmorphism) — loaded after style.css.
   To go back to the flat style: delete the glass.css <link> line in index.html.
   Frosted see-through panels over soft moving colour blobs, light edge on top,
   glossy lime buttons.
   ========================================================================== */
:root{
  --g-fill:linear-gradient(140deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.04) 45%,rgba(255,255,255,.02) 100%);
  --g-fill-strong:linear-gradient(140deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.06) 50%,rgba(255,255,255,.03) 100%);
  --g-blur:blur(18px) saturate(170%);
  --g-line:rgba(255,255,255,.12);
  --g-shine:rgba(255,255,255,.28);
  --g-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(255,255,255,.03),0 24px 48px -24px rgba(0,0,0,.8);
}

/* ---------- colour blobs behind the glass (glass needs something to blur) ---------- */
body::before{content:"";position:fixed;inset:-10%;z-index:-2;pointer-events:none;filter:blur(60px);opacity:.9;
  background:
    radial-gradient(28vw 28vw at 18% 22%,rgba(var(--glow),.28),transparent 70%),
    radial-gradient(26vw 26vw at 82% 30%,rgba(46,255,170,.16),transparent 70%),
    radial-gradient(30vw 30vw at 70% 85%,rgba(var(--glow),.2),transparent 70%),
    radial-gradient(22vw 22vw at 25% 80%,rgba(60,200,255,.13),transparent 70%);
  animation:gDrift 26s ease-in-out infinite alternate}
@keyframes gDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(3%,-4%,0) scale(1.08)}
  100%{transform:translate3d(-4%,3%,0) scale(1.02)}}

/* ---------- frosted glass panels ---------- */
.nav-links,.lang-btn,.menu-btn,.btn-resume,.now-card,.stat,.skill,.proc-info,.contact,.modal-box,
.door-skip,.door-sound,.door-plaque,.icon-btn,.filters button,.chips span,.reel-icon,.proc-node{
  background:var(--g-fill);
  backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  border:1px solid var(--g-line);
  border-top-color:var(--g-shine);border-inline-start-color:rgba(255,255,255,.18);
  box-shadow:var(--g-shadow);
}
.contact{background:radial-gradient(circle at 15% 0%,rgba(var(--glow),.16),transparent 55%),var(--g-fill-strong)}
.modal-box{background:linear-gradient(140deg,rgba(30,34,26,.78),rgba(14,16,12,.86))}
.modal{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.proc-node{box-shadow:0 0 0 6px rgba(10,11,9,.6),var(--g-shadow)}
.proc-info > div{border-inline-start-color:var(--g-line)}

/* hover: the glass gets brighter and the edge glows lime */
.skill:hover,.stat:hover,.now-card:hover{background:var(--g-fill-strong);border-color:rgba(var(--glow),.45);
  box-shadow:var(--g-shadow),0 0 30px -8px rgba(var(--glow),.35)}
.nav-links a:hover,.nav-links a.active{background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}

/* ---------- glossy lime buttons (glass bubble on lime) ---------- */
.btn,.filters button.active,.filters button:hover,.btn-outline:hover,.door-skip:hover,.reel-btn:hover .reel-icon,.modal-close:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,.08) 48%,rgba(0,0,0,0) 52%),var(--accent);
  border-color:rgba(255,255,255,.55);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 -6px 12px rgba(80,120,0,.35),0 12px 30px -8px rgba(var(--glow),.6);
}
.btn-outline{background:var(--g-fill);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur)}
.btn-resume i,.play{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 55%),var(--accent);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7),0 4px 14px -4px rgba(var(--glow),.7)}

/* ---------- project cards: glass caption floating over the cover ---------- */
.card{border:1px solid var(--g-line);border-top-color:var(--g-shine);box-shadow:var(--g-shadow)}
.card .info{left:10px;right:10px;bottom:10px;padding:12px 14px;border-radius:15px;
  background:linear-gradient(140deg,rgba(20,22,18,.45),rgba(20,22,18,.25));
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.14);border-top-color:rgba(255,255,255,.28)}
.pic{border:1px solid var(--g-line);border-top-color:var(--g-shine)}

/* ---------- glass band for the tools marquee ---------- */
.band{background:linear-gradient(180deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.05) 50%,rgba(0,0,0,0) 52%),var(--accent);
  border-block:1px solid rgba(255,255,255,.55)}
.clients-band{background:var(--g-fill);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur)}

/* ---------- form fields: clear glass ---------- */
.cform input,.cform select,.cform textarea{background-color:rgba(255,255,255,.05);border:1px solid var(--g-line);
  border-top-color:rgba(255,255,255,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cform select option{background:#15170f}

/* ---------- hero: glass cubes, glass orbit rings ---------- */
.cube div{background:linear-gradient(140deg,rgba(255,255,255,.18),rgba(255,255,255,.03));border-color:rgba(255,255,255,.35)}
.mb-bg{color:rgba(255,255,255,.045)}

/* ---------- browsers without backdrop-filter: make the glass more solid so text stays readable ---------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav-links,.now-card,.stat,.skill,.proc-info,.contact,.door-skip,.door-sound,.card .info{background:rgba(24,27,21,.9)}
}

/* ---------- phones: lighter blur so scrolling stays smooth ---------- */
@media (max-width:760px){
  :root{--g-blur:blur(10px) saturate(150%)}
  body::before{animation:none;filter:blur(40px)}
}
@media (prefers-reduced-motion:reduce){ body::before{animation:none} }