/* ═══════════════════════════════════════════════════════════════
   KIIT Material — Advanced UI Layer
   Glassmorphism · Animations · Micro-interactions
   ═══════════════════════════════════════════════════════════════ */

/* ── Custom scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #F97316, #EC4899);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #EA580C, #DB2777); background-clip: padding-box; border: 2px solid transparent; }

/* ── Smooth everything ────────────────────────────────────────── */
html { scroll-behavior: smooth; }
* { -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(249,115,22,.25); }

/* ── Animated gradient hero overlay (dark aurora) ────────────── */
.hero {
  position: relative;
  background: linear-gradient(-45deg, #18141C, #1E1B4B, #2E1065, #18141C) !important;
  background-size: 400% 400% !important;
  animation: gradientShift 16s ease infinite !important;
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Floating orbs in hero */
.hero::before, .hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}
.hero::before {
  width: 420px; height: 420px;
  background: radial-gradient(circle, #EC4899, transparent 65%);
  top: -120px; right: -80px;
  animation: orbFloat1 11s ease-in-out infinite;
}
.hero::after {
  width: 360px; height: 360px;
  background: radial-gradient(circle, #06B6D4, transparent 65%);
  bottom: -100px; left: -60px;
  animation: orbFloat2 13s ease-in-out infinite;
}
@keyframes orbFloat1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px, 40px) scale(1.12); } }
@keyframes orbFloat2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(50px, -35px) scale(1.08); } }

/* Subtle grain texture over hero */
.hero .container { position: relative; z-index: 2; }

/* ── Glass navbar (scrolled state enhanced) ──────────────────── */
.navbar.scrolled {
  background: rgba(10,15,26,.82) !important;
  backdrop-filter: blur(18px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.07), 0 14px 38px -14px rgba(0,0,0,.6) !important;
}

/* ── Buttons: shine sweep + lift ─────────────────────────────── */
.btn { position: relative; overflow: hidden; transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease !important; }
.btn::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
  pointer-events: none;
}
.btn:hover::after { left: 130%; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary:hover { box-shadow: 0 10px 28px -6px rgba(234,88,12,.55) !important; }

/* ── Cards: lift + glow border on hover ──────────────────────── */
.feature-card, .stat-card, .card, .material-card, .event-card, .company-card, .feed-post {
  transition: transform .3s cubic-bezier(.21,.7,.35,1), box-shadow .3s ease, border-color .3s ease !important;
  will-change: transform;
}
.feature-card:hover, .material-card:hover, .event-card:hover, .company-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 22px 48px -16px rgba(234,88,12,.28), 0 4px 16px -4px rgba(15,23,42,.1) !important;
}
.stat-card:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 36px -14px rgba(234,88,12,.25) !important; }

/* 3D tilt target (JS-driven) */
[data-tilt] { transform-style: preserve-3d; transition: transform .18s ease-out; }
[data-tilt] > * { transform: translateZ(18px); }

/* ── Scroll-reveal (JS adds .revealed) ───────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s cubic-bezier(.21,.7,.35,1); }
.reveal.revealed { opacity: 1; transform: translateY(0); }
.reveal-left  { opacity: 0; transform: translateX(-36px); transition: opacity .65s ease, transform .65s cubic-bezier(.21,.7,.35,1); }
.reveal-left.revealed  { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(36px);  transition: opacity .65s ease, transform .65s cubic-bezier(.21,.7,.35,1); }
.reveal-right.revealed { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(.92); transition: opacity .55s ease, transform .55s cubic-bezier(.34,1.56,.64,1); }
.reveal-scale.revealed { opacity: 1; transform: scale(1); }
/* stagger children */
.stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.21,.7,.35,1); }
.stagger.revealed > * { opacity: 1; transform: translateY(0); }
.stagger.revealed > *:nth-child(1) { transition-delay: .05s; }
.stagger.revealed > *:nth-child(2) { transition-delay: .14s; }
.stagger.revealed > *:nth-child(3) { transition-delay: .23s; }
.stagger.revealed > *:nth-child(4) { transition-delay: .32s; }
.stagger.revealed > *:nth-child(5) { transition-delay: .41s; }
.stagger.revealed > *:nth-child(6) { transition-delay: .50s; }

