/* ═══════════════════════════════════════════
   SERENITY — Additional Styles
   Animations & Visual Enhancements
═══════════════════════════════════════════ */

/* ─── LOADER ────────────────────────────────── */
.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg-deeper);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.7s ease, visibility 0.7s ease, transform 0.7s ease;
  pointer-events: all;
  will-change: opacity, visibility;
}

.page-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.05);
}

.loader-content {
  text-align: center;
}

.loader-logo {
  font-family: var(--font-serif);
  font-size: 2.8rem;
  color: var(--color-gold);
  letter-spacing: 0.15em;
  animation: pulseGold 1.5s ease infinite;
}

.loader-sub {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--color-amber);
  opacity: 0.7;
  margin-top: 0.5rem;
}

.loader-bar {
  width: 0%;
  height: 1px;
  background: var(--color-gold);
  margin-top: 1.5rem;
  animation: loadBar 1.8s ease forwards;
}

@keyframes pulseGold {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes loadBar {
  to { width: 100%; }
}

/* ─── MOBILE OVERLAY ───────────────────────── */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 104;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.nav-overlay.visible {
  opacity: 1;
  visibility: visible;
}

/* ─── ACTIVE NAV ───────────────────────────── */
.nav-link.active {
  color: var(--color-gold) !important;
  opacity: 1 !important;
}

/* ─── SMOOTH IMAGE LOAD ────────────────────── */
img {
  opacity: 0;
  transition: opacity 0.5s ease;
}

img.loaded { opacity: 1; }

/* ─── CURSOR GLOW (subtle, optional) ──────── */
@media (pointer: fine) {
  .btn {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}

/* ─── HERO VIDEO FALLBACK ──────────────────── */
.hero--loaded .hero__content { animation: heroReveal 1.2s ease forwards; }

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

/* ─── SECTION ENTRY ────────────────────────── */
.section-in .section-label,
.section-in .section-title,
.section-in .section-divider {
  animation: fadeSlide 0.7s ease forwards;
}

@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}