/**
 * FifoConsult Custom WordPress Theme
 *
 * CSS module: BODY 02 / Interface Film System.
 *
 * Module:
 * FifoConsult — Interface Film System.
 *
 * This stylesheet controls the second BODY storytelling block on the
 * FifoConsult front page, placed after BODY 01 / Client Trust and before
 * BODY 03 / Project Architecture.
 *
 * Purpose:
 * The Interface Film System presents FifoConsult work as cinematic interface
 * scenes instead of static screenshots. It combines an open PNG cinema stage,
 * mode navigation, animated captions, technology markers, subtle motion and
 * a dark premium interface-film atmosphere.
 *
 * Responsibilities:
 * - defines the full-screen BODY 02 section layout
 * - builds the left cinematic interface stage
 * - styles the right-side text, title, message and mode navigation
 * - controls the open cinema PNG presentation area
 * - positions real scene PNG images inside the visual stage
 * - styles scene labels and dynamic meta/caption text
 * - controls fade, scene swap, breathing and light-sweep behavior
 * - styles PHP / CSS / JavaScript / TypeScript / WooCommerce tech markers
 * - manages mini glass tooltips for technology labels
 * - handles WooCommerce and TypeScript visual activation states
 * - supports pause/resume visual states for scene sequences
 * - applies dark cinematic background overlays and readability layers
 * - keeps BODY 02 visually separated from BODY 01 and BODY 03
 *
 * Main interface modes:
 * - Custom Code Interfaces
 * - Floating Web Panels
 * - Brand & Identity Motion
 * - Publication Systems
 *
 * Related template:
 * template-parts/body-interface-film-system.php
 *
 * Related JavaScript:
 * assets/js/body-interface-film-system.js
 *
 * Visual assets:
 * assets/img/body/interface-film/
 * assets/img/body/interface-film/web-panels/
 * assets/img/body/interface-film/identity-motion/
 * assets/img/body/interface-film/publication-systems/
 *
 * Visual identity:
 * Dark cinematic stage, restrained gold accent, glass interface atmosphere,
 * custom-coded PHP/CSS/JavaScript presentation logic and FifoConsult
 * ART-to-SMART digital system language.
 *
 * Important implementation note:
 * This CSS file is intentionally separated from main.css and from other BODY
 * modules. BODY 02 has its own visual rhythm, PNG scene system, technology
 * markers and animation rules, so it should remain modular and independent.
 *
 * Concept, visual direction, structure, interface design and implementation:
 * Dragan Oljaca / FifoConsult
 *
 * Website: https://www.fifoconsult.com
 * Author: Dragan Oljaca
 * Brand: FifoConsult
 *
 * All rights reserved.
 */

.fc-interface-film-system {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: grid;
  grid-template-columns: 58% 42%;
  align-items: center;
  overflow: hidden;
  padding: 120px 120px 90px 120px;
  background:
    radial-gradient(
      circle at 22% 48%,
      rgba(70, 90, 130, 0.16),
      transparent 34%
    ),
    radial-gradient(
      circle at 72% 42%,
      rgba(211, 162, 27, 0.08),
      transparent 34%
    ),
    linear-gradient(135deg, #020202 0%, #050608 44%, #000000 100%);
  color: #ffffff;
}

@media (min-width: 1181px) {
  #fcInterfaceFilmSystem .fc-interface-film-left {
    grid-column: 1;
    grid-row: 1;
  }

  #fcInterfaceFilmSystem .fc-interface-film-right {
    grid-column: 2;
    grid-row: 1;
  }
}

/* LEFT / Interface Film Stage */

.fc-interface-film-left {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc-interface-film-stage {
  position: relative;
  width: min(860px, 92%);
  aspect-ratio: 16 / 9;
  border-radius: 34px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.015)
    ),
    rgba(5, 7, 12, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 34px 100px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 80px rgba(255, 255, 255, 0.025);
  overflow: hidden;
  isolation: isolate;
}

.fc-interface-film-stage-glow {
  position: absolute;
  inset: -28%;
  z-index: 0;
  background:
    radial-gradient(
      circle at 38% 40%,
      rgba(70, 115, 180, 0.22),
      transparent 42%
    ),
    radial-gradient(
      circle at 72% 58%,
      rgba(211, 162, 27, 0.14),
      transparent 38%
    );
  filter: blur(28px);
  opacity: 0.7;
  pointer-events: none;
}

.fc-interface-film-label {
  position: absolute;
  top: 34px;
  left: 38px;
  z-index: 4;
  color: rgba(211, 162, 27, 0.94);
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.fc-interface-film-media-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc-interface-film-panel {
  width: 64%;
  height: 48%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 26px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.09),
      rgba(255, 255, 255, 0.018)
    ),
    rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.095);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  transform: perspective(900px) rotateY(-12deg) rotateX(4deg);
}

