/* ==================== Scroll reveal ==================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .85s cubic-bezier(.2,.7,.3,1), transform .85s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays (set by JS via data-d) */
.reveal[data-d="1"] { transition-delay: 80ms; }
.reveal[data-d="2"] { transition-delay: 160ms; }
.reveal[data-d="3"] { transition-delay: 240ms; }
.reveal[data-d="4"] { transition-delay: 320ms; }
.reveal[data-d="5"] { transition-delay: 400ms; }
.reveal[data-d="6"] { transition-delay: 480ms; }
.reveal[data-d="7"] { transition-delay: 560ms; }
.reveal[data-d="8"] { transition-delay: 640ms; }

/* Reveal variants */
.reveal-left { transform: translateX(-32px); }
.reveal-left.in { transform: translateX(0); }
.reveal-right { transform: translateX(32px); }
.reveal-right.in { transform: translateX(0); }
.reveal-scale { transform: scale(.95); }
.reveal-scale.in { transform: scale(1); }
.reveal-blur { filter: blur(8px); }
.reveal-blur.in { filter: blur(0); }

/* ==================== Hero entry (on load) ==================== */
.hero-stagger > * {
  animation: heroIn 1s cubic-bezier(.2,.7,.3,1) backwards;
}
.hero-stagger > *:nth-child(1) { animation-delay: .05s; }
.hero-stagger > *:nth-child(2) { animation-delay: .15s; }
.hero-stagger > *:nth-child(3) { animation-delay: .25s; }
.hero-stagger > *:nth-child(4) { animation-delay: .35s; }
.hero-stagger > *:nth-child(5) { animation-delay: .45s; }
.hero-stagger > *:nth-child(6) { animation-delay: .55s; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==================== Counter num ==================== */
.is-counting {
  font-variant-numeric: tabular-nums;
}

/* ==================== Hover lifts (idempotent — only adds shadow/transition where not set) ==================== */
@media (hover: hover) {
  .anim-tilt {
    transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
  }
  .anim-tilt:hover {
    transform: translateY(-6px) scale(1.02);
  }
}

/* ==================== Animated underline ==================== */
.anim-link { position: relative; display: inline-block; }
.anim-link::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: -3px;
  height: 1px;
  background: currentColor;
  transition: right .35s cubic-bezier(.2,.7,.3,1);
}
.anim-link:hover::after { right: 0; }

/* ==================== Page mount fade ==================== */
body { animation: pageIn .6s ease-out backwards; }
@keyframes pageIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ==================== Floating shapes (for hero, optional) ==================== */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes floatRotate {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(3deg); }
}
.float-y { animation: floatY 6s ease-in-out infinite; }
.float-rotate { animation: floatRotate 7s ease-in-out infinite; }

/* ==================== Pulse (live indicators) ==================== */
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(124, 92, 255, .5); }
  100% { box-shadow: 0 0 0 16px rgba(124, 92, 255, 0); }
}

/* ==================== Reduce motion ==================== */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in,
  .hero-stagger > *,
  body,
  .float-y, .float-rotate,
  .anim-tilt {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition-duration: 0.01s !important;
  }
}

/* ==================== Extras: keyframes ==================== */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes gradientFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes bounceIn {
  0% { opacity: 0; transform: scale(.7); }
  60% { opacity: 1; transform: scale(1.05); }
  100% { transform: scale(1); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}
@keyframes glow {
  0%, 100% { box-shadow: 0 0 8px rgba(124, 92, 255, .3); }
  50% { box-shadow: 0 0 20px rgba(124, 92, 255, .55); }
}
@keyframes cardFlip {
  from { transform: rotateY(-90deg); opacity: 0; }
  to { transform: rotateY(0); opacity: 1; }
}

/* ==================== Hover micro-interactions ==================== */

/* 3D tilt on hover */
.anim-3d {
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
}
.anim-3d:hover {
  transform: perspective(800px) rotateX(2deg) rotateY(-4deg) translateZ(8px);
}

/* Glow border on hover */
.anim-glow:hover {
  animation: glow 1.8s ease-in-out infinite;
}

/* Image hover zoom (for .gallery-item, .product-img, .speaker-img, .card-img, .featured-img, .hero-img, .hero-photo) */
.gallery-item, .product-img, .speaker-img, .card-img, .featured-img,
.hero-photo, .about-img, .chef-img, .g-photo {
  overflow: hidden;
}
.gallery-item img, .product-img,
.card-img, .featured-img,
.hero-photo, .about-img, .speaker-img, .chef-img, .g-photo {
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
@media (hover: hover) {
  .gallery-item:hover img,
  .product:hover .product-img,
  .card:hover .card-img,
  .speaker:hover .speaker-img,
  .featured:hover .featured-img,
  .g-photo:hover {
    transform: scale(1.06);
  }
}

/* Button shimmer effect */
.cta.btn-shimmer, .btn-primary.btn-shimmer {
  position: relative;
  overflow: hidden;
}
.cta.btn-shimmer::before, .btn-primary.btn-shimmer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform .65s;
  pointer-events: none;
}
.cta.btn-shimmer:hover::before, .btn-primary.btn-shimmer:hover::before {
  transform: translateX(100%);
}

/* Animated gradient text */
.text-gradient-flow {
  background: linear-gradient(90deg, #7c5cff, #ff5cb8, #00d4aa, #7c5cff);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientFlow 6s ease-in-out infinite;
}

/* Letter reveal hero (set by JS) */
.letter-reveal {
  display: inline-block;
  overflow: hidden;
}
.letter-reveal .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: charIn .6s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes charIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Animated underline (hover) */
.under-grow {
  position: relative;
  display: inline-block;
}
.under-grow::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: -2px;
  height: 2px;
  background: currentColor;
  transition: right .4s cubic-bezier(.2,.7,.3,1);
}
.under-grow:hover::after { right: 0; }

/* Number pop on update */
.num-pop {
  animation: bounceIn .5s cubic-bezier(.2,.7,.3,1);
}

/* Marquee for sponsors / logos */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  gap: 48px;
  animation: marquee 30s linear infinite;
  width: max-content;
}
.marquee-wrap {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

/* Page transition fade (back/forward) */
@keyframes pageOut {
  to { opacity: 0; transform: translateY(-10px); }
}

/* Card stagger entrance (animated by JS) */
.stagger-grid > * {
  opacity: 0;
  animation: bounceIn .55s cubic-bezier(.2,.7,.3,1) forwards;
}
.stagger-grid > *:nth-child(1) { animation-delay: .05s; }
.stagger-grid > *:nth-child(2) { animation-delay: .12s; }
.stagger-grid > *:nth-child(3) { animation-delay: .19s; }
.stagger-grid > *:nth-child(4) { animation-delay: .26s; }
.stagger-grid > *:nth-child(5) { animation-delay: .33s; }
.stagger-grid > *:nth-child(6) { animation-delay: .40s; }

/* Reduce on touch — animations can feel too much */
@media (hover: none) {
  .anim-3d:hover,
  .anim-glow:hover {
    animation: none;
    transform: none;
  }
}