/* =====================================================
   ResumePro – EXTRA ANIMATIONS (additive only)
   Load AFTER your existing <style> block.
   Uses the individual `translate` / `scale` / `rotate`
   properties so it never clashes with your existing
   `transform`-based hover effects and animations.
   ===================================================== */

@keyframes xaFadeUp   { from{opacity:0;translate:0 28px} to{opacity:1;translate:0 0} }
@keyframes xaFadeDown { from{opacity:0;translate:0 -100%} to{opacity:1;translate:0 0} }
@keyframes xaDrop     { from{opacity:0;translate:0 -8px} to{opacity:1;translate:0 0} }
@keyframes xaPop      { 0%{opacity:0;scale:.3} 100%{opacity:1;scale:1} }
@keyframes xaOrbA     { from{translate:0 0;scale:1} to{translate:90px 60px;scale:1.25} }
@keyframes xaOrbB     { from{translate:0 0;scale:1.1} to{translate:-80px -70px;scale:.9} }
@keyframes xaFloatAlt { 0%,100%{translate:0 0;rotate:0deg} 50%{translate:0 8px;rotate:-.8deg} }
@keyframes xaGlow     { 0%,100%{opacity:.55;scale:1} 50%{opacity:1;scale:1.15} }
@keyframes xaRingDark { 0%{box-shadow:0 0 0 0 rgba(14,14,18,.35)} 70%,100%{box-shadow:0 0 0 14px rgba(14,14,18,0)} }
@keyframes xaRingGold {
  0%{box-shadow:0 8px 28px rgba(0,0,0,.25),0 0 0 0 rgba(200,169,110,.55)}
  70%,100%{box-shadow:0 8px 28px rgba(0,0,0,.25),0 0 0 16px rgba(200,169,110,0)}
}
@keyframes xaSweep    { 0%{left:-80%} 35%,100%{left:160%} }
@keyframes xaFaq      { from{opacity:0;translate:0 -8px} to{opacity:1;translate:0 0} }

/* ---------- scroll progress bar (element added by JS) ---------- */
.xa-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:1000;pointer-events:none;
  background:linear-gradient(90deg,var(--accent-dark),var(--accent),var(--accent-light));
  transform-origin:left center;transform:scaleX(0)}

/* ---------- scroll reveal (class added by JS) ---------- */
.js-anim .xa-reveal:not(.xa-in){opacity:0;translate:0 28px}
.xa-reveal.xa-in{animation:xaFadeUp .85s cubic-bezier(.16,1,.3,1) var(--xa-d,0ms) both}

/* step number badge pops in after the card appears */
.step.xa-in::before{animation:xaPop .6s .3s cubic-bezier(.34,1.56,.64,1) backwards}

/* ---------- page load: header, announcement, hero ---------- */
header{animation:xaFadeDown .8s cubic-bezier(.16,1,.3,1) both}
.announce{animation:xaFadeDown .7s .1s cubic-bezier(.16,1,.3,1) both}

.hero .sub{animation:xaFadeUp .9s .15s cubic-bezier(.16,1,.3,1) both}
.hero .hero-actions{animation:xaFadeUp .9s .30s cubic-bezier(.16,1,.3,1) both}
.hero .hero-note{animation:xaFadeUp .9s .45s cubic-bezier(.16,1,.3,1) both}
.hero .stats{animation:xaFadeUp .9s .60s cubic-bezier(.16,1,.3,1) both}
.hero-grid > div:last-child{animation:xaFadeUp 1s .25s cubic-bezier(.16,1,.3,1) both}
.chips a{animation:xaFadeUp .7s both;transition:translate .25s,border-color .2s,color .2s}
.chips a:nth-child(1){animation-delay:.85s}
.chips a:nth-child(2){animation-delay:.95s}
.chips a:nth-child(3){animation-delay:1.05s}
.chips a:hover{translate:0 -3px}

/* the "Your resume" card floats gently (opposite phase to the website card) */
.flow-card:first-of-type{animation:xaFloatAlt 6s ease-in-out infinite}

/* drifting gold light orbs behind the hero */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);z-index:-1;pointer-events:none}
.hero::before{width:440px;height:440px;top:-140px;left:-120px;
  background:radial-gradient(circle,rgba(200,169,110,.26),transparent 70%);
  animation:xaOrbA 14s ease-in-out infinite alternate}
