/* One approved illustration travels with the persistent sticky stage.
   Day anchors (1162,350); night anchors (1226,376), in 1672×941 source pixels.
   State zero keeps the approved source anchor aligned with the canvas centre.
   Future backplate/skyline/foreground layers can inherit this environment camera. */
:root{--hero-sketch-strength:.575}
/* Reserve the exact control space before deferred scripts reveal their buttons. */
.site-header .theme-toggle[hidden]{display:inline-flex!important;visibility:hidden}
.hero #motion-toggle[hidden]{display:inline-block!important;visibility:hidden}
.story{overflow:clip}
.scene{
  --hero-orb-x:69vw;
  --hero-orb-y:calc((100svh - 80px)*.46);
  --hero-art-width:104vw;
}
.hero-environment{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  transform:translate3d(var(--camera-x,0px),var(--camera-y,0px),0) scale(var(--camera-scale,1));
  transform-origin:var(--hero-orb-x) var(--hero-orb-y);
  opacity:calc(var(--intro-environment,1)*var(--environment-light,1));
  will-change:transform,opacity;
}
.hero-art{
  position:absolute;left:var(--hero-orb-x);top:var(--hero-orb-y);
  width:var(--hero-art-width);aspect-ratio:1672/941;
  transform:translate(-69.5%,-37.2%);
  opacity:var(--hero-sketch-strength);
  background-image:url('/jointheparty-assets/home-v1/jtp-party-os-hero-neon-sketch-night-v2.png');
  background-image:image-set(
    url('/jointheparty-assets/home-v1/jtp-party-os-hero-neon-sketch-night-v2.avif') type('image/avif'),
    url('/jointheparty-assets/home-v1/jtp-party-os-hero-neon-sketch-night-v2.webp') type('image/webp'),
    url('/jointheparty-assets/home-v1/jtp-party-os-hero-neon-sketch-night-v2.png') type('image/png')
  );
  background-size:100% 100%;background-repeat:no-repeat;
  /* Feather the single image into the existing ambient room light. */
  mask-image:linear-gradient(transparent,#000 12%,#000 82%,transparent),linear-gradient(90deg,transparent,#000 8%,#000 94%,transparent);
  mask-composite:intersect;
}
html:not([data-theme="day"]) .hero-art{
  transform:translate(-73.325%,-39.958%);
  opacity:.72;
}
html[data-theme="day"] .hero-art{
  background-image:url('/jointheparty-assets/home-v1/jtp-party-os-hero-day-sketch-v1.png');
  background-image:image-set(
    url('/jointheparty-assets/home-v1/jtp-party-os-hero-day-sketch-v1.avif') type('image/avif'),
    url('/jointheparty-assets/home-v1/jtp-party-os-hero-day-sketch-v1.webp') type('image/webp'),
    url('/jointheparty-assets/home-v1/jtp-party-os-hero-day-sketch-v1.png') type('image/png')
  );
}
.scene-object{z-index:1}
.scene-aura{opacity:var(--environment-light,1)}
.scene-caption::before{
  content:"";position:absolute;inset:-14px -25px;z-index:-1;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--midnight) 85%,transparent) 28%,transparent 72%);
}
.hero-foot{isolation:isolate;min-height:70px}
.hero-foot::before{
  content:"";position:absolute;inset:-25px -70px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--midnight) 90%,transparent) 20%,transparent 74%);
}
.hero #motion-toggle{background:transparent}
.chapter-copy{isolation:isolate;background:transparent}
.chapter-copy::before{
  content:"";position:absolute;inset:-65px -85px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 43% 48%,color-mix(in srgb,var(--midnight) 93%,transparent) 12%,color-mix(in srgb,var(--midnight) 75%,transparent) 40%,transparent 73%);
}
@media(min-width:1800px){.scene{--hero-orb-x:calc(46vw + 400px)}}
@media(max-width:1050px){.scene{--hero-orb-x:71vw}}
@media(max-width:800px){.scene{--hero-orb-x:73vw;--hero-orb-y:calc((100svh - 72px)*.46)}}
@media(max-width:600px){
  /* A compact persistent stage sits above the flowing copy, like a second header. */
  .scene{--hero-orb-x:50vw;--hero-orb-y:90px;--hero-art-width:max(430px,110vw)}
  .chapter-copy{background:var(--midnight)}
  .chapter-copy::before{inset:0 -20px;background:var(--midnight)}
  .hero-art{mask-image:linear-gradient(#000 58%,transparent 93%),linear-gradient(90deg,transparent,#000 10%,#000 84%,transparent)}
  .hero-foot{min-height:0}
  #skip-intro{right:20px;bottom:16px}
}
html[data-motion="paused"] .hero-environment{transform:none!important;opacity:1!important}
@media(prefers-reduced-motion:reduce){.hero-environment{transform:none!important;opacity:1!important;will-change:auto}}
@media print{.hero-environment{display:none}}