/* MIPPP custom styles — effects Tailwind utilities cannot express.
   Ported from the reference pages (html_pages.zip). Tailwind utilities live in tailwind.css. */

/* Reveal on scroll (only hidden when JS is running, so content never disappears without JS).
   site.js removes the reveal classes once the entrance has played, so hover transitions
   on the same element (cards lifting, border/shadow changes) are not slowed or delayed. */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .1s !important; } .reveal-d2 { transition-delay: .2s !important; } .reveal-d3 { transition-delay: .3s !important; }

/* Hero carousel */
.slide { opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 1s; }
.slide.active { opacity: 1; visibility: visible; }
.slide .slide-img { transform: scale(1.08); transition: transform 7s ease-out; }
.slide.active .slide-img { transform: scale(1); }
.slide .slide-copy > *, .slide .slide-art { opacity: 0; transform: translateY(24px); transition: all .8s cubic-bezier(.2,.7,.2,1); }
.slide.active .slide-copy > *, .slide.active .slide-art { opacity: 1; transform: none; }
.slide.active .slide-copy > *:nth-child(2) { transition-delay: .15s } .slide.active .slide-copy > *:nth-child(3) { transition-delay: .3s } .slide.active .slide-copy > *:nth-child(4) { transition-delay: .45s }
.slide.active .slide-art { transition-delay: .25s; }
.dot.active .dot-fill { animation: progress 6s linear forwards; }
.is-paused .dot.active .dot-fill { animation-play-state: paused; }
.dot.active .dot-label { color: #fff; }

/* Decorative grid + navigation underline */
.grid-pattern { background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 48px 48px; }
.grid-pattern-dark { background-image: linear-gradient(rgba(14,38,80,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(14,38,80,.05) 1px, transparent 1px); background-size: 48px 48px; }
.nav-link::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: #0E9F98; transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }

/* Marquee rows (news & events) */
.fade-x { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track:hover, .marquee-track:focus-within { animation-play-state: paused; }

/* Inner-page sidebar */
.sub-link.active { background: #0E2650; color: #fff; }

/* Mobile menu details marker */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary .chev { transform: rotate(180deg); }

/* Rich text from admin (news / event bodies) */
.prose-mippp p { margin: 0 0 1.25rem; }
.prose-mippp p:last-child { margin-bottom: 0; }

/* Toast for sample links */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 90; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: all .35s cubic-bezier(.2,.7,.2,1); }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

:focus-visible { outline: 3px solid #2BB8B0; outline-offset: 3px; }
main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .marquee-wrap { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  header, footer, #toTop, .no-print { display: none !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}