@import url('/journey/jaguar/jaguar-encounter-gold-v64.css');

/* Jaguar Physical Staging v63
   Founder-visible composition pass. Creature-first, room-second, chrome-third.
   No source geometry, renderer, licence, truth or motion semantics changed. */

.jaguar[data-scene="0"] .three-wrap{
  background:
    radial-gradient(ellipse at 58% 66%,rgba(74,118,58,.20) 0,rgba(19,40,22,.08) 28%,transparent 56%),
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.34));
}

/* Stronger physical grounding: contact lives beneath the creature, not as a fog layer. */
.jaguar[data-scene="0"] .ground-contact{
  z-index:10!important;
  left:50%!important;
  bottom:8%!important;
  width:min(48vw,640px)!important;
  height:min(12vw,150px)!important;
  transform:translateX(-39%)!important;
  opacity:.72!important;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.62) 0,rgba(0,0,0,.34) 38%,transparent 74%)!important;
  filter:blur(7px)!important;
}

/* Create a real focal pocket around the animal. */
.jaguar[data-scene="0"] .room--mid{opacity:.72!important;filter:saturate(.88) brightness(.74)}
.jaguar[data-scene="0"] .room--far{opacity:.78!important;filter:saturate(.78) brightness(.62)}
.jaguar[data-scene="0"] .room--canopy{opacity:.78!important}
.jaguar[data-scene="0"] .room--left,
.jaguar[data-scene="0"] .room--right{opacity:.66!important}
.jaguar[data-scene="0"] .world-vignette{opacity:.50!important}
.jaguar[data-scene="0"] .room--fog{opacity:.10!important}
.jaguar[data-scene="0"] .room--shafts{opacity:.18!important}

/* Keep near foliage at the edges. Never cover the animal's torso/head. */
.jaguar[data-scene="0"] .foreground--left{opacity:.30!important;transform:translateX(-10%) scale(.96)!important}
.jaguar[data-scene="0"] .foreground--right{opacity:.26!important;transform:translateX(10%) scale(.96)!important}

/* Creature presentation: slightly cleaner, denser and warmer in the real-world room. */
.jaguar[data-scene="0"] .jaguar-local-v52{
  z-index:13!important;
  filter:saturate(1.04) contrast(1.20) brightness(1.10) drop-shadow(0 18px 26px rgba(0,0,0,.34))!important;
}

/* Identity becomes a caption, not a second hero panel. */
.jaguar[data-scene="0"] .species-card{
  max-width:300px!important;
  background:linear-gradient(90deg,rgba(1,7,4,.74),rgba(1,7,4,.10))!important;
}
.jaguar[data-scene="0"] .species-card h2{letter-spacing:-.055em!important}
.jaguar[data-scene="0"] .species-card__index{opacity:.78}

/* Dark Jungle LUME: intelligence geometry recedes behind the animal. */
.jaguar[data-lume="true"][data-scene="0"] .three-wrap{
  background:
    radial-gradient(ellipse at 58% 60%,rgba(29,92,66,.13),transparent 48%),
    linear-gradient(180deg,#020806,#000402 72%)!important;
}
.jaguar[data-lume="true"][data-scene="0"] .lume-room{opacity:.74!important}
.jaguar[data-lume="true"][data-scene="0"] .lume-grid{opacity:.34!important}
.jaguar[data-lume="true"][data-scene="0"] .lume-axis{opacity:.36!important}
.jaguar[data-lume="true"][data-scene="0"] .jaguar-local-v52{
  filter:saturate(.76) contrast(1.23) brightness(1.08) drop-shadow(0 18px 34px rgba(0,0,0,.52))!important;
}
.jaguar[data-lume="true"][data-scene="0"] .ground-contact{opacity:.82!important}

@media(max-width:760px){
  .jaguar[data-scene="0"] .three-wrap{
    height:76svh!important;
    min-height:76svh!important;
  }
  .jaguar[data-scene="0"] .ground-contact{
    bottom:10%!important;
    width:68vw!important;
    height:18vw!important;
    transform:translateX(-43%)!important;
    filter:blur(5px)!important;
  }
  .jaguar[data-scene="0"] .room--fog{opacity:.05!important}
  .jaguar[data-scene="0"] .room--shafts{opacity:.08!important}
  .jaguar[data-scene="0"] .foreground--left{opacity:.15!important;transform:translateX(-18%) scale(.92)!important}
  .jaguar[data-scene="0"] .foreground--right{opacity:.13!important;transform:translateX(18%) scale(.92)!important}
  .jaguar[data-scene="0"] .jaguar-local-v52{
    filter:saturate(1.06) contrast(1.19) brightness(1.13) drop-shadow(0 12px 18px rgba(0,0,0,.30))!important;
  }
  .jaguar[data-scene="0"] .species-card{
    bottom:12px!important;
    max-width:190px!important;
    background:linear-gradient(90deg,rgba(1,7,4,.70),transparent)!important;
  }
  .jaguar[data-scene="0"] .controls{
    bottom:10px!important;
    width:104px!important;
  }
  .jaguar[data-scene="0"] .controls button{min-height:40px!important}
}

@media(prefers-reduced-motion:reduce){
  .jaguar[data-scene="0"] .foreground--left,
  .jaguar[data-scene="0"] .foreground--right{transform:none!important}
}