/* Pure Exterior - Fluent Design + scroll animations layer voor Odoo website.
   Geserveerd via /static/website-fluent.css op admin.pure-exterior.com en
   gelinked vanuit de pe-partners-strip section in elke gepubliceerde pagina.
   Doel: depth, smooth motion, acrylic materials zonder de Odoo-theme structuur
   te breken. */

/* ---------------------------------------------------------------------------
   1. Globale motion-variables + reveal base-state (scroll animations)
   --------------------------------------------------------------------------- */

:root {
  --pe-fluent-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pe-fluent-ease-deep: cubic-bezier(0.16, 1, 0.3, 1);
  --pe-fluent-duration: 720ms;
  --pe-fluent-stagger: 80ms;
  --pe-fluent-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.05);
  --pe-fluent-shadow-2: 0 4px 8px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.10);
  --pe-fluent-shadow-3: 0 8px 16px rgba(0, 0, 0, 0.10), 0 16px 48px rgba(0, 0, 0, 0.14);
}

/* Elements opted in via [data-pe-reveal] starten verborgen + verschoven. JS
   voegt .is-visible toe wanneer ze in viewport komen. */
[data-pe-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity var(--pe-fluent-duration) var(--pe-fluent-ease),
    transform var(--pe-fluent-duration) var(--pe-fluent-ease-deep);
  will-change: opacity, transform;
}
[data-pe-reveal="left"]  { transform: translate3d(-28px, 0, 0); }
[data-pe-reveal="right"] { transform: translate3d(28px, 0, 0); }
[data-pe-reveal="scale"] { transform: scale(0.96); }
[data-pe-reveal="fade"]  { transform: none; }
[data-pe-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* prefers-reduced-motion: respecteer de OS-instelling, geen animaties */
@media (prefers-reduced-motion: reduce) {
  [data-pe-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------------
   2. Auto-reveal: elke <section> en card-like element binnen #wrap krijgt
      automatisch een reveal-animatie. Zonder data-attr op markup. JS voegt
      het runtime toe (ook voor dynamic Odoo-views).
   --------------------------------------------------------------------------- */

.pe-fluent-auto[data-pe-reveal] { /* duplicate guard */ }

/* ---------------------------------------------------------------------------
   3. Fluent depth: acrylic-cards. Snippets met klassen die Odoo standaard
      gebruikt voor 'card' / 'feature-block' krijgen subtiele acrylic look.
   --------------------------------------------------------------------------- */

#wrap .s_card,
#wrap .s_feature_grid .row > div,
#wrap .s_features .row > div {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: var(--pe-fluent-shadow-1);
  transition:
    transform 320ms var(--pe-fluent-ease),
    box-shadow 320ms var(--pe-fluent-ease),
    border-color 200ms ease;
}
#wrap .s_card:hover,
#wrap .s_feature_grid .row > div:hover,
#wrap .s_features .row > div:hover {
  transform: translateY(-3px);
  box-shadow: var(--pe-fluent-shadow-3);
  border-color: rgba(255, 255, 255, 0.16);
}

/* ---------------------------------------------------------------------------
   4. Fluent buttons: depth shadow + smooth scale on hover/active
   --------------------------------------------------------------------------- */

#wrap .btn,
#wrap a.btn-primary,
#wrap button.btn-primary {
  transition:
    transform 160ms var(--pe-fluent-ease),
    box-shadow 240ms var(--pe-fluent-ease),
    background-color 200ms ease,
    border-color 200ms ease !important;
}
#wrap .btn-primary {
  box-shadow: var(--pe-fluent-shadow-2);
}
#wrap .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--pe-fluent-shadow-3);
}
#wrap .btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--pe-fluent-shadow-1);
  transition-duration: 80ms;
}

/* ---------------------------------------------------------------------------
   5. Hero parallax + smooth scroll-feel: kleine drift op de hero-image.
      Gebruikt wel-perf transform op een ::before of de hero-image zelf.
   --------------------------------------------------------------------------- */

#wrap .o_record_cover_container,
#wrap .s_cover {
  overflow: hidden;
}
#wrap .o_record_cover_container .o_record_cover_image,
#wrap .s_cover .parallax-bg,
#wrap .s_cover .o_bg_video_container {
  transition: transform 6s linear;
  will-change: transform;
}
#wrap .o_record_cover_container.is-visible .o_record_cover_image,
#wrap .s_cover.is-visible .parallax-bg {
  transform: scale(1.03);
}

/* ---------------------------------------------------------------------------
   6. Smooth-scroll voor anchor-links (alleen waar prefers-reduced-motion off)
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------------------------------------------------------------------------
   7. Section transitions: backgrounds en borders smooth
   --------------------------------------------------------------------------- */

#wrap section {
  transition: background-color 400ms ease;
}

/* ---------------------------------------------------------------------------
   8. Image-reveal: img krijgt clip-path animatie wanneer in viewport komt
   --------------------------------------------------------------------------- */

