*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:            #080810;
  --fig:           #4a6080;
  --fig-body:      #3a5068;
  --straw:         #e8c020;
  --mountain:      #0a1220;
  --ground:        rgba(176,184,200,0.22);
  --moon-glow:     rgba(190,205,238,0.18);
  --moon-core:     rgba(210,225,255,0.32);
  --moon-bright:   rgba(245,252,255,0.52);
  --moon-atm:      rgba(178,195,228,0.09);
  --tree:          #0b1620;
  --torii:         #0d1825;
  --mist:          rgba(185,195,215,0.07);
  --path:          rgba(176,184,200,0.08);
  --orange:        #e88522;
  --cloth-roll:    #6898d0;
  --cloth-drape:   rgba(120,180,245,0.72);
  --cloth-edge:    rgba(180,225,255,0.55);
  --horse:         #4a6888;
  --horse-mane:    rgba(105,148,195,0.88);
  --mansion-wall:  #16202e;
  --mansion-roof:  #0e1828;
  --mansion-dark:  #050810;
  --mansion-ridge: rgba(180,192,215,0.42);
  --mansion-light: rgba(240,150,35,0.82);
  --blossom:       rgba(255,205,215,0.0);
}

html, body { width:100%; height:100%; overflow:hidden; background:var(--bg); }

/* ── canvases ── */
#stars, #fx {
  position: fixed; inset: 0;
  pointer-events: none;
}
#stars { z-index: 1; }
#fx    { z-index: 3; }

/* ── grain / scanlines ── */
#grain {
  position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 3px,
    rgba(0,0,0,0.048) 3px, rgba(0,0,0,0.048) 4px
  );
}

/* ── stage ── */
#stage {
  position: relative; width:100vw; height:100vh;
  cursor: pointer; z-index: 2;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
#stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background: radial-gradient(ellipse at 50% 46%, transparent 42%, rgba(4,5,14,0.68) 100%);
}

/* ── screens ── */
.screen {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.97);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}
.screen.active { opacity:1; transform:scale(1); pointer-events:auto; }

/* ── start ── */
#start { flex-direction:column; gap:2.5rem; }
#logo {
  width: clamp(140px,36vmin,260px);
  filter: drop-shadow(0 0 32px rgba(176,184,200,0.22));
  animation: float 5s ease-in-out infinite;
}
.hint {
  color: rgba(176,184,200,0.3);
  font-family:'Noto Serif JP',Georgia,'Times New Roman',serif;
  font-size: .72rem; letter-spacing:.5em;
  animation: blink 3s ease-in-out infinite;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-11px)} }
@keyframes blink { 0%,100%{opacity:.18} 50%{opacity:.9} }

/* ── SVG stage ── */
.stage-svg { position:absolute; inset:0; width:100%; height:100%; }

/* ── SVG element colours ── */
.moon-atm    { fill: var(--moon-atm); }
.moon-glow   { fill: var(--moon-glow); }
.moon-core   { fill: var(--moon-core); }
.moon-bright { fill: var(--moon-bright); }
.mountain    { fill: var(--mountain); }
.ground-line { stroke:var(--ground); stroke-width:1; fill:none; }
.path-road   { fill:none; stroke:var(--path); stroke-width:48; }
.mist        { fill:var(--mist); stroke:none; }

.tree-dark   { fill:none; stroke:var(--tree); }
.torii       { fill:none; stroke:var(--torii); }
.blossom     { stroke:none; }

.fig         { fill:none; stroke:var(--fig); }
.fig-body    { fill:var(--fig-body); stroke:none; }
.fig-head    { fill:var(--fig); stroke:none; }

.horse-body  { fill:var(--horse); stroke:none; }
.horse-neck  { fill:none; stroke:var(--horse); }
.horse-leg   { fill:none; stroke:var(--horse); }
.horse-tail  { fill:none; stroke:var(--horse); }
.horse-mane  { fill:none; stroke:var(--horse-mane); }

.straw-item  { fill:none; stroke:var(--straw); }
.orange-fruit{ fill:var(--orange); stroke:none; }
.cloth-roll  { fill:var(--cloth-roll); stroke:none; }
.cloth-drape { fill:none; stroke:var(--cloth-drape); stroke-width:12; stroke-linecap:round; }
.cloth-edge  { fill:none; stroke:var(--cloth-edge); stroke-width:2; stroke-linecap:round; }
.rope        { fill:none; }

