/* ===== Founder's Voice — 創始人的話 影片區塊 =====
   共用於 professional.html / sentiment.html
   設計：手機外框裡的 9:16 豎屏影片，配播放/靜音/進度條控制，
   旁邊文字欄摘出影片的核心訊息。色票用頁面既有的暖色 accent，
   提供 fallback 讓兩種主題（白底/暖米）都能融合。 */

:root{
  --v-accent:#8A6E4F;
  --v-accent-deep:#5C3A22;
  --v-accent-bg:rgba(139,111,71,.08);
  --v-accent-glow:rgba(226,35,26,.18);
  --v-red:#E2231A;
  --v-line:rgba(139,111,71,.18);
  --v-card:rgba(255,255,255,.6);
  --v-card-hover:rgba(255,255,255,.9);
  --v-ease:cubic-bezier(.22,.61,.36,1);
}

/* 暖米主題（sentiment）覆蓋 */
[data-theme="warm"],.sentiment{--v-accent:#C2666B;--v-accent-deep:#5C3A22;--v-accent-bg:rgba(207,178,142,.22);--v-accent-glow:rgba(194,102,107,.22);--v-line:rgba(139,111,71,.22);--v-card:rgba(255,251,243,.85);--v-card-hover:#FFFBF3}

.voice{padding:120px 0 110px;position:relative;background:linear-gradient(180deg,transparent 0,rgba(139,111,71,.06) 50%,transparent 100%)}
.voice .wrap{max-width:1140px;margin:0 auto;padding:0 32px}
.voice .head{margin-bottom:54px;max-width:780px}
.voice .vlabel{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono,'Courier New',monospace);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--v-accent);background:var(--v-accent-bg);padding:7px 14px;border-radius:999px;margin-bottom:22px}
.voice .vlabel::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--v-red);box-shadow:0 0 0 3px rgba(226,35,26,.18)}
.voice h2{font-family:var(--display,'Songti SC','PingFang SC',serif);font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--ink);margin-bottom:18px}
.voice h2 em{font-style:italic;color:var(--v-accent-deep);font-weight:600}
.voice .lead{font-size:1.05rem;line-height:1.85;color:var(--ink-2);max-width:680px}
.voice .lead em{font-weight:600;color:var(--ink)}
.voice .stage{display:grid;grid-template-columns:300px 1fr;gap:88px;align-items:start}

/* phone frame */
.vphone{margin:0;width:300px;justify-self:center}
.vphone-frame{position:relative;width:300px;aspect-ratio:9/16;border-radius:32px;overflow:hidden;background:#0c0c0c;box-shadow:0 30px 70px -20px rgba(60,40,20,.35),0 0 0 1px rgba(255,255,255,.04) inset;isolation:isolate;transition:transform .5s var(--v-ease),box-shadow .5s var(--v-ease)}
.vphone:hover{transform:translateY(-4px);box-shadow:0 40px 80px -20px rgba(60,40,20,.45),0 0 0 1px rgba(255,255,255,.04) inset}
.vphone-frame::before{content:"";position:absolute;inset:0;border-radius:32px;padding:1px;background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 35%,rgba(139,111,71,.22));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:5}
.vphone-frame::after{content:"";position:absolute;inset:-1px;border-radius:32px;background:radial-gradient(120% 60% at 50% 0%,var(--v-accent-glow),transparent 60%);pointer-events:none;z-index:0;opacity:.9}
.vphone-video{display:block;width:100%;height:100%;object-fit:cover;background:#0c0c0c;position:relative;z-index:1}

/* REC badge (visible when playing) */
.vphone-rec{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:6px;font-family:var(--mono,'Courier New',monospace);font-size:10px;letter-spacing:.18em;color:#fff;background:rgba(0,0,0,.5);backdrop-filter:blur(10px);padding:5px 10px 5px 9px;border-radius:999px;z-index:6;opacity:0;transition:opacity .35s}
.vphone-frame.is-playing .vphone-rec{opacity:1}
.vphone-rec::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--v-red);box-shadow:0 0 8px var(--v-red);animation:recBlink 1.6s ease-in-out infinite}
@keyframes recBlink{0%,100%{opacity:1}50%{opacity:.35}}

