/* ============================================================
   Coinsads — First-visit Intro / Loading Screen
   Mobile-first, dark, lightweight, dependency-free.
   ============================================================ */

:root{
  --i-bg:#080b14;
  --i-bg-soft:#0c1120;
  --i-surface:#111827;
  --i-border:#23304d;
  --i-text:#eef2fb;
  --i-text-soft:#aeb9d1;
  --i-text-muted:#74809b;
  --i-brand-500:#2f90fb;
  --i-brand-700:#1657dc;
  --i-accent:#7c3aed;
  --i-success:#16a34a;
  --i-ease:cubic-bezier(.4,0,.2,1);
  --i-ease-spring:cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body.intro-body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  background:var(--i-bg);
  color:var(--i-text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ---------- Ambient background ---------- */
.intro-bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--i-bg)}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35;will-change:transform}
.orb-a{
  width:60vmax;height:60vmax;left:-20vmax;top:-25vmax;
  background:radial-gradient(circle at 30% 30%, var(--i-brand-500), transparent 70%);
  animation:drift-a 18s ease-in-out infinite;
}
.orb-b{
  width:55vmax;height:55vmax;right:-20vmax;bottom:-22vmax;
  background:radial-gradient(circle at 70% 70%, var(--i-accent), transparent 70%);
  animation:drift-b 22s ease-in-out infinite;
}
.grid-overlay{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse at center, black 0%, transparent 75%);
}
@keyframes drift-a{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(6vmax,4vmax) scale(1.08)}
}
@keyframes drift-b{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-5vmax,-5vmax) scale(1.1)}
}

/* ---------- Layout ---------- */
.intro-wrap{
  position:relative;z-index:1;
  width:100%;max-width:480px;
  height:100%;max-height:100dvh;
  padding:28px 20px 22px;
  display:flex;flex-direction:column;
  gap:22px;
}

/* ---------- Header ---------- */
.intro-header{
  text-align:center;
  animation:fade-down .7s var(--i-ease) both;
}
.intro-logo{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-bottom:14px;
}
.logo-mark{
  width:42px;height:42px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--i-brand-500),var(--i-accent));
  font-family:'Sora',sans-serif;font-weight:800;font-size:1.15rem;color:#fff;
  box-shadow:0 8px 24px -6px rgba(47,144,251,.55);
  animation:pulse-glow 2.6s ease-in-out infinite;
}
.logo-name{
  font-family:'Sora',sans-serif;font-weight:700;font-size:1.35rem;
  letter-spacing:-.01em;
}
.intro-welcome{
  font-family:'Sora',sans-serif;font-weight:700;font-size:1.5rem;
  margin:0 0 4px;
  background:linear-gradient(135deg,#fff,var(--i-text-soft));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.dot-anim{display:inline-block;animation:dots 1.4s steps(1) infinite}
.intro-tagline{margin:0;color:var(--i-text-muted);font-size:.92rem}

@keyframes pulse-glow{
  0%,100%{box-shadow:0 8px 24px -6px rgba(47,144,251,.55)}
  50%{box-shadow:0 8px 30px -4px rgba(124,58,237,.7)}
}
@keyframes fade-down{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
@keyframes dots{0%{opacity:.2}50%{opacity:1}100%{opacity:.2}}

/* ---------- Feature stage ---------- */
.feature-stage{
  position:relative;
  flex:1;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.feature-card{
  position:absolute;
  inset:0;
  margin:auto;
  height:fit-content;
  width:100%;
  max-width:400px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border:1px solid var(--i-border);
  backdrop-filter:blur(6px);
  opacity:0;
  transform:translateY(18px) scale(.96);
  pointer-events:none;
  transition:opacity .45s var(--i-ease), transform .5s var(--i-ease-spring);
}
.feature-card.is-active{
  opacity:1;
  transform:translateY(0) scale(1);
}
.feature-card.is-leaving{
  opacity:0;
  transform:translateY(-16px) scale(.97);
  transition:opacity .32s var(--i-ease), transform .38s var(--i-ease);
}
.feature-icon{
  flex:none;
  width:48px;height:48px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(47,144,251,.18), rgba(124,58,237,.18));
  color:var(--i-brand-500);
  border:1px solid rgba(47,144,251,.25);
}
.feature-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.feature-title{font-weight:700;font-size:.98rem;color:var(--i-text)}
.feature-desc{font-size:.8rem;color:var(--i-text-muted);line-height:1.35}
.feature-check{
  flex:none;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(22,163,74,.15);color:#4ade80;
  opacity:0;transform:scale(.5);
  transition:opacity .3s var(--i-ease) .15s, transform .35s var(--i-ease-spring) .15s;
}
.feature-card.is-active .feature-check{opacity:1;transform:scale(1)}

/* ---------- Progress footer ---------- */
.intro-footer{animation:fade-up .7s var(--i-ease) .1s both}
.progress-track{
  position:relative;
  height:6px;border-radius:99px;
  background:var(--i-surface);
  overflow:hidden;
  margin-bottom:10px;
  border:1px solid var(--i-border);
}
.progress-fill{
  position:absolute;inset:0 auto 0 0;
  width:0%;
  border-radius:99px;
  background:linear-gradient(90deg,var(--i-brand-500),var(--i-accent));
  box-shadow:0 0 12px rgba(47,144,251,.6);
  transition:width .25s var(--i-ease);
}
.progress-fill::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  width:40px;animation:shimmer 1.3s linear infinite;
}
@keyframes shimmer{from{transform:translateX(-40px)}to{transform:translateX(calc(100% + 40px))}}
.progress-meta{
  display:flex;align-items:center;justify-content:space-between;
  font-size:.8rem;color:var(--i-text-muted);
}
.progress-text{font-weight:500}
.progress-pct{
  font-family:'Sora',sans-serif;font-weight:700;color:var(--i-text);
  font-variant-numeric:tabular-nums;
  min-width:2.6em;text-align:right;
}
@keyframes fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Exit transition ---------- */
body.intro-exit .intro-wrap{
  opacity:0;transform:scale(.98);
  transition:opacity .4s var(--i-ease), transform .4s var(--i-ease);
}
body.intro-exit .intro-bg{
  opacity:0;transition:opacity .5s var(--i-ease);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .orb,.logo-mark,.dot-anim,.progress-fill::after{animation:none!important}
  .feature-card{transition:opacity .2s linear!important;transform:none!important}
}

/* ---------- Small phones ---------- */
@media (max-width:360px){
  .intro-welcome{font-size:1.3rem}
  .logo-name{font-size:1.15rem}
  .feature-title{font-size:.9rem}
  .feature-desc{font-size:.75rem}
}

/* ---------- Larger screens ---------- */
@media (min-width:640px){
  .intro-wrap{max-width:520px;padding:40px 24px 32px}
  .feature-card{padding:20px 22px}
}