/* ════════════════════════════════════════════════════════════════
   NULL SPACE — Premium Motion Design System
   Apple Vision Pro · VisionOS · Linear App · Awwwards Quality
   ════════════════════════════════════════════════════════════════ */

:root {
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.52, 0.64, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-card,.h-astro,.svc-card,.p-card,.nav,.hero__chip,.rv,.rv-r{will-change:transform,opacity}

/* 1. BODY LOAD FADE */
body{opacity:0;transition:opacity 0.5s ease}
body.ns-ready{opacity:1}

/* 2. SCROLL PROGRESS BAR */
.ns-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:2000;pointer-events:none;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg,var(--acc),#7AB8FF);box-shadow:0 0 10px rgba(58,141,255,.55),0 0 20px rgba(58,141,255,.22)}

/* 3. CURSOR GLOW */
.ns-cursor{position:fixed;z-index:0;pointer-events:none;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(58,141,255,.042) 0%,rgba(58,141,255,.012) 40%,transparent 70%);transform:translate(-50%,-50%);transition:left 0.18s ease,top 0.18s ease,opacity 0.4s;opacity:0}
.ns-cursor.ns-cursor--visible{opacity:1}

/* 4. NAV ENTRANCE */
.nav{transform:translateY(-110%);transition:transform 0.9s var(--ease),background 0.3s ease,box-shadow 0.35s ease}
.nav.nav-in{transform:translateY(0)}
.nav.scrolled{box-shadow:0 4px 28px rgba(0,0,0,0.08)}

/* Nav underline */
.nl{position:relative;overflow:hidden}
.nl::after{content:'';position:absolute;bottom:4px;left:16px;right:16px;height:1.5px;border-radius:2px;background:var(--t1);transform:scaleX(0);transform-origin:left;transition:transform 0.35s var(--ease)}
.nl:hover::after,.nl.active::after{transform:scaleX(1)}

/* 5. HERO LINE REVEAL */
.hero__h1 .line-wrap{display:block;overflow:hidden;padding-bottom:0.05em}
.hero__h1 .line-inner{display:block;transform:translateY(108%);opacity:0;transition:transform 1.1s var(--ease),opacity 0.9s ease}
.hero__h1 .line-inner.line-in{transform:translateY(0);opacity:1}

/* Eyebrow */
.hero__eyebrow-wrap{overflow:hidden;display:block;margin-bottom:14px}
.hero__eyebrow-inner{display:block;transform:translateY(120%);opacity:0;transition:transform 0.9s var(--ease),opacity 0.7s ease}
.hero__eyebrow-inner.in{transform:translateY(0);opacity:1}

/* Paragraph */
.hero__p{opacity:0;transform:translateY(18px);transition:opacity 0.9s ease,transform 0.9s var(--ease)}
.hero__p.in{opacity:1;transform:none}

/* CTA wrapper */
.hero__actions-wrap{opacity:0;transform:scale(0.94) translateY(10px);transition:opacity 0.7s ease,transform 0.9s var(--ease-spring)}
.hero__actions-wrap.in{opacity:1;transform:none}

/* 6. STATUS CHIP */
.hero__chip{opacity:0;transform:translateY(18px) scale(0.97);transition:opacity 0.9s ease,transform 0.9s var(--ease)}
.hero__chip.chip-in{opacity:1;transform:none}

/* 7. PANEL DEPTH EMERGENCE */
.hero-card{opacity:0;transform:perspective(1100px) translateZ(-70px) translateY(28px) scale(0.93);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.hero-card.card-in{opacity:1;transform:perspective(1100px) translateZ(0) translateY(0) scale(1)}

/* 8. ASTRONAUT FLOAT-IN */
.h-astro{opacity:0;transform:translateX(80px) translateY(24px) rotate(7deg);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);cursor:pointer;-webkit-tap-highlight-color:transparent}
.h-astro.astro-in{opacity:1;transform:none}
.h-astro.astro-in:active img{transform:scale(0.96) translateY(2px);transition:transform 0.1s ease}
@media(hover:hover){
  .h-astro.astro-in:hover img{transform:rotateX(3deg) rotateY(-3deg) scale(1.02)}
}

.h-astro.floating {animation:float-loop 5s ease-in-out infinite}
@keyframes float-loop{0%,100%{transform:translateY(0px)}50%{transform:translateY(-4px)}}

/* Planet */
.h-planet{animation:planet-spin 22s linear infinite;transition:opacity 0.8s ease}
@keyframes planet-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* 9. ORBIT LINES DRAW */
.orbit-path{fill:none;stroke:rgba(0,0,0,0.07);stroke-width:1;stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 2.5s var(--ease) 0.3s}
.orbit-path.drawn{stroke-dashoffset:0}

