/* ═══════════════════════════════════════════════════════════════════════════
   ONE INSIDER — UNIVERSAL RADIANT GLASS DESIGN SYSTEM v5.0
   Atmospheric Aurora Mesh, Luminous Edge Glows & Floating Ambient Orbs
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --core-glass-bg: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.02) 28%,
    rgba(12, 16, 28, 0.72) 65%,
    rgba(18, 22, 38, 0.88) 100%
  );
  --core-glass-border: rgba(255, 255, 255, 0.18);
  --core-glass-hover-border: rgba(255, 255, 255, 0.38);
  --core-glass-blur: blur(24px) saturate(190%) contrast(104%);
  --core-card-radius: 22px;
  --core-crimson-glow: rgba(246, 0, 0, 0.35);
  --core-violet-glow: rgba(124, 58, 237, 0.25);
  --core-cyan-glow: rgba(0, 240, 255, 0.2);
  --core-shadow: 
    0 18px 45px rgba(0, 0, 0, 0.6),
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.38),
    inset 0 -1px 1px rgba(0, 0, 0, 0.35),
    inset 1px 0 2px rgba(255, 255, 255, 0.1);
  --core-shadow-hover: 
    0 24px 65px rgba(0, 0, 0, 0.8),
    0 0 32px rgba(246, 0, 0, 0.3),
    inset 0 2px 2px rgba(255, 255, 255, 0.55),
    inset 0 -1px 2px rgba(255, 255, 255, 0.12);
}

/* ─── Sleek Cosmic Scrollbar (Desktop & Touch Resilient) ─── */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 51, 102, 0.4) transparent;
}

html::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

html::-webkit-scrollbar-track {
  background: rgba(5, 7, 13, 0.6);
}

html::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 51, 102, 0.7), rgba(236, 0, 255, 0.7));
  border-radius: 999px;
}

html::-webkit-scrollbar-thumb:hover {
  background: #ff3366;
}

/* ─── Global Background & Multi-Layer Aurora Lighting ─── */
body {
  background-color: #05070d !important;
  background-image: 
    radial-gradient(circle at 50% -5%, rgba(246, 0, 0, 0.28) 0%, rgba(236, 0, 255, 0.1) 30%, transparent 60%),
    radial-gradient(circle at 10% 20%, rgba(124, 58, 237, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 90% 30%, rgba(236, 0, 255, 0.2) 0%, transparent 48%),
    radial-gradient(circle at 15% 75%, rgba(0, 240, 255, 0.14) 0%, transparent 42%),
    radial-gradient(circle at 85% 80%, rgba(246, 0, 0, 0.22) 0%, transparent 48%),
    radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.12) 0%, transparent 65%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  color: #ffffff;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  position: relative;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Floating Radiant Aurora Lights (Site-wide) */
body::before {
  content: '';
  position: fixed;
  top: 5%;
  left: 3%;
  width: 550px;
  height: 550px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 0, 0, 0.2) 0%, rgba(236, 0, 255, 0.08) 40%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  contain: strict;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
  animation: coreGlowFloat1 16s ease-in-out infinite alternate;
}

body::after {
  content: '';
  position: fixed;
  bottom: 8%;
  right: 4%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.22) 0%, rgba(0, 240, 255, 0.08) 45%, transparent 70%);
  filter: blur(85px);
  pointer-events: none;
  z-index: 0;
  contain: strict;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
  animation: coreGlowFloat2 18s ease-in-out infinite alternate;
}

@keyframes coreGlowFloat1 {
  0% { transform: translate(0, 0) scale(1); opacity: 0.75; }
  50% { transform: translate(60px, 40px) scale(1.18); opacity: 1; }
  100% { transform: translate(-40px, 60px) scale(0.92); opacity: 0.8; }
}

@keyframes coreGlowFloat2 {
  0% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  50% { transform: translate(-60px, -45px) scale(1.22); opacity: 0.95; }
  100% { transform: translate(40px, -55px) scale(0.9); opacity: 0.75; }
}

/* ─── Full-Viewport Cover Video / Ambient Background ─── */
.bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background-color: transparent !important;
  z-index: 0;
  pointer-events: none;
  contain: strict;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
  opacity: 0.45;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
}

