/* ============================================
   ENTRANCE ANIMATION LIBRARY
   Each variant is distinct - no repeated motion patterns.
   Applied via [data-animate="name"], triggered by IntersectionObserver
   adding .is-visible in js/animate.js
   ============================================ */

[data-animate] { opacity: 0; }
[data-animate].is-visible { opacity: 1; }

/* 1. Rise + fade - gentle upward drift */
[data-animate="rise"] { transform: translateY(36px); transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo); }
[data-animate="rise"].is-visible { transform: translateY(0); }

/* 2. Unfold from left - clip-path wipe */
[data-animate="unfold-left"] { clip-path: inset(0 100% 0 0); transition: opacity 0.5s, clip-path 0.9s var(--ease-smooth); }
[data-animate="unfold-left"].is-visible { clip-path: inset(0 0 0 0); }

/* 3. Scale bloom - soft zoom in from slightly small */
[data-animate="bloom"] { transform: scale(0.85); transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-spring); }
[data-animate="bloom"].is-visible { transform: scale(1); }

/* 4. Tilt settle - rotates in and settles flat */
[data-animate="tilt-settle"] { transform: rotate(-4deg) translateY(24px); transition: opacity 0.7s var(--ease-out-expo), transform 0.9s var(--ease-spring); }
[data-animate="tilt-settle"].is-visible { transform: rotate(0deg) translateY(0); }

/* 5. Slide from right */
[data-animate="slide-right"] { transform: translateX(56px); transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo); }
[data-animate="slide-right"].is-visible { transform: translateX(0); }

/* 6. Slide from left */
[data-animate="slide-left"] { transform: translateX(-56px); transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo); }
[data-animate="slide-left"].is-visible { transform: translateX(0); }

/* 7. Press up from below with slight overshoot (card pop) */
[data-animate="pop-up"] { transform: translateY(48px) scale(0.94); transition: opacity 0.6s var(--ease-spring), transform 0.7s var(--ease-spring); }
[data-animate="pop-up"].is-visible { transform: translateY(0) scale(1); }

/* 8. Draw line - width reveal for dividers/rules */
[data-animate="draw-line"] { width: 0; opacity: 1; transition: width 1.1s var(--ease-out-expo); }
[data-animate="draw-line"].is-visible { width: 100%; }

/* 9. Counter blur focus - starts blurred, sharpens */
[data-animate="focus-in"] { filter: blur(8px); transform: scale(1.03); transition: opacity 0.7s ease, filter 0.9s var(--ease-smooth), transform 0.9s var(--ease-smooth); }
[data-animate="focus-in"].is-visible { filter: blur(0); transform: scale(1); }

/* 10. Stagger children - fade+rise applied with incremental delay via inline style */
[data-animate="stagger-child"] { transform: translateY(20px); transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo); }
[data-animate="stagger-child"].is-visible { transform: translateY(0); }

/* 11. Rotate in from corner - for icons/badges */
[data-animate="spin-in"] { transform: rotate(-90deg) scale(0.6); transition: opacity 0.6s var(--ease-out-expo), transform 0.8s var(--ease-spring); }
[data-animate="spin-in"].is-visible { transform: rotate(0deg) scale(1); }

/* 12. Rise tall - larger travel distance for hero-scale elements */
[data-animate="rise-tall"] { transform: translateY(72px); transition: opacity 1s var(--ease-out-expo), transform 1.1s var(--ease-out-expo); }
[data-animate="rise-tall"].is-visible { transform: translateY(0); }

/* Continuous ambient motion (not entrance-triggered) */
@keyframes float-gentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.float { animation: float-gentle 5s ease-in-out infinite; }

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}
.pulse { animation: pulse-soft 2.4s ease-in-out infinite; }

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spin-slow { animation: spin-slow 20s linear infinite; }

/* Hover interactions */
.hover-lift { transition: transform 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-out-expo); }
.hover-lift:hover { transform: translateY(-8px); box-shadow: 0 20px 40px -12px rgba(26,36,32,0.25); }

.hover-grow { transition: transform 0.4s var(--ease-spring); }
.hover-grow:hover { transform: scale(1.05); }

.hover-tilt { transition: transform 0.4s var(--ease-spring); }
.hover-tilt:hover { transform: rotate(-2deg) scale(1.03); }

.hover-underline { position: relative; }
.hover-underline::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out-expo);
}
.hover-underline:hover::after { transform: scaleX(1); transform-origin: left; }

.hover-glow { transition: box-shadow 0.4s var(--ease-out-expo), transform 0.3s var(--ease-out-expo); }
.hover-glow:hover { box-shadow: 0 0 0 8px rgba(205,121,37,0.15); transform: translateY(-2px); }

/* Icon sizing */
.icon { width: 24px; height: 24px; }
.icon-sm { width: 18px; height: 18px; }
.icon-lg { width: 40px; height: 40px; }
.icon-xl { width: 56px; height: 56px; }

/* ============================================
   CUSTOM SCROLLBAR
   ============================================ */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--color-rust) var(--color-cream);
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--color-cream); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--color-rust), var(--color-olive));
  border-radius: 10px;
  border: 3px solid var(--color-cream);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-rust-dark); }

