/* 租屋處 — public site. Static, no build. Cozy storybook look (matches the game art). */
:root{
  --paper:#efe4c8; --paper2:#e8dbba; --card:#fffdf5; --ink:#3a2f20; --ink2:#5c4e38;
  --dim:#86755a; --line:#ddcfa9; --accent:#9a6438; --gold:#c79a3a;
  --green:#6f8f4f; --dark:#2a2117; --maxw:1140px;
  /* one font family for the whole site (aligned) */
  --font:-apple-system,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --hand:var(--font); --title:var(--font);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);
  background:var(--paper);color:var(--ink);line-height:1.8;font-size:16px;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,span,a,div,figcaption{font-family:var(--font)}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--accent)}

/* ---- store badges ---- */
.badges{display:flex;gap:12px;flex-wrap:wrap}
.store{display:inline-flex;align-items:center;gap:10px;background:#1c1813;color:#fff;border-radius:12px;
  padding:9px 20px;border:1px solid rgba(255,255,255,.14);line-height:1.1}
.store:hover{text-decoration:none;background:#2a2419}
.store svg{width:22px;height:22px;flex:none;fill:#fff}
.store .s1{font-size:15px;color:#fff;letter-spacing:.5px;font-weight:600}
@media(max-width:520px){
  .store{padding:9px 16px;gap:9px}
  .store .s1{font-size:14px}
  .hero .badges .store,.band .badges .store{transform:none}
  /* stack the two badges so neither gets clipped on a phone */
  .badges{flex-direction:column;gap:11px}
  .hero .badges{align-items:flex-start}
  .band .badges{align-items:center}
}

/* ---- nav (over hero) ---- */
.nav{position:absolute;top:0;left:0;right:0;z-index:20}
.nav .wrap{display:flex;align-items:center;gap:20px;height:84px;max-width:none;padding:0 clamp(28px,6vw,120px)}
.brand{display:flex;flex-direction:column;line-height:1;color:#fff}
.brand .n{font-size:26px;font-weight:900;letter-spacing:3px;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.brand .t{font-size:11px;letter-spacing:2px;color:#e9dcc0;margin-top:5px}
.nav .links{margin-left:28px;display:flex;gap:22px}
.nav .links a{color:#f1e7d2;font-size:14.5px;font-weight:600;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.nav .links a:hover{color:#fff;text-decoration:none}
.nav .badges{margin-left:auto}
.nav .store{transform:scale(.92)}
@media(max-width:980px){.nav .links{display:none}.nav .badges{display:none}}

/* ---- hero ---- */
.hero{position:relative;height:100vh;height:100svh;min-height:580px;display:flex;align-items:center;color:#fff;overflow:hidden}
.hero .bg{position:absolute;inset:0;background:url('img/hero.jpg') center 42% / cover no-repeat}
.hero .scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,16,11,.82) 0%,rgba(20,16,11,.55) 42%,rgba(20,16,11,.15) 75%),
             linear-gradient(0deg,rgba(20,16,11,.55),rgba(20,16,11,0) 40%)}
.hero .wrap{position:relative;z-index:2;width:100%;max-width:none;min-width:0;margin:0;padding:60px 28px 0 clamp(28px,6vw,120px)}
.hero h1{font-family:var(--title);font-size:52px;line-height:1.32;margin:0 0 26px;letter-spacing:2px;
  font-weight:800;text-shadow:0 3px 18px rgba(0,0,0,.55);max-width:16ch}
.hero p.tag{font-size:17px;line-height:2;color:#efe6d4;max-width:34ch;text-shadow:0 2px 10px rgba(0,0,0,.5);margin:0 0 30px}
.hero .badges .store{transform:scale(1.04);transform-origin:left}
.hero .small{margin-top:16px;font-size:13px;color:#d9ccb0}
@media(max-width:680px){.hero h1{font-size:36px}}

/* ---- sections ---- */
section{padding:74px 0}
.kerf{height:1px;background:var(--line);max-width:var(--maxw);margin:0 auto}
h2.sec{font-family:var(--title);font-size:clamp(34px,3.6vw,50px);margin:0 0 8px;letter-spacing:2px;font-weight:800}
.sec-sub{color:var(--ink2);font-size:16px;margin:0 0 30px}
.center{text-align:center}


/* CTA band (dark) */
.band{position:relative;color:#fff;overflow:hidden}
.band .bg{position:absolute;inset:0;background:url('img/hero-night.jpg') center 60% / cover;filter:brightness(.5)}
.band .scrim{position:absolute;inset:0;background:linear-gradient(rgba(18,14,9,.74),rgba(18,14,9,.82))}
.band .wrap{position:relative;z-index:2;text-align:center;max-width:760px;margin:0 auto;padding:158px 28px}
.band h2{font-family:var(--title);font-size:clamp(40px,5vw,60px);margin:14px 0 24px;font-weight:800;letter-spacing:8px}
.band p{color:#e7dcc6;margin:0 auto 34px;font-size:17px;line-height:2;max-width:32em}
.band .badges{justify-content:center}
@media(max-width:820px){.band .wrap{padding:108px 24px}.band h2{letter-spacing:5px}}

/* footer */
footer{background:#211a12;color:#cdbfa6;padding:30px 0;font-size:13.5px}
footer .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;text-align:center}
footer .tw{color:#f1e7d2;font-weight:700}
footer a{color:#cdbfa6}
footer .sp{flex:1}
@media(max-width:680px){footer .sp{display:none}}

/* ---- intro (text + wide image) ---- */
.intro-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:46px;align-items:center}
.intro-grid p{margin:0 0 18px;font-size:17px}
.intro-grid .soft{color:var(--ink2);font-size:15.5px}
.intro-grid .big{font-size:clamp(27px,3vw,38px);font-weight:800;line-height:1.7;letter-spacing:.5px;color:var(--ink)}
.intro-grid img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center 40%;max-height:430px;
  border-radius:10px;border:1px solid var(--line);box-shadow:0 14px 34px rgba(80,55,25,.2)}
@media(max-width:820px){.intro-grid{grid-template-columns:1fr;gap:26px}}

/* ---- paths: 5 life-ending cards on a dark band ---- */
.paths{color:#efe4c8;padding:88px 0;background:linear-gradient(180deg,#272019,#1c1712)}
.paths .wrap{max-width:1420px}
.paths-grid{display:grid;grid-template-columns:.5fr 1.5fr;gap:60px;align-items:center}
.paths-txt h2{font-family:var(--font);font-size:clamp(30px,3vw,42px);line-height:1.4;margin:0 0 18px;color:#e7c074;font-weight:800}
.paths-txt p{color:#cdbfa6;font-size:17px;margin:0;line-height:2}
/* Swiper carousel */
.paths-row{width:100%;overflow:hidden}
.path{margin:0;height:auto}
.path img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px;
  border:1px solid rgba(240,225,190,.16);box-shadow:0 16px 32px rgba(0,0,0,.45)}
.path figcaption{text-align:center;margin-top:14px;font-size:14.5px;color:#d8c9a8}
.paths-row .swiper-pagination{position:static;margin-top:22px}
.paths .swiper-pagination-bullet{background:#cdbfa6;opacity:.45;width:8px;height:8px}
.paths .swiper-pagination-bullet-active{background:#e7c074;opacity:1}
@media(min-width:900px){.paths-row .swiper-pagination{display:none}}   /* all 5 shown → no dots */
@media(max-width:900px){.paths-grid{grid-template-columns:1fr;gap:28px}}

/* ---- scene row: clean framed photos (no tape) ---- */
.scenes{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:34px}
.scene{margin:0}
.scene img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:9px;border:1px solid var(--line);
  box-shadow:0 10px 24px rgba(80,55,25,.18)}
.scene figcaption{text-align:center;margin-top:14px;color:var(--ink2);font-size:15px;line-height:1.85}
@media(max-width:820px){.scenes{grid-template-columns:1fr 1fr;gap:18px}}

/* ===== motion / micro-interactions ===== */
@keyframes fadeUp{to{opacity:1;transform:none}}
@keyframes kenburns{from{transform:scale(1.005)}to{transform:scale(1.07)}}
/* always-on, cheap transitions (fine for reduced-motion too) */
.scene img,.path img{transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s}
.store{transition:transform .2s ease,background .2s ease}
.nav{transition:background .3s ease,backdrop-filter .3s ease,box-shadow .3s ease}
.nav.scrolled{background:rgba(24,18,13,.72);backdrop-filter:blur(9px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.nav .links a{position:relative}
.nav .links a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:2px;
  background:#e6c074;transition:right .25s ease}
.nav .links a:hover::after{right:0}

@media(prefers-reduced-motion:no-preference){
  /* hero: slow ken-burns + staggered entrance */
  .hero .bg{animation:kenburns 30s ease-in-out infinite alternate}
  .hero .wrap>*{opacity:0;animation:fadeUp .85s cubic-bezier(.2,.7,.3,1) forwards}
  .hero h1{animation-delay:.1s}
  .hero p.tag{animation-delay:.3s}
  .hero .badges{animation-delay:.46s}
  .hero .small{animation-delay:.6s}
  /* scroll reveal (only when JS is on, so no-JS still shows everything) */
  html.js .reveal{opacity:0;transform:translateY(13px);
    transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.3,1)}
  html.js .reveal.in{opacity:1;transform:none}
  html.js .reveal.s1{transition-delay:.07s}
  html.js .reveal.s2{transition-delay:.15s}
  html.js .reveal.s3{transition-delay:.23s}
  html.js .reveal.s4{transition-delay:.31s}
  /* hover lift */
  .scene:hover img{transform:translateY(-6px) scale(1.012);box-shadow:0 20px 38px rgba(80,55,25,.3)}
  .path:hover img{transform:translateY(-6px) scale(1.012);box-shadow:0 20px 36px rgba(0,0,0,.5)}
  .store:hover{transform:translateY(-2px)}
}

/* ===== full-page sections ===== */
/* full-height, vertically-centered sections — ALL sizes. 100svh = content always fits the phone. */
body>section,body>.band{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
@media(min-width:821px){
  header.hero{height:auto;min-height:100vh;min-height:100svh;max-height:none}
}
@media(min-width:821px) and (prefers-reduced-motion:no-preference){
  /* gentle native fallback (no-JS); JS smooth-scroll takes over when active */
  html{scroll-snap-type:y proximity}
  header.hero,body>section,body>.band{scroll-snap-align:start}
}
html.jsfp{scroll-snap-type:none}   /* JS full-page smooth-scroll active → disable native snap */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* scroll-to-next indicator (desktop full-page only) */
.scroll-next{display:none}
@media(min-width:821px){
  .scroll-next{display:flex;position:fixed;right:30px;bottom:30px;z-index:40;width:52px;height:52px;
    align-items:center;justify-content:center;background:rgba(28,22,16,.5);backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.22);border-radius:50%;cursor:pointer;
    transition:opacity .35s ease,transform .2s ease,background .2s ease}
  .scroll-next:hover{background:rgba(42,33,22,.82);transform:translateY(-2px)}
  .scroll-next svg{width:22px;height:22px;stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .scroll-next.hide{opacity:0;pointer-events:none}
}
@media(min-width:821px) and (prefers-reduced-motion:no-preference){
  .scroll-next svg{animation:bob 1.8s ease-in-out infinite}
}
@keyframes bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}