/* Motion layer for the landing: reveals, parallax, hover and ambient effects. */
:root{--ease:cubic-bezier(.22,.8,.24,1)}

/* Scroll reveal (only when JS is on, so content never stays hidden) */
.js .rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js .rv.rv-left{transform:translateX(-46px)}
.js .rv.rv-right{transform:translateX(46px)}
.js .rv.rv-zoom{transform:scale(.94)}
.js .rv.in{opacity:1;transform:none}

/* Photo blocks: image settles from a zoom, then follows scroll with parallax */
.ph{overflow:hidden}
.ph>img{transform:scale(1.14) translateY(var(--py,0px));transition:transform 1.6s var(--ease);will-change:transform}
.ph.in>img{transform:scale(1.06) translateY(var(--py,0px));transition:transform .2s linear}

/* Hero entrance and slow drift */
.hero-img{animation:heroIn 2.4s var(--ease) both;will-change:transform}
@keyframes heroIn{from{transform:scale(1.12);filter:brightness(.6)}to{transform:scale(1);filter:none}}
.js .hi{opacity:0;animation:up 1s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero-fx{transition:transform .6s ease-out}

/* Floating info badges on photos and the chart wheel */
.float{animation:float 6s ease-in-out infinite;animation-delay:var(--fd,0s)}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -9px}}
.spin{animation:spin 240s linear infinite;transform-origin:50% 50%}
@keyframes spin{to{transform:rotate(360deg)}}

/* Gold buttons: soft shimmer and glow */
.gold{position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s}
.gold::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:shine 5s ease-in-out infinite;animation-delay:var(--sd,1s)}
@keyframes shine{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.gold:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(217,178,106,.45)}

/* Cards lift on hover */
.lift{transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.lift:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 0 1px rgba(217,178,106,.45);border-color:rgba(217,178,106,.55)!important}
.lift img{transition:transform 1.2s var(--ease)}
.lift:hover img{transform:scale(1.07)}
.chip{transition:background .25s,border-color .25s,transform .25s}
.chip:hover{background:rgba(217,178,106,.18)!important;border-color:#D9B26A!important;transform:translateY(-2px)}

/* How it works: the dashed path draws in, step circles pulse */
.path-line{transform-origin:left;transform:scaleX(0);transition:transform 1.6s var(--ease) .3s}
.path-line.in{transform:scaleX(1)}
.pulse{animation:pulse 3s ease-out infinite;animation-delay:var(--pd,0s)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(217,178,106,.55)}70%,100%{box-shadow:0 0 0 18px rgba(217,178,106,0)}}

/* Sticky header that slides in after the hero */
.bar{position:fixed;left:0;right:0;top:0;z-index:50;background:rgba(11,10,18,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(217,178,106,.15);transform:translateY(-100%);transition:transform .45s var(--ease)}
.bar.show{transform:none}
.bar header{padding:14px 0!important}

/* Placeholder typing caret */
.typing::placeholder{color:#B9B2C8}

@media (prefers-reduced-motion:reduce){
  .js .rv,.js .hi{opacity:1;transform:none;animation:none;transition:none}
  .hero-img,.float,.spin,.gold::after,.pulse{animation:none}
  .ph>img,.path-line{transform:none;transition:none}
}