/* ============================================================
   PolyDM Hub — Animations v2 (BEE Theme)
   ============================================================ */

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes fadeInUp   { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInDown { from{opacity:0;transform:translateY(-24px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn     { from{opacity:0} to{opacity:1} }
@keyframes slideInRight { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideInLeft  { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideInDown  { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes orbFloat  { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(28px,-28px) scale(1.04)} 66%{transform:translate(-18px,18px) scale(.97)} }
@keyframes pulse     { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.18)} }
@keyframes shimmer   { 0%{transform:translateX(-100%)} 100%{transform:translateX(500%)} }
@keyframes float     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes glow      { 0%,100%{box-shadow:0 0 18px var(--primary-glow)} 50%{box-shadow:0 0 36px var(--primary-glow),0 0 56px rgba(255,184,0,.12)} }
@keyframes spin      { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes bounceIn  { 0%{transform:scale(.3);opacity:0} 50%{transform:scale(1.05)} 70%{transform:scale(.9)} 100%{transform:scale(1);opacity:1} }
@keyframes ripple    { to{transform:scale(4);opacity:0} }
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes hexSpin   { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes blink     { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes progressFill { from{width:0} }
@keyframes waveIn    { from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)} }
@keyframes scaleIn   { from{transform:scale(.85);opacity:0} to{transform:scale(1);opacity:1} }

/* ── Utility classes ──────────────────────────────────────── */
.animate-fade-up    { animation:fadeInUp .55s ease both; }
.animate-fade-down  { animation:fadeInDown .55s ease both; }
.animate-fade-in    { animation:fadeIn .4s ease both; }
.animate-slide-right{ animation:slideInRight .5s ease both; }
.animate-slide-left { animation:slideInLeft .5s ease both; }
.animate-float      { animation:float 3.5s ease-in-out infinite; }
.animate-pulse      { animation:pulse 2s ease infinite; }
.animate-glow       { animation:glow 3s ease infinite; }
.animate-spin       { animation:spin 1s linear infinite; }
.animate-bounce-in  { animation:bounceIn .6s cubic-bezier(.36,.07,.19,.97) both; }
.animate-scale-in   { animation:scaleIn .4s ease both; }

.delay-100 { animation-delay:100ms; } .delay-200 { animation-delay:200ms; }
.delay-300 { animation-delay:300ms; } .delay-400 { animation-delay:400ms; }
.delay-500 { animation-delay:500ms; } .delay-600 { animation-delay:600ms; }
.delay-700 { animation-delay:700ms; } .delay-800 { animation-delay:800ms; }

/* ── Scroll Reveal ────────────────────────────────────────── */
.reveal       { opacity:0; transform:translateY(28px); transition:opacity .65s ease, transform .65s ease; }
.reveal-left  { opacity:0; transform:translateX(-28px); transition:opacity .65s ease, transform .65s ease; }
.reveal-right { opacity:0; transform:translateX(28px); transition:opacity .65s ease, transform .65s ease; }
.reveal.visible, .reveal-left.visible, .reveal-right.visible { opacity:1; transform:none; }

/* ── Hover ────────────────────────────────────────────────── */
.hover-lift  { transition:transform var(--t), box-shadow var(--t); }
.hover-lift:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.hover-glow  { transition:box-shadow var(--t); }
.hover-glow:hover { box-shadow:var(--shadow-primary); }
.hover-scale { transition:transform var(--t); }
.hover-scale:hover { transform:scale(1.03); }

/* ── Gradient animated border ─────────────────────────────── */
.gradient-border { position:relative; background:var(--surface-1); border-radius:var(--radius-xl); }
.gradient-border::before { content:''; position:absolute; inset:-1px; border-radius:calc(var(--radius-xl) + 1px); background:linear-gradient(135deg,#FFB800,#FF8C00,#FFE566); z-index:-1; background-size:200% 200%; animation:gradientShift 4s ease infinite; }

/* ── Skeleton ─────────────────────────────────────────────── */
.skeleton { background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%); background-size:200% 100%; animation:shimmer 1.5s ease infinite; border-radius:var(--radius-md); }

/* ── Ripple ───────────────────────────────────────────────── */
.ripple-container { position:relative; overflow:hidden; }
.ripple-effect { position:absolute; border-radius:50%; background:rgba(255,255,255,.15); transform:scale(0); animation:ripple .6s linear; pointer-events:none; }

/* ── Animated gradient text ───────────────────────────────── */
.gradient-text-animated { background:linear-gradient(270deg,#FFB800,#FF8C00,#FFE566,#FFB800); background-size:300% 300%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:gradientShift 5s ease infinite; }

/* ── Card shine ───────────────────────────────────────────── */
.card-shine { position:relative; overflow:hidden; }
.card-shine::after { content:''; position:absolute; top:-50%; left:-100%; width:60%; height:200%; background:linear-gradient(90deg,transparent,rgba(255,184,0,.06),transparent); transform:skewX(-20deg); transition:left .6s ease; }
.card-shine:hover::after { left:150%; }

/* ── Page transition ──────────────────────────────────────── */
.page-transition { animation:fadeIn .3s ease; }

/* ── Progress animation ───────────────────────────────────── */
.progress-fill { animation:progressFill 1.5s cubic-bezier(.4,0,.2,1) both; }

/* ── Dots bg pattern ──────────────────────────────────────── */
.dots-pattern { background-image:radial-gradient(circle,rgba(255,184,0,.18) 1px,transparent 1px); background-size:24px 24px; }

/* ── Hex pattern (reusable) ───────────────────────────────── */
.hex-pattern { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34z' fill='none' stroke='%23FFB800' stroke-width='1'/%3E%3Cpath d='M28 100L0 84V50l28-16 28 16v34z' fill='none' stroke='%23FFB800' stroke-width='1'/%3E%3C/svg%3E"); background-size:56px 100px; opacity:.05; }

/* ── Blinking Brand Highlight Animation (Light Mode High Contrast) ──── */
@keyframes brandGlowBlink {
  0%, 100% {
    color: #F26F21;
    text-shadow: none;
    opacity: 1;
  }
  50% {
    color: #D97706;
    text-shadow: none;
    opacity: 0.85;
  }
}

.brand-blink {
  display: inline-block;
  font-weight: 900;
  color: #F26F21;
  animation: brandGlowBlink 1.6s ease-in-out infinite;
}