/* ============================================================
   INFAS — motion & polish layer ("Apple feel")
   ============================================================ */

/* ---------- scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  will-change: transform;
}

/* ---------- parallax media ---------- */
.imgwrap.px { position: relative; }
.imgwrap.px image-slot, .imgwrap.px .px-media {
  position: absolute; left: 0; width: 100%; height: 128%; top: -14%;
  will-change: transform;
}
.bleed .imgwrap.px image-slot { height: 124%; top: -12%; }

/* ---------- media wipe-in reveal ---------- */
.media-reveal { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease-out); will-change: clip-path; }
.media-reveal.in { clip-path: inset(0 0 0 0); }
.media-reveal > * , .media-reveal image-slot { transform: scale(1.12); transition: transform 1.4s var(--ease-out); }
.media-reveal.in > *, .media-reveal.in image-slot { transform: scale(1); }
/* don't fight parallax-positioned slots */
.imgwrap.px.media-reveal image-slot { transform: scale(1.12); }
.imgwrap.px.media-reveal.in image-slot { transform: scale(1); }

/* ---------- icons ---------- */
.ic { width: 32px; height: 32px; stroke: currentColor; stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ic-sm { width: 20px; height: 20px; }
.feature .ic-wrap { width: 52px; height: 52px; border: 1px solid var(--line); display: grid; place-items: center; margin-bottom: 6px; transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.feature:hover .ic-wrap { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.dark .feature .ic-wrap { border-color: var(--grey-800); }
.dark .feature:hover .ic-wrap { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ---------- livelier buttons ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; will-change: transform; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper);
  transform: translateY(101%); transition: transform .45s var(--ease);
}
.dark .btn::before { background: var(--ink); }
.btn:hover { transform: translateY(-2px); }
.btn:hover::before { transform: translateY(0); }
.btn[data-magnetic] { transition: transform .3s var(--ease), color .4s var(--ease); }
.btn-outline::before { background: var(--ink); }
.dark .btn-outline::before { background: var(--paper); }

.link-arrow .la-ic { transition: transform .35s var(--ease); display: inline-block; }
.link-arrow:hover .la-ic { transform: translateX(5px); }

/* card lift */
.folie-card, .step, .feature, .value-row, .verm-card { will-change: transform; }
.folie-card:hover, .step:hover { transform: translateY(-4px); }

/* ---------- social ---------- */
.social { display: flex; gap: 12px; align-items: center; }
.social a {
  width: 42px; height: 42px; border: 1px solid var(--grey-800); border-radius: 50%;
  display: grid; place-items: center; color: var(--grey-300);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.social a:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); transform: translateY(-3px); }
.social .ic { width: 18px; height: 18px; stroke-width: 1.6; }

/* contact card icon */
.cc-ic { color: var(--grey-500); flex: none; }

/* ---------- hero text rise (line mask upgrade) ---------- */
.rise { display: inline-block; will-change: transform; }

/* ---------- floating CTA reveal (Apple-style sticky) ---------- */
.float-cta {
  position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); z-index: 70;
  opacity: 0; transform: translateY(20px) scale(.96); pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.float-cta.show { opacity: 1; transform: none; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .imgwrap.px image-slot, .imgwrap.px .px-media { transform: none !important; }
  .media-reveal { clip-path: none; }
  .media-reveal > *, .media-reveal image-slot { transform: none !important; }
  .scroll-progress { display: none; }
}

/* ---------- stock media ---------- */
/* Full-colour imagery. The UI/typography stays monochrome; photos & video
   carry the colour. Slight contrast lift keeps them crisp against the layout. */
.hero-media .hero-video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: contrast(1.03);
  animation: kenburns 26s ease-in-out infinite alternate;
}
image-slot::part(image) { object-fit: cover; }

/* Parallax wrappers inside absolutely-filled cards must stay absolute —
   the generic `.imgwrap.px{position:relative}` above would otherwise pull
   them back into flex flow and collapse them to content width. */
.verm-card .imgwrap.px, .bleed .imgwrap.px { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .hero-media .hero-video { animation: none; }
}