/* MASTER-J final polish: full-bleed hero + portrait integration; no public pricing. */
.hero {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #010704 !important;
}
.hero-backdrop {
  z-index: 0 !important;
  background: transparent !important;
}
.hero-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(90deg, rgba(0,12,6,.10) 0%, rgba(0,8,4,.22) 47%, rgba(0,7,4,.12) 100%),
    linear-gradient(0deg, rgba(0,8,4,.16), transparent 34%, rgba(0,8,4,.08)),
    url("assets/hero-workspace.webp");
  background-size: cover;
  background-position: center 48%;
  background-repeat: no-repeat;
}
.hero-backdrop > * { z-index: 1; }
.hero-layout {
  position: relative !important;
  z-index: 2 !important;
  width: min(calc(100% - 80px), 1500px) !important;
  max-width: 1500px !important;
  margin: 0 auto !important;
  grid-template-columns: 36% 28% 36% !important;
  gap: 0 !important;
  padding: 0 !important;
}
.portrait-panel {
  position: absolute !important;
  z-index: 3 !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 43% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  perspective: none !important;
  pointer-events: none;
}
.portrait-frame {
  position: absolute !important;
  inset: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  isolation: auto !important;
}
.portrait-frame::before { content: none !important; }
.portrait-frame::after,
.portrait-edge,
.portrait-caption,
.portrait-side-label,
.portrait-hud { display: none !important; }
.portrait-aura {
  position: absolute !important;
  display: block !important;
  z-index: 0 !important;
  width: 95% !important;
  height: 120% !important;
  left: -10% !important;
  top: -10% !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse, rgba(0,255,125,.22), rgba(0,170,85,.10) 46%, transparent 74%) !important;
  filter: blur(28px) !important;
  box-shadow: none !important;
  opacity: .78 !important;
}
.hero-portrait {
  position: absolute !important;
  display: block !important;
  z-index: 1 !important;
  width: auto !important;
  height: 132% !important;
  max-width: none !important;
  aspect-ratio: 1 / 1;
  left: -2% !important;
  bottom: -19% !important;
  object-fit: cover !important;
  object-position: center 20% !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: contrast(1.08) saturate(1.14) drop-shadow(0 8px 24px rgba(0,0,0,.20)) !important;
  mix-blend-mode: screen !important;
  transform: none !important;
  -webkit-mask-image: radial-gradient(ellipse 80% 102% at 42% 48%, #000 54%, rgba(0,0,0,.96) 69%, rgba(0,0,0,.62) 84%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 80% 102% at 42% 48%, #000 54%, rgba(0,0,0,.96) 69%, rgba(0,0,0,.62) 84%, transparent 100%) !important;
}
.hero-copy {
  grid-column: 2 !important;
  position: relative !important;
  z-index: 5 !important;
  min-width: 0 !important;
  padding-left: 20px !important;
}
.workspace-panel {
  grid-column: 3 !important;
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
}

/* Mobile keeps the panorama and a softly blended portrait, not a photo card. */
@media (max-width: 980px) {
  .hero { width: 100vw !important; }
  .hero-backdrop::before { background-position: 48% center; }
  .hero-layout {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 0 28px !important;
  }
  .portrait-panel {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: clamp(270px, 72vw, 430px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    order: 1 !important;
  }
  .portrait-frame { inset: 0 !important; overflow: hidden !important; }
  .portrait-aura { width: 88% !important; height: 110% !important; left: 6% !important; top: -2% !important; }
  .hero-portrait {
    height: 135% !important;
    width: auto !important;
    left: 50% !important;
    bottom: -20% !important;
    transform: translateX(-50%) !important;
    object-position: center 18% !important;
    -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000 60%, rgba(0,0,0,.88) 78%, transparent 100%) !important;
    mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000 60%, rgba(0,0,0,.88) 78%, transparent 100%) !important;
  }
  .hero-copy { order: 2 !important; grid-column: auto !important; padding: 26px 22px 24px !important; }
  .workspace-panel { display: none !important; }
}