/* ============================================
   CUSTOM CURSOR
   Two-part cursor: a small solid dot that tracks exactly,
   and a soft trailing ring that eases behind it.
   Driven by js/cursor.js. Disabled automatically on touch devices.
   ============================================ */
body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button {
  cursor: none;
}
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor-dot {
  width: 8px; height: 8px;
  background: var(--color-rust);
  transition: transform 0.15s var(--ease-out-expo), background 0.25s;
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1.5px solid var(--color-rust);
  opacity: 0.6;
  transition: width 0.3s var(--ease-spring), height 0.3s var(--ease-spring),
              border-color 0.3s, opacity 0.3s, background 0.3s;
}
/* Cursor grows + fills on interactive elements (set via JS adding .cursor-hover to body) */
body.cursor-hover .cursor-ring {
  width: 60px; height: 60px;
  background: rgba(205,121,37,0.12);
  opacity: 1;
}
body.cursor-hover .cursor-dot { transform: translate(-50%, -50%) scale(0); }

/* Narrow/touch screens: no real pointer to decorate, so hide it entirely
   and give the normal cursor back. */
@media (max-width: 900px), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
  body.has-custom-cursor,
  body.has-custom-cursor a,
  body.has-custom-cursor button { cursor: auto; }
}

/* ============================================
   ICON INTERACTIONS - tilt / grow / color shift
   Applied to any element wrapping a data-icon span
   ============================================ */
.icon-interact { transition: transform 0.45s var(--ease-spring), color 0.35s var(--ease-out-expo); display: inline-flex; }
.icon-interact:hover { transform: rotate(-12deg) scale(1.22); color: var(--color-rust); }

.icon-interact-alt { transition: transform 0.45s var(--ease-spring), color 0.35s var(--ease-out-expo); display: inline-flex; }
.icon-interact-alt:hover { transform: rotate(10deg) scale(1.18) translateY(-3px); color: var(--color-olive-light); }

/* work-card icon: grows, rotates, and shifts to rust on card hover */
.work-card [data-icon] { transition: transform 0.5s var(--ease-spring), color 0.4s var(--ease-out-expo); }
.work-card:hover [data-icon] { transform: rotate(-10deg) scale(1.28); color: var(--color-olive); }

/* resource icon badge: full color invert + rotate on hover */
.resource-icon-badge { transition: transform 0.45s var(--ease-spring), background 0.35s, box-shadow 0.35s; }
.resource-card:hover .resource-icon-badge {
  transform: rotate(10deg) scale(1.15);
  background: var(--color-rust);
  box-shadow: 0 8px 20px -6px rgba(205,121,37,0.6);
}

/* course number badge: pop + spin */
.course-mini-num, .work-card .course-mini-num { transition: transform 0.5s var(--ease-spring), background 0.35s; }
.course-mini-item:hover .course-mini-num { transform: rotate(360deg) scale(1.15); background: var(--color-rust); color: var(--color-white); }
.work-card:hover .course-mini-num { transform: rotate(360deg) scale(1.15); background: var(--color-rust); }

/* social icons: stronger spin+color already present, boost it */
.social-icons a { transition: background 0.35s, transform 0.4s var(--ease-spring), box-shadow 0.35s; }
.social-icons a:hover { transform: translateY(-6px) rotate(14deg) scale(1.1); box-shadow: 0 10px 20px -6px rgba(205,121,37,0.5); }

/* quiz option letter badge pop on hover */
.quiz-option:not(:disabled):hover .quiz-option-letter { transform: scale(1.2) rotate(-8deg); background: var(--color-rust); color: var(--color-white); }
.quiz-option-letter { transition: transform 0.35s var(--ease-spring), background 0.3s, color 0.3s; }

/* nav links: bolder underline + color pop + slight lift */
.main-nav a { transition: color 0.3s, transform 0.3s var(--ease-spring); }
.main-nav a:not(.btn-donate):hover { color: var(--color-rust); transform: translateY(-2px); }

/* partner logos: stronger hover pop with color reveal */
/* partners-strip hover handled in home.css - slower, smoother */

/* btn-donate: intense color/shadow hover, no lift */
.btn-donate { transition: background 0.3s var(--ease-out-expo), box-shadow 0.35s; }
.btn-donate:hover { background: var(--color-rust-dark); color: var(--color-white) !important; box-shadow: 0 14px 26px -8px rgba(205,121,37,0.55); }

/* stat number: pulse-scale on hover */
.stat-card { transition: transform 0.4s var(--ease-spring); }
.stat-card:hover { transform: translateY(-6px); }
.stat-card:hover .stat-number { animation: stat-pop 0.5s var(--ease-spring); }
@keyframes stat-pop { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* Sage accent touches - pulling the 4th real logo color into active use */
.work-card:nth-child(3n+2) [data-icon] { color: var(--color-sage-dark); }
.work-card:nth-child(3n+2):hover [data-icon] { color: var(--color-rust); }
.hero-eyebrow-badge { border-color: rgba(161,170,136,0.4); }
/* stat numbers stay consistent rust per the approved mockup, no alternating accent */