/* =====================================================================
   NATOKGHOR — THE HOUSE CURTAIN
   =====================================================================
   Loaded on every public page, not just the home page: a visitor's first
   page is just as often a shared /t/ ticket link, a review or a group
   profile as it is the front door, and the welcome belongs wherever they
   walk in.

   This file only says what the curtain LOOKS like and how it moves.
   js/curtain.js decides whether it plays at all (once per session) and
   injects the markup — so there is one copy of the show, not 28.

   The panels are deliberately pointer-events:none. The curtain is a
   flourish, never a door: the page underneath is live and clickable from
   the first frame, and a tap anywhere cuts the curtain short.
   ===================================================================== */

#curtain{
  position:fixed;inset:0;z-index:9999;display:flex;
  overflow:hidden;        /* panels total 101% — clip, never a scrollbar */
  pointer-events:none;
  --hold:1s;              /* the beat before the curtain parts */
  --part:2.3s;            /* how long the parting itself takes */
  --in:1s;                /* the title fading up */
  --in-delay:.15s;
}
/* A deep link is someone arriving mid-conversation — a ticket link off a
   poster, a review a friend sent. Same curtain, briskly: they came with a
   destination already in mind. */
#curtain.quick{--hold:.6s;--part:1.4s;--in:.3s;--in-delay:0s;}

#curtain .panel{
  width:50.5%;height:100%;position:relative;   /* slight overlap removes the centre seam */
  background:
    repeating-linear-gradient(90deg,#5C0F0F 0 18px,#7A1414 18px 30px,#4A0C0C 30px 44px),
    linear-gradient(90deg,#3A0808,#7A1414);
  box-shadow:inset -30px 0 60px rgba(0,0,0,.5);
  will-change:transform;backface-visibility:hidden;transform:translateZ(0);
}
#curtain .panel.right{transform:scaleX(-1);}
#curtain .panel::after{ /* gold fringe along the bottom */
  content:"";position:absolute;left:0;right:0;bottom:0;height:14px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 12px,var(--gold-light) 12px 24px);
}
#curtain .rod{
  position:absolute;top:0;left:0;right:0;height:10px;z-index:2;
  background:linear-gradient(180deg,#E8B84B,#9A7016);box-shadow:0 2px 8px rgba(0,0,0,.4);
  will-change:transform;backface-visibility:hidden;
}
#curtain .title{
  position:absolute;top:42%;left:0;right:0;text-align:center;z-index:3;
  font-family:var(--disp);font-size:clamp(2.2rem,7vw,4rem);font-weight:700;
  color:var(--gold-light);letter-spacing:.06em;text-shadow:0 2px 30px rgba(232,184,75,.5);
  opacity:0;animation:curtain-title var(--in) ease var(--in-delay) forwards;
  will-change:transform,opacity;
}

/* ---- the reveal (GPU-composited, easeInOutQuint-style curve) ---- */
#curtain.go .panel.left {animation:part-left  var(--part) cubic-bezier(.83,0,.17,1) var(--hold) forwards;}
#curtain.go .panel.right{animation:part-right var(--part) cubic-bezier(.83,0,.17,1) var(--hold) forwards;}
#curtain.go .rod        {animation:rod-up     var(--part) cubic-bezier(.83,0,.17,1) var(--hold) forwards;}
#curtain.go .title      {animation:curtain-title var(--in) ease var(--in-delay) forwards,
                                   curtain-title-out .5s ease var(--hold) forwards;}

/* cut short — someone tapped, scrolled or typed, so get out of their way */
#curtain.skip{animation:curtain-skip .28s ease forwards;}

@keyframes curtain-title{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes curtain-title-out{to{opacity:0;}}
@keyframes part-left{to{transform:translateX(-100%);}}
@keyframes part-right{to{transform:scaleX(-1) translateX(-100%);}}
@keyframes rod-up{to{transform:translateY(-100%);}}
@keyframes curtain-skip{to{opacity:0;}}

/* js/curtain.js already bails out on this, but a visitor who asks for less
   motion should not get a curtain even if the script is served stale. */
@media (prefers-reduced-motion:reduce){
  #curtain{display:none!important;}
}