/* 10. SCROLL REVEALS */
.rv{opacity:0;transform:translateY(32px);transition:opacity 0.8s var(--ease),transform 0.8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-r{opacity:0;transform:translateX(32px);transition:opacity 0.8s var(--ease),transform 0.8s var(--ease)}
.rv-r.in{opacity:1;transform:none}
.rv[data-d="0"],.rv-r[data-d="0"]{transition-delay:0ms}
.rv[data-d="1"],.rv-r[data-d="1"]{transition-delay:90ms}
.rv[data-d="2"],.rv-r[data-d="2"]{transition-delay:180ms}
.rv[data-d="3"],.rv-r[data-d="3"]{transition-delay:270ms}
.rv[data-d="4"],.rv-r[data-d="4"]{transition-delay:360ms}

/* 10.5. SERVICE CARDS STAGGERED ENTRANCE */
@keyframes svc-fall-0 {
  0% { opacity: 0; transform: perspective(1200px) translateY(-300px) scale(0.85) rotateX(15deg) rotateZ(-3deg); filter: blur(4px); }
  60% { opacity: 1; transform: perspective(1200px) translateY(12px) scale(1.02) rotateX(-2deg) rotateZ(1deg); filter: blur(0px); }
  100% { opacity: 1; transform: perspective(1200px) translateY(0) scale(1) rotateX(0deg) rotateZ(0deg); filter: blur(0px); }
}
@keyframes svc-fall-1 {
  0% { opacity: 0; transform: perspective(1200px) translateY(-350px) scale(0.85) rotateX(15deg) rotateZ(2deg); filter: blur(4px); }
  60% { opacity: 1; transform: perspective(1200px) translateY(12px) scale(1.02) rotateX(-2deg) rotateZ(-1deg); filter: blur(0px); }
  100% { opacity: 1; transform: perspective(1200px) translateY(0) scale(1) rotateX(0deg) rotateZ(0deg); filter: blur(0px); }
}
@keyframes svc-fall-2 {
  0% { opacity: 0; transform: perspective(1200px) translateY(-400px) scale(0.85) rotateX(15deg) rotateZ(-1deg); filter: blur(4px); }
  60% { opacity: 1; transform: perspective(1200px) translateY(12px) scale(1.02) rotateX(-2deg) rotateZ(0.5deg); filter: blur(0px); }
  100% { opacity: 1; transform: perspective(1200px) translateY(0) scale(1) rotateX(0deg) rotateZ(0deg); filter: blur(0px); }
}

.svc-card.rv:not(.in) {
  opacity: 0;
  filter: blur(4px);
}
.svc-card.rv[data-d="0"]:not(.in) { transform: perspective(1200px) translateY(-300px) scale(0.85) rotateX(15deg) rotateZ(-3deg); }
.svc-card.rv[data-d="1"]:not(.in) { transform: perspective(1200px) translateY(-350px) scale(0.85) rotateX(15deg) rotateZ(2deg); }
.svc-card.rv[data-d="2"]:not(.in) { transform: perspective(1200px) translateY(-400px) scale(0.85) rotateX(15deg) rotateZ(-1deg); }

.svc-card.rv.in {
  animation-duration: 1.2s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-fill-mode: backwards;
}
.svc-card.rv[data-d="0"].in { animation-name: svc-fall-0; animation-delay: 0ms; }
.svc-card.rv[data-d="1"].in { animation-name: svc-fall-1; animation-delay: 120ms; }
.svc-card.rv[data-d="2"].in { animation-name: svc-fall-2; animation-delay: 240ms; }

/* 11. CARD HOVER */
.svc-card{transition:transform 0.3s ease,box-shadow 0.3s ease,border-color 0.3s ease;transform-style:preserve-3d;backface-visibility:hidden}
.svc-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 32px 72px rgba(0,0,0,0.15),var(--bv2)}
.p-card{transition:transform 0.5s var(--ease),box-shadow 0.5s var(--ease)}
.p-card:hover{transform:translateY(-5px);box-shadow:0 48px 96px rgba(0,0,0,0.13),var(--bv2)}
.hero__chip{transition:transform 0.35s var(--ease),box-shadow 0.35s var(--ease),opacity 0.9s ease}
.hero__chip:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--md),var(--bv)}

/* 12. BUTTON SPRING */
.btn-dark,.btn-outline,.nav__cta{transition:transform 0.28s var(--ease-spring),box-shadow 0.28s var(--ease)}
.btn-dark:hover,.nav__cta:hover{transform:translateY(-2.5px);box-shadow:0 10px 32px rgba(0,0,0,0.28),inset 0 1px 0 rgba(255,255,255,0.12)}
.btn-dark:active,.nav__cta:active{transform:scale(0.955) translateY(1px)!important;box-shadow:0 2px 8px rgba(0,0,0,0.2)!important;transition:transform 0.08s ease}
.btn-outline:hover{transform:translateY(-1.5px)}
.btn-outline:active{transform:scale(0.96)!important;transition:transform 0.08s}

