/* Weblify motion layer v22. Only transform and opacity animate. Everything here is off under prefers-reduced-motion. */

/* ---------- 1. intro curtain (first visit per session; set up by the inline script in <head>) ---------- */
.wl-intro{display:none}
html.intro-on .wl-intro{display:grid;place-items:center;position:fixed;inset:0;z-index:10000;background:#060D1C;
  transition:transform 1s cubic-bezier(.76,0,.24,1);will-change:transform}
html.intro-on .wl-intro::after{content:"";position:absolute;left:0;right:0;bottom:-90px;height:90px;
  background:linear-gradient(#060D1C,rgba(6,13,28,0));pointer-events:none}
html.intro-on:not(.intro-hold) .wl-intro{transform:translateY(-110%)}
html.intro-hold .hero *{animation-play-state:paused !important}
.wl-intro-in{display:flex;flex-direction:column;align-items:center;gap:18px;transition:transform .9s cubic-bezier(.76,0,.24,1),opacity .6s}
html.intro-on:not(.intro-hold) .wl-intro-in{transform:translateY(60px);opacity:0}
.wl-intro svg{width:132px;height:84px;overflow:visible}
.wl-intro path{stroke-dasharray:1;stroke-dashoffset:1;animation:wliDraw .8s cubic-bezier(.65,0,.35,1) .1s forwards}
.wl-intro circle{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:wliPop .5s cubic-bezier(.34,1.56,.64,1) .78s forwards}
.wl-intro-word{display:flex;font:800 34px/1 Sora,sans-serif;letter-spacing:-.04em;color:#fff;overflow:hidden;padding-bottom:4px}
.wl-intro-word i{font-style:normal;display:inline-block;transform:translateY(110%);animation:wliUp .6s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(.55s + var(--i)*.045s)}
.wl-intro-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,#2563EB,#22D3EE);transform-origin:left;transform:scaleX(0);animation:wliBar 1.2s cubic-bezier(.65,0,.35,1) forwards}
@keyframes wliDraw{to{stroke-dashoffset:0}}
@keyframes wliPop{to{transform:scale(1)}}
@keyframes wliUp{to{transform:none}}
@keyframes wliBar{to{transform:scaleX(1)}}

/* ---------- 2. section rail (desktop) ---------- */
.wl-rail{position:fixed;right:22px;top:50%;z-index:60;display:none;flex-direction:column;gap:6px;transform:translate(16px,-50%);opacity:0;
  transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .6s}
.wl-rail.on{transform:translate(0,-50%);opacity:1}
.wl-rail a{position:relative;display:flex;align-items:center;justify-content:flex-end;height:22px;text-decoration:none}
.wl-rail a b{width:8px;height:8px;border-radius:99px;background:rgba(148,163,184,.55);box-shadow:0 0 0 3px rgba(6,13,28,.55);
  transform-origin:right center;transition:transform .45s cubic-bezier(.22,1,.36,1),background .3s}
.wl-rail a span{position:absolute;right:22px;white-space:nowrap;font:600 12.5px Sora,sans-serif;letter-spacing:.02em;color:#fff;
  padding:6px 11px;border-radius:99px;background:rgba(8,18,40,.92);box-shadow:inset 0 0 0 1px rgba(125,211,252,.25);
  opacity:0;transform:translateX(8px);transition:opacity .3s,transform .35s cubic-bezier(.22,1,.36,1);pointer-events:none}
.wl-rail a:hover span,.wl-rail a:focus-visible span{opacity:1;transform:none}
.wl-rail a.act b{transform:scaleX(3.2);background:#22D3EE}
.wl-rail a:focus-visible{outline:none}.wl-rail a:focus-visible b{box-shadow:0 0 0 3px #22D3EE}
@media (min-width:1240px) and (pointer:fine){.wl-rail{display:flex}}

/* ---------- 3. cursor labels (extends the glowing cursor) ---------- */
.cring .clbl{position:absolute;inset:0;display:grid;place-items:center;font:700 13px Sora,sans-serif;letter-spacing:.02em;color:#041018;
  opacity:0;transform:scale(.6);transition:opacity .25s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.cring.lbl{width:104px !important;height:104px !important;margin:-52px 0 0 -52px !important;background:#22D3EE !important;box-shadow:0 0 40px rgba(34,211,238,.55) !important}
.cring.lbl .clbl{opacity:1;transform:none}
.has-lbl .cdot{opacity:0 !important}

/* ---------- 4. footer wordmark letters ---------- */
.foot-word .fl{display:inline-block;transform:translateY(46%);opacity:.25;transition:transform 1.1s cubic-bezier(.22,1,.36,1),opacity 1.1s;transition-delay:calc(var(--i)*.06s)}
.foot-word.in .fl{transform:translateY(var(--ly,0px));opacity:1}
.foot-word.in.live .fl{transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .5s;transition-delay:0s}

/* ---------- 5. demo cards: image settles in ---------- */
.dcard img{transform:scale(1.14);transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
.dcard.settled img{transform:none}
.dcard.settled:hover img{transform:scale(1.05);transition-duration:.7s}

/* ---------- 6. work devices tilt in 3D (desktop; composes with the scroll 'translate' parallax) ---------- */
@media (min-width:1024px) and (pointer:fine){#work .lap{transform:perspective(1600px) rotateX(var(--lx,0deg)) rotateY(var(--ly2,0deg));transform-style:preserve-3d}}

/* ---------- 7. hero depth on scroll (set by JS) ---------- */
.hero-l,.hero-r{will-change:transform,opacity}

@media (prefers-reduced-motion:reduce){
  html.intro-on .wl-intro{display:none}
  .wl-rail{transition:none}
  .foot-word .fl,.dcard img{transform:none !important;opacity:1 !important;transition:none !important}
  #work .lap{transform:none !important}
}