.desktop-area,
.page-container,
.main-container,
.conf-container,
.tea-container {
  background: transparent !important;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 84px 20px 40px !important;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
}

/* ─── Hide Obsolete Apple-Like 3 Dots & Suppress Loaders / Wipes Completely ─── */
.tb-dots,
.traffic-lights,
.tb-dot,
.traffic-light,
.window-dots,
#loader,
#wipe,
.wipe,
.home-loader-anim,
.subpage-loader-box {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* ─── Radiant Liquid Glass Cards with Luminous Edge Lights ─── */
.window,
.section-card,
.panel-card,
.forum-card,
.material-card,
.tool-card,
.link-card,
.confession-card,
.tea-card,
.creator-section,
.poll-card,
.auth-card,
.sm-paper-card,
.drive-wrapper {
  background: var(--core-glass-bg) !important;
  border: 1px solid var(--core-glass-border) !important;
  border-radius: var(--core-card-radius) !important;
  backdrop-filter: var(--core-glass-blur) !important;
  -webkit-backdrop-filter: var(--core-glass-blur) !important;
  box-shadow: var(--core-shadow) !important;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform, box-shadow;
  transition:
    transform 0.26s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.26s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.26s ease,
    background 0.26s ease !important;
}

/* Layer 1: Liquid Caustic Light Specular */
.window::before,
.section-card::before,
.panel-card::before,
.forum-card::before,
.creator-section::before,
.auth-card::before,
.drive-wrapper::before,
.material-card::before,
.tool-card::before,
.link-card::before,
.confession-card::before,
.tea-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--liquid-x, 30%) var(--liquid-y, 25%),
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.03) 40%,
    transparent 70%
  );
  pointer-events: none;
  opacity: 0.75;
  transition: opacity 0.35s ease;
  z-index: 1;
}

/* Layer 2: Glowing Top Liquid Meniscus Accent Line */
.window::after,
.section-card::after,
.panel-card::after,
.forum-card::after,
.creator-section::after,
.auth-card::after,
.drive-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(246, 0, 0, 0.7) 30%, rgba(236, 0, 255, 0.6) 70%, transparent 100%);
  opacity: 0.85;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.3s ease;
}

.window:hover,
.section-card:hover,
.panel-card:hover,
.material-card:hover,
.tool-card:hover,
.link-card:hover,
.confession-card:hover,
.tea-card:hover,
.sm-paper-card:hover {
  border-color: var(--core-glass-hover-border) !important;
  box-shadow: var(--core-shadow-hover) !important;
  transform: translateY(-4px) scale(1.008) translateZ(0) !important;
}

.window:hover::before,
.section-card:hover::before,
.panel-card:hover::before,
.creator-section:hover::before,
.material-card:hover::before,
.link-card:hover::before,
.confession-card:hover::before,
.tea-card:hover::before {
  opacity: 1;
}

.window:hover::after,
.section-card:hover::after,
.panel-card:hover::after,
.creator-section:hover::after {
  opacity: 1;
}

/* ─── Modern Titlebars & Headers ─── */
.titlebar,
.window-header,
.panel-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 22px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.tb-title,
.window-title,
.panel-title {
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-size: 0.96rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.titlebar .tb-icon,
.panel-title-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(246, 0, 0, 0.25), rgba(124, 58, 237, 0.25)) !important;
  border: 1px solid rgba(246, 0, 0, 0.4) !important;
  font-size: 0.88rem !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(246, 0, 0, 0.3) !important;
}

.win-body,
.panel-body {
  padding: 22px !important;
}

/* ─── Page Hero Cards ─── */
.page-hero-card {
  text-align: center;
  margin: 0 auto 36px;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.page-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: 999px;
  background: rgba(246, 0, 0, 0.12) !important;
  border: 1px solid rgba(246, 0, 0, 0.38) !important;
  color: #ffffff !important;
  backdrop-filter: blur(16px) !important;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 18px;
  letter-spacing: 0.01em;
  box-shadow: 0 0 20px rgba(246, 0, 0, 0.25) !important;
}