/* ── Gradient text utility ───────────────────────────────────── */
.gradient-text {
  background: linear-gradient(120deg, #EA580C, #DB2777 50%, #EC4899);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientText 5s linear infinite;
}
@keyframes gradientText { to { background-position: 200% center; } }

/* ── Hero title word-by-word ─────────────────────────────────── */
.hero-title { letter-spacing: -1.5px; }
.hero-title span {
  background: linear-gradient(120deg, #FDBA74, #FBCFE8, #FDBA74);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientText 4s linear infinite;
}

/* ── Floating hero cards (mock social cards) ─────────────────── */
.hero-visual > * { animation: cardBob 6s ease-in-out infinite; }
.hero-visual > *:nth-child(2) { animation-delay: 1.2s; }
.hero-visual > *:nth-child(3) { animation-delay: 2.4s; }
@keyframes cardBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ── Skeleton shimmer (loading states) ───────────────────────── */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.05) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 10px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ── Sidebar polish ──────────────────────────────────────────── */
.sidebar-nav-item { position: relative; transition: all .22s ease !important; }
.sidebar-nav-item::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px; height: 60%;
  background: linear-gradient(180deg, #F97316, #EC4899);
  border-radius: 0 4px 4px 0;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.sidebar-nav-item:hover::before, .sidebar-nav-item.active::before { transform: translateY(-50%) scaleY(1); }
.sidebar-nav-item:hover { padding-left: 22px !important; }

/* ── Stat-card icon pulse ────────────────────────────────────── */
.stat-card-icon { transition: transform .35s cubic-bezier(.34,1.56,.64,1) !important; }
.stat-card:hover .stat-card-icon { transform: scale(1.15) rotate(-6deg); }

/* ── Top-bar avatar ring ─────────────────────────────────────── */
.sidebar-avatar { transition: box-shadow .25s ease, transform .25s ease; }
.sidebar-avatar:hover { box-shadow: 0 0 0 4px rgba(249,115,22,.25); transform: scale(1.06); }

/* ── Inputs: focus glow ──────────────────────────────────────── */
.form-input:focus, .filter-select:focus {
  box-shadow: 0 0 0 4px rgba(249,115,22,.14) !important;
}
/* Search bar already shows focus on its container (.search-bar:focus-within).
   Keep the inner input ring-free so the global :focus-visible outline + an inner
   glow don't stack into a heavy double/triple orange border. */
.search-bar input:focus,
.search-bar input:focus-visible {
  box-shadow: none !important;
  outline: none !important;
}

/* ── Toast: glass style ──────────────────────────────────────── */
.toast {
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(17,24,39,.92) !important;
  color: #E2E8F0 !important;
  box-shadow: 0 16px 44px -12px rgba(0,0,0,.55) !important;
}

/* ── Page enter animation ────────────────────────────────────── */
.page-content, main { animation: pageIn .45s cubic-bezier(.21,.7,.35,1) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* ── Scroll progress bar ─────────────────────────────────────── */
#scrollProgress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #EA580C, #DB2777, #EC4899);
  z-index: 99999;
  border-radius: 0 99px 99px 0;
  transition: width .08s linear;
  box-shadow: 0 0 12px rgba(219,39,119,.6);
}

/* ── Back-to-top button ──────────────────────────────────────── */
#backToTop {
  position: fixed;
  bottom: 26px; right: 26px;
  width: 46px; height: 46px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #EA580C, #DB2777);
  color: white;
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px -6px rgba(234,88,12,.55);
  opacity: 0; pointer-events: none;
  transform: translateY(14px) scale(.9);
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
  z-index: 9000;
}
#backToTop.show { opacity: 1; pointer-events: all; transform: translateY(0) scale(1); }
#backToTop:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 36px -8px rgba(234,88,12,.7); }

/* ── Counter glow while animating ────────────────────────────── */
.hero-stat-number, .stat-card-value { font-variant-numeric: tabular-nums; }

/* ── Badges shimmer ──────────────────────────────────────────── */
.hero-badge {
  background: rgba(255,255,255,.14) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.28) !important;
  animation: badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.18); } 50% { box-shadow: 0 0 22px 2px rgba(255,255,255,.12); } }

/* ── Footer link slide ───────────────────────────────────────── */
.footer a { transition: padding-left .2s ease, color .2s ease; }
.footer a:hover { padding-left: 6px; }

/* ═══════════════════════════════════════════════════════════════
   Beauty Pass 2 — typography, nav, icons, depth
   ═══════════════════════════════════════════════════════════════ */

/* ── Crisp typography everywhere ─────────────────────────────── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Nav links: animated gradient underline ──────────────────── */
.nav-link { position: relative; transition: color .2s ease; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -4px;
  width: 0; height: 2.5px;
  background: linear-gradient(90deg, #EA580C, #DB2777);
  border-radius: 99px;
  transform: translateX(-50%);
  transition: width .28s cubic-bezier(.21,.7,.35,1);
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* ── Section titles: gradient accent bar ─────────────────────── */
.section-title { position: relative; display: inline-block; padding-bottom: 12px; }
.section-title::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 56px; height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg, #EA580C, #DB2777, #EC4899);
  background-size: 200% auto;
  animation: gradientText 4s linear infinite;
}

/* ── Feature icons: gradient chip + playful hover ────────────── */
.feature-icon {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease !important;
}
.feature-card:hover .feature-icon {
  transform: scale(1.12) rotate(-7deg);
  box-shadow: 0 12px 26px -8px rgba(234,88,12,.45);
}

/* ── Cards: gradient hairline on hover (top edge) ────────────── */
.feature-card, .material-card, .event-card, .company-card { position: relative; overflow: hidden; }
.feature-card::before, .material-card::before, .event-card::before, .company-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #EA580C, #DB2777, #EC4899);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.21,.7,.35,1);
  border-radius: 99px;
  z-index: 1;
}
.feature-card:hover::before, .material-card:hover::before, .event-card:hover::before, .company-card:hover::before {
  transform: scaleX(1);
}

/* ── Images inside cards: gentle zoom ────────────────────────── */
.material-card img, .event-card img, .company-card img, .feed-post img {
  transition: transform .45s cubic-bezier(.21,.7,.35,1);
}
.material-card:hover img, .event-card:hover img, .company-card:hover img { transform: scale(1.045); }

/* ── Keyboard focus ring (accessibility + looks) ─────────────── */
:focus-visible {
  outline: 2.5px solid rgba(249,115,22,.65) !important;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Footer: gradient hairline divider ───────────────────────── */
.footer { position: relative; }
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #EA580C 25%, #DB2777 50%, #EC4899 75%, transparent);
  opacity: .65;
}

/* ── Stat-card values: gradient numerals ─────────────────────── */
.stat-card-value {
  background: linear-gradient(120deg, #F8FAFC, #FDBA74);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Hero stats: glass capsule ───────────────────────────────── */
.hero-stat {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  padding: 14px 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .25s ease, background .25s ease;
}
.hero-stat:hover { transform: translateY(-3px); background: rgba(255,255,255,.13); }

/* ── Smooth color transitions on all links ───────────────────── */
a { transition: color .18s ease; }

/* ── Reduced motion accessibility ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}