/* Pointer-led depth; native cursors and controls stay available. */
.premium-hero { background: radial-gradient(ellipse at 80% 85%, #edf0ff, transparent 52%), radial-gradient(ellipse at 15% 15%, #e5f1ff, transparent 48%), #fff; padding: 145px 0 155px; border-bottom: 1px solid #dbe8fa; }
.premium-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(#2557d609 1px, transparent 1px), linear-gradient(90deg, #2557d609 1px, transparent 1px); background-size: 90px 90px; mask-image: linear-gradient(#000, transparent 90%); }
.premium-hero .hero-title { color: #1742a0; max-width: 1050px; margin: 0 auto 28px; font-size: clamp(2.7rem, 5.6vw, 5rem); text-shadow: 0 7px 30px #2557d60b; }
.premium-hero .hero-title span { color: var(--primary); }
.premium-hero .hero-tag { color: #315dba; letter-spacing: .22em; }
.premium-hero .hero-subtitle { color: #526278; max-width: 680px; }
.premium-hero .hero-btns > a:not(.btn-cta) { color: #254a89 !important; }
.premium-hero .btn-cta { background: #2557d6; color: #fff !important; box-shadow: 0 8px 26px #2557d625; }
.premium-hero .btn-cta:hover { background: #193fa8; box-shadow: 0 12px 35px #2557d633; }
.hero-spotlight { position: absolute; width: 660px; height: 660px; left: var(--light-x, 50%); top: var(--light-y, 45%); transform: translate(-50%, -50%); background: radial-gradient(circle, #91bcff24, transparent 65%); pointer-events: none; }
.motion-toggle { position: absolute; right: 26px; top: 22px; z-index: 3; color: #31558e; background: #ffffffb3; border: 1px solid #cfdef5; border-radius: 30px; padding: 7px 13px; font-size: 11px; font-weight: 600; cursor: pointer; }
.motion-toggle:hover { background: #eaf2ff; color: #193fa8; }
.premium-hero .ambient-blob { opacity: .2; }
.premium-hero .depth-scene { overflow: visible; }
.premium-hero .depth-scene > * { translate: calc(var(--scene-x, 0px) * var(--depth-factor, 1)) calc(var(--scene-y, 0px) * var(--depth-factor, 1)); }
.premium-hero .depth-orb-blue { width: 155px; left: -70px; top: 45%; opacity: .65; --depth-factor: .5; }
.premium-hero .depth-orb-orange { width: 55px; right: 17%; bottom: 9%; opacity: .7; --depth-factor: 1.4; }
.premium-hero .depth-ring { width: 240px; right: -130px; top: 21%; opacity: .45; border-width: 16px; --depth-factor: .6; }
.premium-hero .depth-tile { display: none; }
.premium-hero .depth-grid { opacity: .65; background-image: linear-gradient(#8ae4d229 1px, transparent 1px), linear-gradient(90deg, #8ae4d229 1px, transparent 1px); }
.premium-hero .sky-car-one { width: 150px; top: 10%; left: 6%; --depth-factor: 1.2; animation: top-flight-left 17s ease-in-out infinite; }
.premium-hero .sky-car-two { width: 128px; top: 16%; right: 7%; bottom: auto; --depth-factor: 1.6; animation: top-flight-right 20s ease-in-out infinite -6s; }
.premium-hero .sky-car img { filter: drop-shadow(0 14px 18px #2557d632); transform: perspective(550px) rotateY(-12deg); }
.sky-car::after { content: ''; position: absolute; width: 80px; height: 2px; right: 88%; top: 65%; background: linear-gradient(90deg, transparent, #84e5d5a6); box-shadow: -12px 7px 0 #84e5d524; }
.drop-robot { position: absolute; width: 62px; z-index: 1; pointer-events: none; filter: drop-shadow(0 10px 12px #2557d62b); opacity: 0; }
.drop-robot img { display: block; width: 100%; height: auto; }
.drop-robot::after { content: ''; position: absolute; left: 24%; right: 24%; bottom: -3%; height: 24%; border-radius: 50%; background: radial-gradient(ellipse, #4c8fff99, transparent 70%); filter: blur(5px); animation: drop-thrust .8s ease-in-out infinite alternate; }
.drop-robot-one { left: 18%; top: 15%; animation: robot-jump-one 17s cubic-bezier(.2,.75,.25,1) infinite; }
.drop-robot-two { right: 18%; top: 20%; animation: robot-jump-two 20s cubic-bezier(.2,.75,.25,1) infinite -6s; }
.premium-hero .sky-robot { width: clamp(128px, 15vw, 205px); left: 50%; top: 49%; bottom: auto; --depth-factor: 1.8; animation: robot-center-drop 7s cubic-bezier(.22,.8,.24,1) infinite; z-index: 1; opacity: .34; pointer-events: none; }
.premium-hero .sky-robot img { filter: drop-shadow(0 17px 22px #2557d62a); transform: translate(var(--eye-x, 0px), var(--eye-y, 0px)); }
.motion-cursor { position: fixed; left: 0; top: 0; width: 32px; height: 32px; margin: -16px 0 0 -16px; border: 1px solid #38aa9ba6; border-radius: 50%; z-index: 1055; pointer-events: none; opacity: 0; transition: opacity .2s, width .25s, height .25s, margin .25s, background .25s; }
.motion-cursor.is-visible { opacity: 1; }
.motion-cursor.is-active { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: #6095ff0d; border-color: #3975df; }
.depth-card { position: relative; isolation: isolate; }
.depth-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--shine-x, 50%) var(--shine-y, 50%), #86dbcf25, transparent 65%); opacity: 0; transition: opacity .4s; }
.depth-card:hover::after { opacity: 1; }
.nav-links a:not(.btn-cta) { position: relative; }
.nav-links a:not(.btn-cta)::after { content: ''; position: absolute; bottom: -7px; left: 0; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }
.project-reveal-card:focus-within .reveal-content { max-height: 1000px; opacity: 1; margin-top: 25px; }
.project-reveal-card:focus-within .project-link { transform: none; opacity: 1; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .depth-card.is-tracking { transition: box-shadow .35s, border-color .35s !important; }
  .depth-card:hover { transform: perspective(1100px) rotateX(var(--depth-x, 0deg)) rotateY(var(--depth-y, 0deg)) translateY(-5px); box-shadow: 0 25px 55px #14243b14; }
  .magnetic-button { translate: var(--magnet-x, 0px) var(--magnet-y, 0px); transition: translate .35s cubic-bezier(.2,.8,.2,1), background .25s, box-shadow .25s; }
}
.motion-paused .depth-scene *, .motion-paused .hero-spotlight { animation-play-state: paused !important; translate: none !important; }
.motion-paused .depth-card { transform: none !important; }
.motion-paused .motion-cursor { display: none; }
@media (hover: none), (pointer: coarse) {
  .motion-cursor { display: none; }
  .project-reveal-card .reveal-content { max-height: none; opacity: 1; margin-top: 20px; }
  .project-reveal-card .project-link { transform: none; opacity: 1; }
  .project-reveal-card .expand-hint { display: none; }
}
@media (max-width: 767px) {
  .premium-hero { padding: 125px 0 145px; }
  .premium-hero .hero-title { font-size: clamp(2.5rem, 9vw, 3.6rem); }
  .premium-hero .sky-car-one { width: 96px; top: 8%; left: 2%; }
  .premium-hero .sky-car-two { width: 86px; top: 15%; right: 2%; }
  .premium-hero .sky-robot { width: 96px; top: 48%; left: 50%; }
  .drop-robot { width: 43px; }
  .drop-robot-one { left: 15%; }
  .drop-robot-two { right: 15%; }
  .premium-hero .depth-orb-blue { opacity: .25; }
  .motion-toggle { right: 16px; top: 18px; }
}

@keyframes robot-jump-one {
  0%, 15% { opacity: 0; transform: translateY(-8px) scale(.42) rotate(0); }
  19% { opacity: 1; transform: translateY(24px) scale(.58) rotate(-5deg); }
  27% { opacity: 1; transform: translateY(82px) scale(.72) rotate(8deg); }
  39% { opacity: 1; transform: translateY(205px) scale(.82) rotate(-7deg); }
  49% { opacity: 1; transform: translateY(292px) scale(.88) rotate(4deg); }
  54% { opacity: 1; transform: translateY(316px) scale(1.04,.88) rotate(0); }
  62% { opacity: .95; transform: translateY(296px) scale(.92,1.02) rotate(0); }
  73%, 100% { opacity: 0; transform: translateY(350px) scale(.86) rotate(0); }
}
@keyframes robot-jump-two {
  0%, 17% { opacity: 0; transform: translateY(-8px) scale(.42) rotate(0); }
  21% { opacity: 1; transform: translateY(24px) scale(.58) rotate(5deg); }
  29% { opacity: 1; transform: translateY(78px) scale(.72) rotate(-8deg); }
  41% { opacity: 1; transform: translateY(196px) scale(.82) rotate(7deg); }
  51% { opacity: 1; transform: translateY(288px) scale(.88) rotate(-4deg); }
  56% { opacity: 1; transform: translateY(312px) scale(1.04,.88) rotate(0); }
  64% { opacity: .95; transform: translateY(293px) scale(.92,1.02) rotate(0); }
  75%, 100% { opacity: 0; transform: translateY(345px) scale(.86) rotate(0); }
}
@keyframes drop-thrust { from { opacity: .28; transform: scale(.65); } to { opacity: 1; transform: scale(1.3); } }

/* Cinematic hero pass: readable staging with two staggered releases. */
.premium-hero .sky-car-one { width: 158px; top: 8%; left: 4%; animation: cinematic-car-one 14s cubic-bezier(.45,.05,.35,1) infinite; z-index: 4; }
.premium-hero .sky-car-two { width: 136px; top: 13%; right: 4%; animation: cinematic-car-two 16s cubic-bezier(.45,.05,.35,1) infinite -7s; z-index: 4; }
.premium-hero .sky-car::after { width: 110px; height: 3px; top: 64%; opacity: .8; background: linear-gradient(90deg, transparent, #2557d68f); box-shadow: 0 8px 0 #8fc1ff55, 0 -8px 0 #d8eaff77; }
.premium-hero .drop-robot { width: 98px; opacity: 0; z-index: 6; filter: drop-shadow(0 11px 18px #2557d650) contrast(1.32) saturate(1.24) brightness(.94); }
.premium-hero .drop-robot-one { left: 27%; top: 19%; animation: cinematic-drop-one 14s cubic-bezier(.2,.8,.2,1) infinite -1.8s; }
.premium-hero .drop-robot-two { right: 27%; top: 22%; animation: cinematic-drop-two 16s cubic-bezier(.2,.8,.2,1) infinite -9s; }
.premium-hero .drop-robot::before { content: ''; position: absolute; z-index: -1; left: 15%; right: 15%; bottom: -12px; height: 45px; border-radius: 50%; background: radial-gradient(ellipse, #5e9dff99, transparent 68%); filter: blur(8px); animation: cinematic-glow 1s ease-in-out infinite alternate; }
.premium-hero .drop-robot::after { left: 27%; right: 27%; bottom: -8px; height: 26px; background: linear-gradient(#d4edff, #3d86ff); filter: blur(5px); }
.premium-hero .sky-robot { width: 145px; top: 59%; opacity: .18; animation: cinematic-center-hover 8s ease-in-out infinite; z-index: 2; }
.premium-hero .sky-robot img { filter: contrast(1.25) saturate(1.15) drop-shadow(0 12px 22px #2557d62c); }
@keyframes cinematic-car-one { 0%, 100% { transform: translate3d(-12px, 0, 0) rotate(-4deg); } 42% { transform: translate3d(26vw, -12px, 0) rotate(2deg); } 56%, 68% { transform: translate3d(31vw, 0, 0) rotate(0); } }
@keyframes cinematic-car-two { 0%, 100% { transform: translate3d(12px, 0, 0) rotate(4deg); } 42% { transform: translate3d(-26vw, -10px, 0) rotate(-2deg); } 56%, 68% { transform: translate3d(-31vw, 0, 0) rotate(0); } }
@keyframes cinematic-drop-one { 0%, 24% { opacity: 0; transform: translate3d(0, -12px, 0) scale(.48) rotate(0); } 30% { opacity: 1; transform: translate3d(-14px, 34px, 0) scale(.68) rotate(-7deg); } 40% { transform: translate3d(10px, 108px, 0) scale(.85) rotate(8deg); } 51% { transform: translate3d(-5px, 200px, 0) scale(.98) rotate(-4deg); } 57% { transform: translate3d(0, 220px, 0) scale(1.08,.88); } 64% { transform: translate3d(0, 208px, 0) scale(.97,1.03); } 76%, 100% { opacity: 0; transform: translate3d(0, 245px, 0) scale(.9); } }
@keyframes cinematic-drop-two { 0%, 28% { opacity: 0; transform: translate3d(0, -12px, 0) scale(.48) rotate(0); } 34% { opacity: 1; transform: translate3d(14px, 34px, 0) scale(.68) rotate(7deg); } 44% { transform: translate3d(-10px, 104px, 0) scale(.85) rotate(-8deg); } 55% { transform: translate3d(5px, 198px, 0) scale(.98) rotate(4deg); } 61% { transform: translate3d(0, 218px, 0) scale(1.08,.88); } 68% { transform: translate3d(0, 206px, 0) scale(.97,1.03); } 80%, 100% { opacity: 0; transform: translate3d(0, 242px, 0) scale(.9); } }
@keyframes cinematic-glow { from { opacity: .35; transform: scale(.65); } to { opacity: .95; transform: scale(1.2); } }
@keyframes cinematic-center-hover { 0%, 100% { transform: translate(-50%, 8px) scale(.98); } 50% { transform: translate(-50%, -8px) scale(1); } }
@media (max-width: 767px) {
  .premium-hero .sky-car-one { width: 100px; top: 8%; left: 2%; }
  .premium-hero .sky-car-two { width: 88px; top: 14%; right: 2%; }
  .premium-hero .drop-robot { width: 54px; }
  .premium-hero .drop-robot-one { left: 22%; top: 19%; }
  .premium-hero .drop-robot-two { right: 22%; top: 22%; }
  .premium-hero .sky-robot { width: 100px; top: 59%; }
}

@keyframes top-flight-left {
  0%, 100% { transform: translate3d(-10px, 0, 0) rotate(-4deg); }
  35% { transform: translate3d(27vw, -15px, 0) rotate(3deg); }
  70% { transform: translate3d(56vw, 5px, 0) rotate(-2deg); }
}
@keyframes top-flight-right {
  0%, 100% { transform: translate3d(10px, 5px, 0) rotate(5deg); }
  38% { transform: translate3d(-25vw, -18px, 0) rotate(-3deg); }
  72% { transform: translate3d(-52vw, 2px, 0) rotate(2deg); }
}
@keyframes robot-center-drop {
  0%, 18% { transform: translate(-50%, 95px) scale(.72); opacity: 0; }
  30% { transform: translate(-50%, 0) scale(1); opacity: .34; }
  42%, 78% { transform: translate(-50%, -8px) scale(1); opacity: .34; }
  88%, 100% { transform: translate(-50%, 0) scale(.96); opacity: .28; }
}
@media (prefers-reduced-motion: reduce) {
  .premium-hero .depth-scene * { animation: none !important; translate: none !important; }
  .motion-cursor, .hero-spotlight { display: none; }
  .depth-card, .magnetic-button { transform: none !important; translate: none !important; transition: none !important; }
  [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}