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

:root {
  --bg:            #020610;
  --straw:         #e0b818;
  --straw-glow:    rgba(220,175,24,0.85);
  --mountain:      #0a1220;
  --ground:        rgba(176,184,200,0.20);
  --moon-glow:     rgba(192,208,242,0.17);
  --moon-core:     rgba(214,228,255,0.30);
  --moon-bright:   rgba(248,254,255,0.50);
  --moon-atm:      rgba(180,198,232,0.08);
  --tree:          #090f1c;
  --torii:         #0c1524;
  --mist:          rgba(188,198,218,0.065);
  --path:          rgba(176,184,200,0.07);
  --orange:        #e08018;
  --cloth-roll:    #5a8ec8;
  --cloth-drape:   rgba(118,178,248,0.68);
  --cloth-edge:    rgba(185,228,255,0.52);
  --horse-fill:    rgba(55,75,105,0.85);
  --horse-mane:    rgba(108,152,200,0.90);
  --horse-body-c:  rgba(52,70,96,0.80);
  --horse-leg-c:   rgba(58,78,108,0.88);
  --horse-tail-c:  rgba(95,128,172,0.82);
  --mansion-wall:  #131d2c;
  --mansion-dark:  #040810;
  --mansion-ridge: rgba(185,196,220,0.40);
  --mansion-light: rgba(242,148,30,0.80);
  --blossom:       rgba(255,205,215,0.0);
  --figure:        rgba(6,12,28,0.82);
}

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

/* ── canvases ── */
#bg, #stars, #fx {
  position: fixed; inset: 0;
  pointer-events: none;
}
#bg    { z-index: 0; }
#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.040) 3px, rgba(0,0,0,0.040) 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% 48%, transparent 40%, rgba(2,4,14,0.72) 100%);
}

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

/* ── start ── */
#start { flex-direction: column; gap: 2.8rem; }

#logo {
  width: clamp(200px, 52vmin, 420px);
  filter: drop-shadow(0 0 36px rgba(178,188,215,0.20));
  /* 入場スパイラル → アイドル浮遊＋揺れ */
  animation:
    logo-entrance 3.8s linear both,
    logo-idle     7.0s ease-in-out 3.8s infinite;
  transition: filter 1.2s ease;
  transform-origin: center center;
}
#logo.launching {
  animation: logo-launch 2.4s linear forwards !important;
}
#logo.returning {
  animation: logo-return 1.1s cubic-bezier(.22,.8,.28,1) both !important;
}
#logo.arrived {
  filter: drop-shadow(0 0 52px rgba(215,168,40,0.40))
          drop-shadow(0 0 20px rgba(210,155,30,0.32));
}

/* ── Logo keyframes ── */

/* 入場: ゼロから超ゆっくり → じわじわ加速 → フルスピン → 正位置に着地 */
@keyframes logo-entrance {
  0%   { opacity: 0;    transform: scale(0.06) rotate(0deg); }
  6%   { opacity: 0.10; transform: scale(0.09) rotate(5deg); }
  14%  { opacity: 0.32; transform: scale(0.18) rotate(28deg); }
  24%  { opacity: 0.58; transform: scale(0.34) rotate(90deg); }
  35%  { opacity: 0.78; transform: scale(0.54) rotate(210deg); }
  47%  { opacity: 0.92; transform: scale(0.73) rotate(380deg); }
  58%  { opacity: 1;    transform: scale(0.90) rotate(520deg); }
  68%  { opacity: 1;    transform: scale(1.00) rotate(660deg); }
  76%  { transform: scale(1.11) rotate(726deg); }
  84%  { transform: scale(0.94) rotate(714deg); }
  91%  { transform: scale(1.04) rotate(721deg); }
  96%  { transform: scale(0.99) rotate(718deg); }
  100% { opacity: 1;    transform: scale(1.00) rotate(720deg); }
}

/* アイドル: 浮遊＋ゆるやかな揺れ */
@keyframes logo-idle {
  0%   { transform: translateY(0)    rotate(0deg); }
  22%  { transform: translateY(-8px) rotate(3deg); }
  50%  { transform: translateY(-14px) rotate(0deg); }
  78%  { transform: translateY(-8px) rotate(-3deg); }
  100% { transform: translateY(0)    rotate(0deg); }
}

