/* ==========================================================================
   FKC cinematic layer — palette + motion.
   --------------------------------------------------------------------------
   Loaded after fkc-overrides.css, so these token values win on source order.

   PALETTE (sampled from the client's reference, 23 Sep 2026)
     white page #FFFFFF · sage band #E7EDE7 · leaf green #5A9C48 (decorative)
     action green #4A8239 (buttons/links: 4.6:1 with white text, AA)
     deep green band #18360F · charcoal #1E1E1E
   Leaf green on white is only 3.3:1, so it is never used for text or for
   text-bearing buttons.

   MOTION
     Every motion rule is scoped to html.cine, which fkc-cinematic.js adds
     only when it runs AND the visitor has not asked for reduced motion.
     If the script fails or is blocked, the page renders exactly as the
     palette section below describes, with nothing hidden.
   ========================================================================== */

/* fkc-overrides.css sets its tokens on :root:root; one more :root wins
   without !important. */
:root:root:root {
  --fkc-white: #FFFFFF;
  --fkc-paper: #FFFFFF;
  --fkc-tint: #E7EDE7;
  --fkc-line: #D5DDD4;
  /* --fkc-green is the overrides' accent on DARK surfaces (footer headings,
     eyebrows, focus rings) and a decorative accent on light ones, so it is a
     lighter leaf that reads at 5:1+ on the deep green and charcoal bands.
     Text-bearing buttons use --fkc-action below instead. */
  --fkc-green: #7DB86A;
  --fkc-green-hover: #93C982;
  --fkc-action: #4A8239;
  --fkc-action-hover: #3C6C2E;
  --fkc-forest: #18360F;
  --fkc-ink: #1E1E1E;
  --fkc-muted: #555B52;
  --fkc-link: #3F7A31;
  --fkc-silver: #C9D3C6;
  --fkc-dark-line: #3B5634;
  --rgb-surface: 255, 255, 255;
  --rgb-accent-glow: 90, 156, 72;
  --rgb-shadow: 30, 30, 30;
  --rgb-scrim: 24, 54, 15;
  --cine-ease: cubic-bezier(.22, .8, .2, 1);
}

/* Bands: white and sage alternate, as in the reference. */
html body,
html .client-page { background: var(--fkc-paper); }
html .section--band,
html .client-page .section--band,
html .client-page .bedroom { background: var(--fkc-tint); }
html .client-page .workshop-story,
html .section.is-dark:not(.closing),
html .pagehero.is-dark { background: var(--fkc-forest); }
html .footer.is-dark { background: var(--fkc-ink); }

/* Buttons: squared, action green, white text. These are every rule in
   fkc-overrides.css that painted --fkc-green behind dark text (18 of them,
   listed 23 Sep 2026), each prefixed with html to win on specificity. */
html .btn,
html .showroom-opening__primary,
html .showroom-opening__primary .elementor-button,
html .frm_forms .frm_submit button,
html .client-page .unit__add,
html .lightbox__enquiry,
html .explorer__consult { border-radius: 2px; }

html .btn--accent,
html .totop,
html .header__actions .btn,
html .showroom-opening__actions .showroom-opening__primary,
html .showroom-opening__actions .showroom-opening__primary .elementor-button,
html .pagehero.pagehero .client-hero-actions .btn,
html .client-page .unit__add,
html .lightbox__enquiry,
html .frm_forms .frm_submit button,
html .closing--refined .closing__contact > .btn,
html .explorer__consult {
  background: var(--fkc-action);
  border-color: var(--fkc-action);
  color: #FFFFFF;
}
html .btn--accent:hover,
html .totop:hover,
html .header__actions .btn:hover,
html .showroom-opening__actions .showroom-opening__primary:hover,
html .showroom-opening__actions .showroom-opening__primary .elementor-button:hover,
html .pagehero.pagehero .client-hero-actions .btn:hover,
html .client-page .unit__add:hover,
html .lightbox__enquiry:hover,
html .frm_forms .frm_submit button:hover,
html .closing--refined .closing__contact > .btn:hover,
html .explorer__consult:hover {
  background: var(--fkc-action-hover);
  border-color: var(--fkc-action-hover);
  color: #FFFFFF;
}

/* Section headings: Fraunces, as the reference's serif display type. */
html .section h2,
html .client-page .section h2 { font-family: Fraunces, "Iowan Old Style", Georgia, serif; }

/* ==========================================================================
   Motion (html.cine only)
   ========================================================================== */

/* Scroll progress hairline under the header. */
.cine-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 9999;
  background: var(--fkc-green); transform-origin: 0 50%;
  transform: scaleX(var(--cine-progress, 0)); pointer-events: none;
}

/* Page arrival and departure: a short fade, never longer than 300 ms. */
html.cine body { animation: cine-arrive .45s var(--cine-ease) both; }
html.cine.cine-leaving body { opacity: 0; transition: opacity .22s ease; }
@keyframes cine-arrive { from { opacity: 0; } to { opacity: 1; } }

/* Curtain: the home opening holds still while the next section slides over it. */
html.cine .cine-curtain {
  position: sticky; top: var(--cine-curtain-top, 0px); z-index: 0;
  transform-origin: 50% 0;
  transform: scale(calc(1 - var(--cine-cover, 0) * .06));
  filter: brightness(calc(1 - var(--cine-cover, 0) * .45));
  will-change: transform, filter;
}
html.cine .cine-curtain ~ * { position: relative; z-index: 1; }
html.cine .cine-curtain + * { box-shadow: 0 -24px 48px rgba(var(--rgb-shadow), .18); }

/* Opening photo: slow Ken Burns push-in on arrival. */
html.cine .cine-curtain img { animation: cine-kenburns 14s var(--cine-ease) both; }
@keyframes cine-kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }

/* Reveal: headings rise, media unmasks upward. Hidden only until in view. */
html.cine [data-cine="rise"] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .9s var(--cine-ease), transform .9s var(--cine-ease);
}
html.cine [data-cine="mask"] {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s var(--cine-ease);
}
html.cine [data-cine="mask"] img { transform: scale(1.14); transition: transform 1.6s var(--cine-ease); }
html.cine [data-cine].is-shown { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
html.cine [data-cine="mask"].is-shown img { transform: scale(1); }

/* Parallax: image drifts inside its cropped frame (driven by --cine-shift). */
html.cine [data-cine-parallax] img {
  transform: translateY(var(--cine-shift, 0px)) scale(1.12);
  transition: none;
}

/* Hover: slow zoom on cards, as in the reel's gallery. */
html.cine .projcard__media img,
html.cine .pathcard__media img,
html.cine .gcard img,
html.cine .hubcard__media img { transition: transform 1.1s var(--cine-ease); }
html.cine .projcard:hover .projcard__media img,
html.cine .pathcard:hover .pathcard__media img,
html.cine .gcard:hover img,
html.cine .hubcard:hover .hubcard__media img { transform: scale(1.06); }

/* Count-up figures keep their width while they count. */
html.cine .cine-count { font-variant-numeric: tabular-nums; }

@media (max-width: 899px) {
  html.cine .cine-curtain { position: relative; top: auto; transform: none; filter: none; }
  html.cine .cine-curtain + * { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cine-progress { display: none; }
}