/* ===========================================
   FLOWBRAIN — Animations
   Image reveals, parallax, scroll effects
   + Aurora Dark effects
   =========================================== */

/* ---- Scroll reveal — fade up ---- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Stagger delays ---- */
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }

/* ---- Image reveal — clip from bottom ---- */
.img-reveal {
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--duration-slow) var(--ease-out);
}

.img-reveal.is-visible {
  clip-path: inset(0 0 0 0);
}

/* ---- Image scale reveal ---- */
.img-scale-reveal {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.img-scale-reveal.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ---- Text reveal — word by word ---- */
.text-reveal {
  overflow: hidden;
}

.text-reveal > span {
  display: inline-block;
  transform: translateY(100%);
  transition: transform 0.7s var(--ease-out);
}

.text-reveal.is-visible > span {
  transform: translateY(0);
}

/* ---- Hero scroll indicator entrance ---- */
.hero__scroll {
  animation: heroFadeUp 0.6s var(--ease-out) 1.2s both;
}

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

/* ---- Hero image — continuous slow drift ---- */
.hero__bg img {
  animation: heroDrift 15s ease-in-out infinite alternate;
}

@keyframes heroDrift {
  0%   { transform: scale(1.08) translate(-1.5%, 0.5%); }
  100% { transform: scale(1.12) translate(1.5%, -0.5%); }
}

/* ---- Parallax container ---- */
[data-parallax] {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ---- Counter animation placeholder ---- */
.counter {
  font-variant-numeric: tabular-nums;
}

/* ---- Marquee ---- */
.marquee {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
}

.marquee__inner {
  display: flex;
  animation: marquee 30s linear infinite;
}

.marquee__inner span {
  flex-shrink: 0;
  padding: 0 24px;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===========================================
   AURORA DARK — New Effects
   =========================================== */

/* ---- Aurora background orbs ---- */
.aurora-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.aurora-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.25;
  will-change: transform;
}

.aurora-orb--teal {
  background: radial-gradient(circle, rgba(0, 200, 150, 0.4) 0%, transparent 70%);
  width: 550px;
  height: 550px;
  top: 5%;
  left: 8%;
  animation: auroraFloat1 20s ease-in-out infinite;
}

.aurora-orb--indigo {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.35) 0%, transparent 70%);
  width: 650px;
  height: 650px;
  top: 45%;
  right: 3%;
  animation: auroraFloat2 25s ease-in-out infinite;
}

.aurora-orb--purple {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.3) 0%, transparent 70%);
  width: 500px;
  height: 500px;
  bottom: 5%;
  left: 25%;
  animation: auroraFloat3 22s ease-in-out infinite;
}

/* ---- Aurora orb animations (each unique path) ---- */
@keyframes auroraFloat1 {
  0%   { transform: translate(0, 0) scale(1); }
  20%  { transform: translate(40px, -60px) scale(1.08); }
  40%  { transform: translate(-30px, 30px) scale(0.95); }
  60%  { transform: translate(50px, 20px) scale(1.12); }
  80%  { transform: translate(-20px, -40px) scale(0.98); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes auroraFloat2 {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(-50px, 40px) scale(1.1); }
  50%  { transform: translate(30px, -30px) scale(0.92); }
  75%  { transform: translate(-40px, -50px) scale(1.06); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes auroraFloat3 {
  0%   { transform: translate(0, 0) scale(1); }
  30%  { transform: translate(60px, -40px) scale(1.05); }
  60%  { transform: translate(-40px, 50px) scale(0.96); }
  100% { transform: translate(0, 0) scale(1); }
}

/* ---- Glow pulse for interactive elements ---- */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 200, 150, 0.3), 0 0 60px rgba(0, 200, 150, 0.1); }
  50%      { box-shadow: 0 0 30px rgba(0, 200, 150, 0.5), 0 0 80px rgba(0, 200, 150, 0.15); }
}

/* ---- Gradient shift for animated bg ---- */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---- Subtle float ---- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ---- Border glow animation ---- */
@keyframes borderGlow {
  0%, 100% { border-color: rgba(0, 200, 150, 0.1); }
  50%      { border-color: rgba(0, 200, 150, 0.25); }
}