/* 首頁版面（docs/design/website.md「首頁骨架」）：英文 / 與繁中 /zh/ 兩頁共用。元件樣式在 sigil.css，頂列與頁尾在 site.css。
   字級只用 token：比 displayLg 大的 hero 與區塊標題用 calc(token × 倍數)，不另外寫死 px。 */

/* ---- 區塊的節奏：一個區塊一個重點，標題大、副標短 ---- */
.home .ss-section {
  padding-block: var(--ss-space-11);
}

@media (min-width: 960px) {
  .home .ss-section {
    padding-block: calc(var(--ss-space-12) + var(--ss-space-8));
  }
}

.section__head {
  display: grid;
  gap: var(--ss-space-4);
  justify-items: start;
  max-width: 720px;
  margin-bottom: var(--ss-space-9);
}

.section__title {
  margin: 0;
  font-family: var(--ss-font-display);
  font-weight: var(--ss-type-display-md-weight);
  font-size: var(--ss-type-display-md-size);
  line-height: 1.18;
  letter-spacing: var(--ss-type-display-md-tracking);
  text-wrap: balance;
}

@media (min-width: 720px) {
  .section__title {
    font-size: calc(var(--ss-type-display-md-size) * 1.32);
  }
}

.section__lede {
  margin: 0;
  max-width: 56ch;
  color: var(--ss-text-secondary);
  font-size: var(--ss-type-body-lg-size);
  line-height: var(--ss-type-body-lg-line);
  text-wrap: pretty;
}

/* 中文標題只在標點後斷行，一段塞不下才在字間斷。 */
:lang(zh) .section__title,
:lang(zh) .hero__title,
:lang(zh) .who__card h3,
:lang(zh) .step h3 {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ================================================================ 1. Hero：標語加互動示範 */

/* 手機：標語 → 示範 → 按鈕（先看到它在動，再決定要不要下載）。寬螢幕：左邊標語與按鈕，右邊示範。 */
.hero {
  display: grid;
  grid-template-areas: "head" "demo" "cta";
  gap: var(--ss-space-8);
  padding-block: var(--ss-space-6) var(--ss-space-11);
}

.hero__head {
  grid-area: head;
  display: grid;
  gap: var(--ss-space-5);
  justify-items: start;
}

.hero .demo {
  grid-area: demo;
}

.hero__cta {
  grid-area: cta;
  display: grid;
  gap: var(--ss-space-5);
  justify-items: start;
}

@media (min-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "head demo" "cta demo";
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: var(--ss-space-11);
    row-gap: var(--ss-space-8);
    min-height: min(calc(100svh - 80px), 820px);
    padding-block: var(--ss-space-8) var(--ss-space-12);
  }

  .hero__head {
    align-self: end;
  }

  .hero__cta {
    align-self: start;
  }
}

.hero__title {
  margin: 0;
  font-family: var(--ss-font-display);
  font-weight: var(--ss-type-display-lg-weight);
  font-size: calc(var(--ss-type-display-lg-size) * 1.4);
  line-height: 1.02;
  letter-spacing: calc(var(--ss-type-display-lg-tracking) * 2);
  text-wrap: balance;
}

/* 後半句是金色：說出來的那一刻（字不改，只上色）。光暈用 drop-shadow：字的填色是 background-clip: text。 */
.hero__title em {
  display: inline-block;
  font-style: normal;
  color: var(--ss-accent-text);
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--ss-accent) 35%, transparent));
}

/* 標語「長出來」（2026-10-26 第三輪）：每個字先是棋盤格（還沒說到的樣子），照閱讀順序一個字一個字被說到、
   由左往右填滿；白色半句先長，金色半句最後長齊。長齊的那一刻（第五輪）：以 grow／「畫」為中心，一圈金色光圈擴散再淡掉，
   跟示範裡字落進畫裡的那一圈（.fx-ring、fx-ring）同一個動畫，大一點；字本身不閃、不位移。
   --fill 是填滿的寬度，預設 100%（減少動態時就是長齊的樣子，也沒有光圈）。 */
@property --fill {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

.hw {
  --ink: var(--ss-text-primary);
  color: transparent;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 0 / var(--fill) 100% no-repeat,
    repeating-conic-gradient(color-mix(in srgb, var(--ss-checker-dark) 22%, transparent) 0 25%, color-mix(in srgb, var(--ss-checker-light) 48%, transparent) 0 50%) 0 0 / 0.14em 0.14em;
  -webkit-background-clip: text;
  background-clip: text;
}

.hero__title em .hw {
  --ink: var(--ss-accent-text);
}

.hw--ring {
  position: relative;
}

.hw--ring::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: 1.9em;
  height: 1.9em;
  margin: -0.95em 0 0 -0.95em;
  border: var(--ss-stroke-regular) solid var(--ss-gold-300);
  border-radius: 50%;
  box-shadow:
    0 0 18px color-mix(in srgb, var(--ss-accent) 70%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--ss-accent) 45%, transparent);
  opacity: 0;
  pointer-events: none;
}

:lang(en) .hw--ring::after {
  left: 46%; /* grow. 的句點不算，圓心落在 grow 上 */
}

@media (min-width: 720px) {
  .hero__title {
    font-size: calc(var(--ss-type-display-lg-size) * 1.7);
  }
}