/* 13. ORB */
.send-orb{transition:transform 0.5s var(--ease-spring)}
.send-orb:hover{transform:scale(1.1) rotate(12deg)}
.send-orb:active{transform:scale(0.94) rotate(0deg)!important;transition:transform 0.1s}
.orb__r--1{animation:spin 12s linear infinite}
.orb__r--2{animation:spin 8s linear infinite reverse}
.orb__r--3{animation:spin 5s linear infinite}
.orb__r--4{animation:spin 3s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}

/* 14. GLOWS */
@keyframes glow-green{0%,100%{box-shadow:0 0 6px rgba(34,197,94,0.42)}50%{box-shadow:0 0 16px rgba(34,197,94,0.72),0 0 28px rgba(34,197,94,0.18)}}
.chip__dot{animation:glow-green 2.4s ease-in-out infinite}
@keyframes glow-blue-orb{0%,100%{box-shadow:0 5px 20px rgba(58,141,255,0.48),0 0 0 2px rgba(58,141,255,0.13),inset 0 1px 0 rgba(255,255,255,0.28)}50%{box-shadow:0 8px 36px rgba(58,141,255,0.70),0 0 0 3px rgba(58,141,255,0.22),0 0 56px rgba(58,141,255,0.14),inset 0 1px 0 rgba(255,255,255,0.3)}}
.orb__core{animation:glow-blue-orb 2.8s ease-in-out infinite}
@keyframes glow-blue-hud{0%,100%{box-shadow:0 0 7px rgba(58,141,255,0.45)}50%{box-shadow:0 0 18px rgba(58,141,255,0.75),0 0 30px rgba(58,141,255,0.18)}}
.p-hud-dot{animation:glow-blue-hud 2s ease-in-out infinite}

/* 15. CONTACT PANEL */
.c-panel{opacity:0;transform:perspective(900px) translateZ(-40px) translateY(20px) scale(0.96);transition:opacity 0.9s var(--ease),transform 0.9s var(--ease)}
.c-panel.in{opacity:1;transform:perspective(900px) translateZ(0) translateY(0) scale(1)}

/* 16. FORM INPUT */
.f-inp{transition:border-color 0.25s ease,box-shadow 0.25s ease,background 0.25s ease,transform 0.2s ease}
.f-inp:focus{border-color:var(--acc);background:var(--w);box-shadow:inset 0 2px 4px rgba(0,0,0,.02),0 0 0 3px rgba(58,141,255,.1);transform:translateY(-1px)}

/* 17. FOOTER SOCIAL */
.footer__ico{transition:transform 0.35s var(--ease-spring),box-shadow 0.35s var(--ease),color 0.2s ease}
.footer__ico:hover{transform:translateY(-4px) scale(1.1);box-shadow:0 8px 20px rgba(0,0,0,.1),var(--bv);color:var(--t1)}

/* 18. ARROW HOVER */
.p-arrow{transition:transform 0.3s var(--ease-spring),background 0.2s ease,box-shadow 0.3s ease}
.p-arrow:hover{transform:scale(1.12)}
.p-arrow:active{transform:scale(0.9)!important;transition:transform 0.08s}

/* 19. ORBIT RINGS */
.c-orbit__r1{animation:spin 20s linear infinite}
.c-orbit__r2{animation:spin 12s linear infinite reverse}
.c-channel{transition:box-shadow 0.3s ease,transform 0.25s var(--ease)}
.c-channel:hover{transform:translateY(-1px);box-shadow:var(--sm),var(--bv)}

/* 20. PROJECT TAG */
.p-tag{transition:background 0.25s ease,color 0.25s ease,border-color 0.25s ease}
.p-card:hover .p-tag{background:rgba(58,141,255,0.08);color:var(--acc);border-color:rgba(58,141,255,0.18)}
.p-card__link{transition:gap 0.3s var(--ease),color 0.2s}
.p-card__link:hover{gap:11px}
.btn-outline svg{transition:transform 0.3s var(--ease)}
.btn-outline:hover svg{transform:translateX(3px)}

.about__astro img{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 0.4s var(--ease-spring),filter 0.4s ease}
.about__astro img:active{transform:scale(0.92) translateY(4px);filter:drop-shadow(0 8px 16px rgba(58,141,255,0.3));transition:transform 0.1s ease,filter 0.1s ease}
@media(hover:hover){
  .about__astro img:hover{transform:scale(1.08) translateY(-6px);filter:drop-shadow(0 20px 30px rgba(58,141,255,0.2))}
}

/* 21. SITTING ASTRO */
#astro-sit{animation:float-sit 8s cubic-bezier(0.45,0.05,0.55,0.95) infinite}
@keyframes float-sit{0%,100%{transform:translateY(0px)}40%{transform:translateY(-10px) rotate(1deg)}70%{transform:translateY(4px) rotate(-0.5deg)}}

/* 22. PARALLAX */
.parallax-bg,.parallax-mid,.parallax-fore{will-change:transform}

/* REDUCED MOTION */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
  body{opacity:1!important}
  .nav{transform:none!important}
}