/* ==========================================================================
   A777-APK.PK — MOCKUP + MOTION layer
   Appended to aurora.css. Device chrome, isometric clusters, scroll motion.
   ========================================================================== */

/* ==========================================================================
   1. PHONE MOCKUP  —  .nvPhone
   Real device chrome: brushed rail, bezel, dynamic island, side buttons,
   screen glare, floor reflection.
   ========================================================================== */
.nvPhone{position:relative;width:100%;isolation:isolate;
  --rail:linear-gradient(140deg,#8A7A57 0%,#3A3122 18%,#C4B183 34%,#241E14 52%,
                          #9E8E68 70%,#2E2718 88%,#6B5F44 100%)}
.nvPhone-body{position:relative;border-radius:clamp(26px,7%,44px);padding:3px;
  background:var(--rail);box-shadow:
    0 0 0 .5px rgba(255,255,255,.22),
    0 30px 70px rgba(0,0,0,.62),
    0 8px 22px rgba(0,0,0,.5),
    inset 0 0 0 .5px rgba(255,255,255,.14)}
.nvPhone-in{position:relative;border-radius:clamp(24px,6.4%,41px);padding:5px;
  background:#070603;box-shadow:inset 0 0 0 1px rgba(0,0,0,.9)}
/* the screen carries the screenshots' own 512:908 ratio, so nothing is ever cropped */
.nvPhone-sc{position:relative;aspect-ratio:512/908;border-radius:clamp(19px,5.4%,35px);
  overflow:hidden;background:var(--slate)}
.nvPhone-sc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
/* screen swap */
.nvPhone-sc img{opacity:0;transform:scale(1.03);
  transition:opacity .75s var(--e),transform .95s var(--e)}
.nvPhone-sc img.on{opacity:1;transform:none}
/* glare */
.nvPhone-gl{position:absolute;inset:5px;z-index:3;pointer-events:none;
  border-radius:clamp(19px,5.4%,35px);overflow:hidden}
.nvPhone-gl::before{content:"";position:absolute;top:-60%;left:-40%;width:70%;height:220%;
  transform:rotate(22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10) 40%,
    rgba(255,255,255,.16) 50%,rgba(255,255,255,.05) 62%,transparent);
  animation:nvSheen 8s var(--e2) infinite}
@keyframes nvSheen{0%,62%{transform:translateX(-40%) rotate(22deg)}
  92%,100%{transform:translateX(360%) rotate(22deg)}}
.nvPhone-gl::after{content:"";position:absolute;inset:0;
  background:linear-gradient(150deg,rgba(255,255,255,.11) 0%,transparent 32%,
    transparent 74%,rgba(255,211,122,.09) 100%)}
/* side buttons */
.nvPhone-body::before,.nvPhone-body::after{content:"";position:absolute;width:2.5px;border-radius:2px;
  background:var(--rail)}
.nvPhone-body::before{left:-2px;top:19%;height:5%;box-shadow:0 0 0 .5px rgba(255,255,255,.14),
  0 8.5% 0 0 var(--rail)}
.nvPhone-body::after{right:-2px;top:24%;height:11%;box-shadow:0 0 0 .5px rgba(255,255,255,.14)}
/* volume pair */
.nvPhone-vol{position:absolute;left:-2px;top:28.5%;width:2.5px;height:8%;border-radius:2px;
  background:var(--rail);box-shadow:0 0 0 .5px rgba(255,255,255,.14)}
/* floor reflection */
.nvPhone-rf{position:absolute;left:6%;right:6%;bottom:-16%;height:16%;z-index:-1;
  border-radius:50%;filter:blur(20px);
  background:radial-gradient(ellipse at center,rgba(233,162,27,.42),transparent 70%)}

/* ==========================================================================
   2. HERO DEVICE CLUSTER — isometric, three depths
   ========================================================================== */
.nvClus{position:relative;display:grid;place-items:center;min-height:600px;
  perspective:1500px;perspective-origin:52% 44%}
.nvClus-in{position:relative;width:min(430px,100%);aspect-ratio:1/1.16;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,7deg)) rotateY(var(--ry,-16deg)) rotateZ(var(--rz,2deg));
  transition:transform 1.1s var(--e)}
