/* Smaller project images without touching text layout */
.projects-grid .project-card .project-media {
  /* Responsive but capped height */
  height: clamp(120px, 22vw, 180px);
}

.projects-grid .project-card .project-media img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fill the smaller area nicely */
}

/* --------------------------------------------------
   Logo Card Hover Effect (square, 3D tilt on mouse move)
   + subtle glassmorphism and pop-out depth
--------------------------------------------------- */
.hero-media { position: relative; perspective: 1000px; perspective-origin: 50% 50%; }
.logo-card {
  position: relative;
  width: min(220px, 60vw);
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  /* Ensure smooth rounded corners when transformed */
  overflow: hidden; /* fallback */
  overflow: clip;   /* modern clipping for transforms */
  /* Glassy frame */
  border: 1px solid color-mix(in oklab, var(--text) 12%, transparent);
  /* Replace outline with an inset ring that follows border-radius */
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, var(--shadow), var(--glow);
  transform-style: preserve-3d;
  transform-origin: center center;
  backface-visibility: hidden;
  contain: paint;
  will-change: transform;
  transition: transform .12s ease, box-shadow .3s ease, filter .3s ease;
}
/* Ambient reflection/glass sheen */
.logo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.08) 28%, rgba(255,255,255,0) 60%);
  mix-blend-mode: screen;
  opacity: .28;
  border-radius: inherit; /* match corners to avoid pointed edges */
}
/* Soft shadow under pop-out */
.logo-card::after {
  content: "";
  position: absolute;
  left: -14px; right: -14px; bottom: -22px; height: 42px;
  z-index: -1;
  background: radial-gradient(60% 100% at 50% 0%, rgba(0,0,0,.45), transparent 70%);
  filter: blur(10px);
  transition: transform .2s ease, opacity .2s ease;
}
.logo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translateZ(var(--pop, 0px));
  transition: transform .18s ease;
  border-radius: inherit; /* ensure image follows rounded corners */
}
.logo-card .circleLight {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .4s ease;
  background: radial-gradient(circle at var(--mx, 80px) var(--my, 40px), rgba(255,255,255,.9), transparent 60%);
  mix-blend-mode: overlay;
  pointer-events: none;
  transform: translateZ(calc(var(--pop, 0px) + 6px));
  backdrop-filter: blur(1.2px) saturate(1.05);
  border-radius: inherit; /* match clipping */
}
.logo-card:hover .circleLight { opacity: .42; }

.logo-card:hover {
  /* Slightly stronger shadow to imply lift */
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 14px 34px rgba(0,0,0,.5), var(--glow);
  border-color: color-mix(in oklab, var(--text) 22%, transparent);
}
.logo-card:hover::after { transform: translateY(6px) scale(1.02); opacity: .9; }
/* On hover, raise the inner layers slightly */
.logo-card:hover { --pop: 14px; }

@media (max-width: 900px) {
  .logo-card { width: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-card { transition: none; }
}

/* ---------------------------------------------
   Masked Animation on hero name (Adil Hasan)
   Keep existing font styling from h1; only apply background-clip animation.
---------------------------------------------- */
.hero .masking-container {
  display: inline-block;
}

.hero .masked-text {
  /* inherit h1 font styles and size */
  margin: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: url('https://images.unsplash.com/photo-1732535725600-f805d8b33c9c?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
  background-size: 200% auto; /* enlarged for smooth animation */
  background-position: 0 50%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: hero-mask-slide 5s infinite alternate linear;
}

@keyframes hero-mask-slide {
  0% { background-position: 0 50%; }
  100% { background-position: 100% 50%; }
}

/* (Reverted) Gooey Marquee styles removed by request */

/* ---------------------------------------------
   Full-header glass blur (translucent background)
   Applied across entire sticky header; keeps theme variables
---------------------------------------------- */
.site-header {
  /* Fallback translucent background (significantly more transparent) */
  background-color: rgba(11, 18, 32, 0.14) !important;
  /* Preferred layered gradient when supported */
  background: linear-gradient(180deg, rgba(11,18,32,0.12) 0%, rgba(11,18,32,0.21) 100%) !important;
  /* Stronger blur to maintain readability with higher transparency */
  backdrop-filter: saturate(1.2) blur(18px);
  -webkit-backdrop-filter: saturate(1.2) blur(18px);
  /* Subtle frosted border and depth */
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.24);
  background-clip: padding-box;
}
html[data-theme="light"] .site-header {
  background-color: rgba(255,255,255,0.20) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.28) 100%) !important;
  border-bottom-color: rgba(0,0,0,0.10);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

