/* ══════════════════════════════════════════════════════════════
   BOOK VAULT — SUPREME MOBILE PERFORMANCE & NATIVE EXPERIENCE
   Tailored for 60fps / 120fps lag-free kinetic scrolling & touch
   ══════════════════════════════════════════════════════════════ */

/* --- 1. CORE SCROLLING & TOUCH PHYSICS --- */
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

/* On touch/mobile devices, let native GPU momentum kinetic scrolling handle flicks with 0 latency */
@media (hover: none) and (pointer: coarse) {
  html {
    scroll-behavior: auto !important;
  }
}

body {
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Notched iPhones & modern edge-to-edge Androids */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

nav {
  padding-top: env(safe-area-inset-top);
}

footer {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Fast hardware-accelerated touch scroll regions */
.overflow-y-auto, .overflow-x-auto, main, section, #semesters, #explore {
  -webkit-overflow-scrolling: touch;
}

/* Fast click response without 300ms tap delay */
a, button, input, select, textarea, summary {
  touch-action: manipulation;
}

/* Disable context menu & callouts on interactive elements to feel like a native app */
a, button, img, summary {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Allow text selection where appropriate */
p, h1, h2, h3, h4, h5, h6, span, li, td, th, label, input, textarea, blockquote {
  -webkit-user-select: text;
  user-select: text;
}

/* Prevent image dragging */
img {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
  content-visibility: auto;
}
a img, button img {
  pointer-events: auto;
}

/* --- 2. ELIMINATE TOUCH SCROLL JITTER & LAYER THRASHING --- */

/* NEVER scale cards or containers on :active touch - this causes massive scroll jitter */
@media (hover: none) and (pointer: coarse) {
  .book-card:active, 
  .glass-card:active, 
  .module-card:active, 
  details:active, 
  .sem-slot:active,
  .sem-card-wrapper:active,
  summary:active,
  .dept-gateway-card:active,
  .vault-card:active,
  section:active {
    transform: none !important;
  }

  /* Disable hover transitions on touch devices so cards don't stick on tap */
  .book-card:hover, 
  .glass-card:hover, 
  .module-card:hover, 
  details.sem-slot:hover, 
  .glow-hover:hover,
  .dept-gateway-card:hover,
  .vault-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Only tiny dedicated buttons get quick tap feedback */
  button.sem-icon-btn:active,
  .reddit-action-btn:active,
  .rf-send:active {
    opacity: 0.75;
    transform: scale(0.94);
  }
}

/* Prevent layer thrashing: avoid permanent will-change on dozens of off-screen elements */
.glass-card, .book-card, .sem-slot, .module-card, .vault-card {
  will-change: auto;
}

/* --- 3. RENDERING CONTAINMENT (SPEED UP FIRST PAINT & VISIT) --- */

/* Contain off-screen layout updates so scrolling doesn't re-render the whole DOM tree */
.sem-card-wrapper, .sem-slot, .book-card, .module-card {
  contain: layout paint;
}

/* Below-the-fold content visibility for instant initial page visit & memory efficiency */
#semesters, #explore, section:has(.philosophy-inner), footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 550px;
}

/* Hide scrollbar cleanly on mobile viewports while maintaining smooth scrolling */
@media (max-width: 768px) {
  ::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  body, html {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

/* Mobile sidebar / modal GPU acceleration */
[id*="mob-panel"], [id*="mobile-sidebar"] {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

/* --- 4. MOBILE GPU PERFORMANCE ENHANCEMENTS (<= 768px) --- */
@media (max-width: 768px) {
  /* Replace expensive backdrop-filter: blur with high-performance solid/semi-translucent surfaces */
  .glass-card, 
  .vault-card, 
  .announcement-box, 
  .module-card,
  details.sem-slot {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05) !important;
  }

  /* Simplify top nav blur for swift compositing */
  nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(253, 250, 243, 0.97) !important;
  }

  /* SVG turbulence plus a full-screen blend layer is costly to composite while scrolling. */
  .ambient-noise-overlay { display: none !important; }

  /* Disable heavy spinning gradient pseudo-elements that cause continuous 60fps GPU repainting */
  .glass-card::before,
  .ai-studio-beam {
    animation: none !important;
    filter: none !important;
  }

  /* Optimize heavy ambient background blobs to prevent GPU fill-rate drop on mobile */
  .hero-blob, .hero-blob-1, .hero-blob-2, .hero-blob-3 {
    animation: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    opacity: 0.12 !important;
    transform: none !important;
  }

  /* The department glows were large, blurred fixed layers on the home page. */
  .dept-glow-cse, .dept-glow-ece {
    filter: none !important;
    opacity: 0.14 !important;
  }

  /* Keep tap feedback subtle and avoid animating layout or promoting every card. */
  .glass-card, .book-card, .sem-slot, .module-card, .vault-card,
  .dept-gateway-card, a, button {
    transition-duration: 180ms !important;
  }

  /* Dot matrix background lightweight rendering */
  .premium-dot-bg {
    background-size: 20px 20px;
    opacity: 0.6;
  }

  /* Mobile typography and touch rhythm adjustments */
  .hero-title {
    font-size: clamp(2.8rem, 13vw, 4.4rem) !important;
    line-height: 1.05 !important;
  }

  /* Ensure smooth accordion expansion */
  details.sem-slot > summary {
    padding: 1.15rem 1.15rem !important;
  }

  /* Touch-friendly top joint tab */
  .sem-top-joint {
    padding: 0.4rem 0.95rem !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  a:active, button:active:not(:disabled) {
    opacity: 0.82;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}