/* =====================================================================
   v33 · header + homepage refresh — switch: FEATURES["header_home_v33"] in build.py
   (behaviour: assets/js/ui33.js)
   ===================================================================== */

/* ---- header: hairline, reading progress, rolling nav labels, availability on the CTA */
.fg-header { --fg-sp: 0; }
.fg-header::after {                                     /* how far down the page you are */
    content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
    background: linear-gradient(90deg, rgba(184, 32, 37, 0.2), var(--fg-red)); transform: scaleX(var(--fg-sp)); transform-origin: 0 50%;
    opacity: 0; transition: opacity 0.4s;
}
.fg-header.is-scrolled::after { opacity: 1; }
.fg-header.is-scrolled { box-shadow: 0 1px 0 rgba(243, 241, 236, 0.06); }
.fg-nav a .fg-roll { display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.3; }
.fg-nav a .fg-roll > span { display: inline-block; position: relative; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.fg-nav a .fg-roll > span::after { content: attr(data-t); position: absolute; left: 0; top: 100%; font-family: var(--fg-serif); font-style: italic; letter-spacing: 0; }
.fg-nav a:hover .fg-roll > span, .fg-nav a:focus-visible .fg-roll > span { transform: translateY(-100%); }
.fg-header .fg-btn.solid .fg-avail { width: 7px; height: 7px; border-radius: 50%; background: #2bd96b; margin-right: 2px; box-shadow: 0 0 0 0 rgba(43, 217, 107, 0.7); animation: fgPing 1.8s infinite; flex: none; }

/* ---- homepage: a slow band of client logos right under the hero */
.fg-ticker { position: relative; display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); padding: 26px 0; background: var(--fg-bg); border-top: 1px solid var(--fg-line); border-bottom: 1px solid var(--fg-line); overflow: hidden; }
.fg-ticker-label { flex: none; padding-left: var(--fg-pad); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; }
.fg-ticker-label b { color: var(--fg-red); font-weight: 500; margin-right: 8px; }
.fg-ticker-view { position: relative; flex: 1; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.fg-ticker-track { display: flex; align-items: center; gap: clamp(44px, 5vw, 84px); width: max-content; animation: fgTick 60s linear infinite; }
.fg-ticker:hover .fg-ticker-track { animation-play-state: paused; }
.fg-ticker-track img { display: block; height: auto; width: var(--w, 120px); max-height: 38px; object-fit: contain; filter: grayscale(1) brightness(1.15); opacity: 0.55; transition: filter 0.4s, opacity 0.4s; }
.fg-ticker-track img:hover { filter: none; opacity: 1; }
.fg-ticker-track img[alt="Jetpak Plastik"] { filter: grayscale(1) brightness(2.3); }
@keyframes fgTick { to { transform: translateX(-50%); } }
@media (max-width: 767px) {
    .fg-ticker { flex-direction: column; align-items: stretch; gap: 16px; padding: 22px 0; }
    .fg-ticker-label { padding-left: var(--fg-pad); }
    .fg-ticker-track { animation-duration: 45s; }
}
@media (prefers-reduced-motion: reduce) { .fg-ticker-track { animation: none; } }

/* ---- homepage: each service shows its work on hover */
.fg-hp-svc .fg-hp-svc-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.06);
    filter: grayscale(0.4); transition: opacity 0.6s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; }
.fg-hp-svc .fg-hp-svc-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.86) 70%); }
.fg-hp-svc > :not(.fg-hp-svc-bg) { position: relative; z-index: 1; }
.fg-hp-svc:hover .fg-hp-svc-bg { opacity: 1; transform: none; }
@media (hover: none) { .fg-hp-svc .fg-hp-svc-bg { display: none; } }

/* ---- homepage: section labels draw a short red rule as they arrive */
.fg-hp-label b { position: relative; }
.fg-hp-head .fg-hp-label::after { content: ""; display: block; width: 36px; height: 1px; margin-top: 14px; background: var(--fg-red); transform-origin: 0 50%; animation: fgCrumbLine 1s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes fgCrumbLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }