/* ================================================================
   VOPAK — ANIMATION STYLES (lightweight, no GSAP)
   All transitions are CSS-driven; JS only toggles classes.
================================================================ */

/* ── Custom Cursor (desktop only) ── */
.vp-cursor-dot,
.vp-cursor-ring {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  top: 0; left: 0;
  will-change: transform;
}
.vp-cursor-dot {
  width: 7px;
  height: 7px;
  background: #d4af37;
  transition: width .2s, height .2s, background .2s;
}
.vp-cursor-ring {
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(212,175,55,.55);
  transition: width .3s cubic-bezier(.34,1.56,.64,1),
              height .3s cubic-bezier(.34,1.56,.64,1),
              border-color .25s;
}
.vp-cursor-dot.active  { width: 10px; height: 10px; background: #fff; }
.vp-cursor-ring.active { width: 54px; height: 54px; border-color: rgba(212,175,55,.85); }
.vp-cursor-dot.clicking { opacity: .6; }

@media (pointer: fine) {
  body.vp-custom-cursor * { cursor: none !important; }
}
@media (pointer: coarse) {
  .vp-cursor-dot, .vp-cursor-ring { display: none; }
}

/* ── Scroll Progress Bar ── */
.vp-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #d4af37, #fffbe6);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 99997;
  pointer-events: none;
  will-change: transform;
}

/* ── Page Entrance / Exit Overlay ── */
.vp-page-overlay {
  position: fixed;
  inset: 0;
  background: #020810;
  z-index: 999998;
  pointer-events: none;
  /* Entrance: starts fully covering, transitions out */
  transform-origin: top;
  transform: scaleY(1);
  transition: transform .9s cubic-bezier(.77,0,.18,1);
}
.vp-page-overlay.vp-overlay-out {
  transform: scaleY(0);
}
/* Exit overlay: starts hidden, transitions in */
.vp-page-overlay.vp-overlay-exit {
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform .55s cubic-bezier(.77,0,.18,1);
}
.vp-page-overlay.vp-overlay-exit.vp-overlay-in {
  transform: scaleY(1);
}

/* ── Scroll Reveal System ── */
.vp-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .65s cubic-bezier(.4,0,.2,1),
              transform .65s cubic-bezier(.4,0,.2,1);
  will-change: opacity, transform;
}
.vp-reveal.vp-reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Location rows slide from side */
.location-row.vp-reveal        { transform: translateY(20px); }
.location-row.vp-reveal-visible { transform: translateY(0); }

/* Sidebar cards slide from right */
.sidebar-card.vp-reveal         { transform: translateX(40px); }
.sidebar-card.vp-reveal-visible  { transform: translateX(0); }

/* Accordion items slide from left */
.accordion-item.vp-reveal        { transform: translateX(-30px); }
.accordion-item.vp-reveal-visible { transform: translateX(0); }

/* CTA banner scale up */
.cta-banner.vp-reveal        { transform: scale(.96) translateY(20px); }
.cta-banner.vp-reveal-visible { transform: scale(1) translateY(0); }

/* Cert items pop in */
.cert-item.vp-reveal        { transform: scale(.88) translateY(16px); }
.cert-item.vp-reveal-visible { transform: scale(1) translateY(0); }

/* Cards tilt in slightly */
.team-card.vp-reveal,
.terminal-card.vp-reveal { transform: translateY(40px); }
.team-card.vp-reveal-visible,
.terminal-card.vp-reveal-visible { transform: translateY(0); }

/* ── Nav hide/show ── */
.nav {
  transition: transform .4s cubic-bezier(.4,0,.2,1), background .3s;
  will-change: transform;
}
.nav.nav-hidden { transform: translateY(-100%); }

/* ── Topbar + Nav fade in on load ── */
.topbar,
.nav {
  animation: vp-fade-down .6s cubic-bezier(.4,0,.2,1) both;
}
.topbar { animation-delay: .05s; }
.nav    { animation-delay: .12s; }

@keyframes vp-fade-down {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero content fade-in on load (index.html slideshow) ── */
.slide-title,
.slide-label,
.slide-desc,
.slide-actions,
.slide-pills,
.slide-visual {
  /* These have their own CSS transitions via .slide.active — no extra needed */
}

/* ── Hover effects (CSS only, no JS needed) ── */
.terminal-card {
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.terminal-card:hover {
  border-color: rgba(212,175,55,.4);
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
}

.team-card {
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.team-card:hover {
  border-color: rgba(212,175,55,.4);
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
}

.sidebar-card {
  transition: border-color .3s, transform .3s;
}
.sidebar-card:hover {
  border-color: rgba(212,175,55,.4);
  transform: translateY(-2px);
}

.value-card {
  transition: background .3s, border-color .3s, transform .3s;
}
.value-card:hover {
  transform: translateY(-3px);
  border-color: rgba(212,175,55,.3);
}

/* Disable hover transforms on touch devices */
@media (pointer: coarse) {
  .terminal-card:hover,
  .team-card:hover,
  .sidebar-card:hover,
  .value-card:hover { transform: none; }
}

/* ── Accordion hover sweep ── */
.accordion-trigger { position: relative; overflow: hidden; }
.accordion-trigger::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.04), transparent);
  transform: translateX(-100%);
  transition: transform .5s ease;
}
.accordion-trigger:hover::after { transform: translateX(100%); }

/* ── Fade-up (keeps existing main.js .visible class working) ── */
.fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .65s ease, transform .65s ease;
}
.fade-up.visible,
.fade-up.vp-reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Region item bottom gold line on hover ── */
.region-item {
  position: relative;
  overflow: hidden;
}
.region-item::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
  transform: scaleX(0);
  transition: transform .35s ease;
}
.region-item:hover::after { transform: scaleX(1); }