/* SnowGame 全站共用結尾區 .sg-end（css/sg-end.css）
   owner 11/08：「所有頁面原本有這個的底部都換成這版本 之後更新會同步所有頁面更新」，選教練頁版，教練頁與租借頁也一起統一。
   樣子＝教練頁原本的結尾（coaches-kit.css 的 .cr-end）：纜車、Kalam「Let’s go!!」、「準備好一起上雪了嗎？」、問題右上角吊著一張纜車票、
   藍色膠囊按鈕「查看課程介紹」連 /reserve（英文頁 View Lessons 連 /en/reserve）。

   以後要改結尾：改 tools/partials 的範本（sg-end.zh.html、sg-end.en.html）與本檔 css/sg-end.css → 跑 python -X utf8 tools/sync-end.py
   → 所有頁面一起更新。本檔內容改了，腳本會自動把各頁的 ?v= 加 1（版號記在 tools/partials/sg-end.json）。

   寫法原則
   - 只認自己的類名 sg-end、sg-end__*，不靠教練頁的 .cr 容器與 --cr-* 變數。各頁是 Webflow 底（h2、p、a 有全站樣式），
     教練頁還有 .cr 底下的規則（.cr h2、.cr a、.cr p…），所以會被繼承或被全站規則改到的屬性（字型、字級、行高、字距、顏色、
     邊距、外框…）這裡全部寫死，選擇器都是「.sg-end .sg-end__x」兩個類名，比 .cr h2、.cr a 這種一個類名加標籤的強。
   - 中英頁完全同一套規則，沒有 html[lang] 的幾何規則。
   - 外框（點點底＋上下間距）有三種位置，其餘全部相同：
       1. 一般頁（舊版 Webflow 結尾換過來的 38 頁）：本區自己畫點點，上方留 sec/2＋24px（56／48／56px），下方留 ch（88／64／96px）。
       2. 租借頁：本區接在 <main class="rental-a"> 後面，main 最後一章 .ra-ch3（需要協助嗎？卡片）的點點貼齊底部、下方已留 sec/2，
          所以這裡上方只留 sec/2；點點從本區頂端起算，跟 .ra-ch3 的點點無縫接上，卡片到結尾的距離跟教練頁一樣是 sec。
       3. 教練頁：本區放在教練頁的結尾章節 .cr-ch3 裡（需要協助嗎？卡片下面），點點底與下方間距原本就由 .cr-ch3 給
          （點點從章節頂端起算），這裡不畫自己的點點、不加內距，只留跟卡片之間的 sec，畫面才會跟原本的 .cr-end 逐像素相同。
     點點的位置：1 跟 2 相對於結尾內容是同一個相位（上方內距差 24px＝一格點點），所以兩種頁的結尾區逐像素相同；
     教練頁的點點相位由 .cr-ch3 頂端到結尾的距離決定（隨上面卡片的高度變），跟另外兩種的點點上下差幾 px（只有點點，內容逐像素相同）。
   - 動畫只用 CSS、只在 prefers-reduced-motion: no-preference 時有：照教練頁「第七輪」節奏，一個循環 7.5 秒＝前 3 秒晃
     （7°／−4.5°／2.4°／−1°／0°，每段 ease-out）＋後 4.5 秒靜止，一直循環；纜車以吊點為軸、纜車票以繩子頂端為軸，票比纜車晚 0.35 秒。
     動的是 transform（合成器處理，不每格重算樣式與版面）；纜車為此拆成兩張疊在一起的 SVG（不動的纜索與點綴、會晃的車廂），
     晃的是整張車廂 SVG。減少動態時沒有動畫、沒有合成層，畫面跟教練頁原本逐像素相同。頁面上有 <dialog> 開著時暫停
     （:has() 不支援的瀏覽器照常晃，無害）。 */

