/* =====================================================================
   v1.217 — Cinematic layer for the homepage.
   One continuous reel instead of a stack of blocks:
     1. one dark grade   — every dark chapter is the logo teal (#003841)
                           with the same soft key light + dot grid the new
                           sections use; the footer keeps teal-deep as the
                           "end credits".
     2. graded lights    — long runs of white alternate white / paper so the
                           eye still feels a cut.
     3. (retired)        — chapter title cards now separate the acts;
                           see homepage-flow.css.
     4. floor seams      — each numbered floor draws a thin orange line
                           across its top edge when the lift "arrives".
     5. one rhythm       — the same section padding, heading scale and
                           text edge for old and new sections.
     6. depth on scroll  — chapter content rises in once as it enters and
                           then stays put (skipped for reduced motion).
   Loaded only by index.php via $pageStyles. Brand tokens from style.css.
   ===================================================================== */

/* ---------- 1. one dark grade ---------- */
.section.section--dark,
#about-us{
  background-color:var(--teal);
  background-image:
    radial-gradient(1100px 520px at 88% -8%, rgba(246,152,16,.08), transparent 62%),
    radial-gradient(900px 480px at -6% 108%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:auto, auto, 22px 22px;
}
.pf{
  background-image:
    radial-gradient(1100px 520px at 50% -10%, rgba(246,152,16,.07), transparent 62%),
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:auto, 22px 22px;
}

/* ---------- 2. graded lights ---------- */
#hero{
  background:
    radial-gradient(900px 520px at 92% 18%, rgba(246,152,16,.10), transparent 60%),
    radial-gradient(700px 420px at 8% 0%, rgba(0,56,65,.06), transparent 60%),
    var(--paper);
}
#what-we-do, #residential, #iot-gateway, #water-management, #highlight-security-ads, #specialty{ background:#fff !important; }
#one-app-demo, .trust{ background:var(--paper) !important; }

/* ---------- 3. (soft cuts retired in the v1.217 restructure — the ↓ connectors were removed;
   chapters are now separated by title cards and floor seams) ---------- */

/* ---------- 4. floor seams ---------- */
.section[data-floor]{ position:relative; }
.section[data-floor]:not(#hero)::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--orange) 18%, var(--orange) 82%, transparent);
  transform:scaleX(0); transform-origin:left center; opacity:.9;
  transition:transform 1.1s var(--ease-cinematic);
}
.section[data-floor].cn-arrived::before{ transform:scaleX(1); }
.section--orange[data-floor]::before{ background:linear-gradient(90deg, transparent, var(--teal) 18%, var(--teal) 82%, transparent); }

/* ---------- 5. one rhythm ---------- */
.section{ padding:clamp(84px, 8.5vw, 120px) 0; }
.pf, .lx{ padding-top:clamp(84px, 8.5vw, 120px) !important; padding-bottom:clamp(84px, 8.5vw, 120px) !important; }
#hero{ padding-top:clamp(120px, 11vw, 160px); }
/* the same chapter heading scale everywhere (hero H1 keeps its own) */
.section h2, .pf .pf-title, .lx .lx-title{
  font-size:clamp(30px, 1.2rem + 1.9vw, 46px) !important;
  line-height:1.08 !important; letter-spacing:-.02em;
}
/* the same text edge: the lift panels used a 1200px frame, the site 1116px */
.lx-inner{ max-width:1116px !important; }
.pf-stage{ max-width:1180px; }
@media (max-width:760px){
  .section{ padding:64px 0; }
  .pf, .lx{ padding-top:64px !important; padding-bottom:64px !important; }
  #hero{ padding-top:104px; }
}

/* ---------- 6. depth on scroll ----------
   Each chapter's content rises in ONCE as it enters (class set by
   cinematic.js), then stays fully visible — no scroll-linked state that can
   leave text half-faded. Blocks that already use the site's .reveal system
   are left to it. Reduced-motion visitors never get the hidden start state. */
.cn-rise{ opacity:0; transform:translateY(44px) scale(.985);
  transition:opacity .9s var(--ease-cinematic), transform 1.1s var(--ease-cinematic); }
.cn-rise.cn-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .section[data-floor]::before{ transition:none; transform:scaleX(1); }
}