/* DocStory - Global Stylesheet */

/* =============================================
   Floating Doodle Background
   ============================================= */
@property --doodle-dx { syntax: '<length>'; initial-value: 0px; inherits: false; }
@property --doodle-dy { syntax: '<length>'; initial-value: 0px; inherits: false; }
@property --doodle-rw { syntax: '<angle>';  initial-value: 0deg; inherits: false; }

@keyframes doodle-x {
  from { --doodle-dx: var(--dx-from, -8px); }
  to   { --doodle-dx: var(--dx-to,   10px); }
}
@keyframes doodle-y {
  from { --doodle-dy: var(--dy-from, -10px); }
  to   { --doodle-dy: var(--dy-to,   12px);  }
}
@keyframes doodle-r {
  from { --doodle-rw: var(--rw-from, -6deg); }
  to   { --doodle-rw: var(--rw-to,   6deg);  }
}

#doodle-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.doodle-float {
  position: absolute;
  will-change: translate, rotate;
  translate: var(--doodle-dx) var(--doodle-dy);
  rotate: calc(var(--base-rot, 0deg) + var(--doodle-rw));
  animation:
    doodle-x var(--dur-x, 14s) ease-in-out var(--delay, 0s) infinite alternate,
    doodle-y var(--dur-y, 11s) ease-in-out var(--delay, 0s) infinite alternate,
    doodle-r var(--dur-r, 18s) ease-in-out var(--delay, 0s) infinite alternate;
}

.doodle-float img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: var(--doodle-opacity, 0.07);
  user-select: none;
  -webkit-user-drag: none;
}

@media (prefers-reduced-motion: reduce) {
  .doodle-float {
    animation: none !important;
    translate: 0 0;
    rotate: var(--base-rot, 0deg);
  }
}

/* =============================================
   Glassmorphism Cards
   ============================================= */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(51, 62, 77, 0.1);
}

/* =============================================
   Background Dot Pattern
   ============================================= */
.bg-pattern {
    background-image: radial-gradient(#9580FF 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.05;
}

/* =============================================
   Gradient Text
   ============================================= */
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =============================================
   Material Symbols Settings
   ============================================= */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* =============================================
   Hide Scrollbar
   ============================================= */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* =============================================
   Scrollable List (Directory Sidebar)
   ============================================= */
.scrollable-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(149, 128, 255, 0.3) transparent;
}
.scrollable-list::-webkit-scrollbar { width: 4px; }
.scrollable-list::-webkit-scrollbar-track { background: transparent; }
.scrollable-list::-webkit-scrollbar-thumb {
    background: rgba(149, 128, 255, 0.3);
    border-radius: 2px;
}

/* =============================================
   Smooth hover scale utility
   ============================================= */
.hover-scale {
    transition: transform 0.2s ease-out;
}
.hover-scale:hover { transform: scale(1.02); }
.hover-scale:active { transform: scale(0.98); }

/* =============================================
   School Name Cycling Animation
   ============================================= */
#school-name-cycle {
    display: block;
    font-weight: 600;
    font-size: 1.07em;
    color: var(--color-primary, #1a1a2e);
    transition: opacity 0.28s ease, transform 0.28s ease;
}
#school-name-cycle.school-exit {
    opacity: 0;
    transform: translateY(-7px);
}
#school-name-cycle.school-enter {
    opacity: 0;
    transform: translateY(7px);
}