/* MASTER-J hero portrait: blend the real portrait directly into the panoramic scene. */
@media (min-width: 981px) {
  .hero-layout {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    grid-template-columns: 38% 29% 33% !important;
    overflow: visible !important;
  }
  .portrait-panel {
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(43vw, 680px) !important;
    height: 100% !important;
    overflow: visible !important;
  }
  .portrait-frame {
    inset: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }
  .hero-portrait {
    height: 118% !important;
    width: auto !important;
    max-width: none !important;
    left: -1% !important;
    top: 0 !important;
    bottom: auto !important;
    object-fit: cover !important;
    object-position: center 18% !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    mix-blend-mode: screen !important;
    -webkit-mask-image: radial-gradient(ellipse 90% 104% at 42% 49%, #000 57%, rgba(0,0,0,.96) 70%, rgba(0,0,0,.66) 84%, transparent 100%) !important;
    mask-image: radial-gradient(ellipse 90% 104% at 42% 49%, #000 57%, rgba(0,0,0,.96) 70%, rgba(0,0,0,.66) 84%, transparent 100%) !important;
  }
  .hero-copy {
    grid-column: 2 !important;
    padding-left: clamp(12px, 2vw, 32px) !important;
  }
  .workspace-panel { grid-column: 3 !important; }
}

/* Small animated desktop companion: follows the pointer and tumbles on click. */
.cursor-android {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 76px;
  height: 88px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translate3d(-120px, -120px, 0);
  will-change: transform;
  filter: drop-shadow(0 7px 10px rgba(0,0,0,.45));
  transition: opacity .2s ease, visibility .2s ease;
}
.cursor-android.is-visible { opacity: 1; visibility: visible; }
.android-figure {
  position: absolute;
  inset: 0;
  transform-origin: 50% 82%;
}
.android-shadow {
  position: absolute;
  width: 43px;
  height: 9px;
  left: 17px;
  bottom: 1px;
  border-radius: 50%;
  background: rgba(0,0,0,.48);
  filter: blur(4px);
  transform: scaleX(.9);
}
.android-antenna {
  position: absolute;
  width: 3px;
  height: 10px;
  left: 36px;
  top: 1px;
  border-radius: 5px;
  background: #9bffe0;
  box-shadow: 0 0 8px #00ff99;
}
.android-antenna::before {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  left: -2px;
  top: -5px;
  border-radius: 50%;
  background: #00f596;
  box-shadow: 0 0 10px #00ff99;
}
.android-head {
  position: absolute;
  z-index: 3;
  top: 9px;
  left: 13px;
  width: 50px;
  height: 39px;
  border: 2px solid rgba(127,255,209,.9);
  border-radius: 17px 17px 14px 14px;
  background: linear-gradient(145deg,#263d3a 0%,#091512 48%,#020806 100%);
  box-shadow: inset 0 2px 5px rgba(255,255,255,.18), inset 0 -5px 9px rgba(0,0,0,.8), 0 0 12px rgba(0,255,144,.48);
}
.android-head::after {
  content: "";
  position: absolute;
  inset: 5px 5px 6px;
  border-radius: 11px;
  border: 1px solid rgba(0,255,152,.14);
  background: linear-gradient(120deg,rgba(0,255,150,.08),transparent 55%);
}
.android-eye {
  position: absolute;
  z-index: 2;
  top: 15px;
  width: 6px;
  height: 9px;
  border-radius: 5px;
  background: #54ffc0;
  box-shadow: 0 0 7px #00ff9d, 0 0 13px rgba(0,255,157,.9);
  animation: android-blink 4s infinite;
}
.android-eye.left { left: 12px; }
.android-eye.right { right: 12px; }
.android-mouth {
  position: absolute;
  z-index: 2;
  width: 8px;
  height: 2px;
  bottom: 8px;
  left: 19px;
  border-radius: 4px;
  background: #a5ffe0;
  box-shadow: 0 0 6px #00ff9d;
}
.android-ear {
  position: absolute;
  z-index: 1;
  top: 21px;
  width: 7px;
  height: 13px;
  border-radius: 4px;
  background: linear-gradient(#6effc5,#0a6041);
  box-shadow: 0 0 7px rgba(0,255,150,.45);
}
.android-ear.left { left: 8px; }
.android-ear.right { right: 8px; }
.android-body {
  position: absolute;
  z-index: 2;
  left: 23px;
  top: 48px;
  width: 31px;
  height: 25px;
  border: 2px solid #80ffd2;
  border-radius: 9px 9px 11px 11px;
  background: linear-gradient(145deg,#263d3a,#07110e 70%);
  box-shadow: inset 0 2px 5px rgba(255,255,255,.13), 0 0 10px rgba(0,255,150,.3);
}
.android-core {
  position: absolute;
  width: 9px;
  height: 9px;
  left: 9px;
  top: 6px;
  border: 2px solid #68ffc3;
  border-radius: 50%;
  box-shadow: 0 0 8px #00ff9d, inset 0 0 4px #00ff9d;
}
.android-arm {
  position: absolute;
  z-index: 1;
  top: 51px;
  width: 9px;
  height: 22px;
  border: 1px solid #7dffd0;
  border-radius: 6px;
  background: linear-gradient(90deg,#132722,#557c6e,#101d19);
  transform-origin: 50% 5px;
}
.android-arm.left { left: 15px; transform: rotate(22deg); }
.android-arm.right { right: 12px; transform: rotate(-22deg); }
.android-leg {
  position: absolute;
  z-index: 1;
  top: 68px;
  width: 10px;
  height: 17px;
  border: 1px solid #83ffd1;
  border-radius: 4px 4px 5px 5px;
  background: linear-gradient(90deg,#07120e,#5d8a79,#0a1712);
  transform-origin: 50% 3px;
}
.android-leg.left { left: 27px; }
.android-leg.right { left: 42px; }
.android-boot {
  position: absolute;
  bottom: -1px;
  left: -2px;
  width: 14px;
  height: 5px;
  border-radius: 5px 5px 3px 3px;
  background: #9affdc;
  box-shadow: 0 0 6px #00ff9d;
}
.android-spark {
  position: absolute;
  right: -2px;
  top: 12px;
  color: #8affd2;
  font-size: 13px;
  text-shadow: 0 0 9px #00ff9d;
  animation: android-sparkle 1.8s ease-in-out infinite;
}
.cursor-android.is-running .android-arm.left { animation: android-arm-run .22s ease-in-out infinite alternate; }
.cursor-android.is-running .android-arm.right { animation: android-arm-run .22s ease-in-out infinite alternate-reverse; }
.cursor-android.is-running .android-leg.left { animation: android-leg-run .22s ease-in-out infinite alternate; }
.cursor-android.is-running .android-leg.right { animation: android-leg-run .22s ease-in-out infinite alternate-reverse; }
.cursor-android.is-running .android-figure { animation: android-bob .18s ease-in-out infinite alternate; }
.cursor-android.is-falling .android-figure { animation: android-fall .68s cubic-bezier(.2,.85,.3,1) both; }
.cursor-android.is-falling .android-shadow { animation: android-shadow-fall .68s ease both; }
.cursor-android.is-getting-up .android-figure { animation: android-get-up .42s cubic-bezier(.34,1.5,.64,1) both; }
.cursor-android.is-falling .android-arm,
.cursor-android.is-getting-up .android-arm { animation: none !important; }
.android-oops {
  position: absolute;
  top: -9px;
  right: -27px;
  padding: 3px 6px;
  border: 1px solid rgba(0,255,157,.55);
  border-radius: 8px 8px 8px 2px;
  background: rgba(0,20,12,.9);
  color: #aaffd9;
  font: 700 8px/1.2 Arial,sans-serif;
  letter-spacing: .5px;
  opacity: 0;
  transform: translateY(5px) scale(.8);
  transition: .15s ease;
}
.cursor-android.is-falling .android-oops { opacity: 1; transform: translateY(0) scale(1); }
@keyframes android-bob { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes android-arm-run { from { transform: rotate(32deg); } to { transform: rotate(-35deg); } }
@keyframes android-leg-run { from { transform: rotate(28deg); } to { transform: rotate(-32deg); } }
@keyframes android-fall { 0% { transform: rotate(0) translateY(0); } 38% { transform: rotate(58deg) translateY(7px); } 66% { transform: rotate(108deg) translateY(20px); } 100% { transform: rotate(90deg) translateY(22px); } }
@keyframes android-shadow-fall { 0%,100% { transform: scaleX(.9); opacity: .85; } 65% { transform: scaleX(1.35); opacity: .5; } }
@keyframes android-get-up { 0% { transform: rotate(90deg) translateY(22px); } 65% { transform: rotate(-12deg) translateY(-4px); } 100% { transform: rotate(0) translateY(0); } }
@keyframes android-blink { 0%,46%,50%,100% { transform: scaleY(1); } 48% { transform: scaleY(.12); } }
@keyframes android-sparkle { 0%,100% { opacity: .3; transform: scale(.8) rotate(-12deg); } 50% { opacity: 1; transform: scale(1.15) rotate(12deg); } }
@media (max-width: 980px) { .cursor-android { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .cursor-android { transition: none; }
  .cursor-android.is-running .android-figure,
  .cursor-android.is-running .android-arm,
  .cursor-android.is-running .android-leg { animation: none !important; }
}

/* ================================================================
   MASTER-J LIVE SHOWCASE — one continuous scene behind hero + cards
   ================================================================ */
.home-showcase {
  position: relative !important;
  isolation: isolate !important;
  width: 100% !important;
  overflow: hidden !important;
  background: #010704 !important;
}
.home-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(0, 7, 4, .08) 0%, rgba(0, 9, 5, .14) 48%, rgba(0, 8, 5, .28) 100%),
    linear-gradient(90deg, rgba(0, 8, 4, .03), rgba(0, 8, 4, .04) 55%, rgba(0, 7, 4, .16)),
    url("assets/hero-workspace.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 47%;
  transform: scale(1.015);
}
.home-showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 13% 30%, rgba(0, 255, 112, .16), transparent 38%),
    linear-gradient(180deg, transparent 0%, rgba(0, 10, 6, .05) 52%, rgba(0, 8, 5, .28) 100%);
}
.home-showcase .hero {
  width: 100% !important;
  max-width: none !important;
  height: 350px !important;
  min-height: 350px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  isolation: auto !important;
}
.home-showcase .hero-backdrop { display: none !important; }
.home-showcase .hero-layout {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 350px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 29% 34% 37% !important;
  gap: 0 !important;
  align-items: stretch !important;
}
.home-showcase .portrait-panel {
  position: absolute !important;
  z-index: 4 !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: min(43vw, 560px) !important;
  height: 350px !important;
  min-height: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}
.home-showcase .portrait-frame {
  position: absolute !important;
  inset: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.home-showcase .portrait-frame::before,
.home-showcase .portrait-frame::after,
.home-showcase .portrait-edge,
.home-showcase .portrait-caption,
.home-showcase .portrait-side-label,
.home-showcase .portrait-hud { display: none !important; }
.home-showcase .portrait-aura {
  display: block !important;
  position: absolute !important;
  left: -13% !important;
  top: -12% !important;
  width: 112% !important;
  height: 125% !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse, rgba(0, 255, 125, .23), rgba(0, 185, 92, .10) 49%, transparent 76%) !important;
  filter: blur(30px) !important;
  animation: auraBreathe 5s ease-in-out infinite !important;
}
.home-showcase .hero-portrait {
  position: absolute !important;
  display: block !important;
  z-index: 2 !important;
  width: auto !important;
  height: 128% !important;
  max-width: none !important;
  left: -5% !important;
  top: -5% !important;
  bottom: auto !important;
  object-fit: cover !important;
  object-position: center 17% !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  mix-blend-mode: screen !important;
  filter: contrast(1.09) saturate(1.16) drop-shadow(0 7px 24px rgba(0, 0, 0, .24)) !important;
  transform: translate3d(var(--portrait-x, 0px), var(--portrait-y, 0px), 0) rotateX(var(--portrait-rx, 0deg)) rotateY(var(--portrait-ry, 0deg)) scale(var(--portrait-scale, 1)) !important;
  transform-origin: 50% 72% !important;
  transition: transform .18s ease-out, filter .28s ease !important;
  will-change: transform, filter;
  -webkit-mask-image: radial-gradient(ellipse 88% 108% at 45% 48%, #000 48%, rgba(0, 0, 0, .97) 63%, rgba(0, 0, 0, .72) 79%, rgba(0, 0, 0, .26) 92%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 88% 108% at 45% 48%, #000 48%, rgba(0, 0, 0, .97) 63%, rgba(0, 0, 0, .72) 79%, rgba(0, 0, 0, .26) 92%, transparent 100%) !important;
}
.home-showcase .portrait-panel.is-reacting .hero-portrait {
  filter: contrast(1.12) saturate(1.23) drop-shadow(0 0 24px rgba(0, 255, 135, .24)) !important;
}
.home-showcase .hero-copy {
  grid-column: 2 !important;
  position: relative !important;
  z-index: 5 !important;
  align-self: center !important;
  min-width: 0 !important;
  max-width: 440px !important;
  margin: 0 !important;
  padding: 13px 16px 14px 8px !important;
  background: transparent !important;
}
.home-showcase .hero-copy h1 {
  font-size: clamp(34px, 3.45vw, 54px) !important;
  line-height: 1.01 !important;
  letter-spacing: -2.6px !important;
}
.home-showcase .eyebrow { margin-bottom: 12px !important; font-size: clamp(7px, .55vw, 9px) !important; }
.home-showcase .hero-description { margin: 11px 0 16px !important; max-width: 390px !important; font-size: clamp(9px, .72vw, 12px) !important; line-height: 1.55 !important; }
.home-showcase .hero-buttons { gap: 10px !important; }
.home-showcase .primary-cta,
.home-showcase .secondary-cta { min-height: 40px !important; padding: 0 15px !important; font-size: 10px !important; border-radius: 10px !important; }
.home-showcase .hero-highlights { margin-top: 17px !important; gap: clamp(10px, 1.35vw, 22px) !important; }
.home-showcase .highlight-item { font-size: 8px !important; }
.home-showcase .hero-bottom-note { display: none !important; }
.home-showcase .workspace-panel {
  grid-column: 3 !important;
  position: relative !important;
  z-index: 3 !important;
  min-height: 350px !important;
  height: 350px !important;
  overflow: visible !important;
  background: transparent !important;
}
.home-showcase .desk-scene,
.home-showcase .coffee-cup,
.home-showcase .workspace-label { display: none !important; }
.home-showcase .quote-block { left: -36px !important; top: 43px !important; }
.home-showcase .neon-poster { right: 10px !important; top: 8px !important; }
.home-showcase .hero-scroll-cue { display: none !important; }
.home-showcase .projects-section {
  position: relative !important;
  z-index: 5 !important;
  width: min(calc(100% - 128px), 1450px) !important;
  max-width: 1450px !important;
  margin: -1px auto 0 !important;
  padding: 0 0 48px !important;
  background: transparent !important;
}
.home-showcase .project-grid { position: relative; z-index: 2; gap: clamp(9px, .8vw, 14px) !important; }
.home-showcase .project-card {
  background: linear-gradient(155deg, rgba(2, 17, 10, .76), rgba(1, 8, 5, .82)) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 13px 30px rgba(0, 0, 0, .38), inset 0 0 22px rgba(0, 255, 136, .035) !important;
}
.home-showcase .project-card:hover { background: linear-gradient(155deg, rgba(2, 20, 12, .70), rgba(1, 9, 6, .78)) !important; }
.home-showcase .project-footnote { color: #b8d4c2 !important; }

/* The portrait is a floating part of the scene, not a boxed image card. */
@media (min-width: 981px) {
  .home-showcase .hero { height: clamp(350px, 37vh, 430px) !important; min-height: clamp(350px, 37vh, 430px) !important; }
  .home-showcase .hero-layout { min-height: clamp(350px, 37vh, 430px) !important; }
  .home-showcase .portrait-panel { height: clamp(350px, 37vh, 430px) !important; }
  .home-showcase .workspace-panel { height: clamp(350px, 37vh, 430px) !important; min-height: clamp(350px, 37vh, 430px) !important; }
}
@media (max-width: 980px) {
  .home-showcase::before { background-position: 42% center; background-size: auto 100%; }
  .home-showcase .hero { height: auto !important; min-height: 0 !important; overflow: hidden !important; }
  .home-showcase .hero-layout { display: flex !important; flex-direction: column !important; height: auto !important; min-height: 0 !important; }
  .home-showcase .portrait-panel { position: relative !important; left: auto !important; top: auto !important; bottom: auto !important; width: 100% !important; height: clamp(260px, 68vw, 400px) !important; min-height: 0 !important; overflow: hidden !important; order: 1; }
  .home-showcase .portrait-frame { overflow: hidden !important; }
  .home-showcase .hero-portrait { height: 135% !important; left: 50% !important; top: -9% !important; transform: translate3d(calc(-50% + var(--portrait-x, 0px)), var(--portrait-y, 0px), 0) scale(var(--portrait-scale, 1)) !important; }
  .home-showcase .hero-copy { order: 2; grid-column: auto !important; max-width: none !important; padding: 22px 22px 28px !important; }
  .home-showcase .workspace-panel { display: none !important; }
  .home-showcase .projects-section { width: calc(100% - 28px) !important; padding-bottom: 36px !important; }
  .home-showcase .project-card { background: rgba(1, 10, 6, .84) !important; }
}

/* ================================================================
   LIVING ANDROID — articulated running, falling, sitting and kneeling
   ================================================================ */
.cursor-android {
  width: 88px !important;
  height: 108px !important;
  z-index: 10001 !important;
  filter: drop-shadow(0 9px 13px rgba(0, 0, 0, .52)) drop-shadow(0 0 9px rgba(0, 255, 157, .16)) !important;
}
.android-figure { transform-origin: 50% 83% !important; animation: android-idle-life 2.5s ease-in-out infinite !important; }
.android-head { transform-origin: 50% 82% !important; animation: android-head-curious 4.2s ease-in-out infinite; }
.android-brow { position: absolute; top: 10px; width: 9px; height: 2px; border-radius: 3px; background: #c4ffe4; box-shadow: 0 0 4px #00ff9d; z-index: 3; }
.android-brow.left { left: 9px; transform: rotate(-8deg); }
.android-brow.right { right: 9px; transform: rotate(8deg); }
.android-eye { transition: transform .15s ease, height .15s ease; }
.android-cheek { position: absolute; z-index: 2; bottom: 9px; width: 5px; height: 3px; border-radius: 50%; background: rgba(255, 98, 135, .88); box-shadow: 0 0 6px rgba(255, 45, 100, .55); opacity: .58; }
.android-cheek.left { left: 8px; }
.android-cheek.right { right: 8px; }
.android-mouth { width: 8px !important; height: 3px !important; bottom: 7px !important; left: 19px !important; border-radius: 2px 2px 6px 6px !important; transition: .16s ease; }
.android-hand { position: absolute; left: -2px; bottom: -3px; width: 12px; height: 10px; border: 1px solid #9bffdb; border-radius: 45% 45% 55% 55%; background: linear-gradient(135deg, #86ffd1, #164638 65%); box-shadow: 0 0 6px rgba(0, 255, 157, .3); }
.android-knee { position: absolute; top: 6px; left: 1px; width: 8px; height: 8px; border: 1px solid rgba(146, 255, 215, .75); border-radius: 50%; background: #1c5240; }
.android-panel-light { position: absolute; left: 5px; right: 5px; bottom: 3px; height: 2px; border-radius: 3px; background: linear-gradient(90deg, transparent, #00ffa0, transparent); box-shadow: 0 0 6px #00ff9d; }
.android-oops { z-index: 6; top: -12px !important; right: -31px !important; }
.android-emote { position: absolute; z-index: 7; left: -8px; top: -12px; opacity: 0; font-size: 15px; text-shadow: 0 0 9px #00ffb2; transform: scale(.4) rotate(-25deg); }
.cursor-android.is-visible .android-figure { animation: android-idle-life 2.5s ease-in-out infinite; }
.cursor-android.is-running .android-figure { animation: android-run-bounce .17s ease-in-out infinite alternate !important; }
.cursor-android.is-running .android-head { animation: android-run-head .25s ease-in-out infinite alternate; }
.cursor-android.is-running .android-arm.left { animation: android-run-arm-a .2s ease-in-out infinite alternate !important; }
.cursor-android.is-running .android-arm.right { animation: android-run-arm-b .2s ease-in-out infinite alternate !important; }
.cursor-android.is-running .android-leg.left { animation: android-run-leg-a .2s ease-in-out infinite alternate !important; }
.cursor-android.is-running .android-leg.right { animation: android-run-leg-b .2s ease-in-out infinite alternate !important; }
.cursor-android.is-running .android-antenna { animation: android-antenna-run .2s ease-in-out infinite alternate; }
.cursor-android.is-falling .android-figure { animation: android-fall-body .58s cubic-bezier(.18,.78,.25,1) forwards !important; }
.cursor-android.is-falling .android-head { animation: android-head-flop .58s ease-in forwards; }
.cursor-android.is-falling .android-arm.left { animation: android-fall-arm-left .58s ease-out forwards !important; }
.cursor-android.is-falling .android-arm.right { animation: android-fall-arm-right .58s ease-out forwards !important; }
.cursor-android.is-falling .android-leg.left { animation: android-fall-leg-left .58s ease-out forwards !important; }
.cursor-android.is-falling .android-leg.right { animation: android-fall-leg-right .58s ease-out forwards !important; }
.cursor-android.is-falling .android-eye { transform: scaleY(.15); }
.cursor-android.is-falling .android-mouth { width: 9px !important; height: 8px !important; border-radius: 50% !important; bottom: 5px !important; }
.cursor-android.is-falling .android-emote { animation: android-show-emote .6s ease-out forwards; }
.cursor-android.is-sitting .android-figure { animation: android-sit-body .38s cubic-bezier(.2,.8,.3,1) forwards !important; }
.cursor-android.is-sitting .android-arm.left { animation: android-sit-arm-left .38s ease-out forwards !important; }
.cursor-android.is-sitting .android-arm.right { animation: android-sit-arm-right .38s ease-out forwards !important; }
.cursor-android.is-sitting .android-leg.left { animation: android-sit-leg-left .38s ease-out forwards !important; }
.cursor-android.is-sitting .android-leg.right { animation: android-sit-leg-right .38s ease-out forwards !important; }
.cursor-android.is-sitting .android-mouth { height: 5px !important; width: 6px !important; border-radius: 50% !important; }
.cursor-android.is-kneeling .android-figure { animation: android-kneel-body .42s ease-out forwards !important; }
.cursor-android.is-kneeling .android-arm.left { animation: android-kneel-arm-left .42s ease-out forwards !important; }
.cursor-android.is-kneeling .android-arm.right { animation: android-kneel-arm-right .42s ease-out forwards !important; }
.cursor-android.is-kneeling .android-leg.left { animation: android-kneel-leg-left .42s ease-out forwards !important; }
.cursor-android.is-kneeling .android-leg.right { animation: android-kneel-leg-right .42s ease-out forwards !important; }
.cursor-android.is-getting-up .android-figure { animation: android-get-up-life .62s cubic-bezier(.2,.9,.25,1) forwards !important; }
.cursor-android.is-getting-up .android-arm.left { animation: android-get-arm-left .62s ease-out forwards !important; }
.cursor-android.is-getting-up .android-arm.right { animation: android-get-arm-right .62s ease-out forwards !important; }
.cursor-android.is-getting-up .android-leg.left,
.cursor-android.is-getting-up .android-leg.right { animation: android-get-leg .62s ease-out forwards !important; }
.cursor-android.is-getting-up .android-head { animation: android-get-head .62s ease-out forwards; }
.cursor-android.is-falling .android-oops,
.cursor-android.is-sitting .android-oops,
.cursor-android.is-kneeling .android-oops { opacity: 1; transform: translateY(0) scale(1); }
.cursor-android.is-getting-up .android-emote { opacity: 0; }
.cursor-android .android-shadow { transition: transform .3s ease, opacity .3s ease; }
.cursor-android.is-falling .android-shadow { transform: scaleX(1.45); opacity: .55; }
.cursor-android.is-sitting .android-shadow,
.cursor-android.is-kneeling .android-shadow { transform: scaleX(1.22); opacity: .62; }

@keyframes android-idle-life { 0%,100% { transform: translateY(0) rotate(0); } 45% { transform: translateY(-3px) rotate(-1deg); } 55% { transform: translateY(-2px) rotate(1deg); } }
@keyframes android-head-curious { 0%,72%,100% { transform: rotate(0); } 78% { transform: rotate(-7deg); } 88% { transform: rotate(5deg); } }
@keyframes android-run-bounce { from { transform: translateY(1px) rotate(-7deg) skewX(-2deg); } to { transform: translateY(-5px) rotate(5deg) skewX(2deg); } }
@keyframes android-run-head { from { transform: rotate(-7deg) translateY(1px); } to { transform: rotate(7deg) translateY(-2px); } }
@keyframes android-run-arm-a { from { transform: rotate(48deg); } to { transform: rotate(-65deg); } }
@keyframes android-run-arm-b { from { transform: rotate(-65deg); } to { transform: rotate(48deg); } }
@keyframes android-run-leg-a { from { transform: rotate(38deg) translateY(-1px); } to { transform: rotate(-52deg) translateY(2px); } }
@keyframes android-run-leg-b { from { transform: rotate(-52deg) translateY(2px); } to { transform: rotate(38deg) translateY(-1px); } }
@keyframes android-antenna-run { from { transform: rotate(-13deg); } to { transform: rotate(15deg); } }
@keyframes android-fall-body { 0% { transform: rotate(0) translateY(0); } 24% { transform: rotate(-16deg) translate(-3px, 3px); } 48% { transform: rotate(36deg) translate(8px, 3px); } 72% { transform: rotate(96deg) translate(12px, 17px); } 88% { transform: rotate(78deg) translate(9px, 23px); } 100% { transform: rotate(84deg) translate(8px, 22px); } }
@keyframes android-head-flop { 0% { transform: rotate(0); } 32% { transform: rotate(-26deg); } 60% { transform: rotate(34deg); } 100% { transform: rotate(22deg); } }
@keyframes android-fall-arm-left { 0% { transform: rotate(22deg); } 45% { transform: rotate(110deg); } 100% { transform: rotate(136deg) translateY(1px); } }
@keyframes android-fall-arm-right { 0% { transform: rotate(-22deg); } 45% { transform: rotate(-108deg); } 100% { transform: rotate(-148deg) translateY(2px); } }
@keyframes android-fall-leg-left { 0% { transform: rotate(0); } 55% { transform: rotate(50deg); } 100% { transform: rotate(70deg); } }
@keyframes android-fall-leg-right { 0% { transform: rotate(0); } 55% { transform: rotate(-42deg); } 100% { transform: rotate(-62deg); } }
@keyframes android-sit-body { from { transform: rotate(84deg) translate(8px,22px); } to { transform: rotate(4deg) translate(-1px, 15px); } }
@keyframes android-sit-arm-left { from { transform: rotate(136deg); } to { transform: rotate(122deg) translateY(3px); } }
@keyframes android-sit-arm-right { from { transform: rotate(-148deg); } to { transform: rotate(-118deg) translateY(3px); } }
@keyframes android-sit-leg-left { from { transform: rotate(70deg); } to { transform: rotate(83deg) translateY(-2px); } }
@keyframes android-sit-leg-right { from { transform: rotate(-62deg); } to { transform: rotate(-92deg) translateY(1px); } }
@keyframes android-kneel-body { from { transform: rotate(4deg) translate(-1px,15px); } to { transform: rotate(-10deg) translate(1px, 10px) scale(.96); } }
@keyframes android-kneel-arm-left { from { transform: rotate(122deg); } to { transform: rotate(72deg) translate(1px, 4px); } }
@keyframes android-kneel-arm-right { from { transform: rotate(-118deg); } to { transform: rotate(-86deg) translate(-1px, 2px); } }
@keyframes android-kneel-leg-left { from { transform: rotate(83deg); } to { transform: rotate(118deg) translateY(2px); } }
@keyframes android-kneel-leg-right { from { transform: rotate(-92deg); } to { transform: rotate(-22deg) translateY(-2px); } }
@keyframes android-get-up-life { 0% { transform: rotate(-10deg) translate(1px,10px) scale(.96); } 34% { transform: rotate(-38deg) translate(-4px,5px) scale(.94); } 68% { transform: rotate(8deg) translate(0,-4px) scale(1.02); } 88% { transform: rotate(-5deg) translate(0,1px); } 100% { transform: rotate(0) translate(0,0) scale(1); } }
@keyframes android-get-arm-left { from { transform: rotate(72deg); } to { transform: rotate(22deg); } }
@keyframes android-get-arm-right { from { transform: rotate(-86deg); } to { transform: rotate(-22deg); } }
@keyframes android-get-leg { from { transform: rotate(55deg); } to { transform: rotate(0); } }
@keyframes android-get-head { 0% { transform: rotate(22deg); } 100% { transform: rotate(0); } }
@keyframes android-show-emote { 0% { opacity: 0; transform: translateY(5px) scale(.4) rotate(-25deg); } 40% { opacity: 1; transform: translateY(-7px) scale(1.2) rotate(12deg); } 100% { opacity: 0; transform: translateY(-18px) scale(.7) rotate(20deg); } }

/* Electric sparks burst exactly where the visitor clicks. */
.click-sparks { position: fixed; inset: 0; z-index: 10000; pointer-events: none; overflow: visible; }
.electric-burst { position: fixed; width: 2px; height: 2px; pointer-events: none; transform: translate(-50%, -50%); }
.electric-ring { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; border: 1px solid rgba(92, 255, 193, .95); border-radius: 50%; box-shadow: 0 0 10px #00ffad, inset 0 0 8px rgba(0,255,173,.55); transform: translate(-50%, -50%) scale(.2); animation: electric-ring-out .58s ease-out forwards; }
.electric-core { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: #d6fff0; box-shadow: 0 0 7px 3px #00ffae, 0 0 20px 7px rgba(0,255,157,.7); transform: translate(-50%, -50%); animation: electric-core-flash .32s ease-out forwards; }
.electric-ray { position: absolute; left: 50%; top: 50%; width: 2px; height: var(--ray-length, 28px); border-radius: 2px; transform-origin: 50% 100%; transform: translate(-50%, -100%) rotate(var(--ray-angle)) scaleY(.08); background: linear-gradient(180deg, rgba(226,255,246,.98), #00ffc0 55%, rgba(0,255,145,0)); box-shadow: 0 0 6px #00ffc0, 0 0 13px rgba(0,255,157,.78); animation: electric-ray-out .48s cubic-bezier(.15,.75,.35,1) forwards; }
.electric-particle { position: absolute; left: 50%; top: 50%; width: var(--particle-size, 3px); height: var(--particle-size, 3px); border-radius: 50%; background: #baffea; box-shadow: 0 0 7px 2px #00ffad; animation: electric-particle-out .56s ease-out forwards; }
@keyframes electric-ring-out { 0% { opacity: 1; transform: translate(-50%,-50%) scale(.2); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(5.8); } }
@keyframes electric-core-flash { 0% { opacity: 1; transform: translate(-50%,-50%) scale(.2); } 45% { opacity: 1; transform: translate(-50%,-50%) scale(1.6); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(.1); } }
@keyframes electric-ray-out { 0% { opacity: 1; transform: translate(-50%,-100%) rotate(var(--ray-angle)) scaleY(.08); } 32% { opacity: 1; transform: translate(-50%,-100%) rotate(var(--ray-angle)) scaleY(1); } 100% { opacity: 0; transform: translate(-50%,-100%) rotate(var(--ray-angle)) scaleY(.25); } }
@keyframes electric-particle-out { 0% { opacity: 1; transform: translate(-50%,-50%) rotate(var(--particle-angle)) translateX(4px) scale(1); } 100% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--particle-angle)) translateX(var(--particle-distance)) scale(.15); } }
@media (prefers-reduced-motion: reduce) {
  .android-figure, .android-head, .android-antenna { animation: none !important; }
  .electric-ray, .electric-ring, .electric-core, .electric-particle { animation-duration: .18s !important; }
}

/* 2026-10-31 portrait feather pass:
   Fade the square source image into the cinematic scene instead of clipping it
   at a visible vertical edge. The face stays solid; the outer/right edge softly
   dissolves into the workspace background. */
.home-showcase .hero-portrait {
  -webkit-mask-image: radial-gradient(
    ellipse 70% 112% at 23% 48%,
    #000 0%,
    #000 47%,
    rgba(0, 0, 0, .96) 58%,
    rgba(0, 0, 0, .78) 70%,
    rgba(0, 0, 0, .42) 82%,
    rgba(0, 0, 0, .12) 94%,
    transparent 100%
  ) !important;
  mask-image: radial-gradient(
    ellipse 70% 112% at 23% 48%,
    #000 0%,
    #000 47%,
    rgba(0, 0, 0, .96) 58%,
    rgba(0, 0, 0, .78) 70%,
    rgba(0, 0, 0, .42) 82%,
    rgba(0, 0, 0, .12) 94%,
    transparent 100%
  ) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
}

@media (max-width: 980px) {
  .home-showcase .hero-portrait {
    -webkit-mask-image: radial-gradient(
      ellipse 86% 106% at 50% 48%,
      #000 0%,
      #000 48%,
      rgba(0, 0, 0, .94) 62%,
      rgba(0, 0, 0, .70) 77%,
      rgba(0, 0, 0, .34) 91%,
      transparent 100%
    ) !important;
    mask-image: radial-gradient(
      ellipse 86% 106% at 50% 48%,
      #000 0%,
      #000 48%,
      rgba(0, 0, 0, .94) 62%,
      rgba(0, 0, 0, .70) 77%,
      rgba(0, 0, 0, .34) 91%,
      transparent 100%
    ) !important;
  }
}

/* ================================================================
   ANDROID DIRECTION + NATURAL GAIT PASS
   Front / profile / rear orientation is driven by smoothed travel vector.
   ================================================================ */
.cursor-android {
  overflow: visible !important;
  isolation: isolate;
  perspective: 520px;
  transform-style: preserve-3d;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.44)) drop-shadow(0 0 12px rgba(0,255,157,.2)) !important;
}
.cursor-android::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: 8px;
  top: 12px;
  width: 70px;
  height: 82px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,255,159,.24) 0%, rgba(0,255,159,.1) 42%, transparent 72%);
  filter: blur(11px);
  opacity: .72;
  transform: scale(.92);
  transition: opacity .25s ease, transform .25s ease;
}
.cursor-android.is-running::before {
  opacity: 1;
  animation: android-aura-run .42s ease-in-out infinite alternate;
}
.android-facing {
  position: absolute;
  inset: 0;
  transform: perspective(460px) rotateY(var(--android-yaw, 0deg));
  transform-origin: 50% 82%;
  transform-style: preserve-3d;
  will-change: transform;
}
.android-figure {
  transform-style: preserve-3d;
  backface-visibility: visible;
  will-change: transform;
}
.android-head,
.android-body {
  transform-style: preserve-3d;
  backface-visibility: visible;
}
.android-brow,
.android-eye,
.android-cheek,
.android-mouth {
  backface-visibility: hidden;
  transition: opacity .16s ease, transform .16s ease;
}
.android-back-head {
  position: absolute;
  z-index: 4;
  inset: 3px 3px 4px;
  border: 1px solid rgba(122,255,205,.82);
  border-radius: 13px 13px 11px 11px;
  background: linear-gradient(145deg, #18352d, #06110d 72%);
  box-shadow: inset 0 2px 5px rgba(255,255,255,.1), 0 0 10px rgba(0,255,150,.2);
  opacity: 0;
  visibility: hidden;
  transform: rotateY(180deg) translateZ(1.8px);
  backface-visibility: visible;
}
.android-back-head::before,
.android-back-head::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  height: 3px;
  border-radius: 5px;
  background: #4b9b7c;
  box-shadow: 0 0 5px rgba(0,255,150,.4);
}
.android-back-head::before { top: 11px; }
.android-back-head::after { top: 19px; left: 17px; right: 17px; opacity: .7; }
.android-back-body {
  position: absolute;
  z-index: 4;
  inset: 4px 5px 4px;
  border: 1px solid rgba(132,255,210,.72);
  border-radius: 6px;
  background: linear-gradient(135deg, #1b3d32, #07130e 70%);
  opacity: 0;
  visibility: hidden;
  transform: rotateY(180deg) translateZ(1.8px);
  backface-visibility: visible;
}
.android-back-body::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 7px;
  right: 7px;
  height: 6px;
  border-top: 1px solid rgba(105,255,194,.8);
  border-bottom: 1px solid rgba(105,255,194,.38);
}
.cursor-android.is-facing-back .android-brow,
.cursor-android.is-facing-back .android-eye,
.cursor-android.is-facing-back .android-cheek,
.cursor-android.is-facing-back .android-mouth,
.cursor-android.is-facing-back .android-core,
.cursor-android.is-facing-back .android-panel-light {
  opacity: 0 !important;
  visibility: hidden !important;
}
.cursor-android.is-facing-back .android-back-head,
.cursor-android.is-facing-back .android-back-body {
  opacity: 1;
  visibility: visible;
}
.cursor-android.is-facing-side-right .android-brow.left,
.cursor-android.is-facing-side-right .android-eye.left,
.cursor-android.is-facing-side-right .android-cheek.left,
.cursor-android.is-facing-side-left .android-brow.right,
.cursor-android.is-facing-side-left .android-eye.right,
.cursor-android.is-facing-side-left .android-cheek.right {
  opacity: .05 !important;
}
.android-dust {
  position: absolute;
  z-index: -1;
  left: 2px;
  bottom: 1px;
  width: 78px;
  height: 24px;
  pointer-events: none;
  opacity: 0;
}
.android-dust::before,
.android-dust::after,
.android-dust i,
.android-dust b {
  content: "";
  position: absolute;
  bottom: 2px;
  width: 12px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(167,255,221,.48), rgba(0,255,155,.13) 60%, transparent 100%);
  filter: blur(3px);
  opacity: 0;
}
.android-dust::before { left: 8px; }
.android-dust::after { left: 28px; }
.android-dust i { left: 47px; }
.android-dust b { left: 62px; }
.cursor-android.is-running .android-dust { opacity: 1; }
.cursor-android.is-running .android-dust::before { animation: android-dust-puff .36s ease-out infinite; }
.cursor-android.is-running .android-dust::after { animation: android-dust-puff .36s .09s ease-out infinite; }
.cursor-android.is-running .android-dust i { animation: android-dust-puff .36s .18s ease-out infinite; }
.cursor-android.is-running .android-dust b { animation: android-dust-puff .36s .27s ease-out infinite; }
.cursor-android.is-running .android-figure { animation: android-gait-bob .34s cubic-bezier(.45,0,.55,1) infinite !important; }
.cursor-android.is-running .android-head { animation: android-gait-head .34s ease-in-out infinite alternate !important; }
.cursor-android.is-running .android-arm.left { animation: android-gait-arm-left .34s ease-in-out infinite !important; }
.cursor-android.is-running .android-arm.right { animation: android-gait-arm-right .34s ease-in-out infinite !important; }
.cursor-android.is-running .android-leg.left { animation: android-gait-leg-left .34s ease-in-out infinite !important; }
.cursor-android.is-running .android-leg.right { animation: android-gait-leg-right .34s ease-in-out infinite !important; }
.cursor-android.is-running .android-antenna { animation: android-gait-antenna .34s ease-in-out infinite alternate !important; }
.cursor-android.is-running .android-shadow { transform: scaleX(1.12); opacity: .8; }
.cursor-android.is-falling .android-dust { opacity: 1; animation: android-impact-dust .55s ease-out forwards; }

@keyframes android-aura-run {
  from { transform: scale(.8); opacity: .55; }
  to { transform: scale(1.18); opacity: 1; }
}
@keyframes android-gait-bob {
  0%,100% { transform: translateY(1px) rotate(-2deg) scaleY(.99); }
  22% { transform: translateY(-4px) rotate(1.5deg) scaleY(1.025); }
  50% { transform: translateY(0) rotate(2deg) scaleY(.985); }
  76% { transform: translateY(-3px) rotate(-1.5deg) scaleY(1.02); }
}
@keyframes android-gait-head {
  0% { transform: rotate(-5deg) translateY(1px); }
  50% { transform: rotate(3deg) translateY(-1px); }
  100% { transform: rotate(-2deg) translateY(1px); }
}
@keyframes android-gait-arm-left {
  0%,100% { transform: rotate(48deg); }
  50% { transform: rotate(-56deg); }
}
@keyframes android-gait-arm-right {
  0%,100% { transform: rotate(-56deg); }
  50% { transform: rotate(48deg); }
}
@keyframes android-gait-leg-left {
  0%,100% { transform: rotate(36deg) translateY(0); }
  25% { transform: rotate(0deg) translateY(-2px); }
  50% { transform: rotate(-48deg) translateY(2px); }
  75% { transform: rotate(-4deg) translateY(0); }
}
@keyframes android-gait-leg-right {
  0%,100% { transform: rotate(-48deg) translateY(2px); }
  25% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(36deg) translateY(0); }
  75% { transform: rotate(0deg) translateY(-2px); }
}
@keyframes android-gait-antenna {
  from { transform: rotate(-12deg); }
  to { transform: rotate(13deg); }
}
@keyframes android-dust-puff {
  0% { opacity: 0; transform: translate(0,0) scale(.45); }
  28% { opacity: .82; }
  100% { opacity: 0; transform: translate(-9px,-11px) scale(1.75); }
}
@keyframes android-impact-dust {
  0% { transform: scale(.4); opacity: 0; }
  35% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor-android::before,
  .android-dust,
  .android-dust::before,
  .android-dust::after,
  .android-dust i,
  .android-dust b { animation: none !important; }
}


/* ================================================================
   PORTRAIT LOWER FEATHER — soften the hero-to-cards seam.
   The portrait fades before the hero's clipping edge so no straight
   horizontal source-image line remains visible above the project cards.
   ================================================================ */
@media (min-width: 981px) {
  .home-showcase .hero-portrait {
    -webkit-mask-image:
      radial-gradient(ellipse 70% 112% at 23% 46%, #000 0%, #000 43%, rgba(0,0,0,.94) 58%, rgba(0,0,0,.68) 74%, rgba(0,0,0,.24) 88%, transparent 100%),
      linear-gradient(to bottom, #000 0%, #000 63%, rgba(0,0,0,.92) 70%, rgba(0,0,0,.65) 77%, rgba(0,0,0,.24) 86%, transparent 96%) !important;
    -webkit-mask-composite: source-in !important;
    mask-image:
      radial-gradient(ellipse 70% 112% at 23% 46%, #000 0%, #000 43%, rgba(0,0,0,.94) 58%, rgba(0,0,0,.68) 74%, rgba(0,0,0,.24) 88%, transparent 100%),
      linear-gradient(to bottom, #000 0%, #000 63%, rgba(0,0,0,.92) 70%, rgba(0,0,0,.65) 77%, rgba(0,0,0,.24) 86%, transparent 96%) !important;
    mask-composite: intersect !important;
  }
}

/* ================================================================
   VOLUMETRIC ANDROID PASS — thicker helmet, torso, limbs and joints.
   CSS 3D extrusion keeps the little companion from collapsing into a
   thin silhouette when it turns into its left/right three-quarter view.
   ================================================================ */
.cursor-android {
  width: 96px !important;
  height: 116px !important;
  perspective: 760px !important;
  transform-style: preserve-3d !important;
  filter: drop-shadow(0 10px 13px rgba(0,0,0,.52)) drop-shadow(0 0 14px rgba(0,255,157,.24)) !important;
}
.android-facing {
  transform: perspective(700px) rotateY(var(--android-yaw, 0deg)) scale3d(1.14, 1.14, 1.34) !important;
  transform-style: preserve-3d !important;
}
.android-figure,
.android-head,
.android-body,
.android-arm,
.android-leg,
.android-ear,
.android-hand,
.android-boot {
  transform-style: preserve-3d !important;
  backface-visibility: visible !important;
}
.android-head {
  border-width: 2px !important;
  background:
    linear-gradient(110deg, rgba(255,255,255,.22), transparent 21% 73%, rgba(0,0,0,.7)),
    linear-gradient(145deg, #54756a 0%, #1b342c 28%, #08130f 72%, #020806 100%) !important;
  box-shadow:
    inset 3px 2px 6px rgba(255,255,255,.25),
    inset -4px -5px 9px rgba(0,0,0,.84),
    0 0 0 2px rgba(0,255,157,.12),
    0 0 15px rgba(0,255,144,.58) !important;
}
.android-head::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 2px -10px 3px;
  border: 1px solid rgba(109,255,202,.54);
  border-radius: 16px 17px 14px 14px;
  background: linear-gradient(90deg, #06100d, #34564a 18%, #0a1712 72%, #020705);
  box-shadow: 0 2px 6px rgba(0,0,0,.7), 0 0 9px rgba(0,255,157,.18);
  transform: translateZ(-13px);
}
.android-head::after {
  inset: 4px 4px 5px !important;
  transform: translateZ(15px) !important;
  border-color: rgba(145,255,218,.34) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.12), transparent 35%),
    linear-gradient(120deg, rgba(0,255,150,.14), rgba(0,0,0,.04) 56%) !important;
  box-shadow: inset 0 0 10px rgba(0,255,157,.12);
}
.android-back-head {
  transform: rotateY(180deg) translateZ(15px) !important;
  border-radius: 14px !important;
  box-shadow: inset 2px 2px 7px rgba(255,255,255,.12), inset -3px -3px 7px rgba(0,0,0,.68), 0 0 9px rgba(0,255,150,.24) !important;
}
.android-eye { transform: translateZ(14px); }
.android-brow { transform: translateZ(14px) rotate(-8deg); }
.android-mouth { transform: translateZ(14px); }
.android-ear {
  width: 10px !important;
  height: 17px !important;
  border: 1px solid rgba(164,255,222,.8);
  border-radius: 6px !important;
  background: linear-gradient(90deg, #07140f, #83cdb0 48%, #164c39) !important;
  box-shadow: inset 1px 0 3px rgba(255,255,255,.3), 0 0 8px rgba(0,255,150,.45) !important;
  transform: translateZ(3px);
}
.android-body {
  border-width: 2px !important;
  background: linear-gradient(115deg, #739789 0%, #263f35 25%, #07130e 70%, #020806 100%) !important;
  box-shadow: inset 2px 2px 5px rgba(255,255,255,.2), inset -4px -4px 7px rgba(0,0,0,.8), 0 0 12px rgba(0,255,150,.38) !important;
}
.android-body::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 2px -9px 2px;
  border: 1px solid rgba(120,255,203,.55);
  border-radius: 9px 11px 12px 12px;
  background: linear-gradient(90deg, #06100c, #38584a 22%, #0b1812 78%, #020705);
  transform: translateZ(-11px);
  box-shadow: 0 2px 6px rgba(0,0,0,.72);
}
.android-body::after {
  content: "";
  position: absolute;
  inset: 3px 4px 4px;
  border: 1px solid rgba(161,255,220,.38);
  border-radius: 6px 7px 8px 8px;
  background: linear-gradient(145deg, rgba(255,255,255,.15), rgba(0,255,148,.055) 48%, rgba(0,0,0,.12));
  transform: translateZ(12px);
  pointer-events: none;
}
.android-back-body { transform: rotateY(180deg) translateZ(12px) !important; }
.android-core,
.android-panel-light { transform: translateZ(12px); }
.android-arm {
  width: 11px !important;
  border: 1px solid rgba(163,255,221,.92) !important;
  background: linear-gradient(90deg, #06100d 0%, #355d4e 28%, #8ac3ad 48%, #17382b 78%, #030806 100%) !important;
  box-shadow: inset 1px 0 3px rgba(255,255,255,.22), inset -2px 0 4px rgba(0,0,0,.65), 0 0 7px rgba(0,255,157,.25) !important;
}
.android-arm::before {
  content: "";
  position: absolute;
  inset: 2px -5px 2px;
  border-radius: 8px;
  background: linear-gradient(90deg, #020705, #39594b 35%, #08150f);
  transform: translateZ(-8px);
}
.android-arm::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 4px;
  height: 6px;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(0,255,157,.2), rgba(187,255,228,.72), rgba(0,255,157,.18));
  transform: translateZ(8px);
}
.android-hand {
  transform: translateZ(8px);
  box-shadow: inset 2px 1px 3px rgba(255,255,255,.3), 0 2px 5px rgba(0,0,0,.5), 0 0 7px rgba(0,255,157,.38) !important;
}
.android-leg {
  width: 12px !important;
  border: 1px solid rgba(156,255,218,.88) !important;
  background: linear-gradient(90deg, #030806, #416957 34%, #8bbba7 49%, #173629 78%, #030806) !important;
  box-shadow: inset 1px 0 3px rgba(255,255,255,.2), inset -2px 0 4px rgba(0,0,0,.64), 0 0 8px rgba(0,255,157,.25) !important;
}
.android-leg::before {
  content: "";
  position: absolute;
  inset: 2px -5px 1px;
  border-radius: 5px;
  background: linear-gradient(90deg, #020705, #294b3d 35%, #07130e);
  transform: translateZ(-7px);
}
.android-knee { transform: translateZ(9px); box-shadow: inset 1px 1px 3px rgba(255,255,255,.28), 0 0 6px rgba(0,255,157,.35); }
.android-boot {
  left: -4px !important;
  width: 17px !important;
  height: 7px !important;
  border: 1px solid rgba(172,255,228,.8);
  background: linear-gradient(180deg, #b7ffe5, #28664e 50%, #06120d) !important;
  transform: translateZ(8px);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.42), 0 2px 5px rgba(0,0,0,.55), 0 0 8px rgba(0,255,157,.38) !important;
}
.android-shadow { filter: blur(5px); background: radial-gradient(ellipse, rgba(0,0,0,.7), rgba(0,0,0,.16) 62%, transparent 100%) !important; }
.cursor-android.is-facing-side-left .android-eye.right,
.cursor-android.is-facing-side-right .android-eye.left { opacity: .08 !important; }
.cursor-android.is-facing-side-left .android-brow.right,
.cursor-android.is-facing-side-right .android-brow.left { opacity: .08 !important; }

/* Continuous live energy particles and distant lightning over the whole page. */
.ambient-electric-canvas {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: block;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  opacity: .72;
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) {
  .ambient-electric-canvas { display: none !important; }
}


/* ================================================================
   MASTER-J EMERALD STARDUST BACKDROP
   Deep black-green atmosphere, soft luminous bokeh and live sparkle drift.
   Kept behind readable content; the five featured cards stay unchanged.
   ================================================================ */
main {
  position: relative;
  z-index: 2;
}
.site-footer {
  position: relative;
  z-index: 2;
  background: transparent !important;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .48;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(ellipse at 12% 78%, rgba(0, 255, 142, .13), transparent 28%),
    radial-gradient(ellipse at 87% 88%, rgba(35, 222, 164, .11), transparent 30%),
    radial-gradient(circle at 17px 23px, rgba(190, 255, 224, .76) 0 1px, transparent 1.8px),
    radial-gradient(circle at 83px 111px, rgba(72, 255, 170, .52) 0 1.35px, transparent 2.1px),
    radial-gradient(circle at 137px 61px, rgba(132, 255, 212, .42) 0 .9px, transparent 1.7px);
  background-size: auto, auto, 178px 166px, 247px 224px, 311px 283px;
  background-repeat: no-repeat, no-repeat, repeat, repeat, repeat;
  animation: masterJPageStardust 46s linear infinite, masterJPageGlow 13s ease-in-out infinite alternate;
}
@keyframes masterJPageStardust {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 0 0, 0 0, 178px -166px, -247px 224px, 311px -283px; }
}
@keyframes masterJPageGlow {
  0% { opacity: .28; }
  50% { opacity: .52; }
  100% { opacity: .38; }
}

/* Emerald stardust stays visible behind the homepage project row and below it. */
.home-showcase {
  background:
    radial-gradient(ellipse at 10% 88%, rgba(0, 255, 140, .12), transparent 32%),
    radial-gradient(ellipse at 88% 84%, rgba(0, 196, 135, .11), transparent 35%),
    linear-gradient(180deg, #020805 0%, #03110a 58%, #010704 100%) !important;
}
.home-showcase::after {
  background:
    radial-gradient(ellipse at 12% 88%, rgba(0, 255, 140, .19), transparent 31%),
    radial-gradient(ellipse at 91% 76%, rgba(25, 220, 157, .14), transparent 34%),
    radial-gradient(circle at 11px 17px, rgba(197, 255, 226, .76) 0 1px, transparent 1.8px),
    radial-gradient(circle at 79px 91px, rgba(0, 255, 151, .58) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 143px 45px, rgba(129, 255, 206, .46) 0 .9px, transparent 1.7px),
    linear-gradient(180deg, transparent 0%, rgba(0, 12, 7, .12) 47%, rgba(0, 9, 5, .56) 100%);
  background-size: auto, auto, 166px 154px, 229px 208px, 293px 267px, auto;
  background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, no-repeat;
  opacity: .82;
  animation: showcaseStardustDrift 52s linear infinite, showcaseEmeraldBreathe 12s ease-in-out infinite alternate;
}
@keyframes showcaseStardustDrift {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 0 0, 0 0, 166px -154px, -229px 208px, 293px -267px, 0 0; }
}
@keyframes showcaseEmeraldBreathe {
  0% { opacity: .52; filter: brightness(.88); }
  100% { opacity: .88; filter: brightness(1.12); }
}
.home-showcase .projects-section {
  padding-bottom: clamp(66px, 7vw, 100px) !important;
}
.home-showcase .projects-section::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -34px;
  bottom: 0;
  left: -8vw;
  right: -8vw;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 20%, rgba(0, 255, 144, .18), transparent 34%),
    radial-gradient(ellipse at 84% 73%, rgba(0, 180, 129, .15), transparent 38%),
    radial-gradient(circle at 21px 19px, rgba(204, 255, 232, .8) 0 1px, transparent 1.9px),
    radial-gradient(circle at 105px 89px, rgba(34, 255, 157, .55) 0 1.2px, transparent 2px),
    radial-gradient(circle at 58px 139px, rgba(142, 255, 209, .44) 0 .9px, transparent 1.8px),
    linear-gradient(180deg, rgba(0, 10, 6, .08), rgba(0, 12, 7, .33) 80%, rgba(0, 7, 4, .12));
  background-size: auto, auto, 182px 171px, 247px 219px, 319px 291px, auto;
  background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, no-repeat;
  opacity: .8;
  filter: saturate(1.12);
  mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 88%, transparent 100%);
  animation: showcaseStardustDrift 58s linear infinite reverse, showcaseEmeraldBreathe 14s ease-in-out infinite alternate;
}
.home-showcase .projects-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: -8vw;
  right: -8vw;
  bottom: 0;
  height: 76px;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(0, 255, 143, .16), transparent 68%);
  filter: blur(17px);
  animation: bottomAuroraPulse 8s ease-in-out infinite alternate;
}
@keyframes bottomAuroraPulse {
  from { opacity: .45; transform: scaleX(.88); }
  to { opacity: .95; transform: scaleX(1.08); }
}
.home-showcase .project-grid,
.home-showcase .project-footnote {
  position: relative;
  z-index: 2;
}
.content-section {
  position: relative;
  z-index: 2;
  background: transparent !important;
}
.contact-section {
  position: relative;
  z-index: 2;
  background:
    radial-gradient(ellipse at 73% 48%, rgba(0, 255, 145, .16), transparent 40%),
    linear-gradient(110deg, rgba(3, 20, 12, .91), rgba(2, 12, 8, .88) 60%, rgba(1, 12, 8, .9)) !important;
  backdrop-filter: blur(2px);
}
.ambient-electric-canvas {
  z-index: 1 !important;
  opacity: .62 !important;
  mix-blend-mode: screen;
}
@media (max-width: 980px) {
  .home-showcase .projects-section { padding-bottom: 58px !important; }
  .home-showcase .projects-section::before { left: -18px; right: -18px; }
  .home-showcase .projects-section::after { left: -18px; right: -18px; }
}
@media (prefers-reduced-motion: reduce) {
  body::after,
  .home-showcase::after,
  .home-showcase .projects-section::before,
  .home-showcase .projects-section::after {
    animation: none !important;
  }
}