/* Promo video — the demo reel frame and its curtain.
   Notes: docs/component-promo-video-notes.md
   .promo-video-wrap is the seam with components/video-player.js. */

.promo-video{background:#faf9f6;padding:5px 0}
.promo-video-wrap{position:relative;max-width:1600px;margin:0 auto;aspect-ratio:16/9;overflow:hidden;background:#000}
.promo-video-wrap video{width:100%;height:100%;display:block;object-fit:cover}

/* ── Curtain ── */
.video-poster{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;border:0;cursor:pointer;text-align:left;padding:0;transition:opacity .5s ease;background:
  linear-gradient(90deg,rgba(10,10,10,.78) 0%,rgba(10,10,10,.5) 26%,rgba(10,10,10,.18) 42%,rgba(10,10,10,0) 56%)}
/* State; the player adds and removes it. */
.video-poster.hidden{opacity:0;pointer-events:none}
.video-poster-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;max-width:1196px;margin:0 auto;padding:0 3rem}
/* Slide-in. */
.video-poster-content.reveal{opacity:0;transform:translateX(-60px);transition:opacity 1.3s ease .15s,transform 1.3s cubic-bezier(.22,1,.36,1) .15s}
.video-poster-content.reveal.visible{opacity:1;transform:translateX(0)}

.video-curtain-label{font-family:var(--body);font-size:.875rem;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:1.5rem;text-shadow:0 0 12px rgba(0,0,0,.9),0 0 24px rgba(230,173,31,.25)}
/* Band scale. */
.video-curtain-line{font-family:var(--display);font-size:clamp(2.4rem,6.5vw,6rem);font-weight:500;letter-spacing:.05em;text-transform:uppercase;line-height:1.05;color:#fff;text-shadow:0 0 40px rgba(0,0,0,.95),0 0 80px rgba(0,0,0,.8),0 2px 4px rgba(0,0,0,.9),0 4px 60px rgba(0,0,0,.6)}
.video-curtain-line .gold{color:var(--gold)}

/* ── Play chip ── Scoped to .video-poster, its actual parent. */
.video-poster .hero-cta{position:absolute;left:0;right:0;margin:0 auto;width:max-content;bottom:3.2rem}

@media (max-width:768px){
  .promo-video{padding:0}
  
  .video-poster-content{padding:0 1.5rem 4rem}
  .video-curtain-line{font-size:clamp(1.5rem,6.5vw,2.2rem)}
  .video-curtain-label{font-size:.72rem;letter-spacing:.2em;margin-bottom:1rem}
  .video-poster .hero-cta{bottom:1.4rem;padding:.9rem 2.6rem}
}