/* Landing hero loop (anim.js builds it): Premiere on the PC and Remote Cut on the phone, side by side
   and in sync. Only transform/opacity animate, so it stays smooth. Sizes are % of the stage. */
.rc-anim { position:relative; width:100%; aspect-ratio:16/11; }
.rc-anim .pc, .rc-anim .ph { position:absolute; box-sizing:border-box; background:linear-gradient(180deg, #15123f, #0a0830); border:2px solid rgba(169,139,255,.45); }

/* PC monitor: effect controls | program monitor, timeline below */
.rc-anim .pc { left:0; top:0; width:80%; height:82%; border-radius:12px; padding:1.6%; display:grid; grid-template-columns:30% 1fr; grid-template-rows:56% 1fr; gap:2.4%; box-shadow:0 30px 80px rgba(80,50,220,.3); }
.rc-anim .stand { position:absolute; left:34%; top:82%; width:12%; height:9%; background:#120f3d; border:2px solid rgba(169,139,255,.25); border-top:0; box-sizing:border-box; }
.rc-anim .base { position:absolute; left:26%; top:91%; width:28%; height:3.5%; border-radius:6px; background:#120f3d; border:2px solid rgba(169,139,255,.25); box-sizing:border-box; }
.rc-anim .side { background:#0b0930; border-radius:6px; padding:9% 8%; display:flex; flex-direction:column; justify-content:space-around; }
.rc-anim .side i { display:block; height:7%; border-radius:3px; background:rgba(194,182,255,.25); }
.rc-anim .side i:nth-child(odd) { width:70%; } .rc-anim .side i:nth-child(3n) { width:45%; background:rgba(45,140,235,.6); }
.rc-anim .pc .tl { grid-column:1 / -1; }

/* phone, in front on the right (like the real photo) */
.rc-anim .ph { left:63%; top:12%; width:31%; height:86%; border-radius:22px; padding:4% 3%; display:flex; flex-direction:column; gap:3%;
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05) inset;
  transition:transform .9s cubic-bezier(.2,.8,.2,1), opacity .7s ease; }
.rc-anim .ph .notch { align-self:center; width:34%; height:2.4%; border-radius:6px; background:#05041a; flex:none; }
.rc-anim .ph .mon { height:34%; flex:none; }
.rc-anim .ph .tl { flex:1; }
.rc-anim .ph .tools { height:9%; flex:none; display:flex; justify-content:space-around; align-items:center; border-radius:8px; background:#141050; color:#c2b6ff; font-size:clamp(8px, 1.5vw, 13px); }
.rc-anim .ph .tools b { padding:2px 5px; border-radius:5px; transition:background .3s, color .3s; }
.rc-anim.cut .ph .tools b:first-child { background:#ebddff; color:#0b0830; }
.rc-anim:not(.in) .ph { transform:translateY(14%) scale(.94); opacity:0; }

/* program monitor: a small drawn scene */
.rc-anim .mon { position:relative; border-radius:6px; overflow:hidden; background:linear-gradient(180deg, #6f8cff 0%, #b9a3ff 55%, #f1c6a8 100%); }
.rc-anim .sun { position:absolute; width:16%; aspect-ratio:1; border-radius:50%; background:#ffe7a8; left:62%; top:16%; box-shadow:0 0 24px #ffe7a8; }
.rc-anim .hill { position:absolute; border-radius:50% 50% 0 0; bottom:-30%; }
.rc-anim .h1 { left:-15%; width:80%; height:70%; background:#4a3fb8; }
.rc-anim .h2 { left:35%; width:90%; height:60%; background:#2c2384; }
.rc-anim .tc { position:absolute; left:5%; bottom:6%; font:600 clamp(7px, 1.4vw, 11px) Consolas, monospace; color:#7cb8ff; text-shadow:0 1px 2px #000; }

/* timeline (same markup in both) */
.rc-anim .tl { position:relative; border-radius:6px; background:#0b0930; display:flex; flex-direction:column; justify-content:space-evenly; padding:0 3%; overflow:hidden; }
.rc-anim .row { position:relative; height:15%; }
.rc-anim .row.audio { height:20%; }
.rc-anim .ph .row { height:13%; }
.rc-anim .c { position:absolute; top:0; bottom:0; border-radius:3px; transition:transform .35s ease, box-shadow .35s ease; }
.rc-anim .v3 { background:#c46bd6; } .rc-anim .v2 { background:#8da2e6; } .rc-anim .v1 { background:#5b7cf0; }
.rc-anim .a1 { background:repeating-linear-gradient(90deg, #2fb98c 0 3px, #26a07a 3px 6px); }
.rc-anim .cutline { position:absolute; top:-25%; bottom:-25%; width:2px; margin-left:-1px; background:#fff; border-radius:1px; opacity:0; transition:opacity .3s; }
.rc-anim.cut .ph .cutline, .rc-anim.cut.synced .pc .cutline { opacity:1; }
.rc-anim.cut .ph .right, .rc-anim.cut.synced .pc .right { transform:translateX(4px); }
.rc-anim.glow .pc .right { box-shadow:0 0 0 2px #fff, 0 0 14px rgba(255,255,255,.6); }
.rc-anim .head { position:absolute; top:4%; bottom:4%; width:2px; background:#ff5d6c; left:8%; animation:rc-head 10s linear infinite; }
@keyframes rc-head { from { left:6%; } to { left:94%; } }
.rc-anim .finger { position:absolute; width:clamp(16px, 3.6vw, 28px); aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.9); box-shadow:0 0 0 6px rgba(255,255,255,.25);
  transform:translate(-50%, -50%) scale(.5); opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; }
.rc-anim.tap .finger { opacity:1; transform:translate(-50%, -50%) scale(1); }

.rc-cap { min-height:2.8em; margin:12px 0 0; text-align:center; color:var(--lilac, #c2b6ff); font-weight:600; transition:opacity .3s; }
@media (prefers-reduced-motion: reduce) { .rc-anim .ph, .rc-anim .c { transition:none; } .rc-anim .head { animation:none; } }