.nvClus .nvPhone{position:absolute;transform-style:preserve-3d}
/* front / lead device */
.nvClus .p-lead{width:58%;left:50%;top:50%;z-index:5;
  transform:translate3d(-50%,-50%,90px);
  animation:nvHover 9s var(--e2) infinite}
/* rear left */
.nvClus .p-l{width:44%;left:4%;top:44%;z-index:3;opacity:.9;
  transform:translate3d(0,-50%,-40px) rotateY(13deg);
  animation:nvHover 11s var(--e2) infinite -2.2s}
/* rear right */
.nvClus .p-r{width:44%;right:4%;top:57%;z-index:3;opacity:.9;
  transform:translate3d(0,-50%,-40px) rotateY(-13deg);
  animation:nvHover 10s var(--e2) infinite -4.6s}
@keyframes nvHover{0%,100%{translate:0 0}50%{translate:0 -14px}}
.nvClus .p-l .nvPhone-rf,.nvClus .p-r .nvPhone-rf{opacity:.5}

/* orbit rings sit behind the cluster */
.nvOrb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  border:1px solid rgba(255,211,122,.14)}
.nvOrb.o1{width:min(470px,90%);aspect-ratio:1;animation:nvSpin 30s linear infinite}
.nvOrb.o2{width:min(620px,116%);aspect-ratio:1;border-color:rgba(255,211,122,.09);
  animation:nvSpin 48s linear infinite reverse}
.nvOrb.o1::after{content:"";position:absolute;top:-4px;left:50%;width:7px;height:7px;border-radius:50%;
  background:var(--gl);box-shadow:0 0 18px var(--gl);transform:translateX(-50%)}

/* ==========================================================================
   3. ANGLED MOCKUP GALLERY — screenshots showcase
   ========================================================================== */
.nvGal{position:relative;display:flex;justify-content:center;align-items:flex-end;
  gap:clamp(10px,1.6vw,22px);padding:40px 0 70px;perspective:1900px;
  perspective-origin:50% 40%}
.nvGal .nvPhone{width:clamp(120px,15vw,182px);flex:none;transform-style:preserve-3d;
  transition:transform .8s var(--e),opacity .8s var(--e),filter .8s var(--e)}
.nvGal .nvPhone[data-d="0"]{z-index:6;transform:translateZ(70px) translateY(-24px)}
.nvGal .nvPhone[data-d="1"]{z-index:5;opacity:.94;transform:rotateY(-19deg) translateZ(10px)}
.nvGal .nvPhone[data-d="-1"]{z-index:5;opacity:.94;transform:rotateY(19deg) translateZ(10px)}
.nvGal .nvPhone[data-d="2"]{z-index:4;opacity:.72;filter:saturate(.85);
  transform:rotateY(-27deg) translateZ(-50px) translateY(16px)}
.nvGal .nvPhone[data-d="-2"]{z-index:4;opacity:.72;filter:saturate(.85);
  transform:rotateY(27deg) translateZ(-50px) translateY(16px)}
.nvGal .nvPhone[data-d="3"],.nvGal .nvPhone[data-d="-3"]{z-index:3;opacity:.4;
  filter:saturate(.6) blur(1px)}
.nvGal .nvPhone[data-d="3"]{transform:rotateY(-32deg) translateZ(-110px) translateY(34px)}
.nvGal .nvPhone[data-d="-3"]{transform:rotateY(32deg) translateZ(-110px) translateY(34px)}
.nvGal .nvPhone[data-d="x"]{display:none}
.nvGal .nvPhone{cursor:pointer}

/* ==========================================================================
   4. SCROLL STORY — phone screen swaps as the copy scrolls past
   ========================================================================== */
