/* CANA site refresh (Oct 2026): round leader photos, ministry photo banners, giving logos, gentle animations.
   Loaded after the main stylesheet from layouts/app.blade.php. */

/* ---------- Leadership: round photos, no square card ---------- */
.leader-card { background: transparent; border-top: 0; padding: 12px 10px; }
.leader-avatar {
  width: 170px; height: 170px; margin-bottom: 20px;
  background: var(--navy);
  box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--gold), 0 18px 40px rgba(20, 45, 78, .25);
  transition: transform .4s ease, box-shadow .4s ease;
}
.leader-card:hover .leader-avatar { transform: scale(1.04); box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--crimson), 0 22px 50px rgba(20, 45, 78, .32); }
.leader-avatar img { object-position: center; }

/* ---------- Ministries: photo banners that shuffle ---------- */
.min-banner-inner.fx-photos { position: relative; overflow: hidden; background: var(--navy) !important; }
.fx-slides { position: absolute; inset: 0; }
.fx-slides img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06); transition: opacity 1.4s ease, transform 7s ease-out;
}
.fx-slides img.on { opacity: 1; transform: scale(1); }
.min-banner-inner.fx-photos::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(10, 20, 40, .78) 0%, rgba(10, 20, 40, .25) 45%, transparent 70%);
}
.min-banner-inner.fx-photos .min-identity { position: relative; z-index: 2; }

/* Children's classes list */
.fx-classes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0 6px; }
.fx-class { background: var(--cream); border-left: 3px solid var(--gold); border-radius: 10px; padding: 12px 14px; }
.fx-class strong { display: block; color: var(--navy); font-size: 15px; }
.fx-class span { color: var(--crimson); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Give: bank logos and account rows ---------- */
.fx-give-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 26px; max-width: 1100px; margin: 0 auto; }
.fx-account { background: rgba(255, 255, 255, .07); border: 1px solid rgba(201, 146, 42, .3); border-radius: 12px; padding: 16px 18px; margin-top: 12px; }
.fx-account-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fx-bank-logo { height: 30px; width: auto; max-width: 96px; object-fit: contain; background: #fff; border-radius: 6px; padding: 4px 7px; }
.fx-account-label { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-light); }
.fx-account-number { display: block; font-family: 'Cormorant Garamond', serif; font-size: 23px; font-weight: 700; color: #fff; letter-spacing: .08em; }
.fx-account-name { display: block; margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, .6); letter-spacing: .05em; }

/* ---------- YouTube call-to-action ---------- */
.fx-youtube-cta { text-align: center; margin: 40px auto 0; }
.fx-youtube-cta a { display: inline-flex; align-items: center; gap: 10px; }
.fx-youtube-cta svg { width: 22px; height: 22px; }

/* ---------- Animations ---------- */
@keyframes fx-logo-in { 0% { opacity: 0; transform: scale(.6) rotate(-8deg); } 70% { opacity: 1; transform: scale(1.08) rotate(1deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes fx-glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(201, 146, 42, 0)); } 50% { filter: drop-shadow(0 0 10px rgba(201, 146, 42, .55)); } }
@keyframes fx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes fx-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } 45% { transform: scale(1.12); } 60% { transform: scale(1); } }
@keyframes fx-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

body.fx-home .nav-logo img { animation: fx-logo-in 1.1s cubic-bezier(.2, .8, .2, 1) both, fx-glow 4s ease-in-out 1.4s infinite; }
.nav-logo img { transition: transform .3s ease; }
.nav-logo:hover img { transform: scale(1.06); }

.service-icon, .serv-icon, .vmp-icon, .program-icon { display: inline-block; animation: fx-float 4.5s ease-in-out infinite; }
.service-item:nth-child(2) .service-icon, .serv-card:nth-child(2) .serv-icon, .vmp-card:nth-child(2) .vmp-icon, .program-item:nth-child(2) .program-icon { animation-delay: .6s; }
.service-item:nth-child(3) .service-icon, .serv-card:nth-child(3) .serv-icon, .program-item:nth-child(3) .program-icon { animation-delay: 1.2s; }
.service-item:nth-child(4) .service-icon, .serv-card:nth-child(4) .serv-icon, .program-item:nth-child(4) .program-icon { animation-delay: 1.8s; }
.fx-give-icon { display: inline-block; animation: fx-beat 2.4s ease-in-out infinite; transform-origin: center; }
.social-btn { transition: background .2s, transform .2s; }
.social-btn:hover { transform: translateY(-3px); }

/* Scroll reveal: hidden only when the script is running, so content always shows without it */
html.fx-js .fx-reveal { opacity: 0; }
html.fx-js .fx-reveal.fx-in { animation: fx-up .8s cubic-bezier(.2, .8, .2, 1) both; }

@media (max-width: 600px) {
  .leader-avatar { width: 150px; height: 150px; }
  .fx-classes { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.fx-js .fx-reveal { opacity: 1; }
}

/* ---------- Loading screen ---------- */
#fx-loader {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #1e3a63 0%, #142d4e 55%, #0d1e35 100%);
  transition: opacity .45s ease, visibility .45s ease;
  animation: fx-loader-failsafe .45s ease 3s forwards; /* never stuck, even without the script */
}
#fx-loader.fx-done { opacity: 0; visibility: hidden; animation: none; }
#fx-loader.fx-leaving { opacity: 1; visibility: visible; animation: none; transition-duration: .2s; }
.fx-loader-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.fx-loader-inner img { width: 150px; height: auto; animation: fx-loader-logo 1.6s ease-in-out infinite; }
.fx-loader-bar { position: relative; width: 120px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.fx-loader-bar::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--gold, #c9922a), var(--gold-light, #e8b84a), transparent);
  animation: fx-loader-sweep 1.1s ease-in-out infinite;
}
.fx-loader-text { color: rgba(255, 255, 255, .55); font-size: 11px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; }
@keyframes fx-loader-logo { 0%, 100% { transform: scale(.94); opacity: .85; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes fx-loader-sweep { to { left: 100%; } }
@keyframes fx-loader-failsafe { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { #fx-loader { display: none !important; } }
/* Home logo entrance starts as the loading screen fades */
body.fx-home .nav-logo img { animation-delay: .6s, 2s; }