/* ARCHIE AI INTRO EXPERIENCE v3.0 PRODUCTION
   Real implementation. Full-scene background, no cropped robot.
   Voice waits until finished before intro fades out.
*/

:root{
  --aai3-cyan:#27c8ff;
  --aai3-blue:#3f83ff;
  --aai3-violet:#8b5cf6;
  --aai3-pink:#ff55dd;
  --aai3-green:#2effa9;
  --aai3-text:#f8fbff;
  --aai3-muted:#c0cce0;
  --aai3-bg:#020612;
}

#aai3-intro{
  position:fixed;
  inset:0;
  z-index:999999;
  overflow:hidden;
  background:#020612;
  color:var(--aai3-text);
  opacity:1;
  visibility:visible;
  transition:opacity .9s ease, visibility .9s ease;
}

#aai3-intro.aai3-hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.aai3-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(2,6,18,.30),rgba(2,6,18,.08),rgba(2,6,18,.28)),
    url('../img/archie-ai-intro-scene-v3.png') center center / cover no-repeat;
  transform:scale(1.01);
  filter:saturate(1.06) contrast(1.04);
}

.aai3-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 74% 48%,rgba(139,92,246,.14),transparent 28%),
    radial-gradient(circle at 36% 45%,rgba(39,200,255,.10),transparent 30%),
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.18));
  pointer-events:none;
}

.aai3-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(80,190,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(80,190,255,.035) 1px,transparent 1px);
  background-size:86px 86px;
  opacity:.35;
  animation:aai3Grid 26s linear infinite;
  pointer-events:none;
}

@keyframes aai3Grid{to{background-position:86px 86px,86px 86px}}

.aai3-top-btn{
  position:absolute;
  z-index:5;
  top:24px;
  min-height:46px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(3,9,24,.42);
  color:#fff;
  border-radius:999px;
  padding:0 18px;
  font-weight:950;
  cursor:pointer;
  backdrop-filter:blur(18px);
  box-shadow:0 18px 50px rgba(0,0,0,.22);
}

.aai3-voice{left:26px}
.aai3-skip{right:26px}

.aai3-start-zone{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:13.5%;
  transform:translateX(-50%);
  display:grid;
  justify-items:center;
  gap:18px;
  width:min(760px,calc(100% - 44px));
}

.aai3-wave{
  width:min(680px,100%);
  height:84px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:4px;
  padding:0 18px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(3,9,24,.10);
  backdrop-filter:blur(6px);
}

.aai3-wave span{
  width:4px;
  height:14px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--aai3-cyan),var(--aai3-violet),var(--aai3-pink));
  box-shadow:0 0 16px rgba(39,200,255,.48);
  animation:aai3Wave 1.18s ease-in-out infinite;
  animation-delay:calc(var(--i) * .035s);
  opacity:.82;
}

#aai3-intro.aai3-speaking .aai3-wave span{
  animation-duration:.58s;
}

@keyframes aai3Wave{
  0%,100%{height:12px;opacity:.45}
  50%{height:70px;opacity:1}
}

.aai3-start{
  position:relative;
  overflow:hidden;
  width:min(650px,100%);
  min-height:80px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,rgba(39,200,255,.92),rgba(139,92,246,.95),rgba(255,85,221,.88));
  box-shadow:
    0 28px 90px rgba(39,200,255,.26),
    0 0 42px rgba(139,92,246,.22),
    inset 0 0 28px rgba(255,255,255,.16);
  cursor:pointer;
  font-size:clamp(17px,2vw,30px);
  font-weight:950;
  letter-spacing:-.02em;
  isolation:isolate;
  animation:aai3ButtonPulse 2.1s ease-in-out infinite;
}

.aai3-start::before{
  content:"";
  position:absolute;
  inset:-60%;
  background:
    radial-gradient(circle at 20% 50%,rgba(255,255,255,.42),transparent 10%),
    linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  transform:translateX(-55%);
  animation:aai3ButtonWave 2.8s linear infinite;
  z-index:-1;
}

.aai3-start::after{
  content:"›";
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  width:56px;
  height:56px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.12);
  font-size:48px;
  line-height:1;
}

#aai3-intro.aai3-speaking .aai3-start{
  animation:none;
  opacity:.72;
}

@keyframes aai3ButtonWave{to{transform:translateX(55%)}}
@keyframes aai3ButtonPulse{50%{transform:translateY(-4px);box-shadow:0 38px 110px rgba(139,92,246,.38),0 0 46px rgba(39,200,255,.25)}}

