/* Motion layer — subtle, calm animation for the Matrona site */

/* 1. Hero: soft ambient light over the first slide, without moving sacred imagery. */
.original-shade{overflow:hidden}
.original-shade::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 14%,rgba(238,220,170,.16) 0,rgba(238,220,170,.08) 11%,rgba(238,220,170,0) 30%);
  opacity:.58;
  animation:matrona-hero-glow 8s ease-in-out infinite;
}
@keyframes matrona-hero-glow{
  0%,100%{opacity:.42;transform:scale(1)}
  50%{opacity:.72;transform:scale(1.035)}
}

/* 2. About photo: a slow camera-like settle as the block appears. */
.home-page .about-photo>img{
  will-change:transform;
  transition:transform 1.45s cubic-bezier(.22,.61,.36,1);
}
.motion .home-page .about-visual.pending .about-photo>img{transform:scale(1.035)}
.motion .home-page .about-visual.seen .about-photo>img{transform:scale(1)}

/* 3. Quote plaque and its branch appear slightly after the image. */
.home-page .about-note{
  transition:opacity .7s ease .18s,transform .78s cubic-bezier(.22,.61,.36,1) .18s,box-shadow .35s ease;
}
.motion .home-page .about-visual.pending .about-note{
  opacity:0;
  transform:translateY(16px);
}
.motion .home-page .about-visual.seen .about-note{
  opacity:1;
  transform:translateY(0);
}
.home-page .about-note-branch{
  transform-origin:86% 100%;
  animation:matrona-branch-sway 7.5s ease-in-out infinite;
}
@keyframes matrona-branch-sway{
  0%,100%{transform:rotate(-.6deg) translateY(0)}
  50%{transform:rotate(1deg) translateY(-1px)}
}

/* 4. Matrona portrait: only the frame/light reacts on hover. */
@media (hover:hover) and (pointer:fine){
  .home-page .matrona-portrait{
    transition:transform .35s ease,filter .35s ease;
  }
  .home-page .matrona-portrait img{
    transition:border-color .35s ease,box-shadow .35s ease;
  }
  .home-page .matrona-portrait:hover{
    transform:translateY(-2px);
    filter:brightness(1.015);
  }
  .home-page .matrona-portrait:hover img{
    border-color:#9a7847;
    box-shadow:0 10px 28px rgba(154,120,71,.16);
  }
}

/* 5. Schedule cards: restrained lift, border and time accent. */
.service-card{
  transition:transform .34s cubic-bezier(.22,.61,.36,1),border-color .34s ease,box-shadow .34s ease;
}
.service-time{transition:color .3s ease}
.motion .service-card.pending{opacity:0;transform:translateY(18px)}
.motion .service-card.seen{opacity:1;transform:translateY(0)}
.motion .service-card:nth-child(2){transition-delay:.07s}
.motion .service-card:nth-child(3){transition-delay:.14s}
@media (hover:hover) and (pointer:fine){
  .service-card:hover{
    transform:translateY(-4px);
    border-color:#9daf9d;
    box-shadow:0 14px 34px rgba(32,63,54,.08);
  }
  .service-card:not(.featured):hover .service-time{color:#806033}
  .service-card.featured:hover .service-time{color:#dac49b}
}

/* 6. Gallery: slow image zoom + cleaner caption reveal. */
.gallery-photo{
  transition:transform .35s ease,box-shadow .35s ease;
}
.gallery-photo img{
  transition:transform .85s cubic-bezier(.22,.61,.36,1),filter .5s ease;
}
.motion .gallery-photo.pending{opacity:0;transform:translateY(16px)}
.motion .gallery-photo.seen{opacity:1;transform:translateY(0)}
.motion .gallery-photo:nth-child(2){transition-delay:.07s}
.motion .gallery-photo:nth-child(3){transition-delay:.14s}
@media (hover:hover) and (pointer:fine){
  .gallery-photo:hover{box-shadow:0 16px 38px rgba(8,28,22,.18)}
  .gallery-photo:hover img{transform:scale(1.045);filter:brightness(1.035)}
  .gallery-caption{transition:opacity .35s ease,transform .35s ease}
  .gallery-photo:not(:hover) .gallery-caption{opacity:.84;transform:translateY(5px)}
  .gallery-photo:hover .gallery-caption{opacity:1;transform:translateY(0)}
}

/* 7. Buttons and text links: arrows visibly move on hover. */
.about-copy .arrow-link .icon,
.section-top .arrow-link .icon,
.service-link .icon,
.original-schedule-button .icon{
  transition:transform .28s cubic-bezier(.22,.61,.36,1),color .28s ease;
  will-change:transform;
}

@keyframes matrona-arrow-right{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(6px)}
}

@keyframes matrona-arrow-external{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(4px,-4px)}
}

