/* ═══════════════════════════════════════════════════════════
   Hero
   ═══════════════════════════════════════════════════════════ */

.hero {
  min-height: 100svh;
  padding-block: var(--sp-6) var(--sp-4);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--sp-4);
}

.hero {
  padding-top: calc(var(--nav-h) + var(--sp-5));
}

.hero__name {
  display: grid; gap: 0.2rem;
}
/* 名字是這一頁的「產品名」：Apple 產品頁的標題上面那一行，字小但站得最穩 */
.hero__name .eyebrow:first-child {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.hero__name .eyebrow:last-child {
  font-size: var(--t-body);
  font-weight: 400;
  color: var(--ink-muted);
}

.hero__statement {
  align-self: center;
  max-width: 22ch;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
  word-break: normal;
  /* 刻意不用漸層字：句子裡的三個連結是 position: relative（要掛底線），
     定位過的行內元素不會被父層的 background-clip: text 畫到，字會整個消失。 */
  color: var(--ink);
}

/* ── 載入時的進場：由糊到清、微微上浮，依序到位 ──────────
   用 CSS 動畫而不是等 JS —— 第一眼的東西不該等腳本。 */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(1.5rem); filter: blur(12px); }
  to   { opacity: 1; transform: none;               filter: none; }
}
.hero__name, .hero__statement, .hero__foot {
  animation: hero-rise 1.3s var(--ease-out) both;
}
.hero__name      { animation-delay: 0.05s; }
.hero__statement { animation-delay: 0.18s; }
.hero__foot      { animation-delay: 0.45s; }
@media (prefers-reduced-motion: reduce) {
  .hero__name, .hero__statement, .hero__foot { animation: none; }
}

/* hero 句子裡的三個名詞本身就是導覽 —— 指向三個精選專案 */
.hero__statement a {
  position: relative;
  text-decoration: none;
  white-space: nowrap;
}
.hero__statement a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.08em;
  height: 0.045em;
  min-height: 2px;
  border-radius: 1px;
  background: var(--accent);
  transform: scaleX(var(--u, 0));
  transform-origin: left;
  transition: transform var(--dur-ui) var(--spring);
}
.hero__statement a:hover,
.hero__statement a:focus-visible { --u: 1; }
/* 載入後三條底線依序畫出來，暗示「這三個字可以點」 */
.hero.is-in .hero__statement a { --u: 1; }
.hero.is-in .hero__statement a:nth-of-type(1)::after { transition-delay: 1.0s;  }
.hero.is-in .hero__statement a:nth-of-type(2)::after { transition-delay: 1.15s; }
.hero.is-in .hero__statement a:nth-of-type(3)::after { transition-delay: 1.3s;  }
.hero.is-in .hero__statement a:hover::after,
.hero.is-in .hero__statement a:focus-visible::after { transition-delay: 0s; }

/* ── 精選三卡（由 JS 依 data-featured 產生） ─────────────
   三塊獨立的材質，不是一張被格線切開的表 —— 每張都是可以按的東西。 */
.hero__featured {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-1);
}

.featured-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.35rem;
  padding: var(--sp-3);
  background: linear-gradient(180deg, var(--bg-lift), var(--bg-raised));
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 #ffffff14, inset 0 0 0 1px #ffffff0a;
  text-decoration: none;
  transition: translate var(--dur-ui) var(--spring),
              box-shadow var(--dur-ui) var(--ease-out),
              scale var(--dur-tap) var(--ease-out);
}
.featured-card:hover {
  translate: 0 -3px;
  box-shadow: inset 0 1px 0 #ffffff1f, inset 0 0 0 1px #ffffff14,
              0 18px 40px #00000099;
}
.featured-card:active { scale: 0.985; }

.featured-card__idx {
  font-size: var(--t-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.featured-card__title {
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.featured-card__tag {
  font-size: var(--t-small);
  color: var(--ink-muted);
}
.featured-card__go {
  margin-top: var(--sp-2);
  font-size: var(--t-small);
  color: var(--ink-muted);
  display: flex; align-items: center; gap: 0.35em;
  transition: color var(--dur-ui) var(--ease-out),
              gap var(--dur-ui) var(--spring);
}
.featured-card:hover .featured-card__go { color: var(--ink); gap: 0.7em; }

@media (max-width: 46rem) {
  .hero__featured { grid-template-columns: 1fr; }
  .featured-card { padding: var(--sp-2) var(--sp-3); }
  .featured-card__go { margin-top: var(--sp-1); }
  .hero__statement { max-width: none; }
}

/* ── 往下捲的提示 ──────────────────────────────────────── */
.scroll-cue {
  display: flex; align-items: center; gap: var(--sp-1);
  margin-bottom: var(--sp-3);
  font-size: var(--t-small);
  color: var(--ink-faint);
}
.scroll-cue__rule {
  width: 3rem; height: 1px; background: var(--stroke-faint);
  position: relative; overflow: hidden;
}
.scroll-cue__rule::after {
  content: ""; position: absolute; inset: 0;
  background: var(--ink-faint);
  animation: cue-sweep 2.6s var(--ease-out) infinite;
}
@keyframes cue-sweep {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue__rule::after { animation: none; transform: none; opacity: 0.4; }
}