/* One painted background and one opaque mascot. Motion changes position,
   never crossfades a duplicate scene or a second silhouette. */
body .hero-showcase {
  --hero-look-x: 0; --hero-look-y: 0;
  --ambient-fill: #f2ccbb; --ambient-edge: #b78b77; --ambient-thread: #fff5e7;
  background-size: cover,cover !important;
  background-position: center,center !important;
  background-repeat: no-repeat;
}
body[data-theme-preset='sakura'] .hero-showcase { --ambient-fill: #efbacb; --ambient-edge: #b67991; --ambient-thread: #fff1f1; }
body[data-theme-preset='matcha'] .hero-showcase { --ambient-fill: #b9cfa5; --ambient-edge: #718567; --ambient-thread: #eef2de; }
body[data-theme-preset='mist'] .hero-showcase { --ambient-fill: #d3e1eb; --ambient-edge: #819cad; --ambient-thread: #fffaf0; }
body[data-theme-preset='berry'] .hero-showcase { --ambient-fill: #e8c5d0; --ambient-edge: #b788a1; --ambient-thread: #fff0dd; }
body[data-theme-preset='cocoa'] .hero-showcase { --ambient-fill: #e8c49a; --ambient-edge: #b18b65; --ambient-thread: #fff0d9; }
/* Retire the old light washes, orbit rings, and duplicate-scene layers. */
body .hero-showcase::before, body .hero-showcase::after,
body .hero-showcase :is(.showcase-warmth,.showcase-scenery,.showcase-rest-pose,.art-orbit,.art-spark) { display: none; }
body .hero-showcase .showcase-copy { position: relative; z-index: 2; }
body .hero-showcase .showcase-art {
  z-index: 1; opacity: 1 !important;
  transform: translate3d(0,0,0);
}
body .hero-showcase .showcase-art > img {
  opacity: 1 !important; visibility: visible; transform-origin: center 88%;
  transition: none !important; animation: none !important;
  filter: drop-shadow(0 9px 10px #281c202b);
}
body .hero-showcase .hero-atmosphere {
  position: absolute; top: 0; right: 0; width: 58%; height: 100%; z-index: 0;
  overflow: hidden; pointer-events: none; opacity: 1;
}
.hero-atmosphere [data-scene] { display: none; }
.hero-atmosphere[data-theme='cream'] [data-scene='cream'],
.hero-atmosphere[data-theme='sakura'] [data-scene='sakura'],
.hero-atmosphere[data-theme='matcha'] [data-scene='matcha'],
.hero-atmosphere[data-theme='mist'] [data-scene='mist'],
.hero-atmosphere[data-theme='berry'] [data-scene='berry'],
.hero-atmosphere[data-theme='cocoa'] [data-scene='cocoa'] { display: inline; }
/* Simple selectors also style the SVG <use> shadow tree. */
.hero-motif-fabric { fill: var(--ambient-fill); stroke: var(--ambient-edge); stroke-width: 1.15; stroke-linejoin: round; }
.hero-motif-stitch { fill: none; stroke: var(--ambient-thread); stroke-width: 1.1; stroke-dasharray: 1.5 2.5; stroke-linecap: round; }
.hero-motif-steam { fill: none; stroke: var(--ambient-thread); stroke-width: 1.9; stroke-linecap: round; }
.hero-atmosphere .ambient-float { transform-box: fill-box; transform-origin: center; }
@keyframes hero-motif-drift {
  0%, 100% { transform: translate(-6px,-4px) rotate(-7deg); }
  50% { transform: translate(13px,10px) rotate(9deg); }
}
/* Independent scale leaves the pose animation's transform untouched. Pause at
   the current breath during a pose change, then resume without a reset jump. */
@keyframes hero-cat-breathe {
  0%, 100% { scale: 1 1; }
  50% { scale: 1.008 1.026; }
}
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion='off']) body:not([data-motion='off']) .hero-showcase .showcase-art > img {
    animation: hero-cat-breathe 4.4s ease-in-out infinite paused !important;
  }
  html:not([data-motion='off']) body:not([data-motion='off']) .hero-showcase[data-hero-motion='ready'][data-hero-transition='idle'] .showcase-art > img {
    animation-play-state: running !important;
  }
}
@media (min-width: 561px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not([data-motion='off']) body:not([data-motion='off']) .hero-showcase {
    background-size: cover,var(--hero-scene-size,cover) !important;
    background-position: center,calc(50% + var(--hero-look-x) * 12px) calc(50% + var(--hero-look-y) * 8px) !important;
    transition: background-position .7s cubic-bezier(.22,.61,.36,1);
  }
  html:not([data-motion='off']) body .hero-showcase .showcase-art {
    transform: translate3d(calc(var(--hero-look-x) * 6px),calc(var(--hero-look-y) * 3px),0) rotate(calc(var(--hero-look-x) * .45deg));
    transition: transform .4s cubic-bezier(.22,.61,.36,1);
  }
  .hero-atmosphere .ambient-float { animation: hero-motif-drift 3.8s ease-in-out infinite paused; }
  .hero-atmosphere .ambient-phase-2 { animation-duration: 4.6s; animation-delay: -2s; }
  .hero-atmosphere .ambient-phase-3 { animation-duration: 4.2s; animation-delay: -1s; }
  html:not([data-motion='off']) body .hero-showcase.is-cozy .hero-atmosphere .ambient-float { animation-play-state: running; }
}
body .hero-showcase.hero-motion-reset,
body .hero-showcase.hero-motion-reset .showcase-art,
body .hero-showcase[data-hero-motion='paused'],
body .hero-showcase[data-hero-motion='paused'] .showcase-art { transition: none !important; }
@media (max-width: 860px) and (min-width: 561px) {
  body .hero-showcase { grid-template-columns: minmax(0,1fr) minmax(205px,.8fr); gap: 12px; }
  body .hero-showcase .showcase-art { position: relative; inset: auto; width: auto; min-height: 220px; }
  body .hero-showcase .showcase-copy h2 { font-size: clamp(29px,4vw,36px); }
  body .hero-showcase .showcase-art > img { max-width: 100%; max-height: 270px; }
  body .hero-showcase .art-sticker { width: 50px; height: 50px; right: -9px; bottom: 0; }
  body .hero-showcase .hero-atmosphere { width: 52%; }
}
@media (max-width: 560px) {
  html body .hero-showcase { background-size: cover,cover !important; background-position: center,center !important; }
  body .hero-showcase .showcase-art { opacity: 1 !important; }
  body .hero-showcase .hero-atmosphere { display: none; }
}