.fc-interface-film-panel-note {
  color: rgba(244, 243, 247, 0.74);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fc-interface-film-code-layer {
  position: absolute;
  right: 38px;
  bottom: 72px;
  z-index: 5;
}

.fc-interface-film-code-window {
  display: flex;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.54);
  border: 1px solid rgba(255, 255, 255, 0.095);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.fc-interface-film-code-window span {
  color: rgba(244, 243, 247, 0.82);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fc-interface-film-meta {
  position: absolute;
  left: 38px;
  bottom: 34px;
  z-index: 4;
  max-width: 58%;
  color: rgba(244, 243, 247, 0.52);
  font-size: 12px;
  line-height: 1.45;
}

/* RIGHT / Text and navigation */

.fc-interface-film-right {
  position: relative;
  z-index: 3;
  max-width: 520px;
  justify-self: start;
  padding-left: 20px;
}

.fc-interface-film-kicker {
  margin: 0 0 22px;
  color: rgba(211, 162, 27, 0.95);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.fc-interface-film-right h2 {
  margin: 0 0 28px;
  color: rgba(244, 243, 247, 0.94);
  font-size: clamp(48px, 4.4vw, 76px);
  line-height: 0.95;
  font-weight: 850;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}

.fc-interface-film-lead {
  margin: 0 0 42px;
  max-width: 470px;
  color: rgba(220, 224, 232, 0.76);
  font-size: 20px;
  line-height: 1.42;
  font-weight: 650;
}

.fc-interface-film-copy {
  margin-bottom: 42px;
  max-width: 510px;
}

.fc-interface-film-copy p {
  margin: 0;
  color: rgba(210, 216, 226, 0.72);
  font-size: 15px;
  line-height: 1.68;
}

.fc-interface-film-highlight {
  color: rgba(211, 162, 27, 0.96);
  font-weight: 800;
}

.fc-interface-film-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 390px;
}

.fc-interface-film-nav button {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(244, 243, 247, 0.48);
  font-family: Inter, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color 0.25s ease,
    transform 0.25s ease,
    text-shadow 0.25s ease;
}

.fc-interface-film-nav button:hover,
.fc-interface-film-nav button:focus-visible,
.fc-interface-film-nav button.is-active {
  color: rgba(211, 162, 27, 0.96);
  transform: translateX(8px);
  text-shadow: 0 0 18px rgba(211, 162, 27, 0.24);
  outline: none;
}
/* BODY 02 / Basic content transition */

.fc-interface-film-system.is-changing .fc-interface-film-label,
.fc-interface-film-system.is-changing .fc-interface-film-panel-note,
.fc-interface-film-system.is-changing .fc-interface-film-meta,
.fc-interface-film-system.is-changing .fc-interface-film-copy {
  opacity: 0;
  transform: translateY(6px);
}

.fc-interface-film-label,
.fc-interface-film-panel-note,
.fc-interface-film-meta,
.fc-interface-film-copy {
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}
/* BODY 02 / Scroll intro animation */

.fc-interface-film-system.is-interface-film-ready .fc-interface-film-left,
.fc-interface-film-system.is-interface-film-ready .fc-interface-film-right {
  opacity: 0;
  transform: translateY(34px);
}

.fc-interface-film-system.is-interface-film-ready .fc-interface-film-stage {
  opacity: 0;
  transform: translateY(42px) scale(0.96);
}

.fc-interface-film-system.is-interface-film-ready.is-interface-film-visible
  .fc-interface-film-left,
.fc-interface-film-system.is-interface-film-ready.is-interface-film-visible
  .fc-interface-film-right {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 1.1s ease,
    transform 1.1s ease;
}

.fc-interface-film-system.is-interface-film-ready.is-interface-film-visible
  .fc-interface-film-stage {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 1.25s ease,
    transform 1.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.fc-interface-film-system.is-interface-film-visible .fc-interface-film-right {
  transition-delay: 0.18s;
}

.fc-interface-film-system.is-interface-film-visible .fc-interface-film-stage {
  transition-delay: 0.04s;
}
/* BODY 02 / Real scene image layer */

.fc-interface-film-scene-image {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(1.02);
  transition:
    opacity 0.42s ease,
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.fc-interface-film-system[data-mode="custom-code"]
  .fc-interface-film-scene-image {
  opacity: 1;
  transform: scale(1);
}

.fc-interface-film-system[data-mode="custom-code"] .fc-interface-film-panel {
  opacity: 0;
  transform: perspective(900px) rotateY(-12deg) rotateX(4deg) scale(0.96);
  pointer-events: none;
}

.fc-interface-film-panel {
  transition:
    opacity 0.35s ease,
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
/* ============================================================
   BODY 02 / Interface Film Stage — Open Cinema Layout
   Removes the artificial frame and moves generic text below
   the transparent PNG scene.
   ============================================================ */

.fc-interface-film-stage {
  width: min(900px, 96%);
  height: 620px;
  aspect-ratio: auto;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.fc-interface-film-stage-glow {
  display: none !important;
}

/* Real transparent PNG scene becomes the upper cinematic area. */

.fc-interface-film-scene-image {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 440px;
  object-fit: contain;
  object-position: center center;
  z-index: 3;
}

/* Placeholder panel is hidden when real PNG scene is active. */

.fc-interface-film-system[data-mode="custom-code"] .fc-interface-film-panel {
  opacity: 0 !important;
  pointer-events: none;
}

/* The generated mode label moves below the video/PNG scene. */

.fc-interface-film-label {
  top: auto !important;
  left: 48px !important;
  bottom: 104px !important;
  z-index: 5;
  color: rgba(211, 162, 27, 0.96);
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* The generated meta/caption text sits below the label. */

.fc-interface-film-meta {
  left: 48px !important;
  bottom: 46px !important;
  z-index: 5;
  max-width: 520px;
  color: rgba(210, 216, 226, 0.56);
  font-size: 12px;
  line-height: 1.45;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto;
}

/* PHP / CSS / JavaScript marker moves to the lower right
   of the same caption zone, without the heavy pill look. */

.fc-interface-film-code-layer {
  right: 48px !important;
  bottom: 48px !important;
  z-index: 5;
}

.fc-interface-film-code-window {
  padding: 0 !important;
  gap: 18px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.fc-interface-film-code-window span {
  color: rgba(211, 162, 27, 0.86);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Keep non-image placeholder modes clean. */

.fc-interface-film-system:not([data-mode="custom-code"])
  .fc-interface-film-panel {
  opacity: 1;
}

.fc-interface-film-system:not([data-mode="custom-code"])
  .fc-interface-film-scene-image {
  opacity: 0;
}
/* ============================================================
   BODY 02 / TransGen Scene — Subtle Cinematic Motion
   Simulates video-like presentation inside the JS interface stage.
   ============================================================ */

.fc-interface-film-system[data-mode="custom-code"].is-interface-film-visible
  .fc-interface-film-scene-image {
  animation: fcInterfaceFilmSceneBreath 9.5s ease-in-out infinite alternate;
  transform-origin: center center;
  will-change: transform, opacity;
}

/* Soft cinematic breathing motion — very slow, not decorative. */
@keyframes fcInterfaceFilmSceneBreath {
  0% {
    transform: translate3d(-4px, 0, 0) scale(1);
    opacity: 0.88;
  }

  48% {
    transform: translate3d(5px, -5px, 0) scale(1.018);
    opacity: 0.96;
  }

  100% {
    transform: translate3d(0, -8px, 0) scale(1.028);
    opacity: 0.92;
  }
}

/* Very subtle light sweep over the upper cinema area. */
.fc-interface-film-media-layer::after {
  content: "";
  position: absolute;
  top: 8px;
  left: -35%;
  width: 34%;
  height: 420px;
  z-index: 4;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.02) 35%,
    rgba(255, 255, 255, 0.11) 50%,
    rgba(211, 162, 27, 0.035) 62%,
    transparent 100%
  );
  filter: blur(10px);
  opacity: 0;
  transform: skewX(-16deg);
  pointer-events: none;
}

.fc-interface-film-media-layer::after {
  content: "";
  position: absolute;
  top: 58px;
  left: -24%;
  width: 18%;
  height: 310px;
  z-index: 4;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 28%,
    rgba(255, 255, 255, 0.1) 48%,
    rgba(211, 162, 27, 0.045) 58%,
    transparent 100%
  );
  filter: blur(8px);
  opacity: 0;
  transform: skewX(-16deg);
  pointer-events: none;
}

/* Respect reduced motion settings. */
@media (prefers-reduced-motion: reduce) {
  .fc-interface-film-system[data-mode="custom-code"].is-interface-film-visible
    .fc-interface-film-scene-image,
  .fc-interface-film-system[data-mode="custom-code"].is-interface-film-visible
    .fc-interface-film-media-layer::after {
    animation: none !important;
  }
}
/* ============================================================
   BODY 02 / TransGen Scene — Fast Visible Light Sweep
   Corrected after previous sweep became too weak.
   ============================================================ */

.fc-interface-film-media-layer::after {
  content: "";
  position: absolute;
  top: 42px;
  left: -34%;
  width: 28%;
  height: 350px;
  z-index: 4;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 24%,
    rgba(255, 255, 255, 0.16) 46%,
    rgba(211, 162, 27, 0.07) 56%,
    transparent 100%
  );
  filter: blur(7px);
  opacity: 0;
  transform: skewX(-16deg);
  pointer-events: none;
}

.fc-interface-film-system[data-mode="custom-code"].is-interface-film-visible
  .fc-interface-film-media-layer::after {
  animation: fcInterfaceFilmLightSweep 4.6s ease-in-out infinite;
}

@keyframes fcInterfaceFilmLightSweep {
  0% {
    left: -34%;
    opacity: 0;
  }

  18% {
    left: -34%;
    opacity: 0;
  }

  28% {
    opacity: 0.58;
  }

  42% {
    opacity: 0.28;
  }

  54% {
    left: 104%;
    opacity: 0;
  }

  100% {
    left: 104%;
    opacity: 0;
  }
}
/* ============================================================
   BODY 02 / TransGen Scene — One-Time Fast Light Sweep
   The PNG keeps breathing; the light sweep passes only once.
   ============================================================ */

.fc-interface-film-media-layer::after {
  content: "";
  position: absolute;
  top: 112px;
  left: -26%;
  width: 20%;
  height: 210px;
  z-index: 4;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 24%,
    rgba(255, 255, 255, 0.18) 46%,
    rgba(211, 162, 27, 0.075) 56%,
    transparent 100%
  );
  filter: blur(6px);
  opacity: 0;
  transform: skewX(-16deg);
  pointer-events: none;
}

.fc-interface-film-system[data-mode="custom-code"].is-interface-film-visible
  .fc-interface-film-media-layer::after {
  animation: fcInterfaceFilmLightSweepOnce 1.35s cubic-bezier(0.16, 1, 0.3, 1)
    0.55s 1 both;
}

@keyframes fcInterfaceFilmLightSweepOnce {
  0% {
    left: -28%;
    opacity: 0;
  }

  16% {
    opacity: 0;
  }

  34% {
    opacity: 0.58;
  }

  58% {
    opacity: 0.24;
  }

  100% {
    left: 104%;
    opacity: 0;
  }
}
/* ============================================================
   BODY 02 / TransGen Scene — Full-Width One-Time Light Sweep
   Fast reveal pass across the whole PNG scene.
   ============================================================ */

.fc-interface-film-media-layer::after {
  content: "";
  position: absolute;
  top: 86px;
  left: -44%;
  width: 30%;
  height: 235px;
  z-index: 4;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.17) 45%,
    rgba(211, 162, 27, 0.075) 56%,
    transparent 100%
  );
  filter: blur(6px);
  opacity: 0;
  transform: skewX(-16deg);
  pointer-events: none;
}

.fc-interface-film-system[data-mode="custom-code"].is-interface-film-visible
  .fc-interface-film-media-layer::after {
  animation: fcInterfaceFilmLightSweepFullOnce 1.25s
    cubic-bezier(0.16, 1, 0.3, 1) 0.45s 1 both;
}

@keyframes fcInterfaceFilmLightSweepFullOnce {
  0% {
    left: -44%;
    opacity: 0;
  }

  8% {
    opacity: 0.46;
  }

  28% {
    opacity: 0.58;
  }

  62% {
    opacity: 0.28;
  }

  100% {
    left: 112%;
    opacity: 0;
  }
}
/* BODY 02 / TransGen Scene — Earlier Light Fade Out */

@keyframes fcInterfaceFilmLightSweepFullOnce {
  0% {
    left: -44%;
    opacity: 0;
  }

  8% {
    opacity: 0.46;
  }

  24% {
    opacity: 0.58;
  }

  50% {
    opacity: 0.22;
  }

  72% {
    opacity: 0.08;
  }

  100% {
    left: 112%;
    opacity: 0;
  }
}
/* ============================================================
   BODY 02 / Custom Code Interface Scene Sequence
   Slower cinematic PNG swap without blinking.
   ============================================================ */

.fc-interface-film-scene-image {
  transition:
    opacity 1.15s ease,
    transform 1.45s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.15s ease;
}

.fc-interface-film-scene-image.is-interface-scene-swapping {
  opacity: 0 !important;
  filter: blur(2px);
}
/* ============================================================
   BODY 02 / Custom Code Scene Sequence — True Cinematic Fade
   Breathing controls only movement/scale.
   Fade swap controls opacity.
   ============================================================ */

/* Override old breathing keyframes: no opacity here. */
@keyframes fcInterfaceFilmSceneBreath {
  0% {
    transform: translate3d(-4px, 0, 0) scale(1);
  }

  48% {
    transform: translate3d(5px, -5px, 0) scale(1.018);
  }

  100% {
    transform: translate3d(0, -8px, 0) scale(1.028);
  }
}

/* Slower, softer opacity transition for scene swap. */
.fc-interface-film-scene-image {
  opacity: 1;
  transition:
    opacity 1.85s ease-in-out,
    filter 1.85s ease-in-out;
}

.fc-interface-film-scene-image.is-interface-scene-swapping {
  opacity: 0 !important;
  filter: blur(1.5px);
}
/* ============================================================
   BODY 02 / Interface Film Caption Width Control
   Keeps long scene captions away from PHP/CSS/JavaScript tags.
   ============================================================ */

.fc-interface-film-meta {
  width: 560px !important;
  max-width: 560px !important;
  line-height: 1.45;
}
/* ============================================================
   BODY 02 / Interface Film Caption Safe Zone
   Long captions must never overlap PHP / CSS / JavaScript tags.
   ============================================================ */

#fcInterfaceFilmMeta {
  display: block !important;
  box-sizing: border-box !important;

  width: clamp(420px, 34vw, 540px) !important;
  max-width: calc(100% - 380px) !important;

  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;

  line-height: 1.45 !important;
}
/* ============================================================
   BODY 02 / Interface Film Caption Layout v2
   Scene title moves above the PHP / CSS / JavaScript tags.
   Meta text stays left and can safely wrap into multiple lines.
   ============================================================ */

#fcInterfaceFilmLabel {
  position: absolute !important;
  left: auto !important;
  right: 7.8% !important;
  bottom: 128px !important;

  width: 310px !important;
  max-width: 310px !important;

  text-align: left !important;
  z-index: 8 !important;
  pointer-events: none;
}

