/* Movimiento permanente del tablero principal y guiños interactivos. */
@keyframes hero-float-up {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}

@keyframes hero-float-diagonal {
  0%, 100% { translate: 0 0; }
  50% { translate: 9px -13px; }
}

@keyframes hero-float-reverse {
  0%, 100% { translate: 0 0; }
  50% { translate: -9px -11px; }
}

@keyframes hero-title-breathe {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

@keyframes hero-spark {
  0%, 100% { translate: 0 0; transform: rotate(0deg) scale(1); }
  50% { translate: 0 -13px; transform: rotate(12deg) scale(1.12); }
}

@keyframes hero-cursor-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: -10px -12px; }
}

@keyframes hero-selection-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.014); }
}

.hero-board .floating-tag,
.hero-board .board-title,
.hero-board .comment-bubble,
.hero-board .cursor-label,
.hero-board .selection-box {
  will-change: translate, transform;
}

.hero-board .tag-one {
  animation: hero-float-diagonal 2.35s ease-in-out infinite;
}

.hero-board .tag-two {
  animation: hero-float-reverse 2.65s ease-in-out .12s infinite;
}

.hero-board .tag-three {
  animation: hero-float-up 2.15s ease-in-out .06s infinite;
}

.hero-board .board-title {
  animation: hero-title-breathe 2.85s ease-in-out infinite;
}

.hero-board .board-big-ideas {
  display: inline-block;
  transform-origin: center;
  transition: transform .28s ease, filter .28s ease;
}

.hero-board .comment-bubble {
  animation: hero-spark 2s ease-in-out .08s infinite;
}

.hero-board .cursor-label {
  animation: hero-cursor-drift 2.4s ease-in-out .16s infinite;
}

.hero-board .selection-box {
  animation: hero-selection-breathe 3s ease-in-out infinite;
}

.hero-board .tag-two,
.hero-board .cursor-label {
  transition: transform .25s ease, box-shadow .25s ease;
}

.tooltip-trigger {
  cursor: help;
}

.tooltip-trigger::before,
.tooltip-trigger::after {
  position: absolute;
  left: 50%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 30;
}

.tooltip-trigger::after {
  content: attr(data-tooltip);
  bottom: calc(100% + 14px);
  min-width: max-content;
  padding: 10px 13px;
  border: 1px solid #11111b;
  border-radius: 8px;
  background: #fff;
  color: #11111b;
  box-shadow: 6px 6px 0 #11111b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  transform: translate(-50%, 8px) scale(.96);
}

.tooltip-trigger::before {
  content: "";
  bottom: calc(100% + 6px);
  width: 12px;
  height: 12px;
  border-right: 1px solid #11111b;
  border-bottom: 1px solid #11111b;
  background: #fff;
  transform: translate(-50%, 5px) rotate(45deg);
}

.tooltip-trigger:hover::before,
.tooltip-trigger:hover::after,
.tooltip-trigger:focus-visible::before,
.tooltip-trigger:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

.tooltip-trigger:hover::after,
.tooltip-trigger:focus-visible::after {
  transform: translate(-50%, 0) scale(1);
}

.tooltip-trigger:hover::before,
.tooltip-trigger:focus-visible::before {
  transform: translate(-50%, 0) rotate(45deg);
}

.tooltip-trigger:focus-visible {
  outline: 3px solid #ffc21c;
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .hero-board .board-big-ideas:hover {
    transform: scale(1.12);
    filter: drop-shadow(0 12px 24px rgba(17, 17, 27, .14));
    position: relative;
    z-index: 4;
  }

  .hero-board .tag-two:hover,
  .hero-board .cursor-label:hover {
    transform: scale(1.07) rotate(-1deg);
    box-shadow: 0 16px 32px rgba(17, 17, 27, .18);
    z-index: 5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-board .floating-tag,
  .hero-board .board-title,
  .hero-board .comment-bubble,
  .hero-board .cursor-label,
  .hero-board .selection-box {
    animation: none !important;
  }

  .hero-board .board-big-ideas,
  .hero-board .tag-two,
  .hero-board .cursor-label,
  .tooltip-trigger::before,
  .tooltip-trigger::after {
    transition: none !important;
  }
}