/* ==========================================================================
   KOGUMA HOUSE · 小熊家 Tokyo Stay — Hero 第一屏
   颜色全部取自手绘背景：暖白 / 奶油 / 暖棕 / 淡植物绿 / 印章红
   ========================================================================== */

:root{
  /* —— 取自画面的颜色 —— */
  --glow:      #FFF5D8;   /* 发光文字（不是纯白） */
  --glow-soft: #FFEFC6;
  --ink:       #6B4A2E;   /* 暖棕，画面轮廓线的颜色 */
  --ink-soft:  #8A6A4C;
  --cream:     #FAF4E6;
  --leaf:      #A9BE8C;   /* 极淡植物绿 */
  --seal:      #C2453A;   /* Logo 上的小红印章 */

  /* —— 背景之上那层极淡暖影：只为文字可读。设成 0 即可完全关闭 —— */
  --veil: 1;

  /* —— 字体：系统字体，温柔、有生活杂志感，不引入外部依赖 —— */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
                "Hiragino Mincho ProN", "Yu Mincho", YuMincho,
                "Songti SC", "Noto Serif CJK SC", serif;
  --font-sans:  "Avenir Next", "Segoe UI", -apple-system,
                "Hiragino Kaku Gothic ProN", "Yu Gothic UI",
                "PingFang SC", "Microsoft YaHei", sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html,body{
  margin:0; padding:0;
  height:100%;
  background:var(--cream);
  font-family:var(--font-serif);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;               /* 本轮只有第一屏 */
}

/* ==========================  HERO  ========================== */

.hero{
  position:relative;
  width:100vw;
  height:100vh;
  height:100svh;
  overflow:hidden;
}

/* 手绘图：铺满，不加任何滤镜。桌面按 16:9 居中构图 */
.hero__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 50%;
  user-select:none; -webkit-user-drag:none;
  animation:heroIn .6s var(--ease) both;
}
@keyframes heroIn{ from{opacity:0} to{opacity:1} }

/* 极淡暖影：右侧一团很宽的柔光 + 顶部一点点，让 UI 站得住 */
.hero__veil{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:var(--veil);
  background:
    radial-gradient(72% 78% at 88% 52%, rgba(86,58,34,.30), rgba(86,58,34,0) 68%),
    linear-gradient(180deg, rgba(86,58,34,.20), rgba(86,58,34,0) 26%);
}

