/* Panels assemble like printed frames, with clean controls above the film pass. */
.menu-button {position:relative;gap:0;transition:background .25s,color .25s;}
.menu-button span {position:absolute;left:50%;top:50%;width:17px;height:1px;transform-origin:center;transition:transform .32s cubic-bezier(.2,.8,.2,1),width .32s,color .2s;}
.menu-button span:first-child {transform:translate(-50%, -2px);}
.menu-button span:last-child {transform:translate(-50%, 2px);}
@media(hover:hover) {
  .menu-button:hover {color:#fff;}
  .menu-button:hover span {width:21px;}
  .menu-button:hover span:first-child {transform:translate(-50%, -4px);}
  .menu-button:hover span:last-child {transform:translate(-50%, 4px);}
}
.menu-button:focus-visible span {width:21px;}
.menu-button:focus-visible span:first-child {transform:translate(-50%, -4px);}
.menu-button:focus-visible span:last-child {transform:translate(-50%, 4px);}
.menu-button[aria-expanded=true] span {width:22px;}
.menu-button[aria-expanded=true] span:first-child {transform:translate(-50%,0) rotate(45deg);}
.menu-button[aria-expanded=true] span:last-child {transform:translate(-50%,0) rotate(-45deg);}
.fan-panel {width:354px;max-width:calc(100vw - 56px);padding:22px;max-height:calc(100dvh - 244px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#555 #191919;transform-origin:35px 0;border:1px solid #ffffff13;box-shadow:8px 12px 0 #00000014,0 24px 64px #0005;}
.fan-panel[hidden] {display:none;}
.fan-panel-header {display:flex;align-items:center;justify-content:space-between;margin-bottom:17px;color:#9b9b98;}
.fan-panel-header .mono {font-size:8px;letter-spacing:.11em;}
.fan-status {display:flex;align-items:center;gap:6px;}
.fan-status i {width:5px;height:5px;border:1px solid #999;border-radius:50%;}
.fan-pass-art {position:relative;isolation:isolate;overflow:hidden;border-radius:8px;background:var(--red);color:#191919;padding:15px 17px 12px;transform-origin:10% 90%;}
.fan-pass-art:before {content:'';position:absolute;z-index:-1;inset:0;background:radial-gradient(circle at 87% 50%,transparent 0 39%,#17171712 39.2% 39.5%,transparent 39.7% 47%,#17171712 47.2% 47.5%,transparent 47.7%),radial-gradient(#19191926 .6px,transparent .8px);background-size:auto,3px 3px;}
.pass-top,.pass-bottom {display:flex;justify-content:space-between;align-items:center;}
.pass-top img {width:46px;height:auto;}
.pass-top .mono,.pass-bottom {font-size:6px;letter-spacing:.06em;}
.pass-title {position:relative;font-size:45px;line-height:.79;letter-spacing:-.055em;font-weight:850;margin:15px 0 13px;}
.pass-title>span {position:absolute;font-weight:500;font-size:56px;right:1px;bottom:0;}
.pass-bottom {border-top:1px solid #19191955;padding-top:8px;}
.fan-intro h2 {font-size:32px;letter-spacing:-.05em;line-height:1.05;margin:22px 0 8px;font-weight:650;}
.fan-intro p {font-size:16px;line-height:1.35;letter-spacing:-.02em;color:#aaa;margin:0;}
.fan-benefits {list-style:none;display:flex;flex-wrap:wrap;gap:4px 11px;margin:15px 0 20px;padding:0;font-size:11px;letter-spacing:-.015em;color:#d5d5d2;}
.fan-benefits li:before {content:'+';color:var(--red);margin-right:4px;}
.page-menu .fan-signup {position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--red);border-radius:5px;padding:15px 14px;background:var(--red);color:#191919;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.01em;transition:background .2s,border-color .2s;}
.page-menu .fan-signup>span:last-child {font-family:var(--grotesk);font-size:23px;font-weight:500;line-height:.8;transition:transform .25s;}
.page-menu .fan-signup:hover {background:#fff;border-color:#fff;}
.page-menu .fan-signup:hover>span:last-child {transform:translate(2px,-2px);}
.fan-login {text-align:center;color:#aaa;font-size:11px;margin:13px 0 6px;}
.page-menu .fan-login a {display:inline;padding:0;border:0;font-size:11px;color:white;text-decoration:underline;text-underline-offset:3px;}
.fan-destination {display:block;text-align:center;font-size:6px;color:#777;letter-spacing:.05em;}
.fan-utilities {display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:20px;border-top:1px solid #393939;padding-top:12px;}
.page-menu .fan-utilities button {padding:4px 0;font-size:7px;color:#aaa;letter-spacing:.035em;}
.page-menu .fan-utilities .film-toggle {width:auto;margin:0;padding:0;border:0;gap:7px;font-size:7px;white-space:nowrap;}
.page-menu .fan-utilities button:hover {color:white;}
/* The outer frame opens first; ink, card, copy and controls follow in sequence. */
.fan-panel:not([hidden]) {animation:frame-build 430ms cubic-bezier(.19,1,.22,1) both;}
.fan-panel:not([hidden]) .panel-beat {animation:ink-build 420ms cubic-bezier(.2,.75,.2,1) both;animation-delay:calc(70ms + var(--beat,0)*45ms);}
.panel-beat:nth-child(1) {--beat:0;}.panel-beat:nth-child(2) {--beat:1;}.panel-beat:nth-child(3) {--beat:2;}.panel-beat:nth-child(4) {--beat:3;}.panel-beat:nth-child(5) {--beat:4;}.panel-beat:nth-child(6) {--beat:5;}
.fan-panel.is-closing {animation:frame-out 160ms ease-in both;pointer-events:none;}
.fan-panel.is-closing .panel-beat {animation:none;}
@keyframes frame-build {0%{clip-path:inset(0 72% 99% 0 round 12px);transform:translateY(-10px)}45%{clip-path:inset(0 0 65% 0 round 12px)}100%{clip-path:inset(0 round 12px);transform:translateY(0)}}
@keyframes ink-build {from{opacity:0;transform:translateY(17px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:translateY(0);clip-path:inset(-12px)}}
@keyframes frame-out {from{opacity:1;transform:translateY(0);clip-path:inset(0 round 12px)}to{opacity:0;transform:translateY(-8px);clip-path:inset(0 0 92% 0 round 12px)}}
/* The overview reads as a page of panels, appearing in reading order. */
dialog[open] {animation:spread-build 400ms cubic-bezier(.19,1,.22,1) both;}
dialog[open]::backdrop {animation:backdrop-build 300ms both;}
dialog[open] .dialog-header {animation:ink-build 360ms 70ms both;}
#overviewDialog[open] .slide-thumb {animation:panel-build 480ms cubic-bezier(.19,1,.22,1) both;animation-delay:calc(110ms + var(--panel,0)*85ms);}
.slide-thumb:nth-child(1){--panel:0}.slide-thumb:nth-child(2){--panel:1}.slide-thumb:nth-child(3){--panel:2}
.slide-thumb {position:relative;overflow:hidden;transition:border-color .25s,box-shadow .25s,transform .25s;}
.slide-thumb .mini {transition:filter .25s;}
.slide-thumb:hover {transform:translateY(-4px);box-shadow:4px 5px 0 #151515;}
#sourcesDialog[open] .source-note {animation:ink-build 370ms 130ms both;}
dialog.is-closing {animation:spread-out 160ms ease-in both;pointer-events:none;}
dialog.is-closing::backdrop {animation:backdrop-out 160ms both;}
dialog.is-closing .slide-thumb,dialog.is-closing .dialog-header {animation:none!important;}
@keyframes spread-build {from{opacity:0;clip-path:inset(48% 0 48% 0 round 20px);transform:translateY(16px)}to{opacity:1;clip-path:inset(0 round 20px);transform:translateY(0)}}
@keyframes panel-build {from{opacity:0;clip-path:inset(0 0 100% 0);translate:0 25px}to{opacity:1;clip-path:inset(-8px);translate:0 0}}
@keyframes spread-out {to{opacity:0;transform:translateY(9px);clip-path:inset(48% 0 round 20px)}}
@keyframes backdrop-build {from{opacity:0}to{opacity:1}}
@keyframes backdrop-out {to{opacity:0}}
@media(max-width:700px) {
 .fan-panel {left:17px;top:110px;width:340px;max-width:calc(100vw - 34px);max-height:calc(100dvh - 203px);padding:19px;}
 .menu-button span {width:15px;}
 .menu-button:hover span,.menu-button:focus-visible span {width:18px;}
 .fan-pass-art {padding:13px 15px 11px;}
 .pass-title {font-size:42px;margin:13px 0;}
}
@media(max-height:760px) {
 .fan-pass-art {padding-top:12px;padding-bottom:10px;}
 .pass-title {font-size:37px;margin:12px 0;}
 .fan-intro h2 {font-size:29px;margin-top:16px;}
 .fan-intro p {font-size:14px;}
 .fan-benefits {margin:12px 0 15px;}
 .fan-utilities {margin-top:15px;}
}
@media(prefers-reduced-motion:reduce) {
 .fan-panel,.fan-panel .panel-beat,dialog,dialog::backdrop,dialog .dialog-header,dialog .slide-thumb,dialog .source-note {animation:none!important;}
 .menu-button span,.slide-thumb,.fan-signup,.fan-signup>span {transition:none!important;}
}