/* SJSFF globe explorer (prototype). Scoped under .gx; the header/footer rules are stand-ins for the theme. */
:root{
  --gx-ink:#04050b; --gx-ink2:#090b16; --gx-panel:#07080f;
  --gx-red:#de3025; --gx-red-hi:#f2463a; --gx-red-deep:#9e1c14;
  --gx-tx:#f4f5f8; --gx-tx2:#c3c7d3; --gx-tx3:#8f95a6;
  --gx-line:rgba(255,255,255,.14); --gx-line2:rgba(255,255,255,.28);
  --gx-out:cubic-bezier(.16,1,.3,1); --gx-io:cubic-bezier(.65,0,.35,1); --gx-in:cubic-bezier(.55,0,.75,.2);
  --gx-hdr:88px; --gx-rail:clamp(150px,22vh,232px); --gx-pad:clamp(16px,2.2vw,32px);
}

/* ---- scoped resets (Salient sets padding, sizes and spacing on these globally). .gx :where(...) has the
   specificity of one class: it beats the theme's element rules (body p, h1) and, coming first, loses to every .gx-* rule below. ---- */
:where(.gx),:where(.gx) *,:where(.gx) *::before,:where(.gx) *::after{box-sizing:border-box}
.gx ::selection{background:var(--gx-red);color:#fff}
.gx :where(p,h1,h2,h3,ul,ol,li,dl,dt,dd,fieldset,legend,figure){padding:0;margin:0;letter-spacing:normal;text-transform:none;font-family:inherit}
.gx :where(ul,ol){list-style:none}
.gx :where(h1,h2,h3){color:#fff;line-height:1.1}
.gx :where(p){color:inherit}
.gx :where(img){max-width:none;margin:0}
.gx :where(button){text-shadow:none;box-shadow:none;margin:0;line-height:1.2;min-height:0;border-radius:0}
.gx :where(input[type=checkbox]){margin:0}

/* ---- stage ---- */
.gx{position:relative;height:calc(100svh - var(--gx-top,88px));font-family:Mulish,"Muli",system-ui,sans-serif;color:var(--gx-tx);-webkit-font-smoothing:antialiased;min-height:620px;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 50% 40%,#0b0e1f 0%,#05060d 55%,#020308 100%);user-select:none;-webkit-user-select:none}
.gx-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;z-index:1}
.gx-canvas.drag{cursor:grabbing}
.gx-canvas.on-pin:not(.drag){cursor:pointer}
/* film grain over the globe and background (all states); UI sits above it */
/* two layers of the same tile: overlay gives texture on the globe, a faint screen layer lets it read on the black sky */
.gx-grain{position:absolute;inset:-128px;z-index:2;pointer-events:none;background:var(--gx-grain) 0 0/256px 256px repeat;
  opacity:.135;mix-blend-mode:overlay;animation:gxGrain .9s steps(1) infinite}
.gx-grain.lift{opacity:.0675;mix-blend-mode:screen;animation-delay:-.45s;background-position:97px 41px}
@keyframes gxGrain{
  0%{transform:translate3d(0,0,0)}12.5%{transform:translate3d(-61px,37px,0)}25%{transform:translate3d(43px,-88px,0)}37.5%{transform:translate3d(-97px,-19px,0)}
  50%{transform:translate3d(78px,64px,0)}62.5%{transform:translate3d(-24px,101px,0)}75%{transform:translate3d(110px,-52px,0)}87.5%{transform:translate3d(-70px,-110px,0)}}
@media (prefers-reduced-motion:reduce){.gx-grain{animation:none}}
.gx button{font:inherit;color:inherit}
.gx :focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
.gx-loading{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);margin:0;color:var(--gx-tx3);font-size:14px;letter-spacing:.08em;z-index:30;transition:opacity .4s}
.gx.ready .gx-loading{opacity:0;pointer-events:none}

/* ---- buttons ---- */
.gx-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:50px;padding:0 30px;border:1.5px solid transparent;border-radius:2px;
  font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:background-color .2s,border-color .2s,color .2s,transform .2s var(--gx-out),box-shadow .3s}
