/* The client's video (2026-10-15): the round pop-up in the corner and the window the film plays in.
   Shared by the homepage and the sweepstakes page, whose palettes are the same wine, gold and paper,
   so the colours are written out here rather than borrowed from either. film.js drives it. */

/* ---------------------------------------------------------------- the window */
.film {
  width: min(60rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 2rem);
  padding: 0; border: 1px solid #bd9857; background: #0c0a08; color: #f6eedc; overflow: visible;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8);
}
.film::backdrop { background: rgba(7, 6, 4, .84); backdrop-filter: blur(3px); }
.film-frame { position: relative; aspect-ratio: 848 / 480; max-height: calc(100dvh - 2rem); }
.film-video { display: block; width: 100%; height: 100%; background: #0c0a08; }
.film-video::cue { font-family: Georgia, 'Times New Roman', serif; font-size: 1.05em; line-height: 1.35; color: #fff5df; background: rgba(8, 6, 4, .74); }
/* the close button sits on the frame's corner, clear of the video's own controls */
.film-x {
  position: absolute; top: -.9rem; right: -.9rem; z-index: 2; display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid #bd9857; background: #f6eedc;
  font: 400 1.6rem/1 Georgia, serif; color: #681c2b; cursor: pointer;
}
.film-x:hover { background: #fff7e6; }
.film-x:focus-visible, .film-bubble:focus-visible, .film-pop-x:focus-visible { outline: 3px solid #bd9857; outline-offset: 3px; }
@media (max-width: 600px) {
  .film { width: calc(100vw - 1rem); }
  .film-x { top: -3.1rem; right: 0; }
}

/* ---------------------------------------------------------------- the pop-up
   Bottom right: both pages put their first button at the left, near the foot of the first screen. */
.film-pop:not([hidden]) {
  position: fixed; z-index: 150; right: max(1rem, env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom));
  animation: film-pop-in .45s ease-out both;
}
@keyframes film-pop-in { from { opacity: 0; transform: translateY(.75rem); } to { opacity: 1; transform: none; } }
.film-bubble {
  position: relative; display: block; width: 7rem; height: 7rem; padding: 0; border: 2px solid #bd9857; border-radius: 50%;
  background: #0c0a08; cursor: pointer; overflow: visible;
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .55), 0 0 0 4px rgba(246, 238, 220, .9);
  transition: transform .2s ease;
}
.film-bubble:hover { transform: scale(1.04); }
.film-bubble-video { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; pointer-events: none; }
/* how long the film is, on a tab at the foot of the circle, with the play mark */
.film-bubble-label {
  position: absolute; left: 50%; bottom: -.55rem; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .35rem;
  padding: .22rem .6rem .22rem .5rem; border-radius: 999px; background: #681c2b; color: #fff5df;
  font: 600 .7rem/1.2 Arial, Helvetica, sans-serif; letter-spacing: .06em; white-space: nowrap;
}
.film-bubble-play { width: 0; height: 0; border-style: solid; border-width: .3rem 0 .3rem .5rem; border-color: transparent transparent transparent currentColor; }
.film-pop-x {
  position: absolute; top: -.35rem; left: -.35rem; display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid #bd9857; background: #f6eedc;
  font: 400 1.05rem/1 Georgia, serif; color: #681c2b; cursor: pointer;
}
/* a bigger target than it looks, for a thumb */
.film-pop-x::after { content: ''; position: absolute; inset: -.5rem; }
@media (max-width: 600px) { .film-bubble { width: 5.25rem; height: 5.25rem; } }
/* out of the way while anything else is open over the page */
body.welcome-open .film-pop, body.bank-open-lock .film-pop, body.film-open .film-pop { display: none; }
@media (prefers-reduced-motion: reduce) {
  .film-pop:not([hidden]) { animation: none; }
  .film-bubble { transition: none; }
}
@media print { .film-pop, .film { display: none !important; } }