.hero::after{width:520px;height:520px;right:-160px;bottom:-200px;
  background:radial-gradient(circle,rgba(154,122,63,.24),transparent 70%);
  animation:xaOrbB 17s ease-in-out infinite alternate}

/* ---------- final CTA glow ---------- */
.final{position:relative;overflow:hidden;isolation:isolate}
.final::before{content:"";position:absolute;left:50%;top:0;width:720px;height:360px;margin-left:-360px;margin-top:-140px;
  border-radius:50%;filter:blur(80px);z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(200,169,110,.3),transparent 70%);
  animation:xaGlow 6s ease-in-out infinite}

/* ---------- buttons ---------- */
.btn-dark{position:relative;overflow:hidden;animation:xaRingDark 2.8s ease-out infinite}
.btn-dark::after{content:"";position:absolute;top:-50%;left:-80%;width:40%;height:200%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:rotate(25deg);animation:xaSweep 5s ease-in-out infinite}
.btn-line,.btn-ghost{transition:transform .2s,background .25s,color .25s,border-color .25s,box-shadow .25s}
.btn-line:hover,.btn-ghost:hover{box-shadow:0 8px 22px rgba(0,0,0,.12)}
.btn:active{transform:translateY(0) scale(.97)}
.floating.show{animation:xaRingGold 2.6s ease-out infinite}

/* ---------- cards: spotlight that follows the cursor (JS sets --mx/--my) ---------- */
.tm-card,.why-item,.who,.host{position:relative}
.tm-card::after,.why-item::after,.who::after,.host::after{content:"";position:absolute;inset:0;pointer-events:none;
  opacity:0;transition:opacity .35s;border-radius:inherit;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(200,169,110,.18),transparent 70%)}
.tm-card:hover::after,.why-item:hover::after,.who:hover::after,.host:hover::after{opacity:1}

.who,.host{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1),border-color .3s}
.who:hover,.host:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(0,0,0,.08);border-color:var(--accent-light)}

/* template cards */
.tm-card img{transition:transform .8s cubic-bezier(.16,1,.3,1)}
.tm-card:hover img{transform:scale(1.07)}
.tm-links .buy{transition:transform .2s,box-shadow .2s}
.tm-links .buy:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(200,169,110,.5)}
.use-ai{width:fit-content;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:background-size .35s ease,color .2s}
.use-ai:hover{background-size:100% 1px}

/* "why" headings get a growing gold underline on hover */
.why-item h3,.who h3{background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 2px no-repeat;
  width:fit-content;padding-bottom:2px;transition:background-size .4s ease}
.why-item:hover h3,.who:hover h3{background-size:100% 2px}

/* pricing: shimmer sweep across the "Most popular" badge */
.badge{overflow:hidden}
.badge::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:xaSweep 3.6s ease-in-out infinite}
.plan:not(.pop){transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.plan:not(.pop):hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(0,0,0,.08)}

/* ---------- FAQ ---------- */
details{transition:border-color .3s,box-shadow .3s}
details:hover{border-color:var(--accent-light)}
details[open]{border-color:var(--accent);box-shadow:0 10px 26px rgba(0,0,0,.06)}
details[open] p{animation:xaFaq .45s ease both}
summary::after{transition:rotate .3s ease,scale .3s ease}
details[open] summary::after{rotate:180deg}
summary:hover::after{scale:1.25}

/* ---------- nav: logo + dropdown ---------- */
.logo-icon{transition:rotate .35s cubic-bezier(.34,1.56,.64,1),scale .35s cubic-bezier(.34,1.56,.64,1)}
.logo:hover .logo-icon{rotate:-10deg;scale:1.1}
.header-dropdown:hover .header-dropdown-content{animation:xaDrop .25s ease both}

/* ---------- newsletter ---------- */
.news input{transition:border-color .25s,box-shadow .25s,background .25s}
.news input:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.1);
  box-shadow:0 0 0 4px rgba(200,169,110,.18)}
.news button{transition:transform .2s,box-shadow .2s}
.news button:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(200,169,110,.4)}
.built .av{animation:xaGlow 4s ease-in-out infinite}

/* ---------- footer links ---------- */
.footer-links a{transition:translate .25s ease,color .2s}
.footer-links a:hover{translate:4px 0}

/* ---------- respect reduced-motion (also keeps content visible) ---------- */
@media (prefers-reduced-motion:reduce){
  .js-anim .xa-reveal,.js-anim .xa-reveal:not(.xa-in){opacity:1!important;translate:none!important}
  .xa-progress{display:none}
}