/* The Forge — Animations & micro-interactions */

/* === 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(252, 209, 22, 0.07) 0%,
    rgba(252, 209, 22, 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(252,209,22,.35)); }
  50%      { box-shadow: 0 0 24px 6px var(--forge-gold-glow, rgba(252,209,22,.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(252,209,22,.45));
  box-shadow: 0 0 0 1px var(--forge-gold-dim, rgba(252,209,22,.45)), 0 0 32px -8px var(--forge-gold-glow, rgba(252,209,22,.35));
  position: relative;
}
.reply.is-solution::before {
  content: '✦ NALUTAS';
  position: absolute; top: -10px; left: 16px;
  font-family: var(--font-display, 'Orbitron'), sans-serif;
  font-size: .68rem; letter-spacing: .18em;
  color: var(--forge-gold, #FCD116);
  background: var(--forge-bg, #0A0C10);
  padding: 2px 10px;
  border: 1px solid var(--forge-gold-dim, rgba(252,209,22,.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, #FCD116);
  border: 1px solid var(--forge-gold-dim, rgba(252,209,22,.45));
  border-radius: 999px;
  background: var(--forge-gold-glow, rgba(252,209,22,.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, #FCD116);
  box-shadow: 0 0 8px var(--forge-gold, #FCD116);
}

/* 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, #FCD116); }
  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(10,12,16,.96);
  border: 1px solid var(--forge-border, rgba(255,255,255,.08));
  color: var(--forge-text, #E7E9EE);
  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 — "The Iron Workshop"
 * ============================================================================ */

/* 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(252, 209, 22, 0.07) 0%,
    rgba(252, 209, 22, 0.03) 30%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 9999;
  top: 0; left: 0;
  will-change: transform;
  mix-blend-mode: screen;
}

/* 1.2 Click ripple ---------------------------------------------------------- */
.click-ripple {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(252, 209, 22, 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;
}

/* 2.3 Card press-down ------------------------------------------------------- */
.glass-card:active,
.app-pulse-card:active,
.forge-thread-card:active,
.forge-feature-card:active {
  transform: perspective(800px) scale(0.98) !important;
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

/* 2.4 Solved/featured thread border glow ----------------------------------- */
.forge-thread-card[data-status="forged"],
.thread-row[data-status="forged"] {
  border: 1px solid rgba(252, 209, 22, 0.3);
  box-shadow:
    0 0 20px rgba(252, 209, 22, 0.08),
    0 4px 24px rgba(0, 0, 0, 0.2);
}

/* 3.1 Ambient particle canvas ---------------------------------------------- */
.particle-canvas {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
  display: block;
}

/* 4.1 Scroll-in entrance — observer adds .animate-in */
.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, #FCD116);
  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);
}

/* 5.2 Search bar focus glow ------------------------------------------------- */
.forge-search input,
.forge-search-input {
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}
.forge-search input:focus,
.forge-search-input:focus {
  border-color: rgba(252, 209, 22, 0.4);
  box-shadow:
    0 0 20px rgba(252, 209, 22, 0.1),
    0 0 40px rgba(252, 209, 22, 0.05);
}

/* 5.3 Notification bell shake ---------------------------------------------- */
@keyframes bellShake {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(12deg); }
  30% { transform: rotate(-10deg); }
  45% { transform: rotate(8deg); }
  60% { transform: rotate(-6deg); }
  75% { transform: rotate(3deg); }
}
.notification-bell.has-unread {
  animation: bellShake 0.6s ease-in-out;
  animation-delay: 2s;
}
.notification-bell.has-unread.shake-now {
  animation: bellShake 0.6s ease-in-out;
}

/* 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;   }
}
.status-dev .status-icon {
  display: inline-block;
  animation: spinGear 4s linear infinite;
}
@keyframes spinGear {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.status-issue .status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #FBBF24;
  display: inline-block;
  animation: flicker 1.5s ease-in-out infinite;
}
@keyframes flicker {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1;   }
}
.status-fixing .status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #FCD116;
  display: inline-block;
  animation: fixPulse 1s ease-in-out infinite;
}
@keyframes fixPulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 4px  rgba(252, 209, 22, 0.3); }
  50%      { transform: scale(1.2); box-shadow: 0 0 12px rgba(252, 209, 22, 0.5); }
}

/* 7.1 Upvote hammer strike -------------------------------------------------- */
.upvote-btn,
.vote-btn,
.btn-upvote {
  transition: transform 0.15s ease, color 0.2s ease;
}
.upvote-btn:active,
.vote-btn:active,
.btn-upvote:active {
  transform: scale(0.85) rotate(-10deg);
}
.upvote-btn.voted,
.vote-btn.voted,
.btn-upvote.voted {
  color: var(--forge-gold, #FCD116);
  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); }
}

/* 7.2 Upvote spark particles ------------------------------------------------ */
.spark {
  position: fixed;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #FCD116;
  pointer-events: none;
  z-index: 9999;
  animation: sparkFly 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  box-shadow: 0 0 6px rgba(252, 209, 22, 0.6);
}
@keyframes sparkFly {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0); opacity: 0; }
}