#fcInterfaceFilmMeta {
  position: absolute !important;
  left: 8.2% !important;
  right: auto !important;
  bottom: 78px !important;

  width: 610px !important;
  max-width: 610px !important;

  display: block !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  line-height: 1.45 !important;

  z-index: 7 !important;
  pointer-events: none;
}

#fcInterfaceFilmCodeLayer,
.fc-interface-film-code-layer {
  position: absolute !important;
  right: 7.8% !important;
  bottom: 78px !important;
  z-index: 8 !important;
}
/* ============================================================
   BODY 02 / Interface Film Caption Layout v3
   Restore previous left meta feeling.
   Move scene title only to the right tech column.
   ============================================================ */

#fcInterfaceFilmMeta {
  position: absolute !important;
  left: 8.2% !important;
  right: auto !important;
  bottom: 78px !important;

  width: 520px !important;
  max-width: 520px !important;

  display: block !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  line-height: 1.45 !important;

  text-align: left !important;
  z-index: 7 !important;
  pointer-events: none;
}

#fcInterfaceFilmLabel {
  position: absolute !important;
  left: auto !important;
  right: 7.8% !important;
  bottom: 128px !important;

  width: auto !important;
  max-width: none !important;

  white-space: nowrap !important;
  text-align: right !important;

  z-index: 9 !important;
  pointer-events: none;
}

#fcInterfaceFilmCodeLayer,
.fc-interface-film-code-layer {
  position: absolute !important;
  right: 7.8% !important;
  bottom: 78px !important;

  z-index: 8 !important;
  pointer-events: none;
}
/* ============================================================
   BODY 02 / Interface Film Caption Layout v4
   Scene title + PHP/CSS/JavaScript become one left block.
   Scene description sits to the right of that block.
   ============================================================ */

#fcInterfaceFilmLabel {
  position: absolute !important;
  left: 8.2% !important;
  right: auto !important;
  bottom: 128px !important;

  width: 330px !important;
  max-width: 330px !important;

  text-align: left !important;
  white-space: nowrap !important;

  z-index: 9 !important;
  pointer-events: none;
}

#fcInterfaceFilmCodeLayer,
.fc-interface-film-code-layer {
  position: absolute !important;
  left: 8.2% !important;
  right: auto !important;
  bottom: 78px !important;

  width: 330px !important;
  max-width: 330px !important;

  display: flex !important;
  justify-content: flex-start !important;
  gap: 28px !important;

  z-index: 8 !important;
  pointer-events: none;
}

#fcInterfaceFilmMeta {
  position: absolute !important;
  left: 28.5% !important;
  right: auto !important;
  bottom: 74px !important;

  width: 560px !important;
  max-width: 560px !important;

  display: block !important;
  box-sizing: border-box !important;

  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;

  line-height: 1.45 !important;
  text-align: left !important;

  z-index: 7 !important;
  pointer-events: none;
}
/* ============================================================
   BODY 02 / Interface Film Caption Layout v5
   Scene title, tech tags and description are one left caption block.
   Description sits below PHP / CSS / JavaScript.
   ============================================================ */

#fcInterfaceFilmLabel {
  position: absolute !important;
  left: 8.2% !important;
  right: auto !important;
  bottom: 154px !important;

  width: 760px !important;
  max-width: 760px !important;

  text-align: left !important;
  white-space: nowrap !important;

  z-index: 9 !important;
  pointer-events: none;
}

#fcInterfaceFilmCodeLayer,
.fc-interface-film-code-layer {
  position: absolute !important;
  left: 8.2% !important;
  right: auto !important;
  bottom: 106px !important;

  width: 760px !important;
  max-width: 760px !important;

  display: flex !important;
  justify-content: flex-start !important;
  gap: 34px !important;

  z-index: 8 !important;
  pointer-events: none;
}

#fcInterfaceFilmMeta {
  position: absolute !important;
  left: 8.2% !important;
  right: auto !important;
  bottom: 42px !important;

  width: 760px !important;
  max-width: 760px !important;

  display: block !important;
  box-sizing: border-box !important;

  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;

  line-height: 1.45 !important;
  text-align: left !important;

  z-index: 7 !important;
  pointer-events: none;
}
/* ============================================================
   BODY 02 / Interface Film Meta Controlled Line Breaks
   JS inserts <br> after approx. 100 characters.
   ============================================================ */

#fcInterfaceFilmMeta {
  width: 760px !important;
  max-width: 760px !important;
  white-space: normal !important;
  line-height: 1.45 !important;
}
/* ============================================================
   BODY 02 / Interface Film Tech Tags — Premium Mini Icons
   PHP / CSS / JavaScript brand-color accents.
   ============================================================ */

#fcInterfaceFilmCodeLayer span,
.fc-interface-film-code-layer span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;

  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
}

/* PHP */
#fcInterfaceFilmCodeLayer span:nth-child(1),
.fc-interface-film-code-layer span:nth-child(1) {
  color: #777bb4 !important;
}

#fcInterfaceFilmCodeLayer span:nth-child(1)::before,
.fc-interface-film-code-layer span:nth-child(1)::before {
  content: "<?" !important;
  width: 15px;
  height: 15px;
  border-radius: 4px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 7px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.08em;

  color: #0b0b10;
  background: #777bb4;
  box-shadow: 0 0 10px rgba(119, 123, 180, 0.36);
}

/* CSS */
#fcInterfaceFilmCodeLayer span:nth-child(2),
.fc-interface-film-code-layer span:nth-child(2) {
  color: #1572b6 !important;
}

#fcInterfaceFilmCodeLayer span:nth-child(2)::before,
.fc-interface-film-code-layer span:nth-child(2)::before {
  content: "{}" !important;
  width: 15px;
  height: 15px;
  border-radius: 4px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 7px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.08em;

  color: #061018;
  background: #1572b6;
  box-shadow: 0 0 10px rgba(21, 114, 182, 0.36);
}

/* JavaScript */
#fcInterfaceFilmCodeLayer span:nth-child(3),
.fc-interface-film-code-layer span:nth-child(3) {
  color: #f7df1e !important;
}

#fcInterfaceFilmCodeLayer span:nth-child(3)::before,
.fc-interface-film-code-layer span:nth-child(3)::before {
  content: "JS" !important;
  width: 15px;
  height: 15px;
  border-radius: 4px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 7px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.02em;

  color: #111111;
  background: #f7df1e;
  box-shadow: 0 0 10px rgba(247, 223, 30, 0.34);
}
/* ============================================================
   BODY 02 / Interface Film Scene Title Size
   Slightly stronger changing yellow scene titles.
   ============================================================ */

#fcInterfaceFilmLabel {
  font-size: 12px !important;
  line-height: 1.25 !important;
  letter-spacing: 0.22em !important;
  font-weight: 900 !important;
}
/* ============================================================
   BODY 02 / Interface Film Tech Links + Mini Glass Tooltips
   Default achromatic. Brand color only on hover.
   ============================================================ */

#fcInterfaceFilmCodeLayer,
.fc-interface-film-code-layer {
  overflow: visible !important;
}

.fc-interface-film-tech-link {
  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;

  color: rgba(178, 181, 188, 0.72) !important;
  text-decoration: none !important;

  font-weight: 850 !important;
  letter-spacing: 0.045em !important;

  transition:
    color 0.28s ease,
    text-shadow 0.28s ease,
    opacity 0.28s ease;

  outline: none !important;
}

