/* ==========================================================
   🌌 BALO AI DOORKEEPER — Cinematic Welcome Intro (soft zen)
   NOTE: Scoped to #balo-ai-intro. No global selectors.
   ========================================================== */

/* --- Root container ------------------------------------------------------- */
#balo-ai-intro {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* Softer, calmer palette with subtle aurora */
  background:
    radial-gradient(1200px 800px at 30% 20%, rgba(120, 170, 255, .10), transparent 70%),
    radial-gradient(1200px 800px at 70% 80%, rgba(56, 189, 248, .10), transparent 72%),
    linear-gradient(135deg, #0f172a, #0b1226 35%, #0b1324);

  color: #f8fafc;
  text-align: center;

  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;

  overflow: hidden;
  opacity: 0;
  transform: scale(1);
  transition: opacity 900ms ease, transform 1.1s ease;
}

#balo-ai-intro.show { opacity: 1; }
#balo-ai-intro.hidden,
#balo-ai-intro.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1s ease, visibility 1s ease;
}

/* --- Background layers (scoped) ------------------------------------------ */
#balo-ai-intro .balo-ai-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 50% 45%, rgba(15, 23, 42, .75), rgba(2, 6, 23, 1));
  z-index: 0;
}

/* Soft stars + faint grain for depth */
#balo-ai-intro .balo-ai-stars {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 38% at 50% 40%, rgba(255, 255, 255, .06), transparent 70%),
    repeating-radial-gradient(closest-side, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
  opacity: .22;
  animation: baloTwinkle 16s ease-in-out infinite alternate;
  z-index: 1;
}

@keyframes baloTwinkle {
  0%, 100% { opacity: .18; transform: translateY(0); }
  50%      { opacity: .32; transform: translateY(-2px); }
}

/* --- Center content ------------------------------------------------------- */
#balo-ai-intro .balo-ai-center {
  position: relative;
  z-index: 3;
  max-width: 760px;
  padding: 28px 28px 22px;
  animation: baloIntroRise 1.9s ease-out forwards;
}

/* Subtle glass panel behind the content */
#balo-ai-intro .balo-ai-center::before {
  content: "";
  position: absolute;
  inset: -22px -26px -18px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:
    0 10px 60px rgba(30, 64, 175, .22),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(12px) saturate(110%);
  -webkit-backdrop-filter: blur(12px) saturate(110%);
  z-index: -1;
  opacity: 0;
  animation: baloPanelFade 1.4s ease forwards;
  animation-delay: .15s;
}

@keyframes baloPanelFade {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes baloIntroRise {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Logo + progress halo ------------------------------------------------- */
#balo-ai-intro .balo-ai-logo {
  width: 104px;
  height: auto;
  margin-bottom: 22px;
  border-radius: 18px;
  image-rendering: crisp-edges;
  opacity: 0;
  transform: scale(.94) translateY(18px);
  animation:
    baloLogoWaveIn 1.9s ease-out forwards,
    baloLogoGlowPulse 7.2s ease-in-out infinite alternate;
  animation-delay: .15s;
  position: relative;
  z-index: 2;
}

/* Circular progress ring that completes in ~6.4s (matches heroDelay) */
#balo-ai-intro .balo-ai-logo::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 24px;
  background:
    conic-gradient(from 270deg, rgba(147,197,253,.75), rgba(59,130,246,.75) 50%, rgba(59,130,246,0) 50% 100%);
  -webkit-mask: 
    radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  mask:
    radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  filter: blur(.2px);
  opacity: .0;
  animation:
    baloRingIntro .6s ease forwards .35s,
    baloRingSweep 6.4s linear forwards .6s;
}

@keyframes baloRingIntro {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: .9; transform: scale(1); }
}
@keyframes baloRingSweep {
  from { transform: rotate(0turn); }
  to   { transform: rotate(1turn); }
}

@keyframes baloLogoWaveIn {
  0%   { opacity: 0; transform: scale(.92) translateY(22px); filter: brightness(.95) blur(2px); }
  40%  { opacity: 1; transform: scale(1.035) translateY(-4px); filter: brightness(1.06) blur(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: none; }
}

@keyframes baloLogoGlowPulse {
  0%   { filter: drop-shadow(0 0 8px rgba(59,130,246,.35)) drop-shadow(0 0 16px rgba(96,165,250,.22)); }
  100% { filter: drop-shadow(0 0 14px rgba(96,165,250,.45)) drop-shadow(0 0 26px rgba(147,197,253,.32)); }
}

/* --- Copy lines (softer, readable, zen) ---------------------------------- */
#balo-ai-intro .balo-ai-copy p {
  margin: 12px 0;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.25;
  display: inline-block;
  opacity: 0;

  /* Subtle ink rather than neon gradient */
  color: #eaf2ff;
  text-shadow:
    0 1px 0 rgba(255,255,255,.06),
    0 8px 28px rgba(59,130,246,.25);

  /* Smooth entrance + micro float */
  animation:
    baloFadeInWave 1.4s ease forwards,
    baloBluePulse 6s ease-in-out infinite alternate;
}

