/*
Theme Name: CinemaWall Child
Theme URI: https://example.com/cinemawall
Description: Fullscreen looping background video overlaid with positionable, scalable clickable icon hotspots. Child theme of Twenty Twenty-Five. Hotspots are managed as a Custom Post Type; positions are stored as viewport percentages for full responsiveness. Empty by default.
Author: Arno Klein
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: cinemawall
*/

/* ==========================================================================
   Base reset for the fullscreen experience
   The page template renders ONLY the video stage + hotspots, nothing else.
   ========================================================================== */

html.cinemawall-active,
html.cinemawall-active body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;          /* no scroll: this is a single-screen experience */
  background: #000;
}

/* Hide admin bar gap on the fullscreen template */
html.cinemawall-active.admin-bar .cw-stage { top: 0; }

/* ==========================================================================
   Video stage: fills the viewport on every device, no letterboxing
   object-fit: cover crops the video to fill without distortion.
   ========================================================================== */

.cw-stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;            /* dynamic viewport height: correct on mobile w/ URL bars */
  overflow: hidden;
  background: #000;
}

.cw-stage__video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  pointer-events: none;      /* clicks pass through to hotspots */
  background: #000;
}

/* Optional dark scrim to keep labels legible over bright footage.
   Strength is controlled from the theme customizer (see functions.php). */
.cw-stage__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--cw-scrim, 0.25));
  pointer-events: none;
}

/* Poster shown until video can play / for users who block autoplay */
.cw-stage__poster {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

/* ==========================================================================
   Hotspots: positioned by percentage, scaled by a per-hotspot multiplier.
   --cw-x / --cw-y are the CENTER of the icon, so scaling never shifts it.
   --cw-scale multiplies a base size that itself shrinks on small screens.
   ========================================================================== */

.cw-hotspots {
  position: absolute;
  inset: 0;
  pointer-events: none;      /* layer is transparent to clicks... */
}

.cw-hotspot {
  --cw-base: 96px;           /* base icon edge length on desktop */
  position: absolute;
  left: var(--cw-x, 50%);
  top: var(--cw-y, 50%);
  transform: translate(-50%, -50%);
  width: calc(var(--cw-base) * var(--cw-scale, 1));
  pointer-events: auto;      /* ...but each hotspot is clickable */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cw-hotspot__icon {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  transition: transform 180ms ease, box-shadow 180ms ease;
  display: block;
}

.cw-hotspot__label {
  font-size: clamp(0.7rem, 1.6vw, 0.95rem);
  line-height: 1.2;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  max-width: 14ch;
  font-family: inherit;
}

/* Hover / focus affordance */
.cw-hotspot:hover .cw-hotspot__icon,
.cw-hotspot:focus-visible .cw-hotspot__icon {
  transform: scale(1.06);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.6);
}

.cw-hotspot:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 6px;
  border-radius: 18px;
}

/* ==========================================================================
   Responsive sizing: shrink the base icon on narrow viewports so a layout
   that looks right on desktop stays usable on phones. Percentage positions
   are preserved; only the base size changes.
   ========================================================================== */

@media (max-width: 1024px) {
  .cw-hotspot { --cw-base: 80px; }
}

@media (max-width: 640px) {
  .cw-hotspot { --cw-base: 64px; }
}

@media (max-width: 380px) {
  .cw-hotspot { --cw-base: 52px; }
}

/* Respect reduced-motion: the video still loops (it's ambient, not essential
   motion) but we drop the hover scale animation. */
@media (prefers-reduced-motion: reduce) {
  .cw-hotspot__icon { transition: none; }
}