/* Mini icon — achromatic default */
.fc-interface-film-tech-link::before {
  width: 15px;
  height: 15px;
  border-radius: 4px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 7px;
  line-height: 1;
  font-weight: 900;

  color: rgba(12, 14, 18, 0.9);
  background: rgba(180, 184, 194, 0.55);
  box-shadow: 0 0 8px rgba(180, 184, 194, 0.13);

  transition:
    background 0.28s ease,
    box-shadow 0.28s ease,
    color 0.28s ease,
    transform 0.28s ease;
}

/* Individual mini icon symbols */
.fc-tech-php::before {
  content: "<?";
  letter-spacing: -0.08em;
}

.fc-tech-css::before {
  content: "{}";
  letter-spacing: -0.08em;
}

.fc-tech-js::before {
  content: "JS";
  letter-spacing: -0.02em;
}

/* Brand variables */
.fc-tech-php {
  --tech-color: #777bb4;
  --tech-shadow: rgba(119, 123, 180, 0.42);
}

.fc-tech-css {
  --tech-color: #1572b6;
  --tech-shadow: rgba(21, 114, 182, 0.42);
}

.fc-tech-js {
  --tech-color: #f7df1e;
  --tech-shadow: rgba(247, 223, 30, 0.34);
}

/* Hover / focus — brand color turns on */
.fc-interface-film-tech-link:hover,
.fc-interface-film-tech-link:focus-visible {
  color: var(--tech-color) !important;
  text-shadow: 0 0 14px var(--tech-shadow);
}

.fc-interface-film-tech-link:hover::before,
.fc-interface-film-tech-link:focus-visible::before {
  background: var(--tech-color);
  box-shadow: 0 0 14px var(--tech-shadow);
  transform: translateY(-1px);
}

/* Mini glass bubble */
.fc-interface-film-tech-bubble {
  position: absolute;
  left: 0;
  bottom: calc(100% + 18px);

  width: 292px;
  min-height: 92px;

  padding: 16px 18px 17px;

  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.075);

  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(255, 255, 255, 0.075),
      transparent 32%
    ),
    rgba(7, 10, 16, 0.94);

  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.58),
    0 0 26px rgba(255, 255, 255, 0.035),
    0 0 28px var(--tech-shadow);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);

  pointer-events: none;
  z-index: 30;

  transition:
    opacity 0.28s ease,
    visibility 0.28s ease,
    transform 0.28s ease;
}

.fc-interface-film-tech-bubble strong {
  display: block;
  margin-bottom: 8px;

  color: var(--tech-color);
  font-size: 15px;
  line-height: 1.15;
  font-weight: 850;
  letter-spacing: 0.06em;
}

.fc-interface-film-tech-bubble em {
  display: block;

  color: rgba(205, 211, 222, 0.78);
  font-style: normal;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0;
}

/* Tooltip appears */
.fc-interface-film-tech-link:hover .fc-interface-film-tech-bubble,
.fc-interface-film-tech-link:focus-visible .fc-interface-film-tech-bubble {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Small position correction per item */
.fc-tech-css .fc-interface-film-tech-bubble {
  left: 50%;
  transform: translateX(-50%) translateY(8px);
}

.fc-tech-css:hover .fc-interface-film-tech-bubble,
.fc-tech-css:focus-visible .fc-interface-film-tech-bubble {
  transform: translateX(-50%) translateY(0);
}

.fc-tech-js .fc-interface-film-tech-bubble {
  left: auto;
  right: 0;
}
/* ============================================================
   BODY 02 / Tech Links Final Override
   Enables hover links after previous pointer-events:none rules.
   ============================================================ */

#fcInterfaceFilmCodeLayer,
.fc-interface-film-code-layer,
#fcInterfaceFilmCodeLayer .fc-interface-film-code-window,
.fc-interface-film-code-layer .fc-interface-film-code-window {
  pointer-events: auto !important;
  overflow: visible !important;
}

#fcInterfaceFilmCodeLayer .fc-interface-film-code-window,
.fc-interface-film-code-layer .fc-interface-film-code-window {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 26px !important;
}

/* Link base */
#fcInterfaceFilmCodeLayer .fc-interface-film-tech-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;

  color: rgba(178, 181, 188, 0.72) !important;
  text-decoration: none !important;

  font-weight: 850 !important;
  letter-spacing: 0.045em !important;

  pointer-events: auto !important;
  cursor: default !important;

  transition:
    color 0.28s ease,
    text-shadow 0.28s ease,
    opacity 0.28s ease;
}

/* Mini icon default — achromatic */
#fcInterfaceFilmCodeLayer .fc-interface-film-tech-link::before {
  width: 15px !important;
  height: 15px !important;
  border-radius: 4px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 7px !important;
  line-height: 1 !important;
  font-weight: 900 !important;

  color: rgba(12, 14, 18, 0.9) !important;
  background: rgba(180, 184, 194, 0.55) !important;
  box-shadow: 0 0 8px rgba(180, 184, 194, 0.13) !important;

  transition:
    background 0.28s ease,
    box-shadow 0.28s ease,
    color 0.28s ease,
    transform 0.28s ease;
}

#fcInterfaceFilmCodeLayer .fc-tech-php::before {
  content: "<?" !important;
  letter-spacing: -0.08em !important;
}

#fcInterfaceFilmCodeLayer .fc-tech-css::before {
  content: "{}" !important;
  letter-spacing: -0.08em !important;
}

#fcInterfaceFilmCodeLayer .fc-tech-js::before {
  content: "JS" !important;
  letter-spacing: -0.02em !important;
}

/* Brand variables */
#fcInterfaceFilmCodeLayer .fc-tech-php {
  --tech-color: #777bb4;
  --tech-shadow: rgba(119, 123, 180, 0.42);
}

#fcInterfaceFilmCodeLayer .fc-tech-css {
  --tech-color: #1572b6;
  --tech-shadow: rgba(21, 114, 182, 0.42);
}

#fcInterfaceFilmCodeLayer .fc-tech-js {
  --tech-color: #f7df1e;
  --tech-shadow: rgba(247, 223, 30, 0.34);
}

/* Hover ON */
#fcInterfaceFilmCodeLayer .fc-interface-film-tech-link:hover,
#fcInterfaceFilmCodeLayer .fc-interface-film-tech-link:focus-visible {
  color: var(--tech-color) !important;
  text-shadow: 0 0 14px var(--tech-shadow) !important;
}

#fcInterfaceFilmCodeLayer .fc-interface-film-tech-link:hover::before,
#fcInterfaceFilmCodeLayer .fc-interface-film-tech-link:focus-visible::before {
  background: var(--tech-color) !important;
  box-shadow: 0 0 14px var(--tech-shadow) !important;
  transform: translateY(-1px) !important;
}

/* Kill old span-icon rules on bubble spans */
#fcInterfaceFilmCodeLayer .fc-interface-film-tech-bubble::before {
  content: none !important;
  display: none !important;
}

/* Mini glass tooltip */
#fcInterfaceFilmCodeLayer .fc-interface-film-tech-bubble {
  position: absolute !important;
  left: 0 !important;
  bottom: calc(100% + 18px) !important;

  width: 292px !important;
  min-height: 92px !important;

  padding: 16px 18px 17px !important;

  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;

  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(255, 255, 255, 0.075),
      transparent 32%
    ),
    rgba(7, 10, 16, 0.94) !important;

  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.58),
    0 0 26px rgba(255, 255, 255, 0.035),
    0 0 28px var(--tech-shadow) !important;

  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;

  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(8px) !important;

  pointer-events: none !important;
  z-index: 50 !important;

  display: block !important;

  transition:
    opacity 0.28s ease,
    visibility 0.28s ease,
    transform 0.28s ease !important;
}

#fcInterfaceFilmCodeLayer .fc-interface-film-tech-bubble strong {
  display: block !important;
  margin-bottom: 8px !important;

  color: var(--tech-color) !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  letter-spacing: 0.06em !important;
}

#fcInterfaceFilmCodeLayer .fc-interface-film-tech-bubble em {
  display: block !important;

  color: rgba(205, 211, 222, 0.78) !important;
  font-style: normal !important;
  font-size: 14px !important;
  line-height: 1.48 !important;
  letter-spacing: 0 !important;
}

/* Show tooltip */
#fcInterfaceFilmCodeLayer
  .fc-interface-film-tech-link:hover
  .fc-interface-film-tech-bubble,
#fcInterfaceFilmCodeLayer
  .fc-interface-film-tech-link:focus-visible
  .fc-interface-film-tech-bubble {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Position correction */
#fcInterfaceFilmCodeLayer .fc-tech-css .fc-interface-film-tech-bubble {
  left: 50% !important;
  transform: translateX(-50%) translateY(8px) !important;
}

#fcInterfaceFilmCodeLayer .fc-tech-css:hover .fc-interface-film-tech-bubble,
#fcInterfaceFilmCodeLayer
  .fc-tech-css:focus-visible
  .fc-interface-film-tech-bubble {
  transform: translateX(-50%) translateY(0) !important;
}

#fcInterfaceFilmCodeLayer .fc-tech-js .fc-interface-film-tech-bubble {
  left: auto !important;
  right: 0 !important;
}
/* ============================================================
   BODY 02 / Tech Tooltip Fine Tuning
   Softer tech links, smaller tooltip text, tooltip above title.
   ============================================================ */

