.page-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg-body);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--dur-slow) var(--ease-out-expo), visibility var(--dur-slow);
}
.page-transition-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.page-loader-mark {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--gradient-primary);
  animation: loader-pulse 1.1s ease-in-out infinite;
}
@keyframes loader-pulse {
  0%, 100% { transform: scale(0.85); opacity: 0.7; }
  50% { transform: scale(1.05); opacity: 1; }
}

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}
[data-reveal].in-view {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="fade"] { transform: none; }
[data-reveal="scale"] { transform: scale(0.92); }
[data-reveal="scale"].in-view { transform: scale(1); }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="left"].in-view { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="right"].in-view { transform: translateX(0); }
[data-reveal="blur"] { filter: blur(10px); opacity: 0; }
[data-reveal="blur"].in-view { filter: blur(0); opacity: 1; }

[data-reveal] { transition-delay: var(--reveal-delay, 0ms); }

.tilt {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--dur-fast) var(--ease-out-expo);
}

.counted { animation: count-pop 0.4s var(--ease-spring); }
@keyframes count-pop {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.toast-enter {
  animation: toast-in var(--dur-base) var(--ease-spring) forwards;
}
.toast-exit {
  animation: toast-out var(--dur-fast) var(--ease-out-expo) forwards;
}
@keyframes toast-in {
  from { transform: translateX(120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes toast-out {
  to { transform: translateX(120%); opacity: 0; }
}

.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(6px);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base), visibility var(--dur-base);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}
.modal-backdrop.open { opacity: 1; visibility: visible; }
.modal-box {
  width: 100%;
  max-width: 440px;
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg);
  transform: translateY(24px) scale(0.96);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease-spring), opacity var(--dur-base);
}
.modal-backdrop.open .modal-box { transform: translateY(0) scale(1); opacity: 1; }

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track {
  display: flex;
  gap: var(--space-2xl);
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.fade-in { animation: fade-in var(--dur-base) var(--ease-out-expo) both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.slide-up { animation: slide-up var(--dur-base) var(--ease-out-expo) both; }
@keyframes slide-up { from { opacity:0; transform: translateY(16px);} to {opacity:1; transform:translateY(0);} }