/* ============================================================
   모션 — 중계 화면 전환 · 타일 확장 · 팀 입장 · 승부예측 페이스오프
   전부 transform/opacity/clip-path만 써서 폰에서도 부드럽게
   ============================================================ */

/* ---------- 중계 와이프 (화면 전환) ---------- */
.tx-wipe { position: fixed; inset: 0; z-index: 880; overflow: hidden; pointer-events: all; }
.tx-wipe i {
  position: absolute; top: -10vh; bottom: -10vh; left: -30vw; width: 160vw;
  transform: translateX(-190vw) skewX(-12deg);
}
.tx-wipe .w1 { background: var(--hot); }
.tx-wipe .w2 { background: var(--team); }
.tx-wipe .w3 { background: var(--ink); display: grid; place-items: center; }
.tx-wipe .w3 div { transform: skewX(12deg); display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; opacity: 0; }
.tx-wipe .w3 .num { font-size: clamp(56px, 12vmin, 120px); }
.tx-wipe .w3 .label { color: var(--hot); font-size: 13px; }

/* ---------- 타일 확장 / 되돌아가기 ---------- */
.tx-expand { position: fixed; inset: 0; z-index: 880; pointer-events: all; }
.tx-expand .tx-photo { position: absolute; inset: 0; background-color: var(--panel-2); background-size: cover; background-position: center; }
.tx-expand .tx-shade { position: absolute; inset: 0; background: var(--paper); opacity: 0; }
.tx-expand .tx-name {
  position: absolute; background: var(--ink); color: #fff; white-space: nowrap; transform-origin: top left;
  padding: 16px 64px 18px 24px; clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 100%, 0 100%);
}