/* Tech link block must be above scene title when tooltip opens */
#fcInterfaceFilmCodeLayer,
.fc-interface-film-code-layer {
  z-index: 80 !important;
  pointer-events: auto !important;
  overflow: visible !important;
}

/* Scene title stays visually behind tooltip */
#fcInterfaceFilmLabel {
  z-index: 6 !important;
}

/* PHP / CSS / JavaScript links — smaller, regular, subtler */
#fcInterfaceFilmCodeLayer .fc-interface-film-tech-link {
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.035em !important;
  opacity: 0.78 !important;
  gap: 6px !important;
}

#fcInterfaceFilmCodeLayer .fc-interface-film-tech-link:hover,
#fcInterfaceFilmCodeLayer .fc-interface-film-tech-link:focus-visible {
  opacity: 1 !important;
  font-weight: 600 !important;
}

/* Mini icons slightly smaller and less loud */
#fcInterfaceFilmCodeLayer .fc-interface-film-tech-link::before {
  width: 13px !important;
  height: 13px !important;
  border-radius: 4px !important;

  font-size: 6px !important;
  font-weight: 800 !important;

  box-shadow: 0 0 6px rgba(180, 184, 194, 0.12) !important;
}

#fcInterfaceFilmCodeLayer .fc-interface-film-tech-link:hover::before,
#fcInterfaceFilmCodeLayer .fc-interface-film-tech-link:focus-visible::before {
  box-shadow: 0 0 10px var(--tech-shadow) !important;
  transform: translateY(-1px) !important;
}

/* Tooltip bubble — smaller, calmer, more premium */
#fcInterfaceFilmCodeLayer .fc-interface-film-tech-bubble {
  width: 252px !important;
  min-height: auto !important;

  padding: 13px 15px 14px !important;
  border-radius: 16px !important;

  bottom: calc(100% + 15px) !important;

  z-index: 999 !important;

  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(255, 255, 255, 0.06),
      transparent 32%
    ),
    rgba(7, 10, 16, 0.97) !important;

  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.64),
    0 0 18px rgba(255, 255, 255, 0.028),
    0 0 18px var(--tech-shadow) !important;
}

/* Tooltip title — smaller, not too bold */
#fcInterfaceFilmCodeLayer .fc-interface-film-tech-bubble strong {
  margin-bottom: 7px !important;

  font-size: 12px !important;
  line-height: 1.15 !important;
  font-weight: 650 !important;
  letter-spacing: 0.055em !important;
}

/* Tooltip paragraph — regular, smaller */
#fcInterfaceFilmCodeLayer .fc-interface-film-tech-bubble em {
  font-size: 12px !important;
  line-height: 1.42 !important;
  font-weight: 400 !important;
  color: rgba(205, 211, 222, 0.72) !important;
}
/* ============================================================
   BODY 02 / Tech Links Extra Small Refinement
   Smaller PHP / CSS / JavaScript tags.
   ============================================================ */

#fcInterfaceFilmCodeLayer .fc-interface-film-tech-link {
  font-size: 12px !important;
  font-weight: 450 !important;
  letter-spacing: 0.025em !important;
  gap: 5px !important;
  opacity: 0.72 !important;
}

#fcInterfaceFilmCodeLayer .fc-interface-film-tech-link:hover,
#fcInterfaceFilmCodeLayer .fc-interface-film-tech-link:focus-visible {
  font-weight: 500 !important;
  opacity: 1 !important;
}

/* Smaller mini icons */
#fcInterfaceFilmCodeLayer .fc-interface-film-tech-link::before {
  width: 11px !important;
  height: 11px !important;
  border-radius: 3px !important;

  font-size: 5px !important;
  font-weight: 750 !important;

  box-shadow: 0 0 5px rgba(180, 184, 194, 0.1) !important;
}

#fcInterfaceFilmCodeLayer .fc-interface-film-tech-link:hover::before,
#fcInterfaceFilmCodeLayer .fc-interface-film-tech-link:focus-visible::before {
  box-shadow: 0 0 8px var(--tech-shadow) !important;
}

/* Slightly tighter spacing between PHP / CSS / JavaScript */
#fcInterfaceFilmCodeLayer .fc-interface-film-code-window,
.fc-interface-film-code-layer .fc-interface-film-code-window {
  gap: 22px !important;
}
/* ============================================================
   BODY 02 / Tech Tooltip Breathing Space
   Larger bubble shell, same subtle inner text.
   ============================================================ */

#fcInterfaceFilmCodeLayer .fc-interface-film-tech-bubble {
  width: 292px !important;
  min-height: 118px !important;

  padding: 18px 22px 20px !important;
  border-radius: 19px !important;

  bottom: calc(100% + 17px) !important;
}

/* More elegant spacing inside tooltip */
#fcInterfaceFilmCodeLayer .fc-interface-film-tech-bubble strong {
  margin-bottom: 10px !important;
}

#fcInterfaceFilmCodeLayer .fc-interface-film-tech-bubble em {
  max-width: 240px !important;
  line-height: 1.55 !important;
}
/* ============================================================
   BODY 02 / WooCommerce conditional tech link
   Appears only during TREMbrandT scene.
   ============================================================ */

/* WooCommerce brand variable */
#fcInterfaceFilmCodeLayer .fc-tech-woo {
  --tech-color: #96588a;
  --tech-shadow: rgba(150, 88, 138, 0.42);
}

/* WooCommerce mini icon */
#fcInterfaceFilmCodeLayer .fc-tech-woo::before {
  content: "W" !important;
  letter-spacing: -0.02em !important;
}

/* Hidden by default, but still part of the interface system */
#fcInterfaceFilmCodeLayer .fc-tech-woo {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-8px) translateY(0) !important;

  transition:
    opacity 0.75s ease,
    visibility 0.75s ease,
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.28s ease,
    text-shadow 0.28s ease !important;
}

/* When TREMbrandT scene is active */
#fcInterfaceFilmCodeLayer.is-woo-active .fc-tech-woo {
  opacity: 0.72 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(0) translateY(0) !important;
}

/* WooCommerce hover */
#fcInterfaceFilmCodeLayer.is-woo-active .fc-tech-woo:hover,
#fcInterfaceFilmCodeLayer.is-woo-active .fc-tech-woo:focus-visible {
  opacity: 1 !important;
  color: var(--tech-color) !important;
  text-shadow: 0 0 14px var(--tech-shadow) !important;
}

#fcInterfaceFilmCodeLayer.is-woo-active .fc-tech-woo:hover::before,
#fcInterfaceFilmCodeLayer.is-woo-active .fc-tech-woo:focus-visible::before {
  background: var(--tech-color) !important;
  box-shadow: 0 0 10px var(--tech-shadow) !important;
}

/* Keep WooCommerce tooltip aligned safely */
#fcInterfaceFilmCodeLayer .fc-tech-woo .fc-interface-film-tech-bubble {
  left: auto !important;
  right: 0 !important;
}
/* ============================================================
   BODY 02 / Scene Caption Cinematic Text Transition
   Scene title and meta text fade out/in with soft vertical motion.
   ============================================================ */

#fcInterfaceFilmLabel,
#fcInterfaceFilmMeta {
  transition:
    opacity 0.72s ease,
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.72s ease !important;
  will-change: opacity, transform, filter;
}

#fcInterfaceFilmLabel.is-interface-caption-swapping,
#fcInterfaceFilmMeta.is-interface-caption-swapping {
  opacity: 0 !important;
  transform: translateY(12px) !important;
  filter: blur(1.2px);
}
/* ============================================================
   BODY 02 / Scene Tech Tags Cinematic Transition
   PHP / CSS / JavaScript fade together with scene title and meta.
   ============================================================ */

#fcInterfaceFilmCodeLayer {
  transition:
    opacity 0.72s ease,
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.72s ease !important;

  will-change: opacity, transform, filter;
}

#fcInterfaceFilmCodeLayer.is-interface-caption-swapping {
  opacity: 0 !important;
  transform: translateY(12px) !important;
  filter: blur(1.2px);
  pointer-events: none !important;
}
/* ============================================================
   BODY 02 / Tech Caption Transition Fix
   Fade the inner tech window, not the parent WooCommerce controller.
   ============================================================ */

/* Disable previous parent fade conflict if it exists. */
#fcInterfaceFilmCodeLayer.is-interface-caption-swapping {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  pointer-events: auto !important;
}

/* Fade only the inner tech link row. */
#fcInterfaceFilmCodeLayer .fc-interface-film-code-window {
  transition:
    opacity 0.72s ease,
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.72s ease !important;

  will-change: opacity, transform, filter;
}

#fcInterfaceFilmCodeLayer
  .fc-interface-film-code-window.is-interface-tech-swapping {
  opacity: 0 !important;
  transform: translateY(12px) !important;
  filter: blur(1.2px);
  pointer-events: none !important;
}
/* ============================================================
   BODY 02 / WooCommerce Exit Blink Fix
   WooCommerce fades in on TREMbrandT, but hides instantly when leaving it.
   ============================================================ */

/* When WooCommerce is NOT active, hide it immediately.
   This prevents a short unwanted fade/blink when sequence loops back to TransGen. */
