@import './tokens.css';
@import './reset.css';
@import './utilities.css';
@import './components.css';
@import './layout.css';

@layer theme {
  :root {
    --color-primary: var(--color-primary-500);
    --color-secondary: var(--color-secondary-500);
    --color-accent: var(--color-accent-500);
    --color-success: var(--color-success-500);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --color-primary: var(--color-primary-400);
      --color-secondary: var(--color-secondary-400);
      --color-accent: var(--color-accent-400);
      --color-success: var(--color-success-400);
    }
  }
}

@layer animations {
  @keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .animate-gradient {
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
  }

  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
  }

  .animate-float {
    animation: float 3s ease-in-out infinite;
  }

  @keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px var(--color-primary-500/0.3); }
    50% { box-shadow: 0 0 40px var(--color-primary-500/0.5); }
  }

  .animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }

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

  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes slideLeft {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes slideRight {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
  }

  @keyframes scaleOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.9); }
  }

  @keyframes rotateIn {
    from { opacity: 0; transform: rotate(-10deg) scale(0.9); }
    to { opacity: 1; transform: rotate(0) scale(1); }
  }

  @keyframes bounceIn {
    0% { opacity: 0; transform: scale(0.3); }
    50% { opacity: 1; transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
  }

  @keyframes flipIn {
    from { opacity: 0; transform: perspective(400px) rotateY(90deg); }
    to { opacity: 1; transform: perspective(400px) rotateY(0); }
  }

  @keyframes zoomIn {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
  }

  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
  }

  @keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
  }

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

  @keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    10% { transform: scale(1.1); }
    20% { transform: scale(1); }
    30% { transform: scale(1.1); }
    40% { transform: scale(1); }
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  @keyframes orbit {
    from { transform: rotate(0deg) translateX(50px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(50px) rotate(-360deg); }
  }

  @keyframes morph {
    0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50% { border-radius: 40% 60% 70% 30% / 40% 70% 30% 60%; }
  }

  @keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  @keyframes textReveal {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
  }

  @keyframes slideInRight {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes slideOutRight {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(100%); }
  }

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

  @keyframes ripple {
    0% { transform: scale(0); opacity: 0.5; }
    100% { transform: scale(4); opacity: 0; }
  }

  @keyframes blink {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0.3; }
  }

  @keyframes typing {
    from { width: 0; }
    to { width: 100%; }
  }

  @keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 5px var(--color-primary-500), 0 0 10px var(--color-primary-500), 0 0 15px var(--color-primary-500); }
    50% { box-shadow: 0 0 10px var(--color-primary-500), 0 0 20px var(--color-primary-500), 0 0 30px var(--color-primary-500); }
  }

  @keyframes floatRotate {
    0% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-10px) rotate(5deg); }
    50% { transform: translateY(-5px) rotate(0deg); }
    75% { transform: translateY(-15px) rotate(-5deg); }
    100% { transform: translateY(0) rotate(0deg); }
  }

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

  .animate-fade-in { animation: fadeIn var(--transition-normal) var(--animation-ease-out); }
  .animate-fade-out { animation: fadeOut var(--transition-fast) var(--animation-ease-in); }
  .animate-slide-up { animation: slideUp var(--transition-normal) var(--animation-ease-out); }
  .animate-slide-down { animation: slideDown var(--transition-normal) var(--animation-ease-out); }
  .animate-slide-left { animation: slideLeft var(--transition-normal) var(--animation-ease-out); }
  .animate-slide-right { animation: slideRight var(--transition-normal) var(--animation-ease-out); }
  .animate-scale-in { animation: scaleIn var(--transition-normal) var(--animation-ease-out); }
  .animate-scale-out { animation: scaleOut var(--transition-fast) var(--animation-ease-in); }
  .animate-rotate-in { animation: rotateIn var(--transition-slow) var(--animation-ease-out); }
  .animate-bounce-in { animation: bounceIn var(--transition-slower) var(--animation-ease-bounce); }
  .animate-flip-in { animation: flipIn var(--transition-slow) var(--animation-ease-out); }
  .animate-zoom-in { animation: zoomIn var(--transition-normal) var(--animation-ease-out); }
  .animate-shake { animation: shake 0.5s var(--animation-ease-in-out); }
  .animate-wiggle { animation: wiggle 0.5s var(--animation-ease-in-out); }
  .animate-pulse { animation: pulse 2s var(--animation-ease-in-out) infinite; }
  .animate-heartbeat { animation: heartbeat 1.5s var(--animation-ease-in-out) infinite; }
  .animate-spin { animation: spin 1s var(--animation-ease-linear) infinite; }
  .animate-orbit { animation: orbit 20s var(--animation-ease-linear) infinite; }
  .animate-morph { animation: morph 8s var(--animation-ease-in-out) infinite; }
  .animate-gradient-move { animation: gradientMove 8s var(--animation-ease-in-out) infinite; background-size: 200% 200%; }
  .animate-text-reveal { animation: textReveal 1s var(--animation-ease-out) forwards; overflow: hidden; }
  .animate-slide-in-right { animation: slideInRight var(--transition-normal) var(--animation-ease-out); }
  .animate-slide-out-right { animation: slideOutRight var(--transition-fast) var(--animation-ease-in) forwards; }
  .animate-shimmer { animation: shimmer 1.5s var(--animation-ease-linear) infinite; background-size: 200% 100%; }
  .animate-ripple { animation: ripple 0.6s var(--animation-ease-out); }
  .animate-blink { animation: blink 1s var(--animation-ease-in-out) infinite; }
  .animate-glow-pulse { animation: glowPulse 2s var(--animation-ease-in-out) infinite; }
  .animate-float-rotate { animation: floatRotate 6s var(--animation-ease-in-out) infinite; }

  .stagger-1 { animation-delay: 50ms; }
  .stagger-2 { animation-delay: 100ms; }
  .stagger-3 { animation-delay: 150ms; }
  .stagger-4 { animation-delay: 200ms; }
  .stagger-5 { animation-delay: 250ms; }
  .stagger-6 { animation-delay: 300ms; }
  .stagger-7 { animation-delay: 350ms; }
  .stagger-8 { animation-delay: 400ms; }

  .reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--transition-slow) var(--animation-ease-out), transform var(--transition-slow) var(--animation-ease-out);
  }

  .reveal-up.active {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal-down {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity var(--transition-slow) var(--animation-ease-out), transform var(--transition-slow) var(--animation-ease-out);
  }

  .reveal-down.active {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal-left {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity var(--transition-slow) var(--animation-ease-out), transform var(--transition-slow) var(--animation-ease-out);
  }

  .reveal-left.active {
    opacity: 1;
    transform: translateX(0);
  }

  .reveal-right {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity var(--transition-slow) var(--animation-ease-out), transform var(--transition-slow) var(--animation-ease-out);
  }

  .reveal-right.active {
    opacity: 1;
    transform: translateX(0);
  }

  .reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity var(--transition-slow) var(--animation-ease-out), transform var(--transition-slow) var(--animation-ease-out);
  }

  .reveal-scale.active {
    opacity: 1;
    transform: scale(1);
  }

  .reveal-rotate {
    opacity: 0;
    transform: rotate(-5deg) scale(0.9);
    transition: opacity var(--transition-slow) var(--animation-ease-out), transform var(--transition-slow) var(--animation-ease-out);
  }

  .reveal-rotate.active {
    opacity: 1;
    transform: rotate(0) scale(1);
  }

  .delay-1 { transition-delay: 100ms; }
  .delay-2 { transition-delay: 200ms; }
  .delay-3 { transition-delay: 300ms; }
  .delay-4 { transition-delay: 400ms; }
  .delay-5 { transition-delay: 500ms; }

  .hover-lift {
    transition: transform var(--transition-fast) var(--animation-ease-out), box-shadow var(--transition-fast) var(--animation-ease-out);
  }

  .hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--color-shadow-xl);
  }

  .hover-scale {
    transition: transform var(--transition-fast) var(--animation-ease-out);
  }

  .hover-scale:hover {
    transform: scale(1.02);
  }

  .hover-scale-sm:hover {
    transform: scale(1.05);
  }

  .hover-rotate:hover {
    transform: rotate(3deg);
  }

  .hover-glow:hover {
    box-shadow: var(--color-shadow-glow);
  }

  .hover-glow-secondary:hover {
    box-shadow: var(--color-shadow-glow-secondary);
  }

  .press-scale:active {
    transform: scale(0.98);
  }

  .press-scale-sm:active {
    transform: scale(0.95);
  }

  .transition-all {
    transition: all var(--transition-normal) var(--animation-ease-out);
  }

  .transition-transform {
    transition: transform var(--transition-normal) var(--animation-ease-out);
  }

  .transition-opacity {
    transition: opacity var(--transition-normal) var(--animation-ease-out);
  }

  .transition-colors {
    transition: background-color var(--transition-fast) var(--animation-ease-out), border-color var(--transition-fast) var(--animation-ease-out), color var(--transition-fast) var(--animation-ease-out);
  }

  .transition-shadow {
    transition: box-shadow var(--transition-normal) var(--animation-ease-out);
  }
}

@layer print {
  @media print {
    .navbar,
    .scroll-progress,
    .hero-actions,
    .add-event-form,
    .add-achievement,
    .create-announcement,
    .upload-photo,
    .chat-input-area,
    .contact-form,
    .footer-newsletter,
    .footer-credits,
    .modal-overlay,
    .toast-container,
    .cursor-glow {
      display: none !important;
    }

    .section {
      display: block !important;
      min-height: auto;
      page-break-inside: avoid;
    }

    body {
      background: white !important;
      color: black !important;
    }

    .card,
    .modal,
    .announcement-card,
    .achievement-card {
      break-inside: avoid;
      box-shadow: none !important;
      border: 1px solid #ccc !important;
    }

    a {
      text-decoration: underline !important;
    }

    a[href^="http"]::after {
      content: " (" attr(href) ")";
      font-size: 0.8em;
      color: #666;
    }
  }
}