/* 首頁電影感開場｜只用在 index.html（10/26 改成形象片風格）
   一個 sticky 舞台，捲動推動鏡頭：霓虹金鯨線稿 → 第一期（春節主視覺、天空轉紅）→ 第二期霓虹 →「我在島上，等你。」入海。
   沒有 JS、不支援 WebGL、或系統開「減少動態」時，只顯示第一幕（.film-on 不會加上）。
   依品牌規範：光只畫在線上（第 3 章）、金鯨原圖不改色不加光（第 4 章）、主按鈕 200ms 內可按（9.3）。 */

.film { position: relative; }
.film-stage { position: relative; overflow: hidden; background: var(--s-night); }
.film-sea { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
.film-act { position: relative; }

/* 第一幕：形象片的開場，寬字距明體＋英文小副標，金鯨線稿躍出海面 */
.film-a1 { display: grid; gap: 8px; padding-top: 48px; }
.film-copy { display: grid; gap: 10px; justify-items: center; text-align: center; position: relative; z-index: 2; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.film-brand { font-family: var(--s-title); font-weight: 700; font-size: 15px; letter-spacing: .5em; text-indent: .5em; color: var(--s-pearl); }
.film-copy h1 { font-weight: 900; font-size: clamp(56px, 16vw, 112px); line-height: 1.05; letter-spacing: .22em; text-indent: .22em; color: var(--s-gold); }
.film-en { font-family: var(--s-display); font-weight: 800; font-size: 13px; letter-spacing: .42em; text-indent: .42em; color: var(--s-gold); }
.film-kicker { margin: 6px 0 0; font-weight: 700; font-size: 16px; letter-spacing: .3em; text-indent: .3em; color: var(--s-pearl); }
.film-line { margin: 0; font-family: var(--s-title); font-size: 17px; letter-spacing: .12em; color: var(--s-mist); }
.film-ctas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; margin-top: 12px; }
.film-ctas .pg-btn small { font-weight: 500; font-size: 12px; opacity: .75; margin-left: 6px; }
.film-link { font-weight: 500; font-size: 15px; color: var(--s-pearl); text-decoration: none; border-bottom: 1px solid rgba(246, 239, 226, .4); padding-bottom: 2px; }
.film-whale { justify-self: center; width: min(92%, 520px); height: auto; color: var(--s-gold); overflow: visible;
  filter: drop-shadow(0 0 3px rgba(232, 197, 126, .55)) drop-shadow(0 0 12px rgba(232, 197, 126, .28)); }

/* 二、三幕：兩站，浮在海面上的毛玻璃卡片 */
.film-station { display: none; align-content: start; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.film-poster { display: none; }
.film-glass { display: grid; gap: 12px; justify-items: start; max-width: 640px; padding: 24px; border-radius: 24px;
  background: rgba(6, 17, 31, .42); border: 1px solid rgba(246, 239, 226, .14); box-shadow: inset 0 1px 0 rgba(246, 239, 226, .16);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .film-glass { background: rgba(6, 17, 31, .82); } }
.film-no { font-family: var(--s-display); font-weight: 900; font-size: 14px; letter-spacing: .3em; color: var(--s-gold); }
.film-glass h2 { font-size: clamp(34px, 9vw, 64px); line-height: 1.15; letter-spacing: .08em; }
.film-full { margin: 0; font-size: 15px; color: var(--s-pearl); opacity: .9; }
.film-dare { margin: 4px 0 0; font-family: var(--s-title); font-weight: 700; font-size: 17px; line-height: 1.6; letter-spacing: .08em; color: var(--s-gold); }
.film-a3 .film-no { color: #48a8ff; }
.film-neon { display: inline-block; height: 2px; width: min(220px, 50vw); margin: 4px 0; border-radius: 2px; background: #ff5263; }
.film-a4 { display: none; place-content: center; justify-items: center; text-align: center; gap: 10px; padding-inline: 16px; }
.film-a4 p { margin: 0; font-family: var(--s-title); font-weight: 900; font-size: clamp(28px, 6vw, 44px); letter-spacing: .16em; text-indent: .16em; color: var(--s-gold); }
.film-a4 span:last-child { font-size: 14px; color: var(--s-mist); margin-top: 12px; }
.keep { white-space: nowrap; }

/* 舞台右下角：跳過動畫 */
.film-ctrl { display: none; position: absolute; z-index: 5; right: max(16px, env(safe-area-inset-right, 0px)); bottom: 16px; gap: 8px; }
.film-chip { font: 500 13px/1 var(--s-sans); color: var(--s-pearl); background: rgba(6, 17, 31, .5); border: 1px solid rgba(246, 239, 226, .22); border-radius: 999px; padding: 10px 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* ====== 電影模式（film.js 確認可用才加上） ====== */
.film-on .film { height: 480svh; }
.film-on .film-stage { position: sticky; top: 0; height: 100svh; }
.film-on .film-sea { display: block; }
.film-on .film-act { position: absolute; inset: 0; }
.film-on .film-a1 { align-content: space-between; padding-block: 7svh 0; }
.film-on .film-whale { width: min(88%, calc((100svh - 330px) * 1.24), 620px); margin-bottom: 9svh; }
.film-on .film-station, .film-on .film-a4 { display: grid; opacity: 0; visibility: hidden; }
.film-on .film-station { padding-top: 22svh; }
/* 第一期：春節主視覺從第二幕才出現，用細金框裝著（同形象片），原圖不改色 */
.film-on .film-a2 { padding-top: 10svh; gap: 16px; justify-items: start; }
.film-on .film-poster { display: block; width: min(40vw, 22svh, 220px); aspect-ratio: 896 / 1200; padding: 6px; border: 1px solid rgba(232, 197, 126, .55); border-radius: 12px; }
.film-on .film-poster img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
.film-on .film-ctrl { display: flex; }
@media (min-width: 900px) {
  .film-on .film-a1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-content: center; align-items: center; padding: 0 max(7vw, 16px); }
  .film-on .film-copy { justify-items: start; text-align: left; padding: 0; }
  .film-on .film-copy h1, .film-on .film-brand, .film-on .film-en, .film-on .film-kicker { text-indent: 0; }
  .film-on .film-ctas { justify-content: flex-start; }
  .film-on .film-whale { width: min(100%, 720px); margin-bottom: 0; align-self: end; margin-bottom: 14svh; }
  .film-on .film-station { padding-top: 26svh; padding-left: max(8vw, 16px); }
  .film-on .film-a2 { grid-template-columns: auto minmax(0, 640px); align-items: center; align-content: center; gap: 40px; padding-top: 0; }
  .film-on .film-poster { width: min(24vw, 46svh, 340px); }
  .film-glass { padding: 32px; }
}

/* 開場：金鯨線稿一筆一筆亮起（裝飾，1.6 秒）；字和主按鈕從第 0 秒就在，進場 ≤500ms */
.film-on .film-whale path { stroke-dasharray: 1; animation: film-draw 1.6s cubic-bezier(.6, 0, .2, 1) calc(var(--k) * 60ms) both; }
.film-on .film-copy > * { animation: film-rise .3s ease-out both; }
.film-on .film-copy > :nth-child(2) { animation-delay: .06s; }
.film-on .film-copy > :nth-child(3) { animation-delay: .12s; }
.film-on .film-copy > :nth-child(4) { animation-delay: .16s; }
.film-on .film-copy > .film-ctas { animation-delay: 0s; }
@keyframes film-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes film-rise { from { opacity: 0; transform: translateY(8px); } }

/* 霓虹燈管點亮（二期）：2–3 次短閃再穩定，和招募影片同一套 */
.film-a3.lit .film-neon { animation: film-ignite .9s steps(1, end) both; box-shadow: 0 0 6px #ff5263, 0 0 18px rgba(255, 82, 99, .55); }
.film-a3.lit .film-no { animation: film-ignite .9s steps(1, end) .15s both; text-shadow: 0 0 8px rgba(72, 168, 255, .8), 0 0 22px rgba(72, 168, 255, .45); }
@keyframes film-ignite { 0% { opacity: .15; } 8% { opacity: 1; } 14% { opacity: .2; } 22% { opacity: 1; } 30% { opacity: .35; } 38%, 100% { opacity: 1; } }