#fcInterfaceFilmCodeLayer:not(.is-woo-active) .fc-tech-woo {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-8px) translateY(0) !important;
  transition: none !important;
}

/* When WooCommerce becomes active on TREMbrandT, allow elegant fade-in. */
#fcInterfaceFilmCodeLayer.is-woo-active .fc-tech-woo {
  opacity: 0.72 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(0) translateY(0) !important;

  transition:
    opacity 0.75s ease,
    visibility 0.75s ease,
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.28s ease,
    text-shadow 0.28s ease !important;
}
/* ============================================================
   BODY 02 / Interface Scene Pause Cursor
   The cinematic PNG scene can be clicked to pause/resume.
   ============================================================ */

#fcInterfaceFilmSceneImage {
  cursor: pointer;
}

/* When paused, stop subtle breathing animation if image has one. */
#fcInterfaceFilmSystem.is-interface-film-paused #fcInterfaceFilmSceneImage {
  animation-play-state: paused !important;
}

/* ============================================================
   BODY 02 / TypeScript conditional tech link
   Appears only during TREMbrandT shop interface scene.
   ============================================================ */

/* TypeScript brand variable */
#fcInterfaceFilmCodeLayer .fc-tech-ts {
  --tech-color: #3178c6;
  --tech-shadow: rgba(49, 120, 198, 0.42);
}

/* TypeScript mini icon */
#fcInterfaceFilmCodeLayer .fc-tech-ts::before {
  content: "TS" !important;
  letter-spacing: -0.02em !important;
}

/* Hidden by default, active only on the TREMbrandT shop scene */
#fcInterfaceFilmCodeLayer .fc-tech-ts {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-8px) translateY(0) !important;

  transition:
    opacity 0.75s ease,
    visibility 0.75s ease,
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.28s ease,
    text-shadow 0.28s ease !important;
}

#fcInterfaceFilmCodeLayer.is-ts-active .fc-tech-ts {
  opacity: 0.72 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(0) translateY(0) !important;
}

/* TypeScript hover */
#fcInterfaceFilmCodeLayer.is-ts-active .fc-tech-ts:hover,
#fcInterfaceFilmCodeLayer.is-ts-active .fc-tech-ts:focus-visible {
  opacity: 1 !important;
  color: var(--tech-color) !important;
  text-shadow: 0 0 14px var(--tech-shadow) !important;
}

#fcInterfaceFilmCodeLayer.is-ts-active .fc-tech-ts:hover::before,
#fcInterfaceFilmCodeLayer.is-ts-active .fc-tech-ts:focus-visible::before {
  background: var(--tech-color) !important;
  box-shadow: 0 0 10px var(--tech-shadow) !important;
}

/* Keep TypeScript tooltip safely centered above the tag */
#fcInterfaceFilmCodeLayer .fc-tech-ts .fc-interface-film-tech-bubble {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(8px) !important;
}

#fcInterfaceFilmCodeLayer .fc-tech-ts:hover .fc-interface-film-tech-bubble,
#fcInterfaceFilmCodeLayer
  .fc-tech-ts:focus-visible
  .fc-interface-film-tech-bubble {
  transform: translateX(-50%) translateY(0) !important;
}

/* When TypeScript is NOT active, hide it immediately.
   This prevents a short unwanted fade/blink when the sequence loops back. */
#fcInterfaceFilmCodeLayer:not(.is-ts-active) .fc-tech-ts {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-8px) translateY(0) !important;
  transition: none !important;
}

/* TREMbrandT scene has five tech tags, so the row becomes slightly tighter. */
#fcInterfaceFilmCodeLayer.is-ts-active .fc-interface-film-code-window,
#fcInterfaceFilmCodeLayer.is-woo-active .fc-interface-film-code-window {
  gap: 18px !important;
}

/* ============================================================
   BODY 02 / Floating Web Panels — First Safe Step
   Hide code tech tags only in Floating Web Panels mode.
   ============================================================ */

#fcInterfaceFilmSystem[data-mode="web-panels"] #fcInterfaceFilmCodeLayer {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(10px) !important;
}

#fcInterfaceFilmSystem[data-mode="custom-code"] #fcInterfaceFilmCodeLayer {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}
/* ============================================================
   BODY 02 / Floating Web Panels — Force PNG scene visible
   Ensures panel PNG is visible instead of placeholder glass panel.
   ============================================================ */

#fcInterfaceFilmSystem[data-mode="web-panels"] #fcInterfaceFilmSceneImage {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  transform: none !important;
  filter: none !important;
}

/* Hide the old placeholder label inside the glass stage only in Floating Web Panels */
#fcInterfaceFilmSystem[data-mode="web-panels"] .fc-interface-film-panel-note {
  opacity: 0 !important;
  visibility: hidden !important;
}
/* ============================================================
   BODY 02 / Floating Web Panels Pause Cursor
   Indicates the scene can be paused/resumed by click.
   ============================================================ */

#fcInterfaceFilmSystem[data-mode="web-panels"] .fc-interface-film-stage,
#fcInterfaceFilmSystem[data-mode="web-panels"] #fcInterfaceFilmSceneImage {
  cursor: pointer;
}
/* ============================================================
   BODY 02 / Brand & Identity Motion — First Safe Step
   Hide code tech tags and force identity PNG visible.
   ============================================================ */

#fcInterfaceFilmSystem[data-mode="identity-motion"] #fcInterfaceFilmCodeLayer {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(10px) !important;
}

#fcInterfaceFilmSystem[data-mode="identity-motion"] #fcInterfaceFilmSceneImage {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  transform: none !important;
  filter: none !important;
}

/* Hide old placeholder note only in Brand & Identity Motion */
#fcInterfaceFilmSystem[data-mode="identity-motion"]
  .fc-interface-film-panel-note {
  opacity: 0 !important;
  visibility: hidden !important;
}
/* ============================================================
   BODY 02 / Brand Identity Pause Cursor
   Indicates Brand & Identity Motion scene can be paused/resumed.
   ============================================================ */

#fcInterfaceFilmSystem[data-mode="identity-motion"] .fc-interface-film-stage,
#fcInterfaceFilmSystem[data-mode="identity-motion"] #fcInterfaceFilmSceneImage {
  cursor: pointer;
}
/* ============================================================
   BODY 02 / Publication Systems — First Safe Step
   Hide code tech tags and force publication PNG visible.
   ============================================================ */

#fcInterfaceFilmSystem[data-mode="publication-systems"]
  #fcInterfaceFilmCodeLayer {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(10px) !important;
}

#fcInterfaceFilmSystem[data-mode="publication-systems"]
  #fcInterfaceFilmSceneImage {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  transform: none !important;
  filter: none !important;
}

/* Hide old placeholder note only in Publication Systems */
#fcInterfaceFilmSystem[data-mode="publication-systems"]
  .fc-interface-film-panel-note {
  opacity: 0 !important;
  visibility: hidden !important;
}
/* ============================================================
   BODY 02 / Publication Systems Pause Cursor
   Indicates Publication Systems scene can be paused/resumed.
   ============================================================ */

#fcInterfaceFilmSystem[data-mode="publication-systems"]
  .fc-interface-film-stage,
#fcInterfaceFilmSystem[data-mode="publication-systems"]
  #fcInterfaceFilmSceneImage {
  cursor: pointer;
}
/* ============================================================
   BODY 02 / Unified Non-Code Modes Visual Tuning
   Aligns Floating Web Panels, Brand Identity and Publication
   Systems with the Custom Code Interfaces visual rhythm.
   ============================================================ */

/* ------------------------------------------------------------
   1. Hide old glass placeholder/cloud behind PNG scenes
   in all non-code cinematic modes.
   ------------------------------------------------------------ */

#fcInterfaceFilmSystem[data-mode="web-panels"] .fc-interface-film-panel,
#fcInterfaceFilmSystem[data-mode="identity-motion"] .fc-interface-film-panel,
#fcInterfaceFilmSystem[data-mode="publication-systems"]
  .fc-interface-film-panel {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#fcInterfaceFilmSystem[data-mode="web-panels"] .fc-interface-film-panel-note,
#fcInterfaceFilmSystem[data-mode="identity-motion"]
  .fc-interface-film-panel-note,
#fcInterfaceFilmSystem[data-mode="publication-systems"]
  .fc-interface-film-panel-note {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ------------------------------------------------------------
   2. Force real PNG scenes to behave like cinematic images,
   not like placeholder panels.
   ------------------------------------------------------------ */

#fcInterfaceFilmSystem[data-mode="web-panels"] #fcInterfaceFilmSceneImage,
#fcInterfaceFilmSystem[data-mode="identity-motion"] #fcInterfaceFilmSceneImage,
#fcInterfaceFilmSystem[data-mode="publication-systems"]
  #fcInterfaceFilmSceneImage {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;

  transform: none !important;
  filter: none !important;

  transition:
    opacity 1.85s ease-in-out,
    filter 1.85s ease-in-out !important;
}

/* Same cinematic fade-out as Custom Code Interfaces */
#fcInterfaceFilmSystem[data-mode="web-panels"]
  #fcInterfaceFilmSceneImage.is-interface-scene-swapping,
#fcInterfaceFilmSystem[data-mode="identity-motion"]
  #fcInterfaceFilmSceneImage.is-interface-scene-swapping,
#fcInterfaceFilmSystem[data-mode="publication-systems"]
  #fcInterfaceFilmSceneImage.is-interface-scene-swapping {
  opacity: 0 !important;
  filter: blur(1.5px) !important;
}