.mansion-wall  { fill:var(--mansion-wall); stroke:none; }
.mansion-roof  { fill:var(--mansion-roof); stroke:none; }
.mansion-dark  { fill:var(--mansion-dark); stroke:none; }
.mansion-ridge { fill:none; stroke:var(--mansion-ridge); }
.mansion-light { fill:var(--mansion-light); stroke:none; }

/* ── scene hide by default ── */
.scene svg * { opacity:0; }

@keyframes appear { from{opacity:0} to{opacity:1} }
@keyframes moon-breathe { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes cloth-shimmer { 0%,100%{opacity:.55} 50%{opacity:.85} }
@keyframes horse-mane-sway {
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(3px)}
}
@keyframes win-flicker { 0%,100%{opacity:.55} 45%{opacity:.72} 70%{opacity:.48} }

/* all layer groups visible immediately (children control timing) */
.scene.active svg .layer-far,
.scene.active svg .layer-mid,
.scene.active svg .layer-near { opacity:1; }

/* moon */
.scene.active svg .moon-atm    { animation: appear 2.0s 0.0s both, moon-breathe 7s 2s ease-in-out infinite; }
.scene.active svg .moon-glow   { animation: appear 1.5s 0.0s both, moon-breathe 7s 2.5s ease-in-out infinite; }
.scene.active svg .moon-core   { animation: appear 1.2s 0.1s both, moon-breathe 7s 3s ease-in-out infinite; }
.scene.active svg .moon-bright { animation: appear 1.0s 0.15s both, moon-breathe 5s 2.2s ease-in-out infinite; }

/* environment */
.scene.active svg .mountain    { animation: appear 1.2s 0.05s both; }
.scene.active svg .ground-line { animation: appear 0.6s 0.0s both; }
.scene.active svg .path-road   { animation: appear 0.8s 0.0s both; }
.scene.active svg .mist        { animation: appear 1.8s 0.0s both; }
.scene.active svg .tree-dark   { animation: appear 1.3s 0.05s both; }
.scene.active svg .torii       { animation: appear 1.0s 0.08s both; }
.scene.active svg .blossom     { animation: appear 1.2s 0.6s both; }

/* figures */
.scene.active svg .fig,
.scene.active svg .fig-body,
.scene.active svg .fig-head    { animation: appear 0.9s 0.38s both; }

/* horse */
.scene.active svg .horse-body  { animation: appear 1.1s 0.42s both; }
.scene.active svg .horse-neck  { animation: appear 1.1s 0.44s both; }
.scene.active svg .horse-leg   { animation: appear 1.0s 0.46s both; }
.scene.active svg .horse-tail  { animation: appear 1.0s 0.48s both; }
.scene.active svg .horse-mane  { animation: appear 0.8s 0.52s both, horse-mane-sway 2.5s 1.3s ease-in-out infinite; }

/* items */
.scene.active svg .straw-item  { animation: appear 0.7s 1.0s both; }
.scene.active svg .orange-fruit{ animation: appear 0.8s 0.85s both; }
.scene.active svg .cloth-roll  { animation: appear 0.7s 0.80s both; }
.scene.active svg .cloth-drape { animation: appear 1.0s 0.85s both, cloth-shimmer 3s 1.9s ease-in-out infinite; }
.scene.active svg .cloth-edge  { animation: appear 0.7s 1.0s both; }
.scene.active svg .rope        { animation: appear 0.6s 0.9s both; }

/* mansion */
.scene.active svg .mansion-wall  { animation: appear 1.2s 0.25s both; }
.scene.active svg .mansion-roof  { animation: appear 1.0s 0.28s both; }
.scene.active svg .mansion-dark  { animation: appear 0.8s 0.35s both; }
.scene.active svg .mansion-ridge { animation: appear 0.8s 0.32s both; }
.scene.active svg .mansion-light { animation: appear 1.0s 0.55s both, win-flicker 4s 1.6s ease-in-out infinite; }

/* ── progress dots ── */
#progress {
  position: absolute; bottom:2.4rem; left:50%; transform:translateX(-50%);
  display:flex; gap:.75rem; z-index:10; pointer-events:none;
  opacity:0; transition:opacity .6s ease;
}
#progress.visible { opacity:1; }
.dot {
  width:5px; height:5px; border-radius:50%;
  border:1px solid rgba(176,184,200,0.26); background:transparent;
  transition: background .4s, border-color .4s, transform .3s;
}
.dot.lit {
  background:rgba(176,184,200,0.62);
  border-color:rgba(176,184,200,0.62);
  transform:scale(1.4);
}

