/* Extra styles for the pure-static build */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Make sure long words in tables/posts wrap nicely on small screens */
.prose-wrap,
article {
  overflow-wrap: anywhere;
}

/* --- IV Invest coin (rotating, icon cycle) --- */
.iv-coin{
  width:72px;
  height:72px;
  border-radius:9999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.65) 35%, rgba(110,193,228,0.22) 70%, rgba(110,193,228,0.10) 100%),
    linear-gradient(135deg, rgba(110,193,228,0.25), rgba(16,185,129,0.10));
  border: 1px solid rgba(110,193,228,0.30);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,0.18);
  display:flex;
  align-items:center;
  justify-content:center;
  position:absolute;
  animation: ivCoinSpin 10s linear infinite, float 12s ease-in-out infinite;
}

.iv-coin-face{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: rgba(10, 60, 70, 0.70);
  opacity:0;
  animation: ivCoinFace 6s infinite;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

.iv-coin-btc{ animation-delay: 0s; }
.iv-coin-usd{ animation-delay: 2s; }
.iv-coin-up{  animation-delay: 4s; }

.iv-coin {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.78) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
  line-height: 1 !important;
}
.iv-coin svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 auto !important;
}

@keyframes ivCoinSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
@keyframes ivCoinFace{
  0%{opacity:0;}
  10%{opacity:1;}
  30%{opacity:1;}
  40%{opacity:0;}
  100%{opacity:0;}
}