/* ══════════════════════════════════════════════════════
   히어로 폰 데모 — 움직이는 수영장 배경 + 폰 목업 안에서 실제 앱 녹화 영상 재생
   영상 구간·슬로건 동기화는 hero-demo.js.
   ══════════════════════════════════════════════════════ */

/* ── 움직이는 물 배경 (레퍼런스의 배경 영상 자리) ── */
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-bg i{position:absolute;inset:-10%;display:block}
.hero-bg .tex{background:url(img/wave-tex.webp) 0 0/520px repeat;animation:hb-drift 60s linear infinite}
@keyframes hb-drift{to{background-position:520px 260px}}
.hero.paused .hero-bg i{animation-play-state:paused}

/* ── 슬로건 줄 하이라이트 (hero-demo.js 타임라인 — 즉시 전환이라 '드르륵' 끊어지는 느낌) ── */
.hero.live h1 em{color:var(--sand)}
.hero.live[data-step="0"] .ln[data-i="0"],
.hero.live[data-step="1"] .ln[data-i="1"],
.hero.live[data-step="2"] .ln[data-i="2"],
.hero.live[data-step="all"] .ln{color:var(--sun)}

.hero > .wrap{padding-top:76px;padding-bottom:64px}
.pause{position:absolute;right:var(--gut);bottom:22px;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:var(--sand);display:grid;place-items:center}
.pause span{width:12px;height:14px;border-left:4px solid var(--ink);border-right:4px solid var(--ink)}
.pause[aria-pressed="true"] span{width:0;height:0;border:0;border-left:13px solid var(--ink);border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}

/* ── 폰 ── */
.demo{display:flex;flex-direction:column;align-items:center}
.phone{--pw:280px;width:calc(var(--pw) + 20px);padding:10px;border-radius:50px;background:#0B132B;
  box-shadow:0 0 0 2px rgba(245,242,235,.18),0 40px 80px -30px rgba(0,0,0,.7),inset 0 0 0 2px #222c4d;transform:rotate(2deg)}
.screen{position:relative;width:var(--pw);height:calc(var(--pw) * 844 / 390);border-radius:40px;overflow:hidden;background:#A9E6EE}
.screen video{display:block;width:100%;height:100%;object-fit:cover}
/* 스킨(skin.js): 테마·기본 두 영상을 겹쳐 같이 재생 — 보이는 쪽만 바꾼다 */
.screen video[data-v]{position:absolute;inset:0}
.screen[data-skin="themed"] video[data-v="classic"],.screen[data-skin="classic"] video[data-v="themed"]{visibility:hidden}
.skin{display:inline-flex;padding:4px;gap:4px;border-radius:999px;background:rgba(11,19,43,.08);border:1.5px solid rgba(11,19,43,.16)}
.skin button{font:700 13px var(--display);letter-spacing:.04em;cursor:pointer;border:0;border-radius:999px;padding:8px 18px;
  background:transparent;color:inherit;opacity:.72;transition:background .15s,color .15s,opacity .15s}
.skin button:hover{opacity:1}
.skin button[aria-pressed="true"]{background:var(--sun);color:var(--ink);opacity:1}
.skin button:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.demo .skin{margin-top:22px;color:var(--sand);background:rgba(11,19,43,.35);border-color:rgba(245,242,235,.28);backdrop-filter:blur(6px)}

@media (max-width:860px){
  .demo{margin-top:12px}
  .phone{transform:none}
}
@media (max-width:380px){
  .phone{--pw:250px}
}
@media (prefers-reduced-motion:reduce){
  .hero-bg i{animation:none}
}