/* mute toggle (visible when playing) */
.vphone-mute{position:absolute;top:12px;right:12px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);backdrop-filter:blur(10px);border:none;border-radius:50%;color:#fff;cursor:pointer;z-index:6;opacity:0;transition:opacity .35s,transform .2s var(--v-ease),background .25s;padding:0}
.vphone-frame.is-playing .vphone-mute{opacity:.92}
.vphone-mute:hover{transform:scale(1.08);opacity:1!important;background:rgba(0,0,0,.7)}
.vphone-mute:focus-visible{outline:2px solid #fff;outline-offset:2px}
.vphone-mute svg{width:16px;height:16px;display:block}

/* play overlay */
.vphone-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.32) 100%);border:none;cursor:pointer;z-index:4;transition:opacity .4s var(--v-ease);padding:0}
.vphone-frame.is-playing .vphone-play{opacity:0;pointer-events:none}
.vphone-play::after{content:"";width:84px;height:84px;border-radius:50%;background:#fff;box-shadow:0 20px 44px -10px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.04);display:block;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5v14l11-7z' fill='%231a1a1a'/></svg>");background-repeat:no-repeat;background-position:60% center;background-size:30px 30px;transition:transform .25s var(--v-ease)}
.vphone-play:hover::after{transform:scale(1.06)}
.vphone-play:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:32px}

/* progress bar (visible when playing) */
.vphone-progress{position:absolute;left:14px;right:14px;bottom:14px;height:3px;background:rgba(255,255,255,.2);border-radius:2px;overflow:hidden;z-index:6;opacity:0;transition:opacity .35s}
.vphone-frame.is-playing .vphone-progress{opacity:1}
.vphone-progress span{display:block;height:100%;width:0;background:#fff;border-radius:2px;transition:width .15s linear}

.vphone-cap{display:block;margin-top:16px;font-family:var(--mono,'Courier New',monospace);font-size:10px;letter-spacing:.2em;color:var(--ink-2);text-transform:uppercase;text-align:center;opacity:.7}

/* text column */
.vtext{display:flex;flex-direction:column;gap:30px;min-width:0;padding-top:6px}
.vquote{font-family:var(--display,'Songti SC','PingFang SC',serif);font-size:clamp(1.25rem,2.1vw,1.6rem);font-weight:500;line-height:1.55;color:var(--ink);letter-spacing:-.005em;padding:22px 0 22px 26px;border-left:3px solid var(--v-accent);position:relative}
.vquote em{font-style:italic;color:var(--v-accent-deep);font-weight:600}
.vpoints{display:grid;gap:14px;list-style:none;padding:0;margin:0}
.vpoints li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;padding:18px 22px;background:var(--v-card);border:1px solid var(--v-line);border-radius:14px;backdrop-filter:blur(10px);transition:all .35s var(--v-ease)}
.vpoints li:hover{background:var(--v-card-hover);transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(139,111,71,.3)}
.vpoints .n{font-family:var(--mono,'Courier New',monospace);font-size:11px;letter-spacing:.2em;color:var(--v-accent);font-weight:600;min-width:32px;padding-top:5px}
.vpoints .b{font-family:var(--display,'Songti SC','PingFang SC',serif);font-size:1.04rem;font-weight:600;color:var(--ink);margin:0 0 4px;line-height:1.3}
.vpoints .s{font-size:.92rem;line-height:1.7;color:var(--ink-2)}

/* responsive */
@media(max-width:860px){
  .voice{padding:80px 0 70px}
  .voice .wrap{padding:0 22px}
  .voice .stage{grid-template-columns:1fr;gap:46px}
  .vphone{width:240px}
  .vphone-frame{width:240px;border-radius:26px}
  .vphone-frame::before,.vphone-frame::after{border-radius:26px}
  .vphone-cap{font-size:9px}
  .vquote{padding-left:20px;font-size:1.1rem}
  .voice .head{margin-bottom:36px}
}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  .vphone-rec::before{animation:none}
  .vphone-frame,.vpoints li,.vphone-mute,.vphone-play::after{transition:none}
  .vphone:hover{transform:none}
}

/* companion reel — 較小的第二支影片（品牌短片） */
.vreel{margin-top:64px;padding-top:48px;border-top:1px solid var(--v-line);display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:center}
.vreel .vphone--sm{justify-self:start}
.vphone-frame--sm{width:220px;border-radius:28px}
.vphone-frame--sm::before,.vphone-frame--sm::after{border-radius:28px}
.vreel-text{padding-left:8px;min-width:0}
.vreel-label{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono,'Courier New',monospace);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--v-accent);background:var(--v-accent-bg);padding:6px 12px;border-radius:999px;margin-bottom:14px}
.vreel-text h3{font-family:var(--display,'Songti SC','PingFang SC',serif);font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:600;line-height:1.35;letter-spacing:-.005em;color:var(--ink);margin-bottom:12px}
.vreel-text h3 em{font-style:italic;color:var(--v-accent-deep);font-weight:600}
.vreel-text p{font-size:1rem;line-height:1.8;color:var(--ink-2);max-width:560px}
@media(max-width:860px){
  .vreel{grid-template-columns:1fr;gap:24px;justify-items:center;text-align:center;margin-top:48px;padding-top:36px}
  .vreel-text{padding-left:0}
  .vphone-frame--sm{width:200px}
  .vreel-text p{margin-left:auto;margin-right:auto}
}