@media (min-width: 1120px) {
  .hero__title {
    font-size: calc(var(--ss-type-display-lg-size) * 1.95);
  }
}

/* 中文一句比較長：手機一行十個字（到逗號）剛好放得下。 */
:lang(zh) .hero__title {
  font-size: calc(var(--ss-type-display-md-size) * 1.02);
  line-height: 1.3;
  letter-spacing: 0;
}

@media (min-width: 720px) {
  :lang(zh) .hero__title {
    font-size: calc(var(--ss-type-display-md-size) * 1.5);
  }
}

@media (min-width: 960px) {
  :lang(zh) .hero__title {
    font-size: calc(var(--ss-type-display-md-size) * 1.36);
  }
}

.hero__lede {
  margin: 0;
  max-width: 34ch;
  font-size: var(--ss-type-title-md-size);
  line-height: var(--ss-type-title-md-line);
  color: var(--ss-text-secondary);
  text-wrap: balance;
}

@media (min-width: 720px) {
  .hero__lede {
    font-size: var(--ss-type-title-lg-size);
    line-height: var(--ss-type-title-lg-line);
  }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss-space-4);
}

.hero__note {
  margin: 0;
  font-size: var(--ss-type-body-sm-size);
  line-height: var(--ss-type-body-sm-line);
  color: var(--ss-text-tertiary);
}

@media (max-width: 560px) {
  .hero__cta {
    justify-items: stretch;
  }

  .hero__actions .ss-btn {
    flex: 1 1 100%;
  }
}

/* ---- 互動示範 ---- */
.demo {
  position: relative;
  display: grid;
  gap: var(--ss-space-5);
  padding: var(--ss-space-4);
  border-radius: var(--ss-radius-xl);
}

/* 示範後面一圈金色與藍色的光：AI 的光（藍）在畫框、使用者的魔法（金）在字。 */
.demo::after {
  content: "";
  position: absolute;
  inset: -12% -8%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(50% 45% at 70% 30%, color-mix(in srgb, var(--ss-aether-500) 22%, transparent), transparent 70%),
    radial-gradient(45% 40% at 30% 80%, color-mix(in srgb, var(--ss-gold-400) 16%, transparent), transparent 70%);
  filter: blur(8px);
}

@media (min-width: 560px) {
  .demo {
    padding: var(--ss-space-5);
  }
}

.demo__frame {
  margin: 0;
  border-radius: var(--ss-radius-lg);
  transition: box-shadow var(--ss-duration-slow) var(--ss-curve-standard);
}

.demo__frame > canvas,
.demo__frame > .demo__fallback {
  display: block;
  width: 100%;
  height: 100%;
}

.demo__frame > canvas[hidden],
.demo__frame > .demo__fallback[hidden] {
  display: none;
}

/* 題目圖：上緣中間的小圖（公園那題的天空是空的；右上有雲、左上有樹）；點一下（或聚焦）放大，再點一下收回。 */
.demo__look {
  appearance: none;
  position: absolute;
  top: var(--ss-space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 30%;
  padding: 0;
  border: var(--ss-stroke-hairline) solid var(--ss-border-strong);
  border-radius: var(--ss-radius-sm);
  overflow: hidden;
  background: var(--ss-surface);
  box-shadow: 0 6px 18px -6px var(--ss-scrim);
  cursor: zoom-in;
  transition: width var(--ss-duration-base) var(--ss-curve-standard);
}

.demo__look:focus-visible,
.demo__look.is-big {
  width: 62%;
  cursor: zoom-out;
}

.demo__look img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.demo__look span {
  position: absolute;
  left: var(--ss-space-2);
  bottom: var(--ss-space-2);
  padding: 1px var(--ss-space-3);
  border-radius: var(--ss-radius-pill);
  background: color-mix(in srgb, var(--ss-canvas) 70%, transparent);
  color: var(--ss-text-primary);
  font-size: var(--ss-type-label-sm-size);
  font-weight: 600;
  line-height: var(--ss-type-label-sm-line);
  letter-spacing: var(--ss-type-label-sm-tracking);
}

/* 說到圖裡沒有的東西：畫框下緣浮出一行（App 的 liveNotInPicture）。 */
.demo__toast {
  position: absolute;
  left: 50%;
  bottom: var(--ss-space-4);
  z-index: 2;
  margin: 0;
  padding: var(--ss-space-2) var(--ss-space-4);
  border: var(--ss-stroke-hairline) solid var(--ss-border);
  border-radius: var(--ss-radius-pill);
  background: color-mix(in srgb, var(--ss-canvas) 78%, transparent);
  color: var(--ss-text-primary);
  font-size: var(--ss-type-label-md-size);
  font-weight: 600;
  line-height: var(--ss-type-label-md-line);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition:
    opacity var(--ss-duration-base) var(--ss-curve-standard),
    transform var(--ss-duration-base) var(--ss-curve-standard);
  pointer-events: none;
}

.demo__toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* 你的句子：說中的字亮成金色（詠唱序列：說中的詞亮成金色），說錯的燼紅，改掉的劃掉，圖裡沒有的點線底線。 */
.demo__words {
  min-height: calc(var(--ss-type-title-lg-line) * 3);
  margin: 0;
  padding-inline: var(--ss-space-2);
  font-family: var(--ss-font-display);
  font-size: var(--ss-type-title-md-size);
  line-height: var(--ss-type-title-lg-line);
  color: var(--ss-text-secondary);
  text-wrap: pretty;
}

@media (min-width: 560px) {
  .demo__words {
    font-size: var(--ss-type-title-lg-size);
  }
}

.demo__words.is-empty {
  color: var(--ss-text-tertiary);
}

.demo__words.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: var(--ss-accent);
  animation: demo-caret 1s steps(1) infinite;
}

