/* =========================================================
   CodeChaps — Wearable App Development page
   Page-specific styles (smartwatch + phone hero). Shared
   styles live in codechaps-motion.css
   ========================================================= */
.hero-visual{min-height:560px;align-items:center}
.wear-wrap{position:relative;width:420px;height:540px}
.js .wear-wrap{opacity:0;transform:translateY(40px) scale(.96)}
.js.loaded .wear-wrap{opacity:1;transform:none;transition:opacity 1s var(--ease) .35s,transform 1.2s var(--ease) .35s}

/* ---- smartwatch ---- */
.watch{position:absolute;left:10px;top:50%;width:250px;height:470px;margin:-235px 0 0 0;animation:floatY 7s ease-in-out infinite}
.strap{position:absolute;left:50%;width:150px;margin-left:-75px;height:150px;background:linear-gradient(90deg,#111827,#1F2937 50%,#111827);border-radius:30px}
.strap--top{top:0;border-radius:30px 30px 12px 12px}
.strap--bot{bottom:0;border-radius:12px 12px 30px 30px}
.strap i{position:absolute;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#0B0F17}
.strap--bot i:nth-child(1){top:46px}.strap--bot i:nth-child(2){top:72px}.strap--bot i:nth-child(3){top:98px}
.case-body{position:absolute;left:0;top:105px;width:250px;height:260px;border-radius:72px;background:linear-gradient(145deg,#4B5563,#111827 60%);padding:12px;box-shadow:0 40px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.25)}
.crown{position:absolute;right:-10px;top:78px;width:14px;height:44px;border-radius:6px;background:linear-gradient(90deg,#374151,#9CA3AF);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.crown::after{content:"";position:absolute;left:2px;right:2px;top:5px;bottom:5px;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 2px,transparent 2px 4px);border-radius:4px}
.btn-side{position:absolute;right:-6px;top:140px;width:8px;height:40px;border-radius:4px;background:#6B7280}
.face{position:relative;width:100%;height:100%;border-radius:62px;background:#000;overflow:hidden;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.face-time{position:absolute;top:22px;right:34px;font-size:13px;font-weight:700;color:#E5E7EB}
.face-ring{position:relative;width:132px;height:132px}
.face-ring svg{width:132px;height:132px;transform:rotate(-90deg)}
.face-ring circle{fill:none;stroke-width:10;stroke-linecap:round}
.face-ring .bg{stroke:rgba(239,68,68,.18)}
.face-ring .fg{stroke:#EF4444;stroke-dasharray:100;stroke-dashoffset:100}
.js.loaded .face-ring .fg{animation:ringTo 2s var(--ease) .9s forwards}
@keyframes ringTo{to{stroke-dashoffset:28}}
.face-ring .bg2{stroke:rgba(59,130,246,.18)}
.face-ring .fg2{stroke:#3B82F6;stroke-dasharray:100;stroke-dashoffset:100}
.js.loaded .face-ring .fg2{animation:ringTo2 2s var(--ease) 1.15s forwards}
@keyframes ringTo2{to{stroke-dashoffset:42}}
.face-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.face-mid .heart{width:22px;height:22px;color:#EF4444;animation:beat 1s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}45%{transform:scale(1.15)}}
.face-mid b{font-family:var(--display);font-weight:900;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.face-mid small{font-size:10px;color:#9CA3AF;letter-spacing:.12em}
.face-ecg{width:150px;height:28px;margin-top:2px}
.face-ecg path{fill:none;stroke:#22C55E;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:70 130;animation:ecg 2s linear infinite}
@keyframes ecg{from{stroke-dashoffset:200}to{stroke-dashoffset:0}}
.face-row{display:flex;gap:14px;font-size:11px;color:#D1D5DB}
.face-row span{display:flex;align-items:center;gap:4px}
.face-row i{width:7px;height:7px;border-radius:50%;display:block}

/* ---- companion phone (behind watch) ---- */
.mini-phone{position:absolute;right:-40px;top:70px;width:170px;height:330px;border-radius:30px;background:#05070B;padding:8px;box-shadow:0 30px 60px rgba(0,0,0,.5),inset 0 0 0 1px #263244;transform:rotate(8deg);opacity:.95;animation:floatY 8s ease-in-out infinite reverse}
.mini-screen{width:100%;height:100%;border-radius:23px;background:#0D1320;padding:16px 12px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.mini-screen small{font-size:9px;color:#94A3B8}
.mini-screen b{font-size:12px}
.mini-card{background:#141C2D;border-radius:12px;padding:8px}
.mini-bars{display:flex;align-items:flex-end;gap:3px;height:40px;margin-top:6px}
.mini-bars i{flex:1;border-radius:2px;background:#3B82F6;height:var(--h);transform-origin:bottom;transform:scaleY(.15)}
.js.loaded .mini-bars i{animation:barUp 1s var(--ease) forwards;animation-delay:calc(1s + var(--i)*.07s)}
@keyframes barUp{to{transform:scaleY(1)}}
.sync-line{position:absolute;left:262px;top:250px;width:44px;height:2px;background:repeating-linear-gradient(90deg,var(--blue-soft) 0 6px,transparent 6px 12px);background-size:24px 2px;animation:dash 1s linear infinite;opacity:.8;transform:rotate(-12deg);transform-origin:left}
@keyframes dash{to{background-position:24px 0}}

.float--1{right:-120px;top:10px}
.float--2{right:-90px;top:auto;bottom:0}
.float--3{left:-175px;top:auto;bottom:70px}
@media (max-width:1180px) and (min-width:961px){.float--1{right:-40px}.float--2{right:-20px}.float--3{left:-60px}}
@media (max-width:960px){.mini-phone,.sync-line{display:none}.wear-wrap{width:270px;height:500px}}
@media (max-width:420px){.wear-wrap{transform:scale(.9)}}
@media (prefers-reduced-motion:reduce){.face-ring .fg{stroke-dashoffset:28}.face-ring .fg2{stroke-dashoffset:42}.mini-bars i{transform:none}}