/* 7.3 Solution ripple ------------------------------------------------------- */
.solution-ripple {
  position: fixed;
  width: 0; height: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(252, 209, 22, 0.6);
  animation: solutionRipple 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
  z-index: 9999;
}
@keyframes solutionRipple {
  0%   { width: 0;     height: 0;     opacity: 1; }
  100% { width: 300px; height: 300px; opacity: 0; }
}

/* 8.1 Three-stars loader (tatlong bituin — Philippine flag) ----------------- */
.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, #FCD116);
  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(252, 209, 22, 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.1 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);    }
}

/* 10. Glassmorphism upgrade ------------------------------------------------- */
.glass-card,
.app-pulse-card {
  background: rgba(22, 27, 38, 0.55);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.25),
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 -1px 0 rgba(0, 0, 0, 0.2) inset;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease,
    border-color 0.3s ease;
}
.glass-card:hover,
.app-pulse-card:hover {
  border-color: rgba(252, 209, 22, 0.15);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.35),
    0 0 30px rgba(252, 209, 22, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

/* 11.1 Form input focus ----------------------------------------------------- */
.forge-input,
.forge-textarea,
.forge-select {
  background: rgba(15, 18, 27, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--forge-text, #E7E9EE);
  font-family: var(--font-body, inherit);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}
.forge-input:focus,
.forge-textarea:focus,
.forge-select:focus {
  outline: none;
  border-color: rgba(252, 209, 22, 0.4);
  background: rgba(15, 18, 27, 0.8);
  box-shadow:
    0 0 0 3px rgba(252, 209, 22, 0.08),
    0 0 20px rgba(252, 209, 22, 0.06);
}
.forge-input.error,
.forge-textarea.error,
.forge-select.error {
  border-color: #F87171;
  animation: inputShake 0.4s ease;
}
@keyframes inputShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* 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.apprentice,
.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.smith,
.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.master-smith,
.rank-badge[data-rank="master_smith"] {
  background: rgba(252, 209, 22, 0.1);
  color: #FCD116;
  border: 1px solid rgba(252, 209, 22, 0.3);
  box-shadow: 0 0 12px rgba(252, 209, 22, 0.15);
  animation: goldPulse 3s ease-in-out infinite;
}
.rank-badge.architect,
.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);
  animation: architectGlow 4s ease-in-out infinite;
}
@keyframes goldPulse {
  0%, 100% { box-shadow: 0 0 8px  rgba(252, 209, 22, 0.10); }
  50%      { box-shadow: 0 0 16px rgba(252, 209, 22, 0.25); }
}
@keyframes architectGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(232, 121, 249, 0.10); }
  50%      { box-shadow: 0 0 20px rgba(232, 121, 249, 0.25); }
}

/* 13. Fixed sovereignty shield --------------------------------------------- */
.sovereignty-shield.fixed-shield {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 36px; height: 36px;
  padding: 0;
  border-radius: 50%;
  background: rgba(22, 27, 38, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(252, 209, 22, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
  animation: shieldBreathe 4s ease-in-out infinite;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
}
.sovereignty-shield.fixed-shield::before { content: none; }
.sovereignty-shield.fixed-shield:hover {
  transform: scale(1.15);
  box-shadow: 0 0 20px rgba(252, 209, 22, 0.2);
}
.sovereignty-shield.fixed-shield svg {
  width: 18px; height: 18px;
  fill: #FCD116;
}
@keyframes shieldBreathe {
  0%, 100% { opacity: 0.5;  }
  50%      { opacity: 0.85; }
}

/* 14. Custom scrollbar + selection (forge only) ---------------------------- */
.forge-shell ::-webkit-scrollbar { width: 5px; }
.forge-shell ::-webkit-scrollbar-track  { background: rgba(10, 12, 16, 0.5); }
.forge-shell ::-webkit-scrollbar-thumb  { background: rgba(252, 209, 22, 0.25); border-radius: 3px; }
.forge-shell ::-webkit-scrollbar-thumb:hover { background: rgba(252, 209, 22, 0.45); }
.forge-shell ::selection { background: rgba(252, 209, 22, 0.3); color: #fff; }

/* 15. Mobile adaptations --------------------------------------------------- */
@media (max-width: 768px) {
  .cursor-glow    { display: none; }
  .particle-canvas { display: none; }
  .glass-card:active,
  .app-pulse-card:active {
    transform: scale(0.97) !important;
  }
  .app-pulse-card,
  .forge-thread-card { transition-duration: 0.3s; }
  .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; }

  .app-pulse-card,
  .forge-thread-card,
  .forge-feature-card,
  .guide-section,
  .forge-release-card,
  .forge-story-card,
  .forge-bounty-row,
  .thread-row,
  .forge-card {
    opacity: 1;
    transform: none;
  }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}