@keyframes demo-caret {
  50% {
    opacity: 0;
  }
}

.w {
  transition: color var(--ss-duration-fast) var(--ss-curve-standard);
}

.w--hit {
  color: var(--ss-accent-text);
  text-shadow: 0 0 14px color-mix(in srgb, var(--ss-accent) 45%, transparent);
}

.w--wrong {
  color: var(--ss-danger-text);
}

.w--changed {
  color: var(--ss-text-tertiary);
  text-decoration: line-through;
}

.w--absent {
  color: var(--ss-text-primary);
  text-decoration: underline dotted;
  text-underline-offset: 4px;
}

.w--quiet,
.w--pending {
  color: var(--ss-text-tertiary);
}

.w--plain {
  color: var(--ss-text-secondary);
}

/* 幾個細節說中了：一排小菱形（Sigil 的菱形）加等寬數字。 */
.demo__meter {
  display: flex;
  align-items: center;
  gap: var(--ss-space-4);
  padding-inline: var(--ss-space-2);
}

.demo__pips {
  display: flex;
  gap: var(--ss-space-3);
}

.demo__pips i {
  width: 9px;
  height: 9px;
  border: var(--ss-stroke-hairline) solid var(--ss-border-strong);
  transform: rotate(45deg);
  transition:
    background-color var(--ss-duration-base) var(--ss-curve-standard),
    box-shadow var(--ss-duration-base) var(--ss-curve-standard),
    border-color var(--ss-duration-base) var(--ss-curve-standard);
}

.demo__pips i.is-on {
  background: var(--ss-accent);
  border-color: var(--ss-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--ss-accent) 60%, transparent);
}

.demo__count {
  font-family: var(--ss-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--ss-type-numeral-sm-size);
  line-height: var(--ss-type-numeral-sm-line);
  color: var(--ss-text-tertiary);
}

.demo.is-done .demo__count {
  color: var(--ss-accent-text);
}

.demo__field {
  align-items: center;
  padding-block: var(--ss-space-2);
}

/* iOS 輸入框字小於 16px 會整頁放大，所以至少 bodyLg（17）。 */
.demo__input {
  font-size: var(--ss-type-body-lg-size);
}

.demo__input:disabled {
  cursor: not-allowed;
}

.demo__restart {
  flex: none;
  width: var(--ss-size-control-sm);
  height: var(--ss-size-control-sm);
}

.demo__restart svg {
  width: var(--ss-size-icon-md);
  height: var(--ss-size-icon-md);
}

/* ================================================================ 2. 怎麼運作：三步，三張真圖一路長 */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ss-space-9);
}

@media (min-width: 860px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ss-space-7);
  }
}

.step {
  display: grid;
  gap: var(--ss-space-3);
  align-content: start;
}

.step .ss-frame {
  margin: 0 0 var(--ss-space-4);
}

.step__num {
  margin: 0;
  font-family: var(--ss-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--ss-type-numeral-md-size);
  line-height: var(--ss-type-numeral-md-line);
  letter-spacing: var(--ss-type-numeral-md-tracking);
  color: var(--ss-accent-text);
}

.step h3 {
  margin: 0;
  font-size: var(--ss-type-title-lg-size);
  line-height: var(--ss-type-title-lg-line);
  color: var(--ss-text-primary);
}

.step p:not(.step__num) {
  margin: 0;
  color: var(--ss-text-secondary);
  text-wrap: pretty;
}

/* 一步接一步：寬螢幕在兩張圖之間畫一條往右的漸層細線。 */
@media (min-width: 860px) {
  .step + .step .ss-frame::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--ss-space-7) * -1);
    width: var(--ss-space-7);
    height: var(--ss-stroke-thin);
    background: linear-gradient(90deg, transparent, var(--ss-accent));
  }

  .step .ss-frame {
    overflow: visible;
  }

  .step .ss-frame > img {
    border-radius: inherit;
  }
}

/* ================================================================ 3. 為什麼有效：只畫說到的 */

.why {
  display: grid;
  gap: var(--ss-space-9);
  align-items: center;
}

@media (min-width: 960px) {
  .why {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--ss-space-11);
  }
}

.why__frame {
  margin: 0;
}

.why__text {
  display: grid;
  gap: var(--ss-space-5);
  justify-items: start;
}

.why__text .section__head {
  margin-bottom: 0;
}

.legend {
  list-style: none;
  margin: var(--ss-space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--ss-space-4);
}

.legend li {
  display: flex;
  align-items: center;
  gap: var(--ss-space-4);
  color: var(--ss-text-primary);
  font-weight: 600;
}

.legend span:last-child {
  color: var(--ss-text-secondary);
  font-weight: 400;
}

.legend__swatch {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: var(--ss-radius-xs);
}