/* Force dark theme glass values explicitly */
html[data-theme="dark"] .site-header {
  background-color: rgba(6, 10, 18, 0.12) !important;
  background: linear-gradient(180deg, rgba(6,10,18,0.10) 0%, rgba(6,10,18,0.22) 100%) !important;
  backdrop-filter: saturate(1.25) blur(18px);
  -webkit-backdrop-filter: saturate(1.25) blur(18px);
  border-bottom-color: rgba(255,255,255,0.08);
}

/* Smooth scroll for in-page anchors (e.g., Back to top) */
html { scroll-behavior: smooth; }
/* Theme toggle icon sizing for Ionicons */
.theme-toggle ion-icon { font-size: 20px; line-height: 1; display: block; }

/* ---------------------------------------------
   Theme change animations
   - Smoothly transition colors and backgrounds
   - Animate theme icon briefly
---------------------------------------------- */
html.theme-transition, body.theme-transition, .site-header.theme-transition, .nav-menu.theme-transition, .project-card.theme-transition, .card.theme-transition, .chips li.theme-transition, .tag.theme-transition, .btn.theme-transition {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.theme-toggle.theming ion-icon {
  animation: spin-pop .45s ease;
}
@keyframes spin-pop {
  0% { transform: rotate(-90deg) scale(.85); opacity: .6; }
  60% { transform: rotate(10deg) scale(1.05); opacity: 1; }
  100% { transform: rotate(0deg) scale(1); }
}

/* ---------------------------------------------
   Header brand: unified neutral glow behind brand
---------------------------------------------- */
.brand { position: relative; z-index: 0; }
.brand img { box-shadow: none !important; }
.brand-text {
  /* Remove outline-like effect */
  text-shadow: none;
}

/* Single combined glow behind logo + text */
/* Remove any outer glow around brand (logo + text) */
.brand::after { content: none !important; }
html[data-theme="light"] .brand::after { content: none !important; }

/* ---------------------------------------------
   Brand (header) — normal inline look + VERY subtle neutral glow
---------------------------------------------- */
.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0; /* no pill padding */
  border: 0;
  border-radius: 0;
  background: transparent; /* not a button */
  box-shadow: none; /* no button shadow */
  isolation: auto;
  backdrop-filter: none;
}
.brand::before { content: none !important; }
.brand img { border-radius: 10px; }
.brand-text { position: relative; letter-spacing: .3px; opacity: .98; }
.brand:hover { box-shadow: none; }
/* Remove shimmer overlay */
.brand-text::after { content: none !important; }

/* Extremely subtle combined glow behind logo + text (neutral, very low intensity) */
.brand::after {
  content: "";
  position: absolute;
  inset: -6px; /* tiny margin around combined area */
  z-index: -1;
  pointer-events: none;
  /* Two soft radials to avoid a boxy rectangle look */
  background:
    radial-gradient(60% 70% at 22% 50%, rgba(255,255,255,0.06), transparent 70%),
    radial-gradient(70% 70% at 72% 50%, rgba(255,255,255,0.04), transparent 80%);
  filter: blur(9px);
  opacity: .55;
  transition: opacity .2s ease, filter .2s ease;
}
html[data-theme="light"] .brand::after {
  background:
    radial-gradient(60% 70% at 22% 50%, rgba(0,0,0,0.05), transparent 70%),
    radial-gradient(70% 70% at 72% 50%, rgba(0,0,0,0.03), transparent 80%);
  filter: blur(7px);
}

