/* ==========================================================================
   1. Utility Classes & Base Styles
   ========================================================================== */
html {
  scroll-behavior: smooth;
}

/* Ensure sections targeted by anchors are not hidden under the fixed header */
[id] {
  scroll-margin-top: 80px;
  /* Approximate height of the fixed header */
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.chalk-effect {
  filter: drop-shadow(2px 2px 2px rgba(255, 255, 255, 0.4));
}

/* ==========================================================================
   2. Textures & Backgrounds
   ========================================================================== */
.blackboard-texture {
  background-image: radial-gradient(circle at 50% 50%, #2c3e50 0%, #1b2a3d 100%);
  position: relative;
}

.dark .blackboard-texture {
  background-image: radial-gradient(circle at 50% 50%, #1a252f 0%, #0d151f 100%);
}

.blackboard-texture::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("https://www.transparenttextures.com/patterns/blackboard.png");
  opacity: 0.3;
  pointer-events: none;
}

.corkboard-texture {
  background-color: #d2b48c;
  background-image: url("https://www.transparenttextures.com/patterns/cork-board.png");
}

.dark .corkboard-texture {
  background-color: #795548;
}

.dashed-path {
  stroke-dasharray: 10, 10;
  animation: dash 20s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: -1000;
  }
}

/* ==========================================================================
   3. Animations & Keyframes
   ========================================================================== */
@keyframes heroFloat {
  0% {
    transform: translateY(0) rotate(0deg);
  }

  33% {
    transform: translateY(-10px) rotate(2deg);
  }

  66% {
    transform: translateY(5px) rotate(-1deg);
  }

  100% {
    transform: translateY(0) rotate(0deg);
  }
}

.hero-float-icon {
  animation: heroFloat infinite ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-float-icon {
    animation: none !important;
  }
}