/* ============================================
   INTERACTIONS.CSS - School.net Online Academy
   Animations, transitions, and visual effects
   ============================================ */

/* ============================================
   1. SCROLL ANIMATIONS
   ============================================ */

/* Base state for animated elements */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Visible state */
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade up variation */
.animate-fade-up {
  transform: translateY(40px);
}

.animate-fade-up.is-visible {
  transform: translateY(0);
}

/* Fade in from left */
.animate-from-left {
  transform: translateX(-50px);
}

.animate-from-left.is-visible {
  transform: translateX(0);
}

/* Fade in from right */
.animate-from-right {
  transform: translateX(50px);
}

.animate-from-right.is-visible {
  transform: translateX(0);
}

/* Scale up animation */
.animate-scale {
  transform: scale(0.9);
}

.animate-scale.is-visible {
  transform: scale(1);
}

/* ============================================
   2. SCROLL PROGRESS BAR
   ============================================ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #4b0082, #ffd700);
  width: 0%;
  z-index: 9999;
  transition: width 0.1s ease-out;
}

/* ============================================
   3. BUTTON EFFECTS
   ============================================ */

/* Base button transitions */
.button,
.filled-button,
.empty-button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hover lift effect */
.button:hover,
.filled-button:hover,
.empty-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(75, 0, 130, 0.25);
}

.filled-button:hover {
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
  background-color: #ffe033;
}

.empty-button:hover {
  background-color: rgba(75, 0, 130, 0.05);
}

/* Active press effect */
.button:active,
.filled-button:active,
.empty-button:active {
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(75, 0, 130, 0.2);
}

/* Ripple effect */
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ============================================
   4. CARD EFFECTS
   ============================================ */

/* Enrollment option cards */
.option-content {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform-style: preserve-3d;
}

.option-content:hover {
  box-shadow: 0 20px 40px rgba(75, 0, 130, 0.3);
}

/* Education cards (Academics page) */
.education-card {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform-style: preserve-3d;
}

.education-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(75, 0, 130, 0.15);
}

/* Pathway cards (Academics page) */
.pathway-card {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.pathway-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 40px rgba(75, 0, 130, 0.25);
}

.pathway-card:hover img {
  transform: scale(1.05);
}

.pathway-card img {
  transition: transform 0.5s ease;
}

/* Accreditation cards (About page) */
.accreditation-card {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.accreditation-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(75, 0, 130, 0.4);
}

/* Discover items (About page) */
.discover-item {
  transition: all 0.3s ease;
}

.discover-item:hover {
  transform: translateX(10px);
}

.discover-item:hover .feature-icon img {
  transform: scale(1.1);
}

.feature-icon img {
  transition: transform 0.3s ease;
}

/* Online items (About page) */
.online-item {
  transition: all 0.3s ease;
}

.online-item:hover {
  transform: translateY(-5px);
}

.online-item:hover .online-title {
  background-color: #5a1094;
}

.online-title {
  transition: background-color 0.3s ease;
}

/* Class features (About page) */
.class-feature {
  transition: all 0.3s ease;
}

.class-feature:hover {
  transform: translateY(-5px);
}

/* One advantage items (Why page) */
.one-adv-item {
  transition: all 0.3s ease;
}

.one-adv-item:hover {
  transform: translateX(10px);
  box-shadow: 0 10px 30px rgba(75, 0, 130, 0.15);
}

.one-adv-item:hover .one-adv-indicator {
  background-color: #ffd700;
}

.one-adv-indicator {
  transition: background-color 0.3s ease;
}

/* Second and Third advantage items (Why page) */
.sec-adv-item,
.third-adv-item {
  transition: all 0.3s ease;
}

.sec-adv-item:hover,
.third-adv-item:hover {
  transform: translateY(-5px);
}

.sec-adv-item:hover .sec-adv-title {
  background-color: #5a1094;
}

.sec-adv-title {
  transition: background-color 0.3s ease;
}

/* Advantage items (Why page) */
.advantage-item {
  transition: all 0.3s ease;
}

.advantage-item:hover {
  transform: translateX(10px);
}