/* ---------------------------------------------------------------- 外框：點點底＋上下間距；會被繼承的文字屬性全部寫死 */
.sg-end {
  --sg-end-ink: #17375a; --sg-end-text: #3a5167; --sg-end-en: #43647c; --sg-end-blue: #1d6aa8; --sg-end-blue-2: #14507f;
  --sg-end-dot: #e2f1f8; --sg-end-btn-shadow: #c0d9ed;
  --sg-end-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --sg-end-sec: 64px; --sg-end-ch: 88px; --sg-end-nav: 100px;
  display: block; position: static; float: none; clear: both; box-sizing: border-box; width: auto; max-width: none; min-height: 0;
  margin: 0; padding: calc(var(--sg-end-sec) / 2 + 24px) 0 var(--sg-end-ch); border: 0;
  background: #fff radial-gradient(circle at 12px 12px, var(--sg-end-dot) 2px, transparent 2.6px) 0 0 / 24px 24px;
  color: var(--sg-end-text); font-family: var(--sg-end-sans); font-size: 16px; font-weight: 400; font-style: normal; font-variant: normal;
  font-feature-settings: normal; font-kerning: auto; line-height: 1.75; letter-spacing: normal; word-spacing: normal;
  text-align: start; text-indent: 0; text-transform: none; text-shadow: none; text-decoration: none;
  white-space: normal; word-break: normal; overflow-wrap: normal; line-break: auto; hyphens: manual; text-wrap: wrap;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; visibility: visible; cursor: auto;
}
.sg-end *, .sg-end *::before, .sg-end *::after { box-sizing: border-box; }
.sg-end svg { display: block; flex-shrink: 0; overflow: hidden; }
.sg-end [id] { scroll-margin-top: calc(var(--sg-end-nav) + 16px); }
/* 租借頁：接在 main.rental-a 後面（見檔頭 2） */
.rental-a + .sg-end { padding-top: calc(var(--sg-end-sec) / 2); }
/* 教練頁：放在結尾章節 .cr-ch3 裡（見檔頭 3） */
.cr-ch3 > .sg-end { margin-top: var(--sg-end-sec); padding: 0; background: none; }