/* タップ: 黄金チャージ → じわじわ加速 → フルスピンで消える */
@keyframes logo-launch {
  0%   { transform: scale(1.00) rotate(0deg);   opacity: 1;    filter: drop-shadow(0 0 36px rgba(178,188,215,0.22)); }
  8%   { transform: scale(1.10) rotate(0deg);   opacity: 1;    filter: drop-shadow(0 0 72px rgba(226,180,48,0.95)) drop-shadow(0 0 28px rgba(255,215,80,0.65)); }
  16%  { transform: scale(0.96) rotate(4deg);   opacity: 1;    filter: drop-shadow(0 0 48px rgba(218,168,38,0.68)); }
  24%  { transform: scale(1.08) rotate(24deg);  opacity: 1;    filter: drop-shadow(0 0 56px rgba(205,150,30,0.76)); }
  36%  { transform: scale(1.12) rotate(92deg);  opacity: 1;    filter: drop-shadow(0 0 36px rgba(175,122,22,0.46)); }
  49%  { transform: scale(1.14) rotate(240deg); opacity: 1;    filter: none; }
  62%  { transform: scale(1.11) rotate(435deg); opacity: 0.90; }
  74%  { transform: scale(1.02) rotate(630deg); opacity: 0.68; }
  88%  { transform: scale(0.84) rotate(790deg); opacity: 0.38; }
  100% { transform: scale(0.58) rotate(924deg); opacity: 0.05; }
}

/* 帰還: 逆回転しながら降りてくる */
@keyframes logo-return {
  0%   { opacity: 0;   transform: scale(0.30) rotate(220deg); }
  45%  { opacity: 0.9; transform: scale(0.90) rotate(28deg); }
  65%  { opacity: 1;   transform: scale(1.10) rotate(-10deg); }
  80%  { transform: scale(0.96) rotate(4deg); }
  90%  { transform: scale(1.03) rotate(-1.5deg); }
  100% { opacity: 1;   transform: scale(1.00) rotate(0deg); }
}

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

/* ── 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); }
.moon-corona   { fill: rgba(175,195,242,0.018); }
.mountain      { fill: var(--mountain); }
.ground-line   { stroke: var(--ground); stroke-width: 1; fill: none; }
.path-road     { fill: none; stroke: var(--path); stroke-width: 52; }
.mist          { fill: var(--mist); stroke: none; }

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

.figure        { fill: var(--figure); }

.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: 14; stroke-linecap: round; }
.cloth-edge    { fill: none; stroke: var(--cloth-edge); stroke-width: 2.5; stroke-linecap: round; }

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

.mansion-wall  { fill: var(--mansion-wall); 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; }

/* ── Hide animated elements by default (scene hidden) ── */
.scene svg .moon-corona,
.scene svg .moon-atm,
.scene svg .moon-glow,
.scene svg .moon-core,
.scene svg .moon-bright,
.scene svg .mountain,
.scene svg .ground-line,
.scene svg .path-road,
.scene svg .mist,
.scene svg .tree-dark,
.scene svg .torii,
.scene svg .blossom,
.scene svg .figure,
.scene svg .straw-halo,
.scene svg .straw-offer-group,
.scene svg .straw-item,
.scene svg .orange-fruit,
.scene svg .orange-fade-group,
.scene svg .cloth-offer-group,
.scene svg .cloth-roll,
.scene svg .cloth-drape,
.scene svg .cloth-edge,
.scene svg .horse-group,
.scene svg .horse-body-path,
.scene svg .horse-neck,
.scene svg .horse-leg,
.scene svg .horse-tail,
.scene svg .horse-mane,
.scene svg .mansion-wall,
.scene svg .mansion-dark,
.scene svg .mansion-ridge,
.scene svg .mansion-light { opacity: 0; }

/* ── scene active: layer groups visible ── */
.scene.active svg .layer-far,
.scene.active svg .layer-mid,
.scene.active svg .layer-near { opacity: 1; }

