/* Premium details: floating 3D objects, drawn lines, staggered reveals, refined hover effects.
   Everything animated is switched off for visitors who prefer reduced motion. */
:root{--ease:cubic-bezier(.22,1,.36,1)}

/* ---------- Floating objects (pure CSS 3D) ---------- */
.deco{position:absolute;inset:0;z-index:0;pointer-events:none}
.d{position:absolute;translate:0 calc(var(--hp,0) * var(--k,1) * -90px)}      /* scroll parallax (hero) */
.showcase .d{translate:0 calc((var(--p,.5) - .5) * var(--k,1) * -140px)}       /* scroll parallax (laptop) */
.m{perspective:600px;transform:translate3d(calc(var(--mx,0) * var(--mxk,10) * 1px),calc(var(--my,0) * var(--myk,8) * 1px),0)}
.d-orb{--k:1;right:14%;top:17%;--mxk:-14;--myk:-10}
.d-orb2{--k:.5;right:31%;top:15%;--mxk:8;--myk:6}
.d-ring{--k:1.6;right:8%;top:55%;--mxk:-9;--myk:-7}
.d-cube{--k:.8;right:27%;top:68%;--mxk:12;--myk:9}
.d-s-orb{--k:1;left:11%;top:26%;--mxk:12;--myk:8}
.d-s-cube{--k:1.3;right:11%;top:62%;--mxk:-10;--myk:-8}

/* glass-and-chrome sphere */
.orb{position:relative;width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle at 30% 26%,#fff 0 4%,rgba(255,255,255,.85) 8%,#a9dcff 20%,#5b4dff 52%,#1b0f55 100%);
  box-shadow:inset -10px -14px 22px rgba(0,0,0,.5),inset 8px 8px 16px rgba(255,255,255,.3),0 24px 44px rgba(91,46,255,.45);
  animation:float 7s ease-in-out infinite}
