/* ===== Our star plate · footage played once on demand ===== */
.star{position:relative;background:#0b0907}
.star .stage{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;background:#0b0907;cursor:pointer}
.star .frame{position:absolute}
.star .frame video,.star .frame .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
.star .frame video.on,.star .frame .poster.on{opacity:1}
.star .frame:after{content:"";position:absolute;inset:-1px;pointer-events:none;box-shadow:inset 0 0 140px 70px #0b0907;opacity:.85}
.star .shade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(11,9,7,.88) 0%,rgba(11,9,7,.5) 28%,rgba(11,9,7,0) 54%),
  linear-gradient(180deg,rgba(11,9,7,.55),transparent 22%,transparent 80%,rgba(11,9,7,.75))}

/* labels anchored to the apex frame (fractions of the 16:9 frame) */
.star .lbl{position:absolute;display:flex;align-items:center;gap:12px;opacity:0;transform:translate(-8px,-50%);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.star .lbl.on{opacity:1;transform:translate(0,-50%)}
.star .lbl.l{flex-direction:row-reverse;transform:translate(8px,-50%)}
.star .lbl.l.on{transform:translate(0,-50%)}
.star .lbl .dot{width:10px;height:10px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 5px rgba(245,165,36,.22),0 0 18px rgba(245,165,36,.8);flex:none}
.star .lbl .line{height:1px;background:linear-gradient(90deg,rgba(245,165,36,.9),rgba(245,165,36,.15));width:var(--w,110px);flex:none}
.star .lbl.l .line{background:linear-gradient(270deg,rgba(245,165,36,.9),rgba(245,165,36,.15))}
.star .lbl .txt{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);white-space:nowrap}
.star .lbl .txt small{display:block;font-family:var(--sans);text-transform:none;letter-spacing:0;color:var(--mut);font-size:12px;margin-top:3px}
.star .lbl[data-k="pickle"]{left:62%;top:10%;--w:90px}
.star .lbl[data-k="bun"]{left:61%;top:22%;--w:120px}
.star .lbl[data-k="chicken"]{left:66%;top:43%;--w:56px}
.star .lbl[data-k="lettuce"]{left:64%;top:70%;--w:86px}

/* copy panels */
.star .ui{position:absolute;inset:0;pointer-events:none}
.star .panel{position:absolute;left:max(24px,calc((100vw - 1280px)/2 + 24px));top:50%;transform:translateY(calc(-50% + 16px));max-width:540px;opacity:0;transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.star .panel.on{opacity:1;transform:translateY(-50%);pointer-events:auto;transition-delay:.15s}
.star .panel h2,.star .panel .ttl{font-family:var(--display);color:var(--cream);text-transform:uppercase;font-size:clamp(56px,8vw,132px);line-height:.86;margin:18px 0 20px}
.star .panel h2 span,.star .panel .ttl span{display:block}
.star .panel h2 .amb,.star .panel .ttl .amb{color:var(--amber)}
.star .panel p{font-size:18px;color:#d9cfc1;max-width:440px;margin:0 0 22px}
.star .panel .hint{display:flex;align-items:center;gap:10px;margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut)}
.star .panel .hint i{display:block;width:34px;height:1px;background:var(--amber)}
.star .btn-build{font-size:16px;padding:18px 30px;box-shadow:0 10px 40px rgba(245,165,36,.25)}
.star .btn-build .arr{transition:transform .3s}
.star .btn-build:hover .arr{transform:translateY(3px)}
.star .chip{display:inline-flex;align-items:baseline;gap:12px;padding:10px 16px;border-radius:999px;background:rgba(13,11,9,.7);border:1px solid var(--line);backdrop-filter:blur(10px);margin-bottom:16px}
.star .chip b{font-family:var(--display);font-size:34px;color:var(--amber);line-height:1}
.star .chip span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.star .again{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);background:none;border:0;cursor:pointer;padding:0}
.star .again:hover{color:var(--amber)}
.star .again i{display:block;width:22px;height:1px;background:currentColor}
.star[data-state="building"] .lbl,.star[data-state="parting"] .lbl{opacity:0}
.star .meta{position:absolute;left:max(24px,calc((100vw - 1280px)/2 + 24px));top:118px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}

/* mobile */
@media (max-width:820px){
  .star .stage{min-height:0}
  .star .shade{background:linear-gradient(180deg,rgba(11,9,7,.85) 0%,rgba(11,9,7,.15) 28%,rgba(11,9,7,.05) 50%,rgba(11,9,7,.96) 100%)}
  .star .lbl{display:none}
  .star .panel{left:20px;right:20px;top:auto;bottom:112px;transform:translateY(16px);max-width:none}
  .star .panel.on{transform:none}
  .star .panel h2,.star .panel .ttl{font-family:var(--display);color:var(--cream);text-transform:uppercase;font-size:16vw}
  .star .panel p{font-size:15px;max-width:none}
  .star .meta{left:20px;top:86px}
  .star .btn-build{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .star .panel,.star .lbl,.star .frame video,.star .frame .poster{transition:none}
}
.star button.btn{border:0;cursor:pointer;font-family:inherit}
/* beer scene */
.star .stats{display:flex;gap:28px;margin:0 0 14px}
.star .stats b{display:block;font-family:var(--display);font-size:34px;color:var(--amber);line-height:1}
.star .stats span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.beerstrip{padding:40px 0 0}
.star video.main,.star video.rev,.star video.idle{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
.star video.on{opacity:1}
@media (max-width:820px){.star .stats{display:none}}

/* while footage plays, keep the copy and fade only the controls */
.star .btn-go,.star .panel .hint,.star .again,.star .cta,.star .chip,.star .stats{transition:opacity .35s ease,transform .35s ease}
.star[data-state="playing"] .btn-go,.star[data-state="playing"] .panel .hint,.star[data-state="reversing"] .again,.star[data-state="reversing"] .cta{opacity:0;transform:translateY(6px);pointer-events:none}
.star .panel p:not(.ttl){text-shadow:0 1px 18px rgba(11,9,7,.9)}
.star .panel h2,.star .panel .ttl{text-shadow:0 2px 28px rgba(11,9,7,.85)}