/* Janus 購買頁
   點第一頁中間的白格子進去，接著往下捲一整條，
   兩顆圓一邊轉一邊往上跑掉 */

:root {
  /* --w = 版面的寬度。所有尺寸、位置都從它算出來，不寫死像素。
     示意圖比例 1081:1921 = 0.5627 */
  --w: min(100vw, calc(100vh * 0.5627));

  --font: 'PingFang TC', 'Heiti TC', 'Microsoft JhengHei',
          'Noto Sans TC', 'Noto Sans CJK TC', sans-serif;
}
/* svh = 手機網址列還在的時候的高度。用它才不會捲到一半、網址列一縮版面就抽動 */
@supports (height: 100svh) {
  :root {
    --w: min(100vw, calc(100svh * 0.5627));
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  background: #fff;
  -webkit-text-size-adjust: 100%;   /* 手機橫著拿的時候不要自作主張放大字 */
}
/* 還沒進去之前不准捲 */
html:not(.entered), html:not(.entered) body { overflow: hidden; height: 100%; }

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  font-family: var(--font);
  font-weight: 300;                 /* 黑體的細體 */
  color: #111;
  -webkit-tap-highlight-color: transparent;
}

/* 第一頁那張圖：維持圖本來的 9:16，整張看得完不裁切。
   手機比較長的話上下會多出白邊 —— 底就是白的，看不出來 */
.screen {
  position: relative;
  width: var(--w);
  height: calc(var(--w) / 0.5627);
  overflow: hidden;
}
.screen img { position: absolute; display: block; }
.screen img.full { top: 0; left: 0; width: 100%; height: 100%; }

/* 牆面材質。兩頁共用，用色彩增值乘下去：
   白的地方吃到材質變灰，黑的地方本來就黑、不會變。
   0.7 是量出來的：示意圖紙面平均亮度 247、材質本身 243，反推就是這個濃度 */
.tex {
  position: absolute;
  inset: 0;
  background-image: url('../wall.webp');
  background-repeat: repeat;
  background-size: 100% auto;
  mix-blend-mode: multiply;
  opacity: 0.7;
  pointer-events: none;
  z-index: 2;
}

/* ══ 第一頁 ══════════════════════════════ */
#intro {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
#intro[hidden] { display: none; }
#intro .screen { isolation: isolate; }   /* 把材質的色彩增值鎖在這一層 */

/* 兩隻手指中間那格。位置是量出來的：x 45.98%–54.30%、y 39.04%–43.68% */
#enter {
  position: absolute;
  left: 45.98%;
  top: 39.04%;
  width: 8.32%;
  height: 4.64%;
  z-index: 3;
  display: block;
  cursor: pointer;
}

/* 撐開用的白塊：從那格子的位置一路長到整個畫面 */
#zoom {
  position: fixed;
  z-index: 50;
  background: #fff;
  transform-origin: center center;
  pointer-events: none;
  display: none;
}

/* ══ 往下捲的部分 ════════════════════════
   一整條，由上往下依序排。左右兩條花邊是背景圖，一路往下重複。

   排法：每張圖四周都有透明留白，直接排的話留白會變成多餘的空隙。
   所以每張圖的上下 margin 都先扣掉自己的留白，再加上「看得見的邊
   到看得見的邊」該有的距離 —— 那個距離是從 example 量出來的：
     標題→圓一 0.087、圓一→圓二 0.052、圓二→內容物 0.115、
     內容物→牌子 0.215、牌子→頁尾 0.112（單位是版面寬度的倍數）
   圓的大小不照 example，用 example2／example3 那個大的（可見直徑 0.816／0.777）
   margin 用百分比，而百分比是對「版面寬度」算的，所以整條在任何
   螢幕上都等比例，不會因為手機長短而變形 */
#page {
  position: relative;
  width: var(--w);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 6%;
  isolation: isolate;
  overflow: hidden;              /* 圖比版面寬，多出來的透明邊要裁掉 */
  background-image: url('../frame.webp');
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-position: top center;
}
#page img { display: block; max-width: none; }

#title { width:  50.44%; margin:  9.209% 0  -8.469%; }
#w1    { width: 113.64%; margin: -3.875% 0 -13.108%; }
#w2    { width: 112.95%; margin: -8.675% 0 -14.193%; }

/* 04 放大到「拱門跟 example 一樣寬（0.236 個版面寬）」。
   這樣兩個人的大小才對得上，代價是腳會超出版面被切掉 —— 這是要的效果 */
#spec  { width: 137.70%; margin:  3.569% 0  -9.311%; }

/* 轉軸抓的是「圓心」而不是圖片中心 ——
   圖裡的圓有一點偏，不校正的話轉起來會晃 */
.wheel {
  transform-origin: 48.9% 49.7%;
  will-change: transform, opacity;
}
#w2 { transform-origin: 49.8% 49.8%; }

/* 牌子這張要包一層，熱區才有東西可以貼 */
#buy-wrap {
  position: relative;
  width: 110.91%;
  margin: 16.690% 0 -4.639%;
  flex: none;
}
#buy { width: 100%; }

/* 牌子中間那塊白色方格就是熱區。整格都可以點，手機比較好按。
   位置是量出來的：在 05 這張圖裡 x 38.6%–63.8%、y 18.1%–38.2% */
#buy-hit {
  position: absolute;
  left: 38.6%;
  top: 18.1%;
  width: 25.2%;
  height: 20.1%;
  z-index: 1;
  display: block;
  border-radius: 2px;
  transition: opacity .18s;
}
#buy-hit:active { opacity: .45; background: #000; }

/* 頁尾：左邊 email、下面接退換貨那行，右邊版權，跟最後一行對齊 */
#foot {
  width: 86%;
  margin-top: 11.2%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: calc(var(--w) * 0.024);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: #1a1a1a;
}
#foot a { color: inherit; text-decoration: none; }
#foot p { font-size: inherit; font-weight: inherit; }