/* ============================================================
   VEENLAM LOGISTICS — World-Class Animation Layer
   ============================================================ */

/* ── Scroll Progress Bar ── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #E87820, #F59A40);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 9998;
  pointer-events: none;
  border-radius: 0 2px 2px 0;
}

/* ── Page Loader ── */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #0F2137;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 32px;
}
.loader-logo {
  opacity: 0;
  transform: scale(0.82) translateY(18px);
  animation: loaderIn 1s 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.loader-logo img { height: 64px; width: auto; }
.loader-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  opacity: 0;
  animation: loaderIn 0.5s 0.9s ease forwards;
}
.loader-progress-wrap {
  width: 200px;
  height: 1px;
  background: rgba(255,255,255,0.08);
  border-radius: 1px;
  overflow: hidden;
  opacity: 0;
  animation: loaderIn 0.4s 0.85s ease forwards;
}
.loader-progress-fill {
  height: 100%;
  width: 0;
  background: #E87820;
  border-radius: 1px;
  animation: fillBar 1s 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes loaderIn {
  to { opacity: 1; transform: none; }
}
@keyframes fillBar {
  to { width: 100%; }
}
#page-loader.loader-exit {
  animation: loaderExit 0.65s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
@keyframes loaderExit {
  to { transform: translateY(-100%); opacity: 0.6; }
}

/* ── Hero Canvas (Particle Network) ── */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* ── Text Scramble ── */
.hero-scramble { opacity: 0; }
.scramble-rand { color: rgba(232,120,32,0.65); }

/* ── 3D Card Tilt ── */
[data-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
  position: relative;
}
.tilt-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  transition: opacity 0.25s ease;
}

/* ── Magnetic Button Wrapper ── */
.btn-magnetic {
  display: inline-block;
  will-change: transform;
}

/* ── CTA Glow Pulse ── */
.btn-glow {
  animation: ctaGlow 3.2s ease-in-out infinite;
}
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,120,32,0); }
  50%       { box-shadow: 0 0 32px 8px rgba(232,120,32,0.22); }
}

/* ── Cursor Glow ── */
.cursor-glow {
  position: fixed;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,120,32,0.055) 0%, transparent 65%);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  will-change: left, top;
  mix-blend-mode: screen;
  transition: background 0.5s ease;
}
.cursor-glow.dark-section {
  background: radial-gradient(circle, rgba(232,120,32,0.10) 0%, transparent 65%);
}

/* ── Stats Blur-In ── */
@keyframes statBlurIn {
  from { filter: blur(14px); opacity: 0; transform: scale(0.8) translateY(12px); }
  to   { filter: blur(0);    opacity: 1; transform: scale(1) translateY(0); }
}
.stat-item.stat-in .stat-number {
  animation: statBlurIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.stat-item.stat-in:nth-child(2) .stat-number { animation-delay: 0.1s; }
.stat-item.stat-in:nth-child(3) .stat-number { animation-delay: 0.2s; }
.stat-item.stat-in:nth-child(4) .stat-number { animation-delay: 0.3s; }

/* ── Corridor SVG Routes ── */
.corridor-route {
  stroke-dashoffset: 9999;
}
@keyframes destPing {
  0%  { r: 5; opacity: 1; }
  60% { r: 9; opacity: 0.35; }
  100%{ r: 5; opacity: 1; }
}
.dest-dot.active { animation: destPing 2s ease-in-out infinite; }

/* ── Scrolling Ticker ── */
.ticker-outer { overflow: hidden; }
.ticker-track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: tickerRoll 32s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
@keyframes tickerRoll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 28px;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-light, #718096);
}
.ticker-sep {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #E87820;
  flex-shrink: 0;
}

/* ── Scroll Reveal (enhanced) ── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.revealed { opacity: 1; transform: none; }
.reveal.revealed.reveal-delay-1 { transition-delay: 0.12s; }
.reveal.revealed.reveal-delay-2 { transition-delay: 0.24s; }
.reveal.revealed.reveal-delay-3 { transition-delay: 0.38s; }
.reveal.revealed.reveal-delay-4 { transition-delay: 0.52s; }

/* ── Scroll-down arrow bounce ── */
.hero-scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: hintBounce 2.2s ease-in-out infinite;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s;
}
.hero-scroll-hint:hover { opacity: 1; }
.hero-scroll-hint span {
  display: block;
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.6));
}
.hero-scroll-hint svg { color: white; }
@keyframes hintBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* ── Floating hero badge ── */
.hero-badge {
  position: absolute;
  bottom: 80px;
  right: 5%;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 16px 22px;
  z-index: 4;
  animation: floatBadge 4s ease-in-out infinite;
  display: none;
}
@media (min-width: 1100px) { .hero-badge { display: block; } }
@keyframes floatBadge {
  0%, 100% { transform: translateY(0px) rotate(-1deg); }
  50%       { transform: translateY(-10px) rotate(0.5deg); }
}
.hero-badge-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 4px;
}
.hero-badge-value {
  font-size: 22px;
  font-weight: 800;
  color: #E87820;
  line-height: 1;
}
.hero-badge-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  margin-top: 2px;
}

/* ── Reduce motion overrides ── */
@media (prefers-reduced-motion: reduce) {
  #page-loader { animation: none !important; }
  #page-loader.loader-exit { display: none; }
  .loader-logo, .loader-label, .loader-progress-wrap { animation: none !important; opacity:1; transform:none; }
  .loader-progress-fill { animation: none !important; width:100%; }
  .ticker-track { animation: none; }
  .reveal { opacity:1; transform:none; transition:none; }
  [data-tilt] { transform:none !important; }
  .btn-magnetic { transform:none !important; }
  .btn-glow { animation: none; }
  .hero-scroll-hint { animation: none; }
  .hero-badge { animation: none; }
  .stat-item.stat-in .stat-number { animation: none; }
  .cursor-glow { display: none; }
}