/* H1 頁首：雪具租借頁風（/rental 的 .ra-hero）。
   左邊深藍大標＋標題尾的三色小彩紙＋Kalam 英文，下面一條粉紅燕尾緞帶寫「越後湯澤總共有多達14座滑雪場」，再下面是
   新手推薦圖例（讚章放在一個卡片左上角的框角裡，跟下方開季卡的讚章同一位置）。右邊照租借頁雪具架的畫法畫雪山與纜車：
   深藍 3px 線、青／黃／粉紅／石板藍色塊、淡藍雪地、青色雪花與彩色小點；手機改成右上角一張小圖。
   色碼、字級、緞帶、彩紙、雪點位置都取自 css/rental.css 的實際值（見 notes/h1-report.md）。
   所有規則限定在 .intro-hero--h1 底下；沒有 JS，動畫只用 CSS，減少動態時全關。手機優先。 */
.intro-hero--h1 {
  --ih1-ink: #17375a; --ih1-text: #3a5167; --ih1-en: #43647c; --ih1-edge: #c9dfeb;
  --ih1-cyan: #4edce9; --ih1-snow: #c3e7f2;
  display: block; padding: 140px 16px 8px; background: #fff; color: var(--ih1-text);
  font-size: 16px; line-height: 1.75;
}
.intro-hero--h1 *, .intro-hero--h1 *::before, .intro-hero--h1 *::after { box-sizing: border-box; }
.intro-hero--h1 h1, .intro-hero--h1 p { margin: 0; padding: 0; }
.intro-hero--h1 svg { display: block; flex-shrink: 0; }

/* 版心跟下面開季表的 .season-overview__inner 同寬、同左緣 */
.intro-hero--h1 .ih1-inner { position: relative; display: grid; gap: 24px; align-items: center; max-width: 1120px; margin: 0 auto; }
.intro-hero--h1 .ih1-copy { position: relative; z-index: 1; }
.intro-hero--h1 .ih1-deco { position: absolute; inset: 0; z-index: 0; margin: 0; pointer-events: none; }

/* 大標：租借頁 .ra-hero__title（深藍、700、字距 .08em、行高 1.25；手機 33px，480 起 36、768 起 48、1280 起 52）。
   中文頁 .ih1-title 就是 h1；英文頁照 en/rental 把中英兩段都放進 h1（搜尋引擎讀得到英文），.ih1-title、.ih1-en 是 h1 裡的 span，
   所以這裡寫明 display: block，兩頁畫出來一樣 */
.intro-hero--h1 .ih1-title {
  display: block; position: relative; width: fit-content; padding-right: 48px; color: var(--ih1-ink); font-size: 33px; font-weight: 700; line-height: 1.25; letter-spacing: .08em;
}
/* 標題尾的小彩紙（租借頁 .ra-hero__title::after 原圖）；放在大標右側的留白裡，不超出大標的盒子 */
.intro-hero--h1 .ih1-title::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 46px; height: 46px; margin: -28px 0 0;
  pointer-events: none; transform-origin: 0 60%; background: center / contain no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='M6 13.6 11 4.9' stroke='%23ff9ec0'/%3E%3Cpath d='M10.4 18 19.1 13' stroke='%23ffd75e'/%3E%3Cpath d='M12 24h10' stroke='%234edce9'/%3E%3Cpath d='M10.4 30 19.1 35' stroke='%23ff9ec0'/%3E%3Ccircle cx='22.9' cy='6.1' r='2.2' fill='%23ffd75e' stroke='none'/%3E%3C/svg%3E");
}
/* Kalam 英文：租借頁 .ra-hero__en（22px、700、行高 1.15、#43647c） */
.intro-hero--h1 .ih1-en {
  display: block; margin-top: 4px; font-family: Kalam, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.15; color: var(--ih1-en);
}

/* 粉紅燕尾緞帶：租借頁 .ra-hero__tag 的緞帶版（粉紅漸層帶、2px 深藍框、燕尾收在帶子後面、深一點的摺角）。
   外層 p 留出燕尾的位置（左右 14px、下 5px），帶子是裡面的 span，燕尾是 p 的偽元素、排在帶子後面 */
