/* ============================================================
home-cinematic.css — premium enhancements for the homepage.
Scoped to body.p-home so it NEVER leaks to other pages.
Progressive enhancement only: base layout/SEO unaffected.
Reference pattern: monitoring-ai-acusense (p-aidemo).
============================================================ */
/* ---- Skip link (WCAG 2.4.1 bypass blocks) — hidden until focused -- */
.p-home .skip-link {
position: absolute;
left: 12px;
top: -60px;
z-index: 999;
padding: 10px 18px;
border-radius: 8px;
background: var(--accent);
color: #06080F;
font-family: var(--font-heading);
font-weight: 600;
letter-spacing: .5px;
text-decoration: none;
transition: top var(--dur-base, .2s) var(--ease-out, ease);
}
.p-home .skip-link:focus { top: 12px; }
/* ---- SECTION 1: HERO ------------------------------------- */
/* Full-bleed ![]()
background (replaces the heavy CSS PNG on style.css).
Fixes LCP (serves responsive webp, matches the preload) and
lets us parallax it on the compositor. The .hero::before gradient
(z-index:1) sits above the image; .hero-content (z-index:2) on top. */
/* animations.css forces a fixed 1200w webp bg with !important; override
it so ONLY the responsive ![]()
loads (down to 480w on mobile). */
.p-home .hero { background-image: none !important; min-height: 72vh; }
/* ONE shared zoom layer for the photo + every content-locked overlay
(cinemagraph patches, AI frame, beacon). The Ken Burns push-in lives
HERE, so base photo and overlays can never desync (the double-frame
bug when only .hero__bg was scaled). */
.p-home .hero-stage {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
transform: scale(1.06);
}
.p-home .hero__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* bias the crop rightward so the ACTION (intruder + cruiser) stays in
frame at narrow windows; the left side sits behind the text scrim
anyway. MUST match POSX in home-hero-live.js. */
object-position: 62% center;
z-index: 0;
filter: brightness(.62) contrast(1.04) saturate(1.04);
/* transform lives on .hero-stage; a static filtered image rasterises
once and costs nothing on scroll. */
}
/* NOTE: the big H1 keeps its existing staggered `ss-up` entrance
(injected by assets/js/animations.js) + brand orange glow — a
perpetual shimmer on a headline that large reads as promo/cheap
and fights the entrance, so we deliberately do NOT add one here.
The reference-grade hero upgrade (bespoke canvas AI-detection
overlay, as on monitoring-ai-acusense) is a separate opt-in step. */
/* Animated "scroll" cue anchored to the bottom of the hero. */
.p-home .hero-cue {
position: absolute;
left: 50%;
bottom: 26px;
transform: translateX(-50%);
z-index: 3;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-decoration: none;
color: var(--text-muted);
font-family: var(--font-heading);
font-size: .62rem;
letter-spacing: 2.6px;
text-transform: uppercase;
transition: color var(--dur-base, .3s) var(--ease-out, ease);
}
.p-home .hero-cue:hover { color: var(--text-primary); }
.p-home .hero-cue svg {
width: 24px;
height: 24px;
stroke: var(--accent);
animation: home-cue 1.8s ease-in-out infinite;
}
@keyframes home-cue {
0%, 100% { transform: translateY(0); opacity: .5; }
50% { transform: translateY(8px); opacity: 1; }
}
/* Respect reduced-motion: no bounce. */
@media (prefers-reduced-motion: reduce) {
.p-home .hero-cue svg { animation: none; }
}
/* On small screens the cue can crowd the CTAs — hide it. */
@media (max-width: 640px) {
.p-home .hero-cue { display: none; }
}
/* ---- SECTION 2: cinematic flow + section bridging ----------
The base card/section design (built + approved earlier) stays.
We only ADD flow: a frosted-glass advantages strip that overlaps
the hero base — bridging hero into the page like the reference
trust-strip — plus motion is wired via data-* in the HTML. */
.p-home .advantages {
border-top: none;
border-bottom: none;
background: transparent;
box-shadow: none;
margin-top: clamp(-66px, -6vh, -42px);
}
.p-home .advantages .container {
/* Mostly-opaque bg so the blur radius can stay small (cheap to
re-composite while the strip is on screen near the top). */
background: rgba(10, 13, 22, .86);
-webkit-backdrop-filter: blur(10px) saturate(135%);
backdrop-filter: blur(10px) saturate(135%);
border: 1px solid rgba(255, 107, 0, .18);
border-radius: 18px;
box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .05);
overflow: hidden;
}
.p-home .advantage-item { padding: 24px 22px; }
@media (max-width: 900px) {
.p-home .advantages { margin-top: -34px; }
}
/* ============================================================
SECTION 3: cinematic "HISTORIA" — the process as a story.
Base (mobile / no-JS / reduced-motion): beats stack as a
readable list, every step's text in the DOM (SEO-safe).
html.cin-on (desktop + motion only): full-viewport crossfade,
one active beat, auto-advancing with a progress-dot rail.
Reuses the proven monitoring-ai-acusense engine (native, 60fps).
============================================================ */
.p-home .story { position: relative; background: var(--bg-darker, #04050A); }
.p-home .story__viewport { position: relative; max-width: var(--container-max, 1240px); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
/* Base (no-JS / <900px / reduced-motion): COMPACT card per beat —
small thumbnail + text side-by-side, so the 8-beat list stays short
(not a full-bleed image stack). Cinematic overlay overrides below. */
.p-home .story__beat { position: relative; display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: clamp(18px, 3vw, 34px); align-items: center; margin-bottom: 18px; padding: 16px; background: rgba(18, 21, 31, .5); border: 1px solid var(--border-subtle, rgba(255,255,255,.08)); border-radius: 18px; }
.p-home .story__bg { position: relative; border-radius: 12px; overflow: hidden; }
.p-home .story__bg img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.p-home .story__scrim { display: none; }
.p-home .story__content { display: block; padding: 0; }
@media (max-width: 620px) {
.p-home .story__beat { grid-template-columns: 1fr; padding: 0; background: none; border: none; gap: 12px; }
}
.p-home .story__n { font-family: var(--font-heading); font-size: 1rem; letter-spacing: 3px; color: var(--accent); display: block; }
.p-home .story__title { font-family: var(--font-heading); font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.1; margin: 6px 0 12px; color: var(--text-primary); }
.p-home .story__beat p { color: var(--text-secondary); line-height: 1.7; font-size: 1.02rem; max-width: 64ch; margin: 0; }
.p-home .story__rlabel { display: block; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 1.5px; font-size: .78rem; color: var(--accent); margin: 18px 0 10px; }
.p-home .story__keys { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.p-home .story__keys li { position: relative; padding-left: 22px; color: var(--text-secondary); line-height: 1.5; }
.p-home .story__keys li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.p-home .story__nav { display: none; }
/* ---- Desktop cinematic (only when motion + fine pointer) ---- */
html.cin-on .p-home .story { padding: 0; }
html.cin-on .p-home .story__viewport { max-width: none; padding: 0; height: 82vh; min-height: 540px; max-height: 720px; overflow: hidden; }
html.cin-on .p-home .story__beat { display: block; position: absolute; inset: 0; margin: 0; padding: 0; background: none; border: none; opacity: 0; pointer-events: none; z-index: 1; transition: opacity .55s ease; }
html.cin-on .p-home .story__beat.is-active { opacity: 1; pointer-events: auto; z-index: 2; }
html.cin-on .p-home .story__bg { position: absolute; inset: 0; border-radius: 0; box-shadow: none; height: 100%; }
html.cin-on .p-home .story__bg img { height: 100%; aspect-ratio: auto; filter: brightness(.5) saturate(1.05); }
html.cin-on .p-home .story__scrim { display: block; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(90deg, rgba(4,5,10,.92) 0%, rgba(4,5,10,.55) 46%, rgba(4,5,10,.2) 100%), linear-gradient(0deg, rgba(4,5,10,.72), transparent 42%); }
html.cin-on .p-home .story__content { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: clamp(24px, 4vw, 64px); padding: 0 clamp(40px, 7vw, 110px); }
html.cin-on .p-home .story__left { max-width: 560px; }
html.cin-on .p-home .story__n { font-size: clamp(1.9rem, 3.2vw, 2.7rem); text-shadow: 0 0 30px rgba(255,107,0,.4); line-height: 1; margin-bottom: 4px; }
html.cin-on .p-home .story__title { font-size: clamp(1.8rem, 3.8vw, 3rem); line-height: 1.04; margin: 0 0 16px; text-shadow: 0 2px 30px rgba(0,0,0,.6); }
html.cin-on .p-home .story__beat p { font-size: clamp(1rem, 1.3vw, 1.14rem); max-width: 46ch; color: #e8eaee; }
html.cin-on .p-home .story__beat p strong { color: #fff; }
html.cin-on .p-home .story__right { justify-self: start; max-width: 340px; }
html.cin-on .p-home .story__rlabel { color: var(--accent); letter-spacing: 2px; font-size: .8rem; margin: 0 0 14px; }
html.cin-on .p-home .story__keys { gap: 12px; }
html.cin-on .p-home .story__keys li { color: #fff; font-size: 1.02rem; padding-left: 26px; }
html.cin-on .p-home .story__keys li::before { width: 9px; height: 9px; top: .4em; box-shadow: 0 0 10px rgba(255,107,0,.6); }
@media (max-width: 1040px) {
html.cin-on .p-home .story__content { grid-template-columns: 1fr; gap: 18px; }
html.cin-on .p-home .story__right { display: none; } /* narrow desktop: keep it clean, keys are in the DOM for SEO */
}
/* progress-dot rail — 44×44 hit area (WCAG/ui-ux-pro-max), thin visible bar inside */
html.cin-on .p-home .story__nav { display: flex; position: absolute; bottom: clamp(24px, 5vh, 50px); left: clamp(40px, 7vw, 120px); z-index: 5; gap: 8px; flex-wrap: wrap; max-width: 70vw; }
html.cin-on .p-home .story__dot { width: 40px; height: 44px; padding: 20px 0; box-sizing: border-box; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; }
html.cin-on .p-home .story__dot-track { display: block; position: relative; width: 100%; height: 4px; border-radius: 3px; background: rgba(255,255,255,.24); overflow: hidden; transition: background .3s var(--ease-out, ease); }
html.cin-on .p-home .story__dot:hover .story__dot-track,
html.cin-on .p-home .story__dot:focus-visible .story__dot-track { background: rgba(255,255,255,.45); }
html.cin-on .p-home .story__dot-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--accent); }
@media (prefers-reduced-motion: reduce) {
/* engine never loads under reduced-motion, but guard the base list anyway */
.p-home .story__beat { opacity: 1 !important; }
}
/* ============================================================
STAGE 4 — Lighthouse fixes (a11y / best-practices).
============================================================ */
/* WCAG 1.4.1 — inline text links must not rely on colour alone.
Persistent underline on links inside body paragraphs (not buttons
or card CTAs, which are distinguishable by shape/context). */
.p-home main p a:not(.btn):not(.card-link) {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .18em;
}
/* best-practices: keep the footer logo at its true 3:1 aspect ratio
(was rendering 231×84 ≈ 2.75 because height was being constrained). */
.p-home .footer-logo .logo-full { height: auto; width: auto; max-width: 100%; }
/* heading-order fix: homepage h4→h3 (no level skip). Shared style.css
still styles `.text-justify h4` / `.site-footer h4` for OTHER pages;
here we replicate that look on the now-h3 elements, scoped to p-home. */
.p-home .text-justify h3 { margin: 26px 0 8px; font-size: 1rem; letter-spacing: 1px; color: var(--text-primary); }
.p-home .text-justify h3:first-child { margin-top: 0; }
.p-home .site-footer h3 { color: var(--text-primary); margin-bottom: 20px; font-size: .95rem; letter-spacing: 2px; }
.p-home .callout h3 { font-size: 1.05rem; letter-spacing: 1px; color: var(--text-primary); margin-bottom: 8px; }
/* ============================================================
SYSTEMY — zigzag (alternating text/image, 2 SEO paragraphs).
Replaces the 5-card grid; all subpage links kept.
============================================================ */
.p-home .zz-list { display: grid; gap: clamp(48px, 7vw, 88px); margin-top: clamp(40px, 5vw, 60px); }
.p-home .zz-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.p-home .zz-row > * { min-width: 0; }
.p-home .zz-row--reverse .zz-text { order: 2; }
.p-home .zz-eyebrow { display: inline-block; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 2.4px; font-size: .7rem; font-weight: 600; color: var(--accent); margin-bottom: 12px; }
.p-home .zz-text h3 { font-family: var(--font-heading); font-size: clamp(1.4rem, 2.4vw, 1.95rem); line-height: 1.2; margin: 0 0 14px; color: var(--text-primary); }
.p-home .zz-text p { color: var(--text-secondary); line-height: 1.75; font-size: .98rem; margin: 0 0 14px; }
.p-home .zz-text .card-link { margin-top: 4px; }
.p-home .zz-media { overflow: hidden; border-radius: 16px; border: 1px solid rgba(255, 107, 0, .14); box-shadow: 0 22px 55px rgba(0, 0, 0, .5); }
.p-home .zz-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--ease-out, ease); }
.p-home .zz-row:hover .zz-media img { transform: scale(1.05); }
@media (max-width: 820px) {
.p-home .zz-row { grid-template-columns: 1fr; gap: 22px; }
.p-home .zz-row--reverse .zz-text { order: 0; }
.p-home .zz-media { order: -1; } /* image above text on mobile */
}
/* ============================================================
"DLACZEGO" — Bento grid (ui-ux-pro-max: Bento Box Grid).
Modular tiles of varied size; Apple-style, dark, hover-scale.
All 10 differentiators kept (1 = stat tile, 9 = icon tiles)
+ media/callout tile + CTA tile.
============================================================ */
/* the shared `.why-section .container` is a 2-col grid (old text|media
layout) — neutralise it so the bento spans the full container width. */
.p-home .why-section .container { display: block; }
.p-home .bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(148px, auto); grid-auto-flow: dense; gap: 16px; margin-top: clamp(36px, 4vw, 54px); }
.p-home .bento-cell { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 18px; background: rgba(18, 21, 31, .66); border: 1px solid var(--border-subtle, rgba(255,255,255,.08)); transition: transform .35s var(--ease-out, ease), border-color .35s ease, box-shadow .35s ease; }
.p-home .bento-cell:hover { transform: scale(1.015); border-color: rgba(255, 107, 0, .4); box-shadow: 0 20px 50px rgba(0,0,0,.42); }
.p-home .bento-span-2 { grid-column: span 2; }
.p-home .bento-tall { grid-row: span 2; }
.p-home .bento-ico { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255,107,0,.12); border: 1px solid rgba(255,107,0,.22); color: var(--accent); }
.p-home .bento-ico svg { width: 22px; height: 22px; }
.p-home .bento-cell h3 { font-family: var(--font-heading); font-size: 1.02rem; letter-spacing: .3px; margin: 6px 0 0; color: var(--text-primary); }
.p-home .bento-cell > p { color: var(--text-muted); font-size: .9rem; line-height: 1.55; margin: 0; }
/* STAT tile */
.p-home .bento-cell--stat { justify-content: center; gap: 6px; background: linear-gradient(135deg, rgba(255,107,0,.15), rgba(255,107,0,.03)); border-color: rgba(255,107,0,.3); }
.p-home .bento-stat__num { font-family: var(--font-heading); font-size: clamp(2.6rem, 4.4vw, 3.8rem); line-height: 1; color: var(--accent); text-shadow: 0 0 34px rgba(255,107,0,.4); }
.p-home .bento-stat__label { color: var(--text-secondary); font-size: .95rem; line-height: 1.5; max-width: 40ch; }
/* MEDIA tile */
.p-home .bento-cell--media { padding: 0; overflow: hidden; min-height: 240px; }
.p-home .bento-cell--media picture { position: absolute; inset: 0; display: block; }
.p-home .bento-cell--media img { width: 100%; height: 100%; object-fit: cover; }
.p-home .bento-cell--media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4,5,10,.92) 0%, rgba(4,5,10,.15) 55%); }
.p-home .bento-callout { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; display: flex; gap: 12px; align-items: flex-start; }
.p-home .bento-callout .check { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #06080F; display: flex; align-items: center; justify-content: center; }
.p-home .bento-callout p { color: #fff; margin: 0; line-height: 1.4; font-size: .98rem; }
/* CTA tile */
.p-home .bento-cell--cta { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; text-decoration: none; background: linear-gradient(135deg, rgba(255,107,0,.16), rgba(255,107,0,.04)); border-color: rgba(255,107,0,.32); font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 1px; font-size: .92rem; color: var(--text-primary); }
.p-home .bento-cell--cta svg { flex: none; color: var(--accent); }
@media (max-width: 900px) {
.p-home .bento { grid-template-columns: repeat(2, 1fr); }
.p-home .bento-tall { grid-row: span 1; }
}
@media (max-width: 560px) {
.p-home .bento { grid-template-columns: 1fr; }
.p-home .bento-span-2 { grid-column: span 1; }
}
/* ============================================================
REGION BAR — local SEO, single row of town links, fills the
gap under the advantages strip.
============================================================ */
.p-home .region-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; max-width: var(--container-max, 1240px); margin: clamp(22px, 3vw, 36px) auto 0; padding: 0 clamp(16px, 4vw, 40px); }
.p-home .region-bar__label { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 1.6px; font-size: .72rem; color: var(--text-muted); }
.p-home .region-bar a { font-size: .86rem; color: var(--text-secondary); text-decoration: none; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border-subtle, rgba(255,255,255,.1)); transition: color .25s var(--ease-out, ease), border-color .25s ease, background .25s ease; }
.p-home .region-bar a:hover { color: var(--accent); border-color: rgba(255,107,0,.5); background: rgba(255,107,0,.08); }
/* ============================================================
ZIGZAG media — "live system feed" HUD: subtle ken-burns +
scan sweep + per-system status badge + AcuSense detect box.
transform/opacity only. Off under reduced-motion; scan/detect
disabled on mobile to save battery.
============================================================ */
.p-home .zz-media { position: relative; }
.p-home .zz-media img { animation: zz-kenburns 18s ease-in-out infinite alternate; }
.p-home .zz-row:hover .zz-media img { transform: none; filter: brightness(1.08); }
@keyframes zz-kenburns { from { transform: scale(1.02); } to { transform: scale(1.09); } }
.p-home .zz-hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; border-radius: 16px; }
.p-home .zz-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,107,0,.75), transparent); box-shadow: 0 0 14px rgba(255,107,0,.6); opacity: 0; animation: zz-scan 5s linear infinite; }
@keyframes zz-scan { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.p-home .zz-badge { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: rgba(6,8,15,.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid rgba(255,107,0,.4); font-family: var(--font-heading); font-size: .62rem; letter-spacing: 1.4px; text-transform: uppercase; color: #fff; }
.p-home .zz-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: zz-pulse 1.5s ease-in-out infinite; }
@keyframes zz-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.65); } }
.p-home .zz-hud--fire .zz-badge { border-color: rgba(255,64,32,.55); }
.p-home .zz-hud--fire .zz-dot { background: #ff4020; box-shadow: 0 0 9px #ff4020; animation-duration: .7s; }
.p-home .zz-hud--cctv .zz-badge { border-color: rgba(255,64,32,.5); }
.p-home .zz-hud--cctv .zz-dot { background: #ff4020; box-shadow: 0 0 9px #ff4020; }
/* AcuSense detection box (CCTV only) */
.p-home .zz-detect { position: absolute; left: 30%; top: 24%; width: 34%; height: 48%; border: 2px solid var(--accent); border-radius: 3px; opacity: 0; animation: zz-detect 5.5s ease-in-out infinite; }
.p-home .zz-detect__l { position: absolute; top: -19px; left: -2px; background: var(--accent); color: #06080F; font-family: var(--font-heading); font-size: .56rem; letter-spacing: .5px; padding: 2px 6px; border-radius: 3px; white-space: nowrap; }
@keyframes zz-detect { 0%,18% { opacity: 0; } 28%,82% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.p-home .zz-media img { animation: none; }
.p-home .zz-scan, .p-home .zz-dot, .p-home .zz-detect { animation: none; }
.p-home .zz-detect { opacity: 1; }
}
@media (max-width: 820px) {
.p-home .zz-scan, .p-home .zz-detect { display: none; } /* keep static badge, drop moving fx */
.p-home .zz-media img { animation: none; }
}
/* ============================================================
HERO SCENE FX — animations woven INTO the photo (Hikvision30):
• intruder at the fence → ACTIVE ALARM (blinking red detection box)
• emergency vehicle → flashing blue/red beacons
• building → alarm signaler (blinking red strobe + ring)
Positioned as % over the image (desktop-only; the object-fit
crop is predictable there). Kills the old "flying" glow bar.
============================================================ */
.p-home .hero::after { animation: none !important; } /* remove the flying glow "pas" */
.p-home .hero-fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
/* intruder at the fence → active alarm box (blinks red↔dim) */
.p-home .fx-detect { position: absolute; left: 66%; top: 41%; width: 15%; height: 31%; border: 2px solid #ff2d1a; border-radius: 3px; animation: fx-alarm 1s steps(1, end) infinite; }
.p-home .fx-detect__lbl { position: absolute; top: -19px; left: -2px; background: #ff2d1a; color: #fff; font-family: var(--font-heading); font-size: .56rem; letter-spacing: .6px; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; white-space: nowrap; animation: fx-alarm-lbl 1s steps(1, end) infinite; }
@keyframes fx-alarm { 0%,49% { border-color: #ff2d1a; box-shadow: 0 0 0 2px rgba(255,45,26,.45), inset 0 0 26px rgba(255,45,26,.3); opacity: 1; } 50%,100% { border-color: rgba(255,45,26,.4); box-shadow: none; opacity: .5; } }
@keyframes fx-alarm-lbl { 0%,49% { opacity: 1; } 50%,100% { opacity: .2; } }
/* emergency vehicle → alternating blue/red beacons */
.p-home .fx-vehicle { position: absolute; left: 89%; top: 50%; width: 28px; height: 10px; transform: translate(-50%, -50%); }
.p-home .fx-vehicle::before, .p-home .fx-vehicle::after { content: ""; position: absolute; top: 0; width: 11px; height: 11px; border-radius: 50%; }
.p-home .fx-vehicle::before { left: 0; background: #2b7bff; box-shadow: 0 0 15px 4px #2b7bff; animation: fx-blue .6s steps(1, end) infinite; }
.p-home .fx-vehicle::after { right: 0; background: #ff2d1a; box-shadow: 0 0 15px 4px #ff2d1a; animation: fx-red .6s steps(1, end) infinite; }
@keyframes fx-blue { 0%,49% { opacity: 1; } 50%,100% { opacity: .1; } }
@keyframes fx-red { 0%,49% { opacity: .1; } 50%,100% { opacity: 1; } }
/* building → alarm signaler (red strobe + expanding ring) */
.p-home .fx-siren { position: absolute; left: 62%; top: 33%; width: 11px; height: 11px; border-radius: 50%; background: #ff2d1a; box-shadow: 0 0 12px 2px #ff2d1a; transform: translate(-50%, -50%); animation: fx-strobe 1.1s steps(1, end) infinite; }
.p-home .fx-siren::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255,45,26,.6); animation: fx-strobe-ring 1.1s ease-out infinite; }
@keyframes fx-strobe { 0%,40% { opacity: 1; } 41%,100% { opacity: .18; } }
@keyframes fx-strobe-ring { 0% { transform: scale(.5); opacity: .9; } 70%,100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.p-home .fx-detect, .p-home .fx-detect__lbl, .p-home .fx-vehicle::before, .p-home .fx-vehicle::after, .p-home .fx-siren, .p-home .fx-siren::before { animation: none; }
}
@media (max-width: 820px) { .p-home .hero-fx { display: none; } }
/* ============================================================
HERO CINEMATIC MOCKUP (static frame for approval; GSAP motion
added only AFTER the owner approves this look). Subtle, film-like
treatment layered OVER the real Hikvision30 photo — elegance first,
no pasted actors. Priorities: realism > smoothness > mood > wow.
============================================================ */
.p-home .hero-cine { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.p-home .hero-cine > * { position: absolute; inset: 0; }
/* cinematic grade — gentle vignette + a little more depth top & bottom */
.p-home .hero-cine__grade {
background:
radial-gradient(135% 92% at 60% 46%, transparent 44%, rgba(2,4,10,.5) 100%),
linear-gradient(180deg, rgba(3,5,11,.34) 0%, transparent 22%, transparent 66%, rgba(3,5,11,.55) 100%);
mix-blend-mode: multiply;
}
/* soft blue beacon glow on the police cruiser — lives INSIDE .hero-live
(the zoom stage) so it tracks the car through the Ken Burns push-in;
its centre is crop-anchored via --bx/--by set by home-hero-live.js */
.p-home .hero-cine__beacon {
position: absolute; inset: 0;
background: radial-gradient(circle 96px at var(--bx, 92%) var(--by, 65%), rgba(80,150,255,.6), rgba(60,120,255,.2) 46%, transparent 72%);
mix-blend-mode: screen;
}
/* fine rain — a tiny tiled SVG of slanted streak dashes. The LAYER is
oversized and translated vertically by exact tile multiples
(compositor-only, seamless loop) so the rain visibly FALLS.
(v1 used uniform gradient stripes shifted along their own axis —
mathematically invisible; this is the correct construction.) */
.p-home .hero-cine__rain {
top: -240px; bottom: auto; height: calc(100% + 240px);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='240' viewBox='0 0 160 240'%3E%3Cg stroke='rgba(206,222,252,0.2)' stroke-width='1.3' stroke-linecap='round'%3E%3Cline x1='22' y1='14' x2='17' y2='42'/%3E%3Cline x1='64' y1='58' x2='59' y2='88'/%3E%3Cline x1='118' y1='26' x2='113' y2='54'/%3E%3Cline x1='86' y1='120' x2='81' y2='150'/%3E%3Cline x1='30' y1='168' x2='25' y2='196'/%3E%3Cline x1='140' y1='142' x2='135' y2='172'/%3E%3Cline x1='102' y1='196' x2='97' y2='226'/%3E%3Cline x1='48' y1='100' x2='44' y2='124'/%3E%3C/g%3E%3C/svg%3E");
background-size: 160px 240px;
opacity: .5;
}
/* low fog with STRUCTURE (two soft mist patches + base haze) so its
slow horizontal drift is actually perceivable (a uniform gradient
translated sideways shows nothing — v1 mistake). */
.p-home .hero-cine__fog {
left: -10%; right: -10%;
background:
radial-gradient(46% 64% at 26% 102%, rgba(132,152,188,.17), transparent 70%),
radial-gradient(54% 74% at 74% 106%, rgba(120,140,175,.13), transparent 72%),
linear-gradient(to top, rgba(120,140,175,.10), transparent 32%);
}
/* wet-asphalt shimmer at the very bottom */
.p-home .hero-cine__shimmer {
background: linear-gradient(to top, rgba(120,150,210,.10), transparent 15%);
mix-blend-mode: screen;
}
/* mockup: hide the old blinking hero-fx so the elegant grade reads clean.
Markup is KEPT (only hidden) → fully reversible. */
.p-home .hero-fx { display: none !important; }
@media (max-width: 820px) {
.p-home .hero-cine__rain, .p-home .hero-cine__fog { display: none; }
}
/* ---- HERO LIVE (cinemagraph patches) --------------------------------
Soft-masked DUPLICATES of the hero photo; GSAP animates only the
duplicate inside its feathered mask window (transform-origin at the
subject's ground contact so the baked perimeter line barely shifts):
the burglar edges closer, the cruiser rolls forward, the baked AI
frame gets a subtle lock-on pulse. At scale 1 the pixels are IDENTICAL
to the base photo, so no-JS / reduced-motion / mobile see no change.
Mask geometry (--mx/--my/--mw/--mh) is set by home-hero-live.js from
image-% anchors mapped onto the object-fit cover crop (no drift). */
.p-home .hero-live { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.p-home .hero-live__patch {
position: absolute; inset: 0;
-webkit-mask-image: radial-gradient(ellipse var(--mw, 240px) var(--mh, 420px) at var(--mx, 50%) var(--my, 50%), #000 44%, transparent 74%);
mask-image: radial-gradient(ellipse var(--mw, 240px) var(--mh, 420px) at var(--mx, 50%) var(--my, 50%), #000 44%, transparent 74%);
}
.p-home .hero-live__patch img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: 62% center; /* match .hero__bg */
filter: brightness(.62) contrast(1.04) saturate(1.04); /* match .hero__bg */
will-change: transform;
}
/* subtle brand-orange lock-on pulse aligned to the photo's BAKED AI box
(positions set by JS; opacity driven only by the GSAP timeline) */
.p-home .hero-live__aibox {
position: absolute; opacity: 0;
border: 1px solid rgba(255, 150, 70, .9);
border-radius: 10px; /* match the baked AcuSense box corners */
box-shadow: 0 0 16px rgba(255, 120, 30, .35), inset 0 0 22px rgba(255, 120, 30, .16);
}
/* headlight swell during the cruiser beat (positions set by JS; opacity
and scale driven only by the GSAP timeline) */
.p-home .hero-live__heads {
position: absolute; opacity: 0; pointer-events: none;
background: radial-gradient(closest-side, rgba(255, 246, 220, .9), rgba(255, 238, 200, .28) 55%, transparent 78%);
border-radius: 50%;
mix-blend-mode: screen;
filter: blur(3px);
}
/* below the JS gate (min-width:900) the module never runs — skip the
two extra image layers entirely */
@media (max-width: 899px) { .p-home .hero-live { display: none; } }
/* ---- MOTION (added after the owner approved the static frame) -------
Every movement subtle, compositor-only (transform/opacity), desktop +
fine-pointer only; hard-off under reduced-motion. "Film, not a game":
fewer elements, moved very smoothly. realism > smoothness > mood > wow. */
@media (min-width: 900px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
/* slow cinematic push-in (Ken Burns) on the WHOLE stage — photo and
content-locked overlays zoom together (nothing can desync). The
filtered bitmap inside rasterises once and only transforms.
Amplitude tuned to be PERCEIVABLE within a few seconds of watching
(v1's 4%/40s sat below the perception threshold). */
.p-home .hero-stage {
will-change: transform;
animation: hero-kenburns 26s ease-in-out infinite alternate;
}
/* the blue cruiser light breathes — clearly alive, still not a strobe */
.p-home .hero-cine__beacon { animation: hero-beacon 4.2s ease-in-out infinite; }
/* rain falls: translate the oversized tiled layer by one tile (240px)
per loop → seamless, compositor-only */
.p-home .hero-cine__rain { will-change: transform; animation: hero-rain .6s linear infinite; }
/* mist patches drift slowly sideways */
.p-home .hero-cine__fog { will-change: transform; animation: hero-fog 22s ease-in-out infinite alternate; }
/* wet-asphalt shimmer glistens */
.p-home .hero-cine__shimmer { animation: hero-shimmer 6.5s ease-in-out infinite; }
}
@keyframes hero-kenburns {
from { transform: scale(1.06) translate3d(0, 0, 0); }
to { transform: scale(1.115) translate3d(-1.2%, -0.7%, 0); }
}
@keyframes hero-beacon { 0%, 100% { opacity: .22; } 50% { opacity: 1; } }
@keyframes hero-rain { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 240px, 0); } }
@keyframes hero-fog { from { transform: translate3d(-3%, 0, 0); } to { transform: translate3d(3%, 0, 0); } }
@keyframes hero-shimmer { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
/* Hero H1 location line — SEO/local, styled as a smaller accent tagline
so it adds "Bydgoszcz i regionie" without overpowering the "25 LAT" hook. */
.p-home .hero h1 .line--loc {
display: block;
margin-top: 10px;
font-size: clamp(1.05rem, 2vw, 1.55rem);
letter-spacing: 1px;
color: var(--accent);
text-transform: none;
text-shadow: 0 0 24px rgba(255,107,0,.35);
}
/* Kill the injected "flying" scan bar (animations.js appends a with
inline `animation: ss-scan` to .hero) — homepage only, shared JS untouched. */
.p-home .hero > div[style*="ss-scan"] { display: none !important; }
/* ============================================================
MOBILE / no-JS STORY = clean vertical TIMELINE.
On desktop the story is a full-bleed cinematic (html.cin-on) where
each beat has a background photo. On mobile those bg photos become
MISMATCHED inline images (owner: "zdjęcia nie odpowiadają treścią,
mobile nie opowiada historii"). Solution: for the non-cinematic
state, drop the bg photos and render the steps as a numbered vertical
timeline that actually reads as a sequential story. All text stays in
the DOM (SEO). Applies to mobile + no-JS + reduced-motion.
============================================================ */
html:not(.cin-on) .p-home .story__viewport { max-width: 660px; }
html:not(.cin-on) .p-home .story__bg,
html:not(.cin-on) .p-home .story__scrim { display: none; }
html:not(.cin-on) .p-home .story__beat {
display: block; position: relative;
margin: 0; padding: 2px 0 30px 58px;
background: none; border: none; border-radius: 0;
}
html:not(.cin-on) .p-home .story__beat::before { /* connecting rail */
content: ""; position: absolute; left: 18px; top: 10px; bottom: -6px; width: 2px;
background: linear-gradient(rgba(255,107,0,.75), rgba(255,107,0,.12));
}
html:not(.cin-on) .p-home .story__beat:last-child::before { display: none; }
html:not(.cin-on) .p-home .story__n {
position: absolute; left: 0; top: 0; margin: 0;
width: 38px; height: 38px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: .82rem; letter-spacing: 0;
color: var(--accent); background: var(--bg-darker, #04050A);
border: 1.5px solid var(--accent);
}
html:not(.cin-on) .p-home .story__content { display: block; }
html:not(.cin-on) .p-home .story__title { font-size: 1.22rem; margin: 0 0 8px; }
html:not(.cin-on) .p-home .story__beat p { font-size: .96rem; max-width: none; }
html:not(.cin-on) .p-home .story__rlabel { margin: 14px 0 8px; }
html:not(.cin-on) .p-home .story__keys li { font-size: .95rem; }