.page-hero-title {
  font-family: "BubbledotICG-FinePos", "Geist Pixel Circle", monospace !important;
  font-size: clamp(2rem, 5.5vw, 3.8rem) !important;
  font-weight: 400 !important;
  letter-spacing: -0.04em !important;
  color: #ffffff !important;
  line-height: 1.15;
  margin: 0 0 14px;
  text-shadow: 0 0 40px rgba(246, 0, 0, 0.35);
}

.page-hero-title span {
  background: linear-gradient(135deg, #ffffff 30%, #f60000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-hero-sub {
  font-size: clamp(0.88rem, 1.6vw, 1.05rem);
  color: #cbd5e1;
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ─── Universal Footer Alignment & Radiant Top Glow ─── */
.awesome-footer {
  width: calc(100% - 32px) !important;
  max-width: 1140px !important;
  margin: 60px auto 40px auto !important;
  padding: 44px 36px 32px !important;
  background: rgba(14, 16, 26, 0.75) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 28px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65), 0 0 35px rgba(246, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
}

.awesome-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(246, 0, 0, 0.8) 40%, rgba(236, 0, 255, 0.7) 60%, transparent 100%);
  pointer-events: none;
}

/* ─── Universal Colorful Radiant Top Scroll Progress Bar ─── */
.top-scroll-progress {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 3.5px !important;
  width: 0%;
  background: linear-gradient(90deg, #f60000 0%, #ff007f 25%, #ec00ff 50%, #7c3aed 75%, #00f0ff 100%) !important;
  background-size: 200% 100% !important;
  box-shadow: 0 0 16px rgba(246, 0, 0, 0.9), 0 0 30px rgba(236, 0, 255, 0.75), 0 0 45px rgba(0, 240, 255, 0.5) !important;
  z-index: 9999999 !important;
  pointer-events: none !important;
  transition: width 0.08s ease-out !important;
  animation: topScrollGlowSweep 4s linear infinite !important;
}

.top-scroll-progress::after {
  content: '';
  position: absolute;
  top: -2px;
  right: 0;
  width: 12px;
  height: 7.5px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 12px #ffffff, 0 0 22px #f60000, 0 0 35px #00f0ff;
  transform: translateX(50%);
}

@keyframes topScrollGlowSweep {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ULTRA-SMOOTH 60-120 FPS MOBILE HARDWARE ACCELERATION ENGINE
   Eliminates scroll stutter & frame drops on mobile devices
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px), (pointer: coarse) {
  /* 1. Prevent costly full-viewport repaints on mobile touch scroll */
  body {
    background-attachment: scroll !important;
    background-size: cover !important;
  }

  /* 2. Freeze heavy fixed Gaussian blurs to save mobile GPU fill rate */
  body::before,
  body::after {
    animation: none !important;
    filter: blur(40px) !important;
    transform: translateZ(0) !important;
    will-change: auto !important;
    opacity: 0.5 !important;
  }

  /* 3. High-performance glass styling for repeated content cards */
  .window,
  .section-card,
  .panel-card,
  .forum-card,
  .material-card,
  .tool-card,
  .link-card,
  .confession-card,
  .tea-card,
  .creator-section,
  .poll-card,
  .auth-card,
  .sm-paper-card,
  .drive-wrapper {
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.09) 0%,
      rgba(255, 255, 255, 0.02) 28%,
      rgba(14, 18, 30, 0.82) 65%,
      rgba(20, 26, 44, 0.94) 100%
    ) !important;
    backdrop-filter: blur(16px) saturate(180%) contrast(102%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) contrast(102%) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1.2px 1px rgba(255, 255, 255, 0.35) !important;
    content-visibility: auto;
    contain-intrinsic-size: 0 160px;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  /* 4. Relax top scroll progress animation on mobile to keep compositor smooth */
  .top-scroll-progress {
    animation: none !important;
    box-shadow: 0 0 10px rgba(246, 0, 0, 0.7) !important;
  }

  /* 5. Smooth touch container compositing */
  .desktop-area,
  .page-container,
  .main-container,
  .conf-container,
  .tea-container {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}