/* SISU Animation & Polish Layer */

.reveal {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.reveal-up,
.reveal.reveal-up {
  transform: translateY(24px);
}

.reveal-down,
.reveal.reveal-down {
  transform: translateY(-24px);
}

.reveal-left,
.reveal.reveal-left {
  transform: translateX(-28px);
}

.reveal-right,
.reveal.reveal-right {
  transform: translateX(28px);
}

.reveal-scale,
.reveal.reveal-scale {
  transform: scale(0.97);
}

.reveal.is-visible,
.reveal.is-revealed,
.lesson-reveal.is-visible,
.lesson-reveal.is-revealed,
footer.reveal.is-visible,
footer.reveal.is-revealed {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

[dir="rtl"] .reveal-left,
[dir="rtl"] .reveal.reveal-left {
  transform: translateX(28px);
}

[dir="rtl"] .reveal-right,
[dir="rtl"] .reveal.reveal-right {
  transform: translateX(-28px);
}

.stagger-1 {
  transition-delay: 0ms;
}

.stagger-2 {
  transition-delay: 80ms;
}

.stagger-3 {
  transition-delay: 160ms;
}

.stagger-4 {
  transition-delay: 240ms;
}

.stagger-5 {
  transition-delay: 320ms;
}

.stagger-6 {
  transition-delay: 400ms;
}

.stagger-7 {
  transition-delay: 480ms;
}

.stagger-8 {
  transition-delay: 560ms;
}

.stagger-9 {
  transition-delay: 640ms;
}

@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-enter {
  opacity: 0;
  animation: hero-fade-up 0.72s ease forwards;
}

.hero-enter-1 {
  animation-delay: 0.05s;
}

.hero-enter-2 {
  animation-delay: 0.2s;
}

.hero-enter-3 {
  animation-delay: 0.35s;
}

.hero-enter-4 {
  animation-delay: 0.5s;
}

.hero-enter-5 {
  animation-delay: 0.65s;
}

.card-lift {
  transform: translateZ(0);
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out, border-color 0.25s ease-out;
}

.card-lift:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 14px 30px -12px rgba(212, 175, 55, 0.26), 0 10px 24px -18px rgba(0, 0, 0, 0.5);
}

.btn-primary-lift,
.btn-secondary-lift {
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.btn-primary-lift:hover,
.btn-secondary-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -16px rgba(0, 0, 0, 0.6);
}

.btn-primary-lift:active,
.btn-secondary-lift:active {
  transform: scale(0.96);
}

.input-glow {
  transition: border-color 0.24s ease, box-shadow 0.24s ease;
}

.input-glow:focus {
  border-color: var(--color-brand-gold, #d4af37);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
  outline: none;
}

.input-float-label {
  position: relative;
}

.input-float-label label {
  display: block;
  margin-bottom: 0.45rem;
  transform-origin: left top;
  transition: transform 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

[dir="rtl"] .input-float-label label {
  transform-origin: right top;
}

.input-float-label:focus-within label,
.input-float-label.has-value label {
  color: var(--color-brand-gold, #d4af37);
  transform: translateY(-0.15rem) scale(0.92);
}

.image-zoom {
  display: block;
  overflow: hidden;
}

.image-zoom img,
img.image-zoom {
  display: block;
  height: auto;
  transition: transform 0.5s ease;
  width: 100%;
}

.image-zoom:hover img,
img.image-zoom:hover {
  transform: scale(1.05);
}

.underline-expand {
  display: inline-flex;
  position: relative;
}

.underline-expand::after {
  background: var(--color-brand-gold, #d4af37);
  bottom: -2px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  transition: width 0.3s ease;
  width: 0;
}

.underline-expand:hover::after,
.underline-expand.is-active::after {
  width: 100%;
}

[dir="rtl"] .underline-expand::after {
  left: auto;
  right: 0;
}

.counter-animate {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.lesson-reveal {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.lesson-reveal.is-visible,
.lesson-reveal.is-revealed {
  opacity: 1;
  transform: translateX(0);
}

[dir="rtl"] .lesson-reveal {
  transform: translateX(16px);
}

[dir="rtl"] .lesson-reveal.is-visible,
[dir="rtl"] .lesson-reveal.is-revealed {
  transform: translateX(0);
}

.step-glow {
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2);
  transition: box-shadow 0.3s ease;
}

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

  50% {
    transform: translateY(-6px);
  }
}

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

@keyframes subtle-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.1);
  }
}

.cta-pulse {
  animation: subtle-pulse 2.5s ease-in-out infinite;
}

.cookie-slide-enter {
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.4s ease, opacity 0.3s ease;
}

.cookie-slide-enter.is-visible {
  opacity: 1;
  transform: translateY(0);
}

header {
  transition: box-shadow 0.3s ease;
}

header.scrolled {
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.16);
}

.nav-active {
  position: relative;
}

.nav-active::after {
  background: var(--color-brand-gold, #d4af37);
  bottom: 0;
  content: "";
  height: 2px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 70%;
}

.mobile-panel-animated {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease;
}

.mobile-panel-animated.is-open {
  max-height: 2000px;
  opacity: 1;
}

.search-overlay-animated {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.98);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.search-overlay-animated.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.avatar-hover {
  transition: transform 0.25s ease;
}

.group:hover .avatar-hover {
  transform: scale(1.06);
}

.gold-divider {
  position: relative;
}

.gold-divider::before {
  background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.3) 30%, rgba(212, 175, 55, 0.5) 50%, rgba(212, 175, 55, 0.3) 70%, transparent 100%);
  content: "";
  height: 1px;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: min(60%, 400px);
}

