/* ==========================================================================
   D-ARTIST — Strict 3-Position Sliding Curtain & Loading System
   Theme: Strict Black, White & Grayscale Editorial Gallery
   Zero Glow. Zero Neon. Zero Spinners. Pure Architectural Motion.
   ========================================================================== */

/* Dark root background prevents any canvas flash */
html,
body {
  background-color: #000000;
}

/* Prevent accidental horizontal overflow during vertical translation */
body.dartist-transition-locked {
  overflow-x: clip !important;
}

/* ==========================================================================
   Physical 3-State Fullscreen Transition Curtain
   State A: Offscreen Bottom (translate3d(0, 100%, 0))
   State B: Fullscreen (translate3d(0, 0, 0))
   State C: Offscreen Top (translate3d(0, -100%, 0))
   ========================================================================== */
#dartist-curtain {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: #000000;
  z-index: 2147483647; /* Maximum possible 32-bit integer z-index */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  will-change: transform;
  transform: translate3d(0, 100%, 0);
  visibility: hidden;
  pointer-events: none;
}

/* STATE A: Offscreen Bottom (Resting / Primed for link click) */
#dartist-curtain.state-a {
  transform: translate3d(0, 100%, 0) !important;
  transition: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* MOTION 1: State A -> State B (Rising from bottom to cover page on link click) */
#dartist-curtain.state-enter {
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) !important;
  transition: transform 0.52s cubic-bezier(0.76, 0, 0.24, 1) !important;
}

/* STATE B: Fullscreen Hold (While destination page & real API data load) */
#dartist-curtain.state-b {
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) !important;
  transition: none !important;
}

/* MOTION 2: State B -> State C (Sliding upward to top when real data is ready) */
#dartist-curtain.state-exit {
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0, -100%, 0) !important;
  transition: transform 0.72s cubic-bezier(0.76, 0, 0.24, 1) !important;
}

/* STATE C: Offscreen Top */
#dartist-curtain.state-c {
  transform: translate3d(0, -100%, 0) !important;
  transition: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================================
   Monochrome Architectural Branding & Archival Scan Indicator
   ========================================================================== */
.dartist-curtain-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  max-width: 340px;
}

.dartist-curtain-brand {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: #ffffff;
  margin-left: 0.38em;
  line-height: 1;
}

.dartist-curtain-sub {
  font-family: 'JetBrains Mono', monospace, sans-serif;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  margin-top: 10px;
  margin-left: 0.28em;
  line-height: 1;
}

.dartist-curtain-track {
  width: 96px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.12);
  margin: 22px auto 14px;
  position: relative;
  overflow: hidden;
}

.dartist-curtain-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 35%;
  height: 100%;
  background-color: #ffffff;
  animation: dartistScanPulse 1.25s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes dartistScanPulse {
  0% {
    transform: translateX(-120%);
  }
  50% {
    transform: translateX(110%);
  }
  100% {
    transform: translateX(320%);
  }
}

.dartist-curtain-label {
  font-family: 'JetBrains Mono', monospace, sans-serif;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  margin-left: 0.32em;
  line-height: 1;
}

/* Backward compatibility aliases if any old markup exists */
.dartist-transition-overlay {
  display: none !important;
}

/* ==========================================================================
   Accessibility: prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #dartist-curtain {
    transition: opacity 0.2s ease-out !important;
    transform: none !important;
  }

  #dartist-curtain.state-a,
  #dartist-curtain.state-c {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
  }

  #dartist-curtain.state-enter,
  #dartist-curtain.state-b {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  #dartist-curtain.state-exit {
    opacity: 0 !important;
    visibility: visible !important;
    transform: none !important;
    transition: opacity 0.25s ease-out !important;
  }

  .dartist-curtain-bar {
    animation: none !important;
    width: 100% !important;
    opacity: 0.4 !important;
  }
}