/* Roadmap page styles (scoped to roadmap only) */

:root {
  --bg: #0a0b0d;
  --fg: #e8eaee;
  --muted: #9aa3b2;
  --accent: #76ff9b; /* soft emerald */
  --accent-2: #a889ff; /* mystical violet */
  --border: rgba(255,255,255,.08);
  --card: rgba(18,20,26, 0.9);
  --glow: rgba(118,255,155,.5);
}

/* Professional + mystical typography */
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji'; background: var(--bg); color: var(--fg); }

.roadmap-container { padding-top: 96px; padding-bottom: 64px; }

.roadmap-hero { margin-bottom: 24px; }
.roadmap-title { color: var(--accent); text-align: left; font-weight: 700; letter-spacing: 0.02em; font-size: clamp(1.9rem, 4.5vw, 2.8rem); margin: 0; text-shadow: 0 0 14px var(--glow); font-family: 'Cinzel', serif; }
.hero-subtitle { 
  color: var(--muted); 
  margin: 6px 0 8px; 
  font-size: 1rem; 
  font-family: 'Special Elite', 'Courier New', monospace; 
  white-space: nowrap; 
  overflow: hidden; 
  border-right: 2px solid rgba(118,255,155,.6); 
  width: 0; 
  display: inline-block; 
}

/* Typewriter animations (duration will be set via inline style by JS) */
@keyframes typewriterReveal { from { width: 0 } to { width: var(--tw-width, 20ch) } }
@keyframes typewriterCaret { 0% { border-right-color: rgba(118,255,155,.8) } 50% { border-right-color: transparent } 100% { border-right-color: rgba(118,255,155,.8) } }
@-webkit-keyframes typewriterReveal { from { width: 0 } to { width: var(--tw-width, 20ch) } }
@-webkit-keyframes typewriterCaret { 0% { border-right-color: rgba(118,255,155,.8) } 50% { border-right-color: transparent } 100% { border-right-color: rgba(118,255,155,.8) } }
.roadmap-subtitle { display:none; }
.meta-row { display:flex; flex-wrap:wrap; gap: 12px; align-items:center; justify-content: space-between; }
.status-legend { display:flex; align-items:center; gap: 16px; color: var(--muted); font-size:.9rem; }
.status-legend .pill { display:inline-block; width: 10px; height: 10px; border-radius: 50%; border:2px solid transparent; margin-right: 6px; }
.last-updated { color: var(--muted); font-size:.9rem; }

