/* ============================================
   THE CLOSING MOVEMENT — Stylesheet
   ============================================ */

/* === FONTS === */
@font-face {
  font-family: 'EpicPro';
  src: url('fonts/EpicPro.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Grift';
  src: url('fonts/Grift-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Grift';
  src: url('fonts/Grift-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Grift';
  src: url('fonts/Grift-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Grift';
  src: url('fonts/Grift-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Grift';
  src: url('fonts/Grift-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'BlauerNue';
  src: url('fonts/BlauerNue-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'BlauerNue';
  src: url('fonts/BlauerNue-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'BlauerNue';
  src: url('fonts/BlauerNue-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'BlauerNue';
  src: url('fonts/BlauerNue-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'BlauerNue';
  src: url('fonts/BlauerNue-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* === BASE === */
html { scroll-behavior: smooth; }

/* === LOADER === */
html.is-loading { overflow: hidden; }

#loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: transparent;
}

#loader-logo {
  position: fixed;
  will-change: top, left, width, height;
}
#loader-logo svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* SVG draw animation — background shape */
#logo-bg {
  opacity: 0;
  transform-origin: center;
}
#logo-bg.animate {
  animation: bg-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes bg-pop {
  0% { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}

/* SVG draw animation — letter paths */
.letter-path {
  fill: transparent;
  stroke: white;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill 0.4s ease;
}
.letter-path.fill-in {
  fill: white;
}

/* Glow ring */
#loader-glow {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 180px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}
#loader-glow.animate {
  animation: glow-burst 0.8s ease-out forwards;
}
@keyframes glow-burst {
  0% {
    opacity: 0;
    box-shadow: 0 0 0 0 rgba(115, 3, 5, 0), 0 0 0 0 rgba(155, 27, 29, 0);
  }
  30% {
    opacity: 1;
    box-shadow: 0 0 40px 10px rgba(115, 3, 5, 0.5), 0 0 80px 30px rgba(155, 27, 29, 0.2);
  }
  100% {
    opacity: 0;
    box-shadow: 0 0 60px 40px rgba(115, 3, 5, 0), 0 0 120px 60px rgba(155, 27, 29, 0);
  }
}

/* Particles */
.particle {
  position: fixed;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #9B1B1D;
  pointer-events: none;
  opacity: 0;
}
.particle.animate {
  animation: particle-fly 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes particle-fly {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: var(--particle-end) scale(0); }
}

/* Loader background fade */
#loader-bg {
  position: fixed;
  inset: 0;
  background: #0A0101;
  transition: opacity 0.5s ease;
}
#loader.phase-done #loader-bg { opacity: 0; }
#loader.phase-done { pointer-events: none; }

/* === NAVBAR === */
#navbar {
  opacity: 0;
  pointer-events: none;
}
#navbar.is-visible {
  pointer-events: auto;
  animation: navbar-reveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes navbar-reveal {
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

#header-logo-svg { opacity: 0; }
#header-logo-svg.is-visible { opacity: 1; }

/* Active nav link */
.nav-active {
  color: white !important;
  position: relative;
}
.nav-active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 8px;
  right: 8px;
  height: 2px;
  background: #730305;
  border-radius: 1px;
}

/* === HERO === */
#hero-canvas canvas {
  display: block;
}

/* Hero content fade-in after loader completes */
#hero .hero-content {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
#hero .hero-content.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  #logo-bg.animate { animation: none; opacity: 1; }
  .letter-path { fill: white; stroke: none; }
  .particle { display: none; }
  #loader-glow { display: none; }
  #navbar.is-visible { animation: none; }
  #loader-bg { transition: none; }
}