/* ============ "Your Magical World" — the story-themes scroll on the home page ============ */
.mw { --brush: "Caveat Brush", "Baloo 2", cursive; --paper: #f3e6c6; position: relative; height: 1400vh; background: #cdb98f; }
.mw-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #c9b48c; }
.mw-curtain { position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; background: #c9b48c; will-change: transform; pointer-events: none; }
.mw-grain { position: absolute; inset: 0; pointer-events: none; background-size: 256px 256px; z-index: 11; }
.mw-hint { position: absolute; z-index: 20; left: calc(50% + var(--rw, 20vw) / 2 + clamp(14px, 4vw, 56px)); top: 50%; transform: translateY(-50%); color: #4a3a22; font-family: var(--head); font-weight: 800; font-size: clamp(.95rem, 1.6vw, 1.2rem); line-height: 1.1; text-align: center; transition: opacity .3s; pointer-events: none; }
.mw-mouse { display: block; position: relative; width: 30px; height: 48px; margin: 0 auto 8px; border: 3px solid #4a3a22; border-radius: 18px; background: rgba(255,255,255,.35); }
.mw-mouse i { position: absolute; left: 50%; top: 8px; width: 6px; height: 10px; margin-left: -3px; border-radius: 3px; background: #4a3a22; animation: mwWheel 1.5s infinite; }
@keyframes mwWheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(16px); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mw-mouse i { animation: none; } }

/* the painting: sky, brush-stroke mountains, pill clouds, rolling hills */
.mw-painting { position: absolute; z-index: 1; inset: 0; overflow: hidden; contain: strict; }
.mw-sky { position: absolute; inset: 0; background: linear-gradient(180deg, var(--s1, #1f3f7a) 0%, var(--s2, #3f8fb0) 32%, var(--s3, #fbf3cf) 62%, var(--s3, #fbf3cf) 100%); }
.mw-layer { position: absolute; left: 0; top: 0; height: 100%; will-change: transform; backface-visibility: hidden; }
.mw-layer svg { display: block; height: 100%; }
.mw-pill { position: absolute; height: 16px; border-radius: 999px; background: #fdf6dc; box-shadow: 0 4px 0 rgba(90,150,190,.35); } /* the clouds drift as the layer pans — no per-cloud animation (much smoother) */
.mw-pill::after { content: ""; position: absolute; left: 22%; right: -16%; top: -12px; height: 14px; border-radius: 999px; background: inherit; box-shadow: inherit; }
@keyframes mwDrift { to { transform: translateX(60px); } }
.mw-stars { opacity: var(--night, 0); transition: opacity .6s; will-change: opacity; }
.mw-stars i { position: absolute; color: #fff6c2; opacity: .85; }

/* the scroll: a round, stamped roll with a stitched label + the parchment end panel */
.mw-roll { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; z-index: 6; width: var(--rw); border-radius: 22px / 14px; overflow: hidden; will-change: left, transform;
  background:
    linear-gradient(90deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.05) 18%, rgba(255,255,255,.18) 34%, rgba(255,255,255,.04) 50%, rgba(0,0,0,.08) 70%, rgba(0,0,0,.42) 100%),
    linear-gradient(180deg, #3b2a8f 0%, #5a3fc0 45%, #2f8f9f 100%); }
.mw-stamps { position: absolute; inset: 0; color: rgba(30,12,90,.55); }
.mw-stamps i { position: absolute; font-size: var(--st); transform: rotate(var(--rot)); }
.mw-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46%; padding: calc(var(--rw) * .15) 0 calc(var(--rw) * .14); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--rw) * .05); background: #f4f1e6; border-radius: 6px;
  font-family: var(--brush); color: #26195a; line-height: 1; font-size: calc(var(--rw) * .2); box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: opacity .3s; }
.mw-label::before { content: ""; position: absolute; top: 6px; right: 6px; bottom: 6px; left: 6px; border: 2px dashed #8a86a6; border-radius: 4px; pointer-events: none; }
.mw-label b { writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 400; white-space: nowrap; }
.mw-label i { font-style: normal; font-size: .65em; line-height: 1; color: #f5b400; }
.mw-cap { position: absolute; left: 0; top: 0; will-change: transform; z-index: 5; width: calc(var(--rw) * .62); height: 26px; border-radius: 8px / 6px; background: linear-gradient(90deg, #3a0d12, #7a1f2a 40%, #4a1118); box-shadow: inset 0 -3px 0 rgba(0,0,0,.3); }
.mw-end { position: absolute; left: 0; top: 0; will-change: transform, opacity; z-index: 3; background: var(--paper); box-shadow: 8px 10px 30px rgba(60,40,10,.25); display: grid; place-items: center; overflow: hidden; }
.mw-end b { font-family: var(--brush); font-size: 2.1rem; color: #9a7b3a; font-weight: 400; }
.mw-end::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 10px; background: #1f3f7a; }

/* theme cards: aged paper, a vertical title ribbon and a seal */
.mw-card { position: absolute; z-index: 8; left: 50%; top: calc(50% + 30px); width: min(980px, 88vw); height: min(560px, 70vh); display: grid; grid-template-columns: 1fr 1.25fr auto; gap: 30px; padding: 40px 34px 40px 44px;
  transform: translate(-50%, -50%); opacity: 0; pointer-events: none; will-change: transform, opacity, clip-path;
  background: radial-gradient(ellipse at 50% 40%, #fbf5e2 0%, #f1e4c2 70%, #e2cf9f 100%); box-shadow: 0 30px 60px rgba(30,20,60,.35); }
.mw-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); background-size: 256px; }
.mw-card.on { pointer-events: auto; }
.mw-pic { position: relative; align-self: center; aspect-ratio: 1; border-radius: 22px; overflow: hidden; border: 4px solid var(--c); box-shadow: 0 10px 0 rgba(45,31,94,.25), 0 16px 30px rgba(45,31,94,.25); box-shadow: 0 10px 0 color-mix(in srgb, var(--c) 45%, transparent), 0 16px 30px rgba(45,31,94,.25); }
.mw-pic img, .mw-pic svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.mw-txt { align-self: center; }
.mw-kicker { font-family: var(--head); font-weight: 800; color: var(--c); letter-spacing: .08em; font-size: .9rem; text-transform: uppercase; }
.mw-card h3 { font-family: var(--brush); font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 3.6rem); color: var(--ink); margin: 2px 0 8px; }
.mw-card p { font-weight: 700; color: #4a3f6e; font-size: 1.12rem; line-height: 1.55; margin: 0 0 14px; }
.mw-card ul { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.mw-card li { font-weight: 800; font-size: .9rem; background: #fff; border: 2px solid var(--c); color: var(--ink); border-radius: 999px; padding: 3px 12px; display: inline-flex; gap: 6px; align-items: center; }
.mw-card li i { color: var(--c); }
.mw-ribbon { writing-mode: vertical-rl; align-self: start; font-family: var(--brush); font-size: 1.7rem; color: #26195a; padding: 18px 8px; margin-top: -8px;
  background: linear-gradient(90deg, #dbe9f0, #fbfbf4 50%, #dbe9f0); border: 2px solid #5b7fa6; border-radius: 6px; box-shadow: inset 0 0 0 3px #fbfbf4, inset 0 0 0 4px #5b7fa6; }
.mw-seal { position: absolute; right: 26px; bottom: 22px; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #c8323c; border: 3px solid #c8323c; opacity: .75; transform: rotate(-12deg); font-family: var(--head); font-weight: 800; font-size: .7rem; text-align: center; line-height: 1; }
.mw-seal i { font-size: 1.5rem; display: block; }
.mw-num { position: absolute; left: 22px; top: 16px; font-family: var(--brush); font-size: 1.3rem; color: #9a7b3a; }
.mw-card > * { transition: opacity .9s ease, transform 1s cubic-bezier(.25,1,.4,1); }
.mw-card:not(.show) .mw-pic { opacity: 0; transform: translateY(30px) rotate(-4deg); }
.mw-card:not(.show) .mw-txt { opacity: 0; transform: translateY(24px); }
.mw-card:not(.show) .mw-ribbon { opacity: 0; transform: translateY(-30px); }
.mw-card.show .mw-txt { transition-delay: .2s; }
.mw-card.show .mw-ribbon { transition-delay: .35s; }

.mw-buzz { position: absolute; z-index: 9; left: 0; top: 0; pointer-events: none; will-change: transform; transition: opacity .4s; }
.mw-buzz .bee { display: block; animation: beeHover 2.4s ease-in-out infinite; filter: drop-shadow(0 8px 8px rgba(45,31,94,.3)); }

.mw-index { position: absolute; z-index: 12; right: calc(18px + env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; transition: opacity .4s; }
.mw-index button { position: relative; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; background: rgba(255,255,255,.3); cursor: pointer; padding: 0; transition: transform .25s, background .25s; }
.mw-index button::before { content: ""; position: absolute; inset: -10px; } /* bigger tap area */
.mw-index button.on { background: var(--c); transform: scale(1.35); }
.mw-index button span { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: var(--head); font-weight: 800; font-size: .85rem; color: #fff; background: rgba(45,31,94,.8); padding: 2px 10px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.mw-index button:hover span { opacity: 1; }

.mw-finale { position: absolute; z-index: 10; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.85); opacity: 0; pointer-events: none; text-align: center; width: min(520px, 90vw);
  padding: 26px 22px 30px; border-radius: 30px; background: rgba(45,31,94,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .5s, transform .6s cubic-bezier(.3,1.5,.5,1); }
.mw-finale.on { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.mw-finale h2 { font-family: var(--brush); font-weight: 400; font-size: clamp(2.6rem, 7vw, 4.4rem); color: #fff; }
.mw-finale p { color: #fff; font-weight: 800; font-size: 1.15rem; }


@media (max-width: 760px) {
  .mw-card { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; height: min(640px, 80vh); width: 90vw; padding: 20px 18px 22px; gap: 12px; align-content: start; }
  .mw-ribbon { writing-mode: horizontal-tb; order: -1; justify-self: start; font-size: 1.25rem; padding: 4px 14px; margin: 0; }
  .mw-pic { width: 58%; justify-self: center; }
  .mw-card h3 { font-size: 2.1rem; }
  .mw-card p { font-size: .98rem; margin-bottom: 10px; }
  .mw-seal { width: 50px; height: 50px; right: 14px; bottom: 14px; }
  .mw-num { display: none; }
  .mw-index { right: 8px; }
  .mw-index button span { display: none; }
}

/* reduced motion: no scroll-driven film — the themes are simply listed */
.mw.static { height: auto; background: #efe3c6; padding: 60px 0; }
.mw.static .mw-stage { position: relative; height: auto; overflow: visible; background: none; display: grid; gap: 28px; justify-items: center; }
.mw.static .mw-painting, .mw.static .mw-roll, .mw.static .mw-cap, .mw.static .mw-end, .mw.static .mw-buzz, .mw.static .mw-index, .mw.static .mw-hint, .mw.static .mw-grain, .mw.static .mw-finale { display: none; }
.mw.static .mw-card { position: relative; left: auto; top: auto; transform: none; opacity: 1; pointer-events: auto; height: auto; clip-path: none; }

/* a jump from far away (menu link) cuts straight to the new picture: no fades or slides while it lands */
.mw.cut *, .mw.cut *::before, .mw.cut *::after { transition: none !important; }