/* The approved artwork is the visible Home. DOM elements become invisible hit targets
   so the application stays functional without visually drifting from the reference. */
.app:has(#home.active) .topbar { display:none !important; }
.app:has(#home.active) .bottomnav { opacity:0 !important; pointer-events:none !important; }

#home.home { padding:0 !important; overflow:hidden !important; }
#home .hero { position:relative !important; min-height:100svh !important; overflow:hidden !important; }

#home .mind {
  display:block !important;
  position:absolute !important;
  opacity:.001 !important;
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  z-index:80 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  filter:none !important;
}
#home .mind .portrait,
#home .mind strong,
#home .mind small { display:none !important; }
#home .tesla { left:0 !important; top:8.5% !important; width:29% !important; height:24% !important; }
#home .mileva { right:0 !important; left:auto !important; top:8.5% !important; width:29% !important; height:24% !important; }
#home .davinci { left:0 !important; top:29% !important; width:29% !important; height:25% !important; }
#home .frida { right:0 !important; left:auto !important; top:29% !important; width:29% !important; height:25% !important; }

/* Real response-depth controls sit exactly over the three buttons painted in the
   reference. They are invisible until touched; reliability.js owns their state. */
#home .modebar {
  position:absolute !important;
  left:5.1% !important;
  right:5.1% !important;
  top:80.2% !important;
  width:auto !important;
  height:7.4% !important;
  margin:0 !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  z-index:120 !important;
  filter:none !important;
}
#home .mode {
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:22px !important;
  background:transparent !important;
  color:transparent !important;
  text-shadow:none !important;
  box-shadow:none !important;
  font-size:0 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
}
#home .mode small { display:none !important; }
#home .mode.active {
  background:rgba(255,190,98,.015) !important;
  box-shadow:inset 0 0 0 1px rgba(255,205,130,.035) !important;
}

/* Invisible five-zone navigation aligns with the approved artwork: Home, Library,
   central Live control, Create, Profile. */
#fenixReferenceNav {
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:max(0px, env(safe-area-inset-bottom));
  width:min(100%,820px);
  height:12.5svh;
  z-index:150;
  display:grid;
  grid-template-columns:1fr 1fr 1.12fr 1fr 1fr;
  background:transparent;
  pointer-events:none;
}
#fenixReferenceNav[hidden] { display:none !important; }
#fenixReferenceNav button {
  border:0;
  background:transparent;
  color:transparent;
  font-size:0;
  padding:0;
  pointer-events:auto;
  touch-action:manipulation;
}
#fenixReferenceNav button:active { background:radial-gradient(circle,rgba(255,190,100,.08),transparent 62%); }

/* Keep Live in the same gold/blue world while its functional layer runs separately. */
#live .live-stage { overflow:hidden; position:relative; }
#live .live-orb {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:radial-gradient(circle at 50% 50%, rgba(240,179,89,.09), transparent 64%),
             url("https://cdn.creativeclaw.co/u/b202b59b/images/cc11ac6e-0d34-4fc7-9b6c-ad3bcbf3ae7f.png") 50% 25% / 300% auto no-repeat !important;
  border:1px solid rgba(226,181,106,.34) !important;
  box-shadow:0 0 44px rgba(214,142,61,.16), inset 0 0 42px rgba(58,123,205,.09) !important;
}
#live .live-orb img { opacity:0 !important; }
#live .live-stage.voice-listening .live-orb { animation:fenixListen 2.6s ease-in-out infinite; }
#live .live-stage.voice-thinking .live-orb { animation:fenixThink 3.1s linear infinite; }
#live .live-stage.voice-speaking .live-orb { animation:fenixSpeak 1.1s ease-in-out infinite; }
@keyframes fenixListen { 0%,100%{transform:scale(.985)} 50%{transform:scale(1.018)} }
@keyframes fenixThink { 0%,100%{filter:brightness(.98)} 50%{filter:brightness(1.08)} }
@keyframes fenixSpeak { 0%,100%{transform:scale(.985)} 50%{transform:scale(1.035)} }

@media(min-width:601px) {
  #home .hero { width:min(56.25vh,520px) !important; margin:0 auto !important; }
  #fenixReferenceNav { width:min(56.25vh,520px); }
}

@media(prefers-reduced-motion:reduce) {
  #live .live-stage .live-orb { animation:none !important; }
}