#balo-ai-intro .balo-ai-copy p.line-1 { 
  font-size: clamp(18px, 2.1vw, 24px);
  animation-delay: .35s;
}
#balo-ai-intro .balo-ai-copy p.line-2 { 
  font-size: clamp(16px, 1.9vw, 22px);
  font-weight: 600;
  opacity: 0;
  animation-delay: 1.1s;
}
#balo-ai-intro .balo-ai-copy p.line-3 { 
  font-size: clamp(16px, 1.9vw, 22px);
  font-weight: 600;
  animation-delay: 1.9s;
}

/* Daily quote — larger, calm emphasis, delivered last */
#balo-ai-intro .balo-ai-copy p.line-quote {
  margin-top: 14px;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 700;
  letter-spacing: .2px;
  color: #f1f5f9;
  text-shadow:
    0 1px 0 rgba(255,255,255,.05),
    0 10px 36px rgba(59,130,246,.22);
  opacity: 0;
  animation:
    baloQuoteReveal 1.6s ease forwards 3s,
    baloBluePulse 7s ease-in-out infinite alternate 3s;
}

@keyframes baloFadeInWave {
  0%   { opacity: 0; transform: translateY(16px) scale(.985); filter: blur(3px); }
  45%  { opacity: 1; transform: translateY(0)    scale(1.01);  filter: blur(0); }
  70%  { transform: translateY(-1px); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes baloQuoteReveal {
  0%   { opacity: 0; transform: translateY(18px) scale(.98); filter: blur(3px); }
  60%  { opacity: 1; transform: translateY(0)    scale(1.01); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes baloBluePulse {
  0% {
    text-shadow:
      0 1px 0 rgba(255,255,255,.05),
      0 8px 22px rgba(59,130,246,.22);
  }
  100% {
    text-shadow:
      0 1px 0 rgba(255,255,255,.06),
      0 14px 34px rgba(96,165,250,.32);
  }
}

/* --- Skip / Continue button (appears after reading moment) --------------- */
#balo-ai-intro .balo-ai-actions {
  display: flex;
  align-items: center;
  justify-content: center;
}

#balo-ai-intro .balo-ai-skip {
  margin-top: 26px;
  padding: 11px 22px;
  border: 0;
  border-radius: 14px;
  font-weight: 700;
  font-size: 15px;
  background: linear-gradient(135deg, rgba(34,197,94,.95), rgba(59,130,246,.95));
  color: #fff;
  box-shadow: 0 8px 28px rgba(59,130,246,.28), 0 2px 8px rgba(2,6,23,.25);
  cursor: pointer;
  transform: translateY(6px);
  opacity: 0;

  /* Hold until the quote is revealed (~3s) */
  animation: baloButtonIn .7s ease forwards 3.8s;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

@keyframes baloButtonIn {
  from { opacity: 0; transform: translateY(6px) scale(.98); filter: blur(1px); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

#balo-ai-intro .balo-ai-skip:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(59,130,246,.36), 0 4px 10px rgba(2,6,23,.25);
  filter: brightness(1.04);
}
#balo-ai-intro .balo-ai-skip:active {
  transform: translateY(0);
  filter: brightness(.98);
}
#balo-ai-intro .balo-ai-skip:focus-visible {
  outline: 3px solid rgba(147,197,253,.65);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(59,130,246,.25);
}

/* --- Optional breathing background (post-intro) -------------------------- */
.balo-breath-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at 30% 15%, rgba(255,255,255,.35), transparent 70%),
    radial-gradient(1200px 700px at 70% 85%, rgba(255,255,255,.18), transparent 70%),
    linear-gradient(120deg, #eaf5ee, #dbeafe, #fef9c3);
  animation: baloBreathe 18s ease-in-out infinite;
}

@keyframes baloBreathe {
  0%   { filter: saturate(96%) brightness(1);    transform: scale(1); }
  50%  { filter: saturate(104%) brightness(1.035); transform: scale(1.01); }
  100% { filter: saturate(96%) brightness(1);    transform: scale(1); }
}

/* --- Accessibility / Reduced Motion -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #balo-ai-intro .balo-ai-center,
  #balo-ai-intro .balo-ai-logo,
  #balo-ai-intro .balo-ai-logo::after,
  #balo-ai-intro .balo-ai-stars,
  #balo-ai-intro .balo-ai-copy p,
  #balo-ai-intro .balo-ai-skip,
  .balo-breath-bg {
    animation: none !important;
    transition: none !important;
  }
  #balo-ai-intro .balo-ai-logo::after { display: none !important; }
}