/* ============================================================================
   Nexian Global — Atmospheric animations
   Ken Burns, fog drift, shimmer, ember rise, pulse — used across landing
   and decorative surfaces. All respect prefers-reduced-motion via base.css.
   ============================================================================ */

@keyframes ken-burns {
  0%   { transform: scale(1)   translate(0, 0); }
  100% { transform: scale(1.1) translate(2%, -1%); }
}

@keyframes fog-drift {
  0%   { opacity: 0.4; transform: translate(0, 0); }
  50%  { opacity: 0.6; }
  100% { opacity: 0.4; transform: translate(3%, 2%); }
}

@keyframes shimmer-x {
  0%   { background-position: 300% center; }
  20%  { background-position:  -100% center; }
  100% { background-position:  -100% center; }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.8; }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 24px rgba(var(--gold-rgb), 0.15); }
  50%      { box-shadow: 0 0 48px rgba(var(--gold-rgb), 0.30); }
}

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

@keyframes ember-rise {
  0%   { transform: translateY(0)     translateX(0)  scale(1);   opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-100vh) translateX(var(--sway, 50px)) scale(0.5); opacity: 0; }
}

@keyframes drawer-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes modal-scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes backdrop-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Utility classes (apply animations) ------------------------------ */
.animate-ken-burns {
  animation: ken-burns var(--dur-eternal) ease-in-out infinite alternate;
}

.animate-fog {
  animation: fog-drift 40s ease-in-out infinite alternate;
}

.animate-shimmer {
  background-size: 200% 100%;
  animation: shimmer-x var(--dur-glacial) ease-in-out infinite;
}

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

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

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

/* --- Decorative shimmer line (top/bottom of panels) ------------------ */
.shimmer-line {
  position: absolute;
  right: 0; left: 0;
  height: 1px;
  background: var(--shimmer-gold);
  box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.25);   /* V0 footer shimmer */
  pointer-events: none;
}
.shimmer-line.top    { top: 0; }
.shimmer-line.bottom { bottom: 0; }

/* --- Decorative corner brackets (premium feel) ----------------------- */
.corner-brackets {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.corner-brackets::before,
.corner-brackets::after,
.corner-brackets > span::before,
.corner-brackets > span::after {
  content: '';
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-color: var(--gold-400);
  border-style: solid;
  border-width: 0;
  opacity: 0.6;
}
.corner-brackets::before        { top: 0;    right: 0;  border-top-width: 2px; border-left-width: 2px;  }
.corner-brackets::after         { top: 0;    left: 0; border-top-width: 2px; border-right-width: 2px; }
.corner-brackets > span::before { bottom: 0; right: 0;  border-bottom-width: 2px; border-left-width: 2px;  }
.corner-brackets > span::after  { bottom: 0; left: 0; border-bottom-width: 2px; border-right-width: 2px; }