/* The illustrated journey: rich scenery, paper details and quiet character motion. */
body { background:radial-gradient(ellipse at 8% 30%,#dff5f570,transparent 32%),radial-gradient(ellipse at 92% 68%,#fff0bd55,transparent 28%),var(--paper); }
.site-header { position:sticky; top:0; z-index:20; background:#fffdf7f2; backdrop-filter:blur(18px); box-shadow:0 3px 18px #17455306; }
.hero { isolation:isolate; overflow:hidden; background:#cceef0; }
.hero-landscape { position:absolute; inset:0; z-index:-3; background:#cceef0; }
.hero-scenery { position:absolute; width:100%; height:100%; object-fit:cover; object-position:center 48%; animation:scenery-arrive 1.1s both,scenic-drift 20s ease-in-out infinite alternate; }
.hero-scenery.departing { animation:scenery-leave 1s both; }
.hero::before { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,#fffdf7f7 0%,#fffdf7df 25%,#fffdf765 50%,#fffdf708 70%),linear-gradient(0deg,#fffdf7fa 0%,transparent 24%,transparent 90%,#d8f4f330); }
.hero::after { content:""; position:absolute; inset:0; z-index:-1; opacity:.16; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.2' filter='url(%23g)'/%3E%3C/svg%3E"); }
.hero-inner { padding:46px 0 22px; min-height:620px; gap:25px; grid-template-columns:1fr 1.08fr; position:relative; z-index:2; }
.hero-copy { position:relative; }
.hero-copy > * { animation:opening-rise .8s both; }
.hero-copy > :nth-child(2) { animation-delay:.08s; }
.hero-copy > :nth-child(3) { animation-delay:.15s; }
.hero-copy > :nth-child(4) { animation-delay:.25s; }
.hero-copy > :nth-child(n+5) { animation-delay:.35s; }
.hero h1 { font-size:clamp(40px,4.9vw,63px); font-weight:850; line-height:1.37; letter-spacing:.03em; text-shadow:0 2px 14px #fffdf770; }
.hero h1 > span:first-child { font-size:.63em; display:inline-block; margin-bottom:8px; letter-spacing:.05em; }
.hero h1 em { background:linear-gradient(transparent 73%,#ffe99dc4 73%,#ffe99dc4 91%,transparent 91%); }
.hero-kicker { font-size:12px; margin:13px 0; }
.hero-description { font-size:13px; margin:20px 0 23px; }
.hero .button.primary { position:relative; overflow:hidden; background:#00b2cf; }
.hero .button.primary::after { content:""; position:absolute; inset:-50% -80%; transform:translateX(-60%) rotate(-18deg); background:linear-gradient(90deg,transparent 40%,#fff9 50%,transparent 60%); animation:button-shimmer 6s 2s infinite; pointer-events:none; }
.hero-stage { max-width:590px; padding:0; align-self:center; }
#hero-story { background:none; border:0; box-shadow:none; padding:0; border-radius:0; transform:none; }
.hero-art { background:transparent; height:445px; border-radius:0; overflow:visible; isolation:auto; }
.hero-art > img { width:93%; height:100%; left:5%; bottom:0; filter:drop-shadow(0 17px 11px #123f4428); animation:pair-arrival .9s cubic-bezier(.2,.7,.3,1) both,hero-companions 7s 1s ease-in-out infinite; }
.hero-art::after { content:""; position:absolute; z-index:-1; width:66%; height:8%; background:#224d4422; filter:blur(13px); bottom:2%; left:20%; border-radius:50%; animation:ground-shadow 7s infinite; }
.hero-caption { display:flex; align-items:flex-end; justify-content:space-between; width:min(90%,410px); margin:0 auto; gap:14px; padding:10px 0 20px; }
.hero-caption .hero-speech { position:absolute; top:174px; left:calc(50% + 18px); right:auto; width:max-content; max-width:calc(50% - 24px); text-wrap:balance; border:0; border-radius:20px 20px 2px 20px; padding:10px 18px; box-shadow:0 5px 25px #17455318; font-size:13px; transform:rotate(-4deg); }
.hero[data-scene="forest"] .hero-speech { margin-top:-34px; }
.hero-buddy { bottom:7px; right:3%; background:#fffdf7e6; padding:4px 12px; font-size:10px; box-shadow:0 3px 12px #2149541c; }
.hero-caption .hero-sticker { position:relative; inset:auto; flex-shrink:0; width:99px; height:99px; font-size:13px; line-height:1.4; border:3px solid #fffdf7; outline:1px dashed #446978; outline-offset:-8px; box-shadow:0 6px 20px #21495420; transform:rotate(-8deg); }
.hero-sticker small { font-size:8px; letter-spacing:.14em; margin-bottom:5px; }
.hero-destination { position:relative; margin:-3px auto 0; width:87%; background:#fffdf7f5; border:1px solid #ffffffda; border-radius:3px 18px 18px 18px; box-shadow:0 12px 35px #143b3d24; padding:14px 19px; transform:rotate(-2deg); transition:transform .3s; }
.hero-destination::before { content:""; width:44px; height:21px; background:#90d8dec7; position:absolute; top:-12px; left:23px; transform:rotate(-9deg); }
.hero-destination:hover { transform:rotate(0) translateY(-3px); }
.hero-destination strong { font-size:24px; line-height:1.6; }
.hero-destination small { font-size:11px; }
.hero-destination > span:last-child { background:var(--aqua); border:0; color:white; }
.hero-switcher { margin:20px 0 0; gap:12px; }
.hero-switcher button { border-color:#ffffffad; background:#fffdf7e6; box-shadow:0 3px 12px #123f4410; }
.hero-position { min-width:65px; }
.hero-timer { width:70px; height:3px; background:#37657424; border-radius:3px; overflow:hidden; }
.hero-timer i { display:block; height:100%; background:var(--deep); transform:scaleX(0); transform-origin:left; }
.hero-guide { display:flex; gap:2px; align-items:center; margin-top:11px; max-width:390px; min-height:76px; }
.hero-guide button { padding:0; background:none; width:68px; flex-shrink:0; position:relative; }
.hero-guide .animated-cat { width:68px; height:auto; }
.hero-guide p { padding:8px 12px; border-radius:0 15px 15px; background:#fffdf7c9; font-size:12px; line-height:1.65; }
.hero-guide small { display:block; font-size:9px; color:var(--deep); margin-bottom:1px; }
.hero-journeys { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:10px; max-width:1180px; margin:6px auto 0; padding:13px 0 21px; position:relative; z-index:3; }
.hero-journeys button { padding:5px; border-radius:9px; border:1px solid #fff8; background:#fffdf7d6; box-shadow:0 3px 9px #264e5120; text-align:left; transition:transform .25s,background .25s; }
.hero-journeys button:hover { transform:translateY(-5px) rotate(-2deg); }
.hero-journeys button[aria-pressed="true"] { background:white; box-shadow:0 0 0 2px var(--deep),0 5px 14px #264e5122; transform:translateY(-5px); }
.hero-journeys img { width:100%; height:44px; object-fit:cover; border-radius:5px; }
.hero-journeys button > span { display:flex; align-items:center; gap:4px; padding:5px 1px 1px; font-size:10px; font-weight:700; white-space:nowrap; }
.hero-journeys small { font-size:8px; font-weight:500; color:var(--deep); }
.hero-wave { position:absolute; bottom:37px; left:0; width:100%; height:85px; z-index:0; pointer-events:none; overflow:hidden; }
.hero-wave svg { position:absolute; bottom:0; width:200%; height:100%; animation:tide 12s linear infinite; }
.hero-wave path:first-child { fill:#d7f3f585; }
.hero-wave path:last-child { fill:#fffdf7c0; }
.hero-bottom { position:relative; background:#fffdf7d9; border:0; border-top:1px solid #abd7da80; color:var(--deep); z-index:3; font-size:11px; }
.hero-atmosphere { position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-atmosphere i { position:absolute; left:calc(6% + var(--n)*8%); top:calc(16% + var(--n)*5%); width:5px; height:5px; border-radius:50%; background:#fff5ce; box-shadow:0 0 16px 6px #fff9bf55; animation:firefly calc(5s + var(--n)*.4s) calc(var(--n)*-.6s) infinite ease-in-out; }
.hero-atmosphere i:nth-child(1) { --n:0; }.hero-atmosphere i:nth-child(2) { --n:1; }.hero-atmosphere i:nth-child(3) { --n:2; }.hero-atmosphere i:nth-child(4) { --n:3; }.hero-atmosphere i:nth-child(5) { --n:4; }.hero-atmosphere i:nth-child(6) { --n:5; }.hero-atmosphere i:nth-child(7) { --n:6; }.hero-atmosphere i:nth-child(8) { --n:7; }.hero-atmosphere i:nth-child(9) { --n:8; }.hero-atmosphere i:nth-child(10) { --n:9; }.hero-atmosphere i:nth-child(11) { --n:10; }.hero-atmosphere i:nth-child(12) { --n:11; }
.hero[data-scene="sea"] .hero-atmosphere i,.hero[data-scene="photo"] .hero-atmosphere i { background:white; border-radius:0; clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%); width:13px; height:13px; }
.hero[data-scene="sacred"] .hero-atmosphere i,.hero[data-scene="town"] .hero-atmosphere i { border-radius:3px 80%; width:9px; height:16px; background:#d58b365c; }
.flight-path { position:absolute; inset:8% 0 auto 0; width:100%; height:58%; opacity:.5; z-index:0; pointer-events:none; overflow:visible; }
.flight-path > path { fill:none; stroke:#fff; stroke-width:1.3; stroke-dasharray:4 10; animation:dash-travel 28s linear infinite; }
.flight-path g { fill:#fffdf7; offset-path:path('M-40 330C180 110 410 600 560 295S850 105 1060 60'); offset-rotate:auto; animation:paper-flight 24s 1s infinite linear; opacity:.8; }
.collection { position:relative; padding-top:85px; }
.collection::before { content:"旅のしおり"; position:absolute; right:0; top:29px; border:1px solid #00a6c944; border-radius:50%; width:93px; height:93px; display:grid; place-items:center; color:#007a9644; font-size:12px; letter-spacing:.1em; transform:rotate(14deg); outline:1px solid #00a6c922; outline-offset:-7px; pointer-events:none; }
.section-heading h2 { font-size:36px; }
.cards-grid { gap:31px 27px; }
.card-item { perspective:1100px; }
.js-motion .card-item > .travel-card { opacity:0; translate:0 26px; transition:opacity .65s,translate .65s,transform .25s,box-shadow .3s; }
.js-motion .card-item > .travel-card.has-entered { opacity:1; translate:0 0; }
.motion-off .card-item > .travel-card { opacity:1; translate:0 0; }
.travel-card { position:relative; border:1px solid #ffffff; border-radius:19px; box-shadow:0 4px 0 #d7e5de,0 13px 35px #193f5113; transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .3s ease-out,box-shadow .3s; }
button.travel-card:hover { box-shadow:0 5px 0 #b7dce0,0 23px 45px #15455e26; }
.card-art { height:342px; border-bottom:0; background:#cae9e7; }
.scene-image { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 44%; transform:scale(1.04); }
.card-art .scene-image { transition:transform 1s; transform:scale(1.07) translate(calc(var(--px,0px)*-.4),calc(var(--py,0px)*-.4)); }
.card-art::after { content:""; position:absolute; inset:40% 0 0; z-index:0; pointer-events:none; background:linear-gradient(0deg,#e2f1d875,transparent); }
.pair-image { height:77%; width:88%; left:6%; bottom:0; filter:drop-shadow(0 9px 5px #213a3738); animation:card-companions 6.4s ease-in-out infinite; animation-play-state:paused; transform-origin:50% 94%; }
.travel-card.in-viewport .pair-image { animation-play-state:running; }
.travel-card:hover .pair-image { animation-play-state:paused; transform:translate(var(--px,0px),calc(var(--py,0px) - 5px)) scale(1.025); }
.card-item:nth-child(3n+2) .pair-image { animation-delay:-2s; }
.card-item:nth-child(3n+3) .pair-image { animation-delay:-4s; }
.card-top { z-index:3; top:14px; }
.card-top > span:first-child { width:30px; height:30px; border:1px solid #ffffffa8; background:#fffdf7e6; box-shadow:0 2px 9px #23475325; color:var(--deep); }
.card-top > span:last-child { background:#fffdf7e8; color:#143f4f; box-shadow:0 2px 9px #23475325; padding:4px 10px; }
.cat-badge { font-size:9px; bottom:10px; right:11px; border:0; background:#fffdf7ed; }
.card-shine { position:absolute; inset:0; pointer-events:none; opacity:0; z-index:4; background:radial-gradient(circle at var(--shine-x,50%) var(--shine-y,50%),#ffffff55,transparent 50%); transition:opacity .3s; mix-blend-mode:soft-light; }
.travel-card:hover .card-shine { opacity:1; }
.card-body { position:relative; padding:17px 22px 18px; background:linear-gradient(145deg,#fffdf7,white); }
.card-body::before { content:""; position:absolute; left:19px; right:19px; top:0; height:2px; background:linear-gradient(90deg,var(--card-color),transparent); }
.card-name { font-size:22px; margin:5px 0; }
.card-bottom { margin-top:14px; }
.scene-haze { position:absolute; inset:0; opacity:.32; pointer-events:none; background:linear-gradient(115deg,transparent 28%,#fff6c64d 40%,transparent 54%); transform:translateX(-20%); animation:haze-drift 14s ease-in-out infinite alternate; animation-play-state:paused; }
.in-viewport .scene-haze { animation-play-state:running; }
[data-scene="onsen"] .scene-haze,[data-scene="forest"] .scene-haze { opacity:.8; background:radial-gradient(ellipse at 35% 100%,#f0ffffb0,transparent 48%),radial-gradient(ellipse at 70% 85%,#eefef97a,transparent 40%); }
.scene-sparkles { position:absolute; width:3px; height:3px; background:#fff9; top:36%; left:20%; box-shadow:120px 35px 0 #fff8,52px -37px 0 #fff8,230px 70px 0 #fff7,180px -53px 0 #fff9; animation:light-flicker 6s ease-in-out infinite; animation-play-state:paused; pointer-events:none; }
.in-viewport .scene-sparkles { animation-play-state:running; }
[data-scene="island"] .scene-sparkles,[data-scene="town"] .scene-sparkles,[data-scene="food"] .scene-sparkles,[data-scene="rail"] .scene-sparkles { display:none; }
.buddy-station { max-width:1180px; margin:0 auto 65px; padding:43px 30px 35px; background:radial-gradient(ellipse at 50% 100%,var(--buddy-bg,#d7f3f6),transparent 73%),#f6fbf7; border:1px solid #c6e6e3; border-radius:34px 8px 34px 8px; text-align:center; position:relative; transition:background 1s; }
.buddy-heading h2 { font-size:30px; margin:6px 0; }
.buddy-heading > p:last-child { font-size:12px; color:var(--muted); }
.buddy-roster { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:8px; margin:27px 0 16px; }
.buddy-roster button { position:relative; padding:0 0 8px; background:none; border-radius:50px 50px 15px 15px; transition:background .3s,transform .3s; }
.buddy-roster button:hover,.buddy-roster button[aria-pressed="true"] { background:var(--buddy-color); transform:translateY(-5px); }
.buddy-roster button::after { content:""; position:absolute; bottom:34px; width:58%; height:7px; left:21%; background:#264e4b18; filter:blur(3px); border-radius:50%; z-index:-1; }
.buddy-roster .animated-cat { position:relative; width:100%; height:auto; max-width:112px; margin:auto; }
.buddy-roster span { display:block; font-size:9px; font-weight:700; white-space:nowrap; }
.buddy-response { width:fit-content; max-width:100%; margin:auto; min-height:94px; padding:14px 24px 6px; background:#fffdf7ee; border-radius:22px; border:1px solid #cbe1dc; box-shadow:0 5px 0 #cbe1dc50; }
.buddy-response p { font-size:13px; }
.buddy-response .text-button { font-size:11px; }
.joy-burst { position:fixed; width:0; height:0; pointer-events:none; z-index:100; }
.joy-burst i { position:absolute; font-size:14px; font-style:normal; color:#e6b334; animation:joy .8s var(--delay) both ease-out; }
.joy-burst i:nth-child(2n) { color:var(--aqua); font-size:9px; }
.about-circle { background:radial-gradient(circle at 40% 40%,#fffbe3b0,#def4eca0),url('./assets/scenes-v3/sea-small.webp') center/cover; box-shadow:0 0 0 12px #e1f3e960,0 0 0 24px #e1f3e920; }
.closing { position:relative; background:linear-gradient(90deg,#fffdf7f0,#fffdf7bb,#fffdf7f0),url('./assets/scenes-v3/photo.webp') center 57%/cover; }
.closing > span { display:inline-block; animation:sticker-sway 6s infinite; }
/* Questions feel like stops on a small journey; the guide changes at each stop. */
html[data-page="quiz"] body,html[data-page="result"] body { background:radial-gradient(ellipse at 5% 12%,#d2f1f199,transparent 40%),radial-gradient(ellipse at 95% 85%,#ffe7b144,transparent 45%),#fffdf7; }
.journey-stations { position:relative; display:flex; justify-content:space-between; margin:18px 0 0; gap:4px; }
.journey-stations::before { content:""; position:absolute; top:13px; left:0; right:0; border-top:1px dashed #a7c8c9; z-index:-1; }
.journey-stations span { font-size:9px; width:26px; height:26px; display:grid; place-items:center; background:#fffdf7; border:1px solid #bbd7d7; border-radius:50%; }
.journey-stations .visited { background:#d4f0ed; color:var(--deep); border-color:#8ccecb; }
.journey-stations .current { background:var(--deep); color:white; border-color:var(--deep); box-shadow:0 0 0 4px #00a6c914; animation:station-pulse 2.5s infinite; }
.quiz-layout { padding-top:32px; }
.quiz-window { width:250px; height:300px; display:grid; align-items:end; justify-items:center; position:relative; background:linear-gradient(0deg,#fffdf74d,transparent),var(--scene) center/cover; border-radius:130px 130px 18px 18px; border:7px solid white; box-shadow:0 10px 30px #16415116,0 0 0 1px #b0d7d650; overflow:hidden; animation:opening-rise .6s both; }
.quiz-window::after { content:""; position:absolute; bottom:0; left:0; right:0; height:23%; background:linear-gradient(0deg,#fffdf7d9,transparent); pointer-events:none; }
.quiz-guide .quiz-window img { width:160px; height:auto; position:relative; z-index:1; margin-bottom:7px; filter:drop-shadow(0 5px 3px #173e3628); }
.quiz-guide p { background:#fff; box-shadow:0 5px 18px #1641510c; border:1px solid #d7e8dd; }
.answer > span:nth-child(2) { min-width:0; flex:1; }
.answer-phrase { display:inline-block; max-width:100%; }
.answer { box-shadow:0 3px 0 #dae9e570; position:relative; overflow:hidden; }
.answer:hover { transform:translateX(5px); box-shadow:0 5px 16px #00a6c914; }
.answer[aria-pressed="true"] { animation:answer-chosen .3s both; }
.loading-deck { background:none; border:0; width:220px; height:190px; animation:none; position:relative; display:block; }
.loading-deck img { width:120px; height:155px; object-fit:cover; border:6px solid white; border-bottom-width:28px; border-radius:8px; position:absolute; top:20px; left:50px; transform:rotate(calc((var(--i) - 2)*13deg)); box-shadow:0 4px 20px #163f5030; animation:shuffle 1.7s infinite; animation-delay:calc(var(--i)*-.15s); }
.result-stamp { display:inline-block; font-size:8px; letter-spacing:.16em; color:#007a9680; border:1px solid #007a9645; border-radius:4px; padding:4px 12px; margin-bottom:11px; transform:rotate(-5deg); }
.result-card-wrap { perspective:1200px; }
.result-card-wrap .travel-card { animation:card-reveal .95s cubic-bezier(.2,.7,.25,1) both; }
.result-copy { animation:opening-rise .7s .2s both; }
.result-copy .sensei-note { padding:0 10px 0 0; background:#edf8f0; border-radius:12px 30px 30px 12px; }
.sensei-note .animated-cat { width:80px; height:auto; flex-shrink:0; align-self:flex-end; }
.sensei-note p { font-size:12px; padding:10px 0; }
.spot-row { grid-template-columns:minmax(280px,.9fr) minmax(0,1fr); gap:30px; padding:0; overflow:hidden; border-color:#dae7de; border-radius:20px; box-shadow:0 6px 25px #163f500b; }
.spot-row > div:last-child { padding:25px 25px 25px 0; }
.spot-row .spot-visual { width:100%; height:100%; min-height:330px; border-radius:0; }
.spot-visual .scene-image { animation:scenic-drift 19s ease-in-out infinite alternate; animation-play-state:paused; }
.spot-visual.in-viewport .scene-image { animation-play-state:running; }
.spot-row .spot-visual::after { content:""; position:absolute; inset:50% 0 0; background:linear-gradient(0deg,#123c4760,transparent); }
.scene-caption { position:absolute; bottom:34px; left:23px; font-size:21px; font-weight:700; color:white; z-index:1; text-shadow:0 2px 10px #102f4a55; }
.art-label { position:absolute; bottom:16px; left:24px; font-size:8px; letter-spacing:.13em; color:#fffe; z-index:1; }
.scene-open { position:absolute; top:16px; right:16px; z-index:2; padding:6px 10px; border:1px solid #fffa; border-radius:30px; background:#fffdf7e8; font-size:10px; color:var(--ink); }
.spot-visual:hover .scene-open { background:white; }
.takeaway > .animated-cat { width:145px; height:auto; }
.dialog-panorama { position:relative; height:220px; margin:-38px -38px 28px; overflow:hidden; border-bottom:1px solid #d0ded4; }
.dialog-panorama::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#153d4ac4,transparent 75%); }
.dialog-panorama > span:not(.scene-haze):not(.scene-sparkles) { position:absolute; bottom:21px; left:35px; z-index:2; color:white; font-size:11px; }
.dialog-panorama strong { display:block; font-size:26px; margin-top:4px; }
.dialog-panorama > small { position:absolute; right:18px; bottom:17px; z-index:2; color:#fffc; font-size:8px; letter-spacing:.1em; }
.expand-scenery { position:absolute; z-index:3; right:72px; top:24px; font-size:11px; padding:7px 13px; border-radius:22px; border:1px solid #fff; background:#fffdf7eb; }
.dialog-panorama { transition:height .6s cubic-bezier(.2,.7,.2,1); }
.scene-expanded .dialog-panorama { height:auto; aspect-ratio:3/2; }
.dialog-controls { height:0; position:sticky; top:0; z-index:5; display:flex; justify-content:flex-end; }
.dialog-controls .dialog-close { position:relative; top:0; float:none; margin:-20px -20px 0 0; flex-shrink:0; box-shadow:0 4px 18px #17384730; }
.dialog-layout { align-items:start; }
.dialog-layout .travel-card .card-art { height:285px; }
dialog[open] { animation:dialog-arrival .4s both; }
@keyframes scenery-arrive { from{opacity:0}to{opacity:1} }
@keyframes scenery-leave { to{opacity:0} }
@keyframes scenic-drift { from{transform:scale(1.03) translateX(-.5%)}to{transform:scale(1.1) translateX(.6%)} }
@keyframes opening-rise { from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none} }
@keyframes pair-arrival { from{opacity:0;translate:30px 12px}to{opacity:1;translate:0 0} }
@keyframes hero-companions { 0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-8px) rotate(.6deg)} }
@keyframes card-companions { 0%,100%{transform:translateY(0) rotate(-.35deg)}50%{transform:translateY(-4px) rotate(.35deg)} }
@keyframes ground-shadow { 50%{scale:.9;opacity:.65} }
@keyframes speech-arrival { from{opacity:0;transform:translateY(8px) rotate(-10deg) scale(.9)}to{opacity:1;transform:rotate(-4deg)} }
@keyframes sticker-sway { 0%,100%{transform:rotate(9deg)}50%{transform:rotate(16deg)} }
@keyframes button-shimmer { 0%,65%{transform:translateX(-60%) rotate(-18deg)}100%{transform:translateX(60%) rotate(-18deg)} }
@keyframes tide { to{transform:translateX(-50%)} }
@keyframes firefly { 0%,100%{opacity:.1;transform:translate(0,10px) scale(.5)}50%{opacity:.8;transform:translate(16px,-26px) scale(1.1)} }
@keyframes dash-travel { to{stroke-dashoffset:-180} }
@keyframes paper-flight { 0%{offset-distance:0%;opacity:0}5%,90%{opacity:.8}100%{offset-distance:100%;opacity:0} }
@keyframes haze-drift { to{transform:translateX(15%);opacity:.6} }
@keyframes light-flicker { 0%,100%{opacity:.1}40%{opacity:.75} }
@keyframes joy { from{opacity:1;transform:rotate(var(--angle)) translateX(4px) rotate(calc(var(--angle)*-1))}to{opacity:0;transform:rotate(var(--angle)) translateX(var(--distance)) rotate(calc(var(--angle)*-1))} }
@keyframes station-pulse { 50%{box-shadow:0 0 0 7px #00a6c914} }
@keyframes answer-chosen { 50%{transform:scale(.985)} }
@keyframes shuffle { 0%,100%{transform:translateX(0) rotate(calc((var(--i) - 2)*13deg))}50%{transform:translateX(calc((var(--i) - 2)*30px)) translateY(-10px) rotate(calc((var(--i) - 2)*18deg))} }
@keyframes card-reveal { from{opacity:0;transform:perspective(1000px) rotateY(-55deg) translateY(35px) scale(.88)}to{opacity:1;transform:perspective(1000px) rotateY(0) translateY(0) scale(1)} }
@keyframes dialog-arrival { from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none} }
.hero:not(.in-viewport) *, .document-hidden *, .document-hidden *::before, .document-hidden *::after { animation-play-state:paused!important; }
.motion-off .travel-card,.motion-off .pair-image { transform:none!important; }
.motion-off .joy-burst { display:none; }
.motion-off .hero-scenery.departing { display:none; }
@media(max-width:1250px) {
 .hero-caption .hero-speech { top:170px; left:calc(50% + 16px); }
 .hero-journeys { margin-left:40px; margin-right:40px; gap:7px; }
 .hero-journeys button > span { font-size:9px; }
 .buddy-station { margin-left:40px; margin-right:40px; }
 .hero-inner { min-height:580px; }.hero-art { height:410px; }
 .card-art { height:315px; }
}
@media(max-width:1000px) {
 .hero-inner { gap:10px; }.hero h1 { font-size:47px; }.hero-art { height:380px; }.hero-caption .hero-sticker { width:82px; height:82px; font-size:11px; }
 .hero-destination strong { font-size:21px; }.hero-destination { width:94%; padding:12px 15px; }.hero-caption .hero-speech { font-size:11px; top:150px; left:calc(50% + 10px); }
 .hero-journeys { gap:6px; }.hero-journeys button > span { font-size:8px; gap:2px; }.hero-journeys small { display:none; }
 .card-art { height:286px; }.card-body { padding:16px; }.card-name { font-size:18px; }.card-top > span:last-child { font-size:9px; }
 .buddy-station { padding:35px 20px 28px; }.buddy-roster { gap:3px; }.buddy-roster span { font-size:8px; }
 .quiz-window { width:215px; height:267px; }.quiz-guide .quiz-window img { width:145px; }
 .spot-row { grid-template-columns:minmax(220px,.8fr) minmax(0,1fr); gap:23px; }
}
@media(max-width:760px) {
 html { scroll-padding-top:90px; }
 .expand-scenery { top:15px; right:63px; font-size:10px; }
 .dialog-controls .dialog-close { margin:-16px -10px 0 0; }
 .site-header { z-index:20; }.hero::before { background:linear-gradient(180deg,#fffdf7e8 0%,#fffdf7d9 25%,#fffdf721 48%,#fffdf714 70%,#fffdf7e6 94%); }
 .hero-scenery { object-position:48% 58%; }.hero-inner { padding:29px 24px 9px; gap:9px; min-height:0; grid-template-columns:1fr; }
 .hero h1 { font-size:43px; line-height:1.3; }.hero h1 > span:first-child { font-size:.61em; margin-bottom:8px; }.hero-kicker { margin:9px 0 12px; font-size:11px; }
 .hero-description { margin:17px 0 20px; }.hero-guide { display:none; }.hero-meta { margin-top:12px; }
 .hero-stage { max-width:420px; padding:0 7px; }.hero-art { height:340px; }.hero-art > img { height:100%; width:93%; left:5%; }.hero-caption { padding:14px 0 18px; }.hero-caption .hero-speech { font-size:11px; top:140px; left:calc(50% + 8px); }
 .hero-buddy { bottom:8px; }.hero-destination { width:91%; margin:-6px auto 0; padding:10px 14px; }.hero-destination strong { font-size:23px; }.hero-destination small { font-size:10px; }
 .hero-switcher { margin-top:17px; gap:11px; }.hero-switcher button { width:35px; height:35px; }.hero-timer { width:60px; }
 .hero-journeys { display:flex; gap:9px; overflow-x:auto; margin:0; padding:19px 24px 20px; scrollbar-width:thin; scrollbar-color:#88bec6 transparent; scroll-snap-type:x proximity; }
 .hero-journeys button { flex:0 0 90px; scroll-snap-align:center; }.hero-journeys button > span { font-size:10px; justify-content:center; }.hero-journeys img { height:44px; }
 .hero-wave { bottom:62px; height:60px; }.hero-bottom { gap:4px; padding:12px 20px; font-size:10px; }
 .flight-path { top:32%; height:45%; }.hero-atmosphere { top:26%; }
 .collection { padding-top:58px; }.collection::before { width:80px; height:80px; top:38px; font-size:10px; opacity:.6; }.section-heading h2 { font-size:30px; }
 .card-art { height:325px; }.cards-grid { gap:24px; }.card-name { font-size:19px; }
 .buddy-station { margin:0 22px 45px; padding:31px 18px 27px; }.buddy-heading h2 { font-size:27px; }.buddy-roster { grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px 8px; max-width:400px; margin:20px auto; }.buddy-roster .animated-cat { max-width:98px; }.buddy-roster span { font-size:10px; }.buddy-response { padding:13px 13px 7px; }.buddy-response p { font-size:12px; }
 .quiz-layout { padding-top:20px; }.quiz-window { width:95px; height:113px; border-width:3px; border-radius:55px 55px 9px 9px; flex-shrink:0; }.quiz-guide .quiz-window img { width:71px; margin-bottom:0; }.quiz-guide { gap:15px; }.quiz-guide p { font-size:11px; }.journey-stations { margin-top:15px; }.journey-stations span { width:24px; height:24px; font-size:8px; }.journey-stations::before { top:12px; }
 .spot-row { grid-template-columns:1fr; gap:0; }.spot-row .spot-visual { min-height:0; height:255px; }.spot-row > div:last-child { padding:21px; }.spot-visual .scene-image { object-position:center; }.scene-caption { font-size:22px; }.sensei-note .animated-cat { width:73px; }
 .dialog-panorama { margin:-29px -22px 23px; height:clamp(145px,43vw,190px); }.dialog-panorama > span:not(.scene-haze):not(.scene-sparkles) { left:22px; bottom:24px; font-size:10px; }.dialog-panorama strong { font-size:23px; }.dialog-panorama > small { bottom:8px; font-size:7px; }
 .dialog-layout .travel-card .card-art { height:285px; }
}
@media(max-width:480px) {
 .hero-inner { padding-left:22px; padding-right:22px; }.hero h1 { font-size:40px; }.hero .eyebrow { font-size:8px; letter-spacing:.15em; }.hero-description { font-size:12px; }.hero-description .phrase { font-size:12px; }
 .hero-art { height:318px; }.hero-art > img { width:95%; left:3%; }.hero-caption .hero-sticker { width:76px; height:76px; font-size:10px; }.hero-sticker small { font-size:7px; }.hero-caption .hero-speech { font-size:10px; padding:8px 12px; top:135px; left:calc(50% + 8px); max-width:calc(50% - 14px); }.hero-destination strong { font-size:22px; }
 .card-art { height:335px; }.card-name { font-size:23px; }.card-top > span:last-child { font-size:11px; }.card-body { padding:17px 21px; }.card-bottom { font-size:11px; }.collection::before { right:0; top:50px; }
 .spot-row .spot-visual { height:220px; }.spot-row > div:last-child { padding:19px; }.spot-row h3 { font-size:21px; }.result-nav { margin-top:21px; }.result-heading h1 { font-size:23px; }
 .result-card-wrap .card-art { height:320px; }
}
@media(max-width:350px) {
 .hero-inner { padding:24px 17px 8px; }.hero h1 { font-size:34px; }.hero-description .phrase { font-size:11px; }.hero .button { font-size:12px; gap:17px; }.hero-art { height:283px; }.hero-stage { padding:0; }.hero-caption .hero-sticker { width:67px; height:67px; font-size:9px; }.hero-caption .hero-speech { top:121px; left:calc(50% + 8px); }.hero-destination { width:94%; }.hero-destination strong { font-size:20px; }.hero-destination small { font-size:9px; }
 .card-art { height:303px; }.card-name { font-size:20px; }.buddy-station { margin-left:17px; margin-right:17px; padding-left:12px; padding-right:12px; }.buddy-roster { gap:12px 4px; }.buddy-roster span { font-size:8px; }.quiz-guide p { font-size:10px; padding:10px 12px; }.quiz-guide { gap:10px; }
 .result-card-wrap .card-art { height:295px; }.scene-caption { left:18px; }.art-label { left:19px; }
}
@media(prefers-reduced-motion:reduce) {
 .js-motion .card-item > .travel-card { opacity:1; translate:0 0; }
 .hero-scenery.departing,.joy-burst { display:none; }.travel-card,.pair-image { transform:none!important; }
}