/* Motion + device frames for the home page. Only transform/opacity animate. */
.scroll-progress{position:fixed;inset:0 0 auto;height:3px;z-index:60;pointer-events:none}
.scroll-progress i{display:block;height:100%;background:linear-gradient(90deg,#4F7CFF,#8B5CF6,#EC4899);transform:scaleX(0);transform-origin:0 50%}
html:not(.js) .scroll-progress{display:none}

/* Phone frame: modern flagship look in pure CSS — thin titanium bezel, metallic rim, island, glass sheen. */
/* One bezel/radius per frame; inner radius = outer - bezel everywhere. */
.hero-phone,.screens-stage,.devices-art{container-type:inline-size}
.phone{--bz:clamp(7px,2.9cqw,10px);--r:clamp(32px,14.5cqw,52px)}
.dev-phone{--bz:clamp(7px,1.6cqw,9px);--r:clamp(24px,5.4cqw,34px)}
.phone:not(.phone-bare){border-radius:var(--r);padding:var(--bz);background:linear-gradient(150deg,#5b5e66 0%,#1c1d21 18%,#0b0b0d 50%,#1a1b1f 82%,#4a4c53 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 0 0 2px #050506,0 1px 0 rgba(255,255,255,.06),0 50px 80px -36px rgba(4,10,30,.55),0 22px 40px -22px rgba(4,10,30,.45)}
.phone:not(.phone-bare)::after{content:"";position:absolute;inset:var(--bz);z-index:2;border-radius:calc(var(--r) - var(--bz));pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.03) 26%,transparent 27%)}
/* Screenshot fills the whole screen: no inner gap, island floats over it. */
.phone:not(.phone-bare) img{display:block;width:100%;height:auto;object-fit:cover;border-radius:calc(var(--r) - var(--bz))}
.phone-cam{position:absolute;z-index:3;top:calc(var(--bz) + 2.4%);left:50%;width:29%;aspect-ratio:3.5;transform:translate(-50%,-50%);border-radius:999px;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.phone-cam::after{content:"";position:absolute;right:12%;top:50%;width:16%;aspect-ratio:1;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle at 35% 35%,#2b3550,#07080c 60%)}
.phone-bare .phone-cam{display:none}

/* Progress of the pinned screens block. */
.shot-bar{position:absolute;z-index:2;left:22%;right:22%;bottom:-26px;height:3px;border-radius:3px;background:var(--line,rgba(0,0,0,.1));overflow:hidden}
.shot-bar i{display:block;height:100%;background:#4F7CFF;transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease,ease)}
html:not(.js) .shot-bar{display:none}

/* Tablet frame (portrait): same titanium language, thin even bezel. */
.tablet{position:relative;width:min(480px,82%);margin-left:auto;--bz:clamp(8px,1.1vw,14px);--r:clamp(22px,2.4vw,34px);padding:var(--bz);border-radius:var(--r);background:linear-gradient(150deg,#5b5e66 0%,#1c1d21 16%,#0b0b0d 50%,#1a1b1f 84%,#4a4c53 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.26),inset 0 0 0 2.5px #050506,0 60px 100px -44px rgba(11,20,48,.55),0 24px 44px -24px rgba(11,20,48,.4);transform-origin:50% 100%}
.tablet::after{content:"";position:absolute;inset:var(--bz);border-radius:calc(var(--r) - var(--bz));pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.03) 28%,transparent 29%)}
.tablet img{display:block;width:100%;height:auto;object-fit:cover;border-radius:calc(var(--r) - var(--bz));background:#fff}
.tablet-cam{position:absolute;top:calc(var(--bz) / 2);left:50%;width:6px;height:6px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 35%,#2b3550,#07080c 65%)}
.js .tablet[data-tilt]{transform:rotateX(14deg) scale(.94)}
.js .tablet.reveal{opacity:0;transition:opacity .8s var(--ease,ease)}
.js .tablet.reveal.is-in{opacity:1}

/* Stagger hover lift on cards (transform only). */
@media (hover:hover){.card{transition:transform .35s var(--ease,ease)}.card:hover{transform:translateY(-4px)}}
.marquee:hover ul{animation-play-state:paused}

@media (max-width:860px){.dev-phone{--bz:4px;--r:18px}}
@media (max-width:600px){
  .tablet{--bz:9px;--r:24px}
  .marquee ul{animation-duration:70s}
}
@media (prefers-reduced-motion:reduce){
  .scroll-progress{display:none}
  .js .tablet[data-tilt],.js .tablet.reveal{transform:none;opacity:1}
  .card:hover{transform:none}
  .marquee ul{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
}