/* ============================================================
   WIZIT — animations.css
   Page transitions · Hover states · Loading
   ============================================================ */

/* ── Page Load ── */
.page-enter {
  animation: page-fade-in 0.5s var(--ease-out) both;
}

@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Gold shimmer on accent elements ── */
.shimmer {
  position: relative;
  overflow: hidden;
}
.shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(184,151,74,0.15) 50%,
    transparent 100%
  );
  animation: shimmer-slide 3s ease-in-out infinite;
}
@keyframes shimmer-slide {
  0%   { left: -100%; }
  50%, 100% { left: 160%; }
}

/* ── Nav link underline ── */
@keyframes link-in {
  from { width: 0; }
  to   { width: 100%; }
}

/* ── Stagger children ── */
.stagger > * {
  opacity: 0;
  transform: translateY(16px);
  animation: fade-up 0.6s var(--ease-out) forwards;
}
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.15s; }
.stagger > *:nth-child(3) { animation-delay: 0.25s; }
.stagger > *:nth-child(4) { animation-delay: 0.35s; }

/* ── Stat number pulse on reveal ── */
.stat-value.counting {
  animation: value-pulse 0.1s ease-in-out;
}
@keyframes value-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* ── Card entrance ── */
@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Orb pulse ── */
@keyframes orb-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.06); opacity: 0.8; }
}
.why-orb-3 { animation: orb-pulse 4s ease-in-out infinite; }

/* ── Scroll indicator ── */
.scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  animation: fade-in 0.6s var(--ease-out) 2s forwards;
}
.scroll-hint-text {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.scroll-hint-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: scroll-line 1.8s ease-in-out infinite;
}
@keyframes scroll-line {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ── About story pull quote ── */
.pull-quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-style: italic;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.4;
  padding: 3rem;
  border-left: 1px solid var(--accent);
  margin-block: 3rem;
  position: relative;
}
.pull-quote::before {
  content: '"';
  font-size: 6rem;
  line-height: 0;
  color: var(--accent);
  opacity: 0.2;
  position: absolute;
  top: 2.5rem;
  left: 2rem;
  font-family: var(--font-display);
}