.orb::after{content:"";position:absolute;left:14%;top:10%;width:34%;height:22%;border-radius:50%;background:rgba(255,255,255,.55);filter:blur(5px)}
.orb.small{width:38px;height:38px;animation-duration:5.5s;animation-delay:-2s;box-shadow:inset -5px -7px 12px rgba(0,0,0,.5),inset 4px 4px 9px rgba(255,255,255,.3),0 12px 22px rgba(255,61,154,.4);
  background:radial-gradient(circle at 30% 26%,#fff 0 5%,#ffd0e8 20%,#ff3d9a 55%,#4a0f3a 100%)}

/* spinning chrome ring */
.ring{width:116px;height:116px;border-radius:50%;
  background:conic-gradient(from 20deg,#fff,#8fb4ff,#2b2b52,#d6ecff,#ff9ad0,#6b4dff,#fff);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 14px),#000 calc(100% - 13px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 14px),#000 calc(100% - 13px));
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.55));animation:ringspin 16s linear infinite}

/* glass cube */
.cube{position:relative;width:58px;height:58px;transform-style:preserve-3d;animation:cubespin 24s linear infinite}
.cube i{position:absolute;inset:0;border-radius:8px;border:1.5px solid rgba(255,255,255,.5);
  background:linear-gradient(135deg,rgba(255,255,255,.26),rgba(0,194,255,.1) 60%,rgba(255,61,154,.14));box-shadow:inset 0 0 16px rgba(255,255,255,.16)}
.cube i:nth-child(1){transform:translateZ(29px)}
.cube i:nth-child(2){transform:rotateY(180deg) translateZ(29px)}
.cube i:nth-child(3){transform:rotateY(90deg) translateZ(29px)}
.cube i:nth-child(4){transform:rotateY(-90deg) translateZ(29px)}
.cube i:nth-child(5){transform:rotateX(90deg) translateZ(29px)}
.cube i:nth-child(6){transform:rotateX(-90deg) translateZ(29px)}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes ringspin{from{transform:rotateX(68deg) rotateZ(0)}to{transform:rotateX(68deg) rotateZ(360deg)}}
@keyframes cubespin{from{transform:rotateX(-22deg) rotateY(0)}to{transform:rotateX(338deg) rotateY(360deg)}}

/* ---------- Lines that draw themselves ---------- */
.line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}
.line path{fill:none;stroke:url(#lg1);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:1;opacity:.85;
  filter:drop-shadow(0 0 5px rgba(0,194,255,.55))}
.hero-line path{stroke-dashoffset:calc(1 - var(--hp,0))}
.show-line path{stroke:url(#lg2);stroke-dashoffset:calc(1 - var(--p,.5))}
.line .dot{fill:#fff;opacity:0;transition:opacity .3s;filter:drop-shadow(0 0 8px #00c2ff) drop-shadow(0 0 18px #5b2eff)}

/* ---------- Staggered text reveal (only when decor.js has prepared the text) ---------- */
.fx .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.fx .wi{display:inline-block;transform:translateY(112%);opacity:0;filter:blur(6px);
  transition:transform .9s var(--ease),opacity .7s var(--ease),filter .7s var(--ease)}
.fx .rv{opacity:0;translate:0 22px;filter:blur(6px);
  transition:opacity .8s var(--ease),translate .9s var(--ease),filter .8s var(--ease),transform .45s var(--ease),box-shadow .4s var(--ease),border-color .35s}
.fx .on .wi,.fx.on .wi{transform:none;opacity:1;filter:none;transition-delay:calc(var(--i,0) * 70ms)}
.fx .on .rv,.fx .rv.on{opacity:1;translate:none;filter:none;
  transition-delay:calc(var(--i,0) * 70ms),calc(var(--i,0) * 70ms),calc(var(--i,0) * 70ms),0s,0s,0s}
/* gradient headings keep their colour when split into words */
.fx .gradient-text .wi{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Refined buttons ---------- */
.btn{position:relative;overflow:hidden;transition:transform var(--speed),box-shadow var(--speed),translate .25s var(--ease)}
.btn:not(.btn-ghost)::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);
  transform:translateX(-130%);transition:transform .8s var(--ease);pointer-events:none}
.btn:not(.btn-ghost):hover::after{transform:translateX(130%)}
.btn:not(.btn-ghost):hover{box-shadow:0 14px 38px rgba(91,46,255,.55)}
.btn .arr{display:inline-block;margin-left:10px;transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}

/* ---------- Cards and images ---------- */
.cards .card{transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.cards .card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(91,46,255,.28),0 0 0 1px rgba(0,194,255,.25)}
.project img{transition:transform .8s var(--ease)}
.project:hover img{transform:scale(1.045)}

/* ---------- Phones: keep it light ---------- */
@media (max-width:700px){
  .d-orb2,.d-ring,.d-cube,.d-s-cube{display:none}
  .line.desk{display:none}
  .line.mob{display:block}      /* phones get their own, tall version of the scroll-drawn lines */
  .d-orb{right:7%;top:11%}.d-orb .orb{width:56px;height:56px}
  .d-s-orb{left:8%;top:13%}
}
@media (min-width:701px) and (max-width:1000px){.d-cube,.d-orb2{display:none}.d-ring{right:4%}}

/* ---------- Reduced motion: calm, static ---------- */
@media (prefers-reduced-motion:reduce){
  .orb,.ring,.cube{animation:none}
  .ring{transform:rotateX(68deg)}
  .cube{transform:rotateX(-22deg) rotateY(35deg)}
  .line path{stroke-dashoffset:0!important}
  .line .dot{display:none}
  .d,.showcase .d,.m{translate:none;transform:none}
}

/* ---------- Sample projects: gentle 3D float while the cursor is in the Work section ----------
   decor.js adds "alive" to #work when the mouse enters it; --amp eases from 0 to 1 so the motion
   fades in and out smoothly instead of snapping. The card under the cursor also tilts toward it. */
@property --amp{syntax:"<number>";inherits:true;initial-value:0}
@media (hover:hover) and (pointer:fine){
  .fx #work .cards{perspective:1200px;--amp:0;transition:--amp .9s var(--ease)}
  .fx #work.alive .cards{--amp:1}
  .fx #work .project{animation:card-float 7s ease-in-out infinite;
    transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(var(--lift,0px));
    transition:transform .5s var(--ease),box-shadow .4s var(--ease)}
  .fx #work .project:nth-child(2){animation-delay:-1.1s}
  .fx #work .project:nth-child(3){animation-delay:-2.3s}
  .fx #work .project:nth-child(4){animation-delay:-3.4s}
  .fx #work .project:nth-child(5){animation-delay:-4.6s}
  .fx #work .project:nth-child(6){animation-delay:-5.7s}
  .fx #work .cards .card.project:hover{--lift:26px}
}
@keyframes card-float{
  0%,100%{translate:0 0;rotate:1 0 0 0deg}
  33%{translate:0 calc(var(--amp) * -9px);rotate:1 -1 0 calc(var(--amp) * 2.4deg)}
  66%{translate:0 calc(var(--amp) * -4px);rotate:-1 -1 0 calc(var(--amp) * 2deg)}
}


/* ---------- Touch devices (phones, tablets): lighter effects so scrolling stays smooth ----------
   Heavy effects (full-screen blur, blend modes, filters that change every frame) make phones stutter. */
@media (hover:none),(pointer:coarse){
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(11,11,30,.97)}
  .grain{mix-blend-mode:normal;opacity:.04}
  .swirl{filter:blur(36px);animation-duration:80s;will-change:auto}
  .swirl.two{display:none}
  .fx .wi,.fx .rv{filter:none!important}
  .laptop{filter:drop-shadow(0 30px 36px rgba(0,0,0,.5))!important}       /* fixed shadow, not recalculated each frame */
  /* Laptop glow on phones: a soft gradient instead of a blurred shape (phone browsers can draw a blurred shape un-blurred and
     outside its section), and the sections clip everything that tries to leave them. */
  .glow{filter:none;border-radius:0;left:-12%;right:-12%;top:0;bottom:-18%;
    background:radial-gradient(closest-side,rgba(91,46,255,.5),rgba(255,61,154,.2) 55%,transparent 78%)}
  .stage,.show-stage,.gate-stage{clip-path:inset(0)}
  .gate-glow,.gate-fade{will-change:auto}
  .orb,.ring,.cube{will-change:auto}
}


/* ---------- Scroll-drawn lines made for phones (400 x 800 drawing) ---------- */
.line.mob{display:none}
@media (max-width:700px){.line.mob{display:block}}   /* after the line above, so phones show it */
.line.mob path{stroke-width:1.6;opacity:.8;filter:none}
.hero-line.mob path{stroke:url(#lg1m)}
.show-line.mob path{stroke:url(#lg2m)}
.line.mob path.halo{stroke-width:6;opacity:.16}                     /* a soft wide stroke instead of a glow filter (light for phones) */
.line.mob circle{filter:none;opacity:0}
.line.mob .dot{fill:#fff}
.line.mob .halo-dot{fill:#00c2ff;transition:opacity .3s}
@media (prefers-reduced-motion:reduce){.line.mob .halo-dot{display:none}}