@media (hover:hover) and (pointer:fine){
  .about-copy .arrow-link:hover .icon,
  .service-link:hover .icon,
  .original-schedule-button:hover .icon{
    animation:matrona-arrow-right .72s ease-in-out infinite;
  }

  .section-top .arrow-link:hover .icon{
    animation:matrona-arrow-external .78s ease-in-out infinite;
  }
}

/* 8. Section headings: eyebrow first, heading second. */
.motion .section-top.reveal.pending,
.motion .about-copy.reveal.pending{
  opacity:1;
  transform:none;
}
.motion .section-top .eyebrow,
.motion .section-top h2,
.motion .section-top>.text-link,
.motion .about-copy>.eyebrow,
.motion .about-copy .about-heading-row,
.motion .about-copy>.lead,
.motion .about-copy>.text-link{
  transition:opacity .62s ease,transform .68s cubic-bezier(.22,.61,.36,1);
}
.motion .section-top.pending .eyebrow,
.motion .section-top.pending h2,
.motion .section-top.pending>.text-link,
.motion .about-copy.pending>.eyebrow,
.motion .about-copy.pending .about-heading-row,
.motion .about-copy.pending>.lead,
.motion .about-copy.pending>.text-link{
  opacity:0;
  transform:translateY(13px);
}
.motion .section-top.seen .eyebrow,
.motion .about-copy.seen>.eyebrow{transition-delay:.02s}
.motion .section-top.seen h2,
.motion .about-copy.seen .about-heading-row{transition-delay:.12s}
.motion .section-top.seen>.text-link,
.motion .about-copy.seen>.lead{transition-delay:.22s}
.motion .about-copy.seen>.text-link{transition-delay:.3s}

/* 9. Help panel and footer reveal. */
.help-panel{
  transition:opacity .72s ease,transform .78s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease;
}
.motion .help-panel.pending{opacity:0;transform:translateY(18px)}
.motion .help-panel.seen{opacity:1;transform:translateY(0)}

.footer .church-mark{
  transition:opacity .9s ease,transform .95s cubic-bezier(.22,.61,.36,1);
  transform-origin:50% 100%;
}
.motion .footer.pending .church-mark{opacity:0;transform:translateY(10px) scale(.96)}
.motion .footer.seen .church-mark{opacity:1;transform:translateY(0) scale(1)}

/* Keep all motion respectful and optional. */
@media (prefers-reduced-motion:reduce){
  .original-shade::after,
  .home-page .about-note-branch{animation:none!important}
  .home-page .about-photo>img,
  .home-page .about-note,
  .home-page .matrona-portrait,
  .home-page .matrona-portrait img,
  .service-card,
  .service-time,
  .gallery-photo,
  .gallery-photo img,
  .gallery-caption,
  .arrow-link .icon,
  .service-link .icon,
  .original-schedule-button .icon,
  .button .icon,
  .section-top .eyebrow,
  .section-top h2,
  .about-copy>*,
  .help-panel,
  .footer .church-mark{
    transition:none!important;
    transform:none!important;
  }
  .motion .service-card.pending,
  .motion .gallery-photo.pending,
  .motion .help-panel.pending,
  .motion .footer.pending .church-mark,
  .motion .section-top.pending *,
  .motion .about-copy.pending *{
    opacity:1!important;
    transform:none!important;
  }
}