/* The film lives in the hero (owner 01/11, option B «Sala»): the page's scroll dims the room, the hero picture becomes
   the screen and the seats come up. CSS keeps the stage and the phrase in place; app.js only draws the picture. */
/* Still clips sideways, without becoming the scroll container that would release everything sticky below. */
.workspace-site { --small: 100svh; --large: 100lvh; overflow: clip; }
/* Older phones: iOS before 15.4 and Chrome before 108 know neither unit; iOS 15 has no clip, so the page clips instead. */
@supports not (height: 1lvh) { .workspace-site { --small: 100vh; --large: 100vh; } }
@supports not (overflow: clip) {
  .workspace-site { overflow: visible; }
  body { overflow-x: hidden; }
}
.workspace-site .fusion-hero {
  --hero-h: max(min(950px, var(--small)), 850px);
  --cine-run: calc(var(--large) * 2.4 - 350px);
  --cine-room: #090a0c;
  --phrase-top: calc(var(--small) * .12);
  display: block;
  height: calc(var(--hero-h) + var(--cine-run));
  min-height: 0;
  max-height: none;
  overflow: visible;
  isolation: auto;
  background: var(--cine-room);
}
.cine-stage {
  position: sticky;
  top: 0;
  z-index: 1;
  height: var(--large);
  overflow: hidden;
  isolation: isolate;
  background: var(--cine-room);
}
.cine-stage .hero-media { will-change: transform, clip-path; }
.cine-probe { position: absolute; width: 0; height: var(--small); visibility: hidden; }
.hero-flow { position: relative; z-index: 2; height: var(--hero-h); margin-top: calc(var(--large) * -1); }
.hero-phrase {
  position: sticky;
  top: var(--phrase-top);
  z-index: 3;
  display: flex;
  justify-content: center;
  height: 50px;
  margin-top: -150px;
  margin-bottom: calc(var(--large) - var(--phrase-top) - 50px);
  pointer-events: none;
}
.hero-phrase #film-open { pointer-events: auto; }
@media (max-width: 680px) { .hero-phrase { margin-top: -114px; } }
.cine-aura {
  position: absolute;
  z-index: -2;
  object-fit: cover;
  opacity: 0;
  filter: blur(70px) saturate(1.3);
  pointer-events: none;
}
.cine-screen {
  position: absolute;
  overflow: hidden;
  border-radius: 10px;
  background: #000;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 0 0 1px #ffffff14, 0 30px 120px #000000b0;
}
.cine-screen :is(.cine-still, video) {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cine-screen video { visibility: hidden; object-fit: contain; background: #000; }
.cine-screen.is-playing video { visibility: visible; }
.cine-screen.is-playing .cine-play { display: none; }
.cine-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  padding: 0 0 0 5px;
  border: 0;
  border-radius: 50%;
  background: #cfe95a;
  color: #16181b;
  cursor: pointer;
  transition: box-shadow .2s ease;
}
.cine-play svg { display: block; width: 28px; height: 28px; }
.cine-play:is(:hover, :focus-visible) { outline: none; box-shadow: 0 0 0 10px #cfe95a26, 0 0 50px #cfe95a55; }
.cine-screen .film-controls {
  position: absolute;
  inset: auto 0 0;
  display: none;
  border: 0;
  background: linear-gradient(0deg, #000000cc, transparent);
}
.cine-screen.is-playing .film-controls { display: flex; }
.cine-screen:fullscreen { border-radius: 0; }
.cine-seats { position: absolute; right: 0; bottom: 0; left: 0; pointer-events: none; }
.cine-seats svg { display: block; width: 100%; height: 100%; }
@media (max-width: 680px) {
  .cine-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .cine-play svg { width: 22px; height: 22px; }
}
@media (max-width: 1000px) { .workspace-site .fusion-hero { --hero-h: max(min(950px, var(--small)), 820px); } }
@media (max-width: 680px) { .workspace-site .fusion-hero { --hero-h: max(min(950px, var(--small)), 810px); } }
/* Reduced motion: nothing travels. The room is simply there once the visitor scrolls past the hero. */
@media (prefers-reduced-motion: reduce) {
  .workspace-site .fusion-hero { --cine-run: var(--large); }
  .cine-play { transition: none; }
}