.aai3-status{
  min-height:26px;
  color:#9deaff;
  letter-spacing:.22em;
  margin-right:-.22em;
  text-transform:uppercase;
  font-size:12px;
  font-weight:900;
  text-shadow:0 0 16px rgba(39,200,255,.38);
}

#aai3-intro.aai3-speaking .aai3-status::after{
  content:"AI Speaking...";
}

#aai3-intro.aai3-finishing .aai3-status::after{
  content:"Launching Experience...";
  color:var(--aai3-green);
}

#aai3-intro:not(.aai3-speaking):not(.aai3-finishing) .aai3-status::after{
  content:"Voice ready · Tap to start";
}

.aai3-mobile-title{
  display:none;
}

.aai3-particles i{
  position:absolute;
  z-index:3;
  width:5px;
  height:5px;
  border-radius:999px;
  background:#31c9ff;
  box-shadow:0 0 18px #31c9ff;
  opacity:.72;
  animation:aai3Particle 7s ease-in-out infinite;
}

.aai3-particles i:nth-child(1){left:9%;top:25%}
.aai3-particles i:nth-child(2){left:22%;top:78%;animation-delay:.6s}
.aai3-particles i:nth-child(3){left:47%;top:13%;animation-delay:1.1s}
.aai3-particles i:nth-child(4){left:72%;top:26%;animation-delay:1.8s}
.aai3-particles i:nth-child(5){left:88%;top:72%;animation-delay:2.4s}
.aai3-particles i:nth-child(6){left:57%;top:84%;animation-delay:3s}

@keyframes aai3Particle{
  50%{transform:translateY(-28px) scale(1.65);opacity:1}
}

/* Mobile uses same artwork, but focuses on the robot area without ugly crop boxes */
@media(max-width:760px){
  .aai3-bg{
    background:
      linear-gradient(180deg,rgba(2,6,18,.20),rgba(2,6,18,.36)),
      url('../img/archie-ai-intro-scene-v3.png') 28% center / cover no-repeat;
    transform:scale(1.02);
  }

  .aai3-top-btn{
    top:16px;
    min-height:40px;
    padding:0 13px;
    font-size:13px;
  }

  .aai3-voice{left:14px}
  .aai3-skip{right:14px}

  .aai3-mobile-title{
    position:absolute;
    z-index:4;
    left:50%;
    top:10.5%;
    transform:translateX(-50%);
    width:calc(100% - 42px);
    display:grid;
    justify-items:center;
    text-align:center;
    gap:6px;
    pointer-events:none;
  }

  .aai3-mobile-title b{
    font-size:clamp(33px,11vw,54px);
    line-height:1;
    letter-spacing:.14em;
    margin-right:-.14em;
    background:linear-gradient(90deg,#31c9ff,#8b5cf6,#ff55dd);
    -webkit-background-clip:text;
    color:transparent;
    font-weight:950;
  }

  .aai3-mobile-title span{
    color:#e9f3ff;
    text-transform:uppercase;
    letter-spacing:.22em;
    margin-right:-.22em;
    font-size:11px;
    font-weight:800;
  }

  .aai3-start-zone{
    bottom:7.5%;
    width:calc(100% - 28px);
    gap:12px;
  }

  .aai3-wave{
    height:62px;
    gap:3px;
    padding:0 10px;
    background:rgba(3,9,24,.18);
  }

  .aai3-wave span{
    width:3px;
  }

  .aai3-start{
    min-height:64px;
    font-size:16px;
    padding:0 68px 0 20px;
  }

  .aai3-start::after{
    width:43px;
    height:43px;
    right:10px;
    font-size:34px;
  }

  .aai3-status{
    font-size:10px;
    letter-spacing:.16em;
    margin-right:-.16em;
  }

  .aai3-particles i{
    width:4px;
    height:4px;
  }
}

@media(max-width:420px){
  .aai3-bg{
    background:
      linear-gradient(180deg,rgba(2,6,18,.18),rgba(2,6,18,.42)),
      url('../img/archie-ai-intro-scene-v3.png') 30% center / cover no-repeat;
  }
}

@media(prefers-reduced-motion:reduce){
  #aai3-intro *,
  #aai3-intro::before,
  #aai3-intro::after{
    animation:none!important;
    transition:none!important;
  }
}