/* Slightly stronger glow when hovering over brand (logo + text) */
.brand:hover::after { opacity: .95; filter: blur(11px); }
.brand:hover .brand-text { text-shadow: 0 0 10px rgba(255,255,255,0.12); }
html[data-theme="light"] .brand:hover .brand-text { text-shadow: 0 0 10px rgba(0,0,0,0.12); }

/* ---------------------------------------------
   Mobile nav toggle: animate hamburger -> cross
   Uses aria-expanded on the button set by JS
---------------------------------------------- */
@media (max-width: 760px) {
  .nav-toggle {
    width: 36px;
    height: 30px;
    display: inline-block; /* stack bars vertically like classic hamburger */
    position: relative;
  }
  .nav-toggle-bar {
    width: 24px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    display: block; /* ensure each bar takes a line */
    position: relative;
    transition: transform .28s ease, opacity .2s ease, background-color .2s ease;
  }
  .nav-toggle-bar + .nav-toggle-bar { margin-top: 6px; }

  /* Turn into an X when menu is open */
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.8);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

/* ---------------------------------------------
  Header nav: gradient hover expand with icons
  Scoped to .fx-nav to avoid global interference
---------------------------------------------- */
.fx-nav { gap: 12px; }
.fx-nav .fx-item {
  position: relative;
  list-style: none;
  width: 48px;
  height: 48px;
  border-radius: 60px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: width .45s ease, box-shadow .3s ease, border-color .3s ease;
  overflow: hidden;
}
.fx-nav .fx-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 60px;
  background: linear-gradient(45deg, var(--i), var(--j));
  opacity: 0;
  transition: opacity .45s ease;
  z-index: 0;
}
.fx-nav .fx-item::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 100%;
  height: 100%;
  border-radius: 60px;
  background: linear-gradient(45deg, var(--i), var(--j));
  filter: blur(15px);
  z-index: -1;
  opacity: 0;
  transition: opacity .45s ease;
}
.fx-nav .fx-item:is(:hover, :focus-within, .active) {
  width: 180px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
  border-color: color-mix(in oklab, var(--text) 20%, var(--border));
}
.fx-nav .fx-item:is(:hover, :focus-within, .active)::before { opacity: 1; }
.fx-nav .fx-item:is(:hover, :focus-within, .active)::after { opacity: .55; }

/* Anchor structure inside item */
.fx-nav .fx {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 0 .9rem;
  height: 100%;
  width: 100%;
  color: var(--text);
  text-decoration: none;
  border-radius: 60px;
  background: transparent;
}
/* neutralize base nav hover for these */
.fx-nav a:hover { background: transparent; box-shadow: none; text-decoration: none; }

.fx-nav .icon {
  display: inline-flex;
  font-size: 1.25rem;
  color: #9aa7c6; /* subtle in dark, overridden by gradient on hover */
  transition: transform .45s ease, color .45s ease;
}
.fx-nav .title {
  color: #fff;
  font-size: .98rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  transform: scale(0);
  transition: transform .45s ease;
}
.fx-nav .fx-item:is(:hover, :focus-within, .active) .icon {
  transform: scale(0);
  color: #fff;
}
.fx-nav .fx-item:is(:hover, :focus-within, .active) .title { transform: scale(1); }

/* Light theme tweaks */
html[data-theme="light"] .fx-nav .icon { color: #5b657a; }
html[data-theme="light"] .fx-nav .title { color: #fff; }

/* Mobile: keep effect, just tighten gaps */
@media (max-width: 760px) {
  .fx-nav { gap: .5rem; }
  /* default compact state size; expands on interaction */
  .fx-nav .fx-item { width: 48px; height: 48px; }
  .fx-nav .fx { padding: 0 .9rem; }
}

/* Removed duplicate header glass block and conflicting shimmer sweep to ensure the
   earlier translucent header settings and neutral brand glow take effect. */