/* hero-object.css: the hero object's frame (kit component, 6 Nov 2026). See hero-object.js for the contract.
   The render is black-backed and composited with mix-blend-mode: screen, so it only ever adds light to the page's dark hero.
   Sizing: the figure fills its grid cell (square); the host page decides the cell. Float and tilt are CSS only.
   Tokens: --ho-size (max width, default 560px), --ho-bob (bob period, default 11s), --ho-tx / --ho-ty (pointer tilt, set by JS). */
.ho{--ho-size:560px;--ho-bob:11s;position:relative;margin:0;width:min(100%,var(--ho-size));aspect-ratio:1/1;justify-self:center;
  pointer-events:none;contain:layout paint;
  /* the blend lives HERE, on the figure: .ho__tilt/.ho__float transform, which makes them their own group, so a blend on the
     video only met a transparent backdrop and the black (or a mis-encoded purple) showed as a square (fixed 6 Nov) */
  mix-blend-mode:screen}
.ho__tilt{position:absolute;inset:0;transform:perspective(1100px) rotateX(calc(var(--ho-ty,0) * 1deg)) rotateY(calc(var(--ho-tx,0) * 1deg));
  transition:transform 1.6s cubic-bezier(.2,.6,.2,1);will-change:transform}
.ho__float{position:absolute;inset:0;animation:ho-bob var(--ho-bob) ease-in-out infinite}
.ho__poster,.ho__video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.ho__video{opacity:0;transition:opacity 1.2s ease}
.ho.is-playing .ho__video{opacity:1}
/* an optional slow gold sheen drifting over the glass (additive, very quiet) */
.ho[data-ho-sheen]::after{content:"";position:absolute;inset:8% 6%;mix-blend-mode:screen;opacity:.0;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,243,214,0) 40%,rgba(255,243,214,.10) 50%,rgba(255,243,214,0) 60%);
  background-size:260% 100%;animation:ho-sheen 9s ease-in-out infinite;-webkit-mask-image:radial-gradient(closest-side,#000 60%,transparent);mask-image:radial-gradient(closest-side,#000 60%,transparent)}
.ho.is-playing[data-ho-sheen]::after{opacity:1}
@keyframes ho-bob{0%,100%{transform:translate3d(0,-1.2%,0)}50%{transform:translate3d(0,1.2%,0)}}
@keyframes ho-sheen{0%{background-position:120% 0}100%{background-position:-20% 0}}
@media (prefers-reduced-motion:reduce){.ho__float,.ho[data-ho-sheen]::after{animation:none}.ho__tilt{transition:none;transform:none}.ho__video{display:none}}
/* Host hand-off: a host hero that isolates (Levels' .x-hero does, to keep its "00" ::before at z -1) gives the screen blend a
   transparent backdrop, so the render's black shows as a square. Where a hero carries the object, drop the isolation and lift
   the ::before to z 0 (it still paints under the hero content, which comes later in order). Verified in the browser, 6 Nov. */
.x-hero:has(.ho){isolation:auto}
.x-hero:has(.ho)::before{z-index:0}