/* The Forge — Animations & micro-interactions (Indonesia) */

/* === CRITICAL: Position dynamically-injected elements out of flow [v2-fix] === */
.particle-canvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.cursor-glow {
  position: fixed !important;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(206, 17, 38, 0.07) 0%,
    rgba(206, 17, 38, 0.03) 30%,
    transparent 60%
  );
  pointer-events: none !important;
  z-index: 9999 !important;
  top: 0;
  left: 0;
  mix-blend-mode: screen;
}

.sovereignty-shield {
  position: fixed !important;
  bottom: 20px !important;
  left: 20px !important;
  z-index: 1000 !important;
}
/* === END critical positioning === */

@keyframes forge-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes forge-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes forge-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--forge-gold-glow, rgba(206,17,38,.35)); }
  50%      { box-shadow: 0 0 24px 6px var(--forge-gold-glow, rgba(206,17,38,.35)); }
}
@keyframes forge-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@keyframes forge-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes forge-rank-up {
  0%   { transform: scale(1);   filter: drop-shadow(0 0 0 var(--forge-gold)); }
  40%  { transform: scale(1.15); filter: drop-shadow(0 0 12px var(--forge-gold)); }
  100% { transform: scale(1);   filter: drop-shadow(0 0 0 var(--forge-gold)); }
}

.fade-in    { animation: forge-fade-in .35s ease-out both; }
.slide-up   { animation: forge-slide-up .45s ease-out both; }
.glow-pulse { animation: forge-glow-pulse 2.6s ease-in-out infinite; }
.rank-up    { animation: forge-rank-up .9s ease-out both; }

.stagger > * { animation: forge-slide-up .45s ease-out both; }
.stagger > *:nth-child(1) { animation-delay: .02s; }
.stagger > *:nth-child(2) { animation-delay: .06s; }
.stagger > *:nth-child(3) { animation-delay: .10s; }
.stagger > *:nth-child(4) { animation-delay: .14s; }
.stagger > *:nth-child(5) { animation-delay: .18s; }
.stagger > *:nth-child(6) { animation-delay: .22s; }
.stagger > *:nth-child(7) { animation-delay: .26s; }
.stagger > *:nth-child(8) { animation-delay: .30s; }

.skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,.03) 0%,
    rgba(255,255,255,.08) 50%,
    rgba(255,255,255,.03) 100%);
  background-size: 800px 100%;
  animation: forge-shimmer 1.6s linear infinite;
  border-radius: 10px;
}

.spin { animation: forge-spin .9s linear infinite; }

/* Forge solution glow — applied to .reply.is-solution */
.reply.is-solution {
  border-color: var(--forge-gold-dim, rgba(206,17,38,.45));
  box-shadow: 0 0 0 1px var(--forge-gold-dim, rgba(206,17,38,.45)), 0 0 32px -8px var(--forge-gold-glow, rgba(206,17,38,.35));
  position: relative;
}
.reply.is-solution::before {
  content: '✦ TERSELESAIKAN';
  position: absolute; top: -10px; left: 16px;
  font-family: var(--font-display, 'Orbitron'), sans-serif;
  font-size: .68rem; letter-spacing: .18em;
  color: var(--forge-gold, #CE1126);
  background: var(--forge-bg, #0D0606);
  padding: 2px 10px;
  border: 1px solid var(--forge-gold-dim, rgba(206,17,38,.45));
  border-radius: 999px;
}

/* Sovereignty shield — forced fixed positioning */
.sovereignty-shield {
  position: fixed !important;
  bottom: 20px;
  left: 20px;
  z-index: 1000;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-display, 'Orbitron'), sans-serif;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--forge-gold, #CE1126);
  border: 1px solid var(--forge-gold-dim, rgba(206,17,38,.45));
  border-radius: 999px;
  background: var(--forge-gold-glow, rgba(206,17,38,.08));
  animation: forge-glow-pulse 3.2s ease-in-out infinite;
}
.sovereignty-shield::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--forge-gold, #CE1126);
  box-shadow: 0 0 8px var(--forge-gold, #CE1126);
}

/* Hover lift for cards */
.forge-card, .thread-row, .glass-panel.hoverable {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.forge-card:hover, .thread-row:hover, .glass-panel.hoverable:hover {
  transform: translateY(-2px);
  border-color: var(--forge-border-strong, rgba(255,255,255,.14));
}

/* Button press */
.btn { transition: transform .08s ease, background .18s ease, border-color .18s ease, color .18s ease; }
.btn:active { transform: translateY(1px) scale(.99); }

/* Vote pop */
@keyframes forge-vote-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); color: var(--forge-gold, #CE1126); }
  100% { transform: scale(1); }
}
.vote-pop { animation: forge-vote-pop .32s ease-out; }

/* Toast */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  padding: 10px 18px; border-radius: 8px;
  background: rgba(13,6,6,.96);
  border: 1px solid var(--forge-border, rgba(255,255,255,.08));
  color: var(--forge-text, #F5F1E4);
  font-size: .88rem;
  z-index: 9999;
  animation: forge-slide-up .25s ease-out both;
}
.toast.toast-success { border-color: rgba(52,211,153,.5); }
.toast.toast-error   { border-color: rgba(248,113,113,.5); }

/* Entry transitions for whole page */
.page-enter { animation: forge-fade-in .35s ease-out both; }

/* ============================================================================
 * VISUAL OVERHAUL v2.0 — "Bengkel — Indonesia"
 * ============================================================================ */

/* 1.1 Cursor glow */
.cursor-glow {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(206, 17, 38, 0.07) 0%,
    rgba(206, 17, 38, 0.03) 30%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
  mix-blend-mode: screen;
}

/* 1.2 Click ripple */
.click-ripple {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(206, 17, 38, 0.35);
  transform: translate(-50%, -50%) scale(0);
  animation: rippleExpand 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
  z-index: 10;
}
@keyframes rippleExpand {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(40); opacity: 0; }
}