.legend__swatch--said {
  background: var(--ss-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--ss-accent) 50%, transparent);
}

.legend__swatch--none {
  border: var(--ss-stroke-thin) dashed var(--ss-border-strong);
}

.legend .ss-checker--chip {
  vertical-align: 0;
}

/* ================================================================ 4. 素材本：字一張一張收進來 */

.book {
  display: grid;
  gap: var(--ss-space-9);
  align-items: center;
}

@media (min-width: 960px) {
  .book {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--ss-space-11);
  }
}

.book .section__head {
  margin-bottom: 0;
}

/* 條列前面一顆金色小星形，跟文件頁的重點摘要同一個形狀。 */
.book__list {
  list-style: none;
  margin: var(--ss-space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--ss-space-4);
  color: var(--ss-text-secondary);
  font-size: var(--ss-type-body-lg-size);
  line-height: var(--ss-type-body-lg-line);
}

.book__list li {
  position: relative;
  padding-left: var(--ss-space-7);
  text-wrap: pretty;
}

.book__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 10px;
  height: 10px;
  background: var(--ss-accent);
  clip-path: polygon(50% 0, 63.4% 36.6%, 100% 50%, 63.4% 63.4%, 50% 100%, 36.6% 63.4%, 0 50%, 36.6% 36.6%);
}

/* 字卡：一張大的（第一次說中的那句話和那張畫），五張小的，最後一張還沒學（棋盤格）。 */
.words {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ss-space-3);
}

@media (min-width: 560px) {
  .words {
    gap: var(--ss-space-4);
  }
}

.word {
  display: grid;
  align-content: start;
  gap: var(--ss-space-3);
  margin: 0;
  padding: var(--ss-space-3);
  border-radius: var(--ss-radius-lg);
}

.word img,
.word .ss-checker {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--ss-radius-sm);
  object-fit: cover;
}

.word p {
  margin: 0;
}

.word__en {
  display: flex;
  align-items: center;
  gap: var(--ss-space-2);
  padding-inline: var(--ss-space-1);
  font-family: var(--ss-font-display);
  font-size: var(--ss-type-title-sm-size);
  line-height: var(--ss-type-title-sm-line);
  color: var(--ss-text-primary);
}

.word__en svg {
  width: var(--ss-size-icon-sm);
  height: var(--ss-size-icon-sm);
  color: var(--ss-accent-text);
}

.word__zh {
  margin-left: auto;
  font-family: var(--ss-font-body);
  font-size: var(--ss-type-body-sm-size);
  color: var(--ss-text-tertiary);
}

.word--big {
  grid-column: span 2;
  grid-row: span 2;
  border-color: var(--ss-border-accent);
}

/* 大卡跨兩列：圖撐滿剩下的高度（絕對定位，不讓圖的高度去撐格子）。 */
.word--big {
  grid-template-rows: minmax(0, 1fr) auto auto;
}

.word__pic {
  position: relative;
  min-height: 96px;
}

.word__pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 60% 70%;
}

.word--big .word__en {
  font-size: var(--ss-type-title-lg-size);
  line-height: var(--ss-type-title-lg-line);
}

.word__sentence {
  padding-inline: var(--ss-space-1);
  font-family: var(--ss-font-display);
  font-size: var(--ss-type-body-md-size);
  line-height: var(--ss-type-body-md-line);
  color: var(--ss-text-secondary);
}

.word--next {
  border-style: dashed;
}

.word--next .word__blank {
  width: 70%;
  height: var(--ss-type-title-sm-line);
  aspect-ratio: auto;
  border-radius: var(--ss-radius-xs);
  opacity: 0.7;
}

@media (max-width: 559px) {
  .word__sentence {
    font-size: var(--ss-type-body-sm-size);
    line-height: var(--ss-type-body-sm-line);
  }

  .word__zh {
    display: none;
  }

  .word--big .word__zh {
    display: inline;
  }
}

/* ================================================================ 5. 誰會需要：家長、孩子兩張卡 */

.who {
  display: grid;
  gap: var(--ss-space-5);
}

@media (min-width: 720px) {
  .who {
    grid-template-columns: repeat(2, 1fr);
  }
}

.who__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ss-space-4);
  padding: var(--ss-space-8) var(--ss-space-7) var(--ss-space-7);
  overflow: hidden;
}

.who__card .ss-checker--fade {
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--ss-checker-cell) * 1.2);
  --checker-cell: calc(var(--ss-checker-cell) * 0.6);
  opacity: 0.55;
}

.who__card h3 {
  margin: 0;
  font-family: var(--ss-font-display);
  font-weight: var(--ss-type-headline-weight);
  font-size: var(--ss-type-headline-size);
  line-height: var(--ss-type-headline-line);
  color: var(--ss-text-primary);
  text-wrap: balance;
}

.who__card p {
  margin: 0;
  color: var(--ss-text-secondary);
  text-wrap: pretty;
}

/* ================================================================ 6. 安全：五句承諾 */

.promise {
  position: relative;
  display: grid;
  gap: var(--ss-space-8);
  padding: calc(var(--ss-space-8) + var(--ss-space-4)) var(--ss-space-6) var(--ss-space-8);
  overflow: hidden;
  border-radius: var(--ss-radius-xl);
}

