/* ═══════════════════════════════════════════════════════════════
   Design Corner 2.0 — animations.css
   Keyframes · Reveals · Glitch · Float · Particles · Stagger
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════
   PAGE ENTRY
══════════════════════ */
@keyframes page-enter {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-enter { animation: page-enter .75s var(--ease) both; }
.page-enter-d1 { animation: page-enter .75s var(--ease) .1s both; }
.page-enter-d2 { animation: page-enter .75s var(--ease) .2s both; }
.page-enter-d3 { animation: page-enter .75s var(--ease) .35s both; }

/* ══════════════════════
   SCROLL REVEAL
══════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: .1s; }
.reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .3s; }
.reveal-d4 { transition-delay: .4s; }
.reveal-left  { transform: translateX(-32px); }
.reveal-left.visible  { transform: translateX(0); }
.reveal-right { transform: translateX(32px); }
.reveal-right.visible { transform: translateX(0); }
.reveal-scale { transform: scale(.92); opacity: 0; }
.reveal-scale.visible { transform: scale(1); opacity: 1; }

/* ══════════════════════
   GLITCH TEXT
══════════════════════ */
.glitch {
  position: relative;
  display: inline-block;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: transparent;
}
.glitch::before {
  color: var(--yellow);
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  animation: glitch-top 3s steps(1) infinite;
  opacity: 0;
}
.glitch::after {
  color: #ff004f;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
  animation: glitch-bot 3s steps(1) infinite;
  opacity: 0;
}
.glitch:hover::before,
.glitch:hover::after { opacity: 1; }
@keyframes glitch-top {
  0%, 90%, 100% { transform: translate(0); opacity: 0; }
  91%            { transform: translate(-4px, -2px); opacity: 1; }
  92%            { transform: translate(4px, 2px);  opacity: 1; }
  93%            { transform: translate(-2px, 0);   opacity: 1; }
  94%            { transform: translate(0);          opacity: 0; }
}
@keyframes glitch-bot {
  0%, 88%, 100% { transform: translate(0); opacity: 0; }
  89%            { transform: translate(4px, 2px);  opacity: 1; }
  90%            { transform: translate(-3px, -1px);opacity: 1; }
  91%            { transform: translate(1px, 0);    opacity: 1; }
  92%            { transform: translate(0);          opacity: 0; }
}

/* ══════════════════════
   FLOAT ANIMATION
══════════════════════ */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%  { transform: translateY(-14px) rotate(1deg); }
  66%  { transform: translateY(-7px) rotate(-1deg); }
}
.float { animation: float 7s ease-in-out infinite; }
.float-slow { animation: float 10s ease-in-out infinite; }
.float-fast { animation: float 4s ease-in-out infinite; }

/* ══════════════════════
   BLOB FLOAT
══════════════════════ */
@keyframes blob-float {
  0%, 100% { transform: translate(0, 0) scale(1);   border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25%  { transform: translate(30px, -20px) scale(1.05); border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50%  { transform: translate(-20px, 20px) scale(.97); border-radius: 60% 40% 60% 40% / 40% 60% 40% 60%; }
  75%  { transform: translate(10px, 30px) scale(1.02); border-radius: 40% 60% 40% 60% / 60% 40% 60% 40%; }
}
.blob-animated {
  animation: blob-float 14s ease-in-out infinite;
}
.blob-animated-2 {
  animation: blob-float 18s ease-in-out infinite reverse;
}
.blob-animated-3 {
  animation: blob-float 11s ease-in-out infinite 3s;
}

/* ══════════════════════
   SPINNING RING
══════════════════════ */
@keyframes spin-slow  { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes spin-rev   { from{transform:rotate(0deg)} to{transform:rotate(-360deg)} }
.spin-slow { animation: spin-slow 20s linear infinite; }
.spin-rev  { animation: spin-rev  14s linear infinite; }

/* Dashed ring */
.ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(252,214,0,.15);
  pointer-events: none;
}

/* ══════════════════════
   TYPEWRITER CURSOR
══════════════════════ */
@keyframes cursor-blink { 0%,100%{opacity:1} 50%{opacity:0} }
.type-cursor::after {
  content: '|';
  color: var(--yellow);
  animation: cursor-blink 1s step-end infinite;
  margin-left: 2px;
}

/* ══════════════════════
   COUNT UP
══════════════════════ */
.count-up {
  font-size: clamp(2.5rem,5vw,4rem);
  font-weight: 800;
  color: var(--yellow);
  letter-spacing: -.05em;
  line-height: 1;
}

/* Stats strip */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.stat-cell {
  padding: 2.2rem;
  border-right: 1px solid var(--border);
  transition: background .3s;
}
.stat-cell:last-child { border-right: none; }
.stat-cell:hover { background: var(--card-2); }
.stat-cell p { font-size: .78rem; color: var(--muted); margin-top: .3rem; }

/* ══════════════════════
   SCROLL BAR
══════════════════════ */
@keyframes scroll-pulse {
  0%,100% { transform: scaleY(1); opacity: 1; }
  50% { transform: scaleY(.4); opacity: .3; }
}
.scroll-hint {
  position: absolute;
  bottom: 2.5rem; left: 0;
  display: flex; align-items: center; gap: .8rem;
  font-size: .63rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted-2);
  z-index: 1;
  opacity: 0;
  animation: page-enter .7s var(--ease) 1s forwards;
}
.scroll-hint-bar {
  width: 1.5px; height: 38px;
  background: linear-gradient(to bottom, var(--yellow), transparent);
  animation: scroll-pulse 2.2s ease-in-out infinite;
}

/* ══════════════════════
   HERO BADGE
══════════════════════ */
.hero-badge {
  display: inline-flex; align-items: center; gap: .55rem;
  border: 1px solid var(--border-2);
  border-radius: 100px;
  padding: .3rem .85rem .3rem .45rem;
  font-size: .68rem; font-weight: 500; letter-spacing: .08em; color: var(--muted);
  margin-bottom: 2rem;
  opacity: 0;
  animation: page-enter .8s var(--ease) .1s forwards;
}
.badge-pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--yellow);
  animation: logo-blink 2s ease infinite;
}

/* ══════════════════════
   MARQUEE
══════════════════════ */
.marquee-wrap {
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.1rem 0;
  background: var(--surface);
}
.marquee-track {
  display: flex; gap: 3rem;
  width: max-content;
  animation: marquee 28s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee-item {
  font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted-2); white-space: nowrap;
  display: flex; align-items: center; gap: 1.5rem;
}
.marquee-item::after { content:'✦'; color: var(--yellow); font-size: .55rem; }

/* ══════════════════════
   PARTICLES CANVAS
══════════════════════ */
#particles-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
}