/* ============================================================
   Homepage motion — a calm, "breathing" layer (index.html only)
   ============================================================
   • Hero: slow drifting gold/blue ambient light (20–26s cycles)
   • Hero copy + card ease in once on load; the card floats, a light
     sheen crosses it, and a soft gold glow breathes behind it
   • Primary button: gentle glow pulse
   • Stats, rate tiles + card banner: faint gold edge-glow
     that breathes out of sync, plus a richer glow on hover
   • Sections ease in as they scroll into view (js/home-motion.js)
   Only opacity/transform are animated (GPU-friendly). Everything is
   switched off for visitors who ask for reduced motion.
   ============================================================ */

/* ---------- Hero ambient light ---------- */
.hero-home { position: relative; isolation: isolate; }
.hero-home::before,
.hero-home::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  border-radius: 50%; filter: blur(60px); will-change: transform, opacity;
}
.hero-home::before {               /* gold, upper right */
  width: 560px; height: 560px; top: -180px; right: -120px;
  background: radial-gradient(closest-side, rgba(214,170,66,.55), rgba(214,170,66,0));
  animation: hm-drift-gold 22s ease-in-out infinite alternate;
}
.hero-home::after {                /* royal blue, lower left */
  width: 640px; height: 640px; bottom: -260px; left: -160px;
  background: radial-gradient(closest-side, rgba(18,87,178,.55), rgba(18,87,178,0));
  animation: hm-drift-blue 26s ease-in-out infinite alternate;
}
@keyframes hm-drift-gold {
  0%   { transform: translate(0, 0) scale(1);          opacity: .55; }
  50%  { transform: translate(-60px, 40px) scale(1.12); opacity: .85; }
  100% { transform: translate(-20px, 90px) scale(.96);  opacity: .6; }
}
@keyframes hm-drift-blue {
  0%   { transform: translate(0, 0) scale(1);          opacity: .45; }
  50%  { transform: translate(70px, -50px) scale(1.1);  opacity: .75; }
  100% { transform: translate(120px, -10px) scale(.95); opacity: .5; }
}

/* ---------- Hero entrance (once) ---------- */
.hero-copy > * { animation: hm-rise .9s cubic-bezier(.2,.7,.2,1) both; }
.hero-copy > :nth-child(1) { animation-delay: .05s; }
.hero-copy > :nth-child(2) { animation-delay: .17s; }
.hero-copy > :nth-child(3) { animation-delay: .29s; }
.bank-card-showcase { animation: hm-rise 1.1s .3s cubic-bezier(.2,.7,.2,1) both; }
@keyframes hm-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Showcase card: float, glow, sheen ---------- */
.bank-card-showcase { position: relative; }
.bank-card-showcase::before {      /* gold glow breathing behind the card */
  content: ""; position: absolute; z-index: -1; inset: 6% 4% -8%;
  border-radius: 44px; pointer-events: none; filter: blur(34px);
  background: radial-gradient(closest-side, rgba(214,170,66,.55), rgba(214,170,66,0));
  animation: hm-breathe-glow 6s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes hm-breathe-glow {
  0%, 100% { opacity: .4;  transform: scale(.96); }
  50%      { opacity: .85; transform: scale(1.04); }
}
.black-card { animation: hm-float 9s ease-in-out infinite; will-change: transform; }
@keyframes hm-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.black-card::before {              /* light sweep across the card */
  content: ""; position: absolute; z-index: 0; inset: -40% -70%; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.13) 50%, transparent 58%);
  transform: translateX(-55%);
  animation: hm-sheen 8s ease-in-out infinite;
}
@keyframes hm-sheen {
  0%, 55%  { transform: translateX(-55%); }
  80%,100% { transform: translateX(55%); }
}

/* ---------- Primary call-to-action ---------- */
.hero-actions .primary {
  box-shadow: 0 10px 28px rgba(214,170,66,.22);
  animation: hm-cta 4.5s ease-in-out infinite;
  transition: transform .2s ease;
}
.hero-actions .primary:hover { transform: translateY(-2px); }
@keyframes hm-cta {
  0%, 100% { box-shadow: 0 10px 28px rgba(214,170,66,.22); }
  50%      { box-shadow: 0 14px 44px rgba(214,170,66,.5); }
}

/* ---------- Breathing edge-glow on cards and panels ---------- */
.stat, .hp-rate, .hp-promo { position: relative; }
.stat::before, .hp-rate::before, .hp-promo::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(214,170,66,.32), 0 16px 44px rgba(214,170,66,.12);
  opacity: 0; will-change: opacity;
  animation: hm-edge 7s ease-in-out infinite;
  animation-delay: calc(var(--hm-i, 0) * -1.15s);   /* out of sync = breathing, not blinking */
}
.hp-promo::before { z-index: 1; box-shadow: inset 0 0 0 1px rgba(255,241,170,.22), 0 20px 60px rgba(214,170,66,.18); }
@keyframes hm-edge {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}
.stats-strip .stat:nth-child(1), .hp-rates .hp-rate:nth-child(1) { --hm-i: 0; }
.stats-strip .stat:nth-child(2), .hp-rates .hp-rate:nth-child(2) { --hm-i: 1; }
.stats-strip .stat:nth-child(3), .hp-rates .hp-rate:nth-child(3) { --hm-i: 2; }
.stats-strip .stat:nth-child(4) { --hm-i: 3; }
.hp-promo { --hm-i: 3.5; }

/* Services stay flat (Bank of America style): only the icon answers a hover */
.hp-svc-ico { transition: transform .25s ease; }
.hp-svc:hover .hp-svc-ico { transform: translateY(-3px); }

/* Hover: the tile answers the visitor */
.hp-rate { transition: transform .25s ease, box-shadow .25s ease; }
.hp-rate:hover { transform: translateY(-3px); box-shadow: 0 22px 56px rgba(10,35,70,.1); }
.stat { transition: transform .25s ease, box-shadow .25s ease; }
.stat:hover { transform: translateY(-3px); box-shadow: 0 22px 56px rgba(10,35,70,.12); }

/* Soft gold light drifting inside the navy card banner */
.hp-promo > * { position: relative; z-index: 1; }
.hp-promo::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 380px; height: 380px; top: -170px; right: -120px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(214,170,66,.32), rgba(214,170,66,0));
  animation: hm-drift-gold 18s ease-in-out infinite alternate;
}
/* The banner's card art floats like the hero card */
.hp-mini-card:not(.hp-mini-back) { animation: hm-float-tilt 9s ease-in-out infinite; }
@keyframes hm-float-tilt {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50%      { transform: rotate(-6deg) translateY(-7px); }
}

/* ---------- Scroll reveal (classes added by js/home-motion.js) ---------- */
.motion-ready .hm-reveal {
  opacity: 0; translate: 0 20px;
  transition: opacity .75s ease, translate .75s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--hm-delay, 0ms);
}
.motion-ready .hm-reveal.hm-in { opacity: 1; translate: none; }

/* Printing: show everything, no effects */
@media print {
  .motion-ready .hm-reveal { opacity: 1 !important; translate: none !important; }
  .hero-home::before, .hero-home::after, .bank-card-showcase::before,
  .black-card::before, .hp-promo::after { display: none; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce) {
  #homePage *, #homePage *::before, #homePage *::after,
  .hero-home::before, .hero-home::after {
    animation: none !important;
  }
  .motion-ready .hm-reveal { opacity: 1; translate: none; transition: none; }
}