/* Glass theme — final pass */

/* ══════════════════════════════════════════════
   iOS 26 MAXIMALIST GLASS UPGRADE — FINAL PASS
   Smooth · Fast · Premium · Perfectly Aligned
══════════════════════════════════════════════ */

/* ── 1. Smooth scroll behaviour on root ── */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* ── 4. Ultra-liquid nav bar on scroll ── */
header {
  transition: padding .36s cubic-bezier(.4,0,.2,1);
  will-change: padding;
}
nav {
  transition:
    background    .36s cubic-bezier(.4,0,.2,1),
    border-radius .36s cubic-bezier(.4,0,.2,1),
    box-shadow    .36s ease,
    backdrop-filter .36s ease;
  will-change: transform;
}

/* ── 5. Elevated glass cards — specular edge + refraction ── */
.glass-card,
.exp-card,
.cert-card,
.proj-card,
.edu-card,
.about-highlight,
.info-item {
  background:
    linear-gradient(145deg,
      rgba(255,255,255,0.88) 0%,
      rgba(252,238,215,0.72) 45%,
      rgba(255,255,255,0.82) 100%
    );
  backdrop-filter: blur(40px) saturate(260%) brightness(1.06);
  -webkit-backdrop-filter: blur(40px) saturate(260%) brightness(1.06);
  border: 1px solid rgba(255,255,255,0.82);
  border-top: 1px solid rgba(255,255,255,0.98);
  border-left: 1px solid rgba(255,255,255,0.90);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.98),
    inset 0 -1px 0 rgba(212,129,58,0.04),
    inset 2px 0 0 rgba(255,255,255,0.6),
    0 8px 32px rgba(212,129,58,0.10),
    0 2px 8px rgba(0,0,0,0.05),
    0 0 0 0.5px rgba(212,129,58,0.08);
  position: relative;
}

/* Inner gloss sheen */
.glass-card::before,
.exp-card::before,
.cert-card::before,
.proj-card::before,
.edu-card::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
}

/* ── 6. Skill pills ultra-glass ── */
.skill-pill {
  background:
    linear-gradient(145deg,
      rgba(255,255,255,0.90) 0%,
      rgba(252,238,215,0.70) 100%
    );
  backdrop-filter: blur(28px) saturate(220%);
  -webkit-backdrop-filter: blur(28px) saturate(220%);
  border: 1px solid rgba(255,255,255,0.88);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.98),
    0 4px 14px rgba(212,129,58,0.09),
    0 1px 3px rgba(0,0,0,0.04);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease;
}
.skill-pill:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    0 0 0 2px rgba(212,129,58,0.22),
    0 12px 32px rgba(212,129,58,0.18) !important;
}

/* ── 7. Section glass panels ── */
.skills-section {
  background:
    linear-gradient(145deg,
      rgba(255,255,255,0.60) 0%,
      rgba(252,238,215,0.45) 50%,
      rgba(255,255,255,0.55) 100%
    );
  backdrop-filter: blur(30px) saturate(220%);
  -webkit-backdrop-filter: blur(30px) saturate(220%);
  border: 1px solid rgba(255,255,255,0.70);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.95),
    0 20px 60px rgba(212,129,58,0.10),
    0 0 0 0.5px rgba(212,129,58,0.08);
}

/* ── 8. Hero avatar glass sphere ── */
.hero-avatar-bg {
  background:
    radial-gradient(ellipse at 30% 25%,
      rgba(255,255,255,0.95) 0%,
      rgba(252,238,215,0.80) 45%,
      rgba(255,255,255,0.70) 100%
    );
  backdrop-filter: blur(48px) saturate(280%) brightness(1.08);
  -webkit-backdrop-filter: blur(48px) saturate(280%) brightness(1.08);
  border: 1px solid rgba(255,255,255,0.90);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,1),
    inset 0 -2px 0 rgba(212,129,58,0.06),
    0 40px 100px rgba(212,129,58,0.18),
    0 0 0 1px rgba(255,255,255,0.7);
}

