/* Homepage motion layer for kylerhood.com — vanilla CSS, zero dependencies.
   All effects are progressive enhancement: motion.js adds the hooks, so
   without JS the page renders exactly as before. Respects
   prefers-reduced-motion throughout. */

/* ---- Scroll reveals: JS adds .reveal, IntersectionObserver adds .in ---- */
.reveal{
  opacity:0;
  transform:translateY(26px);
  filter:blur(6px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.21,1),filter .7s ease;
  transition-delay:var(--d,0ms);
  will-change:opacity,transform,filter;
}
.reveal.in{opacity:1;transform:none;filter:none}

/* ---- Hero headline: no animation; plain text from first paint ---- */

/* ---- Ambient gold glow behind the hero ---- */
.hero{position:relative;isolation:isolate}
.hero::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:-30px;right:-40px;width:min(560px,62vw);aspect-ratio:1;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--amber) 15%,transparent),transparent 72%);
  filter:blur(6px);animation:heroGlow 7s ease-in-out infinite;
}
@keyframes heroGlow{0%,100%{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}

/* ---- Pick-your-path cards: lift + spotlight hover ---- */
.path-card{
  position:relative;overflow:hidden;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.path-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--amber) 24%,transparent),transparent 70%);
}
.path-card:hover{transform:translateY(-6px);border-color:var(--amber);box-shadow:0 20px 44px -20px rgba(0,0,0,.5)}
.path-card:hover::before{opacity:1}

/* ---- Button shine sweep ---- */
.button{position:relative;overflow:hidden}
.button::after{
  content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-20deg);transition:left .55s ease;
}
.button:hover::after,.button:focus-visible::after{left:135%}

/* ---- Reduced motion: everything static ---- */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .hero::before{animation:none}
  .button::after{display:none}
  .path-card:hover{transform:none}
}