/* CPR Hiring Portal v3.9 — motion & polish layer
   Loaded after styles-3-4.css. Safe to delete to revert. */

/* ---------- 1. Hero entrance sequence ---------- */
@keyframes heroUp{
  from{opacity:0;transform:translateY(26px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes kenBurns{
  from{transform:scale(1) translateX(0)}
  to{transform:scale(1.07) translateX(-1.2%)}
}
.hero-bg{
  animation:kenBurns 22s ease-out forwards;
  will-change:transform;
}
.hero-copy .eyebrow,
.hero-copy h1,
.hero-copy .hero-subtitle,
.hero-copy .hero-question,
.hero-copy .hero-actions{
  opacity:0;
  animation:heroUp .8s cubic-bezier(.22,.9,.28,1) forwards;
}
.hero-copy .eyebrow{animation-delay:.10s}
.hero-copy h1{animation-delay:.22s}
.hero-copy .hero-subtitle{animation-delay:.38s}
.hero-copy .hero-question{animation-delay:.50s}
.hero-copy .hero-actions{animation-delay:.64s}

/* Red accent word shimmer once on load */
@keyframes redPop{
  0%{text-shadow:0 0 0 rgba(238,28,37,0)}
  55%{text-shadow:0 0 34px rgba(238,28,37,.55)}
  100%{text-shadow:0 0 0 rgba(238,28,37,0)}
}
.hero h1 span{animation:redPop 1.6s ease .9s 1}

/* ---------- 2. Scroll-triggered reveals (JS adds .reveal / .in-view) ---------- */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .7s cubic-bezier(.22,.9,.28,1), transform .7s cubic-bezier(.22,.9,.28,1);
  transition-delay:var(--rd,0s);
  will-change:opacity,transform;
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
/* Benefit chips get a slightly snappier pop */
.benefit-item.reveal{transform:translateY(18px) scale(.97)}
.benefit-item.reveal.in-view{transform:translateY(0) scale(1)}

/* ---------- 3. Hover micro-interactions ---------- */
.profile-card,.spotlight-card,.team-card,.benefit-item,.vision-card,.vision-callout{
  transition:transform .28s cubic-bezier(.22,.9,.28,1), box-shadow .28s ease;
}
.profile-card:hover,.spotlight-card:hover,.vision-card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 56px rgba(18,25,38,.18);
}
.team-card:hover{transform:translateY(-6px)}
.benefit-item:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 34px rgba(18,25,38,.12);
  border-color:rgba(238,28,37,.35);
}
.benefit-item span{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.benefit-item:hover span{transform:scale(1.14) rotate(-6deg)}

/* Photo zoom inside cards */
.profile-card img,.team-card img,.spotlight-photo-wrap img{
  transition:transform .6s cubic-bezier(.22,.9,.28,1);
}
.profile-card:hover > img,
.team-card:hover img,
.spotlight-card:hover .spotlight-photo-wrap img{
  transform:scale(1.05);
}
.profile-card,.team-card,.spotlight-photo-wrap{overflow:hidden}

/* ---------- 4. Button shine sweep ---------- */
.btn{position:relative;overflow:hidden}
.btn::before{
  content:"";
  position:absolute;
  top:0;bottom:0;left:-70%;
  width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-20deg);
  transition:left .55s ease;
  pointer-events:none;
}
.btn:hover::before{left:125%}
.btn-primary:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}

/* Nav apply button gentle pulse to draw the eye */
@keyframes applyPulse{
  0%,100%{box-shadow:0 12px 24px rgba(238,28,37,.32)}
  50%{box-shadow:0 12px 30px rgba(238,28,37,.55), 0 0 0 6px rgba(238,28,37,.10)}
}
.nav-apply{animation:applyPulse 3.2s ease-in-out infinite}

/* ---------- 5. Living gradients on dark feature panels ---------- */
@keyframes gradientDrift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.benefit-item.featured,
.vision-callout{
  background-size:180% 180%;
  animation:gradientDrift 9s ease-in-out infinite;
}

/* ---------- 6. QR pulse ring in the apply strip ---------- */
@keyframes qrRing{
  0%{box-shadow:0 12px 34px rgba(0,0,0,.22), 0 0 0 0 rgba(255,255,255,.45)}
  70%{box-shadow:0 12px 34px rgba(0,0,0,.22), 0 0 0 14px rgba(255,255,255,0)}
  100%{box-shadow:0 12px 34px rgba(0,0,0,.22), 0 0 0 0 rgba(255,255,255,0)}
}
.qr-box{animation:qrRing 2.6s ease-out infinite}