/* 只在 hero.png 缺失时出现 */
.hero__missing{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background:
    radial-gradient(120% 90% at 50% 30%, #E3D5B9, #C8B593);
  color:#5B4126;
  font-family:var(--font-sans);
  font-size:.9rem; letter-spacing:.05em;
  text-align:center; padding:2rem;
}
.hero.no-image .hero__veil{ opacity:.35; }

/* ==========================  顶部  ========================== */

.top{
  position:absolute; inset:0 0 auto 0;
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:clamp(1.4rem,3.2vh,2.4rem) clamp(1.6rem,3.4vw,3.4rem);
  z-index:3;
}

/* —— Logo —— */
.logo{
  display:block;
  text-decoration:none;
  animation:softIn .9s var(--ease) both;
  animation-delay:.15s;
}
.logo__img{
  display:block;
  /* 透明版比例 946×679，图形本身已经裁紧（自带约 5% 透明安全区），
     所以比之前那版方图要收小一点，视觉体量才和画面相称 */
  width:clamp(145px,12vw,190px);
  height:auto;
  /* 不加 mix-blend-mode、不加滤镜、不加白底 / 卡片 / 阴影盒 */
}
/* logo.png 缺失时的文字备用区域（不自造 Logo，只放品牌文字） */
.logo__text{
  display:block; color:var(--glow);
  text-shadow:0 1px 3px rgba(74,48,26,.55), 0 0 22px rgba(255,240,205,.30);
}
.logo__name{
  display:block; white-space:nowrap;
  font-size:clamp(1.05rem,1.5vw,1.4rem);
  letter-spacing:.26em; font-weight:400;
}
.logo__sub{
  display:block; margin-top:.45em;
  font-family:var(--font-sans);
  font-size:clamp(.6rem,.75vw,.72rem);
  letter-spacing:.42em; opacity:.85;
}

/* —— 右上：音乐 + 语言 —— */
.controls{
  display:flex; align-items:center;
  gap:clamp(.7rem,1.4vw,1.15rem);
  animation:softIn .9s var(--ease) both;
  animation-delay:.30s;
}
.controls__sep{
  width:1px; height:1.05em;
  background:linear-gradient(rgba(255,245,216,0), rgba(255,245,216,.55), rgba(255,245,216,0));
}

.music{
  position:relative;
  width:clamp(30px,2.4vw,36px); height:clamp(30px,2.4vw,36px);
  padding:0; border:0; background:none; cursor:pointer;
  color:var(--glow);
  opacity:.88;                       /* 跟着提一级，但仍低于语言文字的 .94 */
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  filter:drop-shadow(0 1px 2px rgba(74,48,26,.5));
}
.music__mark{ width:100%; height:100%; display:block; }
.music__mark path,.music__mark ellipse{
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.music__note{ stroke-width:1.4; }
.music:hover,.music:focus-visible{ opacity:1; outline:none; }
.music[aria-pressed="true"]{ opacity:1; }
.music[aria-pressed="true"] .music__ring{ animation:ringPulse 3.4s ease-in-out infinite; }
@keyframes ringPulse{ 0%,100%{opacity:.5} 50%{opacity:1} }
/* 音乐 OFF 时，画面上一道很淡的手写斜杠 */
.music::after{
  content:"";
  position:absolute; left:22%; top:20%;
  width:1.6px; height:78%;
  background:currentColor; opacity:.5;
  transform:rotate(-42deg); transform-origin:top left;
  border-radius:1px;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.music[aria-pressed="true"]::after{ opacity:0; transform:rotate(-42deg) scaleY(.4); }

.langs{ display:flex; align-items:center; gap:clamp(.55rem,1.1vw,.95rem); white-space:nowrap; }
.lang{
  position:relative;
  border:0; background:none; padding:.15em 0; margin:0; cursor:pointer;
  font-family:var(--font-sans);
  font-size:clamp(.68rem,.82vw,.8rem);
  font-weight:600;
  letter-spacing:.16em;
  color:var(--glow);
  opacity:.94;                       /* 未选中也必须一眼读得出来 */
  text-shadow:0 1px 2px rgba(74,48,26,.6), 0 0 8px rgba(74,48,26,.34);
  transition:opacity .3s var(--ease);
}
.lang:hover,.lang:focus-visible{ opacity:1; outline:none; }
/* 当前语言：只是亮一点 + 一个小圆点 */
.lang.is-active{ opacity:1; }
.lang.is-active::after{
  content:""; position:absolute; left:50%; bottom:-.5em;
  width:3px; height:3px; border-radius:50%;
  transform:translateX(-50%);
  background:var(--glow);
  box-shadow:0 0 6px rgba(255,240,205,.9);
}

/* ==========================  右侧三个入口  ========================== */

.entries{
  position:absolute;
  right:clamp(2.2rem,7vw,7.5rem);
  top:50%; transform:translateY(-50%);
  display:grid;
  row-gap:clamp(1.9rem,4.4vh,3.1rem);
  z-index:3;
}

/* 已预订客人入口：绝对定位在三个主入口上方，不参与网格排版 ——
   它那条文字更长（英文尤其长），留在流里会把三个主入口的列宽撑开、
   箭头整体右移。right:0 让它的箭头和三个主入口的箭头对齐同一条右边线。 */
.entries__guest{
  position:absolute;
  right:0;
  bottom:calc(100% + 24px);          /* 与三个主入口之间约 24px */
  width:clamp(260px,20vw,300px);
  display:flex; align-items:center;
  padding:.8rem 1rem;
  /* 很淡的暖奶油半透明底 + 1px 暖白细边，不是卡片：无阴影、无实心块 */
  border:1px solid rgba(255,245,216,.32);
  border-radius:14px;
  background:rgba(255,246,226,.12);
  animation:softIn 1s var(--ease) backwards;
  animation-delay:.45s;
}

.entry{
  position:relative;
  display:grid;
  grid-template-columns:1.5em minmax(0,1fr) 1.9em;
  align-items:center;
  column-gap:.85em;
  margin:0; padding:.15em 0;
  border:0; background:none;         /* 没有框、没有底、没有卡片 */
  cursor:pointer;
  font-family:var(--font-serif);
  font-size:clamp(1.02rem,1.4vw,1.36rem);
  font-weight:600;
  letter-spacing:.11em;
  color:var(--glow);
  opacity:.98;                       /* 默认就要清楚 */
  text-align:left;
  /* 两层暗色只为在水彩上压得住，一层暖光贴着字，不外扩 */
  text-shadow:
    0 1px 3px rgba(74,48,26,.62),
    0 0 8px rgba(74,48,26,.52),
    0 0 10px rgba(255,238,200,.34);
  transition:color .32s var(--ease), opacity .32s var(--ease), text-shadow .32s var(--ease);
  /* backwards：入场前保持透明，动画结束后交还给上面的 opacity，hover 才能生效 */
  animation:softIn 1s var(--ease) backwards;
  animation-delay:var(--d,.55s);
}
.entry:focus{ outline:none; }

.entry__icon{ display:block; width:1.5em; }
.entry__icon svg{
  display:block; width:100%; height:auto;
  fill:none; stroke:currentColor; stroke-width:1.15;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.82;
  filter:drop-shadow(0 1px 2px rgba(74,48,26,.45));
  transition:opacity .32s var(--ease);
}
.entry__icon circle{ fill:currentColor; stroke:none; }

.entry__label{ white-space:nowrap; }

.entry__arrow{ display:block; width:1.6em; justify-self:end; }
.entry__arrow svg{
  display:block; width:100%; height:auto;
  fill:none; stroke:currentColor; stroke-width:1.15;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.55;
  filter:drop-shadow(0 1px 2px rgba(74,48,26,.45));
  transition:transform .34s var(--ease), opacity .34s var(--ease);
}

/* hover 才出现的小熊爪 */
.entry__paw{
  position:absolute; left:-2.05em; top:50%;
  width:1.05em;
  transform:translateY(-50%) rotate(-14deg) scale(.9);
  opacity:0;
  transition:opacity .38s var(--ease), transform .38s var(--ease);
  pointer-events:none;
}
.entry__paw svg{ display:block; width:100%; height:auto; fill:currentColor; opacity:.5; }

/* hover 才轻轻长出来的一小截藤蔓 */
.entry__vine{
  position:absolute; left:2.35em; bottom:-.55em;
  width:9.5em; height:.9em;
  pointer-events:none;
}
.entry__vine svg{ display:block; width:100%; height:100%; }
.vine__stem{
  fill:none; stroke:var(--glow-soft); stroke-width:1.1;
  stroke-linecap:round; opacity:.0;
  stroke-dasharray:130; stroke-dashoffset:130;
  transition:stroke-dashoffset .5s var(--ease), opacity .3s var(--ease);
}
.vine__leaf{
  fill:var(--glow-soft); opacity:0;
  transition:opacity .45s var(--ease) .12s;
}

/* —— hover / focus：安静地活过来 —— */
@media (hover:hover){
  /* hover：只把暖光那一层的 alpha 抬约 29%（.34 → .44），半径仍贴着文字。
     不加新图层、不加范围、不变粗、不缩放 —— 像被阳光轻轻照到 */
  .entry:hover{
    opacity:1;
    color:#FFF9E4;
    text-shadow:
      0 1px 3px rgba(74,48,26,.62),
      0 0 8px rgba(74,48,26,.44),
      0 0 12px rgba(255,240,205,.44);
  }
  .entry:hover .entry__arrow svg{ transform:translateX(4px); opacity:.9; }
  .entry:hover .entry__icon svg{ opacity:1; }
  .entry:hover .entry__paw{ opacity:.55; transform:translateY(-50%) rotate(-8deg) scale(1); }
  .entry:hover .vine__stem{ opacity:.5; stroke-dashoffset:0; }
  .entry:hover .vine__leaf{ opacity:.45; }
}
.entry:focus-visible{
  opacity:1;
  color:#FFF9E4;
  text-shadow:
    0 1px 3px rgba(74,48,26,.62),
    0 0 8px rgba(74,48,26,.44),
    0 0 12px rgba(255,240,205,.44);
}
.entry:focus-visible .entry__arrow svg{ transform:translateX(4px); opacity:.9; }
.entry:focus-visible .vine__stem{ opacity:.5; stroke-dashoffset:0; }

/* —— 已预订客人入口：同一套语法，只是小一号、淡一点。
      必须排在 .entry 之后 —— 两者都是单类选择器，靠先后顺序决胜负 —— */
.entry--guest{
  width:100%;
  grid-template-columns:1.6em minmax(0,1fr) 1.4em;
  column-gap:.7em;
  font-size:16px;
  font-weight:500;
  letter-spacing:.05em;
  opacity:.92;
  /* 比三个主入口收一档，但仍要一眼看得见，不能淡成版权信息 */
  text-shadow:
    0 1px 3px rgba(74,48,26,.62),
    0 0 8px rgba(74,48,26,.5),
    0 0 9px rgba(255,238,200,.3);
}
.entry--guest .entry__icon{ width:1.6em; }
.entry--guest .entry__icon svg{ opacity:.8; }
.entry--guest .entry__arrow svg{ opacity:.6; }
/* 两层文字：小字说明身份，大字是动作 */
.guest__txt{ display:grid; row-gap:.12em; }
.guest__small{
  font-family:var(--font-sans);
  font-size:12.5px; font-weight:400; letter-spacing:.11em; opacity:.85;
}
.guest__big{ font-size:clamp(18px,1.3vw,21px); font-weight:600; letter-spacing:.05em; }
@media (hover:hover){
  .entry--guest:hover{
    opacity:1;
    color:#FFF9E4;
    text-shadow:
      0 1px 3px rgba(74,48,26,.62),
      0 0 8px rgba(74,48,26,.42),
      0 0 12px rgba(255,240,205,.42);
  }
  .entry--guest:hover .entry__icon svg{ opacity:1; }
}

/* —— 很轻的一句品牌文字 —— */
.tagline{
  grid-column:1 / -1;
  margin:clamp(1.5rem,3.4vh,2.6rem) 0 0;
  font-family:var(--font-sans);
  font-size:clamp(.66rem,.78vw,.78rem);
  font-weight:300;
  letter-spacing:.2em;
  color:var(--glow);
  /* 次级信息：比三个入口轻，但要能自然读到。
     暗色描边加强一点点，靠这个提高可读性，而不是靠加粗 */
  opacity:.9;
  text-shadow:0 1px 3px rgba(74,48,26,.58), 0 0 8px rgba(74,48,26,.34);
  animation:softIn 1.1s var(--ease) backwards;
  animation-delay:.95s;
}

@keyframes softIn{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:none; }
}
.entry, .tagline{ will-change:opacity, transform; }

/* “进入小熊家” 的极轻 demo 动画 */
.hero.is-entering .hero__img{ transform:scale(1.035); transition:transform 1.1s var(--ease); }
.hero.is-entering .top,
.hero.is-entering .entries{ opacity:0; transition:opacity .55s var(--ease); }
.hero__img{ transition:transform 1.1s var(--ease); }

/* ==========================  demo 浮层  ========================== */

.sheet{ position:fixed; inset:0; z-index:10; display:grid; place-items:center; }
.sheet[hidden]{ display:none; }
.sheet__bg{
  position:absolute; inset:0;
  background:rgba(72,50,30,.34);
  backdrop-filter:blur(3px);
  animation:softIn .3s var(--ease) both;
}
.sheet__panel{
  position:relative;
  width:min(92vw,360px);
  padding:1.6rem 1.5rem 1.2rem;
  border-radius:20px;
  background:radial-gradient(130% 120% at 50% 0%, #FFFBF2, #FBF1DE);
  box-shadow:0 24px 60px rgba(80,54,28,.28);
  color:var(--ink);
  animation:sheetIn .34s var(--ease) both;
}
.sheet__panel--sm{ width:min(88vw,300px); }
@keyframes sheetIn{ from{opacity:0; transform:translateY(10px) scale(.985)} to{opacity:1; transform:none} }

.sheet__x{
  position:absolute; top:.5rem; right:.7rem;
  border:0; background:none; cursor:pointer;
  font-size:1.35rem; line-height:1; color:var(--ink-soft); opacity:.6;
}
.sheet__x:hover{ opacity:1; }
.sheet__title{
  margin:0 0 1.1rem;
  font-size:.98rem; font-weight:400; letter-spacing:.14em;
  color:var(--ink);
}
.sheet__note{
  margin:1.1rem 0 0;
  font-family:var(--font-sans);
  font-size:.64rem; letter-spacing:.08em; color:var(--ink-soft); opacity:.75;
}

.cal__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem; }
.cal__month{ font-size:.86rem; letter-spacing:.1em; }
.cal__nav{
  border:0; background:none; cursor:pointer;
  font-size:1.1rem; color:var(--ink-soft); padding:.1rem .5rem;
}
.cal__nav:hover{ color:var(--ink); }
.cal__week,.cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); }
.cal__week span{
  font-family:var(--font-sans); font-size:.58rem; letter-spacing:.06em;
  text-align:center; color:var(--ink-soft); opacity:.7; padding-bottom:.35rem;
}
.cal__day{
  border:0; background:none; cursor:pointer;
  aspect-ratio:1; border-radius:50%;
  font-family:var(--font-sans); font-size:.74rem; color:var(--ink);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.cal__day:disabled{ opacity:.25; cursor:default; }
.cal__day:not(:disabled):hover{ background:rgba(169,190,140,.3); }
.cal__day.is-edge{ background:var(--ink); color:var(--cream); }
.cal__day.is-in{ background:rgba(169,190,140,.35); }
.cal__day.is-empty{ pointer-events:none; }
.cal__pick{
  margin:.9rem 0 0; min-height:1.1em;
  font-family:var(--font-sans); font-size:.72rem; letter-spacing:.06em; color:var(--ink-soft);
}

.contact{ list-style:none; margin:0; padding:0; }
.contact li{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:.55rem 0;
  border-bottom:1px solid rgba(107,74,46,.12);
  font-family:var(--font-sans); font-size:.78rem; letter-spacing:.08em;
}
.contact li:last-child{ border-bottom:0; }
.contact em{ font-style:normal; font-size:.68rem; color:var(--ink-soft); opacity:.7; }

/* ==========================  手机  ========================== */

@media (max-width:760px){
  /* 不是把桌面缩小：重新取景，保证房子和角色仍然在画面里 */
  .hero__img{ object-position:46% 46%; }

  .hero__veil{
    background:
      linear-gradient(0deg, rgba(86,58,34,.46) 0%, rgba(86,58,34,.16) 32%, rgba(86,58,34,0) 52%),
      linear-gradient(180deg, rgba(86,58,34,.28), rgba(86,58,34,0) 22%);
  }

  .top{ padding:1.05rem 1.05rem; gap:.8rem; }
  .logo__img{ width:112px; }
  .logo__name{ font-size:.82rem; letter-spacing:.18em; }
  .logo__sub{ font-size:.54rem; letter-spacing:.3em; }
  .controls{ gap:.6rem; }
  .music{ width:26px; height:26px; }
  .langs{ gap:.55rem; }
  .lang{ font-size:.66rem; letter-spacing:.08em; }

  /* 三个入口移到画面下部，仍然是透明发光文字 */
  .entries{
    top:auto; bottom:clamp(2.2rem,7vh,4rem);
    left:50%; right:auto;
    transform:translateX(-50%);
    justify-items:start;
    row-gap:1.35rem;
  }
  /* 手机上三个入口左对齐，guest 跟着左对齐，图标排成一列。
     max-width 算的是「从 guest 左边缘到屏幕右边缘」还剩多少：
     .entries 是居中的，所以它的左边缘 = 50vw − 一半列宽，
     百分比按包含块（.entries）算，50% 正好是那半个列宽。
     不加这句，英文 / 日文那条 381px 会被 .hero 的 overflow:hidden 直接切掉。 */
  .entries__guest{
    right:auto; left:0;
    bottom:calc(100% + 1rem);
    /* 不超出屏幕：50vw + 半个入口列宽（.entries 居中）− 边距 */
    width:min(calc(50vw + 50% - .5rem), 300px);
    min-height:52px;
    padding:.7rem .9rem;
  }
  .guest__big{ font-size:18px; }
  /* 视觉上很轻，但触控区域要够：上下各垫 .7rem，实高约 47px */

  .entry{ font-size:1.06rem; }        /* 手机端字号不要过小 */
  .entry__paw{ left:-1.7em; }
  .tagline{
    justify-self:center; text-align:center;
    margin-top:1.35rem; font-size:.7rem;
  }
}

@media (max-width:760px) and (orientation:landscape){
  .entries{ bottom:1.2rem; row-gap:.9rem; }
  .tagline{ display:none; }
}

/* ==========================  无障碍  ========================== */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}