/* The video's home: one 1920 x 1080 stage, scaled to fit the window (--s from home.js), on the film's own ground.
   --ground, --ink, --button and --button-ink come from home.json (tools/home.py reads them from the business's profile).
   When every frame of the film has that ground at its edge, the space around the stage reads as part of the picture.
   The controls (Sound on, Skip intro, Replay the intro) follow the TAC finder's intro controls: pills, top left on a
   wide window, bottom centre on a narrow one, always visible, never scaled with the stage. */
:root {
  --ground: #F4F0E8;
  --ink: #262725;
  --button: #262725;
  --button-ink: #FFFFFF;
  --fade: 600ms;                     /* the film fading off the demo; home.json "fade" sets both this and home.js */
}
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ground); }
body { -webkit-font-smoothing: antialiased; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }

.stage {
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--s, 1)); transform-origin: 50% 50%;
}
.demo, .film { position: absolute; inset: 0; width: 1920px; height: 1080px; border: 0; display: block; background: var(--ground); }
.demo { z-index: 1; pointer-events: none; }
.film { z-index: 2; object-fit: contain; cursor: pointer; transition: opacity var(--fade) ease; }

/* only when the browser blocks autoplay (e.g. low power mode): one tap starts the film */
.play {
  position: absolute; z-index: 3; left: 50%; top: var(--play-top, 780px); width: 112px; height: 112px; margin-left: -56px;
  border: 0; border-radius: 50%; padding: 0; cursor: pointer; color: var(--button-ink); background: var(--button);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18); display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
}
.play[hidden] { display: none; }
.play svg { width: 48px; height: 48px; margin-left: 6px; fill: currentColor; }
.play:hover { transform: scale(1.04); }
.play:focus-visible { outline: 4px solid var(--button); outline-offset: 4px; }

body[data-state="playing"][data-idle] .film { cursor: none; }

/* the hand-off: the film fades, the demo underneath takes the clicks */
body[data-state="demo"] .film { opacity: 0; pointer-events: none; }
body[data-state="demo"] .demo { pointer-events: auto; }

/* controls */
.ctl {
  position: fixed; z-index: 5; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: center; gap: 8px;
}
.ctl[hidden] { display: none; }
@media (min-width: 900px) { .ctl { justify-content: flex-start; left: 24px; right: auto; top: 18px; bottom: auto; } }
.vbtn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--ink); background: var(--ground); color: var(--ink); font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1; cursor: pointer;
}
.vbtn[hidden] { display: none; }
.vbtn svg { width: 16px; height: 16px; flex: none; }
.vbtn.dark { background: var(--ink); color: var(--ground); }
.vbtn[aria-pressed="true"] { background: var(--button); border-color: var(--button); color: var(--button-ink); }
.vbtn:focus-visible { outline: 3px solid var(--button); outline-offset: 3px; }