/* ============================================
   CySec - Animations
   Scroll reveal, language switch, page transitions, modals, toasts
   ============================================ */

:root {
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 600ms;
  --dur-short: 300ms;
  --dur-lang: 3s;
  --dur-page: 0.4s;
}

/* ============================================
   Scroll reveal
   ============================================ */

.scroll-reveal,
.reveal {
  opacity: 1;
  transform: none;
  filter: none;
}

.js-enabled .scroll-reveal,
.js-enabled .reveal {
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  filter: blur(3px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    filter var(--dur) var(--ease);
  will-change: opacity, transform, filter;
}

.js-enabled .scroll-reveal.reveal-visible,
.js-enabled .reveal.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.scroll-reveal:nth-child(1),
.reveal:nth-child(1) { transition-delay: 0ms; }
.scroll-reveal:nth-child(2),
.reveal:nth-child(2) { transition-delay: 60ms; }
.scroll-reveal:nth-child(3),
.reveal:nth-child(3) { transition-delay: 120ms; }
.scroll-reveal:nth-child(4),
.reveal:nth-child(4) { transition-delay: 180ms; }
.scroll-reveal:nth-child(5),
.reveal:nth-child(5) { transition-delay: 240ms; }
.scroll-reveal:nth-child(6),
.reveal:nth-child(6) { transition-delay: 300ms; }
.scroll-reveal:nth-child(n+7),
.reveal:nth-child(n+7) { transition-delay: 360ms; }

/* ============================================
   Hover lift (cards)
   ============================================ */

.hover-lift {
  transition:
    transform var(--dur-short) var(--ease),
    filter var(--dur-short) var(--ease),
    box-shadow var(--dur-short) var(--ease);
}

.hover-lift:hover {
  transform: translateY(-3px) scale(1.01);
  filter: brightness(1.08);
}

/* ============================================
   Logo glow animation
   ============================================ */

@keyframes logoGlow {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(196, 22, 28, .35)) drop-shadow(0 0 12px rgba(196, 22, 28, .2));
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(196, 22, 28, .55)) drop-shadow(0 0 20px rgba(196, 22, 28, .3));
  }
}

header .logo img {
  animation: logoGlow 2.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  header .logo img {
    animation: none;
    filter: drop-shadow(0 0 6px rgba(196, 22, 28, .25));
  }
}

/* ============================================
   Language change: blur page, show in selected language
   ============================================ */

body.i18n-switching main {
  opacity: 0.6;
  filter: blur(8px);
  transition: opacity var(--dur-lang) var(--ease), filter var(--dur-lang) var(--ease);
  pointer-events: none;
}

/* ============================================
   Page navigation: exit (before leaving)
   ============================================ */

body.page-exit main {
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}

/* ============================================
   Page navigation: enter (on load)
   ============================================ */

main.page-enter {
  transition: opacity var(--dur-page) var(--ease);
}

/* ============================================
   Modal
   ============================================ */

.modal {
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease);
}

.modal.active {
  opacity: 1;
  pointer-events: auto;
}

.modal .modal-content {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: transform 240ms var(--ease), opacity 240ms var(--ease);
}

.modal.active .modal-content {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ============================================
   Toast
   ============================================ */

.toast {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}

.toast.active {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   Shared home-style animations (all pages)
   ============================================ */

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

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

/* Page hero: same entry animation as home hero (all inner pages) */
.page-hero .section-title.reveal {
  animation: fadeInUp 0.8s var(--ease-out) 0.2s both;
}

.page-hero .section-subtitle.reveal {
  animation: fadeInUp 0.8s var(--ease-out) 0.4s both;
}

/* ============================================
   Reduced motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .js-enabled .scroll-reveal,
  .js-enabled .reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .blob,
  .grain {
    animation: none !important;
  }

  body.i18n-switching main,
  body.page-exit main {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
  }

  main.page-enter {
    transition: none !important;
  }

  .page-hero .section-title.reveal,
  .page-hero .section-subtitle.reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}