/*
Theme Name: Mochii
Author: Kimochi
Description: WordPress theme for Kimochi Gaming
Version: 1.0.0
Text Domain: mochii
Requires at least: 6.3
Requires PHP: 8.0
*/

/* ============================================================
   GLOBAL CUSTOM PROPERTIES (design tokens)
   ============================================================ */
:root {
  --mochii-radius-card: 16px;
  --mochii-radius-pill: 9999px;
  --mochii-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --mochii-transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --mochii-transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   BASE RESET & GLOBALS
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
}

img,
video {
  display: block;
  max-width: 100%;
}

/* ============================================================
   TYPOGRAPHY — Material Symbols icon rendering
   ============================================================ */
.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  vertical-align: middle;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

/* ============================================================
   HERO SECTION HELPERS
   ============================================================ */
.hero-gradient-overlay {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(14, 14, 16, 0.5) 50%,
    rgba(14, 14, 16, 0.92) 85%,
    #0e0e10 100%
  );
}

/* ============================================================
   GLASSMORPHISM UTILITIES
   ============================================================ */
.glass-panel {
  background: rgba(38, 37, 40, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ============================================================
   BENTO CELL — spring animation on hover
   ============================================================ */
.bento-cell {
  transition:
    transform var(--mochii-transition-spring),
    box-shadow var(--mochii-transition-base);
}

.bento-cell:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 48px -10px rgba(161, 0, 255, 0.25);
}

/* ============================================================
   SPLIDE — Hero carousel overrides
   ============================================================ */

/* Hide default Splide pagination; we rely on a custom progress */
#hero-splide .splide__pagination {
  display: none;
}

/* Custom progress bar (bottom right) */
/* Custom Pagination Dots for Hero */
.mochii-hero-pagination {
  bottom: 24px;
  padding: 0 24px;
  justify-content: flex-end;
}

@media (min-width: 768px) {
  .mochii-hero-pagination {
    bottom: 40px;
    padding: 0 48px;
  }
}

.mochii-hero-page {
  background: rgba(255, 255, 255, 0.3) !important;
  width: 8px !important;
  height: 8px !important;
  margin: 3px !important;
  transition: all 0.3s ease !important;
}

.mochii-hero-page.is-active {
  background: var(--mochii-color-primary) !important;
  width: 24px !important;
  border-radius: 4px !important;
}

/* ============================================================
   SPLIDE — Android carousel overrides
   ============================================================ */
#android-splide .splide__track {
  padding-top: 16px;
  padding-bottom: 24px;
  margin-top: -16px;
  margin-bottom: -24px;
}

#android-splide .splide__list {
  align-items: stretch;
}

#android-splide .splide__slide {
  width: 320px;
}

@media (min-width: 768px) {
  #android-splide .splide__slide {
    width: 450px;
  }
}

/* Hide default pagination for Android carousel */
#android-splide .splide__pagination {
  display: none;
}

/* ============================================================
   CUSTOM SCROLLBAR (webkit)
   ============================================================ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #131315;
}

::-webkit-scrollbar-thumb {
  background: #48474a;
  border-radius: var(--mochii-radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: #d195ff;
}

/* ============================================================
   UTILITY — line-clamp
   ============================================================ */
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* ============================================================
   ACCESSIBILITY — focus-visible ring
   ============================================================ */
:focus-visible {
  outline: 2px solid #d195ff;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   BOTTOM NAV spacing — ensure footer not hidden behind mobile nav
   ============================================================ */
@media (max-width: 767px) {
  #site-footer {
    padding-bottom: 100px;
  }
}

/* ============================================================
   FAB — glow pulse animation
   ============================================================ */
@keyframes fab-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(209, 149, 255, 0.35);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(209, 149, 255, 0);
  }
}

#fab-btn {
  animation: fab-pulse 3s ease-in-out infinite;
}

#fab-btn:hover {
  animation: none;
}

/* ============================================================
   LOADING SHIMMER — for potential lazy sections
   ============================================================ */
@keyframes shimmer {
  0% {
    background-position: -800px 0;
  }
  100% {
    background-position: 800px 0;
  }
}

.skeleton {
  background: linear-gradient(90deg, #1f1f22 25%, #262528 50%, #1f1f22 75%);
  background-size: 800px 100%;
  animation: shimmer 1.6s infinite;
}

/* ============================================================
   SIDEBAR active link pill
   ============================================================ */
#site-sidebar a.border-l-4.border-primary {
  box-shadow: inset 3px 0 0 0 #d195ff;
}