/* ○Ṛ● WORKS homepage cinematic layer v0.7 — additive, progressive enhancement only.
   Touches no content, routes, hotspots logic, or the Workstation journey. Remove the <link> and
   <script> from index.html and the site is exactly v0.6. Everything below is inert under
   prefers-reduced-motion. No external dependencies. */

/* 1. Opening: the artwork settles in from darkness (CSS only; works with JS off). */
body.home-only.hybrid-home .founder-home{background:#05070b}
body.home-only.hybrid-home .founder-art{
  transform-origin:50% 56%;
  animation:cineOpen 1900ms cubic-bezier(.2,.7,.2,1) both, cineDrift 38s ease-in-out 1900ms infinite alternate;
  will-change:transform;
}
@keyframes cineOpen{0%{opacity:0;transform:scale(1.07);filter:brightness(.35)}100%{opacity:1;transform:scale(1.0);filter:none}}
@keyframes cineDrift{0%{transform:scale(1.0) translate3d(0,0,0)}100%{transform:scale(1.035) translate3d(-.35%,-.25%,0)}}

/* Pointer parallax is applied through custom properties by cinematic-v07.js. The hotspots take the
   identical translate and transition as the picture, so the doors stay on the bee and the desk while
   the artwork glides; their geometry (home-progressive.js) is unchanged. */
body.home-only.hybrid-home .founder-art picture,
body.home-only.hybrid-home .founder-art .art-hotspot{
  transform:translate3d(var(--cine-px,0px),var(--cine-py,0px),0);
  transition:transform 140ms linear;
}

/* 2. Atmosphere: slow-moving light and drifting motes over the art, under the hotspots. */
.cine-atmos{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.cine-atmos::before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(ellipse 38% 30% at 22% 38%,rgba(255,214,140,.16),transparent 70%),
    radial-gradient(ellipse 30% 26% at 78% 66%,rgba(120,170,255,.12),transparent 72%);
  mix-blend-mode:screen;
  animation:cineLight 22s ease-in-out infinite alternate;
}
@keyframes cineLight{0%{transform:translate3d(-2%,1%,0) scale(1)}100%{transform:translate3d(2.5%,-1.5%,0) scale(1.08)}}
.cine-atmos::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 85% 75% at 50% 52%,transparent 52%,rgba(3,5,9,.55) 100%);
}
.cine-motes{position:absolute;inset:0;width:100%;height:100%;display:block;mix-blend-mode:screen}

/* Optional film layer: only exists if data-cine-video is set on .founder-art. Screen-blended so it
   adds light to the artwork rather than replacing it (replacing it would break hotspot alignment). */
.cine-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;pointer-events:none;
  mix-blend-mode:screen;opacity:0;transition:opacity 2.4s ease}
.cine-video.is-live{opacity:.42}

/* 3. (Removed: timed hotspot glow. The doors stay invisible; the bee and the desk are the cues.
   cinematic-v07.js still adds .cine-hint after idle, which no longer has any styling.) */

/* 4. Explore control: gentle entrance, matching the existing pill. */
body.home-only.hybrid-home .explore-wrap{animation:cineRise 1100ms cubic-bezier(.2,.7,.2,1) 1500ms both}
@keyframes cineRise{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}

/* Journey keeps its own timing; just stop the drift from competing with it. */
body.cine-leaving .founder-art{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  body.home-only.hybrid-home .founder-art,
  body.home-only.hybrid-home .explore-wrap,
  .cine-atmos::before{animation:none!important}
  body.home-only.hybrid-home .founder-art picture,body.home-only.hybrid-home .founder-art .art-hotspot{transform:none!important;transition:none!important}
  .cine-motes,.cine-video{display:none!important}
}