.nvStory{display:grid;grid-template-columns:1fr .78fr;gap:clamp(30px,5vw,80px);
  align-items:start}
.nvStory-l{display:grid;gap:clamp(60px,12vh,140px);padding-block:6vh 12vh}
.nvBeat{position:relative;padding-left:34px;opacity:.32;
  transition:opacity .6s var(--e),transform .6s var(--e)}
.nvBeat::before{content:"";position:absolute;left:0;top:9px;width:13px;height:13px;border-radius:50%;
  background:var(--ink);border:2px solid rgba(255,211,122,.3);transition:all .5s var(--e)}
.nvBeat.on{opacity:1}
.nvBeat.on::before{border-color:var(--ac);background:var(--ac);
  box-shadow:0 0 0 5px rgba(233,162,27,.18),0 0 22px var(--gl)}
.nvBeat .no{display:block;font-family:var(--m);font-size:.64rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gl);margin-bottom:9px}
.nvBeat h3{font-size:clamp(19px,2vw,25px);margin-bottom:9px}
.nvBeat p{color:var(--mu);font-size:.96rem;line-height:1.72;max-width:44ch}
.nvStory-r{position:sticky;top:calc(var(--nav) + 40px);height:fit-content;
  display:grid;place-items:center;padding-block:4vh}
.nvStory-r .nvPhone{width:min(268px,72%)}
.nvStory-rail{position:absolute;left:6px;top:14px;bottom:14px;width:1px;
  background:rgba(255,255,255,.08)}
.nvStory-rail i{position:absolute;left:-1px;top:0;width:3px;height:0;border-radius:3px;
  background:var(--gAc);box-shadow:0 0 14px var(--gl);transition:height .45s var(--e)}

/* ==========================================================================
   5. MOTION — orchestrated load, scroll reveals, text mask
   ========================================================================== */
/* page-load cascade */
@keyframes nvRise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes nvFade{from{opacity:0}to{opacity:1}}
@keyframes nvPop{from{opacity:0;transform:scale(.94) translateY(20px)}to{opacity:1;transform:none}}
.nvLoad>*{animation:nvRise .9s var(--e) both}
.nvLoad>*:nth-child(1){animation-delay:.08s}
.nvLoad>*:nth-child(2){animation-delay:.18s}
.nvLoad>*:nth-child(3){animation-delay:.28s}
.nvLoad>*:nth-child(4){animation-delay:.38s}
.nvLoad>*:nth-child(5){animation-delay:.48s}
.nvClus{animation:nvPop 1.3s var(--e) .22s both}

/* word-mask headline reveal */
.nvWords{display:inline-block}
.nvWords .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.nvWords .w i{display:inline-block;font-style:inherit;transform:translateY(105%);
  transition:transform .9s var(--e);transition-delay:calc(var(--i,0) * 85ms)}
.nvWords.on .w i{transform:none}

/* directional reveals */
.nvR[data-rv="left"]{transform:translateX(-30px)}
.nvR[data-rv="right"]{transform:translateX(30px)}
.nvR[data-rv="scale"]{transform:scale(.95)}
.nvR[data-rv="blur"]{filter:blur(9px)}
.nvR.on[data-rv]{transform:none;filter:none}

/* scroll progress bar */
.nvProgBar{position:fixed;top:0;left:0;height:2px;z-index:80;width:0;
  background:var(--gAc);box-shadow:0 0 12px var(--gl);transition:width .1s linear}