.intro-hero--h1 .ih1-tag {
  position: relative; display: block; width: fit-content; max-width: 100%; margin: 10px 0 0; padding: 0 14px 5px;
  font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--ih1-ink); text-align: center;
}
.intro-hero--h1 .ih1-tag__band {
  display: block; padding: 4px 14px; border: 2px solid var(--ih1-ink); border-radius: 2px; background: linear-gradient(#ffd9e6, #ffc9dc);
}
.intro-hero--h1 .ih1-tag::before, .intro-hero--h1 .ih1-tag::after {
  content: ""; position: absolute; z-index: -1; top: 5px; bottom: 0; width: 26px; pointer-events: none;
}
.intro-hero--h1 .ih1-tag::before {
  left: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 40' preserveAspectRatio='none'%3E%3Cpath d='M1 1H25V39H1L8.5 20Z' fill='%23ffb3cc' stroke='%2317375a' stroke-width='2' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M14 34.2H25V39H14Z' fill='%23e98bae'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.intro-hero--h1 .ih1-tag::after {
  right: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 40' preserveAspectRatio='none'%3E%3Cpath d='M25 1H1V39H25L17.5 20Z' fill='%23ffb3cc' stroke='%2317375a' stroke-width='2' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M12 34.2H1V39H12Z' fill='%23e98bae'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}


/* 右邊插畫：手機不顯示，改右上角小圖 */
.intro-hero--h1 .ih1-art { display: none; }
.intro-hero--h1 .ih1-svg { width: 100%; height: auto; }
.intro-hero--h1 .ih1-mini { position: absolute; top: -10px; right: -4px; width: clamp(80px, calc(100vw - 278px), 112px); height: auto; aspect-ratio: 3 / 2; }

/* 雪：淡藍與青色小點、一朵小雪花（租借頁 .ra-fl）。手機上 3～5 原本排在新手推薦圖例那一行右邊，owner 11/08 拿掉圖例後往上移到 Kalam 右邊、緞帶上方 */
.intro-hero--h1 .ih1-fl { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--ih1-snow); }
.intro-hero--h1 .ih1-fl--2, .intro-hero--h1 .ih1-fl--5 { width: 5px; height: 5px; background: var(--ih1-cyan); }
.intro-hero--h1 .ih1-fl--3 {
  width: 12px; height: 12px; border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234edce9' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 2.5v19M3.8 7.2l16.4 9.6M3.8 16.8l16.4-9.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.intro-hero--h1 .ih1-fl--1 { top: -4px; left: 211px; }
.intro-hero--h1 .ih1-fl--2 { top: 30px; left: 209px; }
.intro-hero--h1 .ih1-fl--3 { top: 56px; left: 176px; }
.intro-hero--h1 .ih1-fl--4 { top: 70px; left: 222px; width: 6px; height: 6px; }
.intro-hero--h1 .ih1-fl--5 { top: 70px; right: 18px; }

/* 進場：彩紙彈出、雪點落下。0.2 秒內開始、1.2 秒內完成，只動裝飾，字不動 */
@keyframes ih1-pop { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
@keyframes ih1-drift { from { opacity: 0; translate: 0 -16px; } to { opacity: 1; translate: 0 0; } }
.intro-hero--h1 .ih1-title::after { animation: ih1-pop .9s cubic-bezier(.22, 1, .36, 1) .1s both; }
.intro-hero--h1 .ih1-fl { animation: ih1-drift .8s cubic-bezier(.22, 1, .36, 1) .2s both; }
.intro-hero--h1 .ih1-fl--2 { animation-delay: .25s; }
.intro-hero--h1 .ih1-fl--3 { animation-delay: .3s; }
.intro-hero--h1 .ih1-fl--4 { animation-delay: .35s; }
.intro-hero--h1 .ih1-fl--5 { animation-delay: .4s; }

/* 纜車動起來（owner 11/08「讓纜車動起來」）：兩台車沿纜索等速往上坡（右→左）走，快到纜索兩端時淡出、淡入，以吊點為軸輕輕擺動。
   HTML 把每台車包成兩層：.ih1-cab（沿纜索平移＋淡入淡出）＞.ih1-cab__sway（以吊點為軸擺動）；--1 是上坡在前面那台（大圖黃、小圖粉紅）。
   靜止畫面（減少動態）要跟原圖逐像素相同，所以座標都沒改、也沒加 transform 屬性。原本兩台合畫在同一條 path 的線段（.ih1-pair：
   大圖吊桿、小圖吊桿與窗線）原樣留著、只在靜止時畫；每台車自己的拆開版（.ih1-solo，HTML 預設 display="none"）只在動的時候畫。
   （實測把合併的 path 拆成兩條，Chrome 的反鋸齒會差 1～21 個色階，所以靜止時不用拆開版。）
   一圈 22 秒、等速：前 95%（約 20.9 秒）在走，最後 5%（約 1.1 秒）藏著，再從右端淡入；淡入、淡出各佔 6%（約 1.3 秒）。
   兩台用負的 animation-delay 錯開，第一格剛好是原圖的位置，一載入就在動。
   大圖：纜索 (14,38.3)→(426,96)、斜率 57.7/412；吊點走 x 410→30，一圈 400 單位，兩台間距 250（繞回來那一側 150）。
   小圖：纜索 (4,11.5)→(116,29.5)、斜率 18/112；吊點走 x 110→10，一圈約 105.3 單位，兩台間距 68（另一側約 37）。
   擺動 ±2°、緩進緩出；兩台一個來回 6 秒／5.2 秒、起擺方向相反，不會同步。減少動態時這些動畫都不定義（檔尾那段也會全關）。 */
@keyframes ih1-ride-d1 { 0% { transform: translate(290px, 40.614078px); opacity: 0; } 6%, 89% { opacity: 1; } 95%, 100% { transform: translate(-90px, -12.604369px); opacity: 0; } }
@keyframes ih1-ride-d2 { 0% { transform: translate(40px, 5.601942px); opacity: 0; } 6%, 89% { opacity: 1; } 95%, 100% { transform: translate(-340px, -47.616505px); opacity: 0; } }
@keyframes ih1-ride-m1 { 0% { transform: translate(82px, 13.178571px); opacity: 0; } 6%, 89% { opacity: 1; } 95%, 100% { transform: translate(-18px, -2.892857px); opacity: 0; } }
@keyframes ih1-ride-m2 { 0% { transform: translate(14px, 2.25px); opacity: 0; } 6%, 89% { opacity: 1; } 95%, 100% { transform: translate(-86px, -13.821429px); opacity: 0; } }
@keyframes ih1-sway { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
@media (prefers-reduced-motion: no-preference) {
  .intro-hero--h1 .ih1-pair { display: none; }
  .intro-hero--h1 .ih1-solo { display: inline; }
  .intro-hero--h1 .ih1-cab__sway { transform-box: view-box; animation: ih1-sway 3s cubic-bezier(.37, 0, .63, 1) -1.5s infinite alternate; }
  .intro-hero--h1 .ih1-cab--2 .ih1-cab__sway { animation-duration: 2.6s; animation-delay: -3.9s; }
  .intro-hero--h1 .ih1-svg .ih1-cab--1 { animation: ih1-ride-d1 22s linear -15.95s infinite; }
  .intro-hero--h1 .ih1-svg .ih1-cab--2 { animation: ih1-ride-d2 22s linear -2.2s infinite; }
  .intro-hero--h1 .ih1-mini .ih1-cab--1 { animation: ih1-ride-m1 22s linear -17.138s infinite; }
  .intro-hero--h1 .ih1-mini .ih1-cab--2 { animation: ih1-ride-m2 22s linear -2.926s infinite; }
  .intro-hero--h1 .ih1-svg .ih1-cab--1 .ih1-cab__sway { transform-origin: 120px 53.1px; }
  .intro-hero--h1 .ih1-svg .ih1-cab--2 .ih1-cab__sway { transform-origin: 370px 88.1px; }
  .intro-hero--h1 .ih1-mini .ih1-cab--1 .ih1-cab__sway { transform-origin: 28px 15.4px; }
  .intro-hero--h1 .ih1-mini .ih1-cab--2 .ih1-cab__sway { transform-origin: 96px 26.4px; }
}

@media (max-width: 389px) {
  .intro-hero--h1 .ih1-tag { padding-inline: 12px; }
  .intro-hero--h1 .ih1-tag__band { padding-inline: 12px; }
  .intro-hero--h1 .ih1-tag::before, .intro-hero--h1 .ih1-tag::after { width: 23px; }
}
@media (max-width: 374px) {
  .intro-hero--h1 .ih1-tag { font-size: 17px; }
}
@media (max-width: 360px) {
  .intro-hero--h1 .ih1-mini { width: clamp(72px, calc(100vw - 268px), 92px); }
}
@media (max-width: 340px) {
  .intro-hero--h1 .ih1-mini, .intro-hero--h1 .ih1-fl--3 { display: none; }
  .intro-hero--h1 .ih1-fl--4 { top: 18px; left: 250px; }
  .intro-hero--h1 .ih1-fl--5 { top: 60px; right: 4px; }
  .intro-hero--h1 .ih1-tag { font-size: 16px; }
}
@media (min-width: 470px) and (max-width: 767px) {
  .intro-hero--h1 .ih1-fl--4 { top: 70px; left: 300px; }
  .intro-hero--h1 .ih1-fl--5 { top: 72px; }
}
/* 480 起導覽列 120px 高（租借頁 .ra-hero 480–767 也是 160px） */
@media (min-width: 480px) {
  .intro-hero--h1 { padding-top: 160px; }
  .intro-hero--h1 .ih1-title { font-size: 36px; }
}
@media (min-width: 768px) {
  .intro-hero--h1 { padding: 136px 24px 16px; }
  .intro-hero--h1 .ih1-inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 28px; }
  .intro-hero--h1 .ih1-title { font-size: 48px; }
  .intro-hero--h1 .ih1-title { padding-right: 56px; }
  .intro-hero--h1 .ih1-title::after { width: 52px; height: 52px; margin: -31px 0 0; }
  .intro-hero--h1 .ih1-tag { margin: 14px 0 2px -2px; padding: 0 18px 6px; font-size: 21px; }
  .intro-hero--h1 .ih1-tag__band { padding: 6px 20px; }
  .intro-hero--h1 .ih1-tag::before, .intro-hero--h1 .ih1-tag::after { top: 6px; width: 32px; }
  .intro-hero--h1 .ih1-art { display: block; width: 100%; max-width: 300px; justify-self: end; }
  .intro-hero--h1 .ih1-mini { display: none; }
  .intro-hero--h1 .ih1-fl { left: auto; }
  .intro-hero--h1 .ih1-fl--1 { top: 6px; right: 330px; }
  .intro-hero--h1 .ih1-fl--2 { top: 56px; right: 300px; }
  .intro-hero--h1 .ih1-fl--3 { top: 170px; right: 318px; width: 16px; height: 16px; }
  .intro-hero--h1 .ih1-fl--4 { top: -8px; right: 26px; }
  .intro-hero--h1 .ih1-fl--5 { top: 132px; right: -10px; }
}
/* 右下浮動鈕的空間，跟開季表 .season-overview 一樣右側留 96px（site-content.css 601～1279）。
   要放在 768 那段 padding 簡寫的後面，否則 768～1279 會被蓋回 24px */
@media (min-width: 601px) and (max-width: 1279px) {
  .intro-hero--h1 { padding-right: 96px; }
}
/* owner 11/08 拿掉頁首新手推薦圖例後頁首變矮：768～1023 雪花 3 原本的 top: 170px 會掉出頁首、壓到開季標題，移到緞帶上方 */
@media (min-width: 768px) and (max-width: 1023px) {
  .intro-hero--h1 .ih1-fl--3 { top: 80px; right: 270px; }
}
@media (min-width: 1024px) {
  .intro-hero--h1 { padding-bottom: 24px; }
  .intro-hero--h1 .ih1-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; }
  .intro-hero--h1 .ih1-art { max-width: 330px; }
  .intro-hero--h1 .ih1-fl--1 { right: 356px; }
  .intro-hero--h1 .ih1-fl--2 { top: 104px; right: 366px; }
  .intro-hero--h1 .ih1-fl--3 { right: 344px; }
}
@media (min-width: 1280px) {
  .intro-hero--h1 .ih1-title { font-size: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-hero--h1 *, .intro-hero--h1 *::before, .intro-hero--h1 *::after { animation: none !important; transition: none !important; }
}
/* owner 11/09（版面前後預覽）：平板 768～1279 置中，左右都留 80px（照租借頁 .ra-hero__inner），頁首標題跟下面開季卡左邊對齊；
   取代上面 601～1279 為右下浮動鈕留的右側 96px（浮動鈕佔右邊 74px，80px 閃得過）。 */
@media (min-width: 768px) and (max-width: 1279px) {
  .intro-hero--h1 { padding-left: 80px; padding-right: 80px; }
}