/* 娃邸家 coming-soon page. Tokens follow src/base.css and DESIGN.md. */
@font-face{
  font-family:"huninn-sub";
  src:url("./assets/huninn-sub.woff2") format("woff2");
  font-display:swap;
}
:root{
  --paper:#FBF4E3;
  --paper-deep:#F3E7CC;
  --card:#FFFDF6;
  --ink:#4A3B2A;
  --ink-soft:#8B7355;
  --butter:#FFD45E;
  --coral:#FF8C73;
  --coral-deep:#F26B4E;
  --leaf:#7DBE7A;
  --leaf-deep:#5A9E6A;
  --sky:#8FCFE8;
  --line:#4A3B2A;
  --shadow:4px 5px 0 rgba(74,59,42,.85);
  --shadow-sm:2px 3px 0 rgba(74,59,42,.85);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --round:"huninn-sub","Baloo 2","Noto Sans TC",sans-serif;
  --body:"Nunito","Noto Sans TC",sans-serif;
}
*{box-sizing:border-box;margin:0;}
html{background:var(--paper);overflow-x:clip;}
body{
  min-height:100vh;display:flex;flex-direction:column;
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-weight:700;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* paper grain */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.page{width:100%;max-width:1040px;margin:0 auto;padding:0 20px;flex:1;}

/* ---------- top bar ---------- */
.top{display:flex;align-items:center;justify-content:space-between;padding:18px 0 8px;}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:var(--round);font-size:22px;}
.brand img{width:40px;height:40px;border-radius:12px;border:2.5px solid var(--line);box-shadow:var(--shadow-sm);}
.domain{
  font-family:"Baloo 2",sans-serif;font-size:15px;padding:3px 14px;border-radius:99px;
  background:var(--card);border:2.5px solid var(--line);box-shadow:var(--shadow-sm);transform:rotate(1.4deg);
}

/* ---------- hero ---------- */
.hero{
  display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;
  gap:6px;padding:28px 0 12px;
}
.icon-wrap{position:relative;margin-bottom:14px;animation:rise .6s var(--ease-bounce) both;}
.icon{
  display:block;width:168px;height:168px;border-radius:40px;
  border:3px solid var(--line);box-shadow:var(--shadow);transform:rotate(-3deg);
}
.stamp{
  position:absolute;right:-34px;bottom:-12px;
  font-family:var(--round);font-size:17px;letter-spacing:.08em;color:var(--coral-deep);
  padding:6px 12px;border:3px solid var(--coral-deep);border-radius:12px;background:rgba(255,253,246,.92);
  transform:rotate(-12deg);animation:thunk .5s .45s var(--ease-bounce) both;
}
h1{
  font-family:var(--round);font-weight:normal;font-size:clamp(56px,11vw,96px);line-height:1.1;letter-spacing:.06em;
  text-shadow:4px 5px 0 var(--butter);animation:rise .6s .1s var(--ease-bounce) both;
}
.lead,.sub,.note p{text-wrap:balance;}
.lead{font-size:clamp(18px,3.2vw,22px);font-weight:800;margin-top:6px;animation:rise .6s .18s var(--ease-out) both;}
.sub{color:var(--ink-soft);font-size:16px;animation:rise .6s .26s var(--ease-out) both;}
.soon{margin-top:14px;animation:rise .6s .34s var(--ease-out) both;}
.soon span{
  display:inline-block;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:18px;letter-spacing:.04em;
  padding:6px 22px;border-radius:99px;background:var(--coral);color:var(--card);
  border:2.5px solid var(--line);box-shadow:var(--shadow-sm);transform:rotate(-1.6deg);
}

@media (min-width:820px){
  .hero{grid-template-columns:auto 1fr;grid-template-rows:auto auto auto auto;column-gap:56px;text-align:left;justify-items:start;padding-top:48px;}
  .icon-wrap{grid-column:2;grid-row:1 / span 4;justify-self:center;align-self:center;margin:0;}
  .icon{width:240px;height:240px;border-radius:56px;}
  .stamp{font-size:22px;right:-40px;}
  .hero > :not(.icon-wrap){grid-column:1;}
}

