/* ---------- HERO ---------- */
.hero{
  position: relative;
  min-height:92vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:32px 16px;
  overflow: hidden; /* IMPORTANT */
}


.hero::before{
  content:"";
  position:absolute;
  inset:-30%;
  z-index:-1;
  background:
    radial-gradient(320px 240px at 20% 30%, #ffd6e790 0%, transparent 70%),
    radial-gradient(360px 260px at 70% 25%, #c7f0ff90 0%, transparent 70%),
    radial-gradient(340px 260px at 70% 75%, #e8ddff90 0%, transparent 70%),
    radial-gradient(280px 220px at 25% 75%, #d7fff190 0%, transparent 70%);
  filter: blur(20px);
}

.hero-content{
  max-width:720px;
  padding:28px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:28px;
  backdrop-filter: blur(12px);
  box-shadow:0 30px 60px #00000018;
}

.tag{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  background:#ffffff;
  border:1px solid var(--border);
  font-size:12px;
  letter-spacing:.12em;
  margin-bottom:12px;
}

.hero h1{
  font-size:3rem;
  margin:10px 0 0;
}

.hero h2{
  font-size:2.5rem;
  margin:0;
  color:#ec4899;
}

.hero-text{
  color:var(--muted);
  margin:18px 0 26px;
}

/* ---------- FEATURES ---------- */
.features-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:22px;
  margin-top:40px;
}

.feature-card{
  background:#ffffff;
  border-radius:22px;
  padding:22px;
  border:1px solid var(--border);
  box-shadow:0 14px 30px #00000012;
}

/* ---------- MEDIA ---------- */
.media-placeholder{
  margin-top:32px;
  padding:60px;
  border:2px dashed #00000020;
  border-radius:26px;
  color:var(--muted);
}
/* ---------- Animations / Motion ---------- */

/* Soft float for the hero background glow */
.hero::before{
  animation: heroFloat 16s ease-in-out infinite alternate;
}

@keyframes heroFloat{
  from { transform: translate3d(-12px,-10px,0) scale(1.02); }
  to   { transform: translate3d(14px,12px,0)  scale(1.06); }
}

/* Button micro-interactions */
.btn{
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.btn:hover{
  transform: translateY(-1px);
}

.btn:active{
  transform: translateY(0px);
  opacity: .9;
}

/* Scroll reveal animation */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}

.reveal.show{
  opacity: 1;
  transform: translateY(0);
}

/* Roadmap styling */
.roadmap{
  list-style:none;
  padding:0;
  margin: 26px auto 0;
  max-width: 760px;
  text-align:left;
}

.roadmap li{
  background: #ffffffc8;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px 14px;
  margin: 10px 0;
  box-shadow: 0 10px 24px #00000010;
}

.muted{
  color: var(--muted);
}
/* ---------- DigiDachi Runner ---------- */
.dachi-runner{
  position: absolute;
  top: 18px;
  left: 0;
  width: 64px;
  height: auto;
  pointer-events: auto;
  image-rendering: pixelated;
  z-index: 3;

  animation:
    dachiRun 14s linear infinite,
    dachiBounce .6s ease-in-out infinite;
}


@keyframes dachiRun{
  0%{
    left: 0;
    transform: scaleX(1);
  }

  45%{
    left: calc(100% - 64px);
    transform: scaleX(1);
  }

  50%{
    left: calc(100% - 64px);
    transform: scaleX(-1);
  }

  95%{
    left: 0;
    transform: scaleX(-1);
  }

  100%{
    left: 0;
    transform: scaleX(1);
  }
}

@keyframes dachiBounce{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

.dachi-runner:hover{
  animation-play-state: paused;
  cursor: pointer;
}
/* ---------- Animated Roadmap ---------- */

/* Roadmap items start hidden ONLY until section is revealed */
.reveal .animated-roadmap li{
  opacity: 0;
  transform: translateY(18px) scale(.98);
}

/* Animate roadmap items AFTER reveal */
.reveal.show .animated-roadmap li{
  animation: roadmapIn .7s ease forwards;
}


/* Stagger the list items */
.animated-roadmap li:nth-child(1){ animation-delay: .05s; }
.animated-roadmap li:nth-child(2){ animation-delay: .15s; }
.animated-roadmap li:nth-child(3){ animation-delay: .25s; }
.animated-roadmap li:nth-child(4){ animation-delay: .35s; }
.animated-roadmap li:nth-child(5){ animation-delay: .45s; }
.animated-roadmap li:nth-child(6){ animation-delay: .55s; }
.animated-roadmap li:nth-child(7){ animation-delay: .65s; }
.animated-roadmap li:nth-child(8){ animation-delay: .75s; }
.animated-roadmap li:nth-child(9){ animation-delay: .85s; }

@keyframes roadmapIn{
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Hover lift (feels interactive) */
.roadmap li{
  transition: transform .2s ease, box-shadow .2s ease;
}

.roadmap li:hover{
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 18px 36px #00000018;
}

/* Highlight CURRENT phase */
.roadmap li.current{
  border: 2px solid #ec4899;
  box-shadow: 0 0 0 0 rgba(236,72,153,.4);
  animation: pulseGlow 2.2s ease-in-out infinite;
}

@keyframes pulseGlow{
  0%{ box-shadow: 0 0 0 0 rgba(236,72,153,.4); }
  70%{ box-shadow: 0 0 0 14px rgba(236,72,153,0); }
  100%{ box-shadow: 0 0 0 0 rgba(236,72,153,0); }
}
.roadmap{
  position: relative;
}

.roadmap::before{
  content:"";
  position:absolute;
  left:-18px;
  top:0;
  bottom:0;
  width:4px;
  background: linear-gradient(
    to bottom,
    #ec4899,
    #c7f0ff,
    transparent
  );
  border-radius:999px;
  opacity:.35;
}
/* ---------- Roadmap Enhancements ---------- */

.phase-header{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}

.phase-icon{
  font-size:1.4rem;
}

.badge{
  margin-left:auto;
  padding:4px 10px;
  border-radius:999px;
  font-size:.7rem;
  font-weight:800;
}

.badge.in-progress{
  background:#ec4899;
  color:#fff;
}

.badge.locked{
  background:#00000014;
  color:#555;
}

.expandable .phase-body{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:
    max-height .4s ease,
    opacity .3s ease,
    transform .3s ease;
  transform: translateY(-6px);
}

.expandable:hover .phase-body{
  max-height:240px;
  opacity:1;
  transform: translateY(0);
  margin-top:10px;
}


/* Progress bar */
.progress-bar{
  margin-top:12px;
  height:8px;
  border-radius:999px;
  background:#00000014;
  overflow:hidden;
}

.expandable[data-progress="20"]:hover .progress-fill{ width:20%; }
.expandable[data-progress="40"]:hover .progress-fill{ width:40%; }
.expandable[data-progress="60"]:hover .progress-fill{ width:60%; }
.expandable[data-progress="80"]:hover .progress-fill{ width:80%; }
.expandable[data-progress="100"]:hover .progress-fill{ width:100%; }



/* Locked state */
.locked{
  opacity:.65;
}

/* Hover cue */
.expandable:hover{
  box-shadow:0 20px 40px #00000018;
}
.expandable:hover .progress-fill{
  width: attr(data-progress percentage);
}
.phase-header{
  cursor: default;
}
/* ---------- Roadmap Cards ---------- */

.roadmap-cards{
  max-width: 860px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.roadmap-card{
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  background: #ffffffcc;
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 16px 34px #00000012;
  transition: transform .25s ease, box-shadow .25s ease;
}

.roadmap-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 50px #00000018;
}

/* Left icon column */
.card-left{
  display: flex;
  align-items: center;
  justify-content: center;
}

.phase-icon{
  font-size: 1.6rem;
}

/* Main content */
.card-main h3{
  margin: 0 0 6px;
}

.card-main p{
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
}

/* Status badges */
.badge{
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
  white-space: nowrap;
}

.badge.in-progress{
  background: #ec4899;
  color: #fff;
}

.badge.locked{
  background: #00000014;
  color: #555;
}

/* Progress bar */
.progress-bar{
  margin-top: 10px;
  height: 8px;
  background: #00000014;
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ec4899, #c7f0ff);
  transition: width 1s ease;
}

/* Animate progress on hover */
.roadmap-card[data-progress="20"]:hover .progress-fill{ width:20%; }

/* Locked state */
.roadmap-card.locked{
  opacity: .6;
}