/* Frame container primitives.
   Per-frame styles live in css/frames/<n>-<name>.css and are loaded
   alongside the frame module in later steps. */

.frame {
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-frame) var(--ease-default);
  z-index: 1;
}

.frame.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 10;
}

.frame.is-exiting {
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

/* Layered: target sits on top, transitions in over its own duration.
   Must outrank .static-content (z-index 50) so tier-card CTAs in the
   post-cinematic page can still open F08 takeover above the long-form. */
.frame.is-layered {
  z-index: 100;
}

/* Dimmed: the frame underneath a layered open (e.g. Frame 07 while 08 is open). */
.frame.is-dimmed {
  filter: brightness(0.2);
  transition: filter var(--dur-takeover, 800ms) var(--ease-default);
}

/* Static post-cinematic content (manifesto, tiers, calendar, form, footer).
   Hidden until Frame 03 hand-off. */
.static-content {
  position: relative;
  z-index: 2;
}

.static-content[hidden] {
  display: none;
}