/* ------------------------------------------------------------
   3. Move non-code scene titles down to the position where
   PHP / CSS / JavaScript tags sit in Custom Code mode.
   This closes the gap between title and description.
   ------------------------------------------------------------ */

#fcInterfaceFilmSystem[data-mode="web-panels"] #fcInterfaceFilmLabel,
#fcInterfaceFilmSystem[data-mode="identity-motion"] #fcInterfaceFilmLabel,
#fcInterfaceFilmSystem[data-mode="publication-systems"] #fcInterfaceFilmLabel {
  position: absolute !important;

  left: 8.2% !important;
  right: auto !important;
  bottom: 106px !important;

  width: 760px !important;
  max-width: 760px !important;

  text-align: left !important;
  white-space: nowrap !important;

  color: rgba(211, 162, 27, 0.96) !important;

  font-size: 12px !important;
  line-height: 1.25 !important;
  letter-spacing: 0.22em !important;
  font-weight: 900 !important;

  z-index: 9 !important;
  pointer-events: none !important;
}

/* ------------------------------------------------------------
   4. Match meta/description size and position with Custom Code.
   ------------------------------------------------------------ */

#fcInterfaceFilmSystem[data-mode="web-panels"] #fcInterfaceFilmMeta,
#fcInterfaceFilmSystem[data-mode="identity-motion"] #fcInterfaceFilmMeta,
#fcInterfaceFilmSystem[data-mode="publication-systems"] #fcInterfaceFilmMeta {
  position: absolute !important;

  left: 8.2% !important;
  right: auto !important;
  bottom: 42px !important;

  width: 760px !important;
  max-width: 760px !important;

  display: block !important;
  box-sizing: border-box !important;

  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;

  color: rgba(210, 216, 226, 0.56) !important;

  font-size: 12px !important;
  line-height: 1.45 !important;
  text-align: left !important;

  z-index: 7 !important;
  pointer-events: none !important;
}

/* ------------------------------------------------------------
   5. Caption fade-out / fade-in synchronized visually
   with Custom Code Interfaces.
   ------------------------------------------------------------ */

#fcInterfaceFilmSystem[data-mode="web-panels"] #fcInterfaceFilmLabel,
#fcInterfaceFilmSystem[data-mode="web-panels"] #fcInterfaceFilmMeta,
#fcInterfaceFilmSystem[data-mode="identity-motion"] #fcInterfaceFilmLabel,
#fcInterfaceFilmSystem[data-mode="identity-motion"] #fcInterfaceFilmMeta,
#fcInterfaceFilmSystem[data-mode="publication-systems"] #fcInterfaceFilmLabel,
#fcInterfaceFilmSystem[data-mode="publication-systems"] #fcInterfaceFilmMeta {
  transition:
    opacity 0.72s ease,
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.72s ease !important;

  will-change: opacity, transform, filter;
}

#fcInterfaceFilmSystem[data-mode="web-panels"]
  #fcInterfaceFilmLabel.is-interface-caption-swapping,
#fcInterfaceFilmSystem[data-mode="web-panels"]
  #fcInterfaceFilmMeta.is-interface-caption-swapping,
#fcInterfaceFilmSystem[data-mode="identity-motion"]
  #fcInterfaceFilmLabel.is-interface-caption-swapping,
#fcInterfaceFilmSystem[data-mode="identity-motion"]
  #fcInterfaceFilmMeta.is-interface-caption-swapping,
#fcInterfaceFilmSystem[data-mode="publication-systems"]
  #fcInterfaceFilmLabel.is-interface-caption-swapping,
#fcInterfaceFilmSystem[data-mode="publication-systems"]
  #fcInterfaceFilmMeta.is-interface-caption-swapping {
  opacity: 0 !important;
  transform: translateY(12px) !important;
  filter: blur(1.2px) !important;
}

/* ------------------------------------------------------------
   6. Keep code tech row hidden in non-code modes.
   ------------------------------------------------------------ */

#fcInterfaceFilmSystem[data-mode="web-panels"] #fcInterfaceFilmCodeLayer,
#fcInterfaceFilmSystem[data-mode="identity-motion"] #fcInterfaceFilmCodeLayer,
#fcInterfaceFilmSystem[data-mode="publication-systems"]
  #fcInterfaceFilmCodeLayer {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(10px) !important;
}

/* ============================================================
   BODY 02 / Mode Switch Cinematic Veil v8
   Soft feathered veil with slower PNG reveal timing.
   It keeps the v7 tech/caption sync and extends the first PNG
   mode-switch fade to match the internal scene transitions.
   ============================================================ */

#fcInterfaceFilmSystem .fc-interface-film-stage::after {
  content: "";
  position: absolute;
  top: -58px;
  right: -76px;
  bottom: -78px;
  left: -76px;
  z-index: 120;

  border-radius: 999px;

  background:
    radial-gradient(
      ellipse at 48% 42%,
      rgba(0, 0, 0, 0.82) 0%,
      rgba(0, 0, 0, 0.72) 34%,
      rgba(0, 0, 0, 0.42) 56%,
      rgba(0, 0, 0, 0.12) 72%,
      rgba(0, 0, 0, 0) 86%
    ),
    radial-gradient(
      ellipse at 50% 48%,
      rgba(18, 22, 30, 0.22),
      rgba(0, 0, 0, 0) 64%
    );

  filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.04);

  transition:
    opacity 1.85s ease-in-out,
    visibility 1.85s ease-in-out;
}

#fcInterfaceFilmSystem.is-interface-mode-mask .fc-interface-film-stage::after {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.06s ease-out,
    visibility 0.06s ease-out;
}

/* ============================================================
   BODY 02 / Mode Switch Caption Instant Hide v6
   Hide title/meta immediately on pointerdown. No fade-out here.
   When this class is removed, the existing caption transition
   creates the desired cinematic fade-in.
   ============================================================ */

#fcInterfaceFilmSystem.is-interface-mode-caption-hold #fcInterfaceFilmLabel,
#fcInterfaceFilmSystem.is-interface-mode-caption-hold #fcInterfaceFilmMeta {
  opacity: 0 !important;
  transform: translateY(12px) !important;
  filter: blur(1.2px) !important;
  transition: none !important;
}

/* ============================================================
   BODY 02 / Mode Switch Tech Sync v7
   PHP / CSS / JavaScript row follows the same instant-hide and
   cinematic fade-in rhythm as the scene title and meta text.
   ============================================================ */

#fcInterfaceFilmSystem.is-interface-mode-caption-hold
  #fcInterfaceFilmCodeLayer
  .fc-interface-film-code-window {
  opacity: 0 !important;
  transform: translateY(12px) !important;
  filter: blur(1.2px) !important;
  transition: none !important;
  pointer-events: none !important;
}

#fcInterfaceFilmSystem:not(.is-interface-mode-caption-hold)
  #fcInterfaceFilmCodeLayer
  .fc-interface-film-code-window {
  transition:
    opacity 0.72s ease,
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.72s ease !important;
}

/* ============================================================
   BODY 02 / Mode Switch PNG Exit Hold v9
   Clears the currently active PNG immediately when another mode
   is pressed, then releases it after the new first scene is ready.
   This removes the small "old PNG still thinking" moment while
   preserving the v8 long cinematic PNG reveal.
   ============================================================ */

#fcInterfaceFilmSystem.is-interface-mode-image-hold #fcInterfaceFilmSceneImage {
  opacity: 0 !important;
  visibility: visible !important;
  filter: blur(1.5px) !important;
  transition: none !important;
}

#fcInterfaceFilmSystem:not(.is-interface-mode-image-hold)
  #fcInterfaceFilmSceneImage {
  transition:
    opacity 1.85s ease-in-out,
    filter 1.85s ease-in-out !important;
}
/* ============================================================
   BODY 02 / Interface Film Right Typography Refinement
   Matches BODY 01 / Client Trust typographic scale.
   CSS-only. Does not touch animation logic.
   ============================================================ */

#fcInterfaceFilmSystem .fc-interface-film-right {
  max-width: 540px !important;
}

/* 02 / INTERFACE FILM */
#fcInterfaceFilmSystem .fc-interface-film-kicker {
  font-size: 12px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.24em !important;
  font-weight: 800 !important;
  margin-bottom: 20px !important;
}

/* INTERFACE FILM SYSTEM */
#fcInterfaceFilmSystem .fc-interface-film-right h2 {
  font-size: clamp(42px, 3.45vw, 60px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.055em !important;
  font-weight: 850 !important;
  margin-bottom: 28px !important;
}

/* Designed from vision... */
#fcInterfaceFilmSystem .fc-interface-film-lead {
  max-width: 500px !important;
  font-size: 18px !important;
  line-height: 1.42 !important;
  font-weight: 650 !important;
  margin-bottom: 40px !important;
}

/* FifoConsult designs and builds... */
#fcInterfaceFilmSystem .fc-interface-film-copy {
  max-width: 500px !important;
  margin-bottom: 42px !important;
}

