/* Local revision: preserve the existing headline, palette and neon dissolve.
   Layer scale: background/car/cans 0–1, character 2 inside stage,
   shade 1 outside stage, logo 2, headline 3, controls/updates 5. */
.hero-layered { min-height: 720px; }
.hero-layered .hero-backdrop { position: absolute; inset: 0; }
.hero-layered .hero-backdrop img {
  width: 100%; height: 100%; object-fit: cover; object-position: 55% 58%;
  opacity: .88;
}
.hero-layered .hero-art { z-index: 2; }
/* Both originals share the same 5000×7000 canvas. One transform aligns
   face, headphones and hip exactly; ears do not affect the framing. */
.hero-layered .hero-slide .hero-character {
  position: absolute; top: 1.4%; right: 8%;
  height: 148%; width: auto; max-width: none;
  object-fit: contain; object-position: center;
}
.hero-layered .hero-shade {
  background:
    linear-gradient(90deg, #080217 0%, #0d0323f2 24%, #0d0323b3 37%, #0d032338 52%, transparent 68%),
    linear-gradient(0deg, #090316 0%, #090316e0 8%, #09031633 26%, transparent 46%),
    linear-gradient(180deg, #0a032482, transparent 20%);
}
.hero-layered .hero-canvas-piece { position: absolute; overflow: hidden; pointer-events: none; }
.hero-layered .hero-canvas-piece img { display: block; position: absolute; max-width: none; height: auto; }
/* Crop only transparent canvas margins in CSS. Source PNG bytes stay intact. */
.hero-layered .hero-car {
  z-index: 1; width: clamp(230px, 24vw, 440px); aspect-ratio: 2184 / 1897;
  right: 1%; bottom: 100px; opacity: .95;
}
.hero-layered .hero-car img { width: 231.68498%; left: -125.96154%; top: -120.61149%; }
.hero-layered .hero-cans {
  z-index: 1; width: clamp(170px, 20vw, 340px); aspect-ratio: 2363 / 1464;
  right: 1.5%; bottom: 123px; opacity: .8;
}
.hero-layered .hero-cans img { width: 214.13457%; left: -104.18959%; top: -234.63115%; }
.hero-layered .hero-album-logo {
  z-index: 2; top: 116px; right: var(--pad);
  width: clamp(160px, 14vw, 238px); aspect-ratio: 2252 / 1071;
  opacity: 0; transform: translateY(14px);
  filter: drop-shadow(0 5px 13px #0a0324);
}
.hero-layered .hero-album-logo img { width: 224.68917%; left: -119.27176%; top: -351.07376%; }
.hero-layered.is-logo-ready .hero-album-logo { animation: hero-logo-arrive 1.1s .15s cubic-bezier(.2,.8,.2,1) both; }
@keyframes hero-logo-arrive { to { opacity: 1; transform: translateY(0); } }
.hero-layered .release-stamp { top: 242px; right: var(--pad); width: 100px; height: 100px; }
.hero-layered .hero-copy { top: calc(50% - 50px); }
.hero-layered .scroll-cue { display: none; }
.hero-layered .hero-carousel-controls { bottom: 32px; }
.hero-layered .hero-updates {
  position: absolute; z-index: 5; left: var(--pad); bottom: 27px;
  width: min(650px, 52%); color: #e8ddf4;
}
.hero-updates-label { margin: 0 0 9px; color: var(--cyan); font-size: 10px; font-weight: 750; letter-spacing: .15em; }
.hero-updates a {
  display: grid; grid-template-columns: 84px minmax(0, 1fr) 16px; gap: 17px;
  padding: 4px 0; color: inherit; text-decoration: none; font-size: 11px; line-height: 1.55;
  transition: color .2s;
}
.hero-updates time { font-size: 10px; color: #ad9fbe; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.hero-updates b { font-size: 12px; font-weight: 400; color: #a0c8d4; }
.hero-updates a:hover { color: var(--cyan); }
.hero-updates a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.hero-layered .hero-neon-sweep, .hero-layered .hero-neon-horizon { z-index: 3; }
@media (min-width: 1800px) {
  .hero-layered .hero-slide .hero-character { right: 11%; }
}
@media (max-width: 1100px) and (min-width: 601px) {
  .hero-layered .hero-slide .hero-character { right: -7%; height: 144%; top: 3%; }
  .hero-layered .hero-album-logo { width: 154px; top: 106px; right: 24px; }
  .hero-layered .release-stamp { top: 198px; right: 24px; width: 86px; height: 86px; }
  .hero-layered .hero-car { right: -4%; width: 250px; bottom: 160px; }
  .hero-layered .hero-updates { width: 47%; }
  .hero-updates a { grid-template-columns: 75px minmax(0,1fr) 12px; gap: 10px; }
  .hero-layered .hero-copy { width: 52%; }
}
@media (max-width: 900px) and (min-width: 601px) {
  .hero-layered .hero-slide .hero-character { right: -12%; height: 112%; top: 16%; }
  .hero-layered .hero-copy { width: 44%; }
  .hero-layered .hero-actions { flex-direction: column; width: 210px; gap: 10px; }
}
@media (max-width: 600px) {
  .hero.hero-layered { height: auto; min-height: 1020px; padding: 456px 22px 24px; }
  .hero-layered .hero-stage { height: 560px; bottom: auto; }
  .hero-layered .hero-backdrop img { object-position: 52% 36%; }
  .hero-layered .hero-slide .hero-character { right: -3%; height: 148%; top: 2%; }
  .hero-layered .hero-shade {
    background:
      linear-gradient(0deg, #090316 0%, #090316 43%, #090316d9 50%, transparent 67%),
      linear-gradient(90deg, #0a032433, transparent 45%),
      linear-gradient(180deg, #0a032466, transparent 13%);
  }
  .hero-layered .hero-car { width: 160px; bottom: 48px; right: -10px; }
  .hero-layered .hero-cans { width: 160px; bottom: 26px; right: -6px; }
  .hero-layered .hero-album-logo { top: 91px; right: 19px; width: 117px; }
  .hero-layered .release-stamp { top: 359px; right: 21px; width: 78px; height: 78px; }
  .hero-layered .hero-copy,
  .hero-layered .hero-copy.reveal,
  .hero-layered .hero-copy.reveal.visible,
  .hero-layered.has-visual-carousel .hero-copy.reveal.visible {
    position: relative; top: auto; bottom: auto; left: auto; width: 100%; transform: none;
  }
  .hero-layered .hero-copy h1 { font-size: clamp(70px, 21vw, 88px); margin-top: 18px; }
  .hero-layered .eyebrow { font-size: 8px; letter-spacing: .24em; margin-top: 0; }
  .hero-layered .subtitle { margin: 17px 0; font-size: 12px; }
  .hero-layered .hero-copy .jp-title { font-size: 15px; line-height: 1.6; margin: 16px 0; }
  html[lang="zh-CN"] .hero-layered .jp-title { font-size: 16px; }
  .hero-layered .hero-meta { flex-direction: row; gap: 10px; margin-top: 15px; font-size: 7px; letter-spacing: .08em; }
  .hero-layered .hero-actions { width: 100%; flex-direction: row; gap: 9px; margin-top: 19px; }
  .hero-layered .hero-actions .btn { min-width: 0; flex: 1; padding: 0 12px; height: 48px; font-size: 10px; letter-spacing: 0; }
  .hero-layered .hero-carousel-controls { position: relative; left: auto; right: auto; bottom: auto; margin: 24px 0; justify-items: start; }
  .hero-layered .hero-updates { position: relative; left: auto; bottom: auto; width: 100%; }
  .hero-updates a { font-size: 10px; gap: 9px; grid-template-columns: 73px minmax(0,1fr) 12px; }
  .hero-updates time { font-size: 9px; }
  .hero-updates-label { font-size: 9px; margin-bottom: 7px; }
}
@media (max-width: 350px) {
  .hero-layered .hero-slide .hero-character { right: -27%; }
  .hero-layered .hero-album-logo { width: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-layered.is-logo-ready .hero-album-logo { animation: none; opacity: 1; transform: none; }
  .hero-layered .hero-art { transform: none !important; }
}