@media (min-width: 960px) {
  .promise {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--ss-space-11);
    padding: var(--ss-space-11) var(--ss-space-11) var(--ss-space-10);
  }
}

.promise__band {
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--ss-checker-cell) * 2);
}

.promise__head {
  display: grid;
  gap: var(--ss-space-5);
  align-content: start;
  justify-items: start;
}

.promise__head .section__head {
  margin-bottom: 0;
}

/* 承諾用編號不用星形：會被引用成「第 5 句」（關於頁同一套）。 */
.promise__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ss-space-5);
  counter-reset: promise;
}

.promise__list li {
  display: grid;
  grid-template-columns: 2.5ch 1fr;
  gap: var(--ss-space-4);
  align-items: baseline;
  padding-bottom: var(--ss-space-5);
  border-bottom: var(--ss-stroke-hairline) solid var(--ss-border);
  counter-increment: promise;
  font-size: var(--ss-type-body-lg-size);
  line-height: var(--ss-type-body-lg-line);
  color: var(--ss-text-primary);
  text-wrap: pretty;
}

.promise__list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.promise__list li::before {
  content: counter(promise, decimal-leading-zero);
  font-family: var(--ss-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--ss-type-numeral-sm-size);
  color: var(--ss-accent-text);
}

@media (max-width: 559px) {
  .promise__head .ss-btn {
    width: 100%;
  }
}

/* ================================================================ 7. 下載：明天的圖 */

.get {
  display: grid;
  gap: var(--ss-space-9);
  align-items: center;
}

@media (min-width: 860px) {
  .get {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--ss-space-11);
  }
}

.get__frame {
  margin: 0;
}

.get__text {
  display: grid;
  gap: var(--ss-space-6);
  justify-items: start;
}

.get__text .section__head {
  margin-bottom: 0;
}

@media (max-width: 559px) {
  .get__text .ss-btn {
    width: 100%;
  }
}

/* 示範後面的光會超出容器；裁在視窗邊，不讓頁面橫向捲動。 */
.home main {
  overflow-x: clip;
}

/* 中文的一句話比較長：寬螢幕兩欄改成一樣寬，標題才放得下一行十個字（到逗號）。 */
@media (min-width: 960px) {
  :lang(zh) .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (min-width: 1120px) {
  :lang(zh) .hero__title {
    font-size: calc(var(--ss-type-display-md-size) * 1.6);
  }
}

/* ================================================================ 動態（2026-10-26 第二輪；website.md「首頁的動態」）
   只用 Sigil 的顏色、曲線（enter／standard）與 200–600 ms 的時長；不彈跳。
   減少動態時：這一段的動畫都在 prefers-reduced-motion: no-preference 裡，JS（site-motion.js、live-demo.js）也不做。 */

/* 「怎麼運作」的圖：上色的那張疊在棋盤格那張上面，用放射狀遮罩從中間長出來（--r 是遮罩半徑） */
@property --r {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 160%;
}

.step .ss-frame > img.grow {
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(circle at 55% 68%, #000 var(--r), transparent calc(var(--r) + 22%));
  mask-image: radial-gradient(circle at 55% 68%, #000 var(--r), transparent calc(var(--r) + 22%));
}

/* 示範的金色邊光：會呼吸 */
.demo__edge {
  position: absolute;
  inset: -1px;
  border: var(--ss-stroke-hairline) solid color-mix(in srgb, var(--ss-accent) 45%, transparent);
  border-radius: inherit;
  box-shadow:
    0 0 calc(var(--ss-blur-glow) * 1.5) -4px color-mix(in srgb, var(--ss-accent) 50%, transparent),
    inset 0 0 18px -8px color-mix(in srgb, var(--ss-accent) 45%, transparent);
  opacity: 0.4;
  pointer-events: none;
}

/* 特效層：飛的字、落點的光點與光暈 */
.demo__fx,
.demo__spots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.demo__fx {
  z-index: 3;
}

.demo__spots {
  z-index: 2;
}

.fx-word {
  position: absolute;
  font-family: var(--ss-font-display);
  font-weight: var(--ss-type-display-md-weight);
  font-size: var(--ss-type-title-md-size);
  line-height: var(--ss-type-title-lg-line);
  color: var(--ss-gold-100);
  text-shadow:
    0 0 14px color-mix(in srgb, var(--ss-accent) 90%, transparent),
    0 0 4px var(--ss-accent);
  white-space: nowrap;
  will-change: transform, opacity;
}

@media (min-width: 560px) {
  .fx-word {
    font-size: var(--ss-type-title-lg-size);
  }
}

.fx-ring,
.fx-spot {
  position: absolute;
  pointer-events: none;
}

.fx-ring {
  width: 104px;
  height: 104px;
  margin: -52px 0 0 -52px;
  border: var(--ss-stroke-regular) solid var(--ss-gold-300);
  border-radius: 50%;
  box-shadow:
    0 0 18px color-mix(in srgb, var(--ss-accent) 70%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--ss-accent) 45%, transparent);
  animation: fx-ring var(--ss-duration-deliberate) var(--ss-curve-enter) forwards;
}

.fx-spot {
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  background: var(--ss-gold-100);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: fx-spot 1100ms var(--ss-curve-standard) forwards;
}

@keyframes fx-ring {
  from {
    opacity: 0.95;
    transform: scale(0.15);
  }

  to {
    opacity: 0;
    transform: scale(1.7);
  }
}

@keyframes fx-spot {
  0% {
    opacity: 1;
    transform: scale(0) rotate(0deg);
  }

  30% {
    opacity: 1;
    transform: scale(1.25) rotate(20deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.5) rotate(45deg);
  }
}

/* 星點視差（site-motion.js 建的三層，捲動與滑鼠移動時位移；圖樣的高要跟 JS 的 SPEC 一樣） */
.starfield {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.starfield i {
  position: absolute;
  inset: -40px -40px -820px;
  will-change: transform;
}

.starfield i:nth-child(1) {
  background-image:
    radial-gradient(1px 1px at 12% 22%, color-mix(in srgb, var(--ss-ink-50) 55%, transparent) 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 64%, color-mix(in srgb, var(--ss-ink-50) 40%, transparent) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 36%, color-mix(in srgb, var(--ss-ink-50) 50%, transparent) 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 84%, color-mix(in srgb, var(--ss-ink-50) 35%, transparent) 50%, transparent 51%);
  background-size: 360px 420px;
}

.starfield i:nth-child(2) {
  background-image:
    radial-gradient(1.4px 1.4px at 20% 70%, color-mix(in srgb, var(--ss-ink-50) 60%, transparent) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 64% 18%, color-mix(in srgb, var(--ss-aether-200) 55%, transparent) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 86% 58%, color-mix(in srgb, var(--ss-ink-50) 50%, transparent) 50%, transparent 51%);
  background-size: 520px 600px;
}

.starfield i:nth-child(3) {
  background-image:
    radial-gradient(2px 2px at 30% 40%, color-mix(in srgb, var(--ss-gold-300) 70%, transparent) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 74% 82%, color-mix(in srgb, var(--ss-ink-50) 70%, transparent) 50%, transparent 51%);
  background-size: 680px 760px;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--ss-gold-300) 60%, transparent));
}

