/* ============================================================
   BLACK STALLION STUDIOS — page-transitions.css
   Cinematic curtain wipe on every page enter / exit
   ============================================================ */

/* The overlay sits above everything */
#page-curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;

  /* Two-layer curtain: solid base + grain texture */
  background-color: var(--black, #0a0806);
  overflow: hidden;
}

/* Grain layer — reuses the same film-grain aesthetic */
#page-curtain::after {
  content: '';
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
  opacity: 0.18;
  animation: grain-shift 0.5s steps(2) infinite;
}

@keyframes grain-shift {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-2%, 2%);
  }

  50% {
    transform: translate(3%, -1%);
  }

  75% {
    transform: translate(-1%, 3%);
  }

  100% {
    transform: translate(2%, -2%);
  }
}

/* Amber letterbox lines — top & bottom */
#page-curtain::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      var(--amber, #9c5a14) 0px,
      var(--amber, #9c5a14) 2px,
      transparent 2px,
      transparent calc(100% - 2px),
      var(--amber, #9c5a14) calc(100% - 2px),
      var(--amber, #9c5a14) 100%);
  opacity: 0.6;
}

/* ---- ENTER animation (page load: curtain slides UP and away) ---- */
#page-curtain.is-enter {
  animation: curtain-reveal 1.1s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}

@keyframes curtain-reveal {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  85% {
    transform: translateY(-100%);
    opacity: 1;
  }

  100% {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
  }
}

/* ---- EXIT animation (navigating away: curtain slides DOWN over page) ---- */
#page-curtain.is-exit {
  pointer-events: all;
  animation: curtain-cover 1.1s var(--ease-in-out, cubic-bezier(0.65, 0, 0.35, 1)) forwards;
}

@keyframes curtain-cover {
  0% {
    transform: translateY(100%);
    opacity: 1;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Wordmark that fades in during the curtain moment */
#page-curtain .curtain-wordmark {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  animation: wordmark-pulse 1s ease forwards;
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  color: var(--amber-light, #dd9e5b);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: clamp(0.65rem, 1.5vw, 0.85rem);
  pointer-events: none;
  user-select: none;
}

#page-curtain .curtain-logo-wrap {
  width: clamp(36px, 5vw, 52px);
  height: clamp(36px, 5vw, 52px);
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  opacity: 0.9;
  filter: drop-shadow(0 0 12px rgba(221, 158, 91, 0.45));
}

#page-curtain .curtain-logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes wordmark-pulse {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }

  30% {
    opacity: 1;
    transform: translateY(0);
  }

  70% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* Thin amber progress line at the very bottom of the curtain */
#page-curtain .curtain-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(to right, var(--amber, #9c5a14), var(--amber-light, #dd9e5b));
  animation: progress-sweep 1.0s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}

@keyframes progress-sweep {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}