:root {
  color-scheme: light;
  --ink: #3d2d39;
  --muted: #725c6a;
  --paper: #fffaf6;
  --japanese-pink: #f3b5bf;
  --japanese-lilac: #bba8d8;
  --english-blue: #78b7d5;
  --english-orange: #ec9a50;
  --ease-world: cubic-bezier(0.22, 0.8, 0.24, 1);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-width: 0; min-height: 100%; }
body { min-height: 100svh; margin: 0; overflow: hidden; color: var(--ink); background: var(--paper); }
a, button { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.world-portal { position: relative; width: 100%; height: 100svh; overflow: hidden; background: #fffaf6; opacity: 0; transition: opacity 0.5s ease; }
.world-portal.is-visible { opacity: 1; }
.world-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; height: 100%; transition: grid-template-columns 0.5s var(--ease-world); }
.world-split[data-active="japanese"] { grid-template-columns: 56fr 44fr; }
.world-split[data-active="english"] { grid-template-columns: 44fr 56fr; }
.world { position: relative; display: block; min-width: 0; overflow: hidden; isolation: isolate; outline: none; cursor: pointer; transition: filter 0.5s ease; }
.world::before { position: absolute; inset: 0; z-index: 4; pointer-events: none; content: ""; border: 0 solid rgba(255, 255, 255, 0.72); transition: border-width 0.5s ease; }
.world:focus-visible::before { border-width: 6px; }
.world-scene { position: absolute; inset: -2%; z-index: 0; display: block; transition: transform 0.55s var(--ease-world), filter 0.5s ease; }
.world-scene img { display: block; width: 100%; height: 100%; object-fit: cover; }
.world-wash { position: absolute; inset: 0; z-index: 1; pointer-events: none; content: ""; transition: background 0.5s ease; }
.world-japanese .world-wash, .world-english .world-wash { background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.08) 72%, rgba(48, 39, 48, 0.12)); }
.language-badge { position: absolute; bottom: max(28px, env(safe-area-inset-bottom)); z-index: 5; display: grid; min-width: 76px; padding: 9px 13px 10px; border: 1px solid rgba(255, 255, 255, 0.68); border-radius: 13px; background: rgba(255, 250, 244, 0.78); box-shadow: 0 8px 24px rgba(58, 39, 52, 0.18); backdrop-filter: blur(10px); pointer-events: none; transition: transform 0.42s var(--ease-world), background 0.42s ease, box-shadow 0.42s ease; transform-origin: center bottom; }
.language-badge-japanese { left: clamp(24px, 4vw, 48px); color: #713e59; }
.language-badge-english { right: clamp(24px, 4vw, 48px); color: #304b72; }
.language-badge strong { font-size: clamp(1.55rem, 3vw, 2.35rem); font-weight: 750; letter-spacing: -0.06em; line-height: 0.95; }
.language-badge small { margin-top: 5px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; line-height: 1; }
.world:hover .language-badge, .world:focus-visible .language-badge { background: rgba(255, 250, 244, 0.88); box-shadow: 0 12px 30px rgba(58, 39, 52, 0.24); transform: scale(1.04); }
.world:active .language-badge { transform: scale(0.98); }
.world-particles { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.petal, .maple-leaf { position: absolute; display: block; top: -8%; animation: fall-across 12s linear infinite; }
.petal { width: 14px; height: 9px; border-radius: 100% 0 100% 0; background: linear-gradient(135deg, #fff8f7, #ef9eaf); box-shadow: 0 2px 8px rgba(180, 88, 119, 0.24); }
.maple-leaf { width: 16px; height: 16px; clip-path: polygon(50% 0, 62% 24%, 92% 15%, 76% 45%, 100% 60%, 68% 65%, 72% 100%, 50% 78%, 30% 100%, 32% 66%, 0 72%, 24% 46%, 7% 20%, 40% 26%); background: linear-gradient(135deg, #ffd37c, #d76e36); filter: drop-shadow(0 2px 4px rgba(144, 75, 41, 0.2)); }
.p1, .l1 { left: 14%; animation-delay: -2s; animation-duration: 11s; }
.p2, .l2 { left: 31%; animation-delay: -7s; animation-duration: 14s; }
.p3, .l3 { left: 48%; animation-delay: -4s; animation-duration: 12s; }
.p4, .l4 { left: 67%; animation-delay: -9s; animation-duration: 16s; }
.p5, .l5 { left: 79%; animation-delay: -1s; animation-duration: 13s; }
.p6, .l6 { left: 22%; animation-delay: -11s; animation-duration: 17s; }
.p7, .l7 { left: 58%; animation-delay: -6s; animation-duration: 15s; }
.p8, .l8 { left: 88%; animation-delay: -13s; animation-duration: 18s; }
.maple-leaf.l2, .maple-leaf.l6 { transform: scale(0.72); }
.world-split[data-active="japanese"] .world-japanese { filter: brightness(1.04) saturate(1.04); }
.world-split[data-active="japanese"] .world-english { filter: brightness(0.9) saturate(0.9); }
.world-split[data-active="english"] .world-japanese { filter: brightness(0.9) saturate(0.9); }
.world-split[data-active="english"] .world-english { filter: brightness(1.04) saturate(1.04); }
.world:hover .world-scene, .world:focus-visible .world-scene { transform: scale(1.035); }

.intro-stage { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; overflow: hidden; background: #fffaf6; transition: opacity 0.42s ease; }
.intro-stage.is-complete { opacity: 0; pointer-events: none; }
.intro-glow { position: absolute; left: 50%; top: 50%; width: min(30vw, 280px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.98), rgba(247, 194, 205, 0.52) 26%, rgba(137, 181, 219, 0.2) 52%, transparent 72%); filter: blur(4px); transform: translate(-50%, -50%) scale(0.15); animation: intro-glow 1.8s var(--ease-world) both; }
.intro-split { position: absolute; top: 0; bottom: 0; width: 51%; overflow: hidden; opacity: 0; filter: blur(12px); background-position: center; background-size: cover; animation: intro-open 1.15s 0.18s var(--ease-world) forwards; }
.intro-split::before { position: absolute; inset: 0; content: ""; }
.intro-split-japanese { left: 0; background-image: linear-gradient(135deg, rgba(246, 201, 206, 0.28), rgba(216, 194, 227, 0.16)), url("./assets/japanese-scene.png"); clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); transform-origin: left center; }
.intro-split-japanese::before { background: radial-gradient(circle at 30% 45%, rgba(255, 255, 255, 0.34), transparent 28%); }
.intro-split-english { right: 0; background-image: linear-gradient(135deg, rgba(189, 220, 234, 0.22), rgba(244, 190, 128, 0.18)), url("./assets/english-scene.png"); clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); transform-origin: right center; animation-delay: 0.28s; }
.intro-split-english::before { background: radial-gradient(circle at 70% 45%, rgba(255, 255, 255, 0.3), transparent 28%); }
.intro-center-mark { position: relative; z-index: 2; width: 2px; height: 52%; background: rgba(255, 255, 255, 0.86); box-shadow: 0 0 28px 8px rgba(255, 255, 255, 0.56); opacity: 0; animation: intro-mark 0.55s 0.55s ease forwards; }
.skip-button { position: absolute; top: max(20px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); z-index: 3; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid rgba(99, 78, 93, 0.28); border-radius: 50%; color: transparent; background: rgba(255, 255, 255, 0.58); backdrop-filter: blur(8px); }
.skip-button::before, .skip-button::after { position: absolute; top: 50%; width: 2px; height: 14px; border-radius: 2px; content: ""; background: #634e5d; transform: translateY(-50%); }
.skip-button::before { left: 17px; }
.skip-button::after { left: 24px; }
.skip-button:hover, .skip-button:focus-visible { border-color: #b47b9e; background: #fff; }
.skip-button:focus-visible { outline: 3px solid rgba(180, 123, 158, 0.35); outline-offset: 3px; }

@keyframes fall-across { 0% { opacity: 0; transform: translate3d(-8vw, -8vh, 0) rotate(0deg); } 10% { opacity: 0.9; } 50% { transform: translate3d(7vw, 48vh, 0) rotate(170deg); } 100% { opacity: 0.05; transform: translate3d(-4vw, 112vh, 0) rotate(360deg); } }
@keyframes intro-glow { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.15); } 45% { opacity: 1; } 100% { opacity: 0.92; transform: translate(-50%, -50%) scale(1); } }
@keyframes intro-open { 0% { opacity: 0; filter: blur(12px); transform: scaleX(0.02); } 100% { opacity: 1; filter: blur(0); transform: scaleX(1); } }
@keyframes intro-mark { to { opacity: 1; transform: scale(1.15); } }

@media (max-width: 760px) {
  body { overflow: auto; }
  .world-portal { height: auto; min-height: 100svh; overflow: visible; }
  .world-split, .world-split[data-active="japanese"], .world-split[data-active="english"] { grid-template-columns: 1fr; height: auto; min-height: 100svh; }
  .world { min-height: max(500px, 68svh); }
  .language-badge { bottom: max(28px, env(safe-area-inset-bottom)); left: 24px; }
  .language-badge-english { right: auto; }
  .world:hover .world-scene, .world:focus-visible .world-scene { transform: none; }
  .world-split[data-active="japanese"], .world-split[data-active="english"] { transition: none; }
  .world-particles .petal:nth-child(n + 5), .world-particles .maple-leaf:nth-child(n + 5) { display: none; }
}

@media (max-width: 420px) {
  .world { min-height: 510px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
  .intro-stage { display: none; }
  .world-portal { opacity: 1; }
  .world-particles { display: none; }
}