/* ── 9. Floating hero cards — deepened glass ── */
.hero-floating-card {
  background:
    linear-gradient(145deg,
      rgba(255,255,255,0.92) 0%,
      rgba(252,238,215,0.78) 100%
    );
  backdrop-filter: blur(32px) saturate(240%) brightness(1.05);
  -webkit-backdrop-filter: blur(32px) saturate(240%) brightness(1.05);
  border: 1px solid rgba(255,255,255,0.88);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.98),
    0 8px 28px rgba(212,129,58,0.14),
    0 2px 6px rgba(0,0,0,0.06),
    0 0 0 0.5px rgba(212,129,58,0.10);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.hero-floating-card:hover {
  transform: scale(1.05) translateY(-6px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    0 20px 48px rgba(212,129,58,0.22),
    0 4px 12px rgba(0,0,0,0.08);
}

/* ── 10. Welcome overlay box — maximum luxury glass ── */
.wbox {
  background:
    linear-gradient(145deg,
      rgba(255,255,255,0.90) 0%,
      rgba(252,238,215,0.82) 50%,
      rgba(255,255,255,0.88) 100%
    );
  backdrop-filter: blur(56px) saturate(300%) brightness(1.08);
  -webkit-backdrop-filter: blur(56px) saturate(300%) brightness(1.08);
  border: 1px solid rgba(255,255,255,0.95);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(212,129,58,0.06),
    0 0 0 1px rgba(212,129,58,0.12),
    0 60px 120px rgba(212,129,58,0.18),
    0 20px 60px rgba(0,0,0,0.08);
}

/* ── 11. Smooth iOS-style transitions everywhere ── */
* {
  -webkit-tap-highlight-color: transparent;
}
.btn-pri, .btn-sec, .nav-cta, .nav-docs-btn {
  transition:
    transform .26s cubic-bezier(.34,1.56,.64,1),
    box-shadow .26s ease,
    background .22s ease;
  will-change: transform;
}
.btn-pri:active, .btn-sec:active, .nav-cta:active {
  transform: scale(0.96) !important;
  transition-duration: .08s !important;
}

/* ── 12. Progress bar shimmer ── */
#readingProgress {
  background:
    linear-gradient(90deg, #D4813A, #E8A84E, #F2CC8A, #E8A84E, #D4813A) !important;
  background-size: 300% 100% !important;
  animation: progressFlow 2s linear infinite !important;
  box-shadow: 0 0 16px rgba(212,129,58,0.6), 0 0 32px rgba(212,129,58,0.2) !important;
  height: 3px !important;
}

/* ── 13. Orb blur upgrades — more visible depth ── */
.orb-bg {
  opacity: 0.9;
  will-change: transform;
}
.orb-1 {
  background: radial-gradient(circle, rgba(212,129,58,0.16) 0%, transparent 70%);
  animation-duration: 22s;
}
.orb-2 {
  background: radial-gradient(circle, rgba(232,168,78,0.13) 0%, transparent 70%);
  animation-duration: 28s;
}
.orb-3 {
  background: radial-gradient(circle, rgba(245,158,11,0.09) 0%, transparent 70%);
  animation-duration: 34s;
}
.orb-4 {
  background: radial-gradient(circle, rgba(212,129,58,0.12) 0%, transparent 70%);
}

/* ── 14. Additional micro glass orbs ── */
.orb-5, .orb-6 {
  position: fixed; pointer-events: none; z-index: 0; border-radius: 50%;
  animation: orbDrift ease-in-out infinite alternate;
}
.orb-5 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(242,204,138,0.14) 0%, transparent 70%);
  top: 25%; right: 5%; animation-duration: 18s; animation-delay: -5s;
}
.orb-6 {
  width: 250px; height: 250px;
  background: radial-gradient(circle, rgba(212,129,58,0.11) 0%, transparent 70%);
  top: 60%; left: 10%; animation-duration: 24s; animation-delay: -12s;
}

/* ── 15. Improved hero star visibility ── */
.hero-star {
  width: 3px; height: 3px;
  background: radial-gradient(circle, rgba(212,129,58,0.9), rgba(232,168,78,0.4));
  box-shadow: 0 0 6px rgba(212,129,58,0.7);
}