/* 金色主按鈕的星芒（按下的地方；site-motion.js 設 --bx、--by） */
.home .ss-btn--primary {
  position: relative;
  transition:
    transform var(--ss-duration-base) var(--ss-curve-enter),
    box-shadow var(--ss-duration-base) var(--ss-curve-enter),
    background-color var(--ss-duration-fast) var(--ss-curve-standard);
}

.home .ss-btn--primary::after {
  content: "";
  position: absolute;
  left: var(--bx, 50%);
  top: var(--by, 50%);
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  background: var(--ss-gold-100);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* ---- hero 進場：標語一個字一個字長出來（1.1–1.5 秒），副句、示範、按鈕依序浮上來 */
  .hero__title {
    --step: 150ms;
    --ring: 940ms;
  }

  :lang(zh) .hero__title {
    --step: 52ms;
    --ring: 960ms;
  }

  .hw {
    animation: hw-fill 300ms var(--ss-curve-enter) both;
    animation-delay: calc(140ms + var(--i) * var(--step));
  }

  :lang(zh) .hw {
    animation-duration: 240ms;
  }

  .hw--ring::after {
    animation: fx-ring calc(var(--ss-duration-deliberate) * 1.15) var(--ss-curve-enter) forwards;
    animation-delay: var(--ring);
  }

  .hero__lede,
  .hero__cta {
    animation: rise-in var(--ss-duration-deliberate) var(--ss-curve-enter) both;
  }

  .hero__lede {
    animation-delay: 420ms;
  }

  .hero__cta {
    animation-delay: 560ms;
  }

  .hero .demo {
    animation: demo-in 700ms var(--ss-curve-enter) 160ms both;
  }

  .demo__edge {
    animation: breathe 3600ms ease-in-out infinite alternate;
  }

  /* ---- 示範：剛說中的字閃一下 */
  .w--new {
    animation: word-lit var(--ss-duration-deliberate) var(--ss-curve-enter);
  }

  /* ---- 金色主按鈕：hover 光暈加大、微放大；按下閃星芒 */
  @media (hover: hover) {
    .home .ss-btn--primary:hover {
      transform: scale(1.035);
      box-shadow:
        0 0 calc(var(--ss-blur-glow) * 1.6) 0 color-mix(in srgb, var(--ss-accent) 50%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--ss-highlight) 60%, transparent);
    }
  }

  .home .ss-btn--primary.is-burst::after {
    animation: btn-burst 520ms var(--ss-curve-enter);
  }

  /* ---- 捲動進場（site-motion.js 加 .motion-ready 與每個目標的 .is-in，一次） */
  .motion-ready .tw {
    position: relative;
    top: 0.45em;
    opacity: 0;
    filter: blur(6px);
  }

  .motion-ready .is-in .tw {
    top: 0;
    opacity: 1;
    filter: none;
    transition:
      top 560ms var(--ss-curve-enter),
      opacity 560ms var(--ss-curve-enter),
      filter 560ms var(--ss-curve-enter);
    transition-delay: calc(var(--i) * 30ms);
  }

  .motion-ready .section__head > :not(.section__title) {
    opacity: 0;
    transform: translateY(12px);
  }

  .motion-ready .section__head.is-in > :not(.section__title) {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--ss-duration-deliberate) var(--ss-curve-enter) 160ms,
      transform var(--ss-duration-deliberate) var(--ss-curve-enter) 160ms;
  }

  .motion-ready .step,
  .motion-ready .who__card,
  .motion-ready .why__frame,
  .motion-ready .get__frame,
  .motion-ready .promise,
  .motion-ready .words .word,
  .motion-ready .promise__list li {
    opacity: 0;
    transform: translateY(24px);
  }

  .motion-ready .step.is-in,
  .motion-ready .who__card.is-in,
  .motion-ready .why__frame.is-in,
  .motion-ready .get__frame.is-in,
  .motion-ready .promise.is-in,
  .motion-ready .words.is-in .word,
  .motion-ready .promise.is-in .promise__list li {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--ss-duration-deliberate) var(--ss-curve-enter),
      transform var(--ss-duration-deliberate) var(--ss-curve-enter);
    transition-delay: calc(var(--n, 0) * 120ms);
  }

  .motion-ready .words.is-in .word,
  .motion-ready .promise.is-in .promise__list li {
    transition-delay: calc(var(--n, 0) * 70ms + 150ms);
  }

  /* 「怎麼運作」：棋盤格長成上色的那張 */
  .motion-ready .step .grow {
    --r: -25%;
  }

  .motion-ready .step.is-in .grow {
    --r: 160%;
    transition: --r 1100ms var(--ss-curve-enter);
    transition-delay: calc(var(--n, 0) * 120ms + 420ms);
  }

  /* 「為什麼有效」：三行圖例依序亮起 */
  .motion-ready .legend li {
    opacity: 0.16;
  }

  .motion-ready .legend.is-in li {
    opacity: 1;
    transition: opacity 500ms var(--ss-curve-enter);
    transition-delay: calc(var(--n, 0) * 380ms + 300ms);
  }

  .motion-ready .legend.is-in .legend__swatch {
    animation: swatch-pop var(--ss-duration-deliberate) var(--ss-curve-enter) both;
    animation-delay: calc(var(--n, 0) * 380ms + 300ms);
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes demo-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hw-fill {
  from {
    --fill: 0%;
  }

  to {
    --fill: 100%;
  }
}

@keyframes breathe {
  from {
    opacity: 0.28;
  }

  to {
    opacity: 0.9;
  }
}

@keyframes word-lit {
  from {
    color: var(--ss-gold-50);
    text-shadow:
      0 0 22px var(--ss-accent),
      0 0 6px var(--ss-gold-200);
  }
}

@keyframes btn-burst {
  0% {
    opacity: 1;
    transform: scale(0.2) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: scale(2.2) rotate(45deg);
  }
}

@keyframes swatch-pop {
  0% {
    transform: scale(0.6);
  }

  55% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

/* 公園那題有 12 個細節：手機上小菱形縮小、計數不換行，長齊時版面不跳。 */
.demo__count {
  white-space: nowrap;
}

@media (max-width: 559px) {
  .demo__pips {
    gap: var(--ss-space-2);
  }

  .demo__pips i {
    width: 7px;
    height: 7px;
  }

  .demo__meter {
    gap: var(--ss-space-3);
  }
}

/* ================================================================ 誰會需要：卡片下一句帶到家長 */
.who__note {
  margin: var(--ss-space-6) 0 0;
  color: var(--ss-text-tertiary);
  font-size: var(--ss-type-body-md-size);
  line-height: var(--ss-type-body-md-line);
}

/* ================================================================ 自己畫：同一張自己拼的畫，換風格 */
.own {
  display: grid;
  gap: var(--ss-space-9);
  align-items: center;
}

@media (min-width: 960px) {
  .own {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--ss-space-11);
  }
}

.own .section__head {
  margin-bottom: 0;
}

.own__viewer {
  display: grid;
  gap: var(--ss-space-4);
}

.own__frame {
  margin: 0;
}

/* 五張一樣的畫疊在一起，顯示中的那張 .is-on，換風格是淡入淡出 */
.own__frame > img.own__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.own__frame > img.own__layer:first-of-type {
  position: relative;
}

.own__frame > img.own__layer.is-on {
  opacity: 1;
}

.own__sentence {
  margin: 0;
  padding-inline: var(--ss-space-2);
  font-family: var(--ss-font-display);
  font-size: var(--ss-type-body-lg-size);
  line-height: var(--ss-type-body-lg-line);
  color: var(--ss-accent-text);
  text-wrap: pretty;
}

.own__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss-space-3);
}

