/* Progressive enhancement: the existing image, crop and layout remain canonical. */
body.idylle-fx-ready[data-page="home"] .idylle-fx-canvas {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
  contain: strict;
}
body.idylle-fx-ready[data-page="home"] .hero-copy > * {
  animation: idylle-fx-arrive 1s cubic-bezier(.22,.61,.36,1) both;
}
body.idylle-fx-ready[data-page="home"] .hero-copy > :nth-child(2) { animation-delay: .08s; }
body.idylle-fx-ready[data-page="home"] .hero-copy > :nth-child(3) { animation-delay: .18s; }
body.idylle-fx-ready[data-page="home"] .hero-copy > :nth-child(4) { animation-delay: .28s; }
body.idylle-fx-ready[data-page="home"] .hero-copy > :nth-child(5) { animation-delay: .38s; }
body.idylle-fx-ready[data-page="home"] .idylle-fx-reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity .85s ease, transform 1s cubic-bezier(.22,.61,.36,1), clip-path 1.05s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
}
body.idylle-fx-ready[data-page="home"] .idylle-fx-heading {
  transform: translate3d(0, 25px, 0);
}
body.idylle-fx-ready[data-page="home"] .idylle-fx-reveal.idylle-fx-visible {
  opacity: 1;
  transform: none;
  clip-path: inset(-6px -6px);
}
body.idylle-fx-ready[data-page="home"] .idylle-fx-photo { opacity: 0; }
body.idylle-fx-ready[data-page="home"] .idylle-fx-photo.idylle-fx-photo-visible {
  animation: idylle-fx-photo-arrive 1.6s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: var(--photo-delay, 0ms);
  transform-origin: center;
}
@keyframes idylle-fx-photo-arrive {
  from { opacity: 0; transform: translate3d(var(--photo-shift, 0px), 18px, 0) scale(1.08); clip-path: inset(0 0 9% 0); }
  to { opacity: 1; transform: translate3d(0, var(--photo-pan-y, 0px), 0) scale(var(--photo-rest-scale, 1)); clip-path: inset(0); }
}
body.idylle-fx-ready[data-page="home"] .idylle-fx-photo-settled,
body.idylle-fx-ready[data-page="home"] .idylle-fx-photo.idylle-fx-photo-settled {
  opacity: 1;
  animation: none;
  clip-path: none;
  transform: translate3d(0, var(--photo-pan-y, 0px), 0) scale(var(--photo-rest-scale, 1));
  transition: transform .18s ease-out;
}
@keyframes idylle-fx-arrive {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.idylle-fx-ready[data-page="home"] .idylle-fx-canvas { display: none; }
  body.idylle-fx-ready[data-page="home"] .hero-copy > * { animation: none; }
  body.idylle-fx-ready[data-page="home"] .idylle-fx-photo,
  body.idylle-fx-ready[data-page="home"] .idylle-fx-photo.idylle-fx-photo-visible,
  body.idylle-fx-ready[data-page="home"] .idylle-fx-photo-settled {
    opacity: 1;
    transform: none;
    clip-path: none;
    animation: none;
    transition: none;
  }
  body.idylle-fx-ready[data-page="home"] .idylle-fx-reveal {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}

/* Keep the photograph reveal inside its editorial frame. */
body.idylle-fx-ready[data-page="home"] :is(.essence-visual, .card-art, .social-photos figure) { overflow: hidden; }

/* Quiet detail on interactive links; no movement while reading body copy. */
body.idylle-fx-ready[data-page="home"] :is(.button, .card-link, .text-link, .footer-link) > span {
  display: inline-block;
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.idylle-fx-ready[data-page="home"] :is(.button, .card-link, .text-link, .footer-link):is(:hover, :focus-visible) > span {
    transform: translate3d(3px, -3px, 0);
  }
}
@media (max-width: 999px) {
  body.idylle-fx-ready[data-page="home"] .idylle-fx-photo-settled,
  body.idylle-fx-ready[data-page="home"] .idylle-fx-photo.idylle-fx-photo-settled { transform: none; }
}

/* Brand manifesto stays readable even if its entrance is interrupted. */
body.idylle-fx-ready[data-page="home"] .manifesto > * {
  opacity: 1;
  clip-path: none;
}

/* Small screens keep photo entrances quiet and text readable without scroll delay. */
@media (max-width: 700px) {
  body.idylle-fx-ready[data-page="home"] .idylle-fx-reveal {
    transform: translate3d(0, 10px, 0);
    transition-duration: .5s, .6s, .6s;
    transition-delay: 0ms;
  }
  body.idylle-fx-ready[data-page="home"] .idylle-fx-reveal.idylle-fx-visible {
    transform: none;
  }
  body.idylle-fx-ready[data-page="home"] .idylle-fx-photo.idylle-fx-photo-visible {
    animation-duration: .9s;
    animation-delay: 0ms;
    --photo-shift: 0px;
    --photo-pan-y: 0px;
    --photo-rest-scale: 1;
  }
  body.idylle-fx-ready[data-page="home"] .manifesto > * {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  body.idylle-fx-ready[data-page="home"] .idylle-fx-reveal,
  body.idylle-fx-ready[data-page="home"] .idylle-fx-photo.idylle-fx-photo-visible {
    opacity: 1;
    transform: none;
    clip-path: none;
    animation: none;
    transition: none;
  }
}

/* Reveal the completed render without flashing the static fallback first. */
html.idylle-hero-pending .hero-image,html.idylle-hero-rendered .hero-image{opacity:0}
/* The hero arrives in place, without translating the image or copy. */
body.idylle-fx-ready[data-page="home"] .hero-copy>*{animation-name:idylle-hero-fade}
body.idylle-fx-ready[data-page="home"] .idylle-fx-canvas{animation:idylle-hero-fade .24s ease-out both}
@keyframes idylle-hero-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){body.idylle-fx-ready[data-page="home"] .hero-copy>*{animation:none}}