footer a {
  position: relative;
  text-decoration: none;
}

footer a::after {
  background: var(--color-brand-gold, #d4af37);
  bottom: -1px;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transition: width 0.3s ease;
  width: 0;
}

footer a:hover::after {
  width: 100%;
}

[dir="rtl"] footer a::after {
  left: auto;
  right: 0;
}

html[data-performance-mode="boost"] .card-lift,
html[data-performance-mode="boost"] .btn-primary-lift,
html[data-performance-mode="boost"] .btn-secondary-lift,
html[data-performance-mode="boost"] .image-zoom img,
html[data-performance-mode="boost"] img.image-zoom,
html[data-performance-mode="boost"] .underline-expand::after,
html[data-performance-mode="boost"] .theme-switcher-widget {
  transition-duration: 0.08s !important;
}

html[data-performance-mode="boost"] .card-lift:hover,
html[data-performance-mode="boost"] .btn-primary-lift:hover,
html[data-performance-mode="boost"] .btn-secondary-lift:hover,
html[data-performance-mode="boost"] .image-zoom:hover img,
html[data-performance-mode="boost"] img.image-zoom:hover {
  box-shadow: none !important;
  transform: none !important;
}

html[data-performance-mode="boost"] .float-gentle,
html[data-performance-mode="boost"] .cta-pulse {
  animation: none !important;
}

@media (pointer: coarse), (max-width: 768px) {
  [data-mobile-toggle],
  [data-search-open],
  [data-search-close],
  #language-switcher a,
  [data-mobile-panel] a,
  [data-mobile-panel] summary,
  .theme-btn,
  .preference-btn {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: var(--touch-target-min, 46px);
    min-width: var(--touch-target-min, 46px);
  }

  .theme-switcher-widget {
    bottom: 0.75rem !important;
    left: 0.75rem !important;
    max-width: calc(100vw - 1.5rem) !important;
    right: auto !important;
  }

  .theme-switcher-widget .theme-switcher-header {
    display: flex !important;
  }

  .theme-switcher-widget [data-appearance-summary] {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }

  .reveal,
  .lesson-reveal,
  footer.reveal,
  .hero-enter,
  .hero-enter-1,
  .hero-enter-2,
  .hero-enter-3,
  .hero-enter-4,
  .hero-enter-5 {
    opacity: 1 !important;
    transform: none !important;
  }
}

html[data-motion-mode="reduce"] *,
html[data-motion-mode="reduce"] *::before,
html[data-motion-mode="reduce"] *::after {
  animation: none !important;
  scroll-behavior: auto !important;
  transition: none !important;
}

html[data-motion-mode="reduce"] .reveal,
html[data-motion-mode="reduce"] .lesson-reveal,
html[data-motion-mode="reduce"] footer.reveal,
html[data-motion-mode="reduce"] .hero-enter,
html[data-motion-mode="reduce"] .hero-enter-1,
html[data-motion-mode="reduce"] .hero-enter-2,
html[data-motion-mode="reduce"] .hero-enter-3,
html[data-motion-mode="reduce"] .hero-enter-4,
html[data-motion-mode="reduce"] .hero-enter-5 {
  opacity: 1 !important;
  transform: none !important;
}