/* ==========================================================================
   BNA Portal — Motion system
   Scroll reveals, ambient SVG animation, micro-interactions
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */

@keyframes floatY {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -14px, 0) rotate(1.5deg);
  }
}

@keyframes floatX {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(12px, -8px, 0);
  }
}

@keyframes pulseDot {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 101, 74, 0.35);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(255, 101, 74, 0);
  }
}

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

@keyframes spinSlow {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spinReverse {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes orbitDash {
  to {
    stroke-dashoffset: -260;
  }
}

@keyframes drawStroke {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes dashFlow {
  to {
    stroke-dashoffset: -1000;
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-140%) skewX(-18deg);
  }
  55%,
  100% {
    transform: translateX(320%) skewX(-18deg);
  }
}

@keyframes marquee {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes scanY {
  0% {
    top: -12%;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  82% {
    opacity: 1;
  }
  100% {
    top: 112%;
    opacity: 0;
  }
}

@keyframes bubblePop {
  0%,
  8% {
    transform: scale(0.7);
    opacity: 0.35;
  }
  16%,
  70% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes blink {
  0%,
  44%,
  48%,
  100% {
    transform: scaleY(1);
  }
  46% {
    transform: scaleY(0.06);
  }
}

@keyframes sway {
  0%,
  100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}

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

@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes glowBreath {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(255, 101, 74, 0));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(255, 101, 74, 0.42));
  }
}

@keyframes waveBar {
  0%,
  100% {
    transform: scaleY(0.35);
  }
  50% {
    transform: scaleY(1);
  }
}

@keyframes needleSettle {
  from {
    transform: rotate(-90deg);
  }
}

@keyframes badgeBob {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-9px) rotate(1deg);
  }
}

@keyframes ringPulse {
  0% {
    transform: scale(0.55);
    opacity: 0.85;
  }
  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}

@keyframes progressStripe {
  to {
    background-position: 28px 0;
  }
}

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 0.75s var(--ease-out),
    transform 0.75s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal--left {
  transform: translate3d(-30px, 0, 0);
}

.reveal--right {
  transform: translate3d(30px, 0, 0);
}

.reveal--scale {
  transform: scale(0.96);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Ambient SVG classes
   -------------------------------------------------------------------------- */

.anim-float {
  animation: floatY 7s ease-in-out infinite;
}

.anim-float--slow {
  animation-duration: 11s;
}

.anim-float--delayed {
  animation-delay: -3.4s;
}

.anim-float-x {
  animation: floatX 9s ease-in-out infinite;
}

.anim-spin {
  animation: spinSlow 42s linear infinite;
}

.anim-spin--fast {
  animation-duration: 18s;
}

.anim-spin-rev {
  animation: spinReverse 56s linear infinite;
}

.anim-pulse {
  animation: pulseSoft 3.4s ease-in-out infinite;
}

.anim-blink {
  animation: blink 5.5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

.anim-sway {
  animation: sway 6s ease-in-out infinite;
  transform-origin: 50% 100%;
}

.anim-scan {
  animation: scanY 4.2s ease-in-out infinite;
}

.anim-glow {
  animation: glowBreath 4.5s ease-in-out infinite;
}

.anim-bob {
  animation: badgeBob 6s ease-in-out infinite;
}

.anim-bars span {
  transform-origin: 50% 100%;
  animation: waveBar 1.15s ease-in-out infinite;
}

.anim-bars span:nth-child(2) {
  animation-delay: -0.25s;
}

.anim-bars span:nth-child(3) {
  animation-delay: -0.55s;
}

.anim-bars span:nth-child(4) {
  animation-delay: -0.4s;
}

.anim-bars span:nth-child(5) {
  animation-delay: -0.7s;
}

/* Draw-on-reveal for inline SVG strokes */
.draw-stroke {
  stroke-dasharray: var(--dash, 320);
  stroke-dashoffset: var(--dash, 320);
}

.is-visible .draw-stroke,
.draw-stroke.is-drawn {
  animation: drawStroke 1.6s 0.25s var(--ease-out) forwards;
}

/* Decorative rings */
.pulse-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 101, 74, 0.4);
  border-radius: 50%;
  animation: ringPulse 3.4s ease-out infinite;
  pointer-events: none;
}

.pulse-ring--delay {
  animation-delay: 1.7s;
}

/* Floating ornament wrappers */
.ornament {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0.72;
}

.ornament svg,
.ornament img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 16px rgba(23, 15, 38, 0.1));
}

/* Card hover shine */
.shine {
  position: relative;
  overflow: hidden;
}

.shine::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 42%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.36),
    transparent
  );
  transform: translateX(-140%) skewX(-18deg);
  pointer-events: none;
}

.shine:hover::after {
  animation: shimmer 1.1s var(--ease-out);
}

/* Icon hover motion */
.hover-lift {
  transition:
    transform 0.45s var(--ease-spring),
    box-shadow 0.45s var(--ease-out),
    border-color 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.hover-lift:hover .icon-motion {
  animation: sway 0.9s ease-in-out;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale {
    opacity: 1 !important;
    transform: none !important;
  }

  .marquee,
  .hero__marquee-track {
    animation: none !important;
  }

  .ornament,
  .anim-float,
  .anim-spin,
  .anim-pulse,
  .anim-scan,
  .anim-bob {
    animation: none !important;
  }
}