/* ===========================================
   PERISPHERE CORP — animations.css
   =========================================== */

/* -------------------------------------------
   KEYFRAMES
   ------------------------------------------- */
@keyframes letterIn {
  0%   { opacity: 0; transform: translateY(110%); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes slideLeft {
  from { opacity: 0; transform: translateX(36px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideRight {
  from { opacity: 0; transform: translateX(-36px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes lineGrow {
  from { width: 0; }
  to   { width: clamp(180px, 35vw, 360px); }
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.9; }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

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

/* -------------------------------------------
   LOADER
   ------------------------------------------- */
.loader-name span {
  animation: letterIn 0.48s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.loader-corp-text {
  /* delay set via JS */
  animation: corpFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-play-state: paused;
}

.loader-line {
  /* delay set via JS */
  animation: lineGrow 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-play-state: paused;
}

/* -------------------------------------------
   SCROLL REVEAL — base states
   ------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.reveal-left  { transform: translateX(-30px); }
.reveal.reveal-right { transform: translateX(30px); }

.reveal.revealed {
  opacity: 1;
  transform: translate(0);
}

/* Stagger parent */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-stagger.revealed > * {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger.revealed > *:nth-child(1) { transition-delay: 0.00s; }
.reveal-stagger.revealed > *:nth-child(2) { transition-delay: 0.10s; }
.reveal-stagger.revealed > *:nth-child(3) { transition-delay: 0.20s; }
.reveal-stagger.revealed > *:nth-child(4) { transition-delay: 0.30s; }
.reveal-stagger.revealed > *:nth-child(5) { transition-delay: 0.40s; }
.reveal-stagger.revealed > *:nth-child(6) { transition-delay: 0.50s; }
.reveal-stagger.revealed > *:nth-child(7) { transition-delay: 0.60s; }
.reveal-stagger.revealed > *:nth-child(8) { transition-delay: 0.70s; }

/* -------------------------------------------
   HERO ENTRANCE (runs after loader exits)
   ------------------------------------------- */
body.loading .hero-content > *,
body.loading .hero-badges,
body.loading .hero-strip { opacity: 0; }

body.loaded .hero-eyebrow {
  animation: slideUp 0.65s cubic-bezier(0.4, 0, 0.2, 1) 0.08s both;
}

body.loaded .hero-content h1 {
  animation: slideUp 0.75s cubic-bezier(0.4, 0, 0.2, 1) 0.22s both;
}

body.loaded .hero-content p {
  animation: slideUp 0.75s cubic-bezier(0.4, 0, 0.2, 1) 0.36s both;
}

body.loaded .hero-cta {
  animation: slideUp 0.75s cubic-bezier(0.4, 0, 0.2, 1) 0.50s both;
}

body.loaded .hero-badges {
  animation: slideUp 0.65s cubic-bezier(0.4, 0, 0.2, 1) 0.62s both;
}

body.loaded .hero-strip {
  animation: fadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.72s both;
}

/* -------------------------------------------
   PAGE HERO ENTRANCE (inner pages)
   ------------------------------------------- */
body.loading .page-hero-content > * { opacity: 0; }

body.loaded .page-hero-content .label {
  animation: slideUp 0.65s cubic-bezier(0.4, 0, 0.2, 1) 0.08s both;
}

body.loaded .page-hero-content h1 {
  animation: slideUp 0.75s cubic-bezier(0.4, 0, 0.2, 1) 0.22s both;
}

body.loaded .page-hero-content p {
  animation: slideUp 0.75s cubic-bezier(0.4, 0, 0.2, 1) 0.36s both;
}

/* -------------------------------------------
   SCROLL INDICATOR PULSE
   ------------------------------------------- */
.hero-scroll .scroll-line {
  animation: scrollPulse 2.2s ease-in-out infinite;
}

/* -------------------------------------------
   FLOATING BACKGROUND SHAPES
   ------------------------------------------- */
.bg-shape {
  position: absolute;
  border-radius: 50%;
  background: var(--accent-dim);
  pointer-events: none;
  animation: floatY 7s ease-in-out infinite;
}

.bg-shape-1 {
  width: 400px;
  height: 400px;
  top: -160px;
  right: -120px;
  opacity: 0.5;
  animation-delay: 0s;
}

.bg-shape-2 {
  width: 250px;
  height: 250px;
  bottom: -80px;
  left: -60px;
  opacity: 0.3;
  animation-delay: 3.5s;
}

/* -------------------------------------------
   THEME TOGGLE ICON SWAP
   ------------------------------------------- */
.icon-sun,
.icon-moon { transition: opacity 0.3s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }

/* -------------------------------------------
   BORDER GLOW — CTA button pulse (optional)
   ------------------------------------------- */
@keyframes borderGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(77, 148, 255, 0); }
  50%       { box-shadow: 0 0 20px 4px rgba(77, 148, 255, 0.25); }
}

.btn-primary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.btn-outline:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* -------------------------------------------
   NAVBAR ENTRANCE
   ------------------------------------------- */
.navbar {
  animation: slideUp 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0s both;
}

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