/* ============================================================
   showreel.css — the two stacked reels on showreel.html.
   Layout (hero panel + scrolling content) comes from home.css.
   ============================================================ */

/* The hero button for the page you're on: greyed out, not clickable. */
.btn-soft.is-active,
.btn-soft.is-active:hover { background:var(--soft); color:#B4B8BF; cursor:default; pointer-events:none; }

.reel-block { margin-bottom:56px; }
.reel-block:last-child { margin-bottom:0; }
.reel-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.reel-title { font-family:'Barlow Condensed', sans-serif; font-weight:900; font-size:28px; text-transform:uppercase; letter-spacing:0.01em; }
.reel-tag { font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--mid); }

.reel-frame {
  position:relative; width:100%; aspect-ratio:16 / 9;
  border-radius:14px; overflow:hidden; background:var(--ink);
  --plyr-color-main: var(--accent);
}
.reel-frame video { display:block; width:100%; height:100%; object-fit:contain; background:#000; }
.reel-frame .plyr { height:100%; }

/* Open reel, before a file is wired in */
.reel-empty {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:var(--soft); color:var(--mid); font-size:13px; text-align:center; padding:24px;
}
.reel-empty strong { font-family:'Barlow Condensed', sans-serif; font-weight:900; font-size:22px; text-transform:uppercase; color:var(--ink); }
#reelOpen video { display:none; }
#reelOpen.is-ready video { display:block; }
#reelOpen.is-ready .reel-empty { display:none; }

/* Locked reel: a pixelated still with the password form over it */
.reel-stage { position:absolute; inset:0; }
.reel-pixel {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  image-rendering:pixelated; image-rendering:crisp-edges;
}
.reel-lock {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(21,23,28,0.35);
}
.reel-lock-card {
  width:100%; max-width:340px; background:var(--bg); color:var(--ink);
  border-radius:14px; padding:22px; box-shadow:0 10px 40px rgba(0,0,0,0.25); text-align:center;
}
.reel-lock-icon { width:28px; height:28px; margin:0 auto 10px; color:var(--ink); }
.reel-lock-card h3 { font-size:15px; font-weight:500; margin-bottom:4px; }
.reel-lock-card p { font-size:12px; color:var(--mid); line-height:1.5; margin-bottom:14px; }
.reel-lock-form { display:flex; gap:8px; }
.reel-lock-form input {
  flex:1; min-width:0; padding:11px 16px; border-radius:100px; border:1px solid var(--border);
  background:var(--soft); font:inherit; font-size:13px; color:var(--ink);
}
.reel-lock-form input:focus { outline:2px solid var(--accent); outline-offset:1px; }
.reel-lock-form button[disabled], .reel-lock-form input[disabled] { opacity:0.6; cursor:wait; }
.reel-lock-msg { min-height:16px; margin-top:10px; font-size:12px; color:var(--mid); }
.reel-lock-msg.is-error { color:#D2372B; }
#reelLocked.is-unlocked .reel-lock { display:none; }

@media (max-width:640px) {
  .reel-title { font-size:22px; }
  .reel-lock-card { padding:16px; }
  .reel-lock-card p { display:none; }
}