/* =============================================================
   SMOKE GLASS  —  the FOURTH design (glassmorphism + dock nav).

   The two things that make it its own design (not a recolour of
   Soft Light):
     · LAYOUT  -> the nav is a floating, frosted ICON DOCK pinned to
                  the bottom-centre of the screen (macOS-style); the
                  content runs full-width above it. No top navbar.
     · PALETTE -> near-monochrome "smoke glass": charcoal sky, smoky
                  silver-white frosted panels, a single cool-steel
                  accent. Minimal and elegant (no colourful aurora).
     · surfaces-> frosted glass: translucent fill + backdrop blur +
                  hairline highlight, over a soft drifting smoke wash.
     · 3D canvas-> assets/js/hero-3d.js draws drifting translucent
                   bubbles (cool steel tones) in this theme.

   Loaded LAST (after soft-light + terminal + bento). Every rule is
   scoped under html[data-theme="glass"], so the other three designs
   are untouched. Many card surfaces inherit the redefined --surface /
   --line tokens; we layer the blur + glow on top.
   ============================================================= */

/* ---- Tokens ------------------------------------------------------ */
html[data-theme="glass"] {
  --bg: #101218;                          /* charcoal night */
  --surface: rgba(255, 255, 255, 0.05);   /* smoky frosted glass */
  --surface-hi: rgba(255, 255, 255, 0.09);
  --glass-blur: 18px;
  --line: rgba(255, 255, 255, 0.14);
  --line-soft: rgba(255, 255, 255, 0.07);

  --text: #c9cfd8;                        /* light silver-grey */
  --muted: #8a93a1;
  --head: #f4f6fa;                        /* near white */
  --ink: #0d0f14;
  --accent: #9db4d0;                      /* cool steel */
  --accent-2: #c2d2e6;                    /* lighter steel (hover) */
  --accent-soft: #7e93b0;

  /* iPortfolio bridge tokens (consumed by main.css) */
  --background-color: var(--bg);
  --default-color: var(--text);
  --heading-color: var(--head);
  --accent-color: var(--accent);
  --surface-color: var(--surface);
  --contrast-color: #11141a;              /* dark text on the steel accent */

  /* cursor effects (main.js trail + click ripple read these) */
  --sh: 157, 180, 208;                    /* steel cursor glow */
  --trail-1: 157, 180, 208;
  --trail-2: 194, 210, 230;
  --trail-3: 120, 140, 170;

  /* fonts — airy geometric display on headings/nav, soft readable body */
  --heading-font: "Josefin Sans", "Sora", sans-serif;
  --nav-font: "Josefin Sans", "Space Grotesk", sans-serif;
  --default-font: "Nunito Sans", system-ui, sans-serif;

  color-scheme: dark;
}

/* =============================================================
   BACKGROUND  ->  soft monochrome "smoke" wash
   The page wash lives at z-index:-3 (below the 3D canvas at -2 and
   all content). Subtle drifting cool-grey haze + charcoal gradient.
   ============================================================= */
html[data-theme="glass"] body {
  background-color: var(--bg) !important;
  overflow-x: hidden;
}
html[data-theme="glass"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background: linear-gradient(180deg, #1a1d24, #101218 58%, #0c0e13);
}
html[data-theme="glass"] body::after {
  content: "";
  position: fixed;
  inset: -15%;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(48rem 36rem at 22% 14%, rgba(184, 198, 218, 0.10), transparent 60%),
    radial-gradient(54rem 42rem at 84% 80%, rgba(140, 158, 184, 0.09), transparent 62%),
    radial-gradient(40rem 34rem at 58% 48%, rgba(205, 214, 228, 0.05), transparent 60%);
  filter: blur(26px);
  will-change: transform;
  animation: glass-smoke 42s ease-in-out infinite alternate;
}
@keyframes glass-smoke {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.05); }
  100% { transform: translate3d(2%, 2%, 0)  scale(1.13); }
}

