/* ============================================================
   A HOT PARTY — animations.css
   Scroll-Reveal · Entrance · Hover · Keyframes
   ============================================================ */

/* ── Scroll-Triggered Reveal Base States ───────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(45px);
  transition: opacity .75s ease, transform .75s ease;
}
.reveal-left {
  opacity: 0;
  transform: translateX(-65px);
  transition: opacity .75s ease, transform .75s ease;
}
.reveal-right {
  opacity: 0;
  transform: translateX(65px);
  transition: opacity .75s ease, transform .75s ease;
}
.reveal-scale {
  opacity: 0;
  transform: scale(.85);
  transition: opacity .75s ease, transform .75s ease;
}
.reveal-rotate {
  opacity: 0;
  transform: rotate(-6deg) translateY(30px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal-fade {
  opacity: 0;
  transition: opacity .9s ease;
}

/* Visible state — added by IntersectionObserver */
.is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* Stagger delays via data-delay attribute */
[data-delay="1"] { transition-delay: .1s; }
[data-delay="2"] { transition-delay: .2s; }
[data-delay="3"] { transition-delay: .3s; }
[data-delay="4"] { transition-delay: .4s; }
[data-delay="5"] { transition-delay: .5s; }
[data-delay="6"] { transition-delay: .6s; }
[data-delay="7"] { transition-delay: .7s; }
[data-delay="8"] { transition-delay: .8s; }

/* ── Hero Entrance Animations ──────────────────────────────── */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes spin-in {
  from { opacity: 0; transform: rotate(-15deg) scale(.8); }
  to   { opacity: 1; transform: rotate(0) scale(1); }
}

.hero-pretitle  { animation: hero-fade-up .7s .1s both ease; }
.hero-title     { animation: hero-fade-up .8s .3s both ease; }
.hero-subtitle  { animation: hero-fade-up .8s .5s both ease; }
.hero-cta-group { animation: hero-fade-up .7s .7s both ease; }
.hero-badges    { animation: hero-fade-up .7s .9s both ease; }

/* ── Hover Micro-interactions ──────────────────────────────── */

/* Card 3D tilt (applied via JS) */
.card-3d {
  transition: transform .5s cubic-bezier(.4,0,.2,1), box-shadow .5s ease;
  transform-style: preserve-3d;
  perspective: 1000px;
}
.card-3d:hover {
  transform: rotateY(4deg) rotateX(-2deg) translateZ(15px) scale(1.02);
  box-shadow: var(--sh-gold);
}

/* Image zoom on card hover */
.img-zoom-wrap { overflow: hidden; border-radius: inherit; }
.img-zoom-wrap img {
  transition: transform .6s ease;
  width: 100%; height: 100%; object-fit: cover;
}
.img-zoom-wrap:hover img { transform: scale(1.08); }

/* Button ripple */
.btn-ripple {
  position: relative;
  overflow: hidden;
}
.btn-ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,.25) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0);
  transition: transform .5s ease, opacity .5s ease;
}
.btn-ripple:active::after {
  opacity: 1;
  transform: scale(2.5);
  transition: 0s;
}

/* Glow on hover */
.hover-glow {
  transition: box-shadow var(--t-smooth);
}
.hover-glow:hover { box-shadow: var(--sh-gold); }

/* ── Marquee ───────────────────────────────────────────────── */
@keyframes marquee-ltr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marquee-rtl {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.marquee-container {
  overflow: hidden;
  width: 100%;
  position: relative;
}
.marquee-container::before,
.marquee-container::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
}
.marquee-container::before { left: 0;  background: linear-gradient(to right, var(--black), transparent); }
.marquee-container::after  { right: 0; background: linear-gradient(to left,  var(--black), transparent); }

.marquee-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: marquee-ltr 45s linear infinite;
}
.marquee-track-reverse {
  animation: marquee-rtl 50s linear infinite;
}
.marquee-track:hover,
.marquee-track-reverse:hover {
  animation-play-state: paused;
}

/* ── Flip Cards ────────────────────────────────────────────── */
.flip-card {
  perspective: 900px;
  cursor: pointer;
}
.flip-card-inner {
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.4,0,.2,1);
}
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.flip-card-back {
  transform: rotateY(180deg);
  background: var(--grad-red);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  text-align: center;
  gap: 1rem;
}

/* ── Scroll indicator ──────────────────────────────────────── */
.scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.scroll-indicator i {
  font-size: .8rem;
  color: var(--gold);
  animation: bounce-down 1.5s ease-in-out infinite;
}
@keyframes bounce-down {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

/* ── Particle / floating card suits ───────────────────────── */
.particle {
  position: absolute;
  font-size: 1.5rem;
  opacity: .06;
  animation: particle-float linear infinite;
  pointer-events: none;
  color: var(--gold);
  user-select: none;
}
@keyframes particle-float {
  0%   { transform: translateY(110vh) rotate(0deg);   opacity: 0; }
  10%  { opacity: .08; }
  90%  { opacity: .08; }
  100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; }
}

/* ── Playing card decorative elements ─────────────────────── */
.card-suit {
  position: absolute;
  font-size: 4rem;
  opacity: .04;
  color: var(--gold);
  pointer-events: none;
}