/* Site-wide layout + animation styles, shared across all pages */

html, body {
  margin: 0;
  padding: 0;
  background: var(--bone-100);
  color: var(--noir-900);
  font-family: var(--font-sans);
  overflow-x: hidden;
}
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
button { font-family: var(--font-sans); }

/* Persistent shooting-stars canvas — floats over every page in true filament
   orange. No blend mode (it was washing the stars white on the bone field).
   The canvas is mostly transparent so only the drawn stars/comets ever cover
   anything beneath. */
#stars-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
}

#root { position: relative; z-index: 1; }

/* Hide React root until mounted */
#root:empty::before {
  content: "";
  display: block;
  height: 100vh;
  background: var(--bone-100);
}

/* Reveal-on-scroll utility */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Filament warm-up */
@keyframes filament-warmup {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Subtle floating */
@keyframes lamp-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
/* Slow rotate */
@keyframes slow-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Marquee */
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Equalizer */
@keyframes eq-pulse {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1); }
}
/* Pulse */
@keyframes record-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,172,65,0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(255,172,65,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,172,65,0); }
}
@keyframes quote-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes quote-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

::selection { background: var(--ambre-300); color: var(--noir-900); }

/* Nav dropdown */
.nws-nav-item { position: relative; }
.nws-nav-dropdown {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 320px;
  background: rgba(244, 241, 234, 0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--bone-300);
  border-radius: 16px;
  padding: 12px;
  margin-top: 12px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 180ms;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nws-nav-item:hover .nws-nav-dropdown,
.nws-nav-item:focus-within .nws-nav-dropdown,
.nws-nav-item.open .nws-nav-dropdown {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
.nws-nav-dropdown a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--noir-900);
  transition: background 140ms var(--ease-out);
}
.nws-nav-dropdown a:hover {
  background: rgba(255, 172, 65, 0.12);
}
.nws-nav-dropdown-tag {
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambre-700);
}
.nws-nav-dropdown-title {
  font: 500 14px/1.3 var(--font-sans);
  letter-spacing: -0.01em;
}
.nws-nav-dropdown-price {
  font: 400 12px/1 var(--font-sans);
  color: var(--bone-500);
  margin-top: 2px;
}
.nws-nav-dropdown-foot {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--bone-300);
}
.nws-nav-dropdown-foot a {
  font: 500 12px/1 var(--font-sans);
  letter-spacing: 0.04em;
  color: var(--ambre-700);
}
.nws-nav-dropdown-foot a:hover { background: transparent; }

/* Desktop / mobile show-hide */
@media (min-width: 880px) {
  .nws-nav-desktop { display: flex !important; }
  .nws-cta-desktop { display: inline-block !important; }
  .nws-burger { display: none !important; }
}