.own__chip {
  padding-left: var(--ss-space-2);
}

.own__chip img {
  width: 24px;
  height: 24px;
  border-radius: var(--ss-radius-pill);
  object-fit: cover;
}

.own__chip[aria-pressed="true"] {
  color: var(--chip-text);
  background: var(--chip-soft);
  border-color: color-mix(in srgb, var(--chip-main) 70%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .own__frame > img.own__layer {
    transition: opacity var(--ss-duration-deliberate) var(--ss-curve-standard);
  }

  .motion-ready .own__viewer {
    opacity: 0;
    transform: translateY(24px);
  }

  .motion-ready .own__viewer.is-in {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--ss-duration-deliberate) var(--ss-curve-enter),
      transform var(--ss-duration-deliberate) var(--ss-curve-enter);
  }
}

/* ================================================================ 窄螢幕（瀏覽器面板 280 px、小手機；2026-10-26）
   標語的字級跟著視窗寬度縮，hero 的格子不讓內容撐寬（不然 overflow-x: clip 會把字切掉）；
   計數可以換行；題目小圖移到左下角（右上有雲、上緣中間會蓋到「你的畫」標籤），「圖裡沒有」改浮在上面。 */
@media (max-width: 959px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }
}

.hero > * {
  min-width: 0;
}

