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

/* ---- attendee phone ---- */
.ev-phone{position:absolute;left:30px;top:0;width:250px;height:510px;border-radius:40px;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:2}
.ev-phone::before{content:"";position:absolute;top:18px;left:50%;width:70px;height:18px;margin-left:-35px;border-radius:12px;background:#05070B;z-index:3}
.ev-screen{width:100%;height:100%;border-radius:31px;background:#F7F8FB;color:#0F172A;overflow:hidden;display:flex;flex-direction:column}
.ev-poster{position:relative;height:150px;padding:44px 16px 14px;color:#fff;background:linear-gradient(135deg,#4C1D95,#2563EB 55%,#0EA5E9);overflow:hidden;flex:none}
.ev-poster::before,.ev-poster::after{content:"";position:absolute;border-radius:50%;filter:blur(2px)}
.ev-poster::before{width:140px;height:140px;right:-40px;top:-30px;background:radial-gradient(circle,rgba(251,191,36,.75),transparent 65%);animation:spot 6s ease-in-out infinite}
.ev-poster::after{width:120px;height:120px;left:-30px;bottom:-60px;background:radial-gradient(circle,rgba(236,72,153,.6),transparent 65%);animation:spot 7s ease-in-out infinite reverse}
@keyframes spot{0%,100%{transform:translate(0,0)}50%{transform:translate(-24px,16px)}}
.ev-poster small{position:relative;z-index:1;display:block;font-size:9.5px;letter-spacing:.14em;opacity:.85}
.ev-poster b{position:relative;z-index:1;display:block;font-family:var(--display);font-weight:900;font-size:19px;line-height:1.1;margin-top:4px}
.ev-count{position:relative;z-index:1;display:flex;gap:6px;margin-top:10px}
.ev-count span{background:rgba(255,255,255,.16);backdrop-filter:blur(4px);border-radius:8px;padding:4px 7px;font-size:9px;line-height:1.1;text-align:center;min-width:34px}
.ev-count b{font-family:var(--body);font-size:13px;font-weight:700;margin:0;font-variant-numeric:tabular-nums}
.ev-body{padding:12px 12px 0;display:flex;flex-direction:column;gap:9px;flex:1;min-height:0}
.ev-pass{background:#fff;border:1px solid #E2E8F0;border-radius:14px;padding:9px;display:flex;gap:10px;align-items:center}
.ev-qr{position:relative;width:62px;height:62px;flex:none;border-radius:6px;overflow:hidden;background:#fff}
.ev-qr svg{width:100%;height:100%;display:block}
.ev-qr .scan{position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,#22C55E,transparent);box-shadow:0 0 10px #22C55E;animation:scan 2.2s ease-in-out infinite}
@keyframes scan{0%,100%{transform:translateY(0)}50%{transform:translateY(59px)}}
.ev-pass small{display:block;font-size:9px;color:#64748B}
.ev-pass b{display:block;font-size:12px}
.ev-pass .vip{display:inline-block;margin-top:4px;font-size:9px;font-weight:700;color:#7C3AED;background:#EDE9FE;padding:2px 7px;border-radius:999px}
.ev-agenda{display:flex;flex-direction:column;gap:6px}
.ev-agenda>small{font-size:9.5px;font-weight:700;color:#64748B;letter-spacing:.08em}
.ev-slot{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:8px;align-items:center;background:#fff;border:1px solid #E2E8F0;border-radius:11px;padding:7px 9px;font-size:10px}
.ev-slot time{font-weight:700;color:#334155;font-size:9.5px}
.ev-slot b{display:block;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-slot small{font-size:9px;color:#64748B}
.ev-slot .live{font-size:8.5px;font-weight:700;color:#fff;background:#EF4444;border-radius:999px;padding:2px 6px;display:flex;align-items:center;gap:3px}
.ev-slot .live i{width:5px;height:5px;border-radius:50%;background:#fff;animation:blink 1.2s ease-in-out infinite}
.ev-slot.is-live{border-color:#FCA5A5;background:#FFF5F5}
.ev-slot .add{width:20px;height:20px;border-radius:6px;background:#EFF6FF;color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;line-height:1}
.js .ev-slot{opacity:0;transform:translateX(16px)}
.js.loaded .ev-slot{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js.loaded .ev-slot:nth-of-type(1){transition-delay:1.2s}.js.loaded .ev-slot:nth-of-type(2){transition-delay:1.35s}.js.loaded .ev-slot:nth-of-type(3){transition-delay:1.5s}
.ev-tabs{margin-top:auto;display:flex;justify-content:space-around;padding:10px 6px 14px;border-top:1px solid #E2E8F0;background:#fff;color:#94A3B8;flex:none}
.ev-tabs .ico{width:17px;height:17px}
.ev-tabs .on{color:var(--blue)}

/* ---- live stage card ---- */
.stage{position:absolute;right:-24px;top:70px;width:240px;border-radius:22px;background:linear-gradient(160deg,#111A2B,#0B111C);border:1px solid #263244;padding:16px;color:#fff;box-shadow:0 30px 60px rgba(0,0,0,.5);animation:floatY 7s ease-in-out infinite reverse;z-index:1}
.stage-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#94A3B8}
.stage-top .on-air{display:flex;align-items:center;gap:5px;color:#FCA5A5;font-weight:700;letter-spacing:.08em}
.stage-top .on-air i{width:7px;height:7px;border-radius:50%;background:#EF4444;box-shadow:0 0 0 0 rgba(239,68,68,.6);animation:onair 1.6s ease-out infinite}
@keyframes onair{to{box-shadow:0 0 0 8px rgba(239,68,68,0)}}
.stage-screen{position:relative;height:92px;border-radius:14px;margin:10px 0 12px;background:radial-gradient(ellipse at 50% 120%,rgba(124,58,237,.6),transparent 60%),linear-gradient(180deg,#1E1B4B,#0F172A);overflow:hidden;display:flex;align-items:flex-end;justify-content:center;gap:3px;padding-bottom:12px}
.stage-screen::before{content:"";position:absolute;top:-20px;left:30%;width:40px;height:130px;background:linear-gradient(180deg,rgba(251,191,36,.45),transparent);transform:rotate(-18deg);animation:beam 4s ease-in-out infinite;transform-origin:top}
.stage-screen::after{content:"";position:absolute;top:-20px;right:30%;width:40px;height:130px;background:linear-gradient(180deg,rgba(96,165,250,.45),transparent);transform:rotate(18deg);animation:beam 4s ease-in-out infinite reverse;transform-origin:top}
@keyframes beam{0%,100%{rotate:0deg}50%{rotate:14deg}}
.eq{width:5px;border-radius:3px;background:linear-gradient(180deg,#F472B6,#8B5CF6);height:var(--h);transform-origin:bottom;animation:eq 1s ease-in-out infinite alternate;animation-delay:var(--d);position:relative;z-index:1}
@keyframes eq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.stage b{display:block;font-size:13px}
.stage small{font-size:10px;color:#94A3B8}
.poll{margin-top:12px;display:flex;flex-direction:column;gap:7px}
.poll-row{font-size:10px;color:#CBD5E1}
.poll-row div{display:flex;justify-content:space-between;margin-bottom:3px}
.poll-row .bar{height:6px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.poll-row .bar i{display:block;height:100%;width:var(--w);border-radius:4px;background:var(--c,#3B82F6);transform:scaleX(0);transform-origin:left}
.js.loaded .poll-row .bar i{animation:grow 1.3s var(--ease) forwards;animation-delay:calc(1.4s + var(--i,0)*.18s)}
@keyframes grow{to{transform:scaleX(1)}}
.stage-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid #263244;font-size:10px;color:#94A3B8}
.stage-foot b{display:inline;font-size:12px;color:#fff;font-variant-numeric:tabular-nums}
.avatars{display:flex}
.avatars i{width:20px;height:20px;border-radius:50%;border:2px solid #0B111C;margin-left:-6px;background:var(--c)}
.avatars i:first-child{margin-left:0}

.ev-wrap .float{z-index:3}
.float--1{right:-60px;top:-14px}
.float--2{right:-50px;top:auto;bottom:16px}
.float--3{left:-80px;top:auto;bottom:26px}
@media (max-width:1240px) and (min-width:961px){.ev-wrap{transform-origin:left center;scale:.9}.float--1{right:-30px}.float--2{right:-20px}.float--3{left:-40px}}
@media (max-width:960px){.hero-visual{min-height:0}.ev-wrap{width:100%;max-width:520px;height:auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:20px}.ev-phone,.stage{position:relative;left:auto;right:auto;top:auto}.stage{margin-top:60px}}
@media (max-width:560px){.stage{display:none}}
@media (prefers-reduced-motion:reduce){.poll-row .bar i{transform:none}.js .ev-slot{opacity:1;transform:none}.ev-qr .scan{display:none}}