/* animated gradient border */
.nvEdge{position:relative}
.nvEdge::before{content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;
  padding:1px;background:conic-gradient(from var(--ang,0deg),transparent 0deg,
    rgba(255,211,122,.75) 60deg,transparent 130deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;opacity:0;transition:opacity var(--n)}
.nvEdge:hover::before{opacity:1;animation:nvAng 3.4s linear infinite}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes nvAng{to{--ang:360deg}}

/* parallax hook */
[data-par]{will-change:transform}

/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */
@media(max-width:900px){
  .nvClus{min-height:470px}
  .nvClus-in{width:min(360px,100%);--ry:-10deg;--rx:5deg}
  .nvStory{grid-template-columns:1fr;gap:0}
  .nvStory-r{position:relative;top:0;order:-1;padding-block:0 30px}
  .nvStory-r .nvPhone{width:min(230px,58%)}
  .nvStory-l{gap:44px;padding-block:10px 20px}
  .nvBeat{opacity:1}
  .nvBeat::before{border-color:var(--ac);background:var(--ac)}
  .nvGal{padding:24px 0 54px}
}
/* shed outer depths before they can reach the viewport edge */
@media(max-width:1200px){
  .nvGal .nvPhone[data-d="3"],.nvGal .nvPhone[data-d="-3"]{display:none}
}
@media(max-width:900px){
  .nvGal .nvPhone[data-d="2"],.nvGal .nvPhone[data-d="-2"]{display:none}
}
@media(max-width:720px){
  .nvClus{min-height:400px}
  .nvClus-in{width:min(310px,96%);--ry:0deg;--rx:0deg;--rz:0deg}
  .nvClus .p-lead{width:64%}
  .nvClus .p-l{left:-2%;width:40%}
  .nvClus .p-r{right:-2%;width:40%}
  .nvGal .nvPhone[data-d="2"],.nvGal .nvPhone[data-d="-2"],
  .nvGal .nvPhone[data-d="3"],.nvGal .nvPhone[data-d="-3"]{display:none}
  .nvGal .nvPhone{width:clamp(108px,30vw,150px)}
  .nvPhone-isl{min-height:12px}
}
@media(max-width:420px){
  .nvClus .p-l,.nvClus .p-r{opacity:.55}
}

@media(prefers-reduced-motion:reduce){
  .nvPhone-gl::before{animation:none;opacity:0}
  .nvClus,.nvClus .nvPhone,.nvLoad>*{animation:none !important}
  .nvWords .w i{transform:none;transition:none}
  .nvBeat{opacity:1}
  .nvEdge::before{animation:none}
}


/* ==========================================================================
   HERO DEVICES — staggered entrance, drift, and a light sweep
   ========================================================================== */
@keyframes nvRise3d{
  from{opacity:0;transform:translate3d(0,46px,0) scale(.9) rotateY(var(--ry0,0deg))}
  to{opacity:1;transform:none}}
@keyframes nvDrift{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(var(--dxr,6px),-16px,0)}}
@keyframes nvSweep{
  0%,64%{transform:translateX(-130%) skewX(-14deg)}
  92%,100%{transform:translateX(240%) skewX(-14deg)}}

.nvClus .nvPhone{animation:nvRise3d 1.1s var(--e) both}
.nvClus .p-l{animation-delay:.18s}
.nvClus .p-lead{animation-delay:.32s}
.nvClus .p-r{animation-delay:.46s}
/* gentle continuous drift layered on the entrance */
.nvClus .p-l .nvPhone-body{animation:nvDrift 11s var(--e2) infinite -1.5s;--dxr:-7px}
.nvClus .p-lead .nvPhone-body{animation:nvDrift 9s var(--e2) infinite;--dxr:5px}
.nvClus .p-r .nvPhone-body{animation:nvDrift 12s var(--e2) infinite -3.5s;--dxr:8px}
/* light raking across the lead screen */
.nvClus .p-lead .nvPhone-sc::after{content:"";position:absolute;inset:0;z-index:4;
  pointer-events:none;width:38%;
  background:linear-gradient(100deg,transparent,rgba(255,211,122,.20) 46%,
    rgba(255,255,255,.14) 56%,transparent);
  animation:nvSweep 7s var(--e2) infinite}

@media(prefers-reduced-motion:reduce){
  .nvClus .nvPhone,.nvClus .nvPhone-body{animation:none;opacity:1;transform:none}
  .nvClus .p-lead .nvPhone-sc::after{display:none}
}

.nvShow{position:relative;padding-block:46px;overflow:hidden}