/* Villa Bii ambient magic - progressive enhancement only */
.hero-cinematic.bii-magic-enabled{
  --bii-bg-y:0px;
  --bii-cast-y:0px;
  --bii-bg-scale:1.018;
}

.hero-cinematic.bii-magic-enabled .hero-cinematic__background{
  transform:translate3d(0,var(--bii-bg-y),0) scale(var(--bii-bg-scale));
  transform-origin:center;
  transition:transform .18s linear;
  will-change:transform;
}

.hero-cinematic.bii-magic-enabled .hero-cinematic__cast{
  transform:translate3d(0,var(--bii-cast-y),0);
  transition:transform .18s linear;
  will-change:transform;
}

.bii-magic-layer{
  position:absolute;
  inset:0;
  z-index:3;
  overflow:hidden;
  pointer-events:none;
}

.bii-mote{
  position:absolute;
  left:var(--bii-x);
  top:var(--bii-y);
  width:var(--bii-size);
  height:var(--bii-size);
  border-radius:50%;
  background:rgba(255,239,184,.92);
  box-shadow:0 0 7px 2px rgba(241,203,123,.32),0 0 15px rgba(181,211,255,.18);
  opacity:0;
  animation:bii-mote-drift var(--bii-duration) ease-in-out var(--bii-delay) infinite;
}

.bii-mote:nth-child(3n){background:rgba(207,226,255,.88);box-shadow:0 0 8px 2px rgba(164,199,255,.3)}
.bii-mote:nth-child(4n){filter:blur(.35px)}

.hero-cinematic__character{pointer-events:auto}
.hero-cinematic__character img{transition:transform .5s cubic-bezier(.22,.8,.24,1),filter .5s ease}

@media(hover:hover) and (pointer:fine){
  .hero-cinematic__character:hover img{
    transform:translate3d(0,-4px,0) scale(1.012);
    filter:drop-shadow(0 0 13px rgba(239,199,127,.24));
  }
}

.hero-cinematic__button,
.bii-portal-link{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.hero-cinematic__button::after,
.bii-portal-link::after{
  content:"";
  position:absolute;
  inset:-65% -35%;
  z-index:0;
  background:linear-gradient(108deg,transparent 40%,rgba(255,247,214,.42) 49%,transparent 58%);
  transform:translateX(-115%);
  transition:transform .72s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}

.hero-cinematic__button:hover::after,
.hero-cinematic__button:focus-visible::after,
.bii-portal-link:hover::after,
.bii-portal-link:focus-visible::after{transform:translateX(115%)}

.bii-portal-link:hover,
.bii-portal-link:focus-visible{box-shadow:0 0 0 1px rgba(242,205,135,.12),0 0 25px rgba(196,153,239,.16)}

.bii-magic-zone{position:relative;isolation:isolate}
.bii-zone-spark{
  position:absolute;
  top:10%;
  right:6%;
  z-index:2;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#fff2bf;
  box-shadow:0 0 8px 2px rgba(228,191,120,.32);
  opacity:0;
  pointer-events:none;
}

.bii-magic-zone.is-visible .bii-zone-spark{animation:bii-zone-arrive 1.1s ease-out .22s both}
.character-card.bii-magic-zone:hover{box-shadow:0 18px 48px rgba(73,51,111,.12),0 0 28px rgba(200,165,239,.08)}
.product-stage.bii-magic-zone:hover{filter:drop-shadow(0 18px 25px rgba(74,55,111,.09))}

@keyframes bii-mote-drift{
  0%,100%{opacity:.08;transform:translate3d(0,5px,0) scale(.72)}
  38%{opacity:.42}
  62%{opacity:.2;transform:translate3d(5px,-9px,0) scale(1)}
}

@keyframes bii-zone-arrive{
  0%{opacity:0;transform:translate3d(-10px,7px,0) scale(.35)}
  35%{opacity:.65}
  100%{opacity:0;transform:translate3d(8px,-8px,0) scale(1.15)}
}

@media(max-width:980px){
  .bii-mote:nth-child(n+8){display:none}
  .hero-cinematic.bii-magic-enabled{--bii-bg-scale:1.012}
}

@media(max-width:800px){
  .bii-mote:nth-child(n+5){display:none}
  .bii-mote:nth-child(1){left:12%;top:54%}
  .bii-mote:nth-child(2){left:35%;top:72%}
  .bii-mote:nth-child(3){left:68%;top:49%}
  .bii-mote:nth-child(4){left:88%;top:68%}
  .hero-cinematic.bii-magic-enabled{--bii-bg-scale:1.008}
  .hero-cinematic__character:active img{transform:translate3d(0,-2px,0) scale(1.006)}
  .character-card.bii-magic-zone:hover,
  .product-stage.bii-magic-zone:hover{box-shadow:none;filter:none}
}

@media(prefers-reduced-motion:reduce){
  .bii-magic-layer,
  .bii-zone-spark{display:none!important}
  .hero-cinematic.bii-magic-enabled .hero-cinematic__background,
  .hero-cinematic.bii-magic-enabled .hero-cinematic__cast,
  .hero-cinematic__character img,
  .hero-cinematic__button::after,
  .bii-portal-link::after{
    animation:none!important;
    transition:none!important;
    transform:none!important;
  }
}