/* ── appear keyframe ── */
@keyframes appear        { from{opacity:0} to{opacity:1} }
@keyframes appear-up     { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ── Moon animations ── */
@keyframes moon-breathe  { 0%,100%{opacity:1} 50%{opacity:.38} }

.scene.active svg .moon-corona { animation: appear 3.8s 0.0s both, moon-breathe 14s 4s  ease-in-out infinite; }
.scene.active svg .moon-atm    { animation: appear 2.2s 0.0s both, moon-breathe  9s 2s  ease-in-out infinite; }
.scene.active svg .moon-glow   { animation: appear 1.7s 0.0s both, moon-breathe  9s 2.5s ease-in-out infinite; }
.scene.active svg .moon-core   { animation: appear 1.3s 0.1s both, moon-breathe  9s 3s  ease-in-out infinite; }
.scene.active svg .moon-bright { animation: appear 1.1s 0.1s both, moon-breathe  6s 2.2s ease-in-out infinite; }

/* ── Environment ── */
.scene.active svg .mountain    { animation: appear 1.4s 0.05s both; }
.scene.active svg .ground-line { animation: appear 0.7s 0.0s  both; }
.scene.active svg .path-road   { animation: appear 0.9s 0.0s  both; }
.scene.active svg .mist        { animation: appear 2.0s 0.0s  both; }
.scene.active svg .tree-dark   { animation: appear 1.5s 0.04s both; }
.scene.active svg .torii       { animation: appear 1.2s 0.06s both; }
.scene.active svg .blossom     { animation: appear 1.4s 0.7s  both; }
.scene.active svg .figure      { animation: appear 1.0s 0.5s  both; }

/* ── Filter wrapper groups ── */
.scene.active svg .horse-group       { animation: appear 1.0s 0.40s both; }
.scene.active svg .straw-halo        { animation: appear 1.2s 0.90s both; }
.scene.active svg .straw-offer-group { animation: appear 0.9s 0.80s both; }
.scene.active svg .orange-fade-group { animation: appear 0.8s 0.78s both; }
.scene.active svg .cloth-offer-group { animation: appear 0.8s 0.75s both; }
.scene.active svg .figure            { animation: appear 1.0s 0.5s  both; }

/* ── Items ── */
@keyframes destiny-straw {
  0%,100%{opacity:1; filter:brightness(1)}
  48%    {opacity:0.55; filter:brightness(0.75)}
}
@keyframes orange-warmth {
  0%,100%{opacity:1; filter:brightness(1)}
  50%    {opacity:.68; filter:brightness(0.88)}
}
@keyframes cloth-silk {
  0%,100%{opacity:.60}
  28%    {opacity:.96}
  70%    {opacity:.48}
}
@keyframes mane-sway {
  0%,100%{transform:translateX(0)  translateY(0)}
  33%    {transform:translateX(7px) translateY(-4px)}
  66%    {transform:translateX(-5px) translateY(3px)}
}
@keyframes lantern-flicker {
  0%,100%{opacity:.58}
  18%    {opacity:.92}
  40%    {opacity:.52}
  60%    {opacity:.95}
  82%    {opacity:.48}
}
@keyframes win-amber {
  0%,100%{opacity:1}
  45%    {opacity:.82}
  70%    {opacity:.95}
}

/* Scene 1 — straw */
#scene-1.active svg .straw-item {
  animation: appear 0.8s 1.1s both, destiny-straw 2.5s 2.0s ease-in-out infinite;
}

/* Scene 2 — oranges */
.scene.active svg .orange-fruit { animation: appear 0.9s 0.88s both, orange-warmth 3.0s 1.8s ease-in-out infinite; }

/* Scene 3 — cloth */
.scene.active svg .cloth-roll   { animation: appear 0.8s 0.82s both; }
.scene.active svg .cloth-drape  { animation: appear 1.1s 0.88s both, cloth-silk 2.4s 2.0s ease-in-out infinite; }
.scene.active svg .cloth-edge   { animation: appear 0.8s 1.05s both; }

/* Scene 4 — horse */
.scene.active svg .horse-body-path { animation: appear 1.2s 0.44s both; }
.scene.active svg .horse-neck      { animation: appear 1.2s 0.46s both; }
.scene.active svg .horse-leg       { animation: appear 1.0s 0.50s both; }
.scene.active svg .horse-tail      { animation: appear 1.0s 0.52s both; }
.scene.active svg .horse-mane      { animation: appear 0.9s 0.55s both, mane-sway 2.2s 1.4s ease-in-out infinite; }

