/* media-layer.css - the photo layer (2026-11-11, experiment).
   Alex's own festival photos used as light and texture. EVERY rule here is scoped under
   html.fc-media, which media-layer.js sets only when the switch is on. With the switch off this
   file matches nothing and no image is fetched (the photo elements are only created when on).
   Each placement can be turned off on its own: html[data-fcm-off~="hero"] etc.
   Nothing here touches the shared rules in festmap-theme.css, the nav, or the top bar.
   Remove the two files (this + media-layer.js) and their tags to undo the whole thing. */

/* ---------- shared ---------- */
/* The whole layer (photo, tint and fades together) stays invisible until its photo has loaded, so a
   half-built layer (a bare tint colour, an empty fade) is never on screen. */
html.fc-media .fcm-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;isolation:isolate;border-radius:inherit;
  opacity:0;transition:opacity .9s var(--ease,ease)}
html.fc-media .fcm-layer.fcm-ready{opacity:1}
html.fc-media .fcm-layer img,
html.fc-media .fcm-layer video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  object-position:var(--fcm-pos,50% 50%);transform-origin:var(--fcm-pos,50% 50%);transform:scale(var(--fcm-zoom,1))}
/* Tilt: the frame turns about its centre, scaled (--fcm-fit, from media-layer.js) so it still covers. */
html.fc-media .fcm-frame{position:absolute;inset:0;transform:rotate(var(--fcm-rot,0deg)) scale(var(--fcm-fit,1))}
/* The host becomes its own stacking context and the layer sits at z-index -1 inside it: above the
   host's own background, below all of its content, without changing how any child is positioned.
   (A host that is already position:absolute/fixed keeps that: only static hosts get relative.) */
html.fc-media [data-fcm]{isolation:isolate}
html.fc-media [data-fcm].fcm-static{position:relative}

/* ---------- 1. hero: a photo or loop behind arrival content ---------- */
/* The edges fade out with a MASK (the photo itself turns transparent), so whatever the page has
   underneath (its background, dots, starfield) shows through. No colour is guessed at the edges.
   --fcm-dim (data-fcm-dim, 0-0.9) lays the theme's own background over the photo for text
   contrast. */
html.fc-media .fcm-hero{
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 58%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 58%,transparent 100%)}
html.fc-media .fcm-hero::after{content:"";position:absolute;inset:0;background:var(--bg);opacity:var(--fcm-dim,.35)}
html.fc-media .fcm-hero img,
html.fc-media .fcm-hero video{filter:saturate(1.05)}

/* ---------- 2. duotone: recoloured into two theme colours ---------- */
/* Shadows go to --bg, highlights to --fcm-tint (defaults to the theme accent; a role tile passes
   its role colour). Works in every theme with one image file. */
html.fc-media .fcm-duo{background:var(--fcm-tint,var(--accent))}
html.fc-media .fcm-duo img{filter:grayscale(1) contrast(1.15) brightness(1.08)}
/* The blend sits on the frame, not the photo: the frame's transform makes it its own group, so a
   blend on the photo inside would only mix with the empty frame and the tint would be lost. */
html.fc-media .fcm-duo .fcm-frame{mix-blend-mode:multiply}
html.fc-media .fcm-duo::after{content:"";position:absolute;inset:0;background:var(--bg);mix-blend-mode:lighten}
html.fc-media .fcm-duo img{opacity:.92}
/* Bottom veil so a label over the tile always reads (an element, because ::after is the blend). */
html.fc-media .fcm-duo .fcm-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 30%,color-mix(in srgb,var(--bg) 82%,transparent) 100%)}

/* ---------- 3. empty state: a quiet photo that fades out under the message ---------- */
html.fc-media .fcm-empty{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 25%,transparent 88%);
          mask-image:linear-gradient(180deg,#000 0%,#000 25%,transparent 88%)}
html.fc-media .fcm-empty img{opacity:.75}

/* ---------- 4. texture: blurred, barely there, behind a panel ---------- */
html.fc-media .fcm-texture img{filter:blur(18px) saturate(1.25);transform:scale(calc(var(--fcm-zoom,1) * 1.15))}
html.fc-media .fcm-texture img{opacity:var(--fcm-strength,.12)}

/* ---------- per-placement off switches ---------- */
html.fc-media[data-fcm-off~="hero"]    .fcm-hero,
html.fc-media[data-fcm-off~="duo"]     .fcm-duo,
html.fc-media[data-fcm-off~="empty"]   .fcm-empty,
html.fc-media[data-fcm-off~="texture"] .fcm-texture{display:none}

/* Reduced motion: no fades either. (Loops are never created for these visitors.) */
@media (prefers-reduced-motion: reduce){
  html.fc-media .fcm-layer{transition:none}
}

/* ---------- 5. page: one photo fixed behind a whole page (2026-11-12) ---------- */
/* The host is <body>. The photo is fixed to the window (it stays put while the page scrolls) at
   z-index -1 inside body's own stacking context (isolation from [data-fcm] above), so it sits over
   body's background and under everything on the page. --fcm-dim lays the theme background over it
   for text, --fcm-opacity (all kinds) fades the photo itself. */
html.fc-media .fcm-page{position:fixed;inset:0;border-radius:0}
html.fc-media .fcm-page::after{content:"";position:absolute;inset:0;background:var(--panel,var(--bg));opacity:var(--fcm-dim,.35)}

/* Opacity, for every kind: on the frame, so it multiplies with each kind's own look. */
html.fc-media .fcm-frame{opacity:var(--fcm-opacity,1)}

/* Stars mix ("dry/wet"): how much of a page's own starfield stays over a photo. Only the
   discovery page has one (.sky in index.html); the value comes from a slot's data-fcm-stars. */
html.fc-media .sky{opacity:var(--fcm-stars,1);transition:opacity .25s}
html.fc-media[data-fcm-off~="page"] .fcm-page{display:none}

/* ---------- role bands and roomy empty states (2026-11-12) ---------- */
/* .fcm-band: a small label (the onboarding quiz's role-group names) that becomes a short photo band
   when its slot is on. Its text turns to --text so it reads on the tinted photo. */
html.fc-media .fcm-band[data-fcm]{padding:24px 12px 7px;border-radius:10px;overflow:hidden;color:var(--text)!important;
  box-sizing:border-box;min-height:var(--fcm-h,0px);display:flex;align-items:flex-end;
  text-shadow:0 1px 6px color-mix(in srgb,var(--bg) 80%,transparent)}
/* .fcm-roomy: an empty-state message that makes room above itself for its photo. */
html.fc-media .fcm-roomy[data-fcm]{padding-top:var(--fcm-h,120px);overflow:hidden}