/* assets/journey.css — 互動改造樣式(零打包) */

/* Lenis 平滑捲動需要的基礎 */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* 進場前先隱藏要揭示的元素(避免閃現),JS 接管後再顯示。
   無 JS 時 .no-js 後備:全部顯示 */
html.js-journey [data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity .95s cubic-bezier(.22,.61,.36,1), transform .95s cubic-bezier(.22,.61,.36,1);
}
html.js-journey [data-reveal].is-revealed { opacity: 1; transform: none; }
html.reduced-motion [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---- Hero 深度層(穿門推進) ---- */
[data-journey-hero] .hero-media { position: absolute; inset: 0; overflow: hidden; }
[data-journey-hero] .hero-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 58% 42%;
  transform-origin: 58% 42%; will-change: transform;
  /* 刻意不沿用舊 .hero-video 的 opacity:.58。門口照本身已暗、暖廳是主角,
     全不透明才有「真的看進店裡」的存在感;文字可讀性由 .hero-overlay + .hero-frame 負責。
     若覺得太亮,在此加 opacity(如 .8)即可調。 */
}
/* 門框暈影:把暖光房間「框」在中央,捲動時這層放更快+淡出=穿過門 */
[data-journey-hero] .hero-frame {
  position: absolute; inset: 0; pointer-events: none;
  transform-origin: 58% 42%; will-change: transform, opacity;
  background: radial-gradient(120% 120% at 58% 42%,
    rgba(15,14,13,0) 28%, rgba(15,14,13,0.15) 46%,
    rgba(15,14,13,0.6) 74%, rgba(15,14,13,0.92) 100%);
}

/* 標題逐字遮罩:單行裁切,字從線下被抬出來 */
[data-journey-hero] .hero-title-line { display: inline-block; overflow: hidden; }
[data-journey-hero] .hero-title .char { display: inline-block; will-change: transform; }

/* ---- 跨頁穿門轉場(iris 光圈) ---- */
.door-transition { position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden; }
.door-transition__panel {
  position: absolute; left: 50%; top: 50%;
  width: 300vmax; height: 300vmax; margin: -150vmax 0 0 -150vmax;
  border-radius: 50%; transform: scale(0); transform-origin: center;
  background: radial-gradient(circle at 50% 50%, #2a2118 0%, #0f0e0d 70%);
  transition: transform .6s cubic-bezier(.76, 0, .24, 1);
}
html.door-closing .door-transition__panel { transform: scale(1); }   /* 蓋上 */
html.door-entering .door-transition__panel { transform: scale(1); transition: none; } /* 載入瞬間已蓋住 */
html.door-open .door-transition__panel { transform: scale(0); }      /* 收回露出新頁 */
html.reduced-motion .door-transition { display: none; }

/* ---- 游標暖光(桌機) ---- */
@media (hover: hover) {
  .journey-cursor {
    position: fixed; top: 0; left: 0; z-index: 9998; pointer-events: none;
    width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
    background: var(--accent-light, #e8c99a); mix-blend-mode: screen;
    box-shadow: 0 0 14px 4px rgba(232, 201, 154, 0.5);
    transition: width .25s, height .25s, margin .25s, background .25s;
  }
  .journey-cursor.is-hot {
    width: 34px; height: 34px; margin: -17px 0 0 -17px;
    background: var(--accent, #c17f4a);
  }
}
html.reduced-motion .journey-cursor { display: none; }

/* 手機:不跑捲動穿門,改成緩慢 Ken Burns 推近(對著門內暖廳,有氛圍、不暈) */
@media (max-width: 640px) {
  [data-journey-hero] .hero-photo {
    animation: heroKenBurns 22s ease-in-out infinite alternate;
  }
  [data-journey-hero] .hero-frame { opacity: 1 !important; transform: none !important; }
}
@keyframes heroKenBurns {
  from { transform: scale(1.04); }
  to   { transform: scale(1.16); }
}
html.reduced-motion [data-journey-hero] .hero-photo { animation: none !important; transform: none !important; }

/* ============ 順暢化 / 手機加料(iteration 2) ============ */

/* 更柔順、一致的區塊揭示(蓋過 inline .reveal 較硬的設定) */
html.js-journey .reveal {
  transform: translateY(16px);
  transition: opacity .95s cubic-bezier(.22,.61,.36,1), transform .95s cubic-bezier(.22,.61,.36,1);
}

/* 軟化明暗區塊接縫:在每個區塊頂端疊一道淡淡反向漸層(純背景層,不蓋內容、不動定位) */
html.js-journey .section-dark {
  background:
    linear-gradient(180deg, rgba(245,240,232,0.06), transparent 140px),
    var(--deep);
  border-top-color: transparent;
  border-bottom-color: transparent;
}
html.js-journey .section-light {
  background:
    linear-gradient(180deg, rgba(15,14,13,0.10), transparent 140px),
    radial-gradient(circle at 15% 0%, rgba(200,173,141,0.2), transparent 30%),
    linear-gradient(180deg, var(--cream), var(--paper));
}

/* 子頁:hero 內容載入時輕量淡入上浮(手機沒了穿門也有「走進去」感;純 CSS、不閃) */
.subpage-hero-inner { animation: subpageEnterUp .85s cubic-bezier(.22,.61,.36,1) both; }
@keyframes subpageEnterUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .subpage-hero-inner { animation: none !important; }
}