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

@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;
}

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

#guide-tooltip::before {
  content: '';
  position: absolute;
  inset: -1.2px;
  border-radius: inherit;
  padding: 1.2px; /* Border thickness */
  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.35;
  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;
  }
}