@media (max-width: 719px) {
  .hero__title {
    font-size: min(calc(var(--ss-type-display-lg-size) * 1.4), 14.5vw);
  }

  :lang(zh) .hero__title {
    font-size: min(calc(var(--ss-type-display-md-size) * 1.02), 8.6vw);
  }
}

.demo__meter {
  flex-wrap: wrap;
  row-gap: var(--ss-space-2);
}

@media (max-width: 479px) {
  .demo__look {
    top: auto;
    bottom: var(--ss-space-3);
    left: var(--ss-space-3);
    transform: none;
    width: 27%;
  }

  .demo__look span {
    left: var(--ss-space-1);
    bottom: var(--ss-space-1);
    padding: 0 var(--ss-space-2);
    font-size: var(--ss-type-eyebrow-size);
    letter-spacing: 0;
    white-space: nowrap;
  }

  .demo__toast {
    top: calc(var(--ss-space-4) + var(--ss-space-8));
    bottom: auto;
    max-width: calc(100% - 2 * var(--ss-space-4));
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 339px) {
  .demo__look span {
    display: none;
  }

  .demo .ss-frame__label {
    font-size: var(--ss-type-eyebrow-size);
    padding-inline: var(--ss-space-3);
  }
}

/* 自己畫的風格籤（第七輪，五顆）：一排放得下；兩欄版面但畫比較窄（960–1199 px）與 680 px 以下縮小一號，
   手機（560 px 以下）排成格子：每欄一樣寬、兩排對齊（3 + 2；360 px 以下 2 + 2 + 1）。 */
@media (min-width: 960px) and (max-width: 1199px), (max-width: 679px) {
  .own__chip {
    gap: var(--ss-space-2);
    padding: 0 var(--ss-space-4) 0 var(--ss-space-2);
    font-size: var(--ss-type-label-sm-size);
  }

  .own__chip img {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 559px) {
  .own__chips {
    display: grid;
    grid-template-columns: repeat(3, max-content);
  }

  .own__chip {
    justify-content: flex-start;
  }
}

@media (max-width: 359px) {
  .own__chips {
    grid-template-columns: repeat(2, max-content);
  }
}

/* 示範是「說」的（第七輪）：句子前面一個「說／Said」的小標（訪客自己打時藏起來），欄位左邊一顆灰色的麥克風
   （App 裡才收音，網頁不接第三方語音；不能按出錄音，滑過或點了浮出一行「App 裡可以直接說」）。 */
.demo__said {
  display: inline-flex;
  align-items: center;
  gap: var(--ss-space-2);
  margin: 0 0 calc(var(--ss-space-5) * -1 + var(--ss-space-2));
  padding-inline: var(--ss-space-2);
  font-family: var(--ss-font-mono);
  font-size: var(--ss-type-eyebrow-size);
  line-height: var(--ss-type-eyebrow-line);
  letter-spacing: var(--ss-type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--ss-accent-text);
}

.demo__said svg {
  width: 14px;
  height: 14px;
}

.demo.is-user .demo__said {
  visibility: hidden;
}

.demo__inputrow {
  position: relative;
}

.demo__mic {
  appearance: none;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--ss-size-control-sm);
  height: var(--ss-size-control-sm);
  margin-left: calc(var(--ss-space-2) * -1);
  padding: 0;
  border: 0;
  border-radius: var(--ss-radius-pill);
  background: transparent;
  color: var(--ss-text-tertiary);
  cursor: help;
}

.demo__mic svg {
  width: var(--ss-size-icon-md);
  height: var(--ss-size-icon-md);
}

.demo__tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + var(--ss-space-3));
  z-index: 3;
  margin: 0;
  padding: var(--ss-space-2) var(--ss-space-4);
  border: var(--ss-stroke-hairline) solid var(--ss-border-strong);
  border-radius: var(--ss-radius-sm);
  background: var(--ss-surface-overlay);
  color: var(--ss-text-primary);
  font-size: var(--ss-type-label-md-size);
  font-weight: 600;
  line-height: var(--ss-type-label-md-line);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition:
    opacity var(--ss-duration-fast) var(--ss-curve-standard),
    transform var(--ss-duration-fast) var(--ss-curve-standard);
}

.demo__inputrow:has(.demo__mic:hover) .demo__tip,
.demo__inputrow:has(.demo__mic:focus-visible) .demo__tip,
.demo__inputrow.is-tip .demo__tip {
  opacity: 1;
  transform: none;
}

/* 窄螢幕的欄位：字 16 px（iOS 小於 16 px 會在聚焦時放大整頁），左右內距小一點，提示字放得下。 */
@media (max-width: 479px) {
  .demo__field {
    padding-inline: var(--ss-space-3);
    gap: var(--ss-space-2);
  }

  .demo__input {
    font-size: var(--ss-type-label-lg-size);
  }
}