/* Kids' Island — site public : animations de défilement unifiées (v1).
   Remplace les révélations .rv/.rvl/.rvr (tout d'un bloc, sans cascade) par trois entrées :
   1. « up »    : textes, titres — montée douce.
   2. « tile »  : cartes — arrivée givrée (flou + recul), pose, puis un reflet traverse la tuile.
   3. « image » : photos — le cadre s'ouvre et la photo se stabilise.
   Les blocs sombres (#spaces, #cta) s'ouvrent comme une fenêtre au rythme du défilement.
   Les sections pilotées par GSAP (groupes, piliers) ne sont pas touchées.
   « Réduire les animations » désactive tout : les éléments sont simplement visibles. */

:root{ --ki-rv-ease:cubic-bezier(.16,1,.3,1); }

.js-reveal [data-reveal]{ --reveal-delay:calc(var(--i,0) * 70ms); }

/* États de départ */
.js-reveal [data-reveal=up]:not(.is-in){ opacity:0; transform:translate3d(0,28px,0); }
.js-reveal [data-reveal=tile]:not(.is-in){ opacity:0; transform:translate3d(0,34px,0) scale(.965); filter:blur(14px); }
.js-reveal [data-reveal=image]:not(.is-in){ opacity:0; transform:scale(1.06); clip-path:inset(8% round 28px); }

/* Entrée */
.js-reveal [data-reveal].is-in:not(.is-done){ will-change:transform,opacity; }
.js-reveal [data-reveal=up].is-in:not(.is-done){
  transition:opacity .7s var(--ki-rv-ease) var(--reveal-delay), transform .9s var(--ki-rv-ease) var(--reveal-delay);
}
.js-reveal [data-reveal=tile].is-in:not(.is-done){
  will-change:transform,opacity,filter;
  transition:opacity .7s var(--ki-rv-ease) var(--reveal-delay), transform 1.05s var(--ki-rv-ease) var(--reveal-delay), filter .85s var(--ki-rv-ease) var(--reveal-delay);
}
.js-reveal [data-reveal=image].is-in:not(.is-done){
  transition:opacity .8s var(--ki-rv-ease) var(--reveal-delay), transform 1.4s var(--ki-rv-ease) var(--reveal-delay), clip-path 1.1s var(--ki-rv-ease) var(--reveal-delay);
}

/* Reflet des tuiles, dans leurs coins arrondis */
.js-reveal [data-reveal=tile][data-reveal-pos]{ position:relative; }
.js-reveal [data-reveal=tile]::after{
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:inherit; opacity:0;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.6) 50%,transparent 58%) no-repeat;
  background-size:280% 100%; background-position:120% 0;
}
.js-reveal [data-reveal=tile].is-in:not(.is-done)::after{ animation:ki-sheen 1.1s cubic-bezier(.4,0,.2,1) calc(var(--reveal-delay) + 220ms) both; }
.js-reveal [data-reveal=tile].is-done::after{ display:none; }
@keyframes ki-sheen{ 0%{ opacity:0; background-position:120% 0 } 18%{ opacity:1 } 100%{ opacity:0; background-position:-20% 0 } }
/* Sur fond sombre (espaces), reflet doré plus discret */
#spaces [data-reveal=tile]::after{ background-image:linear-gradient(105deg,transparent 42%,rgba(246,191,89,.38) 50%,transparent 58%); }

/* Les anciennes classes de révélation ne masquent plus rien : la nouvelle couche prend le relais. */
.js-reveal .rv, .js-reveal .rvl, .js-reveal .rvr{ opacity:1; transform:none; transition:none; }
.js-reveal .loc-route.rv.in:hover, .js-reveal .loc-route:hover{ transform:translateY(-6px); box-shadow:0 16px 40px rgba(244,125,96,.12); }

/* ---------- Fenêtres : les blocs sombres s'ouvrent au défilement ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .js-reveal #spaces, .js-reveal #cta{
      animation:ki-window linear both; animation-timeline:view(); animation-range:entry 0 entry 70vh;
    }
  }
}
@keyframes ki-window{ from{ clip-path:inset(0 6% round 48px) } to{ clip-path:inset(0 0 round 0) } }
@media (max-width:720px){ @keyframes ki-window{ from{ clip-path:inset(0 4% round 28px) } to{ clip-path:inset(0 0 round 0) } } }

/* ---------- En-tête : verre plus dense dès que la page défile ---------- */
#nav.solid{
  background:rgba(255,255,255,.74) !important;
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 12px 32px -22px rgba(26,46,41,.35) !important;
}

/* ---------- Mobile immersif (module « kim ») : même vocabulaire givré ---------- */
@media (max-width:900px){
  html.kim .kim-r{ filter:blur(8px); transition:opacity .75s cubic-bezier(.22,.7,.24,1), transform .75s cubic-bezier(.22,.7,.24,1), filter .6s ease; }
  html.kim .kim-r.kim-in{ filter:blur(0); }
}

/* ---------- Mode calme ---------- */
@media (prefers-reduced-motion:reduce){
  .js-reveal [data-reveal]:not(.is-in){ opacity:1; transform:none; filter:none; clip-path:none; }
  .js-reveal [data-reveal]::after{ display:none; }
  .js-reveal #spaces, .js-reveal #cta{ animation:none; clip-path:none; }
  html.kim .kim-r{ filter:none; }
}