.advantage-item:hover .advantage-icon {
  transform: scale(1.1) rotate(5deg);
}

.advantage-icon {
  transition: transform 0.3s ease;
}

/* Starseek features (Academics page) */
.starseek-feature {
  transition: all 0.3s ease;
}

.starseek-feature:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 10px 25px rgba(75, 0, 130, 0.2);
}

/* Course feature items (Academics page) */
.course-feature-item {
  transition: all 0.3s ease;
}

.course-feature-item:hover {
  transform: translateY(-5px) scale(1.05);
}

.course-feature-content {
  transition: all 0.3s ease;
}

.course-feature-item:hover .course-feature-content {
  box-shadow: 0 8px 20px rgba(75, 0, 130, 0.3);
}

/* Benefit items */
.benefit-item {
  transition: all 0.3s ease;
}

.benefit-item:hover {
  transform: translateX(10px);
  background-color: rgba(75, 0, 130, 0.03);
}

.benefit-item:hover .benefit-indicator {
  transform: scaleY(1.2);
  background-color: #ffd700;
}

.benefit-indicator {
  transition: all 0.3s ease;
}

/* Detail items (admission page) */
.detail-item {
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.detail-item:hover {
  border-color: #4b0082;
  box-shadow: 0 10px 30px rgba(75, 0, 130, 0.1);
  transform: translateY(-5px);
}

/* Support items */
.support-item {
  transition: all 0.3s ease;
}

.support-item:hover {
  transform: translateX(8px);
  box-shadow: 0 5px 15px rgba(75, 0, 130, 0.1);
}

.col-left .support-item:hover {
  transform: translateX(-8px);
}

/* Allow items */
.allow-item {
  transition: all 0.3s ease;
}

.allow-item:hover {
  transform: translateX(8px);
  background-color: rgba(75, 0, 130, 0.05);
}

.allow-item:hover .allow-icon {
  transform: scale(1.1) rotate(5deg);
}

.allow-icon {
  transition: transform 0.3s ease;
}

/* Program advantage items */
.program-advantage-item {
  transition: all 0.3s ease;
}

.program-advantage-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(75, 0, 130, 0.2);
}

.program-advantage-item:hover .program-advantage-icon {
  transform: scale(1.1);
}

.program-advantage-icon {
  transition: transform 0.3s ease;
}

/* ============================================
   5. IMAGE EFFECTS
   ============================================ */

/* Image zoom on hover */
.student-life-item img,
.activity-item img,
.office-image,
.why-image {
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.student-life-item:hover img {
  transform: scale(1.08);
}

.activity-item:hover img {
  transform: scale(1.05);
}

.office-image-container:hover .office-image {
  transform: scale(1.05);
}

/* Accreditation logos */
.accreditation-logos img {
  transition: all 0.3s ease;
  filter: grayscale(30%);
  opacity: 0.7;
}

.accreditation-logos img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.1);
}

/* ============================================
   6. LINK EFFECTS
   ============================================ */

/* Navigation links underline animation */
.header-bottom a {
  position: relative;
}

.header-bottom a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #ffd700;
  transition: width 0.3s ease;
}

.header-bottom a:hover::after {
  width: 100%;
}

/* Footer links */
.footer-link {
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}

.footer-link:hover {
  color: #4b0082;
  transform: translateX(5px);
}

/* Social links */
.social-link {
  transition: all 0.3s ease;
}

.social-link:hover {
  background-color: rgba(75, 0, 130, 0.05);
  transform: translateX(5px);
}

.social-link:hover .social-icon {
  transform: scale(1.1);
}

.social-icon {
  transition: transform 0.3s ease;
}

/* ============================================
   7. FORM INTERACTIONS
   ============================================ */

/* Input focus effects */
.form-group input,
.form-group select,
.form-group textarea {
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(75, 0, 130, 0.15);
}

/* Label float effect on focus */
.form-group label {
  transition: all 0.3s ease;
}

.form-group input:focus + label,
.form-group textarea:focus + label {
  color: #4b0082;
}

/* ============================================
   8. HIGHLIGHT SECTION EFFECTS
   ============================================ */

.highlight-item {
  transition: all 0.3s ease;
}

