/* ===================================================================
   BIZNET GLOBAL AWARDS — ANIMATIONS
   Scroll-reveal system, hero entrance sequence, counters,
   border sweep, modal / menu transitions, carousel motion.
   All reveal animations are opt-in via [data-animation] and are
   disabled globally when prefers-reduced-motion is set (see style.css).
   =================================================================== */

/* -------------------------------------------------
   1. SCROLL REVEAL SYSTEM
   Usage: <div data-animation="fade-up" data-delay="120"> ... </div>
   JS (animations.js) toggles .is-visible via IntersectionObserver.
------------------------------------------------- */
[data-animation] {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.9s var(--ease-premium), transform 0.9s var(--ease-premium);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-animation="fade-up"]    { transform: translateY(36px); }
[data-animation="fade-down"]  { transform: translateY(-36px); }
[data-animation="fade-left"]  { transform: translateX(48px); }
[data-animation="fade-right"] { transform: translateX(-48px); }
[data-animation="zoom-in"]    { transform: scale(0.92); }
[data-animation="scale-up"]   { transform: scale(0.85); }

[data-animation].is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Reduced motion: reveal instantly, no transform */
@media (prefers-reduced-motion: reduce) {
  [data-animation] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* -------------------------------------------------
   2. HERO ENTRANCE SEQUENCE
   Elements appear in order: eyebrow -> date -> title -> subtitle -> ctas
------------------------------------------------- */
.hero-seq {
  opacity: 0;
  transform: translateY(22px);
  animation: heroReveal 1s var(--ease-premium) forwards;
}
.hero-seq[data-seq="1"] { animation-delay: 0.15s; }
.hero-seq[data-seq="2"] { animation-delay: 0.4s; }
.hero-seq[data-seq="3"] { animation-delay: 0.65s; }
.hero-seq[data-seq="4"] { animation-delay: 0.95s; }
.hero-seq[data-seq="5"] { animation-delay: 1.2s; }

@keyframes heroReveal {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-seq { opacity: 1; transform: none; animation: none; }
}

/* -------------------------------------------------
   3. GOLD BORDER SWEEP (keyframe used by .gold-frame in style.css)
------------------------------------------------- */
@keyframes borderSweep {
  0%   { background-position: -120% -120%; }
  100% { background-position: 120% 120%; }
}

/* -------------------------------------------------
   4. COUNTER GLOW (business nominated numbers)
------------------------------------------------- */
@keyframes digitPulse {
  0%   { text-shadow: 0 0 0 rgba(240, 219, 160, 0); }
  40%  { text-shadow: 0 0 22px rgba(240, 219, 160, 0.55); }
  100% { text-shadow: 0 0 0 rgba(240, 219, 160, 0); }
}
.counter-digit.is-counting { animation: digitPulse 1.4s ease-out; }

/* -------------------------------------------------
   5. GOLD PARTICLES (subtle ambient drift — hero / grand finale)
------------------------------------------------- */
.particle-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.particle {
  position: absolute;
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 50%;
  background: var(--color-gold-light);
  opacity: 0;
  filter: blur(0.3px);
  animation: particleDrift var(--dur, 14s) linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes particleDrift {
  0%   { transform: translate3d(0, 10%, 0); opacity: 0; }
  10%  { opacity: var(--peak, 0.55); }
  90%  { opacity: var(--peak, 0.55); }
  100% { transform: translate3d(var(--drift-x, 20px), -110%, 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .particle-field { display: none; }
}

/* -------------------------------------------------
   6. REGION TAB SWEEP (light moves left -> right on hover)
------------------------------------------------- */
.region-tab {
  position: relative;
  overflow: hidden;
}
.region-tab::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -40%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(240,219,160,0.22), transparent);
  transform: skewX(-18deg);
  transition: left 0.7s var(--ease-premium);
}
.region-tab:hover::before,
.region-tab:focus-visible::before,
.region-tab.is-active::before { left: 120%; }

/* -------------------------------------------------
   7. CARD LIFT + IMAGE ZOOM (galleries, sliders, press cards)
------------------------------------------------- */
.media-card { overflow: hidden; }
.media-card img { transition: transform 1.1s var(--ease-premium); }
.media-card:hover img { transform: scale(1.07); }

/* -------------------------------------------------
   8. MODAL TRANSITIONS (sponsor modal, gallery lightbox)
------------------------------------------------- */
.modal-overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-premium), visibility var(--dur-med);
}
.modal-overlay.is-open { opacity: 1; visibility: visible; }

.modal-panel {
  opacity: 0;
  transform: scale(0.95) translateY(12px);
  transition: opacity var(--dur-med) var(--ease-premium), transform var(--dur-med) var(--ease-premium);
}
.modal-overlay.is-open .modal-panel { opacity: 1; transform: scale(1) translateY(0); }

/* -------------------------------------------------
   9. DROPDOWN / SUBMENU (desktop) — see style.css for base state
------------------------------------------------- */
@keyframes dropdownIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* -------------------------------------------------
   10. CAROUSEL / SLIDER TRACK MOTION
------------------------------------------------- */
.slider-track {
  display: flex;
  transition: transform 0.75s var(--ease-premium);
  will-change: transform;
}
.slider-track.is-dragging { transition: none; cursor: grabbing; }

/* -------------------------------------------------
   11. PARTNER LOGO ENTRANCE (left / bottom / right, staggered)
------------------------------------------------- */
[data-animation="from-left"]   { opacity: 0; transform: translateX(-40px); }
[data-animation="from-bottom"] { opacity: 0; transform: translateY(40px); }
[data-animation="from-right"]  { opacity: 0; transform: translateX(40px); }
[data-animation="from-left"].is-visible,
[data-animation="from-bottom"].is-visible,
[data-animation="from-right"].is-visible { opacity: 1; transform: translate(0,0); }

/* -------------------------------------------------
   12. PRELOADER (max ~1.2s, never blocks access)
------------------------------------------------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader__mark {
  width: 46px; height: 46px;
  animation: preloaderSpin 1.1s linear infinite;
}
@keyframes preloaderSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .preloader__mark { animation: none; }
}

/* -------------------------------------------------
   13. PARALLAX LAYERS (video tour section)
------------------------------------------------- */
.parallax-layer {
  transition: transform 0.2s linear;
  will-change: transform;
}

/* -------------------------------------------------
   14. PAGE ENTRANCE (subtle fade on load, not a long preloader)
------------------------------------------------- */
body { animation: pageFadeIn 0.6s ease; }
@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }