/* ═════════════════════════════════════════════════════════════════
   TIDAL DIGITAL GUIDE — COMPONENT STYLES & ANIMATION KEYFRAMES (AR)
   ═════════════════════════════════════════════════════════════════ */

@keyframes floatBreathing {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0px); }
}
.animate-float-calm {
  animation: floatBreathing 3.4s ease-in-out infinite;
}

.guide-character-motion {
  transform: translateY(0);
  transition: transform 260ms cubic-bezier(0.22, 0.8, 0.24, 1);
}
.guide-character-motion.is-activated {
  transform: translateY(-5px);
}
.guide-ambient-glow {
  background: radial-gradient(ellipse at center, rgba(83, 162, 239, 0.18) 0%, rgba(114, 211, 238, 0.08) 40%, transparent 72%);
  filter: blur(12px);
  opacity: 0.75;
}
.guide-ground-shadow {
  background: radial-gradient(ellipse at center, rgba(9, 60, 157, 0.48) 0%, rgba(9, 60, 157, 0.22) 55%, transparent 100%);
  filter: blur(2px);
}

@keyframes shadowDynamic {
  0% { transform: translate(-50%, 0) scale(1); opacity: 0.85; }
  50% { transform: translate(-50%, 0) scale(0.80); opacity: 0.45; }
  100% { transform: translate(-50%, 0) scale(1); opacity: 0.85; }
}
.animate-shadow-dynamic {
  animation: shadowDynamic 3.4s ease-in-out infinite;
}

@keyframes diamondGlow {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); filter: drop-shadow(0 0 4px #72d3ee); }
}
.animate-diamond-glow {
  animation: diamondGlow 4s ease-in-out infinite;
}

@keyframes particleUp {
  0% { opacity: 1; transform: translateY(0) scale(0.8); }
  100% { opacity: 0; transform: translateY(-24px) scale(1.2); }
}
.particle-anim {
  animation: particleUp 0.8s ease-out forwards;
}

/* Reduced Motion Accessibility Override */
@media (prefers-reduced-motion: reduce) {
  #tidal-digital-guide *,
  #tidal-digital-guide *::before,
  #tidal-digital-guide *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Scoped Teaser Refinements (Phase 2 Refinement) */
#guide-tooltip {
  position: relative;
  background: rgba(255, 255, 255, 0.82) !important; /* Luminous translucent glass */
  backdrop-filter: blur(12px) !important; /* Strong blur for contrast on dark backgrounds */
  -webkit-backdrop-filter: blur(12px) !important;
}

#guide-teaser-text {
  font-size: 14px !important;
}

#guide-tooltip::before {
  content: '';
  position: absolute;
  inset: -1.6px;
  border-radius: inherit;
  padding: 1.6px; /* Increased thickness for stronger presence */
  background: linear-gradient(120deg, #72d3ee, #b57eed, #82ee72, #72d3ee);
  background-size: 300% 300%;
  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  -webkit-mask-clip: padding-box, border-box;
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.75; /* Increased opacity for clearly visible edge */
  animation: tidalGuideAuroraBorder 12s ease infinite;
  z-index: 1;
}

@keyframes tidalGuideAuroraBorder {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  #guide-tooltip::before {
    animation: none !important;
    background-position: 0% 50% !important;
    opacity: 0.2;
  }
}

/* Re-anchor guide panel to eliminate 65-75px vertical gap above character */
#guide-panel {
  bottom: calc(100% - 68px) !important;
}

/* ═════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE ADJUSTMENTS (max-width: 768px)
   ═════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 1. Conservative character resize (~12.5%) */
  #character-container {
    width: 112px !important;
    height: 122px !important;
  }

  #character-container #layer-shadow {
    width: 66px !important;
  }

  /* 2. Hide teaser branding text while preserving pulsing status dot */
  #guide-tooltip .font-bold,
  #guide-tooltip .font-mono {
    display: none !important;
  }

  #guide-tooltip .border-b {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 6px !important;
  }

  /* 3. State 2: In-page CTA Visible (Compact Teaser Suppression) */
  #tidal-digital-guide.guide-state-compact #guide-tooltip {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(8px) !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
  }

  /* 4. State 3: Progressive CTA Active (Visual Priority & Safe Float) */
  #tidal-digital-guide.guide-state-cta-active #guide-tooltip {
    display: none !important;
  }

  #tidal-digital-guide.guide-state-cta-active {
    transform: translateY(-160px) scale(0.9) !important;
    transform-origin: bottom right !important;
    pointer-events: auto !important;
  }
}