#wrap img[data-pe-reveal-img] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1100ms var(--pe-fluent-ease-deep);
}
#wrap img[data-pe-reveal-img].is-visible {
  clip-path: inset(0 0 0 0);
}

/* ---------------------------------------------------------------------------
   9. Stagger-children utility: voeg increment toe op direct children
   --------------------------------------------------------------------------- */

[data-pe-stagger] > [data-pe-reveal]                  { transition-delay: 0ms; }
[data-pe-stagger] > [data-pe-reveal]:nth-child(2)     { transition-delay: calc(var(--pe-fluent-stagger) * 1); }
[data-pe-stagger] > [data-pe-reveal]:nth-child(3)     { transition-delay: calc(var(--pe-fluent-stagger) * 2); }
[data-pe-stagger] > [data-pe-reveal]:nth-child(4)     { transition-delay: calc(var(--pe-fluent-stagger) * 3); }
[data-pe-stagger] > [data-pe-reveal]:nth-child(5)     { transition-delay: calc(var(--pe-fluent-stagger) * 4); }
[data-pe-stagger] > [data-pe-reveal]:nth-child(n+6)   { transition-delay: calc(var(--pe-fluent-stagger) * 5); }

/* ---------------------------------------------------------------------------
   10. Sticky card-stack (Apple/Linear stijl) op "Zo gaan wij te werk".
       Targeting de Odoo s_key_images section met o_grid_item kaarten.
       De 1e o_grid_item is de heading-kaart - die scrollt normaal voorbij.
       Kaarten 2-7 (de 6 stappen) zijn sticky met progressieve top-offset
       zodat ze als een gestapelde deck pinnen tijdens scroll.
   --------------------------------------------------------------------------- */

.s_key_images .o_grid_item:nth-child(n+2) {
  position: -webkit-sticky !important;
  position: sticky !important;
  /* In flex/grid parent: align-self start verhindert dat de child de hele
     line-height claimt, waardoor sticky correct kan werken. */
  align-self: start !important;
  z-index: 1;
  border-radius: 18px;
  overflow: hidden;
  background-color: rgba(15, 19, 32, 0.92) !important;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.06) inset,
    0 12px 36px rgba(0, 0, 0, 0.32),
    0 24px 72px rgba(0, 0, 0, 0.18);
  transition:
    transform 480ms var(--pe-fluent-ease-deep),
    box-shadow 480ms ease;
  margin-bottom: 24px;
}

/* Parent .row in flex-modus: zorg dat children niet vertikaal stretchen,
   anders kunnen sticky-children niet binnen hun grenzen pinnen. */
.s_key_images .row {
  align-items: start !important;
}

/* Progressieve top-offsets: elke volgende kaart pinnen 18px lager dan de
   vorige, zodat eerder gestapelde kaarten nog 18px peek-edge tonen.
   80px basis = ruimte voor sticky Odoo header. */
.s_key_images .o_grid_item:nth-child(2) { top: 80px  !important; z-index: 2; }
.s_key_images .o_grid_item:nth-child(3) { top: 98px  !important; z-index: 3; }
.s_key_images .o_grid_item:nth-child(4) { top: 116px !important; z-index: 4; }
.s_key_images .o_grid_item:nth-child(5) { top: 134px !important; z-index: 5; }
.s_key_images .o_grid_item:nth-child(6) { top: 152px !important; z-index: 6; }
.s_key_images .o_grid_item:nth-child(7) { top: 170px !important; z-index: 7; }
.s_key_images .o_grid_item:nth-child(8) { top: 188px !important; z-index: 8; }

/* Parent moet geen overflow:hidden/auto hebben en moet display:grid of
   block zijn (sticky werkt niet binnen flex met align-items stretch). */
.s_key_images .row,
.s_key_images .o_grid_mode {
  overflow: visible !important;
}

/* De heading-kaart (index 1) blijft normaal en houdt zijn eigen styling. */
.s_key_images .o_grid_item:first-child {
  position: relative;
  margin-bottom: var(--pe-fluent-stagger, 32px);
}

/* Sectie zelf: voldoende padding-bottom dat de laatste kaart natuurlijk
   wegscrollt en niet aan het einde inplakt. */
.s_key_images {
  padding-bottom: 25vh !important;
}

/* Mobiel: stack-effect uitzetten - cards stacken verticaal te dicht en
   ondertussen verlies je context. Op gsm gewone scroll, geen sticky. */
@media (max-width: 768px) {
  .s_key_images .o_grid_item:nth-child(n+2) {
    position: relative;
    top: auto !important;
    margin-bottom: 12px;
  }
  .s_key_images { padding-bottom: 8vh !important; }
}

/* Reduced-motion: geen sticky-stack, gewoon flow */
@media (prefers-reduced-motion: reduce) {
  .s_key_images .o_grid_item:nth-child(n+2) {
    position: relative;
    top: auto !important;
  }
}