/* ============================================================
   SITE-WIDE ANIMATION SYSTEM — shared across all pages
   Loader, page transitions, side nav, vertical label,
   scroll-to-top, reveal/parallax helper states.
   Pairs with js/animations.js.
   ============================================================ */

/* ---------- Page loader (cold entrance) ---------- */
#page-loader {
  position: fixed; inset: 0; z-index: 300;
  background: #060606;
  display: flex; align-items: center; justify-content: center;
}
#page-loader[hidden] { display: none; }
.loader-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.loader-logo { width: 56px; height: auto; opacity: 0; transform: translateY(15px) scale(.97); }
.loader-line { width: 0; height: 1px; background: var(--gold); }

/* ---------- Page transition wipe (internal navigation) ---------- */
#page-transition {
  position: fixed; inset: 0; z-index: 310;
  visibility: hidden; pointer-events: none;
}
#page-transition.active { visibility: visible; }
.pt-panel { position: absolute; inset: 0; transform: translateX(-100%); }
.pt-panel--wine { background: var(--wine); }
.pt-panel--black { background: #060606; }

/* Prevents a flash of the new page's content before the incoming
   transition panels take over (class is set by a tiny blocking
   inline script in <head>, before first paint). */
html.pd-incoming body { opacity: 0; }
html.pd-incoming #page-transition { visibility: visible; }
html.pd-incoming .pt-panel { transform: translateX(0); }
html.pd-incoming #page-loader { display: none; }

/* No-JS / failure safety valve */
.no-js #page-loader,
.no-js #page-transition { display: none !important; }

/* ---------- Side progress navigation (desktop only) ---------- */
.side-nav {
  position: fixed; right: 28px; top: 50%; transform: translateY(-50%);
  z-index: 40;
  display: none;
  flex-direction: column; align-items: flex-end; gap: 18px;
}
@media (min-width: 1280px) { .side-nav { display: flex; } }
.side-nav-item {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Manrope', sans-serif;
  color: var(--ink-muted);
  transition: color .3s ease, transform .3s ease;
}
.side-nav-item:hover { color: var(--gold-light); transform: translateX(-6px); }
.side-nav-num { font-size: 10px; letter-spacing: .1em; }
.side-nav-label {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  max-width: 0; overflow: hidden; white-space: nowrap;
  opacity: 0; transition: max-width .35s ease, opacity .3s ease;
}
.side-nav-item:hover .side-nav-label,
.side-nav-item.active .side-nav-label { max-width: 140px; opacity: 1; }
.side-nav-dash { width: 14px; height: 1px; background: currentColor; opacity: .5; transition: width .3s ease, background .3s ease; }
.side-nav-item.active { color: var(--gold); }
.side-nav-item.active .side-nav-dash { width: 22px; background: var(--gold); opacity: 1; }

/* ---------- Vertical side label ---------- */
.side-label {
  position: fixed; left: 22px; bottom: 32px; z-index: 35;
  display: none;
  writing-mode: vertical-rl;
  font-family: 'Manrope', sans-serif;
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink-muted);
}
@media (min-width: 1280px) { .side-label { display: flex; align-items: center; gap: 12px; } }
.side-label-line { width: 1px; height: 34px; background: linear-gradient(180deg, var(--gold), transparent); }

/* ---------- Scroll to top ---------- */
.scroll-top-btn {
  position: fixed; right: 20px; bottom: 20px; z-index: 45;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(9,9,9,.65);
  border: 1px solid rgba(201,164,92,.3);
  backdrop-filter: blur(8px);
  color: var(--gold-light);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.85);
  transition: border-color .3s ease, background .3s ease;
}
.scroll-top-btn.visible { opacity: 1; visibility: visible; }
.scroll-top-btn:hover { border-color: var(--gold); background: rgba(201,164,92,.1); }
.scroll-top-btn svg { width: 15px; height: 15px; stroke-width: 1.4; transition: transform .25s ease; }
.scroll-top-btn:hover svg { transform: translateY(-2px); }

/* ---------- Mobile menu (animated variant) ---------- */
#mobile-menu { will-change: transform, opacity; }
#mobile-menu .mobile-link,
#mobile-menu .btn-gold-outline { opacity: 0; }

/* ---------- Magnetic buttons ---------- */
[data-magnetic] { display: inline-flex; will-change: transform; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #page-loader, #page-transition { transition: none !important; }
  html.pd-incoming body { opacity: 1; }
  .side-nav-item, .scroll-top-btn { transition: none !important; }
}