/* Scene 5 — mansion */
.scene.active svg .mansion-wall    { animation: appear 1.3s 0.26s both; }
.scene.active svg .mansion-dark    { animation: appear 0.9s 0.36s both; }
.scene.active svg .mansion-ridge   { animation: appear 0.9s 0.32s both; }
.scene.active svg .mansion-light   { animation: appear 1.1s 0.56s both, lantern-flicker 3.0s 1.2s ease-in-out infinite; }

/* Scene 5 — gate presence glow (hidden by default, pulse when active) */
.scene svg .gate-presence-outer,
.scene svg .gate-presence-mid,
.scene svg .gate-presence-inner { opacity: 0; }

@keyframes presence-breathe {
  0%,100% { opacity: 1; }
  48%     { opacity: 0.52; }
}
.scene.active svg .gate-presence-outer { animation: appear 2.4s 0.8s  both, presence-breathe 4.0s 3.2s ease-in-out infinite; }
.scene.active svg .gate-presence-mid   { animation: appear 1.8s 1.0s  both, presence-breathe 4.0s 2.8s ease-in-out infinite; }
.scene.active svg .gate-presence-inner { animation: appear 1.4s 1.2s  both, presence-breathe 3.2s 2.6s ease-in-out infinite; }

/* ── Caption system ── */
.caption-block {
  position: absolute;
  bottom: 4.8rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 7;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.caption-verse {
  color: rgba(192,204,228,0.0);
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  font-weight: 200;
  font-size: clamp(0.78rem, 2.2vw, 1.05rem);
  letter-spacing: .20em;
  white-space: nowrap;
  transition: color 1.2s ease;
  min-height: 1.4em;
}
.scene.active .caption-verse {
  color: rgba(192,204,228,0.46);
}

.caption-label {
  color: rgba(192,204,228,0.0);
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  font-weight: 300;
  font-size: clamp(0.60rem, 1.5vw, 0.72rem);
  letter-spacing: .58em;
  white-space: nowrap;
  transition: color 0.9s 0.6s ease;
}
.scene.active .caption-label {
  color: rgba(192,204,228,0.24);
}

/* ── Progress dots ── */
#progress {
  position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: .85rem; z-index: 10; pointer-events: none;
  opacity: 0; transition: opacity .7s ease;
}
#progress.visible { opacity: 1; }

.dot {
  width: 5px; height: 5px; border-radius: 50%;
  border: 1px solid rgba(180,192,218,0.24);
  background: transparent;
  transition: background .5s, border-color .5s, transform .35s;
}
.dot.lit {
  background: rgba(180,192,218,0.60);
  border-color: rgba(180,192,218,0.60);
  transform: scale(1.5);
}

/* ── Logo-tap bloom (golden radial wash) ── */
.bloom {
  position: fixed;
  width: 24px; height: 24px;
  margin-top: -12px; margin-left: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230,185,52,0.60) 0%, rgba(200,142,28,0.18) 52%, transparent 100%);
  pointer-events: none;
  z-index: 199;
  transform-origin: center;
  animation: bloom-out 2.0s cubic-bezier(.05,.36,.12,1) forwards;
}
@keyframes bloom-out {
  0%   { transform: scale(1);   opacity: 0.94; }
  18%  { opacity: 0.82; }
  55%  { opacity: 0.40; }
  100% { transform: scale(230); opacity: 0; }
}

/* ── Tap ripple ── */
.ripple {
  position: fixed; width: 12px; height: 12px;
  margin: -6px 0 0 -6px; border-radius: 50%;
  border: 1px solid rgba(180,192,218,0.45);
  pointer-events: none; z-index: 200;
  animation: ripple-out 1.3s cubic-bezier(.12,.5,.28,1) forwards;
}
@keyframes ripple-out {
  from { transform: scale(1); opacity: .62; }
  to   { transform: scale(90); opacity: 0; }
}

/* ── Custom cursor ── */
@media (pointer: fine) {
  *, *::before, *::after { cursor: none !important; }
}
#cursor {
  position: fixed; width: 6px; height: 6px;
  background: rgba(184,200,228,0.90);
  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: 28px; height: 28px;
  border: 1px solid rgba(184,200,228,0.30);
  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; }
}


/* ── Scene entrance typewriter for caption-verse ── */
@keyframes cursor-blink { 0%,100%{opacity:0} 50%{opacity:.7} }

/* ── Parallax layer defaults ── */
.layer-far, .layer-mid, .layer-near {
  will-change: transform;
  transition: none;
}