/* STCOA motion system. Load LAST (after common.css, inner.css). Used by every page.
   Animates transform + opacity only (one exception: the card hover shadow, see .pc-card).
   No parallax / sticky / fixed / scroll-linked effects, so it is safe inside a Wix iframe.
   Content is visible by default: .reveal only hides things once js/motion.js has added html.js. */

@keyframes stcoaFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes stcoaRevealUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes stcoaDrift { from { transform: scale(1); } to { transform: scale(1.06); } }

/* 1. HERO ENTRANCE: label/headline/subtext/buttons, staggered .2s */
.hero-content > *, .inner-hero-content > * { animation: stcoaFadeUp .8s ease-out backwards; }
.hero-content > :nth-child(2), .inner-hero-content > :nth-child(2) { animation-delay: .2s; }
.hero-content > :nth-child(3), .inner-hero-content > :nth-child(3) { animation-delay: .4s; }
.hero-content > :nth-child(4), .inner-hero-content > :nth-child(4) { animation-delay: .6s; }
.hero-content > :nth-child(n+5), .inner-hero-content > :nth-child(n+5) { animation-delay: .8s; }

/* 2. HERO IMAGE DRIFT: the photo sits on its own layer, the hero clips it */
.hero, .inner-hero { overflow: hidden; }
.hero-img { animation: stcoaDrift 20s ease-in-out infinite alternate; will-change: transform; }
.inner-hero { isolation: isolate; }
.inner-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: inherit;            /* same photo + shade the page sets on .inner-hero */
  animation: stcoaDrift 20s ease-in-out infinite alternate; will-change: transform;
}

/* 3. CARD HOVER */
body .pc-card { transition: transform .3s ease, box-shadow .3s ease, background .2s, border-color .2s; }
body .pc-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(6,24,40,.4); }
.pc-media { overflow: hidden; }
.pc-media img { transition: transform .5s ease; }
.pc-card:hover .pc-media img { transform: scale(1.05); }
.pc-icon { transition: transform .25s ease; }
.pc-card:hover .pc-icon { transform: scale(1.08); }
.service-item, .highlights__item { transition: transform .25s ease; }

/* 4. BUTTONS: lift 2px, arrow slides 4px */
body .btn-primary, body .btn-outline, body .btn-gold-outline, body .btn-outline-navy, body .btn-navy,
body .btn-heart, body .btn-support, body .who-btn {
  transition: transform .2s ease, filter .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary:hover, .btn-outline:hover, .btn-gold-outline:hover, .btn-outline-navy:hover, .btn-navy:hover,
.btn-heart:hover, .btn-support:hover, .who-btn:hover { transform: translateY(-2px); }
.btn-primary:active, .btn-outline:active, .btn-gold-outline:active, .btn-outline-navy:active, .btn-navy:active,
.btn-heart:active, .btn-support:active, .who-btn:active { transform: none; }
.ico-arrow, .arr { transition: transform .2s ease; }
.arr { display: inline-block; }                       /* wraps a text arrow (→ ↗), added by js/motion.js */
a:hover .ico-arrow, a:hover .arr { transform: translateX(4px); }

/* 5. SCROLL REVEAL: hidden only after JS has run, so nothing is ever blank without it */
.js .reveal { opacity: 0; }
.js .reveal.in { opacity: 1; animation: stcoaRevealUp .7s ease-out var(--d, 0s) backwards; }

/* 7. DATE BADGES: pop-in (applies if a page uses these classes; none do today) */
@keyframes stcoaPop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
.js .in .date-badge, .js .in .news-date-box { animation: stcoaPop .5s ease-out backwards; }

/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .pc-card:hover, .pc-card:hover .pc-media img, .btn-primary:hover, .btn-outline:hover, .btn-gold-outline:hover,
  .btn-outline-navy:hover, .btn-navy:hover, .btn-heart:hover, .btn-support:hover, .who-btn:hover,
  a:hover .ico-arrow, a:hover .arr { transform: none !important; }
}