/* selection / scrollbar / links */
html[data-theme="glass"] ::selection { background: var(--accent); color: var(--contrast-color); }
html[data-theme="glass"] ::-webkit-scrollbar-track { background: #0c0e13; }
html[data-theme="glass"] ::-webkit-scrollbar-thumb { background: #2a2f39; border: 3px solid #0c0e13; }
html[data-theme="glass"] ::-webkit-scrollbar-thumb:hover { background: #3a414e; }
html[data-theme="glass"] a { color: #c2d2e6; }
html[data-theme="glass"] a:hover { color: #e6eef8; }
html[data-theme="glass"] #preloader { background: var(--bg) !important; }
html[data-theme="glass"] #preloader .three-body { --uib-color: var(--accent); }

html[data-theme="glass"] .shadow-lit-text {
  text-shadow: calc(var(--sx) * 1px) calc(var(--sy) * 1px) var(--sblur) rgba(var(--sh), var(--salpha));
}
html[data-theme="glass"] .navmenu a:focus-visible,
html[data-theme="glass"] .site-theme-toggle:focus-visible,
html[data-theme="glass"] .btn-chrome:focus-visible,
html[data-theme="glass"] .btn-ghost:focus-visible,
html[data-theme="glass"] .services .service-item .title a:focus-visible,
html[data-theme="glass"] .portfolio .portfolio-info a:focus-visible,
html[data-theme="glass"] .footer .social-links a:focus-visible,
html[data-theme="glass"] .scroll-top:focus-visible { outline-color: var(--accent); }

/* =============================================================
   NAV  ->  floating frosted ICON DOCK (bottom-centre)
   Beats Soft Light's fixed top navbar (which uses !important on
   inset / width / height / flex-direction / background / padding).
   ============================================================= */
html[data-theme="glass"] .header {
  /* anchored at the top; a single transform parks it at the bottom on the
     hero and glides it up once you scroll (see .nav-scrolled below + the
     scroll listener in assets/js/theme-toggle.js). translateY uses calc with
     the element's own height (100%) so its bottom edge sits 18px above the
     viewport floor, at any dock height. */
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(calc(100vh - 100% - 18px));
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  width: max-content !important;
  max-width: calc(100% - 20px);
  height: auto !important;
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
  padding: 8px 12px !important;
  border-radius: 22px;
  border: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(20, 22, 28, 0.6) !important;
  -webkit-backdrop-filter: saturate(140%) blur(var(--glass-blur));
          backdrop-filter: saturate(140%) blur(var(--glass-blur));
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  overflow: visible;
  z-index: 1000;
}
/* scrolled past the hero -> the dock glides up to the top-centre */
html[data-theme="glass"].nav-scrolled .header {
  transform: translateX(-50%) translateY(14px);
}
/* the dock is icon-only — drop the brand / avatar / socials / hamburger */
html[data-theme="glass"] .header .profile-img,
html[data-theme="glass"] .header .social-links,
html[data-theme="glass"] .header .logo,
html[data-theme="glass"] .header .header-toggle { display: none !important; }

html[data-theme="glass"] .navmenu { order: 1; margin: 0; background: transparent !important; }
html[data-theme="glass"] .navmenu ul { display: flex; align-items: flex-end; gap: 4px; margin: 0; padding: 0; }
html[data-theme="glass"] .navmenu li { list-style: none; display: flex; }
html[data-theme="glass"] .navmenu a,
html[data-theme="glass"] .navmenu a:focus {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 58px; padding: 8px 12px;
  border-radius: 14px; border: 1px solid transparent;
  background: transparent; color: var(--muted);
  font-family: var(--nav-font);
  font-size: 10.5px; font-weight: 500; line-height: 1; white-space: nowrap;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
html[data-theme="glass"] .navmenu a .navicon {
  display: inline-block !important; font-size: 19px; line-height: 1; margin: 0;
}
html[data-theme="glass"] .navmenu a:hover {
  color: var(--head); background: rgba(255, 255, 255, 0.06);
  transform: translateY(-5px);
}
html[data-theme="glass"] .navmenu .active,
html[data-theme="glass"] .navmenu .active:focus {
  color: var(--accent) !important; background: rgba(157, 180, 208, 0.14);
  border-color: var(--line);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

/* theme-toggle button sits at the end of the dock, after a divider */
html[data-theme="glass"] .site-theme-toggle {
  order: 2; margin-left: 6px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); color: var(--text);
  border-radius: 50%; font-size: 17px;
  transition: transform 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  position: relative;
}
html[data-theme="glass"] .site-theme-toggle::before {
  content: ""; position: absolute; left: -7px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 26px; background: var(--line-soft);
}
html[data-theme="glass"] .site-theme-toggle:hover {
  color: var(--accent); border-color: var(--accent); transform: translateY(-5px);
}

/* keep the dock a dock on tablet/mobile (override Soft Light's dropdown) */
@media (max-width: 991.98px) {
  html[data-theme="glass"] .navmenu {
    position: static !important; inset: auto !important; transform: none !important;
    width: auto !important; max-height: none !important; opacity: 1 !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border: 0 !important; box-shadow: none !important; overflow: visible !important; padding: 0 !important;
  }
  html[data-theme="glass"] .navmenu ul { flex-direction: row !important; align-items: flex-end; padding: 0; gap: 3px; }
  html[data-theme="glass"] .header .header-toggle { display: none !important; }
}
@media (max-width: 480px) {
  html[data-theme="glass"] .header { padding: 7px 8px !important; gap: 3px; }
  html[data-theme="glass"] .navmenu a,
  html[data-theme="glass"] .navmenu a:focus { min-width: 0; padding: 9px 10px; font-size: 0; gap: 0; }
  html[data-theme="glass"] .navmenu a .navicon { font-size: 20px !important; }
  html[data-theme="glass"] .site-theme-toggle { width: 40px; height: 40px; }
}

/* =============================================================
   LAYOUT  ->  no top navbar; content is full-width, hero full-height
   ============================================================= */
html[data-theme="glass"] main { padding-top: 0; }
html[data-theme="glass"] .hero { min-height: 100vh; padding: 90px 0 60px; background: transparent !important; }
html[data-theme="glass"] .hero-eyebrow { color: var(--accent); }
html[data-theme="glass"] .hero h2 { font-family: var(--heading-font); color: var(--head); }
html[data-theme="glass"] .hero .hero-role,
html[data-theme="glass"] .hero p { color: var(--muted); }
html[data-theme="glass"] .hero .hero-role .typed,
html[data-theme="glass"] .hero p span.typed { color: var(--head); }
html[data-theme="glass"] .typed-cursor { color: var(--accent); }

/* command-free buttons: drop the Soft Light hanging-pendulum chrome */
html[data-theme="glass"] .hang { padding: 0 !important; display: inline-flex; }
html[data-theme="glass"] .hang__shadow,
html[data-theme="glass"] .hang__pivot,
html[data-theme="glass"] .pendulum__chain { display: none !important; }
html[data-theme="glass"] .pendulum { transform: none !important; display: inline-flex; }
html[data-theme="glass"] .btn-chrome {
  color: var(--contrast-color); background: var(--accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
html[data-theme="glass"] .btn-chrome:hover { color: var(--contrast-color); background: var(--accent-2); }
html[data-theme="glass"] .btn-ghost {
  color: var(--head); background: var(--surface); border-color: var(--line);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
}
html[data-theme="glass"] .btn-ghost:hover { color: var(--accent); border-color: var(--accent); }

/* =============================================================
   HOMEPAGE LAYOUT  ->  asymmetric floating GLASS PANELS
   Each <section> becomes a frosted panel narrower than the page,
   and panels alternate sides (a zig-zag), so the content reads as
   drifting glass sheets — not a uniform centred stack (Soft Light)
   and not a rigid dashboard grid (Bento). Scoped to .index-page;
   inner cards go flat so the panel is the only glass box.
   ============================================================= */
html[data-theme="glass"] .index-page main {
  max-width: 1080px;
  margin: 0 auto !important;   /* beat soft-light's `.header ~ main { margin-left:0 }` */
  padding: 0 20px 56px;
}
html[data-theme="glass"] .index-page main > section {
  width: 82%;
  margin: 0 0 30px;
  padding: clamp(22px, 3vw, 40px) !important;
  background: var(--surface) !important;
  border: 1px solid var(--line);
  border-radius: 22px;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  scroll-margin-top: 96px;
  overflow: hidden;
  min-width: 0;
}
/* zig-zag: even sections hug the right edge, odd sections hug the left */
html[data-theme="glass"] .index-page main > section:nth-of-type(even) { margin-left: auto; }
html[data-theme="glass"] .index-page main > section:nth-of-type(odd)  { margin-right: auto; }

/* hero is the exception — full width, no panel chrome, just the intro */
html[data-theme="glass"] .index-page #hero.hero {
  width: 100%; margin: 0 0 14px;
  background: transparent !important;
  border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 90px 0 50px !important;
  overflow: visible;
}

/* fill the panel: kill Bootstrap container centring + gutters, left-align titles */
html[data-theme="glass"] .index-page main > section .container { max-width: 100%; padding-left: 0; padding-right: 0; }
html[data-theme="glass"] .index-page .section-title { text-align: left; padding-bottom: 14px; }
html[data-theme="glass"] .index-page .section-title h2:after { left: 0; transform: none; }

/* inner cards go flat — the section panel is the only glass box */
html[data-theme="glass"] .index-page .about .content,
html[data-theme="glass"] .index-page .stats .stats-item,
html[data-theme="glass"] .index-page .services .service-item,
html[data-theme="glass"] .index-page .resume .resume-item,
html[data-theme="glass"] .index-page .contact .info-wrap,
html[data-theme="glass"] .index-page .contact .php-email-form {
  background: transparent !important;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 0;
}
html[data-theme="glass"] .index-page .stats .stats-item { padding: 10px 6px; }
html[data-theme="glass"] .index-page .services .service-item { padding: 16px 0 !important; border-bottom: 1px solid var(--line-soft); }

/* sub-pages (non-index): keep frosted glass cards, normal flow */
html[data-theme="glass"] .portfolio-details .portfolio-info,
html[data-theme="glass"] .service-details .services-list {
  background: var(--surface) !important;
  border: 1px solid var(--line);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

/* responsive: stack panels full-width on tablet / mobile */
@media (max-width: 991.98px) {
  html[data-theme="glass"] .index-page main { max-width: 100%; padding: 0 14px 56px; }
  html[data-theme="glass"] .index-page main > section { width: 100%; margin-left: 0; margin-right: 0; }
}

html[data-theme="glass"] .section-title h2 { font-family: var(--heading-font); color: var(--head); }
html[data-theme="glass"] .section-title h2:after { background: var(--accent); }
html[data-theme="glass"] .section-title p { color: var(--muted); }

/* About */
html[data-theme="glass"] .about .content h2 { color: var(--head); }
html[data-theme="glass"] .about .content ul i { color: var(--accent); }
html[data-theme="glass"] .about .content ul strong { color: var(--head); }

/* Stats */
html[data-theme="glass"] .stats .stats-item i { color: var(--accent); }
html[data-theme="glass"] .stats .stats-item .purecounter { color: var(--head); }
html[data-theme="glass"] .stats .stats-item p { color: var(--muted); }

/* Skills */
html[data-theme="glass"] .skills-tags .resume-title { color: var(--head); }
html[data-theme="glass"] .skills-tags .badge {
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); color: var(--text); box-shadow: none;
}
html[data-theme="glass"] .skills .progress .skill { color: var(--head); }
html[data-theme="glass"] .skills .progress .skill .val { color: var(--accent); }
html[data-theme="glass"] .skills .progress-bar-wrap { background: rgba(255, 255, 255, 0.06); box-shadow: none; }
html[data-theme="glass"] .skills .progress-bar { background: linear-gradient(90deg, var(--accent), var(--accent-soft)) !important; }

/* Resume timeline */
html[data-theme="glass"] .resume .resume-title { color: var(--head); }
html[data-theme="glass"] .resume .resume-item { border-left-color: var(--accent); }
html[data-theme="glass"] .resume .resume-item h4 { color: var(--head); }
html[data-theme="glass"] .resume .resume-item h5 { background: rgba(157, 180, 208, 0.16); color: #d3e0ee; }
html[data-theme="glass"] .resume .resume-item::before { background: var(--surface-hi); border-color: var(--accent); }

/* Portfolio */
html[data-theme="glass"] .portfolio .portfolio-filters li.filter-active,
html[data-theme="glass"] .portfolio .portfolio-filters li:hover { color: var(--accent); }
html[data-theme="glass"] .portfolio .portfolio-content .portfolio-info { background: rgba(12, 14, 19, 0.84); }
html[data-theme="glass"] .portfolio .portfolio-content .portfolio-info h4 { background: var(--accent); color: var(--contrast-color); }

/* Services */
html[data-theme="glass"] .services .service-item .icon {
  background: rgba(157, 180, 208, 0.14); border: 1px solid var(--line);
}
html[data-theme="glass"] .services .service-item .icon i { color: var(--accent); }
html[data-theme="glass"] .services .service-item:hover .icon { background: var(--accent); border-color: var(--accent); }
html[data-theme="glass"] .services .service-item:hover .icon i { color: var(--contrast-color); }
html[data-theme="glass"] .services .service-item .title a { color: var(--head); }
html[data-theme="glass"] .services .service-item:hover .title a { color: var(--accent); }
html[data-theme="glass"] .services .service-item .description { color: var(--muted); }

/* Contact */
html[data-theme="glass"] .contact .info-item h3 { color: var(--head); }
html[data-theme="glass"] .contact .info-item p { color: var(--muted) !important; }
html[data-theme="glass"] .contact .info-item i {
  background: rgba(157, 180, 208, 0.14); color: var(--accent); border: 1px solid var(--line);
}
html[data-theme="glass"] .contact .info-item:hover i { background: var(--accent); color: var(--contrast-color); }
html[data-theme="glass"] .contact .info-wrap iframe { border: 1px solid var(--line) !important; }
html[data-theme="glass"] .contact .php-email-form input[type=text],
html[data-theme="glass"] .contact .php-email-form input[type=email],
html[data-theme="glass"] .contact .php-email-form textarea {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--line) !important;
  color: var(--head) !important;
  box-shadow: none;
}
html[data-theme="glass"] .contact .php-email-form input:focus,
html[data-theme="glass"] .contact .php-email-form textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(157, 180, 208, 0.2) !important;
}
html[data-theme="glass"] .contact .php-email-form button[type=submit] { background: var(--accent); color: var(--contrast-color); }
html[data-theme="glass"] .contact .php-email-form button[type=submit]:hover { background: var(--accent-2); }

/* Sub-pages */
html[data-theme="glass"] .page-title h1 { font-family: var(--heading-font); color: var(--head); }
html[data-theme="glass"] .page-title .breadcrumbs ol li a { color: var(--accent); }
html[data-theme="glass"] .service-details .services-list a { color: var(--muted); border-left-color: var(--line); }
html[data-theme="glass"] .service-details .services-list a.active,
html[data-theme="glass"] .service-details .services-list a:hover { color: var(--head); border-color: var(--accent); }
html[data-theme="glass"] .portfolio-details .portfolio-description p { color: var(--muted); }
html[data-theme="glass"] .portfolio-details .portfolio-info h3 { color: var(--head); border-bottom-color: var(--line); }

/* =============================================================
   FOOTER + UTILITIES  (leave room for the floating dock)
   ============================================================= */
html[data-theme="glass"] .footer {
  background: rgba(12, 14, 19, 0.6) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border-top: 1px solid var(--line);
  color: var(--muted);
}
html[data-theme="glass"] .footer .sitename { font-family: var(--heading-font); color: var(--head); }
/* surface the socials in the footer (the dock drops them) */
html[data-theme="glass"] .footer .social-links { display: flex !important; }
html[data-theme="glass"] .footer .social-links a {
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); color: var(--text);
}
html[data-theme="glass"] .footer .social-links a:hover { color: var(--accent); border-color: var(--accent); }

/* back-to-top (only appears once scrolled — by then the dock is up top) */
html[data-theme="glass"] .scroll-top { background: var(--accent) !important; }
html[data-theme="glass"] .scroll-top i { color: var(--contrast-color); }
html[data-theme="glass"] .scroll-top:hover { background: var(--accent-2) !important; }

/* =============================================================
   Click ripple  ->  cool silver / steel
   ============================================================= */
html[data-theme="glass"] .ripple__ring {
  border-color: rgba(157, 180, 208, 0.5);
  box-shadow: 0 0 6px rgba(157, 180, 208, 0.3), inset 0 0 5px rgba(194, 210, 230, 0.4);
}
html[data-theme="glass"] .ripple__ring--2 { border-color: rgba(194, 210, 230, 0.4); }
html[data-theme="glass"] .ripple__ring--3 { border-color: rgba(126, 147, 176, 0.28); }
html[data-theme="glass"] .ripple__drop { background: radial-gradient(closest-side, rgba(157, 180, 208, 0.35), transparent 72%); }
html[data-theme="glass"] .ripple__jet {
  background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.95), rgba(157, 180, 208, 0.85) 45%, rgba(126, 147, 176, 0.7));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* =============================================================
   Reduced motion — freeze the smoke (matches hero-3d.js degrade)
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="glass"] body::after { animation: none !important; }
}