/* 2.2 Card glare overlay */
.glass-card, .app-pulse-card, .forge-thread-card, .forge-feature-card {
  position: relative;
  overflow: hidden;
}
.glass-card::before, .app-pulse-card::before,
.forge-thread-card::before, .forge-feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    300px circle at var(--glare-x, -100%) var(--glare-y, -100%),
    rgba(255, 255, 255, 0.06) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}

/* 4.1 Scroll-in entrance */
.animate-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 5.1 Nav active link sliding underline */
#forge-topbar nav a { position: relative; }
#forge-topbar nav a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 2px;
  background: var(--forge-gold, #CE1126);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 1px;
}
#forge-topbar nav a:hover::after,
#forge-topbar nav a.active::after { transform: scaleX(1); }

/* 6. Status badge animations */
.status-live .status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #34D399;
  display: inline-block;
  animation: breathe 3s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.4);
}
@keyframes breathe {
  0%, 100% { transform: scale(0.85); opacity: 0.7; }
  50%      { transform: scale(1.1);  opacity: 1;   }
}

/* 7.1 Upvote animation */
.upvote-btn, .vote-btn, .btn-upvote { transition: transform 0.15s ease, color 0.2s ease; }
.upvote-btn.voted, .vote-btn.voted, .btn-upvote.voted {
  color: var(--forge-gold, #CE1126);
  animation: hammerStrike 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes hammerStrike {
  0%   { transform: scale(1)   rotate(0); }
  30%  { transform: scale(1.3) rotate(-15deg); }
  60%  { transform: scale(0.9) rotate(5deg); }
  100% { transform: scale(1)   rotate(0); }
}

/* 8. Loader */
.forge-loader {
  display: flex; gap: 10px; align-items: center; justify-content: center; padding: 40px;
}
.forge-loader span {
  width: 14px; height: 14px;
  background: var(--forge-gold, #CE1126);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: starPulse 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(206, 17, 38, 0.55));
}
.forge-loader span:nth-child(1) { animation-delay: 0ms; }
.forge-loader span:nth-child(2) { animation-delay: 180ms; }
.forge-loader span:nth-child(3) { animation-delay: 360ms; }
@keyframes starPulse {
  0%, 100% { transform: scale(0.8); opacity: 0.35; }
  50%      { transform: scale(1.2); opacity: 1;    }
}

/* 9. Page-in transition */
.forge-shell { animation: pageIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes pageIn {
  from { opacity: 0.01; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 12. Rank badge glow */
.rank-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 20px;
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.rank-badge[data-rank="apprentice"] {
  background: rgba(82, 93, 114, 0.2); color: #8B95A8; border: 1px solid rgba(82, 93, 114, 0.3);
}
.rank-badge[data-rank="smith"] {
  background: rgba(96, 165, 250, 0.1); color: #60A5FA; border: 1px solid rgba(96, 165, 250, 0.3);
  box-shadow: 0 0 8px rgba(96, 165, 250, 0.1);
}
.rank-badge[data-rank="master_smith"] {
  background: rgba(206, 17, 38, 0.1); color: #CE1126; border: 1px solid rgba(206, 17, 38, 0.3);
  box-shadow: 0 0 12px rgba(206, 17, 38, 0.15);
}
.rank-badge[data-rank="architect"] {
  background: rgba(232, 121, 249, 0.1); color: #E879F9; border: 1px solid rgba(232, 121, 249, 0.3);
  box-shadow: 0 0 15px rgba(232, 121, 249, 0.15);
}

/* Mobile */
@media (max-width: 768px) {
  .cursor-glow { display: none; }
  .particle-canvas { display: none; }
  .sovereignty-shield.fixed-shield { bottom: 12px; left: 12px; width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-glow, .particle-canvas, .spark, .click-ripple, .solution-ripple { display: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}