/* ==========================================================================
   i-MEET 2026 CSS Animations
   Premium 3D tilt, parallax depth, scroll-reveal & creative micro-interactions
   ========================================================================== */

/* ── Page / Hero entry ─────────────────────────────────────────────────── */
@keyframes slideUpHero {
  0%   { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInHeroOverlay {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* ── Floating idle pulse (icons / badge chips) ──────────────────────────── */
@keyframes floatElement {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

/* ── Button CTA glows ──────────────────────────────────────────────────── */
@keyframes pulseGlowSaffron {
  0%, 100% { box-shadow: 0 0 0 0 rgba(243,156,18,0.4); }
  50%       { box-shadow: 0 0 18px 6px rgba(243,156,18,0.7); }
}
@keyframes pulseGlowGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(39,174,96,0.4); }
  50%       { box-shadow: 0 0 18px 6px rgba(39,174,96,0.7); }
}

/* ── Shimmer sweep (runs once on card enter) ────────────────────────────── */
@keyframes cardShimmer {
  0%   { transform: translateX(-150%) skewX(-15deg); opacity: 0.4; }
  100% { transform: translateX(250%)  skewX(-15deg); opacity: 0; }
}

/* ── Seamless news ticker ───────────────────────────────────────────────── */
@keyframes tickerInfinite {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* ── Border gradient spin (used on active timeline dots) ────────────────── */
@keyframes spinSlow {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ==========================================================================
   Scroll-Reveal  (Intersection Observer triggers)
   ========================================================================== */
.reveal {
  opacity: 0;
  transition: all 0.85s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
}
.reveal.fade-in-up    { transform: translateY(45px); }
.reveal.slide-in-left  { transform: translateX(-55px); }
.reveal.slide-in-right { transform: translateX(55px); }
.reveal.zoom-in        { transform: scale(0.9); }

.reveal.reveal-active {
  opacity: 1;
  transform: translate(0) scale(1) !important;
}

/* Stagger delays */
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.18s; }
.reveal-delay-3 { transition-delay: 0.28s; }
.reveal-delay-4 { transition-delay: 0.38s; }
.reveal-delay-5 { transition-delay: 0.48s; }


/* ==========================================================================
   .animated-card — Universal 3D Tilt + Parallax Depth System
   Applied to EVERY card element on the page.
   ========================================================================== */
.animated-card {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  /* Base transition — overridden per-frame by JS on mousemove */
  transition:
    transform  0.55s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1),
    border-color 0.3s ease;
  cursor: default;
}

/* ── Tri-colour gradient top bar slides in on hover ────────────────────── */
.animated-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--saffron-color), var(--primary-blue), var(--green-color));
  transform: translateX(-101%);
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
  z-index: 10;
}

/* ── Moving cursor-light highlight (injected via JS as .card-glow) ──────── */
.animated-card .card-glow {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  z-index: 5;
  opacity: 0;
}

/* ── One-shot shimmer layer ─────────────────────────────────────────────── */
.animated-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60px; height: 100%;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0)    100%
  );
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}

/* ── Hover state ────────────────────────────────────────────────────────── */
.animated-card:hover {
  border-color: rgba(13, 59, 102, 0.28) !important;
  box-shadow:
    0 22px 45px rgba(13, 59, 102, 0.18),
    0 6px  18px rgba(0, 0, 0, 0.10);
}
.animated-card:hover::before { transform: translateX(0); }
.animated-card:hover .card-glow { opacity: 1; }
.animated-card:hover::after {
  animation: cardShimmer 0.7s ease forwards;
}

/* ── Pointer-event isolation (prevents jitter on cursor tracking) ────────── */
.animated-card > * { pointer-events: none; }
.animated-card button,
.animated-card a,
.animated-card input,
.animated-card textarea,
.animated-card select,
.animated-card label,
.animated-card form    { pointer-events: auto; }


/* ==========================================================================
   Z-axis Parallax Depth — elements that "float" above the card surface
   ========================================================================== */

/* Tier 1 — medium lift (labels, roles, icons) */
.animated-card .committee-member-role,
.animated-card .speaker-type-tag,
.animated-card .sponsor-tier-price,
.animated-card .timeline-event-date,
.animated-card .hotel-dist,
.animated-card .focus-card > i,
.animated-card > i {
  transform: translateZ(20px);
  display: inline-block;
  transform-style: preserve-3d;
}

/* Tier 2 — high lift (primary names / headlines) */
.animated-card .speaker-name,
.animated-card .committee-member-name,
.animated-card .sponsor-tier-name,
.animated-card .timeline-event-name,
.animated-card h3,
.animated-card h4 {
  transform: translateZ(35px);
  display: block;
  transform-style: preserve-3d;
}

/* Tier 3 — max lift (accent icons inside focus / travel cards) */
.animated-card .travel-icon i,
.animated-card .focus-card i,
.animated-card .contact-icon-wrapper i {
  transform: translateZ(50px);
  display: inline-block;
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}
.animated-card:hover .travel-icon i,
.animated-card:hover .focus-card i,
.animated-card:hover .contact-icon-wrapper i {
  transform: translateZ(65px) scale(1.15);
}


/* ==========================================================================
   Per-card accent colours
   ========================================================================== */

/* Saffron (Venue / date info) */
.venue-card { border-bottom: 4px solid var(--saffron-color); }
.venue-card:hover { box-shadow: 0 18px 40px rgba(243,156,18,0.18) !important; }

/* Green (Timeline active, hotel) */
.date-card { border-bottom: 4px solid var(--green-color); }
.date-card:hover { box-shadow: 0 18px 40px rgba(39,174,96,0.18) !important; }

/* Speaker cards — deep blue left border */
.speaker-card { border-left: 4px solid var(--primary-blue); }
.speaker-card:hover { box-shadow: 0 18px 40px rgba(13,59,102,0.18) !important; }

/* Sponsorship tier border-top colours are set inline in style.css */


/* ==========================================================================
   Gallery image hover zoom (also an animated-card)
   ========================================================================== */
.gallery-zoom-container img {
  transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1);
}
.gallery-zoom-container:hover img {
  transform: scale(1.12);
}


/* ==========================================================================
   CTA Buttons
   ========================================================================== */
.btn-animate {
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all 0.3s ease;
}
.btn-animate::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 0;
  background-color: rgba(255,255,255,0.12);
  transition: height 0.3s ease;
  z-index: -1;
}
.btn-animate:hover::after { height: 100%; }
.btn-saffron-pulse { animation: pulseGlowSaffron 3s infinite; }
.btn-green-pulse   { animation: pulseGlowGreen   3s infinite; }


/* ==========================================================================
   Micro-interactions — nav / footer links
   ========================================================================== */
.animated-link {
  position: relative;
  display: inline-block;
}
.animated-link::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 2px;
  background-color: currentColor;
  transition: width 0.3s ease;
}
.animated-link:hover::after { width: 100%; }


/* ==========================================================================
   Timeline connector lines
   ========================================================================== */
.timeline-item { position: relative; }
.timeline-item::after {
  content: '';
  position: absolute;
  left: 20px; top: 0;
  height: 100%; width: 2px;
  background: var(--border-color);
  z-index: 1;
}
.timeline-item.active::after {
  background: linear-gradient(180deg, var(--green-color) 50%, var(--border-color));
}
.timeline-item.completed::after {
  background: var(--green-color);
}
.timeline-item:last-child::after { display: none; }