/* ==========================================================================
   FKC overrides for the inoterior theme.

   The live site runs inoterior + inoterior-child (ThemeTechMount), not Hello
   Elementor. The Elementor page content is correct and untouched — what needs
   correcting is the chrome the theme wraps around it, and the hero's failure
   mode. Everything here is scoped to inoterior's own selectors so it can be
   removed in one file if the theme is ever swapped.
   ========================================================================== */

/* ---- 1. The duplicate page title ----------------------------------------
   inoterior prints its own title bar above the content: an h1.entry-title in
   a 1200px .container inside a 1425px bar. That is both the second "About Us"
   and the boxed band with the page background showing either side. Every FKC
   page already carries its own heading inside the Elementor page-hero, so the
   theme's bar is pure duplication. */
.tm-titlebar-wrapper,
.tm-titlebar.entry-header { display: none !important; }

/* ---- 2. Full-bleed chrome -----------------------------------------------
   inoterior constrains its header and footer rows to .container. The FKC
   design runs edge to edge with the readable content centred inside. */
.tm-header-block > .container,
.site-header .container,
.site-footer .container { max-width: none !important; width: 100% !important; }
.tm-header-block .tm-stickytopbar-wrapper > .container,
.tm-header-block .tm-header-main > .container {
  max-width: var(--fkc-container, 1400px) !important;
  margin-inline: auto !important;
}

/* Elementor sections must never inherit a theme container width. */
.site-content-inner > .elementor,
.site-content-inner > .elementor > .e-con { width: 100%; max-width: none; }

/* ---- 3. Hero fallback: VISIBLE BY DEFAULT -------------------------------
   It shipped at opacity 0, revealed only by scene.js setting data-webgl="off".
   Any path that does not reach that line — the bridge not running, a module
   error, a CDN stall — left the hero as an empty 900px box, which is exactly
   what the live site was showing. The photograph is the baseline now and WebGL
   hides it only once it is genuinely running. Same rule as [data-reveal]:
   content is never hidden waiting on a script. */
.fkc-hero__fallback { opacity: 1 !important; transition: opacity .6s ease; }
[data-hero][data-webgl="on"] .fkc-hero__fallback { opacity: 0 !important; }
.fkc-hero__fallback img { width: 100%; height: 100%; object-fit: cover; }

/* ---- 4. Hero layering ---------------------------------------------------
   Photograph behind, canvas over it, all readable DOM above both. */
.fkc-hero { position: relative; overflow: hidden; min-height: 100vh; }
.fkc-hero__fallback { position: absolute; inset: 0; z-index: 0; }
.fkc-hero-canvas-layer,
.fkc-hero-canvas-mount {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; transform: none; z-index: 1; pointer-events: none;
}
.fkc-hero-canvas-mount canvas { width: 100%; height: 100%; display: block; }
.fkc-hero > .e-con-inner,
.fkc-hero__copy { position: relative; z-index: 2; }

/* ---- 5. Scroll ----------------------------------------------------------
   Nothing may trap the page scroll. ScrollSmoother is not loaded on this
   build; if the theme or a plugin reintroduces its wrapper, neutralise it. */
html { overflow-y: auto !important; height: auto !important; }
body { overflow-x: hidden; overflow-y: visible !important; height: auto !important; }
#smooth-wrapper, #smooth-content {
  position: static !important; transform: none !important; height: auto !important;
}

/* ---- 6. Motion ----------------------------------------------------------
   Reveals animate transform only. Opacity stays at 1 so a script that never
   runs cannot blank the page. */
[data-reveal] {
  opacity: 1 !important;
  transform: translateY(14px);
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in, .reveal-all [data-reveal] { transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transform: none; transition: none; }
}