/* AO interaction layer. Remove this stylesheet and its script to disable these effects. */

/* 1. A focused editorial frame on the active work, without another image zoom. */
@media (hover:hover) and (pointer:fine){
  .ao-cardFocus .grid .card{ isolation:isolate; }
  .ao-cardFocus .grid .card::after{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    border:1px solid transparent;
    background:radial-gradient(360px circle at var(--focus-x,50%) var(--focus-y,50%),rgba(255,90,54,.16),transparent 68%);
    opacity:0; transition:opacity .35s ease,border-color .35s ease;
  }
  .ao-cardFocus .grid .card:hover::after,.ao-cardFocus .grid .card:focus-visible::after{
    opacity:1; border-color:rgba(255,90,54,.55);
  }
  .ao-cardFocus .grid .card:hover .card-media{ transform:scale(1.035); filter:brightness(.90) saturate(1.06); }
  .ao-cardFocus .grid .card .card-body{ transition:transform .45s cubic-bezier(.22,1,.36,1); }
  .ao-cardFocus .grid .card:hover .card-body,.ao-cardFocus .grid .card:focus-visible .card-body{ transform:translateY(-6px); }
}
.grid .card:focus-visible,.chip:focus-visible,.lb-close:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}
@media (hover:none){ .ao-cardFocus .grid .card .card-play{ opacity:1; } .ao-cardFocus .grid .card .card-play span{ transform:scale(.78); } }

/* 2. Category changes use short, interruptible entrances on the first visible row. */
.ao-filterEntrance .filters .chip{ position:relative; }
.ao-filterEntrance .filters .chip::after{
  content:""; position:absolute; left:22%; right:22%; bottom:3px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:center;
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.ao-filterEntrance .filters .chip.is-active::after{ transform:scaleX(1); }
.ao-filterEntrance .filters .chip.is-active{ border-color:rgba(255,90,54,.5); }

/* 3. A restrained aperture reveals the film after a work is selected. */
.ao-modalAperture .lightbox{ background:rgba(4,4,5,.96); }
.lightbox .lb-close{ z-index:1; }
.ao-modalAperture .lightbox .lb-stage{
  transform:none; clip-path:inset(7% 5% round 4px);
  transition:clip-path .62s cubic-bezier(.22,1,.36,1);
}
.ao-modalAperture .lightbox.is-open .lb-stage{ transform:none; clip-path:inset(0 round 4px); }
.ao-modalAperture .lightbox .lb-cap{ opacity:0; transform:translateY(8px); transition:opacity .35s ease .18s,transform .35s ease .18s; }
.ao-modalAperture .lightbox.is-open .lb-cap{ opacity:1; transform:none; }

/* 5. A phone opens the film on a black, edge-to-edge stage. Native full screen
   is requested by JS; this is also the fallback when the browser denies it. */
@media (max-width:700px), (max-height:600px) and (pointer:coarse){
  .ao-mobileFullscreen .lightbox.is-open.is-mobile-fullscreen{
    padding:0; gap:0; background:#000; backdrop-filter:none;
  }
  .ao-mobileFullscreen .lightbox.is-mobile-fullscreen .lb-stage,
  .ao-mobileFullscreen .lightbox.is-mobile-fullscreen .lb-stage.is-vertical{
    width:100vw; height:100vh; height:100dvh; max-width:none;
    aspect-ratio:auto; border-radius:0; clip-path:none; transition:none;
  }
  .ao-mobileFullscreen .lightbox.is-mobile-fullscreen .lb-close{
    z-index:3; top:calc(10px + env(safe-area-inset-top));
    right:calc(12px + env(safe-area-inset-right));
    background:rgba(5,5,7,.72); border-color:rgba(255,255,255,.36);
  }
  .ao-mobileFullscreen .lightbox.is-mobile-fullscreen .lb-cap{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .ao-cardFocus .grid .card::after,.ao-cardFocus .grid .card .card-body,.ao-filterEntrance .filters .chip::after,
  .ao-modalAperture .lightbox .lb-stage,.ao-modalAperture .lightbox .lb-cap{ transition:none !important; }
  .ao-cardFocus .grid .card:hover .card-media{ transform:none; filter:none; }
  .ao-cardFocus .grid .card:hover .card-body,.ao-cardFocus .grid .card:focus-visible .card-body{ transform:none; }
  .ao-modalAperture .lightbox .lb-stage,.ao-modalAperture .lightbox.is-open .lb-stage{ clip-path:none; }
}