.pill-progress { background:#16a34a; }
.pill-planned { background:#f59e0b; }
.pill-upcoming { background:#3b82f6; }
.pill-complete { background:#06b6d4; }

.layout { display:block; }

.timeline { position: relative; }
.timeline-list { list-style:none; margin:0; padding:0; position:relative; }
.timeline-list::before { content:""; position:absolute; left: 19px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, rgba(118,255,155,.15), rgba(168,137,255,.15)); filter: blur(.2px); z-index: 0; }
.timeline-item { display:grid; grid-template-columns: 48px 1fr; gap: 14px; margin-bottom: 18px; align-items: start; }
.left-col { display:flex; flex-direction: column; align-items:center; gap: 8px; padding-top: 6px; position: relative; z-index: 1; }
.marker { display:none; }
.step-badge { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 60% 40%, rgba(118,255,155,.9), rgba(118,255,155,.65)); color: #0a0b0d; font-weight: 800; display:flex; align-items:center; justify-content:center; border: 1px solid rgba(118,255,155,.4); box-shadow: 0 4px 16px rgba(118,255,155,.25); font-size: .85rem; }
.connector { flex: 1 1 auto; width: 2px; background: linear-gradient(180deg, rgba(118,255,155,.15), rgba(168,137,255,.15)); }
/* Circular framed NFT thumbnail */
.nft-frame { display:none; }
.nft-thumb { display:none; }
.phase-card { border:1px solid var(--border); background: radial-gradient(120% 120% at 0% 0%, rgba(168,137,255,.05), transparent 40%), linear-gradient(180deg, rgba(18,20,26,.95), rgba(18,20,26,.85)); border-radius: 16px; padding: 16px; box-shadow: 0 6px 18px rgba(0,0,0,.35); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; -webkit-backdrop-filter: saturate(100%); backdrop-filter: saturate(100%); }
.phase-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0,0,0,.5); border-color: rgba(118,255,155,.35); background: radial-gradient(120% 120% at 0% 0%, rgba(118,255,155,.06), transparent 40%), linear-gradient(180deg, rgba(18,20,26,.95), rgba(18,20,26,.85)); }
.phase-card .phase-accent { position: absolute; inset: 0; border-radius: 16px; pointer-events: none; background: radial-gradient(100% 60% at 10% 0%, rgba(118,255,155,.06), transparent 40%); }
.phase-card { position: relative; overflow: hidden; }
.phase-header { display:flex; align-items:center; justify-content: space-between; gap: 10px; }
.phase-title { font-size: 1.08rem; color: var(--fg); margin: 0; font-weight: 700; letter-spacing: .005em; font-family: 'Cinzel', serif; }
.status { font-size: .72rem; padding:.2rem .55rem; border-radius: 999px; color:#06110b; font-weight:700; letter-spacing: .2px; border: 1px solid rgba(255,255,255,.08); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); background-color: rgba(18,20,26,0.65); }
.pill.pill-progress { color:#052012; background: linear-gradient(90deg, rgba(118,255,155,.85), rgba(118,255,155,.6)); }
.pill.pill-planned { color:#261448; background: linear-gradient(90deg, rgba(168,137,255,.85), rgba(168,137,255,.6)); }
.pill.pill-upcoming { color:#0b1a2d; background: linear-gradient(90deg, rgba(82,156,255,.85), rgba(82,156,255,.6)); }
.pill.pill-complete { color:#032224; background: linear-gradient(90deg, rgba(118,255,215,.85), rgba(118,255,215,.6)); }
.phase-points { margin: 10px 0; color: var(--fg); opacity: .95; }
.phase-points li { margin: 4px 0; }
.phase-footer { display:flex; gap: 8px; margin-top: 10px; }
.tag { font-size: .72rem; color: var(--fg); background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 999px; padding: .15rem .5rem; }
.phase-meta { color:#aaa; font-size:.85rem; }
.eta { color: var(--accent-2); }

/* Header accent underline */
.roadmap-title { position: relative; display: inline-block; }
.roadmap-title::after { content:""; position:absolute; left:0; bottom:-10px; width: 42%; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); box-shadow: 0 0 12px var(--glow); }

.social-callout { margin-top: 28px; text-align:center; color: var(--muted); }
.social-callout .social-link { color: var(--accent); text-decoration: none; }
.social-callout .social-link:hover { text-decoration: underline; }

.back-to-top { position: fixed; right: 16px; bottom: 16px; width:44px; height:44px; border-radius:8px; border:1px solid var(--border); background: #111318; color: var(--fg); display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; visibility:hidden; transition: all .2s ease; z-index: 1000; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.back-to-top.show { opacity:1; visibility:visible; transform: translateY(0); }
.back-to-top:focus { outline: 3px solid var(--accent); }

/* Animations */
.animate-on-scroll { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
.animate-on-scroll.in-view { opacity: 1; transform: translateY(0); }

/* Magical subtle backdrop */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(40% 30% at 18% 18%, rgba(118,255,155,.08), transparent 60%),
    radial-gradient(35% 25% at 82% 28%, rgba(168,137,255,.07), transparent 60%),
    radial-gradient(30% 30% at 52% 82%, rgba(82,156,255,.06), transparent 60%);
  pointer-events: none;
  z-index: -1;
}

/* Hero orb */
.hero-orb { position: absolute; top: 86px; right: 24px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 45% 35%, rgba(118,255,155,.25), rgba(168,137,255,.12) 60%, transparent 70%); filter: blur(1px); pointer-events: none; }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  70% { box-shadow: 0 0 0 14px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* Responsive */
/* Desktop spacing remains comfortable without TOC */
@media (min-width: 992px) {
  .roadmap-container { padding-top: 110px; }
}

/* iOS Safari/Phantom WebView fixes */
@supports not (backdrop-filter: blur(2px)) and (background: rgba(0,0,0,0.5)) {
  .status { background-color: rgba(18,20,26,0.85); }
  .back-to-top { background-color: rgba(17,19,24,0.95); }
}

/* Reduce motion and disable typewriter on small screens (prevents clipping in Safari/phantom) */
@media (max-width: 480px) {
  .hero-subtitle {
    animation: none !important;
    -webkit-animation: none !important;
    border-right: 0;
    width: auto;
    white-space: normal;
  }
}

/* Workarounds for Brave/Safari: ensure gradient backgrounds paint even with Shields stricter settings */
.timeline-list::before { will-change: transform; }
.phase-card { will-change: transform; }
.hero-orb { will-change: opacity, transform; }