/* ---------------------------------------------------------------- 內容：纜車｜Let’s go!!＋問題｜按鈕（手機：按鈕在下一列） */
.sg-end .sg-end__in {
  display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 0 14px;
  width: min(800px, calc(100% - 40px)); max-width: none; margin: 0 auto; padding: 0;
}
/* 纜車：兩張一樣大的 SVG 疊在同一格，下面是不動的纜索與點綴，上面是會晃的車廂（吊點在 112×112 圖的 (56, 24)＝50% 21.428571%） */
.sg-end .sg-end__art { display: grid; grid-template: 100% / 100%; width: 80px; height: 80px; margin: 0; padding: 0; }
.sg-end .sg-end__art > svg { grid-area: 1 / 1; width: 100%; height: 100%; }
.sg-end .sg-end__car { transform-origin: 50% 21.428571%; }
.sg-end .sg-end__copy { position: relative; min-width: 0; margin: 0; padding: 0; }
.sg-end .sg-end__en {
  display: block; margin: 0; padding: 0; color: var(--sg-end-en);
  font-family: Kalam, Arial, sans-serif; font-size: 22px; font-weight: 700; font-style: normal; line-height: 1.15;
  letter-spacing: 0; text-transform: none; text-shadow: none; text-wrap: pretty;
}
/* 英文標題平均分行（只有英文範本的 h2 有這個 class）：避免桌機第二行只剩 Together?、768 只剩 the */
.sg-end .sg-end__title--balance { text-wrap: balance; }
.sg-end .sg-end__title {
  display: block; margin: 2px 0 0; padding: 0; color: var(--sg-end-ink);
  font-family: var(--sg-end-sans); font-size: 26px; font-weight: 700; font-style: normal; line-height: 1.35;
  letter-spacing: .02em; text-transform: none; text-shadow: none;
}
.sg-end .sg-end__keep { display: inline-block; }
.sg-end .sg-end__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 360px; min-height: 52px; margin: 20px 0 0; padding: 10px 28px;
  border: 2px solid transparent; border-radius: 999px; background: var(--sg-end-blue); color: #fff; box-shadow: 3px 4px 0 var(--sg-end-btn-shadow);
  font-family: var(--sg-end-sans); font-size: 18px; font-weight: 700; font-style: normal; line-height: 1.3; letter-spacing: normal;
  text-align: center; text-decoration: none; text-transform: none; text-shadow: none; text-underline-offset: 3px; cursor: pointer;
  scroll-margin-top: calc(var(--sg-end-nav) + 20px); scroll-margin-bottom: 84px;
}
.sg-end .sg-end__btn:hover { background: var(--sg-end-blue-2); color: #fff; }
.sg-end .sg-end__btn:focus-visible { outline: 3px solid var(--sg-end-ink); outline-offset: 3px; }
.sg-end .sg-end__btn:focus:not(:focus-visible) { outline: none; }
.sg-end .sg-end__ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* 纜車票：問題右上角吊著的一張小票（繩子、青藍頂帶、圓孔、撕線、白色票身裡的山），以繩子頂端為軸斜掛 9°；
   手機掛在問題右上角裡面（在 Let’s go!! 旁邊），不會被切到 */
.sg-end .sg-end__copy::after {
  content: ""; position: absolute; right: 4px; top: -34px; width: 30px; height: 52px; rotate: 9deg; transform-origin: 50% 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 52'%3E%3Cdefs%3E%3CclipPath id='s'%3E%3Cpath d='M3 26.5v-8A4.5 4.5 0 0 1 7.5 14h15a4.5 4.5 0 0 1 4.5 4.5v8z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d='M15 1 12 19.5M15 1l3 18.5' fill='none' stroke='%2317375a' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M3 26.5v-8A4.5 4.5 0 0 1 7.5 14h15a4.5 4.5 0 0 1 4.5 4.5v8z' fill='%234edce9'/%3E%3Cg clip-path='url(%23s)' stroke='%23fff' stroke-opacity='.4' stroke-width='2'%3E%3Cpath d='M-2 14l13 13M4 14l13 13M10 14l13 13M16 14l13 13M22 14l13 13'/%3E%3C/g%3E%3Cpath d='M3 26.5h24v19a4.5 4.5 0 0 1-4.5 4.5h-15A4.5 4.5 0 0 1 3 45.5z' fill='%23fff'/%3E%3Crect x='3' y='14' width='24' height='36' rx='4.5' fill='none' stroke='%2317375a' stroke-width='2'/%3E%3Cpath d='M3.5 26.5h23' stroke='%2317375a' stroke-width='1.5' stroke-dasharray='2.2 2'/%3E%3Ccircle cx='15' cy='20' r='2.6' fill='%23fff' stroke='%2317375a' stroke-width='1.4'/%3E%3Cpath d='M13.3 19.4q1.7 2.6 3.4 0' fill='none' stroke='%2317375a' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M8.5 43.5l4.5-7 3.5 4.5 2.5-3 4.5 5.5z' fill='%23cdf3f8' stroke='%2317375a' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------------------------------------------------------------- 尺寸（斷點跟教練頁 coaches-kit.css 一樣） */
@media (max-width: 359px) {
  .sg-end .sg-end__in { column-gap: 10px; }
  .sg-end .sg-end__art { width: 64px; height: 64px; }
  .sg-end .sg-end__title { font-size: 24px; }
}
@media (min-width: 480px) {
  .sg-end { --sg-end-nav: 120px; }
}
@media (min-width: 601px) and (max-width: 1279px) {
  .sg-end .sg-end__in { width: min(800px, calc(100% - 160px)); }
}
@media (min-width: 768px) {
  .sg-end { --sg-end-sec: 48px; --sg-end-ch: 64px; }
  .sg-end .sg-end__in { grid-template-columns: 112px minmax(0, 1fr) auto; gap: 24px; }
  .sg-end .sg-end__art { width: 112px; height: 112px; }
  .sg-end .sg-end__en { font-size: 28px; }
  .sg-end .sg-end__title { font-size: 34px; }
  .sg-end .sg-end__btn { grid-column: auto; width: auto; margin-top: 0; }
  .sg-end .sg-end__copy::after { top: -24px; }
}
@media (min-width: 1024px) {
  .sg-end { --sg-end-sec: 64px; --sg-end-ch: 96px; font-size: 17px; }
}

/* ---------------------------------------------------------------- 動畫（只在沒有要求減少動態時） */
@media (prefers-reduced-motion: no-preference) {
  .sg-end .sg-end__car { animation: sg-end-swing 7.5s ease-out 0s infinite; }
  .sg-end .sg-end__copy::after { animation: sg-end-swing 7.5s ease-out .35s infinite; z-index: 1; }
  /* 晃的時候車廂與票各自是一個合成層。.sg-end__copy 是 position: relative、原本畫在車廂後面，瀏覽器保守判定重疊，
     會把問題文字也拉成合成層（文字從彩色次像素反鋸齒變灰階）；把纜車與票疊到文字上面（z-index 1）就不會。
     只在這裡加：減少動態時繪製順序完全不變。 */
  .sg-end .sg-end__art { position: relative; z-index: 1; }
  .sg-end .sg-end__btn { transition: background-color .3s; }
}
/* 減少動態：本檔的動畫本來就只寫在 no-preference 裡；這裡再把結尾區裡所有轉場與動畫關掉（教練頁 kit 也是這樣做），
   各頁不靠 opt.css 的 0.01ms 規則，計算後的樣式也跟教練頁一致。 */
@media (prefers-reduced-motion: reduce) {
  .sg-end, .sg-end *, .sg-end *::before, .sg-end *::after { transition: none !important; animation: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
  :root:has(dialog[open]) .sg-end .sg-end__car, :root:has(dialog[open]) .sg-end .sg-end__copy::after { animation-play-state: paused; }
}
/* 擺動角加在原本的角度上（纜車 0°、纜車票 9°，票的 9° 是 rotate 屬性、這裡動的是 transform，兩者繞同一個軸、角度相加） */
@keyframes sg-end-swing {
  0% { transform: rotate(0deg); }
  6.4% { transform: rotate(7deg); }
  16% { transform: rotate(-4.5deg); }
  24.8% { transform: rotate(2.4deg); }
  32.8% { transform: rotate(-1deg); }
  40%, 100% { transform: rotate(0deg); }
}