.highlight-item:hover {
  transform: translateY(-5px);
}

.highlight-item:hover .highlight-bar {
  height: 100px;
  background: linear-gradient(180deg, #ffd700 0%, rgba(255, 215, 0, 0.5) 100%);
}

.highlight-bar {
  transition: all 0.4s ease;
}

/* ============================================
   9. ACTIVITY SECTION EFFECTS
   ============================================ */

.activity-item {
  transition: all 0.3s ease;
  overflow: hidden;
}

.activity-item:hover {
  z-index: 10;
}

.activity-item:hover .activity-title {
  transform: scale(1.05);
}

.activity-title {
  transition: transform 0.3s ease;
}

/* ============================================
   10. CTA SECTION EFFECTS
   ============================================ */

.cta-text {
  position: relative;
  overflow: hidden;
}

.cta-text::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  animation: pulse-glow 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pulse-glow {
  0%, 100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

/* ============================================
   11. LOADING STATES
   ============================================ */

/* Skeleton loading effect */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ============================================
   12. ENROLLMENT STEPS ANIMATION
   ============================================ */

.enrollment-step-item {
  transition: all 0.3s ease;
}

.enrollment-step-item:hover {
  transform: translateY(-8px);
  background-color: rgba(255, 255, 255, 0.15);
}

.enrollment-step-item:hover .enrollment-step-icon {
  transform: rotate(10deg) scale(1.1);
}

.enrollment-step-icon {
  transition: transform 0.3s ease;
}

/* Calendar items */
.calendar-item {
  transition: all 0.3s ease;
  padding-left: 10px;
  border-left: 3px solid transparent;
}

.calendar-item:hover {
  padding-left: 15px;
  border-left-color: #ffd700;
  background-color: rgba(255, 255, 255, 0.1);
}

/* ============================================
   13. TABLE HOVER EFFECTS
   ============================================ */

tbody tr {
  transition: all 0.3s ease;
}

tbody tr:hover {
  background-color: rgba(75, 0, 130, 0.05);
  transform: scale(1.01);
}

/* ============================================
   14. INFO CARD EFFECTS
   ============================================ */

.info-card {
  transition: all 0.3s ease;
}

.info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(75, 0, 130, 0.1);
}

/* ============================================
   15. HERO SECTION ENHANCEMENTS
   ============================================ */

/* Hero image hover effects */
.hero-img {
  transition: transform 0.5s ease;
}

.hero-image:hover .hero-img {
  transform: scale(1.03);
}

/* Hero content entrance animation */
.hero-content {
  animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   16. COMPARISON SECTION EFFECTS
   ============================================ */

.comparison-block {
  transition: all 0.4s ease;
}

.comparison-left:hover {
  background-color: #5a1094;
}

.comparison-right:hover {
  background-color: rgba(216, 185, 255, 0.6);
}

.comparison-vs h2 {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
  }
}

/* ============================================
   17. SECTION DIVIDERS AND SPACING
   ============================================ */

/* Consistent section spacing */
section {
  position: relative;
}

/* Gradient overlays for purple sections */
.program-section,
.benefits-section,
.enrollment-steps-section,
.curriculum-section,
.starseek-section {
  position: relative;
  overflow: hidden;
}

.program-section::before,
.benefits-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(ellipse, rgba(255, 215, 0, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

/* ============================================
   18. RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  /* Reduce animation intensity on mobile */
  .animate-on-scroll {
    transform: translateY(20px);
  }

  .button:hover,
  .filled-button:hover,
  .empty-button:hover {
    transform: translateY(-2px);
  }

  .option-content:hover,
  .benefit-item:hover,
  .support-item:hover,
  .education-card:hover,
  .pathway-card:hover,
  .accreditation-card:hover {
    transform: none;
  }

  /* Disable 3D effects on mobile */
  .option-content,
  .education-card,
  .accreditation-card {
    transform: none !important;
  }

  /* Simplify hover effects on mobile */
  .one-adv-item:hover,
  .advantage-item:hover,
  .discover-item:hover {
    transform: translateX(5px);
  }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .scroll-progress {
    display: none;
  }
}