/* ── 16. Section tag neon pulse ── */
.sec-tag::before {
  animation: secTagPulse 1.8s ease-in-out infinite;
}
@keyframes secTagPulse {
  0%,100% { box-shadow: 0 0 6px rgba(212,129,58,0.9), 0 0 12px rgba(212,129,58,0.4); transform: scale(1); }
  50%      { box-shadow: 0 0 14px rgba(212,129,58,1), 0 0 28px rgba(212,129,58,0.6); transform: scale(1.3); }
}

/* ── 17. Exp timeline cards — deeper glow ── */
.exp-card {
  transition: transform .38s cubic-bezier(.34,1.4,.64,1), box-shadow .38s ease;
}
.exp-card:hover {
  transform: translateX(10px) translateY(-6px) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,1),
    0 48px 100px rgba(212,129,58,0.20),
    0 12px 32px rgba(0,0,0,0.08) !important;
}

/* ── 18. Contact form inputs — glass style ── */
.cf-input, .cf-textarea {
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.88) !important;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.95), 0 2px 8px rgba(212,129,58,0.07) !important;
  transition: all .22s cubic-bezier(.34,1.56,.64,1) !important;
}
.cf-input:focus, .cf-textarea:focus {
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(212,129,58,0.4) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    0 0 0 3px rgba(212,129,58,0.14),
    0 4px 16px rgba(212,129,58,0.12) !important;
  transform: translateY(-1px);
}

/* ── 19. Back-to-top button glass upgrade ── */
#backToTop {
  background:
    linear-gradient(145deg,
      rgba(255,255,255,0.25) 0%,
      rgba(212,129,58,0) 100%
    ),
    linear-gradient(135deg, #D4813A 0%, #A85E22 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* ── 20. Traits pills glass ── */
.trait {
  background:
    linear-gradient(145deg,
      rgba(255,255,255,0.82) 0%,
      rgba(252,238,215,0.62) 100%
    );
  backdrop-filter: blur(20px) saturate(200%);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 2px 8px rgba(212,129,58,0.08);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
}
.trait:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 6px 18px rgba(212,129,58,0.16);
}

/* ── 21. Info items glass refinement ── */
.info-item {
  background:
    linear-gradient(145deg,
      rgba(255,255,255,0.82) 0%,
      rgba(252,238,215,0.65) 100%
    ) !important;
  backdrop-filter: blur(24px) saturate(210%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(210%) !important;
  transition: transform .26s cubic-bezier(.34,1.56,.64,1), box-shadow .26s ease;
}
.info-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg) !important;
}

/* ── 22. Skills tabs glass pill ── */
.skills-tab {
  transition: all .24s cubic-bezier(.34,1.56,.64,1);
  will-change: transform;
}
.skills-tab:hover { transform: translateY(-2px); }
.skills-tab.active { transform: translateY(-2px); }

/* ── 23. Document cards glass ── */
.doc-preview-card {
  background:
    linear-gradient(145deg,
      rgba(255,255,255,0.90) 0%,
      rgba(252,238,215,0.75) 100%
    ) !important;
  backdrop-filter: blur(36px) saturate(240%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(240%) !important;
}

/* ── 24. Chat panel glass upgrade ── */
#aiChatPanel {
  backdrop-filter: blur(56px) saturate(300%) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(56px) saturate(300%) brightness(1.06) !important;
}

/* ── 25. Scrollbar refined ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: rgba(212,129,58,0.03); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #D4813A, #E8A84E, #F2CC8A);
  border-radius: 10px;
  box-shadow: inset 0 0 4px rgba(212,129,58,0.3);
}

/* ── 26. Section entry animation — moved to css/liquid-glass.css (lgReveal: no filter, no forwards-fill) ── */

/* ── 28. Progress dots glass ── */
.sp-dot .sp-lbl {
  backdrop-filter: blur(40px) saturate(260%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(260%) !important;
  background: rgba(255,255,255,0.96) !important;
  box-shadow: 0 6px 24px rgba(212,129,58,0.16), inset 0 1.5px 0 rgba(255,255,255,1) !important;
}

/* ── 29. Float chat button glass ── */
#floatChatBtn {
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease !important;
}
#floatChatBtn:hover {
  transform: scale(1.12) translateY(-3px) !important;
}
#floatChatBtn:active {
  transform: scale(0.94) !important;
  transition-duration: .08s !important;
}

/* ── 30. Aurora background — moved to css/liquid-glass.css ── */