:root {
  --ease-reveal: cubic-bezier(.16, 1, .3, 1);
  --par-scale:1.20;
  --par-shift:7%;
  --rise-dur:.95s
}

@media (min-width:768px) {
  :root{
    --ease-reveal:cubic-bezier(.16, 1, .3, 1);
    --par-scale: 1.32;
    --par-shift: 13%;
    --rise-dur: 1.15s;
  }
}

/* ---------- fadeinup on reveal ---------- */

@keyframes fadeInUp {
  from {opacity: 0; transform: translateY(22px); }
  to   {opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUpClip {
  from {opacity: 0; transform: translateY(30px);clip-path: inset(0px 0px 14%) }
  to   {opacity: 1; transform: translateY(0); clip-path: inset(0px 0px 0%) }
}

@media (prefers-reduced-motion: no-preference) {
  .js [data-onvisiblechild="fadeInUp"]:not(.fadeInUp)>* ,
  .js [data-onvisible="fadeInUp"]:not(.fadeInUp) {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }
  .fadeInUp {
    animation: fadeInUp 0.7s cubic-bezier(.16,1,.3,1) both;
    animation-delay: var(--delay,0);
  }
  .js [data-onvisiblechild="fadeInUpClip"]:not(.fadeInUpClip)>* ,
  .js [data-onvisible="fadeInUpClip"]:not(.fadeInUpClip) {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    @media (min-width: 768px){
      clip-path: inset(0px 0px 14%)
    }
  }
  .fadeInUpClip {
    /* no clip on mobile */
    animation: fadeInUp 0.7s cubic-bezier(.16,1,.3,1) both;
    @media (min-width: 768px){
      animation-name: fadeInUpClip;
    }
    animation-delay: var(--delay,0);
  }
  @supports (timeline-trigger: --t view()) {
    .animate-fadeInUp {
      opacity: 0;
      transform: translate3d(0, 22px, 0);
      animation: fadeInUp 0.7s ease both;
      /* L’animation se déclenche quand l’élément entre dans le viewport, avec un décalage de 120px (l’élément n’a pas besoin d’être complètement visible). */
      timeline-trigger: --fade-trigger view() entry 120px;
      /* Lie l’animation au déclencheur précédent et dit de la jouer une seule fois (play-once) dès que le déclencheur s’active.*/
      animation-trigger: --fade-trigger play-once;
    }
  }
}
/* ---------- le masque de révélation ----------
   `overflow:hidden` rogne les jambages (j, g, p) et les accents d'Anton.
   Le padding leur redonne de la place, la marge négative annule l'effet
   sur la mise en page. */

@keyframes rise {
  from {transform:translateY(120%)}
  to   {transform:translateY(0)}
}
.rv{
  display:block;overflow:hidden;
  padding-bottom:.14em;margin-bottom:-.14em;
  /* dont clip button outline bordder*/
  &:has(.btn:is(:hover, :active, :focus-visible)) {overflow: visible;}
}
@media (prefers-reduced-motion: no-preference) {
  .rv__i{
    display: block;
    transform: translateY(0);
    will-change: transform;
    animation:rise var(--ease-reveal) both;
    animation-duration:var(--rise-dur);
    animation-timeline: --hero-mod;
    .rv--1>&{animation-range:entry 30% entry 62%}
    .rv--2>&{animation-range:entry 34% entry 72%}
    .rv--3>&{animation-range:entry 42% entry 78%}
    .rv--4>&{animation-range:entry 48% entry 84%}
    .rv--5>&{animation-range:entry 52% entry 88%}
  }
  .anim-onload {
    .rv__i {animation-timeline:auto; }
    .rv--1 .rv__i{animation-delay:.15s}
    .rv--2 .rv__i{animation-delay:.30s}
    .rv--3 .rv__i{animation-delay:.50s}
    .rv--4 .rv__i{animation-delay:.60s}
    .rv--5 .rv__i{animation-delay:.70s}
  }
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .anim-onload .rv__i {
            animation-name: rise;
            animation-duration: var(--rise-dur);
            animation-timing-function: var(--ease-reveal);
            animation-fill-mode: both;
            animation-timeline: auto;
        }
    }
}

@keyframes veil{from{opacity:.78}to{opacity:1}}
@keyframes par{
  from{transform:translateY(var(--par-shift)) scale(var(--par-scale))}
  to  {transform:translateY(calc(-1 * var(--par-shift))) scale(var(--par-scale))}
}

@media (prefers-reduced-motion: no-preference) {
  /*@supports (animation-timeline: view()) {*/

    .para-bg-image{
      view-timeline-name: --hero-mod;
      view-timeline-axis: block;
      >.img-para {
        will-change: transform;

        animation: par linear both;
        animation-timeline: --hero-mod;
        animation-range: cover 0% cover 100%;
      }
      >.img-overlay {
        animation: veil linear both;
        animation-timeline: --hero-mod;
        animation-range: cover 0% cover 50%;
      }
    }
    .page-header.bg-image{
      .rv--1 .rv__i {
          animation-range: entry 30% entry 62%;
        }
    }
  /*}*:
}

/* ------------- accordeons -------- */
:root {
  interpolate-size: allow-keywords;
}

details {
  --acc-dur:200ms;
  &::details-content {

    height: 0;
    overflow: clip;
    opacity: 0;

    transition:
      height var(--acc-dur) ease,
      opacity var(--acc-dur) ease,
      content-visibility var(--acc-dur) allow-discrete;
  }

  &[open]::details-content {height: auto; opacity: 1; }
}
/* --------- gallery --------------*/

.animate__delay-1 {}
.animate__delay-2 {animation-delay: 90ms}
.animate__delay-3 {animation-delay: 180ms}