/* ── captions ── */
.caption {
  position:absolute; bottom:5rem; left:50%; transform:translateX(-50%);
  color:rgba(176,184,200,0.22);
  font-family:'Noto Serif JP','Hiragino Mincho ProN','Yu Mincho','MS Mincho',Georgia,serif;
  font-size:.68rem; letter-spacing:.55em; white-space:nowrap;
  z-index:7; opacity:0; pointer-events:none;
  transition:opacity .9s .75s ease;
}
.scene.active .caption { opacity:1; }

/* ── tap ripple ── */
.ripple {
  position:fixed; width:10px; height:10px;
  margin:-5px 0 0 -5px; border-radius:50%;
  border:1px solid rgba(176,184,200,0.48);
  pointer-events:none; z-index:200;
  animation: ripple-out 1.1s cubic-bezier(.15,.5,.3,1) forwards;
}
@keyframes ripple-out {
  from { transform:scale(1); opacity:.65; }
  to   { transform:scale(80); opacity:0; }
}

/* ── Custom cursor ── */
@media (pointer: fine) {
  *, *::before, *::after { cursor: none !important; }
}
#cursor {
  position: fixed;
  width: 6px; height: 6px;
  background: rgba(180,196,220,0.92);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  will-change: left, top;
}
#cursor-ring {
  position: fixed;
  width: 26px; height: 26px;
  border: 1px solid rgba(180,196,220,0.32);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  will-change: left, top;
}
@media (pointer: coarse) {
  #cursor, #cursor-ring { display: none; }
}

/* ── Sound button ── */
#sound-btn {
  position: fixed;
  top: 1.4rem; right: 1.4rem;
  z-index: 60;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(176,184,200,0.18);
  background: transparent;
  color: rgba(176,184,200,0.28);
  font-size: 1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.4s, color 0.4s, opacity 0.6s;
  opacity: 0;
  pointer-events: none;
  user-select: none;
}
#sound-btn.visible {
  opacity: 1;
  pointer-events: auto;
}
#sound-btn.on {
  border-color: rgba(176,184,200,0.4);
  color: rgba(176,184,200,0.65);
}
#sound-btn:hover {
  border-color: rgba(176,184,200,0.42);
  color: rgba(176,184,200,0.72);
}

/* ── Emotional scene enhancements ── */

/* 月の光冠 */
.moon-corona { fill: rgba(175,192,238,0.022); }
.scene.active svg .moon-corona {
  animation: appear 3.5s 0.0s both, moon-breathe 11s 3s ease-in-out infinite;
}

/* Scene 1: 藁の運命の輝き */
@keyframes destiny-straw {
  0%,100% { opacity: 1; }
  45%     { opacity: 0.5; }
  50%     { opacity: 0.5; }
}
#scene-1.active svg .straw-item {
  animation: appear 0.7s 1.0s both, destiny-straw 2.4s 1.8s ease-in-out infinite;
}

/* Scene 2: みかんの温かい輝き */
@keyframes orange-warmth {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.62; }
}
#scene-2.active svg .orange-fruit {
  animation: appear 0.8s 0.85s both, orange-warmth 2.8s 1.5s ease-in-out infinite;
}

/* Scene 3: 反物のシルク輝き */
@keyframes cloth-silk {
  0%,100% { opacity: .55; }
  30%     { opacity: .92; }
  70%     { opacity: .48; }
}
#scene-3.active svg .cloth-drape {
  animation: appear 1.0s 0.85s both, cloth-silk 2.2s 1.6s ease-in-out infinite;
}

/* Scene 4: 馬のたてがみ — より劇的な揺らぎ */
@keyframes mane-dramatic {
  0%,100% { transform: translateX(0)  translateY(0); }
  33%     { transform: translateX(6px) translateY(-3px); }
  66%     { transform: translateX(-4px) translateY(2px); }
}
#scene-4.active svg .horse-mane {
  animation: appear 0.8s 0.52s both, mane-dramatic 1.9s 1.2s ease-in-out infinite;
}

/* Scene 5: 屋敷の窓灯り — 激しい揺らぎ */
@keyframes lantern-flicker {
  0%,100% { opacity: .55; }
  20%     { opacity: .88; }
  45%     { opacity: .50; }
  60%     { opacity: .92; }
  80%     { opacity: .48; }
}
#scene-5.active svg .mansion-light {
  animation: appear 1.0s 0.55s both, lantern-flicker 2.8s 1.0s ease-in-out infinite;
}