/* Le formulaire entre depuis la droite une seule fois, lorsque sa place arrive à l'écran. */
@media (prefers-reduced-motion: no-preference) {
  #contact { position: relative; overflow-x: clip; }
  .contact-motion-ready #contactForm {
    transition: transform 1.2s cubic-bezier(.18,.76,.24,1), opacity .9s ease, visibility 0s linear;
  }
  .contact-motion-ready #contactForm:not(.form-arrived) {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(calc(100vw + 100%),0,0);
    pointer-events: none;
  }
  .contact-motion-ready #contactForm.form-arrived {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0,0,0);
  }
}

/* Les photos se rassemblent en planète, puis gagnent leur place dans la galerie. */
@media (prefers-reduced-motion: no-preference) {
  html.gallery-scroll-locked,html.gallery-scroll-locked body {
    overflow: hidden;
    overscroll-behavior: none;
  }
  html.gallery-scroll-locked { scrollbar-gutter: stable; overflow-anchor: none; }
  .gallery-motion-ready .portfolio { position: relative; overflow-x: clip; }
  .gallery-stage { display: none; }
  .gallery-motion-ready .gallery-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: max(760px,85svh);
    perspective: 900px;
    isolation: isolate;
  }
  .gallery-motion-ready:not(.gallery-releasing) #gallery { display: none; }
  .planet-shell {
    width: 270px;
    height: 270px;
    transform: scale(.55);
    transform-style: preserve-3d;
    will-change: transform;
  }
  .photo-planet {
    width: 270px;
    height: 270px;
    position: relative;
    transform: rotateX(-10deg) rotateY(0deg);
    transform-style: preserve-3d;
    will-change: transform;
  }
  .planet-tile {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--tile-width,60px);
    height: calc(var(--tile-width,60px) * .75);
    margin-left: calc(var(--tile-width,60px) * -.5);
    margin-top: calc(var(--tile-width,60px) * -.375);
    overflow: hidden;
    border-radius: 4px;
    border: 0;
    background: transparent;
    box-shadow: 0 7px 18px #172e2826;
    backface-visibility: hidden;
  }
  .planet-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .gallery-stage.spinning .planet-shell { animation: planet-growth 1.27s cubic-bezier(.18,.72,.3,1) both; }
  .gallery-stage.spinning .photo-planet { animation: planet-spin 1.27s cubic-bezier(.2,.55,.45,1) both; }
  .gallery-releasing .gallery-stage { opacity: 0; transition: opacity .42s ease; }
  @keyframes planet-growth {
    from { transform: scale(var(--planet-start-scale,.55)); }
    to { transform: scale(var(--planet-final-scale,1.2)); }
  }
  @keyframes planet-spin {
    from { transform: rotateX(-10deg) rotateY(0deg); }
    to { transform: rotateX(-10deg) rotateY(320deg); }
  }
}

/* Deux panneaux verts révèlent la terrasse depuis le centre, selon le scroll. */
@media (prefers-reduced-motion: no-preference) {
  #terrasse.terrace-curtain { height: calc(100svh + max(200svh, 2640px - 200svh)); min-height: 0; overflow: visible; }
  .terrace-pin { position: sticky; top: 0; height: 100svh; min-height: 660px; overflow: hidden; isolation: isolate; }
  .terrace-pin::before,.terrace-pin::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: calc(50% + 1px);
    background: var(--green); z-index: 2; pointer-events: none; will-change: transform;
  }
  .terrace-pin::before { left: 0; transform: translate3d(calc(var(--curtain-opening,0) * -100%),0,0); }
  .terrace-pin::after { right: 0; transform: translate3d(calc(var(--curtain-opening,0) * 100%),0,0); }
  #terrasse.terrace-curtain .scene-copy {
    z-index: 3; left: 50%; top: 50%; bottom: auto;
    width: min(700px,84%); transform: translate(-50%,-50%);
  }
  #terrasse.terrace-curtain .scene-footer { z-index: 3; opacity: var(--curtain-opening,0); }
}

/* La miniature d’escalier s’ouvre jusqu’à remplir la page. */
@media (prefers-reduced-motion: no-preference) {
  #escalier.staircase-reveal { height: calc(100svh + max(200svh, 2640px - 200svh)); min-height: 0; overflow: visible; }
  .staircase-pin { position: sticky; top: 0; height: 100svh; min-height: 660px; overflow: hidden; isolation: isolate; background: #fff; }
  #escalier.staircase-reveal .visual,.staircase-pin .veil { transform: scale(var(--staircase-scale,.025)) !important; transform-origin: center; will-change: transform; }
  .staircase-pin .scene-copy,.staircase-pin .scene-footer {
    color: color-mix(in srgb, #fff calc(var(--staircase-copy,0) * 100%), var(--green));
  }
  .staircase-pin .scene-copy h2 { color: inherit; text-shadow: none; }
  .staircase-pin .scene-copy h2 em,.staircase-pin .scene-copy .eyebrow {
    color: color-mix(in srgb, var(--editorial-bronze-light) calc(var(--staircase-copy,0) * 100%), #765c38);
    text-shadow: none;
  }
  .staircase-pin .scene-copy { z-index: 2; }
}

@media (prefers-reduced-motion: no-preference) {
  #terrasse.terrace-curtain.chapter-motion-complete,
  #escalier.staircase-reveal.chapter-motion-complete { height: 100svh; min-height: 660px; }
  .chapter-motion-complete .terrace-pin,
  .chapter-motion-complete .staircase-pin { position: relative; top: auto; }
}

/* Zoom discret des chapitres, après leurs éventuels effets de première visite. */
@media (prefers-reduced-motion: no-preference) {
  .scene:not(#foret):not(.terrace-curtain):not(.staircase-reveal) .visual,
  .chapter-motion-complete .visual { transition: transform .25s ease-out; }
  #escalier.staircase-reveal.chapter-motion-complete .visual {
    transform: translateX(var(--chapter-photo-shift,0%)) scale(var(--chapter-photo-zoom,1)) !important;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .terrace-pin,.staircase-pin { min-height: 0; }
  #terrasse.terrace-curtain.chapter-motion-complete,
  #escalier.staircase-reveal.chapter-motion-complete { min-height: 0; }
  #terrasse.terrace-curtain .scene-copy { width: 86%; }
  .gallery-stage { touch-action: pan-y; }
}

@media (max-width: 760px) {
  #filters { gap: 6px; }
  #filters button { padding: 9px 11px; font-size: 11px; }
}