/* ============================================================
   Evento micro-interactions
   Loaded from layout.tsx after site.css so these win on conflict.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .evt-anim, .evt-anim * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── 1. Event card image zoom on hover ─────────────────────── */
.evt-card__media,
.rec-match-card__media,
.evt-cal-feature__media,
.evt-cal-feature {
  overflow: hidden;
}
.evt-card__media img,
.rec-match-card__media img,
.evt-cal-feature img {
  transition: transform 200ms ease;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .evt-card:hover .evt-card__media img,
  .evt-card:focus-within .evt-card__media img,
  .rec-match-card:hover .rec-match-card__media img,
  .rec-match-card:focus-within .rec-match-card__media img,
  .evt-cal-feature:hover img,
  .evt-cal-feature:focus-within img {
    transform: scale(1.03);
  }
}
.evt-card:active .evt-card__media img,
.rec-match-card:active .rec-match-card__media img,
.evt-cal-feature:active img {
  transform: scale(1.015);
}

/* ── 2. Bookmark / save snap (spring bounce) ───────────────── */
.evt-card__save i {
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes evtBookmarkSnap {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.7); }
  70%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.evt-card__save.is-snap i {
  animation: evtBookmarkSnap 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── 3. Heart burst on like ────────────────────────────────── */
.evt-heart-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  place-items: center;
  z-index: 5;
}
.evt-heart-burst__p {
  position: absolute;
  font-size: 14px;
  color: #e54b3a;
  opacity: 0;
  animation: evtHeartFly 700ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes evtHeartFly {
  0%   { transform: translate(0, 0) scale(0.5); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, -28px)) scale(1.1); opacity: 0; }
}

/* ── 4. AI search loading pulse ────────────────────────────── */
@keyframes evtAiPulse {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}
.evt-ai-search-btn.is-thinking {
  background-image: linear-gradient(
    90deg,
    #2456ff 0%, #6c5ce7 25%, #00aef0 50%, #6c5ce7 75%, #2456ff 100%
  );
  background-size: 200% 100%;
  animation: evtAiPulse 1.2s linear infinite;
  color: #fff;
  border-color: transparent;
}

/* ── 5. Recommendation count flash ─────────────────────────── */
@keyframes evtCountFlash {
  0%   { transform: scale(1); color: inherit; }
  40%  { transform: scale(1.18); color: #6c5ce7; }
  100% { transform: scale(1); color: inherit; }
}
.rec-hero__match-num.is-flash,
.rec-results-head h2 strong.is-flash {
  animation: evtCountFlash 320ms ease-out;
  display: inline-block;
}

/* ── 6. Match percentage ring fill ─────────────────────────── */
.rec-match-card__donut-fg {
  transition: stroke-dashoffset 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes evtRingFromEmpty {
  from { stroke-dashoffset: var(--donut-c, 201.06); }
}
.rec-match-card__donut-fg.is-revealing {
  animation: evtRingFromEmpty 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── 7. Ticket QR card flip ────────────────────────────────── */
.groove-qr-flip {
  perspective: 1200px;
  cursor: pointer;
}
.groove-qr-flip__inner {
  position: relative;
  width: 100%;
  min-height: 320px;
  transition: transform 600ms cubic-bezier(0.45, 0.05, 0.55, 0.95);
  transform-style: preserve-3d;
}
.groove-qr-flip.is-flipped .groove-qr-flip__inner {
  transform: rotateY(180deg);
}
.groove-qr-flip__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.groove-qr-flip__face--back {
  transform: rotateY(180deg);
}
.groove-qr-flip__cta {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--admin-mute, #64748b);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── 8. Post-purchase confetti ─────────────────────────────── */
.evt-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}
.evt-confetti__piece {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 14px;
  opacity: 0;
  animation: evtConfettiFall 1000ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  will-change: transform, opacity;
}
@keyframes evtConfettiFall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate(var(--cx, 0), 80vh) rotate(var(--cr, 720deg)); opacity: 0; }
}

/* ── 9. Calendar month slide ───────────────────────────────── */
@keyframes evtCalSlideRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes evtCalSlideLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
.evt-cal-grid[data-direction="next"] {
  animation: evtCalSlideRight 280ms ease-out;
}
.evt-cal-grid[data-direction="prev"] {
  animation: evtCalSlideLeft 280ms ease-out;
}

/* ── 10. Page transition fade ──────────────────────────────── */
@keyframes evtPageFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.evt-page-fade {
  animation: evtPageFade 150ms ease-out;
}

/* ── 11. Event card skeleton shimmer ───────────────────────── */
.evt-card-skel {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  min-height: 320px;
}
.evt-card-skel__media {
  aspect-ratio: 16 / 10;
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.06) 0%,
    rgba(15, 23, 42, 0.12) 50%,
    rgba(15, 23, 42, 0.06) 100%
  );
  background-size: 200% 100%;
  animation: evtShimmer 1.4s linear infinite;
}
.evt-card-skel__body { padding: 14px 16px; display: grid; gap: 10px; }
.evt-card-skel__row {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.06) 0%,
    rgba(15, 23, 42, 0.12) 50%,
    rgba(15, 23, 42, 0.06) 100%
  );
  background-size: 200% 100%;
  animation: evtShimmer 1.4s linear infinite;
}
.evt-card-skel__row--title { height: 18px; width: 75%; }
.evt-card-skel__row--meta  { width: 55%; }
.evt-card-skel__row--desc  { width: 90%; }
@keyframes evtShimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 12. Countdown rolling digits ──────────────────────────── */
.evt-roll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  height: 1.05em;
  overflow: hidden;
  line-height: 1;
  vertical-align: baseline;
  font-variant-numeric: tabular-nums;
}
.evt-roll__inner {
  display: flex;
  flex-direction: column;
  transition: transform 350ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.evt-roll__inner > span {
  display: block;
  height: 1.05em;
  line-height: 1.05em;
}

@media (prefers-reduced-motion: reduce) {
  .evt-card__media img,
  .rec-match-card__media img,
  .evt-cal-feature img {
    transform: none !important;
    transition: none !important;
  }

  .evt-card__save.is-snap i,
  .evt-heart-burst__p,
  .evt-ai-search-btn.is-thinking,
  .rec-hero__match-num.is-flash,
  .rec-results-head h2 strong.is-flash,
  .rec-match-card__donut-fg.is-revealing,
  .evt-confetti__piece,
  .evt-cal-grid[data-direction],
  .evt-page-fade,
  .evt-card-skel__media,
  .evt-card-skel__row {
    animation: none !important;
  }

  .rec-match-card__donut-fg,
  .groove-qr-flip__inner,
  .evt-roll__inner {
    transition: none !important;
  }
}