/* wrapper STEP 0 */
.flow-step[data-step="0"]{

  position:relative;

}


/* AUDIO BUTTON */
.flow-card-audio{

  position:absolute;

  right:0;
  top:0;

  width:44px;
  height:44px;

  border-radius:12px;

  border:1px solid #e5e5e5;

  background:#fff;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  font-size:18px;

  z-index:2;
}


/* HINT CARD */
.flow-audio-hint{

  position:absolute;

  right:54px;
  top:2px;

  background:#111;
  color:#fff;

  padding:8px 5px;

  border-radius:10px;

  font-size:10px;

  max-width:180px;

  opacity:0;

  transform:translateX(10px);

  transition:.25s;

}


/* visible */
.flow-audio-hint.show{

  opacity:1;

  transform:translateX(0);

}


/* arrow */
.flow-audio-hint-arrow{

  position:absolute;

  right:-6px;
  top:12px;

  width:10px;
  height:10px;

  background:#111;

  transform:rotate(45deg);

}

.flow-card-audio.playing{
  background:#111;
  color:#fff;
}

/* =====================================
   PREMIUM WELCOME OVERLAY
===================================== */

.flow-welcome-overlay{
  position:fixed;
  inset:0;

  background:
    radial-gradient(circle at 50% 20%, rgba(255,165,0,.15), transparent 40%),
    linear-gradient(180deg,#0f172a 0%, #111827 100%);

  display:flex;
  align-items:center;
  justify-content:center;

  backdrop-filter:blur(4px);

  z-index:9999;

  opacity:1;
  transition:opacity .5s ease;
}

.flow-welcome-overlay.hide{
  opacity:0;
}


/* =====================================
   CONTENT CARD
===================================== */


.flow-welcome-content{

  text-align:center;
  max-width:380px;
  padding:60px 40px;

  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(20px);

  border-radius:28px;

  border:1px solid rgba(255,255,255,0.15);

  box-shadow:
    0 40px 80px rgba(0,0,0,0.4),
    inset 0 0 40px rgba(255,255,255,0.05);

  animation:cardReveal .8s cubic-bezier(.22,.61,.36,1);
}

@keyframes cardReveal{
  from{
    opacity:0;
    transform:translateY(40px) scale(.9);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}


/* =====================================
   LOGO
===================================== */

.flow-welcome-logo{
  width:160px;
  margin:0 auto 28px;

  opacity:0;
  transform:translateY(-60px);

  animation:logoDrop 1.2s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:.3s;
}

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


/* =====================================
   TYPOGRAPHY
===================================== */

.flow-welcome-title{
  font-size:28px;
  font-weight:600;
  color:#fff;
  margin-bottom:14px;
}

.flow-welcome-caption{
  font-size:15px;
  color:rgba(255,255,255,.7);
  margin-bottom:36px;
  line-height:1.6;
}


/* =====================================
   PREMIUM BUTTON
===================================== */

.flow-welcome-btn{

  background:linear-gradient(135deg,#f59e0b,#ff7b00);

  color:#fff;
  border:none;

  padding:15px 40px;
  border-radius:18px;

  font-size:15px;
  font-weight:600;

  cursor:pointer;

  transition:all .3s ease;

  box-shadow:
    0 15px 35px rgba(255,140,0,.4);
}

.flow-welcome-btn:hover{
  transform:translateY(-3px) scale(1.04);
  box-shadow:
    0 20px 45px rgba(255,140,0,.6);
}

.flow-welcome-btn:active{
  transform:scale(.97);
}