/* ============================================================
   OneVis premium layer 2: pinned reels, big website rows,
   scroll-velocity skew, page-hero parallax, CTA glow burst
   ============================================================ */

/* ---------- Pinned reels stage ---------- */
.reels-stage-wrap{padding:0!important;height:320vh;position:relative}
.reels-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;padding:80px 0 40px}
.reels-pin .section-head{margin-bottom:28px}
.reels-stage{position:relative;display:flex;justify-content:center;align-items:center;gap:0;height:min(62vh,640px);perspective:1400px}
.reel-slot{position:absolute;left:50%;top:0;width:min(340px,78vw);height:100%;transform:translateX(-50%) translateX(var(--x,0)) scale(var(--s,1)) rotateY(var(--ry,0deg));opacity:var(--o,1);transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .8s ease,filter .8s ease;filter:blur(var(--b,0px)) brightness(var(--br,1));z-index:var(--z,1);display:flex;flex-direction:column;gap:10px}
.reel-slot .reel-tag{align-self:flex-start;font-size:.66rem;font-weight:700;letter-spacing:.15em;padding:6px 12px;border-radius:999px;background:#2563EB;color:#fff}
.reel-frame{position:relative;flex:1;min-height:0;border-radius:20px;overflow:hidden;background:#07132C;box-shadow:0 30px 70px rgba(7,25,62,.25)}
.reel-frame .instagram-media{margin:0!important;width:100%!important;min-width:0!important;max-width:none!important;height:100%!important;border-radius:0!important;box-shadow:none!important}
.reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;z-index:2;background:#000}
.reel-frame.has-video .reel-video{display:block}
.reel-frame.has-video .instagram-media{display:none!important}
.reel-slot[data-i="0"]{--x:-110%;--s:.78;--o:.45;--b:0px;--br:.6;--ry:14deg;--z:1}
.reel-slot[data-i="1"]{--x:0%;--s:1;--o:1;--z:3}
.reel-slot[data-i="2"]{--x:110%;--s:.78;--o:.45;--b:0px;--br:.6;--ry:-14deg;--z:1}
.reels-stage[data-active="0"] .reel-slot[data-i="0"]{--x:0%;--s:1;--o:1;--b:0px;--br:1;--ry:0deg;--z:3}
.reels-stage[data-active="0"] .reel-slot[data-i="1"]{--x:110%;--s:.78;--o:.45;--b:0px;--br:.6;--ry:-14deg;--z:2}
.reels-stage[data-active="0"] .reel-slot[data-i="2"]{--x:200%;--s:.6;--o:0;--z:1}
.reels-stage[data-active="2"] .reel-slot[data-i="2"]{--x:0%;--s:1;--o:1;--b:0px;--br:1;--ry:0deg;--z:3}
.reels-stage[data-active="2"] .reel-slot[data-i="1"]{--x:-110%;--s:.78;--o:.45;--b:0px;--br:.6;--ry:14deg;--z:2}
.reels-stage[data-active="2"] .reel-slot[data-i="0"]{--x:-200%;--s:.6;--o:0;--z:1}
.reels-dots{display:flex;justify-content:center;gap:10px;margin-top:26px}
.reels-dots i{width:28px;height:3px;border-radius:3px;background:#CBD6E8;transition:background .4s,width .4s}
.reels-dots i.on{background:#2563EB;width:48px}
@media (max-width:900px){
  /* same pinned stage on tablet/phone — just sized for the viewport */
  .reels-pin{padding:90px 0 30px}
  .reels-stage{height:min(60vh,560px)}
  .reel-slot{width:min(300px,70vw)}
  .reel-slot[data-i="0"],.reels-stage[data-active="2"] .reel-slot[data-i="1"]{--x:-92%}
  .reel-slot[data-i="2"],.reels-stage[data-active="0"] .reel-slot[data-i="1"]{--x:92%}
}

/* ---------- Websites: big alternating rows ---------- */
.pf-sites.pf-sites--big{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,90px)}
.pf-sites--big .pf-site{display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:clamp(24px,4vw,56px);background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible}
.pf-sites--big .pf-site:nth-child(even){grid-template-columns:.75fr 1.25fr}
.pf-sites--big .pf-site:nth-child(even) .pf-browser{order:2}
.pf-sites--big .pf-site:hover{transform:none;box-shadow:none}
.pf-sites--big .pf-browser{border-radius:22px;box-shadow:0 40px 100px rgba(7,25,62,.22);transition:transform .9s cubic-bezier(.16,1,.3,1),box-shadow .9s ease;will-change:transform}
.pf-sites--big .pf-site:hover .pf-browser{transform:translateY(-10px) rotateX(1.5deg);box-shadow:0 60px 120px rgba(7,25,62,.3)}
.pf-sites--big .pf-shot{aspect-ratio:16/10.5;border-radius:14px 14px 0 0}
.pf-sites--big .pf-browser-bar i{font-size:.72rem}
.pf-sites--big .pf-site-body{padding:0}
.pf-sites--big .pf-site-head{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:16px}
.pf-sites--big .pf-site-head b{font-size:clamp(1.6rem,2.8vw,2.4rem);letter-spacing:-.04em;line-height:1.1}
.pf-sites--big .pf-site-body p{font-size:1.05rem;line-height:1.75;margin-bottom:20px;max-width:440px}
.pf-sites--big .pf-visit{font-size:.9rem;display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:12px 20px;border-radius:999px;background:#07193E;color:#fff;transition:background .3s,transform .3s}
.pf-sites--big .pf-site:hover .pf-visit{background:#2563EB;transform:translateX(4px)}
.pf-sites--big .pf-num{display:block;font-size:.72rem;letter-spacing:.2em;color:#2563EB;font-weight:700;margin-bottom:6px}
@media (max-width:900px){
  .pf-sites.pf-sites--big{gap:56px}
  .pf-sites--big .pf-site,.pf-sites--big .pf-site:nth-child(even){grid-template-columns:1fr}
  .pf-sites--big .pf-site:nth-child(even) .pf-browser{order:0}
}

/* ---------- Scroll-velocity skew (Lusion feel) ---------- */

/* ---------- Page hero parallax/fade on inner pages ---------- */
.page-hero .container{will-change:transform,opacity}

/* ---------- Big marquee text between sections (inner pages) ---------- */
.p-ticker{overflow:hidden;padding:26px 0;border-top:1px solid #E0E8F4;border-bottom:1px solid #E0E8F4;background:#fff}
.p-ticker-track{display:flex;gap:48px;width:max-content;will-change:transform;font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(2rem,5vw,4.4rem);letter-spacing:-.05em;line-height:1;color:#0B1732;white-space:nowrap}
.p-ticker-track span{display:flex;align-items:center;gap:48px}
.p-ticker-track i{font-style:normal;width:14px;height:14px;border-radius:50%;background:#2563EB;flex:0 0 auto}
.p-ticker-track em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px #0B1732}

/* ---------- CTA glow burst ---------- */
.btn-primary{position:relative}
.btn-primary.is-glow{animation:ctaGlow .9s ease-out both;box-shadow:0 0 0 0 rgba(37,99,235,.7),0 0 40px rgba(37,99,235,.9)}
@keyframes ctaGlow{0%{box-shadow:0 0 0 0 rgba(37,99,235,.75),0 0 10px rgba(37,99,235,.6)}100%{box-shadow:0 0 0 28px rgba(37,99,235,0),0 0 60px rgba(37,99,235,0)}}
.p-burst{position:fixed;left:0;top:0;z-index:950;pointer-events:none}
.p-burst i{position:absolute;left:0;top:0;width:8px;height:8px;border-radius:50%;background:#77B3FF;box-shadow:0 0 12px #2563EB;animation:burst .9s cubic-bezier(.16,1,.3,1) forwards}
.p-burst b{position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;border:2px solid rgba(119,179,255,.9);transform:translate(-50%,-50%);animation:ring 1s cubic-bezier(.16,1,.3,1) forwards}
.p-burst b:nth-child(2){animation-delay:.12s}.p-burst b:nth-child(3){animation-delay:.24s}
@keyframes burst{to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
@keyframes ring{to{width:360px;height:360px;opacity:0;border-width:1px}}
.p-flash{position:fixed;inset:0;z-index:940;pointer-events:none;background:radial-gradient(circle at var(--fx,50%) var(--fy,50%),rgba(37,99,235,.55),rgba(37,99,235,.15) 30%,transparent 65%);opacity:0;animation:flash .9s ease-out forwards}
@keyframes flash{0%{opacity:0}20%{opacity:1}100%{opacity:0}}

/* Contact page: the form card pulses blue when arrived at via the glow */
.page-contact #form.arrived{animation:formArrive 1.6s cubic-bezier(.16,1,.3,1) both}
@keyframes formArrive{0%{box-shadow:0 0 0 0 rgba(37,99,235,.6),0 0 80px rgba(37,99,235,.7);transform:translateY(18px)}100%{box-shadow:0 10px 35px rgba(7,25,62,.05);transform:none}}
.page-contact .page-hero.lit::after{background:radial-gradient(circle,rgba(37,99,235,.6),transparent 65%);animation:heroLit 2s ease-out both}
@keyframes heroLit{0%{transform:scale(.4);opacity:0}30%{opacity:1}100%{transform:scale(1.4);opacity:.6}}

@media (prefers-reduced-motion:reduce){
  .reel-slot{transition:none}
  .v-skew{transform:none!important}
  .p-burst,.p-flash{display:none!important}
  .btn-primary.is-glow{animation:none}
}