.gx-btn svg{width:11px;height:13px;fill:currentColor;transition:transform .3s var(--gx-out)}
.gx-btn-red{background:var(--gx-red);color:#fff}
.gx-btn-red:hover{background:#c2291f;box-shadow:0 12px 26px -10px rgba(0,0,0,.85)}
.gx-btn-red:hover svg{transform:translateX(3px)}
.gx-btn-red:active{transform:translateY(1px) scale(.985)}
.gx-btn-line{border-color:rgba(255,255,255,.85);color:#fff;background:transparent}
.gx-btn-line:hover{background:#fff;color:#111}
.gx-link{background:none;border:0;padding:4px 0;color:var(--gx-tx2);font-size:14px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.gx-link:hover{color:#fff}

/* ---- intro ---- */
.gx-intro{position:absolute;inset:0;z-index:4;pointer-events:none}
.gx[data-state=intro] .gx-intro{pointer-events:auto}
.gx-wall{position:absolute;z-index:0;top:-8px;bottom:-8px;right:-8px;width:72%;pointer-events:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(52px,4.4vw,78px),1fr));
  gap:7px;align-content:start;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 22%,#000 62%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 22%,#000 62%)}
.gx-wall img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;border-radius:1px;opacity:.38;filter:saturate(.8) brightness(.8);
  transition:opacity .9s var(--gx-out),filter .9s var(--gx-out),transform .9s var(--gx-out)}
.gx-wall img.lit{opacity:.95;filter:none}
.gx-wall img.near{opacity:.7;filter:saturate(.95)}
.gx-intro-copy{position:absolute;left:50%;top:50%;transform:translate(-50%,-44%);width:min(980px,92vw);text-align:center;
  transition:opacity .5s var(--gx-out),transform .7s var(--gx-out),filter .5s}
.gx-intro-copy::before{content:"";position:absolute;inset:-22% -18%;z-index:-1;background:radial-gradient(closest-side,rgba(4,5,11,.92),rgba(4,5,11,.78) 55%,transparent)}
.gx-intro-fest{margin:0 0 18px;font-size:clamp(18px,1.7vw,26px);font-weight:400;color:#fff}
.gx-intro h1{margin:0 0 30px;font-size:clamp(40px,4.7vw,80px);line-height:1.02;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.gx-intro-lede{margin:0 auto 38px;max-width:46ch;font-size:clamp(16px,1.3vw,20px);line-height:1.55;color:#e4e6ec;text-wrap:pretty}
.gx-intro-lede b{color:#fff;font-weight:700}
.gx-intro-alt{margin:22px 0 0;font-size:14px}
.gx:not([data-state=intro]) .gx-intro-copy{opacity:0;transform:translate(-50%,-56%);filter:blur(6px);pointer-events:none;visibility:hidden;
  transition:opacity .45s var(--gx-in),transform .6s var(--gx-in),filter .45s,visibility 0s .6s}
.gx-wall.leaving img{transition:transform .75s var(--gx-in),opacity .55s var(--gx-in);transform:translate3d(-40px,24px,0) scale(.82) rotate(-2deg);opacity:0}
.gx:not([data-state=intro]) .gx-wall{visibility:hidden;transition:visibility 0s 1.3s}

/* ---- HUD ---- */
.gx-hud{position:absolute;top:var(--gx-pad);left:var(--gx-pad);z-index:8;max-width:calc(100% - 200px);opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .5s var(--gx-out),transform .6s var(--gx-out)}
.gx[data-state=explore] .gx-hud,.gx[data-state=film] .gx-hud{opacity:1;transform:none;pointer-events:auto;transition-delay:.55s}
.gx[data-state=film] .gx-hud{opacity:0;pointer-events:none;transition-delay:0s}
.gx-count{margin:0 0 10px;font-size:15px;color:var(--gx-tx2);font-variant-numeric:tabular-nums}
.gx-count b{color:#fff;font-weight:700}
.gx-count-sep{display:inline-block;width:1px;height:.95em;margin:0 12px;background:rgba(255,255,255,.4);vertical-align:-.12em}
.gx-active{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.gx li{list-style:none}
.gx-active li{animation:gxPop .45s var(--gx-out) both}
.gx-active button{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 10px 0 13px;border-radius:15px;border:1px solid var(--gx-line2);background:rgba(10,12,22,.72);
  font-size:13px;color:#fff;cursor:pointer;transition:border-color .2s,background-color .2s}
.gx-active button:hover{border-color:var(--gx-red);background:rgba(222,48,37,.18)}
.gx-active svg{width:10px;height:10px;stroke:currentColor;stroke-width:2.2;fill:none}
@keyframes gxPop{from{opacity:0;transform:scale(.85)}}

/* ---- menu (hamburger) ---- */
.gx-menu{position:absolute;top:var(--gx-pad);right:var(--gx-pad);z-index:12;display:flex;align-items:center;gap:12px;height:46px;padding:0 6px 0 16px;border-radius:23px;
  border:1px solid var(--gx-line2);background:rgba(8,10,20,.6);cursor:pointer;opacity:0;translate:0 -8px;pointer-events:none;
  transition:opacity .5s var(--gx-out),translate .6s var(--gx-out),transform .75s var(--gx-io),border-color .2s,background-color .2s}
.gx:not([data-state=intro]) .gx-menu{opacity:1;translate:none;pointer-events:auto;transition-delay:.6s,.6s,0s,0s,0s}
.gx-menu:hover{border-color:#fff;background:rgba(18,20,34,.85)}
.gx-panel .gx-close{top:18px;right:var(--gx-pad)}
.gx-menu-lbl{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.gx-menu-badge[hidden]{display:none}
.gx-menu-badge{min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--gx-red);font-size:12px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;display:grid;place-items:center;animation:gxPop .35s var(--gx-out)}
.gx-burger{position:relative;width:34px;height:34px;border-radius:50%;display:grid;place-items:center}
.gx-burger i{position:absolute;left:9px;right:9px;height:1.6px;background:#fff;border-radius:1px;transition:transform .45s var(--gx-out),opacity .25s,top .45s var(--gx-out)}
.gx-burger i:nth-child(1){top:11px}.gx-burger i:nth-child(2){top:16.2px}.gx-burger i:nth-child(3){top:21.4px}
.gx-menu:hover .gx-burger i:nth-child(2){transform:scaleX(.6);transform-origin:right}
.gx[data-drawer=open] .gx-burger i:nth-child(1){top:16.2px;transform:rotate(45deg)}
.gx[data-drawer=open] .gx-burger i:nth-child(2){opacity:0}
.gx[data-drawer=open] .gx-burger i:nth-child(3){top:16.2px;transform:rotate(-45deg)}

/* ---- pins ---- */
.gx-pins{position:absolute;inset:0;z-index:3;pointer-events:none;clip-path:inset(0 0 calc(var(--gx-rail) - 24px) 0)}
.gx-pin{position:absolute;left:0;top:0;width:48px;height:48px;margin:-24px 0 0 -24px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;pointer-events:none;
  --s:1;opacity:0;will-change:transform,opacity}
.gx-pin.off{pointer-events:none}
.gx-pin i{position:absolute;left:50%;top:50%;width:calc(var(--d) * var(--s));height:calc(var(--d) * var(--s));transform:translate(-50%,-50%);border-radius:50%;
  background:var(--gx-red);box-shadow:0 0 0 1px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.6);
  transition:width .35s var(--gx-out),height .35s var(--gx-out),background-color .25s,box-shadow .3s,opacity .3s}
/* the pulse: a thin ring that breathes out from every country, each on its own beat */
.gx-pin::before,.gx-pin::after{content:"";position:absolute;left:50%;top:50%;width:calc(var(--d) * var(--s));height:calc(var(--d) * var(--s));border-radius:50%;
  border:1px solid var(--gx-red-hi);transform:translate(-50%,-50%) scale(1);opacity:0;pointer-events:none;
  animation:gxRing 2.8s cubic-bezier(.2,.6,.35,1) infinite;animation-delay:var(--pd,0s)}
.gx-pin::after{animation-delay:calc(var(--pd,0s) + 1.4s);border-color:rgba(242,70,58,.6)}
.gx-pin:hover i,.gx-pin.hot i{width:calc(var(--d) * var(--s) * 1.7);height:calc(var(--d) * var(--s) * 1.7);background:var(--gx-red-hi);box-shadow:0 0 0 2px #fff,0 4px 12px rgba(0,0,0,.7)}
.gx-pin:hover::before,.gx-pin:hover::after,.gx-pin.hot::before,.gx-pin.hot::after{border-color:#fff;animation-duration:1.5s}
.gx-pin:hover::after,.gx-pin.hot::after{animation-delay:calc(var(--pd,0s) + .75s)}
.gx-pin.sel i{width:calc(var(--d) * var(--s) * 1.9);height:calc(var(--d) * var(--s) * 1.9);background:var(--gx-red);box-shadow:0 0 0 2px #fff,0 4px 12px rgba(0,0,0,.7)}
.gx-pin.sel::before,.gx-pin.sel::after{border-color:#fff;border-width:1.5px}
.gx-pin.dim i{opacity:.35}
.gx[data-state=film] .gx-pin:not(.sel) i{opacity:.55}
.gx[data-state=film] .gx-pin:not(.sel)::before,.gx[data-state=film] .gx-pin:not(.sel)::after{display:none}
.gx-pin.in i{animation:gxPinIn .7s var(--gx-out) both;animation-delay:var(--dl,0s)}
@keyframes gxRing{0%{opacity:.85;transform:translate(-50%,-50%) scale(1)}70%{opacity:.12}100%{opacity:0;transform:translate(-50%,-50%) scale(4.2)}}
@keyframes gxPinIn{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}60%{transform:translate(-50%,-50%) scale(1.35)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}

.gx-home{position:absolute;left:0;top:0;z-index:60;pointer-events:none;opacity:0;display:flex;align-items:center;gap:8px;margin:-14px 0 0 -14px}
.gx-home svg{width:28px;height:28px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.8));transition:transform .5s var(--gx-out)}
.gx-home svg circle{fill:var(--gx-red)}.gx-home svg circle.h{fill:#0a0b14}
.gx-home span{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 1px 6px #000;opacity:0;transform:translateX(-4px);transition:opacity .4s,transform .5s var(--gx-out)}
.gx-home.lit svg{transform:scale(1.25)}
.gx-home.lit span{opacity:1;transform:none}
/* pin tooltip */
.gx-tip{position:absolute;left:0;top:0;z-index:9;display:flex;align-items:center;gap:20px;padding:14px 24px 14px 16px;border-radius:8px;background:rgba(6,7,14,.94);
  border:1px solid var(--gx-line);box-shadow:0 24px 50px -14px rgba(0,0,0,.85);pointer-events:none;opacity:0;transform:translate3d(0,0,0);transform-origin:left center;
  transition:opacity .2s}
.gx-tip.on{opacity:1}
.gx-tip-stack{position:relative;width:112px;height:96px;flex:0 0 auto}
.gx-tip-stack img{position:absolute;top:3px;width:60px;height:90px;object-fit:cover;border-radius:3px;box-shadow:0 8px 18px rgba(0,0,0,.65);transition:transform .45s var(--gx-out)}
.gx-tip-stack img:nth-child(1){left:0;transform:rotate(-8deg) translateY(3px)}
.gx-tip-stack img:nth-child(2){left:26px;z-index:1}
.gx-tip-stack img:nth-child(3){left:52px;z-index:2;transform:rotate(8deg) translateY(3px)}
.gx-tip.on .gx-tip-stack img:nth-child(1){animation:gxFanL .5s var(--gx-out) both}
.gx-tip.on .gx-tip-stack img:nth-child(3){animation:gxFanR .5s var(--gx-out) both}
@keyframes gxFanL{from{transform:rotate(0) translate(26px,0)}}
@keyframes gxFanR{from{transform:rotate(0) translate(-26px,0)}}
.gx-tip-txt b{display:block;font-size:22px;line-height:1.15;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.gx-tip-txt span{display:block;font-size:15px;color:#e4e6ec;white-space:nowrap;margin-top:6px}
.gx-tip-txt em{display:block;font-style:normal;font-size:13px;color:var(--gx-tx3);white-space:nowrap;margin-top:3px}
.gx-tip-txt small{display:block;margin-top:12px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gx-red-hi);white-space:nowrap}

/* ---- rail ---- */
.gx-rail{position:absolute;left:0;right:0;bottom:0;height:var(--gx-rail);z-index:7;transform:translateY(110%);transition:transform .9s var(--gx-out)}
.gx-rail::before{content:"";position:absolute;inset:-60px 0 0;background:linear-gradient(transparent,rgba(3,4,9,.82) 55%,rgba(3,4,9,.95));pointer-events:none;z-index:-1}
.gx:not([data-state=intro]) .gx-rail{transform:none;transition-delay:.35s}
.gx-track{list-style:none;margin:0;padding:0 var(--gx-pad) 14px;height:100%;display:flex;align-items:flex-end;gap:10px;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gx-pad),#000 calc(100% - var(--gx-pad)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--gx-pad),#000 calc(100% - var(--gx-pad)),transparent)}
.gx-track::-webkit-scrollbar{display:none}
.gx-track.drag{cursor:grabbing}
.gx-track.drag .gx-card{pointer-events:none}
.gx-card{--h:calc(var(--gx-rail) - 34px);flex:0 0 auto;width:calc(var(--h) * .6667);height:var(--h);position:relative;padding:0;margin:0;list-style:none;
  transition:width .7s var(--gx-out),opacity .35s,filter .35s,transform .45s var(--gx-out)}
.gx-card button{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#111;border-radius:3px;overflow:hidden;cursor:pointer;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.9);transition:box-shadow .35s,transform .45s var(--gx-out)}
.gx-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s var(--gx-out),transform .9s var(--gx-out)}
.gx-card .still{opacity:0}
.gx-card .cap{position:absolute;left:0;right:0;bottom:0;padding:34px 10px 9px;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.88));
  opacity:0;transform:translateY(8px);transition:opacity .3s,transform .4s var(--gx-out)}
.gx-card .cap b{display:block;font-size:13px;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gx-card .cap span{display:block;margin-top:3px;font-size:11.5px;color:var(--gx-tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-card .tag{position:absolute;top:7px;left:7px;padding:3px 6px;border-radius:2px;background:rgba(0,0,0,.72);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:0;transition:opacity .3s}
.gx-card .win{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.66);display:grid;place-items:center}
.gx-card .win svg{width:11px;height:11px;fill:var(--gx-red-hi)}
.gx-card .play{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;background:var(--gx-red);display:grid;place-items:center;
  opacity:0;transform:scale(.6);transition:opacity .35s,transform .5s var(--gx-out);box-shadow:0 6px 20px rgba(0,0,0,.5)}
.gx-card .play svg{width:13px;height:15px;fill:#fff;margin-left:3px}
/* hover: the hovered card rises, the rest recede */
@media (hover:hover){
  .gx-track:hover .gx-card:not(:hover):not(.sel){opacity:.62;filter:saturate(.55) brightness(.8)}
  .gx-card:hover{transform:translateY(-10px)}
  .gx-card:hover button{box-shadow:0 22px 40px -14px rgba(0,0,0,.95),0 0 0 1.5px rgba(255,255,255,.9)}
  .gx-card:hover img{transform:scale(1.05)}
  .gx-card:hover .cap,.gx-card:hover .tag{opacity:1;transform:none}
}
.gx-card.hot:not(.sel) button{box-shadow:0 0 0 1.5px var(--gx-red-hi),0 18px 34px -14px rgba(0,0,0,.9)}
.gx-card.sel{width:calc(var(--h) * 1.7778);transform:translateY(-6px)}
.gx-card.sel button{box-shadow:0 0 0 3px var(--gx-red),0 24px 46px -16px rgba(0,0,0,.95)}
.gx-card.sel .still{opacity:1}
.gx-card.sel .poster{opacity:0}
.gx-card.sel .play{opacity:1;transform:none}
.gx-card.sel .cap{opacity:0}
.gx-card.out{opacity:0;transform:scale(.88)}
.gx-card[hidden]{display:none}
.gx-card.enter{animation:gxCardIn .7s var(--gx-out) both;animation-delay:var(--dl,0s)}
@keyframes gxCardIn{from{opacity:0;transform:translateY(46px) scale(.94)}}
.gx-rail-arrow{position:absolute;top:calc(50% - 30px);z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid var(--gx-line2);background:rgba(6,7,14,.85);
  display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .25s,background-color .2s,border-color .2s}
.gx-rail-arrow svg{width:18px;height:18px;stroke:#fff;stroke-width:2;fill:none}
.gx-rail-arrow.l{left:12px}.gx-rail-arrow.r{right:12px}
.gx-rail:hover .gx-rail-arrow:not([disabled]){opacity:1}
.gx-rail-arrow:hover{background:var(--gx-red);border-color:var(--gx-red)}
.gx-rail-arrow[disabled]{opacity:0!important;pointer-events:none}
.gx-empty{position:absolute;left:0;right:0;bottom:40%;margin:0;text-align:center;color:var(--gx-tx2);font-size:15px}

/* ---- film panel ---- */
.gx-panel{position:absolute;top:0;right:0;bottom:var(--gx-rail);left:25%;z-index:6;background:#000;overflow:hidden;
  clip-path:inset(0 0 0 100%);transition:clip-path .8s var(--gx-io)}
.gx[data-state=film] .gx-panel{clip-path:inset(0 0 0 0)}
/* soft drop shadow the panel casts onto the globe tucked under its left edge
   (a separate strip: the panel's clip-path reveal would clip a box-shadow) */
.gx-panel-shadow{position:absolute;top:0;bottom:var(--gx-rail);right:75%;width:150px;z-index:5;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.18) 45%,rgba(0,0,0,.5) 80%,rgba(0,0,0,.72) 100%);
  opacity:0;transform:translateX(30px);transition:opacity .25s,transform .25s}
.gx[data-state=film] .gx-panel-shadow{opacity:1;transform:none;transition:opacity .6s var(--gx-out) .55s,transform .8s var(--gx-out) .5s}
.gx-panel[hidden]{display:block;visibility:hidden}
.gx-p-bg{position:absolute;inset:0;overflow:hidden}
.gx-p-img{position:absolute;inset:-2%;background-size:cover;background-position:center;opacity:0;transform:scale(1.08);transition:opacity 1s var(--gx-out)}
.gx-p-img.on{opacity:.82;animation:gxKen 24s linear both}
@keyframes gxKen{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-1.5%,-1%,0)}}
.gx-p-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.15) 30%,rgba(0,0,0,.85) 62%,#000 78%),
  linear-gradient(90deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.35) 40%,rgba(0,0,0,0) 72%)}
.gx-p-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#3a3d4a transparent;padding:clamp(40px,10vh,110px) clamp(24px,4vw,72px) 48px}
.gx-p-hero{display:flex;gap:clamp(20px,2.6vw,38px);align-items:flex-start;max-width:1040px}
.gx-p-poster{width:clamp(150px,15vw,235px);aspect-ratio:2/3;object-fit:cover;border-radius:3px;box-shadow:0 30px 60px -20px rgba(0,0,0,.95);flex:0 0 auto}
.gx-p-main{min-width:0;padding-top:6px}
.gx-p-kicker{display:flex;align-items:center;gap:9px;margin:0 0 6px;font-size:16px;font-weight:700;letter-spacing:.02em}
.gx-p-kicker svg{width:18px;height:18px}
.gx-p-kicker svg circle{fill:var(--gx-red)}.gx-p-kicker svg circle.h{fill:#000}
.gx-p-title{margin:0 0 12px;font-size:clamp(32px,3.6vw,60px);line-height:1.04;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.gx-p-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin:0 0 14px;font-size:14px;color:var(--gx-tx2)}
.gx-p-meta{column-gap:20px}
.gx-p-meta span{position:relative}
.gx-p-meta span+span::before{content:"";position:absolute;left:-11.5px;top:50%;width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:var(--gx-tx3)}
.gx-p-meta .k{margin-left:0;padding:2px 7px;border:1px solid rgba(255,255,255,.6);border-radius:2px;font-size:11px;font-weight:700;letter-spacing:.1em;color:#fff;text-transform:uppercase}
.gx-p-meta .k::before{display:none!important}
.gx-p-award{display:flex;align-items:center;gap:8px;margin:-4px 0 14px;font-size:14px;font-weight:700;color:#fff}
.gx-p-award[hidden]{display:none}
.gx-p-award svg{width:15px;height:15px;fill:var(--gx-red-hi)}
.gx-p-dir{margin:0 0 14px;font-size:16px;color:var(--gx-tx2)}
.gx-p-dir b{color:#fff;font-weight:700}
.gx-p-syn{margin:0 0 26px;max-width:62ch;font-size:16.5px;line-height:1.6;color:#eceef3}
.gx-p-btns{display:flex;flex-wrap:wrap;gap:12px}
.gx-p-about{max-width:1040px;margin-top:clamp(40px,7vh,80px);padding-top:8px}
.gx-p-about h3{margin:0 0 14px;font-size:21px;font-weight:700}
.gx-p-fact{margin:0 0 24px;max-width:72ch;font-size:16px;line-height:1.65;color:#e2e4ea}
.gx-p-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:20px 28px;margin:0;padding:22px 0;border-top:1px solid var(--gx-line);border-bottom:1px solid var(--gx-line)}
.gx-p-facts dt{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gx-tx3);margin-bottom:5px}
.gx-p-facts dd{margin:0;font-size:15px;color:#fff;line-height:1.45}
/* text links stay the site's red, never browser blue */
.gx a:not(.gx-btn),.gx a:not(.gx-btn):visited{color:var(--gx-red-hi);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s}
.gx a:not(.gx-btn):hover{color:#fff}
/* content entrance (re-run on every film change) */
.gx-panel .rv{opacity:0;transform:translateY(16px)}
.gx-panel.show .rv{opacity:1;transform:none;transition:opacity .6s var(--gx-out),transform .8s var(--gx-out);transition-delay:calc(var(--i,0) * 55ms + .18s)}
.gx-panel .gx-p-poster.rv{transform:translateY(22px) scale(.96)}
/* closing: the text fades and the close button clears out of Filter's way while the panel wipes off
   (scoped to non-film states so switching films still replays the reveal) */
.gx:not([data-state=film]) .gx-panel .rv{transition:opacity .3s var(--gx-out),transform .4s var(--gx-out)}
.gx:not([data-state=film]) .gx-panel .gx-x{opacity:0;pointer-events:none;transition:opacity .2s var(--gx-out)}
.gx-panel.show .gx-p-poster.rv{transform:none}
.gx-close{position:absolute;top:18px;right:18px;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid var(--gx-line2);background:rgba(0,0,0,.45);display:grid;place-items:center;cursor:pointer;
  transition:background-color .2s,border-color .2s,transform .35s var(--gx-out)}
.gx-close svg{width:16px;height:16px;stroke:#fff;stroke-width:1.8;fill:none}
.gx-close:hover{background:var(--gx-red);border-color:var(--gx-red);transform:rotate(90deg)}
/* film close: red by default; on hover the word CLOSE slides out to the left of the X */
.gx-panel .gx-x{width:auto;min-width:44px;padding:0 14px;display:inline-flex;align-items:center;justify-content:flex-end;border-radius:22px;
  background:var(--gx-red);border-color:var(--gx-red);box-shadow:0 8px 20px -8px rgba(0,0,0,.7);transition:background-color .2s,border-color .2s,padding .45s var(--gx-out)}
/* Choreography: on hover the Filter button moves aside FIRST (0–280ms), then CLOSE slides out
   (from 140ms). On leave it reverses: CLOSE tucks away first, then Filter slides back. */
.gx-panel .gx-x:hover,.gx-panel .gx-x:focus-visible{transform:none;background:#c2291f;border-color:#c2291f;padding:0 16px 0 20px;transition-delay:0s,0s,.14s}
.gx-x svg{flex:0 0 auto;transition:transform .45s var(--gx-out)}
.gx-x:hover svg{transform:rotate(90deg)}
.gx-x-l{display:block;max-width:0;overflow:hidden;opacity:0;transform:translateX(12px);white-space:nowrap;
  font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  transition:max-width .3s var(--gx-in),opacity .15s,transform .3s var(--gx-in),margin .3s var(--gx-in)}
.gx-x:hover .gx-x-l,.gx-x:focus-visible .gx-x-l{max-width:80px;opacity:1;transform:none;margin-right:10px;
  transition:max-width .45s var(--gx-out) .14s,opacity .3s .2s,transform .45s var(--gx-out) .14s,margin .45s var(--gx-out) .14s}
@media (min-width:861px){
  /* film: Filter sits left of the close button, on its line. Positioned with transform (never top/right),
     so closing the film glides it back in one move instead of jumping. */
  .gx[data-state=film] .gx-menu{transform:translate(-62px,calc(18px - var(--gx-pad)));transition:opacity .4s var(--gx-out),translate .6s var(--gx-out),transform .4s var(--gx-out) .18s,border-color .2s,background-color .2s}
  .gx[data-state=film]:has(.gx-x:hover) .gx-menu,.gx[data-state=film]:has(.gx-x:focus-visible) .gx-menu{transform:translate(-140px,calc(18px - var(--gx-pad)));transition:opacity .4s var(--gx-out),translate .6s var(--gx-out),transform .28s var(--gx-out) 0s,border-color .2s,background-color .2s}
}

/* ---- drawer ---- */
.gx-drawer{position:absolute;top:0;right:0;bottom:0;z-index:20;width:min(420px,100%);display:flex;flex-direction:column;background:#0a0b14;border-left:1px solid var(--gx-line);
  box-shadow:-30px 0 60px -20px rgba(0,0,0,.8);transform:translateX(102%);transition:transform .6s var(--gx-out),visibility 0s .6s;visibility:hidden}
.gx[data-drawer=open] .gx-drawer{transform:none;visibility:visible;transition:transform .6s var(--gx-out),visibility 0s}
.gx-drawer[hidden]{display:flex}
.gx-scrim{position:absolute;inset:0;z-index:19;background:rgba(2,3,8,.45);opacity:0;transition:opacity .45s;pointer-events:none}
.gx-scrim[hidden]{display:block}
.gx[data-drawer=open] .gx-scrim{opacity:1;pointer-events:auto}
.gx-d-head{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 14px 26px}
.gx-d-head h2{margin:0;font-size:20px;font-weight:800}
.gx-d-head .gx-close{position:static}
.gx-d-body{flex:1;overflow-y:auto;padding:4px 26px 24px;scrollbar-width:thin;scrollbar-color:#3a3d4a transparent}
.gx-f{border:0;margin:0;padding:18px 0 20px;border-top:1px solid var(--gx-line)}
.gx-f legend{float:left;width:100%;margin-bottom:12px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gx-tx3)}
.gx-chips{clear:both;display:flex;flex-wrap:wrap;gap:8px}
.gx-chip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:17px;border:1px solid var(--gx-line2);background:transparent;font-size:14px;color:#e8eaf0;cursor:pointer;
  transition:background-color .2s,border-color .2s,color .2s,opacity .25s,transform .2s var(--gx-out)}
.gx-chip i{font-style:normal;font-size:12px;color:var(--gx-tx3);font-variant-numeric:tabular-nums;transition:color .2s}
.gx-chip:hover{border-color:#fff}
.gx-chip:active{transform:scale(.96)}
.gx-chip[aria-pressed=true]{background:#fff;border-color:#fff;color:#0a0b14}
.gx-chip[aria-pressed=true] i{color:#555b6b}
.gx-chip.zero{opacity:.35}
.gx-countries{clear:both;margin-top:14px}
.gx-countries summary{cursor:pointer;font-size:14px;color:var(--gx-tx2);list-style:none;display:flex;align-items:center;gap:8px}
.gx-countries summary::before{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .3s var(--gx-out)}
.gx-countries[open] summary::before{transform:rotate(45deg)}
.gx-countries summary:hover{color:#fff}
.gx-chips-c{margin-top:12px}
.gx-switch{clear:both;display:flex;align-items:center;gap:12px;cursor:pointer;font-size:15px}
.gx-switch input{position:absolute;opacity:0;width:1px;height:1px}
.gx-sw{position:relative;width:42px;height:24px;border-radius:12px;background:#2a2d3a;transition:background-color .25s;flex:0 0 auto}
.gx-sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .35s var(--gx-out)}
.gx-switch input:checked+.gx-sw{background:var(--gx-red)}
.gx-switch input:checked+.gx-sw::after{transform:translateX(18px)}
.gx-switch input:focus-visible+.gx-sw{outline:2px solid #fff;outline-offset:3px}
.gx-sw-l i{font-style:normal;color:var(--gx-tx3);font-size:13px;margin-left:4px}
.gx-d-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px 18px 26px;border-top:1px solid var(--gx-line);background:#0a0b14}
.gx-d-foot .gx-btn{height:46px;padding:0 22px}
.gx-show b{font-variant-numeric:tabular-nums}

/* ---- player ---- */
.gx-player{position:absolute;inset:0;z-index:40;display:grid;place-items:center;background:rgba(0,0,0,.94);opacity:0;transition:opacity .4s;pointer-events:none}
.gx-player[hidden]{display:grid;visibility:hidden}
.gx-player.on{opacity:1;pointer-events:auto;visibility:visible}
.gx-pl-frame{width:min(92vw,calc((100% - 120px) * 1.7778),1400px);aspect-ratio:16/9;background:#000;box-shadow:0 40px 80px -20px #000;transform:scale(.94);transition:transform .6s var(--gx-out)}
.gx-player.on .gx-pl-frame{transform:none}
.gx-pl-frame iframe{width:100%;height:100%;border:0;display:block}

/* ---- phones & tablets ---- */
@media (min-width:861px){.gx-intro h1{white-space:nowrap}}
@media (max-width:860px){
  :root{--gx-rail:clamp(150px,24svh,200px)}
  /* phones: the posters sit along the bottom edge, strongest at the bottom, fading up behind the copy */
  .gx-wall{width:100%;align-content:end;-webkit-mask-image:linear-gradient(0deg,#000 0%,#000 10%,rgba(0,0,0,.45) 26%,transparent 44%);mask-image:linear-gradient(0deg,#000 0%,#000 10%,rgba(0,0,0,.45) 26%,transparent 44%)}
  .gx-intro-copy{top:auto;bottom:20%;transform:translate(-50%,0)}
  .gx-intro-copy::before{inset:-14% -10%}
  .gx-hud{max-width:calc(100% - 150px)}
  .gx-menu-lbl{display:none}
  .gx-menu{padding:0 5px}
  .gx-panel{left:0;top:30%;bottom:var(--gx-rail);clip-path:inset(100% 0 0 0);border-radius:14px 14px 0 0}
  .gx-p-scroll{padding:28px 20px 32px}
  .gx-p-hero{flex-direction:column;gap:18px}
  .gx-p-poster{width:120px;display:none}
  .gx-p-title{font-size:30px}
  .gx-p-meta{column-gap:14px;row-gap:6px}
  .gx-p-meta span+span::before{display:none}
  .gx-close{top:12px;right:12px;width:40px;height:40px}
  .gx-panel .gx-close{top:12px;right:12px}
  .gx-drawer{width:100%}
  .gx-panel-shadow{display:none}
  .gx-wall{width:100%;opacity:1}
  .gx-wall img{opacity:.6;filter:saturate(.9) brightness(.9)}
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .gx *,.gx *::before,.gx *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.2s!important;transition-delay:0s!important}
  .gx-p-img.on{animation:none;transform:scale(1.04)}
  .gx-wall.leaving img{transform:none}
}