/* ============================================
   Still Sonic Media — Shared stylesheet
   Loaded on every page via <link rel="stylesheet" href="site.css">

   What this file controls:
   · Custom gold cursor (desktop only — hidden on touch screens)
   · Black curtain animation between page loads
   · Active nav link highlight (gold colour on current page)
   · Faint film-grain texture over the whole site
   · Scroll-triggered fade-in animations (powered by GSAP)
   · Mobile menu fix (see bottom of file)

   To change the gold accent colour, search for #c8a96e and replace it.
   ============================================ */

/* === CUSTOM CURSOR (desktop/mouse only) === */
@media (pointer: fine) {
  * { cursor: none !important; }

  .cursor-dot {
    width: 7px;
    height: 7px;
    background: #c8a96e;
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    will-change: transform;
  }

  .cursor-ring {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(200, 169, 110, 0.55);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    will-change: transform;
  }
}

/* === PAGE TRANSITION OVERLAY === */
.ssm-overlay {
  position: fixed;
  inset: 0;
  background: #0a0a0a;
  z-index: 99990;
  pointer-events: none;
  transform: scaleY(0);
  transform-origin: top center;
  will-change: transform;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ssm-logo {
  font-family: 'Redaction35', Georgia, serif;
  font-size: 3.5rem;
  font-weight: 700;
  color: #c8a96e;
  letter-spacing: 0.08em;
  opacity: 0;
  will-change: opacity;
  pointer-events: none;
  user-select: none;
}

/* === ACTIVE NAV STATE === */
.nav-active {
  color: #c8a96e !important;
  opacity: 1 !important;
}

/* === BACKGROUND === */
body {
  background-color: #0e0e0e !important;
}

/* === ANCHOR SCROLL OFFSET (accounts for fixed nav) === */
html {
  scroll-padding-top: 80px;
}

/* === GRAIN / NOISE TEXTURE === */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99989;
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* === SCROLL ANIMATION INITIAL STATES ===
   Set via GSAP immediately on load — these rules
   are just a safety net so nothing flickers if
   GSAP hasn't parsed yet. */
.gsap-fade-up {
  opacity: 0;
  transform: translateY(28px);
}

/* === MOBILE MENU FIX (all pages) ===
   backdrop-filter on the <nav> turns it into a "containing
   block", which traps the fixed-position mobile menu overlay
   inside the nav bar — so the menu opens invisibly. Disabling
   the blur on small screens frees the overlay to cover the
   full viewport. Same fix book.html always carried, now
   applied site-wide. The z-index rules keep the hamburger
   button tappable above the open overlay so it can close it. */
@media (max-width: 768px) {
  nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .nav-hamburger {
    position: relative;
    z-index: 2001;
  }
  .nav-links.open {
    z-index: 2000 !important;
  }
}