/* The existing static composition is the fallback until WebGL renders. */
.orbit-scene { position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity 1.2s ease; }
.orbit-scene canvas { display:block; width:100%; height:100%; }
.hero.has-orbit .orbit-scene { opacity:1; }
.hero.has-orbit { min-height:820px; padding-top:85px; padding-bottom:125px; }
.hero.has-orbit:after { z-index:0; pointer-events:none; background:linear-gradient(90deg,#090e1090 0%,transparent 58%),linear-gradient(0deg,#090e10,transparent 20%); }
.hero.has-orbit .hero-atmosphere { opacity:.11; }
.hero-copy, .hero-release, .hero-bottom, .motion-toggle { position:relative; z-index:1; }
.hero-bottom { position:absolute; }
.hero.has-orbit .hero-release { max-width:270px; align-self:end; margin-right:0; margin-bottom:-15px; transform:rotate(4deg); }
.hero.has-orbit .featured-art { border-color:#74efb750; box-shadow:0 25px 70px #000b,0 0 35px #74efb714; }
.hero.has-orbit .release-caption { transform:rotate(-4deg); }
.hero.has-orbit .release-caption { gap:16px; }
.hero.has-orbit .release-caption .eyebrow { display:block; line-height:1.6; }
.hero.has-orbit .release-format { flex-shrink:0; }
.hero.has-orbit h1 em { color:#a4ffcc; text-shadow:0 0 65px #53eaa935; }
.motion-toggle { position:absolute; top:23px; right:6%; border:1px solid #5a7c7270; border-radius:24px; color:#b8d4c8; background:#0b171bcc; padding:9px 15px; font:500 12px/1.4 'DM Sans',sans-serif; cursor:pointer; letter-spacing:.04em; }
.motion-toggle:hover { color:#bfffe1; border-color:#74efb7; }
.motion-toggle[hidden] { display:none; }
.motion-toggle:before { content:''; display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:#74efb7; box-shadow:0 0 10px #74efb755; }
.motion-toggle[aria-pressed=false]:before { background:#7c8e89; box-shadow:none; }
.featured-art, .art { transform:perspective(850px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .35s ease,box-shadow .35s ease; }
.art:after { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at var(--shine-x,50%) var(--shine-y,40%),#baffe32b,transparent 65%); opacity:0; transition:opacity .3s; }
.art:hover:after { opacity:1; }
.release-grid article a:hover h3 { color:#a4ffcc; }
.reveal.is-visible { animation:arrive .8s both cubic-bezier(.2,.75,.2,1); animation-delay:var(--reveal-delay,0ms); }
@keyframes arrive { from { opacity:.2; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
html[data-motion=on] .has-orbit .hero-release { animation:levitate 7s ease-in-out infinite; }
@keyframes levitate { 0%,100% { transform:translateY(0) rotate(4deg); } 50% { transform:translateY(-12px) rotate(2deg); } }
html[data-motion=off] .reveal, html[data-motion=off] .hero-release { animation:none!important; }
html[data-motion=off] .featured-art, html[data-motion=off] .art { transform:none; }
@media(min-width:701px) {
  /* The planet and release occupy separate grid cells, never overlapping layers. */
  .hero.has-orbit { grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); grid-template-rows:auto auto; align-content:center; align-items:center; gap:20px 4%; min-height:760px; padding:65px 6% 100px; }
  .hero.has-orbit .hero-copy { grid-column:1; grid-row:1 / 3; }
  .hero.has-orbit .orbit-scene { position:relative; inset:auto; grid-column:2; grid-row:1; width:100%; height:clamp(360px,32vw,520px); }
  .hero.has-orbit .hero-release { grid-column:2; grid-row:2; display:grid; grid-template-columns:96px minmax(0,1fr); gap:20px; align-items:center; align-self:start; justify-self:center; width:100%; max-width:440px; margin:0; padding:16px; border:1px solid #74efb72b; border-radius:12px; background:#101719; transform:none; }
  html[data-motion=on] .hero.has-orbit .hero-release { animation:none; }
  .hero.has-orbit .featured-art { width:100%; border-radius:4px; box-shadow:0 8px 20px #0005; transform:none; }
  .hero.has-orbit .release-caption { display:block; min-width:0; margin:0; transform:none; }
  .hero.has-orbit .release-caption .eyebrow { font-size:10px; letter-spacing:.07em; line-height:1.5; margin:0 0 6px; }
  .hero.has-orbit .release-caption h2 { font-size:28px; line-height:1.15; margin:0; }
  .hero.has-orbit .release-format { display:none; }
  .hero.has-orbit .actions { flex-wrap:wrap; }
}
@media(max-width:900px) and (min-width:701px) {
  .hero.has-orbit { gap:20px 3%; padding-left:5%; padding-right:5%; }
  .hero.has-orbit h1 { font-size:clamp(58px,8vw,72px); }
  .hero.has-orbit .hero-release { grid-template-columns:72px minmax(0,1fr); gap:14px; padding:14px; }
}
@media(max-width:700px) {
  .hero.has-orbit { display:grid; grid-template-columns:minmax(0,1fr); align-items:stretch; min-height:0; padding:75px 6% 24px; gap:0; }
  .hero.has-orbit .hero-copy { grid-row:1; }
  /* Give the mobile planet its own row, independent of text and artwork height. */
  .hero.has-orbit .orbit-scene { position:relative; inset:auto; grid-row:2; width:calc(100% + 12vw); height:clamp(280px,95vw,480px); margin:8px -6vw 12px; }
  .hero.has-orbit .hero-release { grid-row:3; display:grid; grid-template-columns:88px minmax(0,1fr); gap:18px; align-items:center; align-self:auto; justify-self:stretch; width:100%; max-width:none; margin:0; padding:16px; border:1px solid #74efb72b; border-radius:12px; background:#101719; transform:none; }
  html[data-motion=on] .hero.has-orbit .hero-release { animation:none; }
  .hero.has-orbit .featured-art { width:100%; border-radius:4px; box-shadow:0 8px 20px #0005; transform:none; }
  .hero.has-orbit .release-caption { display:block; min-width:0; margin:0; transform:none; }
  .hero.has-orbit .release-caption .eyebrow { font-size:10px; letter-spacing:.07em; line-height:1.5; margin:0 0 6px; }
  .hero.has-orbit .release-caption h2 { font-size:28px; line-height:1.15; margin:0; }
  .hero.has-orbit .release-format { display:none; }
  .hero.has-orbit .hero-bottom { position:relative; grid-row:4; inset:auto; margin-top:30px; gap:16px; font-size:10px; }
  .hero.has-orbit .hero-bottom>span:nth-child(2) { display:none; }
  .hero.has-orbit:after { background:linear-gradient(0deg,#090e10,transparent 25%),linear-gradient(180deg,#090e1033,transparent 50%); }
  .motion-toggle { top:20px; font-size:12px; padding:8px 12px; }
}
@media(prefers-reduced-motion:reduce) { .reveal.is-visible { animation:none; } .orbit-scene { transition:none; } }
@media(min-width:1800px) {
  .hero.has-orbit { padding-inline:var(--wide-gutter); column-gap:72px; }
  .motion-toggle { right:var(--wide-gutter); }
  .hero.has-orbit:after { background:linear-gradient(90deg,#090e10,transparent 18%,transparent 82%,#090e10),linear-gradient(90deg,#090e1090,transparent 58%),linear-gradient(0deg,#090e10,transparent 20%); }
}