/* ---------- 7. Sticky header polish ---------- */
.site-header{transition:padding .3s ease, box-shadow .3s ease, background .3s ease}
.site-header.scrolled{
  padding-top:8px;
  padding-bottom:8px;
  box-shadow:0 16px 42px rgba(0,0,0,.32);
}
.nav-links a{transition:color .2s ease, opacity .2s ease}
.nav-links a:not(.nav-apply):hover{color:#ff6b71}

/* Title icons spin in when revealed */
.title-icon,.vision-icon,.apply-icon{
  transition:transform .6s cubic-bezier(.34,1.56,.64,1);
}
.reveal .title-icon{transform:rotate(-90deg) scale(.6)}
.reveal.in-view .title-icon{transform:rotate(0) scale(1)}

/* ---------- 8. Accessibility: honor reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .hero-bg{animation:none}
  .reveal{opacity:1;transform:none}
  .hero-copy .eyebrow,.hero-copy h1,.hero-copy .hero-subtitle,
  .hero-copy .hero-question,.hero-copy .hero-actions{opacity:1;animation:none}
}

/* Never animate in print */
@media print{
  *,*::before,*::after{animation:none !important;transition:none !important}
  .reveal{opacity:1 !important;transform:none !important}
}

/* ---------- v3.9.5: training card (taller, layered caption) ---------- */
.team-card-training{min-height:400px}
.team-card-training img{object-position:center 30%}
.team-card-training .team-caption{
  display:flex;flex-direction:column;gap:4px;
  padding:16px 18px;
  background:linear-gradient(0deg,rgba(9,11,15,.94) 0%,rgba(9,11,15,.72) 62%,rgba(9,11,15,0) 100%);
}
.team-card-training .team-caption strong{font-size:20px;font-weight:900;letter-spacing:-.02em}
.team-card-training .team-caption strong::before{content:"↗";color:#ee1c25;margin-right:8px}
.team-card-training .team-caption small{font-size:13px;font-weight:700;color:#d9e0ec;line-height:1.3}
@media (max-width:1180px){.team-card-training{min-height:430px}}

/* ---------- v3.9.6: balance journey columns (fixes empty space under Contact Us) ---------- */
@media (min-width:1181px){
  /* Make both columns equal height, then let the training card absorb the remainder */
  .journey-layout{align-items:stretch}
  .journey-side-stack{grid-template-rows:auto 1fr;align-content:stretch}
  .team-card-training{min-height:0;height:auto}
}
/* Keep her face in frame when the card is shorter than the photo */
.team-card-training img{object-position:center 22%}
@media (max-width:1180px){
  .team-card-training{min-height:0;max-height:520px;aspect-ratio:1/1}
}

/* ---------- v3.9.7: dark site footer with NoruXN3 powered-by mark ---------- */
.site-footer{
  margin-top:26px;
  background:#0b0d12;
  color:#8b94a6;
}
.site-footer-inner{
  max-width:980px;margin:0 auto;
  padding:44px 24px 40px;
  text-align:center;
}
.footer-links{margin:0 0 22px;font-size:14px;color:#aab3c2}
.footer-links a{color:#ff575e;font-weight:850;text-decoration:none}
.footer-links a:hover{text-decoration:underline}
.footer-disclaimer{margin:0 auto 14px;max-width:860px;font-size:13.5px;line-height:1.65;color:#7d8698}
.footer-copyright{margin:0;font-size:14px;color:#9aa3b4}
.footer-divider{height:1px;max-width:760px;margin:26px auto;background:rgba(255,255,255,.12)}
.powered-by{display:flex;flex-direction:column;align-items:center;gap:5px}
.powered-by-label{font-size:11px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:#79839a}
.noruxn3-mark{
  font-size:26px;font-weight:950;letter-spacing:.14em;color:#e9edf4;line-height:1;
}
.noruxn3-mark sup{font-size:10px;font-weight:800;letter-spacing:0;vertical-align:top;margin-left:2px}
.noruxn3-sub{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:#6d7789}
@media print{.site-footer{display:none!important}}
/* footer reveal animation hookup uses .footer-note selector in JS; add new footer */

/* ---------- v3.9.8: official NoruXN3 logo in footer ---------- */
.noruxn3-logo{height:40px;width:auto;display:block;margin:2px 0}
@media (max-width:640px){.noruxn3-logo{height:32px}}