/* ---------- three pasted notes ---------- */
.notes{display:grid;gap:18px;grid-template-columns:1fr;margin:36px auto 12px;max-width:420px;}
.note{
  position:relative;display:grid;grid-template-columns:72px 1fr;column-gap:14px;align-items:center;
  background:var(--card);border:2.5px solid var(--line);border-radius:22px;padding:14px 18px;box-shadow:var(--shadow);
  animation:rise .5s var(--ease-bounce) both;
}
.note img{grid-row:1 / span 2;width:72px;height:72px;object-fit:contain;}
.note h2{font-family:var(--round);font-weight:normal;font-size:20px;line-height:1.3;}
.note p{font-size:14.5px;color:var(--ink-soft);line-height:1.5;}
.note::before{ /* masking tape */
  content:"";position:absolute;top:-11px;left:50%;width:64px;height:20px;margin-left:-32px;
  background:rgba(255,212,94,.75);border-radius:3px;transform:rotate(-4deg);
}
.note-a{transform:rotate(-1.4deg);animation-delay:.45s;}
.note-b{transform:rotate(1.1deg);animation-delay:.52s;}
.note-b::before{background:rgba(143,207,232,.75);transform:rotate(3deg);}
.note-c{transform:rotate(-.6deg);animation-delay:.59s;}
.note-c::before{background:rgba(125,190,122,.7);}
@media (min-width:820px){
  .notes{grid-template-columns:repeat(3,1fr);max-width:none;gap:26px;margin-top:56px;}
  .note{grid-template-columns:1fr;text-align:center;justify-items:center;padding:18px 18px 20px;}
  .note img{grid-row:auto;width:96px;height:96px;margin-bottom:6px;}
}

/* ---------- plaza scene ---------- */
.scene{position:relative;height:230px;margin-top:32px;pointer-events:none;overflow-x:clip;}
.ground{
  position:absolute;left:-4%;right:-4%;bottom:0;height:70px;z-index:1;
  background:var(--leaf);border-top:3px solid var(--line);border-radius:50% 50% 0 0 / 34px 34px 0 0;
}
.ground::after{ /* path */
  content:"";position:absolute;left:0;right:0;top:26px;height:16px;background:var(--paper-deep);
  border-top:2.5px dashed rgba(74,59,42,.35);border-bottom:2.5px dashed rgba(74,59,42,.35);
}
.prop{position:absolute;bottom:44px;z-index:0;height:auto;}
.p-ferris{left:1%;width:150px;}
.p-tree{left:17%;width:84px;}
.p-carousel{left:37%;width:120px;}
.p-lamp{left:58%;width:30px;}
.p-gazebo{left:67%;width:120px;}
.p-balloon{left:86%;width:92px;}

.doll{position:absolute;bottom:14px;z-index:2;width:62px;animation:hop 2.6s var(--ease-out) infinite;}
.doll > img:last-child{display:block;width:100%;height:auto;}
.bubble{
  position:absolute;left:50%;bottom:100%;width:34px;margin-left:-17px;opacity:0;
  animation:bubble 7s var(--ease-bounce) infinite;
}
.d1{left:8%;animation-delay:.1s;}      .d1 .bubble{animation-delay:.4s;}
.d2{left:22%;width:56px;animation-delay:.9s;}  .d2 .bubble{animation-delay:3.1s;}
.d3{left:34%;animation-delay:.4s;}     .d3 .bubble{animation-delay:1.6s;}
.d4{left:50%;animation-delay:1.3s;}    .d4 .bubble{animation-delay:4.4s;}
.d5{left:63%;width:54px;animation-delay:.6s;}  .d5 .bubble{animation-delay:2.3s;}
.d6{left:76%;animation-delay:1.7s;}    .d6 .bubble{animation-delay:5.6s;}
.d7{left:89%;width:54px;animation-delay:.2s;}  .d7 .bubble{animation-delay:3.8s;}

@media (max-width:640px){
  .scene{height:190px;}
  .p-ferris{width:110px;left:-4%;}
  .p-carousel,.p-lamp{display:none;}
  .p-tree{left:28%;width:70px;}
  .p-gazebo{left:52%;width:96px;}
  .p-balloon{left:80%;width:76px;}
  .doll{width:50px;}
  .d2,.d5{width:44px;}
  .d3,.d5,.d6{display:none;}
  .d1{left:6%;} .d2{left:30%;} .d4{left:56%;} .d7{left:82%;}
}

.foot{
  position:relative;z-index:3;background:var(--leaf);text-align:center;
  padding:0 16px 22px;font-size:13px;color:#2F4A2C;
}

/* ---------- motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(14px);}}
@keyframes thunk{from{opacity:0;transform:rotate(-12deg) scale(1.8);}to{opacity:1;transform:rotate(-12deg) scale(1);}}
@keyframes hop{
  0%,62%,100%{transform:translateY(0) scaleY(1);}
  68%{transform:translateY(0) scale(1.06,.92);}
  78%{transform:translateY(-16px) scale(.97,1.04);}
  88%{transform:translateY(0) scale(1.04,.95);}
}
@keyframes bubble{
  0%,4%{opacity:0;transform:translateY(8px) scale(.6);}
  8%,26%{opacity:1;transform:translateY(-4px) scale(1);}
  32%,100%{opacity:0;transform:translateY(-12px) scale(.9);}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;}
  .d1 .bubble,.d4 .bubble{opacity:1;}
}