/* ==============================================
   TB Enhancements — Animations & Micro-interactions
   Only applies on index.html (data-page="public")
   Safe for star.html/admin7.html: no side effects.
=============================================== */

[data-page="public"].tb-enhanced body {
  overflow-x: hidden;
}

/* ===== Startup: CSS no longer hides elements — JS handles visibility ===== */

/* ----- Picker overlays enhanced backdrop ----- */
[data-page="public"] .gem-picker-overlay.tb-gsap-ready,
[data-page="public"] .pet-picker-overlay.tb-gsap-ready,
[data-page="public"] #card-picker-overlay.tb-gsap-ready {
  background: rgba(10, 10, 12, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ----- Modal overlays enhanced backdrop (reset/team-data) ----- */
[data-page="public"] .modal-overlay.tb-gsap-ready {
  background: rgba(10, 10, 12, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ----- Hover micro-interactions for pool cards ----- */
[data-page="public"] .pool-card {
  position: relative;
}

[data-page="public"] .pool-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(4, 211, 97, 0.13), transparent 80%);
  opacity: 0;
  pointer-events: none;
}

[data-page="public"] .pool-card.tb-card-hovered::after {
  opacity: 1;
}

/* ----- Slot hover soft glow ----- */
[data-page="public"] .slot:not(.tb-slot-dragging)::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(67,134,255,0.28), transparent 80%);
  opacity: 0;
  pointer-events: none;
}

[data-page="public"] .slot.tb-slot-hovered::before {
  animation: tb-glow-soft 1.6s ease-in-out infinite alternate;
}

@keyframes tb-glow-soft {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}

/* ----- Gear cell hover pulse ring ----- */
[data-page="public"] .gear-cell.tb-gear-hovered::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(0,191,255,0.35), transparent 70%);
  animation: tb-gear-pulse-anim 0.6s ease-out;
}

@keyframes tb-gear-pulse-anim {
  0%   { opacity: 0; transform: scale(1.12); }
  50%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0.4; transform: scale(0.98); }
}