/* Qcentic Film Zone: ported from src/styles/components.css. */
  #qf-preloader {
    position: fixed; inset: 0; z-index: 9998;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2.5rem; background: #0a0a0a; touch-action: none; overscroll-behavior: contain;
    opacity: 1; visibility: visible;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0s;
  }
  #qf-preloader.is-done {
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.6s;
  }
  #qf-preloader .qf-pre-mark { width: clamp(96px, 18vw, 160px); height: auto; display: block; }
  #qf-preloader .qf-pre-track { position: relative; width: clamp(140px, 26vw, 240px); height: 2px; background: #2a2a2a; overflow: hidden; }
  #qf-preloader .qf-pre-bar { position: absolute; inset: 0 auto 0 0; width: 0; background: #fff; transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
  @media (orientation: portrait) {
    #qf-preloader .qf-pre-mark { width: clamp(96px, 34vw, 160px); }
    #qf-preloader .qf-pre-track { width: min(60vw, 240px); }
  }

  #qf-zone, #qf-zone * { box-sizing: border-box; margin: 0; padding: 0; }
  #qf-zone {
    position: relative; height: 100vh; height: 100svh; width: 100%;
    overflow: hidden; background: #0a0a0a; color: #f5f5f5;
    font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  #qf-zone .qf-pin { position: absolute; inset: 0; }
  #qf-zone video {
    position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
    object-fit: cover; display: block; opacity: 0; will-change: opacity;
  }
  #qf-zone video.is-active { opacity: 1; }
  #qf-zone .qf-scrim {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.28) 100%);
  }
  #qf-zone .qf-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    justify-content: center; align-items: flex-start; padding: 0 4rem;
    opacity: 0; will-change: opacity, transform;
  }
  #qf-zone .qf-overlay--hero {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 42%, transparent 68%);
  }
  #qf-zone .qf-overlay--tarpit, #qf-zone .qf-overlay--sprint {
    align-items: flex-end; text-align: right;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.45) 42%, rgba(0, 0, 0, 0.35) 100%);
  }
  #qf-zone .qf-label {
    font-family: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: clamp(1.1rem, 1.04rem + 0.3vw, 1.3rem); font-weight: 600; line-height: 1.5;
    letter-spacing: 0.14em; text-transform: uppercase; color: #f5f5f5;
  }
  #qf-zone .qf-headline {
    font-family: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: clamp(2.3rem, 1.85rem + 2.2vw, 3.75rem); font-weight: 700; line-height: 1.08;
    letter-spacing: -0.02em; max-width: 16ch; color: #f5f5f5;
    text-shadow: 0 2px 28px rgba(0, 0, 0, 0.45);
  }
  #qf-zone .qf-body {
    font-size: clamp(1.1rem, 1.04rem + 0.3vw, 1.3rem); line-height: 1.5; max-width: 38ch;
    margin-top: 1.5rem; color: #f5f5f5; text-shadow: 0 1px 18px rgba(0, 0, 0, 0.5);
  }
  #qf-zone .qf-cue {
    position: absolute; left: 50%; bottom: 4rem; width: 4em; height: 4em;
    transform: translateX(-50%); opacity: 0; color: #fff; pointer-events: none;
    will-change: opacity, transform; animation: qf-cue-bounce 2s ease-in-out infinite;
  }
  #qf-zone .qf-cue svg { display: block; width: 100%; height: 100%; }
  @keyframes qf-cue-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
  }

  @media (orientation: portrait) {
    #qf-zone .qf-cue { bottom: calc(env(safe-area-inset-bottom, 0px) + 0.5rem); }
    #qf-zone .qf-overlay {
      justify-content: flex-end;
      padding: 0 1.5rem max(5vh, calc(env(safe-area-inset-bottom, 0px) + 4.5rem));
    }
    #qf-zone .qf-headline { font-size: clamp(1.7rem, 1.5rem + 0.9vw, 2.3rem); }
    #qf-zone .qf-overlay--hero .qf-body { margin-top: 1rem; }
    #qf-zone .qf-overlay--hero, #qf-zone .qf-overlay--tarpit, #qf-zone .qf-overlay--sprint {
      align-items: flex-start; text-align: left;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.35) 28%, transparent 55%);
    }
  }

  .qf-cursor, .qf-cursor-dot {
    position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
    border-radius: 50%; transform: translate(-50%, -50%); mix-blend-mode: difference;
  }
  .qf-cursor {
    width: 32px; height: 32px; border: 1px solid #fff;
    transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1), height 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .qf-cursor-dot { width: 4px; height: 4px; background: #fff; }
  .qf-cursor.is-active { width: 56px; height: 56px; }
  body.qf-has-cursor, body.qf-has-cursor a, body.qf-has-cursor button { cursor: none; }
  @media (hover: none) { .qf-cursor, .qf-cursor-dot { display: none; } }

  html.lenis, html.lenis body { height: auto; }
  .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
  .lenis.lenis-smooth iframe { pointer-events: none; }

/* Editor placeholder: the film only runs on the front end. */
.q-film-slot { min-height: 100vh; background: #0a0a0a; padding: 0 !important; }
body.elementor-editor-active .q-film-slot { display: flex; align-items: center; justify-content: center; }
body.elementor-editor-active .q-film-slot::before {
  content: "Qcentic Film Zone (plays on the live page)";
  color: #8a8a8a; font: 500 14px/1.5 "Inter", sans-serif; letter-spacing: 0.06em;
}

/* Enterprise logos marquee (src/styles/components.css .logos__track): the
   track holds the logo set twice, so -50% lands exactly on the seam. */
.q-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.q-marquee-track { width: max-content !important; animation: q-marquee 50s linear infinite; will-change: transform; }
.q-marquee:hover .q-marquee-track { animation-play-state: paused; }
@keyframes q-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .q-marquee-track { animation: none; } }
