/* =========================================================
   CodeChaps — Entertainment App Development page
   Page-specific styles (streaming TV + music phone hero).
   Shared styles live in codechaps-motion.css
   ========================================================= */
.hero-visual{min-height:520px;align-items:center}
.en-wrap{position:relative;width:540px;height:480px}
.js .en-wrap{opacity:0;transform:translateY(40px) scale(.96)}
.js.loaded .en-wrap{opacity:1;transform:none;transition:opacity 1s var(--ease) .35s,transform 1.2s var(--ease) .35s}
.en-wrap .float{z-index:4}

/* ---- streaming screen ---- */
.tv{position:absolute;left:0;top:20px;width:500px;height:340px;border-radius:22px;background:#05070B;padding:10px;box-shadow:0 50px 90px rgba(0,0,0,.55),inset 0 0 0 1px #263244;animation:floatY 8s ease-in-out infinite;z-index:1}
.tv-screen{position:relative;width:100%;height:100%;border-radius:14px;overflow:hidden;background:#0B0F1A;color:#fff;display:flex;flex-direction:column}
.player{position:relative;height:190px;flex:none;overflow:hidden;background:linear-gradient(180deg,#1E1B4B 0%,#312E81 45%,#7C2D12 100%)}
.scene{position:absolute;inset:0}
.scene .sun{position:absolute;left:58%;top:48%;width:90px;height:90px;margin:-45px;border-radius:50%;background:radial-gradient(circle,#FDE68A,#F59E0B 55%,rgba(245,158,11,0) 72%);animation:sunrise 9s ease-in-out infinite}
@keyframes sunrise{0%,100%{transform:translateY(14px)}50%{transform:translateY(-6px)}}
.scene .hill{position:absolute;left:-10%;right:-10%;bottom:-40px;height:110px;border-radius:50% 50% 0 0;background:#0F172A}
.scene .hill.h2{left:40%;right:-30%;bottom:-56px;height:120px;background:#111827}
.scene .bird{position:absolute;top:30%;left:-20px;width:14px;height:6px;border-top:2px solid #0F172A;border-radius:50% 50% 0 0;animation:fly 10s linear infinite}
.scene .bird.b2{top:24%;animation-delay:-4s;transform:scale(.8)}
@keyframes fly{to{left:110%}}
.player-top{position:absolute;left:14px;right:14px;top:12px;display:flex;justify-content:space-between;align-items:center;font-size:10px;z-index:1}
.player-top .ptag{background:rgba(0,0,0,.45);backdrop-filter:blur(4px);padding:3px 8px;border-radius:999px;font-weight:700;letter-spacing:.06em}
.player-top .ptag.live{background:#EF4444;display:flex;align-items:center;gap:5px}
.player-top .ptag.live i{width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1.2s ease-in-out infinite}
.play{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:1;box-shadow:0 0 0 0 rgba(255,255,255,.35);animation:ping 2.4s ease-out infinite}
.play::after{content:"";margin-left:4px;border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
@keyframes ping{to{box-shadow:0 0 0 18px rgba(255,255,255,0)}}
.subs{position:absolute;left:0;right:0;bottom:30px;text-align:center;font-size:10.5px;z-index:1}
.subs span{background:rgba(0,0,0,.55);padding:2px 8px;border-radius:4px}
.scrub{position:absolute;left:14px;right:14px;bottom:12px;display:flex;align-items:center;gap:8px;font-size:9px;color:#CBD5E1;z-index:1;font-variant-numeric:tabular-nums}
.scrub .track{position:relative;flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.2)}
.scrub .track i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:#EF4444;width:0}
.scrub .track i::after{content:"";position:absolute;right:-5px;top:-3px;width:10px;height:10px;border-radius:50%;background:#fff}
.scrub .track b{position:absolute;left:0;top:0;bottom:0;width:62%;border-radius:4px;background:rgba(255,255,255,.3)}
.js.loaded .scrub .track i{animation:playhead 16s linear infinite}
@keyframes playhead{from{width:18%}to{width:58%}}
.rail{padding:10px 14px 0;display:flex;flex-direction:column;gap:7px;min-height:0}
.rail-head{display:flex;justify-content:space-between;font-size:10.5px}
.rail-head b{font-weight:700}
.rail-head small{color:#94A3B8;font-size:9.5px}
.rail-mask{overflow:hidden;margin-right:-14px;-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
.rail-track{display:flex;gap:8px;width:max-content;animation:rail 22s linear infinite}
@keyframes rail{to{transform:translateX(-50%)}}
.tile{position:relative;width:82px;height:100px;border-radius:9px;flex:none;overflow:hidden;background:var(--g)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.75))}
.tile span{position:absolute;left:7px;bottom:16px;right:6px;font-size:9px;font-weight:700;line-height:1.15;z-index:1}
.tile em{position:absolute;left:7px;right:7px;bottom:7px;height:3px;border-radius:3px;background:rgba(255,255,255,.25);z-index:1;font-style:normal}
.tile em::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p);border-radius:3px;background:#EF4444}
.tile .new{position:absolute;top:6px;left:6px;font-size:7.5px;font-weight:700;background:#F59E0B;color:#0B0F1A;padding:1px 5px;border-radius:4px;z-index:1}

/* ---- music phone ---- */
.music{position:absolute;right:-10px;bottom:0;width:180px;height:350px;border-radius:32px;background:#05070B;padding:8px;box-shadow:0 30px 60px rgba(0,0,0,.55),inset 0 0 0 1px #263244;animation:floatY 7s ease-in-out infinite reverse;z-index:2}
.music-screen{width:100%;height:100%;border-radius:25px;background:linear-gradient(180deg,#3B0764,#111827 70%);color:#fff;padding:22px 14px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;overflow:hidden}
.music-screen>small{font-size:9px;color:#C4B5FD;letter-spacing:.12em}
.disc{position:relative;width:118px;height:118px;border-radius:50%;background:repeating-radial-gradient(circle,#111 0 2px,#1F1F1F 2px 4px);box-shadow:0 14px 30px rgba(0,0,0,.5);animation:spin 6s linear infinite}
.disc::before{content:"";position:absolute;inset:34px;border-radius:50%;background:conic-gradient(from 30deg,#F472B6,#8B5CF6,#3B82F6,#F59E0B,#F472B6)}
.disc::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:#111}
@keyframes spin{to{transform:rotate(360deg)}}
.song{text-align:center}
.song b{display:block;font-size:12.5px}
.song small{font-size:10px;color:#A5B4FC}
.wave{display:flex;align-items:center;gap:2px;height:30px;width:100%;justify-content:center}
.wave i{width:3px;border-radius:2px;background:linear-gradient(180deg,#F472B6,#8B5CF6);height:var(--h);animation:eqw 1.1s ease-in-out infinite alternate;animation-delay:var(--d);transform-origin:center}
@keyframes eqw{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.ctrls{display:flex;align-items:center;gap:16px;margin-top:auto}
.ctrls span{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent}
.ctrls .prev{border-right:9px solid #CBD5E1}
.ctrls .next{border-left:9px solid #CBD5E1}
.ctrls .pp{width:38px;height:38px;border:0;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;gap:4px}
.ctrls .pp::before,.ctrls .pp::after{content:"";width:4px;height:13px;border-radius:2px;background:#3B0764}

.float--1{right:-70px;top:-24px}
.float--2{right:150px;top:auto;bottom:-30px}
.float--3{left:-70px;top:auto;bottom:40px}
@media (max-width:1240px) and (min-width:961px){.en-wrap{transform-origin:left center;scale:.86}.float--1{right:-30px}}
@media (max-width:960px){.hero-visual{min-height:0}.en-wrap{width:100%;max-width:520px;height:auto}.tv{position:relative;top:0;width:100%;height:auto}.tv-screen{height:auto}.player{height:210px}.rail{padding-bottom:14px}.music{display:none}}
@media (max-width:560px){.player{height:170px}.tile{width:64px;height:78px}.tile span{font-size:8px}.rail{padding:8px 10px 0;gap:5px}.subs{display:none}}
@media (prefers-reduced-motion:reduce){.rail-track{animation:none}.scrub .track i{width:40%}}