@import url('./home.css');

/* The original illustration and one native video share the exact cover crop.
   No cutout, clean plate, mesh, animated body patch or replacement background. */
.video-draft #anime-video{
 position:absolute;inset:0;display:block;width:100%;height:100%;
 object-fit:cover;object-position:50% 55%;
 transform:translate(var(--scene-x),var(--scene-y)) scale(1.025);
 opacity:0;pointer-events:none;background:transparent;
}
.video-draft.video-ready #anime-video{opacity:1}
.video-draft.video-ready .anime-background{opacity:0}
.video-draft #home-scene{pointer-events:none}
/* 20: real-time layers (girl clip, books) share the painting's exact parallax
   transform, so the browser composites them with the image in the same frame. */
.world-layer{
 position:absolute;inset:0;overflow:hidden;pointer-events:none;
 transform:translate(var(--scene-x),var(--scene-y)) scale(1.025);
}
.video-draft .preview-label{max-width:310px}
@media(max-width:700px){
 .video-draft #anime-video{object-position:88% 55%}
 .video-draft .preview-label{max-width:none}
}
@media(prefers-reduced-motion:reduce){
 .video-draft #anime-video,.world-layer{transform:none}
}

/* motion and music buttons side by side */
.footer-controls{display:flex;align-items:center;gap:8px;flex:none}
.footer-controls .motion-toggle{white-space:nowrap}
.music-toggle svg{stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.music-toggle[aria-pressed="false"]{opacity:.82}
.music-toggle[aria-pressed="true"]{border-color:#e6c27a99;color:#fbeecd}
/* a 30 KB copy of the background shows at once; the full picture paints over it (same crop) */
.video-draft .anime-background{background:#1b2246 url(home20/plate-preview.webp) no-repeat;background-size:cover;background-position:50% 55%}
/* header: four nav items (五十音 added 2026-10-18) must stay on one line on narrow phones */
@media(max-width:420px){.home-header{gap:10px}.home-header nav{gap:10px}.home-header nav button,.home-brand strong,.home-brand small{white-space:nowrap}}
@media(max-width:360px){.home-header{padding:16px 12px;gap:6px}.home-header nav{gap:8px}.home-brand{gap:6px}.home-brand small{display:none}.home-header .conjugation-entry{font-size:11px}}
@media(max-width:340px){.home-header{padding:16px 10px;gap:4px}.home-header nav{gap:4px}}