#fcInterfaceFilmSystem .fc-interface-film-copy p {
  font-size: 14px !important;
  line-height: 1.68 !important;
  font-weight: 450 !important;
}

/* Keep yellow highlighted first phrase clean */
#fcInterfaceFilmSystem .fc-interface-film-copy .fc-interface-film-highlight {
  font-weight: 800 !important;
}
/* ============================================================
   BODY 02 / Interface Film Right Typography Refinement v2
   Slightly smaller scale after visual test.
   CSS-only.
   ============================================================ */

/* 02 / INTERFACE FILM */
#fcInterfaceFilmSystem .fc-interface-film-kicker {
  font-size: 11px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.24em !important;
  margin-bottom: 18px !important;
}

/* INTERFACE FILM SYSTEM */
#fcInterfaceFilmSystem .fc-interface-film-right h2 {
  font-size: clamp(38px, 3.25vw, 56px) !important;
  line-height: 0.97 !important;
  letter-spacing: -0.052em !important;
  margin-bottom: 26px !important;
}

/* Designed from vision... */
#fcInterfaceFilmSystem .fc-interface-film-lead {
  max-width: 470px !important;
  font-size: 16px !important;
  line-height: 1.44 !important;
  font-weight: 650 !important;
  margin-bottom: 38px !important;
}

/* FifoConsult designs and builds... */
#fcInterfaceFilmSystem .fc-interface-film-copy {
  max-width: 480px !important;
  margin-bottom: 40px !important;
}

#fcInterfaceFilmSystem .fc-interface-film-copy p {
  font-size: 13px !important;
  line-height: 1.68 !important;
  font-weight: 450 !important;
}
/* ============================================================
   BODY 02 / Interface Film Right Nav Spacing
   Gives the paragraph more breathing space and lowers the
   4 mode links to align better with the left caption zone.
   CSS-only.
   ============================================================ */

#fcInterfaceFilmSystem .fc-interface-film-copy {
  margin-bottom: 95px !important;
}

/* Four mode links */
#fcInterfaceFilmSystem .fc-interface-film-nav {
  gap: 15px !important;
}

/* Slightly calmer mode link typography after lowering */
#fcInterfaceFilmSystem .fc-interface-film-nav button {
  font-size: 14px !important;
  line-height: 1.25 !important;
}
/* ============================================================
   BODY 02 / Lead to Copy Breathing Space
   Separates "Designed from vision..." from the FifoConsult
   descriptive paragraph.
   CSS-only.
   ============================================================ */

#fcInterfaceFilmSystem .fc-interface-film-lead {
  margin-bottom: 58px !important;
}
/* ============================================================
   BODY 02 / Unified Cinematic PNG Motion
   Removes one-off light sweep and gives all 4 Interface Film
   modes the same subtle breathing motion.
   CSS-only. Does not touch JS sequences.
   ============================================================ */

/* 1. Remove the old one-time light sweep from Custom Code Interfaces */
#fcInterfaceFilmSystem .fc-interface-film-media-layer::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}

/* 2. One shared breathing animation for all PNG scenes */
#fcInterfaceFilmSystem.is-interface-film-visible #fcInterfaceFilmSceneImage {
  animation: fcInterfaceFilmUnifiedBreath 11.5s ease-in-out infinite alternate !important;
  transform-origin: center center !important;
  will-change: opacity, filter, translate, scale;
}

/* Uses individual transform properties so it does not fight older transform rules */
@keyframes fcInterfaceFilmUnifiedBreath {
  0% {
    translate: -3px 0;
    scale: 1;
  }

  48% {
    translate: 4px -4px;
    scale: 1.012;
  }

  100% {
    translate: 0 -7px;
    scale: 1.022;
  }
}

/* Keep pause/resume logic consistent */
#fcInterfaceFilmSystem.is-interface-film-paused #fcInterfaceFilmSceneImage {
  animation-play-state: paused !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #fcInterfaceFilmSystem.is-interface-film-visible #fcInterfaceFilmSceneImage {
    animation: none !important;
    translate: 0 0 !important;
    scale: 1 !important;
  }
}
/* ============================================================
   BODY 02 / Right Copy External Project Links
   Links are only in the right text area, not in the left video
   caption zone, so pause/resume remains clean.
   ============================================================ */

#fcInterfaceFilmSystem .fc-interface-film-copy a.fc-interface-film-copy-link {
  color: rgba(211, 162, 27, 0.96) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(211, 162, 27, 0.28);
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    text-shadow 0.25s ease;
}

#fcInterfaceFilmSystem
  .fc-interface-film-copy
  a.fc-interface-film-copy-link:hover,
#fcInterfaceFilmSystem
  .fc-interface-film-copy
  a.fc-interface-film-copy-link:focus-visible {
  color: rgba(244, 210, 96, 1) !important;
  border-color: rgba(244, 210, 96, 0.72);
  text-shadow: 0 0 14px rgba(211, 162, 27, 0.24);
  outline: none;
}
/* ============================================================
   BODY 02 / Interface Film Background Master
   Uses existing /background/ folder.
   CSS-only. Does not touch PNG scenes or JS sequences.
   ============================================================ */

#fcInterfaceFilmSystem {
  background: url("../img/body/interface-film/background/interface-film-background-master.png")
    center center / cover no-repeat !important;
}

/* Dark cinematic overlay for readability and integration */
#fcInterfaceFilmSystem::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.36) 28%,
      rgba(0, 0, 0, 0.24) 52%,
      rgba(0, 0, 0, 0.76) 100%
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.12) 0%,
      rgba(0, 0, 0, 0.08) 36%,
      rgba(0, 0, 0, 0.54) 68%,
      rgba(0, 0, 0, 0.82) 100%
    ),
    radial-gradient(
      circle at 28% 48%,
      rgba(35, 78, 104, 0.15),
      transparent 42%
    ),
    radial-gradient(circle at 66% 52%, rgba(211, 162, 27, 0.1), transparent 38%);
}

/* Keep BODY 02 content above the background overlay */
#fcInterfaceFilmSystem .fc-interface-film-left,
#fcInterfaceFilmSystem .fc-interface-film-right {
  position: relative;
  z-index: 2;
}

/* ============================================================
   BODY 02 / INTERFACE FILM — TYPOGRAPHY COLOR HARMONIZATION
   Uses the approved Mega Menu / TEXT reader palette.
   Typography colors only — no layout, animation, timing or logic changes.
   ============================================================ */

/* Right narrator */

#fcInterfaceFilmSystem .fc-interface-film-kicker {
  color: #9a7d3f !important;
}

#fcInterfaceFilmSystem .fc-interface-film-right h2,
#fcInterfaceFilmSystem .fc-section-title {
  color: #887b60 !important;
}

#fcInterfaceFilmSystem .fc-interface-film-lead {
  color: #958b73 !important;
}

#fcInterfaceFilmSystem .fc-interface-film-copy p {
  color: #635d4f !important;
}

#fcInterfaceFilmSystem .fc-interface-film-highlight {
  color: #9a7d3f !important;
}

#fcInterfaceFilmSystem .fc-interface-film-copy a.fc-interface-film-copy-link {
  color: #9a7d3f !important;
  border-bottom-color: rgba(154, 125, 63, 0.28) !important;
}

#fcInterfaceFilmSystem
  .fc-interface-film-copy
  a.fc-interface-film-copy-link:hover,
#fcInterfaceFilmSystem
  .fc-interface-film-copy
  a.fc-interface-film-copy-link:focus-visible {
  color: #b2924d !important;
  border-bottom-color: rgba(178, 146, 77, 0.72) !important;
  text-shadow: 0 0 14px rgba(154, 125, 63, 0.24) !important;
}

/* Right mode navigation */

#fcInterfaceFilmSystem .fc-interface-film-nav button {
  color: #706957 !important;
  text-shadow: none !important;
}

#fcInterfaceFilmSystem .fc-interface-film-nav button:hover,
#fcInterfaceFilmSystem .fc-interface-film-nav button:focus-visible {
  color: #958b73 !important;
  text-shadow: 0 0 12px rgba(149, 139, 115, 0.22) !important;
}

#fcInterfaceFilmSystem .fc-interface-film-nav button.is-active {
  color: #9a7d3f !important;
  text-shadow:
    0 0 12px rgba(154, 125, 63, 0.22),
    0 0 24px rgba(154, 125, 63, 0.12) !important;
}

/* Left cinematic caption */

#fcInterfaceFilmLabel,
#fcInterfaceFilmSystem .fc-interface-film-label {
  color: #9a7d3f !important;
}

#fcInterfaceFilmMeta,
#fcInterfaceFilmSystem .fc-interface-film-meta {
  color: #635d4f !important;
}

#fcInterfaceFilmSystem .fc-interface-film-panel-note {
  color: #958b73 !important;
}

/* Technology labels remain brand-colored on hover,
   but use the approved calm idle tone. */

#fcInterfaceFilmCodeLayer .fc-interface-film-tech-link,
#fcInterfaceFilmSystem .fc-interface-film-tech-link {
  color: #706957 !important;
}

#fcInterfaceFilmCodeLayer .fc-interface-film-tech-bubble em,
#fcInterfaceFilmSystem .fc-interface-film-tech-bubble em {
  color: #635d4f !important;
}