/* ==========================================================================
   ROBERTA ARMANI — animations.css
   Restrained motion. Everything is disabled under prefers-reduced-motion.
   ========================================================================== */

/* --------- Scroll reveal ---------
   Elements start visible by default; .js-on (set by main.js only when
   IntersectionObserver is available) opts them into the reveal. This makes a
   blank page impossible if JavaScript fails to run.                     */
.reveal{opacity:1;transform:none}

html.js-on .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .82s var(--ease),transform .82s var(--ease);
  will-change:opacity,transform;
}
html.js-on .reveal.is-in{opacity:1;transform:none}

html.js-on .reveal--fade{transform:none}
html.js-on .reveal--right{transform:translateX(-20px)}
html.js-on .reveal--right.is-in{transform:none}

/* Staggering (applies to direct children marked .reveal) */
html.js-on .stagger > .reveal:nth-child(1){transition-delay:0ms}
html.js-on .stagger > .reveal:nth-child(2){transition-delay:80ms}
html.js-on .stagger > .reveal:nth-child(3){transition-delay:160ms}
html.js-on .stagger > .reveal:nth-child(4){transition-delay:240ms}
html.js-on .stagger > .reveal:nth-child(5){transition-delay:320ms}
html.js-on .stagger > .reveal:nth-child(6){transition-delay:400ms}

/* --------- Image reveal inside plates --------- */
html.js-on .plate__frame img{
  opacity:0;
  transform:scale(1.012);
  transition:opacity .95s var(--ease),transform 1.15s var(--ease);
}
html.js-on .plate.is-in .plate__frame img,
html.js-on .plate__frame img.is-loaded{opacity:1;transform:none}
/* Safety net: if the observer never fires, show the image anyway */
html.js-on .plate__frame img{animation:ra-imgsafe 0s linear 2.5s forwards}
@keyframes ra-imgsafe{to{opacity:1;transform:none}}

/* --------- Hover: gentle scale on plate imagery --------- */
.plate--hover .plate__frame img{transition:transform .9s var(--ease)}
.plate--hover:hover .plate__frame img{transform:scale(1.03)}

/* --------- Access page --------- */
@keyframes ra-shake{
  0%,100%{transform:translateX(0)}
  22%{transform:translateX(-7px)}
  44%{transform:translateX(6px)}
  66%{transform:translateX(-4px)}
  84%{transform:translateX(2px)}
}
@keyframes ra-rise{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}
body.access .access__grid > *{animation:ra-rise .85s var(--ease) both}
body.access .access__grid > *:nth-child(2){animation-delay:.14s}
body.access .access__head,body.access .access__foot{animation:ra-rise .8s var(--ease) .28s both}

/* --------- Mobile panel link cascade --------- */
.navpanel.is-open .navpanel__item{
  opacity:0;transform:translateY(12px);
  animation:ra-rise .5s var(--ease) forwards;
}
.navpanel.is-open .navpanel__item:nth-child(1){animation-delay:.05s}
.navpanel.is-open .navpanel__item:nth-child(2){animation-delay:.10s}
.navpanel.is-open .navpanel__item:nth-child(3){animation-delay:.15s}
.navpanel.is-open .navpanel__item:nth-child(4){animation-delay:.20s}
.navpanel.is-open .navpanel__item:nth-child(5){animation-delay:.25s}
.navpanel.is-open .navpanel__item:nth-child(6){animation-delay:.30s}
.navpanel.is-open .navpanel__item:nth-child(7){animation-delay:.35s}

/* --------- Page-entry fade for internal pages --------- */
html.js-on body.page-fade{animation:ra-pagein .55s var(--ease) both}
@keyframes ra-pagein{from{opacity:0}to{opacity:1}}

/* ==========================================================================
   REDUCED MOTION — everything resolves to its final state instantly
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  html.js-on .reveal,
  html.js-on .reveal--right{opacity:1!important;transform:none!important}
  html.js-on .plate__frame img{opacity:1!important;transform:none!important}
  .plate--hover:hover .plate__frame img{transform:none}
  body.access .access__grid > *,
  body.access .access__head,
  body.access .access__foot,
  .navpanel.is-open .navpanel__item{opacity:1!important;transform:none!important}
}

/* Below the stacking breakpoint the "from the right" reveal would push a
   now-full-width element past the left edge, so fall back to the vertical one. */
@media (max-width:1140px){
  html.js-on .reveal--right{transform:translateY(22px)}
  html.js-on .reveal--right.is-in{transform:none}
}