/* ============================================================
   GR — Motion layer (elegant / cinematic)
   Subtle, premium animations. Respects reduced-motion.
   ============================================================ */

/* ---------- Scroll reveal (only when JS is on) ---------- */
.has-js [data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),
             transform .9s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.has-js [data-reveal="left"]{transform:translateX(-34px)}
.has-js [data-reveal="right"]{transform:translateX(34px)}
.has-js [data-reveal="zoom"]{transform:scale(.94)}
.has-js [data-reveal].in{opacity:1;transform:none}

/* ---------- Animated gold hero background ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero > .container{position:relative;z-index:2}
.hero::before{
  content:"";position:absolute;inset:-30%;z-index:0;
  background:
    radial-gradient(38% 50% at 78% 18%, rgba(224,163,34,.30), transparent 60%),
    radial-gradient(42% 46% at 18% 30%, rgba(246,231,196,.55), transparent 62%),
    radial-gradient(40% 50% at 60% 90%, rgba(224,163,34,.16), transparent 60%);
  filter:blur(14px);
  animation:heroDrift 18s ease-in-out infinite alternate;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  background-size:280% 280%;
  animation:heroSheen 9s ease-in-out infinite;
  pointer-events:none;mix-blend-mode:screen;
}
@keyframes heroDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.5%,-2%,0) scale(1.06)}
  100%{transform:translate3d(-2%,2.5%,0) scale(1.04)}
}
@keyframes heroSheen{
  0%{background-position:120% 0}
  100%{background-position:-40% 0}
}

/* Hero entrance: staggered fade-up for hero content */
.hero-grid > div:first-child > *{opacity:0;animation:fadeUp .9s cubic-bezier(.22,.61,.36,1) forwards}
.hero-grid > div:first-child > *:nth-child(1){animation-delay:.10s}
.hero-grid > div:first-child > *:nth-child(2){animation-delay:.24s}
.hero-grid > div:first-child > *:nth-child(3){animation-delay:.38s}
.hero-grid > div:first-child > *:nth-child(4){animation-delay:.52s}
.hero-visual{opacity:0;animation:fadeZoom 1.1s cubic-bezier(.22,.61,.36,1) .35s forwards}
.hero-badge{opacity:0;animation:fadeUp .7s ease 1s forwards}

@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes fadeZoom{from{opacity:0;transform:scale(.96) translateY(18px)}to{opacity:1;transform:none}}

/* ---------- Micro-interactions ---------- */
.btn{transition:.25s cubic-bezier(.22,.61,.36,1)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(224,163,34,.32)}
.btn-outline:hover{transform:translateY(-2px)}
.btn-gold::after{content:"";position:absolute}
.btn{position:relative;overflow:hidden}
.btn .arrow,.btn:hover .arrow{transition:transform .25s}

/* nav underline grow */
.nav-links a::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:center;transition:transform .3s ease}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a.active::after{transform:scaleX(1)}

/* card hover lift refined */
.card{transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s,border-color .35s}
.feature{transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s}
.feature:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.feature .fi{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.feature:hover .fi{transform:translateY(-3px) rotate(-4deg) scale(1.06)}

/* portfolio tile gentle zoom already; add overlay shine */
.pf-item img{transition:transform .6s cubic-bezier(.22,.61,.36,1)}

/* CTA subtle floating glow */
.cta{position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;width:60%;height:160%;top:-30%;inset-inline-start:-10%;
  background:radial-gradient(closest-side,rgba(224,163,34,.22),transparent);
  animation:ctaFloat 12s ease-in-out infinite alternate}
@keyframes ctaFloat{0%{transform:translate(0,0)}100%{transform:translate(40%,10%)}}

/* page header soft entrance */
.page-head .eyebrow,.page-head h1,.page-head p{opacity:0;animation:fadeUp .8s cubic-bezier(.22,.61,.36,1) forwards}
.page-head h1{animation-delay:.12s}
.page-head p{animation-delay:.24s}

/* image lazy fade-in */
img.lazy-fade{opacity:0;transition:opacity .7s ease}
img.lazy-fade.loaded{opacity:1}

/* ---------- Accessibility: reduce motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .has-js [data-reveal]{opacity:1!important;transform:none!important}
  .hero-grid > div:first-child > *,.hero-visual,.hero-badge,.page-head *{opacity:1!important;animation:none!important}
}