/* ---------- 스플래시: 글자 하나씩 ---------- */
.splash-logo .num { display: inline-flex; }
.splash-logo .num span { display: inline-block; animation: letter-in 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.splash-logo .num span:nth-child(2) { animation-delay: 0.08s; }
.splash-logo .num span:nth-child(3) { animation-delay: 0.16s; }
.splash-logo .num span:nth-child(4) { animation-delay: 0.24s; }
@keyframes letter-in { from { transform: translateY(60%) skewX(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- 팀 입장 연출 (로그인 직후) ---------- */
.tx-enter { position: fixed; inset: 0; z-index: 890; overflow: hidden; pointer-events: all; }
.tx-enter .en-bg { position: absolute; inset: 0; background: var(--team); }
.tx-enter .en-bg2 { position: absolute; inset: 0; background: var(--team-deep); clip-path: polygon(62% 0, 100% 0, 100% 100%, 42% 100%); }
.tx-enter .en-marq { position: absolute; inset: -10% -20%; display: flex; flex-direction: column; justify-content: center; transform: rotate(-12deg); opacity: 0; }
.tx-enter .en-marq div {
  white-space: nowrap; font: 800 italic 22vmin/0.95 var(--font-num); color: transparent;
  -webkit-text-stroke: 3px #fff; animation: en-drift 7s linear infinite;
}
.tx-enter .en-marq div:nth-child(2) { animation-direction: reverse; }
@keyframes en-drift { from { transform: translateX(0); } to { transform: translateX(-30%); } }
.tx-enter .en-strips { position: absolute; left: 6vw; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.tx-enter .en-s0 { background: var(--hot); color: var(--ink); padding: 6px 22px 6px 14px; font-size: 16px; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.tx-enter .en-s1 { background: var(--ink); color: #fff; padding: 18px 80px 20px 30px; font: 400 clamp(52px, 12vmin, 120px)/1 var(--font-display); clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 0 100%); }
.tx-enter .en-s2 { margin-left: 30px; background: #fff; color: var(--ink); padding: 12px 44px 12px 24px; font-weight: 800; font-size: clamp(17px, 2.8vmin, 26px); clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%); }
.tx-enter .en-big { position: absolute; right: 5vw; bottom: 4vh; font-size: clamp(100px, 28vmin, 300px); color: rgba(255, 255, 255, 0.9); }
html[data-team="3"] .tx-enter .en-big { color: rgba(11, 13, 18, 0.85); }

/* 홈 등장 (입장 직후 · 앱 처음 열 때) */
.home.pre-enter .home-top, .home.pre-enter .next-bar, .home.pre-enter .tile { opacity: 0; }
.home.is-entering .home-top { animation: from-top 0.45s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.home.is-entering .next-bar { animation: wipe-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) 0.1s both; }
.home.is-entering .tile { animation: tile-in 0.55s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
.home.is-entering .tile:nth-child(1) { animation-delay: 0.15s; }
.home.is-entering .tile:nth-child(2) { animation-delay: 0.22s; }
.home.is-entering .tile:nth-child(3) { animation-delay: 0.29s; }
.home.is-entering .tile:nth-child(4) { animation-delay: 0.36s; }
.home.is-entering .tile .tile-name { animation: wipe-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1) both; animation-delay: inherit; }
.home.is-entering .tile .tile-info { animation: pop-in 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) 0.6s both; }
@keyframes from-top { from { transform: translateY(-120%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes wipe-in { from { clip-path: inset(0 100% 0 0); opacity: 1; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes tile-in { from { transform: translateY(40px) scale(0.92); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop-in { from { transform: scale(0); } to { transform: none; } }

/* ---------- 승부예측 페이스오프 ---------- */
.vs-card .vs-home { position: absolute; inset: 0; background: var(--home-a); }
.vs-card.is-intro { background: var(--ink); animation: vs-shake 0.34s calc(var(--d, 0s) + 0.4s) both; }
.vs-card.is-intro .vs-home { animation: slam-l 0.42s cubic-bezier(0.6, 0, 0.85, 0.25) var(--d, 0s) both; }
.vs-card.is-intro .vs-away { animation: slam-r 0.42s cubic-bezier(0.6, 0, 0.85, 0.25) var(--d, 0s) both; }
.vs-card.is-intro .vs-seam { animation: seam-hit 0.5s calc(var(--d, 0s) + 0.38s) both; }
.vs-card.is-intro::after {
  content: ""; position: absolute; inset: 0; z-index: 5; background: #fff; pointer-events: none; opacity: 0;
  animation: impact 0.45s calc(var(--d, 0s) + 0.38s);
}
.vs-card.is-intro .vs-badge { animation: stamp 0.5s cubic-bezier(0.2, 1.7, 0.45, 1) calc(var(--d, 0s) + 0.42s) both; }
.vs-card.is-intro .vs-side { animation: in-l 0.42s cubic-bezier(0.2, 0.9, 0.3, 1) calc(var(--d, 0s) + 0.55s) both; }
.vs-card.is-intro .vs-side.right { animation-name: in-r; }
.vs-card.is-intro .vs-odd { animation: odd-pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) calc(var(--d, 0s) + 0.68s) both; }
.vs-card.is-intro .vs-bar i { transform-origin: left; animation: grow-x 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) calc(var(--d, 0s) + 0.8s) both; }
.vs-card.is-intro .vs-foot { animation: foot-up 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) calc(var(--d, 0s) + 0.6s) both; }
@keyframes slam-l { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes slam-r { from { transform: translateX(100%); } to { transform: none; } }
@keyframes seam-hit { 0% { opacity: 0; background: #fff; } 30% { opacity: 1; background: #fff; } 100% { opacity: 1; background: var(--ink); } }
@keyframes impact { 0% { opacity: 0.75; } 100% { opacity: 0; } }
@keyframes vs-shake {
  0%, 100% { transform: none; } 15% { transform: translate(-9px, 2px) rotate(-0.4deg); }
  35% { transform: translate(8px, -2px) rotate(0.3deg); } 55% { transform: translate(-5px, 1px); } 75% { transform: translate(3px, 0); }
}
@keyframes stamp { 0% { transform: scale(3.2) rotate(-16deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes in-l { from { transform: translateX(-60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes in-r { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes odd-pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes foot-up { from { transform: translateY(100%); } }

/* 선택 확정: 깃발 · 배당 흔들림 · LOCKED IN 도장 */
.vs-hit.is-locking .pick-flag { animation: flag-pop 0.5s cubic-bezier(0.2, 1.8, 0.4, 1) both; }
@keyframes flag-pop { from { transform: translateX(-50%) scale(0) rotate(-10deg); } to { transform: translateX(-50%); } }
.vs-odd.is-lock { animation: odd-lock 0.6s ease-out; }
@keyframes odd-lock {
  0%, 100% { transform: none; text-shadow: none; } 10% { transform: translateX(-6px) rotate(-3deg); }
  25% { transform: translateX(6px) rotate(3deg); } 40% { transform: translateX(-4px); text-shadow: 0 0 24px var(--hot); }
  60% { transform: scale(1.12); text-shadow: 0 0 30px var(--hot); }
}
.lock-stamp {
  position: absolute; z-index: 6; top: 45%; transform: translate(-50%, -50%) rotate(-8deg); pointer-events: none;
  border: 5px solid var(--hot); color: var(--hot); background: rgba(11, 13, 18, 0.74); padding: 10px 24px; text-align: center; white-space: nowrap;
  font: 800 italic clamp(26px, 5vmin, 54px)/1 var(--font-num); letter-spacing: 0.04em;
  animation: stamp-in 0.5s cubic-bezier(0.2, 1.8, 0.4, 1) both, stamp-out 0.4s 1.3s ease-in forwards;
}
.lock-stamp small { display: block; font: 800 13px var(--font-body); letter-spacing: 0; color: #fff; margin-top: 6px; }
@keyframes stamp-in { from { transform: translate(-50%, -50%) rotate(-24deg) scale(2.6); opacity: 0; } to { transform: translate(-50%, -50%) rotate(-8deg); opacity: 1; } }
@keyframes stamp-out { to { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(0.9); } }
.vs-odd.is-roll { animation: roll-glow 0.7s ease-out; }
@keyframes roll-glow { 30% { text-shadow: 0 0 28px var(--hot); color: var(--hot); } }

/* ---------- 종이 조각 ---------- */
.fx-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 950; }



/* 전환 덮개가 걷히기 전까지 예측 카드를 숨겨둠 (걷히는 순간 페이스오프) */
.pr-wrap.is-armed .pr-open .vs-card { visibility: hidden; }

/* ============================================================
   추가 모션 (A~P)
   ============================================================ */

/* A · 떠오르는 숫자 (+1, +50) */
.fx-float { position: fixed; z-index: 960; pointer-events: none; font-size: 28px; transform: translate(-50%, -50%); text-shadow: 0 2px 0 #fff, 0 -1px 0 #fff; animation: fx-float 0.85s ease-out forwards; }
@keyframes fx-float { 0% { transform: translate(-50%, -50%) scale(0.6); opacity: 1; } 25% { transform: translate(-50%, -80%) scale(1.3); opacity: 1; } 65% { opacity: 1; } 100% { transform: translate(-50%, -150%) scale(1.1); opacity: 0; } }

/* B · 판 우승 */
.bc-win { position: fixed; inset: 0; z-index: 900; pointer-events: none; overflow: hidden; }
.bc-flag { position: absolute; top: -10%; bottom: -10%; left: 0; width: 60vw; background: repeating-conic-gradient(var(--ink) 0 25%, #fff 0 50%) 0 0 / 34px 34px; opacity: 0.95; }
.bc-strip { position: absolute; left: 0; top: 42%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.bc-strip .a { background: var(--hot); color: var(--ink); padding: 6px 22px 6px 16px; font-size: 15px; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.bc-strip .b { background: var(--c); color: #fff; padding: 18px 90px 20px 26px; font: 400 clamp(40px, 9vmin, 88px)/1 var(--font-display); clip-path: polygon(0 0, 100% 0, calc(100% - 36px) 100%, 0 100%); }

/* C · 속도 이벤트 */
.bc-speed { position: fixed; inset: 0; z-index: 900; pointer-events: none; }
.bc-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.bc-bolt { position: absolute; left: 50%; top: 45%; font-size: clamp(90px, 22vmin, 200px); transform: translate(-50%, -50%) scale(0); }
.bc-sstrip { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); background: var(--hot); color: var(--ink); padding: 14px 44px; font-weight: 800; font-size: clamp(16px, 2.6vmin, 24px); white-space: nowrap; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.track.has-event::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 60px, rgba(255, 225, 77, 0.35) 60px 63px);
  animation: speed-lines 0.35s linear infinite;
}
@keyframes speed-lines { to { background-position: -63px 0; } }

/* F · 경기 결과 속보 */
.bc-break { position: fixed; inset: 0; z-index: 900; pointer-events: none; }
.bc-flood { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); }
.bc-tag { position: absolute; left: 24px; bottom: 112px; background: var(--hot); color: var(--ink); padding: 5px 18px 5px 12px; font-size: 13px; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.bc-lower { position: absolute; left: 24px; right: 24px; bottom: 40px; display: flex; align-items: stretch; filter: drop-shadow(0 12px 28px rgba(11, 13, 18, 0.3)); }
.bc-final { background: var(--live); color: #fff; padding: 0 22px; display: grid; place-items: center; font-size: 18px; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.bc-card { flex: 1; margin-left: -10px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 12px 32px; clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%); }
.bc-card b { font: 400 clamp(22px, 3.6vmin, 36px) var(--font-display); }
.bc-d { display: inline-block; min-width: 26px; text-align: center; font-size: clamp(34px, 6vmin, 56px); color: var(--hot); }

/* G · 적중 잭팟 */
.bc-jack { position: fixed; inset: 0; z-index: 910; pointer-events: none; display: grid; place-items: center; background: rgba(11, 13, 18, 0.35); overflow: hidden; }
.bc-jbox { display: flex; flex-direction: column; align-items: center; gap: 8px; background: #fff; padding: 26px 48px 20px; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.bc-stamp { border: 5px solid var(--win); color: var(--win); padding: 6px 26px; font: 800 italic 34px var(--font-num); }
.bc-amt { font-size: clamp(56px, 12vmin, 96px); text-shadow: 0 0 26px var(--hot); }
.bc-jbox small { color: var(--ink-3); font-weight: 700; }
.bc-coin { position: absolute; top: 0; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6b0, var(--hot) 45%, #d4a000); }

/* I · 공감 이모지 */
.fx-emo { position: fixed; z-index: 960; pointer-events: none; font-size: 26px; animation: fx-emo 1.1s ease-out forwards; }
@keyframes fx-emo { from { transform: translate(0, 0) scale(0.5); opacity: 1; } to { transform: translate(var(--dx), -150px) scale(1.2) rotate(var(--rot)); opacity: 0; } }
.reactions button.is-bump { animation: react-bump 0.3s; }
@keyframes react-bump { 50% { transform: scale(1.25); } }

/* J · 올리기 성공 카드 */
.fx-flycard { position: fixed; left: 50%; top: 45%; z-index: 960; width: 220px; height: 150px; border-radius: var(--r-lg); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 18px; box-shadow: var(--shadow); pointer-events: none; }

/* K · 줄무늬 스켈레톤 */
.skel { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.skel i { display: block; border-radius: var(--r-md); background: repeating-linear-gradient(-45deg, var(--panel-2) 0 14px, #eceef1 14px 28px); background-size: 200% 100%; animation: skel 1s linear infinite; }
@keyframes skel { to { background-position: -39.6px 0; } }

/* L · AI 생각 중 */
.think { display: flex; align-items: center; gap: 12px; padding: 14px 4px; color: var(--ink-2); font-weight: 700; font-size: 14px; }
.think-bars { display: inline-flex; gap: 5px; }
.think-bars i { width: 10px; height: 24px; transform: skewX(-12deg); animation: think 0.8s ease-in-out infinite; }
.think-bars i:nth-child(1) { background: var(--hot); }
.think-bars i:nth-child(2) { background: var(--team); animation-delay: 0.12s; }
.think-bars i:nth-child(3) { background: var(--ink); animation-delay: 0.24s; }
@keyframes think { 50% { transform: skewX(-12deg) scaleY(0.4); } }

/* M · 칩 선택: 검정이 사선으로 차오름 + 내용 슬라이드 */
.chip { background-image: linear-gradient(105deg, var(--ink) 50%, transparent 50%); background-size: 260% 100%; background-position: 100% 0; background-repeat: no-repeat; transition: background-position 0.35s cubic-bezier(0.2, 0.9, 0.3, 1), color 0.2s; }
.chip.is-on { background-color: var(--panel); background-image: linear-gradient(105deg, var(--ink) 50%, transparent 50%); background-size: 260% 100%; background-repeat: no-repeat; background-position: 0 0; color: #fff; }
.chip.team, .chip.hot, .chip.win, .chip.hit, .chip.miss, .chip.is-wait, .chip.private, .chip.danger, .chip.event { background-image: none; }
.slide-in { animation: slide-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.slide-in.from-left { animation-name: slide-in-l; }
@keyframes slide-in { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slide-in-l { from { transform: translateX(-28px); opacity: 0; } to { transform: none; opacity: 1; } }

/* N · 마감 임박 */
.vs-foot .close.is-urgent { background: var(--live); color: #fff; padding: 2px 12px; margin: -2px -12px; animation: urgent 1s ease-in-out infinite; }
.next-bar .nb-main.is-urgent { background: var(--live); animation: urgent 1s ease-in-out infinite; }
@keyframes urgent { 50% { filter: brightness(1.2); transform: scale(1.02); } }
.tick { display: inline-block; animation: tick 0.3s ease-out; }
@keyframes tick { from { transform: translateY(-40%); opacity: 0.2; } }

/* O · 연결 끊김 */
.net-bar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 1100; padding: max(10px, env(safe-area-inset-top)) 16px 10px;
  color: #fff; font-weight: 800; font-size: 14px; text-align: center;
  background: var(--live) repeating-linear-gradient(45deg, transparent 0 10px, rgba(255, 255, 255, 0.12) 10px 20px);
  transform: translateY(-100%); transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1), background-color 0.3s;
}
.net-bar.is-on { transform: none; animation: net-move 1s linear infinite; }
.net-bar.is-ok { background-color: var(--win); }
@keyframes net-move { to { background-position: 28px 0; } }

/* P · 버튼 눌림 · 물결 · 뒤로 화살표 */
.btn:active { transform: scale(0.96, 0.92) skewX(-3deg); }
.fx-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.45); transform: scale(0); pointer-events: none; animation: ripple 0.5s ease-out forwards; }
@keyframes ripple { to { transform: scale(2.4); opacity: 0; } }
.back { transition: transform 0.15s; }
.back:hover { animation: back-nudge 0.5s ease-in-out; }
.back:active { transform: translateX(-4px) scale(0.94); }
@keyframes back-nudge { 40% { transform: translateX(-6px); } }

/* D · 순위 상승 배지 */
.r-up { margin-left: 6px; background: var(--win); color: #fff; font: 800 11px var(--font-body); padding: 3px 10px; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); animation: pop-in 0.45s cubic-bezier(0.2, 1.7, 0.4, 1) 0.4s both; }

/* E · 고양이 지도 물결 */
.cat-cells.is-armed i.on { transform: scale(0); }
.cat-cells.is-wave i.on { animation: cell-in 0.35s cubic-bezier(0.2, 1.6, 0.4, 1) both; animation-delay: var(--dl, 0ms); }
@keyframes cell-in { from { transform: scale(0); } to { transform: none; } }

/* H · 그래프 그리기 */
.line-chart.is-drawing .lc-line { animation: lc-draw 1s cubic-bezier(0.4, 0, 0.2, 1) both; }
.line-chart.is-drawing .lc-area { animation: lc-fade 1.2s both; }
.line-chart.is-drawing .lc-dot { transform-box: fill-box; transform-origin: center; animation: lc-dot 1.3s both; }
.line-chart.is-armed .lc-line { stroke-dashoffset: var(--len); }
.line-chart.is-armed .lc-area, .line-chart.is-armed .lc-dot { opacity: 0; }
@keyframes lc-draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@keyframes lc-fade { 0%, 60% { opacity: 0; } 100% { opacity: 0.14; } }
@keyframes lc-dot { 0%, 80% { transform: scale(0); opacity: 1; } 90% { transform: scale(1.6); opacity: 1; } 100% { transform: none; opacity: 1; } }

/* ---------- 동작 줄이기 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; }
}

/* 피드 로딩 스켈레톤은 한 줄 전체 */
.feed .skel { grid-column: 1 / -1; }