/* Pro Build UI Kit - vanilla ports of Magic UI / 21st.dev components
   Components: blur-in hero text, number ticker, shimmer button,
   marquee, border beam, animated grid pattern, skeleton, toast
   All animations respect prefers-reduced-motion. */

/* ---- 1. Blur-in (Magic UI) : hero entrance ---- */
@keyframes pb-blur-in{0%{opacity:0;transform:translateY(14px);filter:blur(12px)}100%{opacity:1;transform:translateY(0);filter:blur(0)}}
.pb-blur{opacity:0;animation:pb-blur-in .9s cubic-bezier(.22,1,.36,1) forwards}
.pb-blur.d1{animation-delay:.08s}.pb-blur.d2{animation-delay:.18s}.pb-blur.d3{animation-delay:.3s}.pb-blur.d4{animation-delay:.45s}

/* ---- 2. Number Ticker (Magic UI) : spring count-up ---- */
.pb-ticker{display:inline-block;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ---- 3. Shimmer Button (Magic UI) : rotating conic spark ---- */
.pb-shimmer{position:relative;z-index:0;overflow:hidden;isolation:isolate;border-radius:4px}
.pb-shimmer:before{content:"";position:absolute;inset:-100%;z-index:-2;background:conic-gradient(from 0deg,transparent 0deg,rgba(210,163,96,.55) 60deg,transparent 130deg);animation:pb-spin 5s linear infinite;pointer-events:none}
.pb-shimmer:after{content:"";position:absolute;inset:2px;z-index:-1;background:var(--forest);border-radius:3px;pointer-events:none}
.pb-shimmer:hover:after{background:var(--forest2)}
@keyframes pb-spin{to{transform:rotate(360deg)}}

/* ---- 4. Marquee (Magic UI) : scrolling strip ---- */
.pb-marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--warm);padding:13px 0}
.pb-marquee-track{display:flex;width:max-content;gap:0;animation:pb-marquee 42s linear infinite}
.pb-marquee:hover .pb-marquee-track{animation-play-state:paused}
.pb-marquee-chunk{display:flex;align-items:center;flex:none}
.pb-marquee-chunk span{font:800 .78rem Manrope,Arial;letter-spacing:.14em;text-transform:uppercase;color:var(--forest);white-space:nowrap}
.pb-marquee-chunk i{width:5px;height:5px;border-radius:50%;background:var(--gold);margin:0 22px;flex:none}
@keyframes pb-marquee{to{transform:translateX(-50%)}}

/* ---- 5. Border Beam (Magic UI) : hover beam on cards ---- */
@property --pb-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.pb-card{position:relative}
.pb-card:before{content:"";position:absolute;inset:0;border-radius:4px;padding:1px;background:conic-gradient(from var(--pb-angle),transparent 0%,var(--gold) 8%,var(--forest) 16%,transparent 24%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s;pointer-events:none}
.pb-card:hover:before{opacity:1;animation:pb-beam 3.2s linear infinite}
@keyframes pb-beam{to{--pb-angle:360deg}}

/* ---- 6. Animated Grid Pattern (Magic UI) : stats backdrop ---- */
.pb-grid-bg{position:relative}
.pb-grid-bg:before{content:"";position:absolute;inset:0;background-image:linear-gradient(to right,var(--line) 1px,transparent 1px),linear-gradient(to bottom,var(--line) 1px,transparent 1px);background-size:44px 44px;opacity:.4;pointer-events:none;
-webkit-mask-image:radial-gradient(ellipse 75% 90% at 50% 50%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 75% 90% at 50% 50%,#000 30%,transparent 75%)}
@keyframes pb-grid-move{to{background-position:44px 44px}}
.pb-grid-bg.animated:before{animation:pb-grid-move 3.5s linear infinite}

/* ---- 7. Skeleton (Origin UI) : loading placeholders ---- */
@keyframes pb-shimmer-slide{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.pb-skeleton{position:relative;overflow:hidden;background:var(--warm,#ece8dc);border-radius:8px}
.pb-skeleton:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:pb-shimmer-slide 1.6s infinite}

/* ---- 8. Toast : app feedback ---- */
.pb-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);background:#1c302c;color:#fff;padding:12px 20px;border-radius:10px;font-size:.92rem;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;transition:opacity .25s,transform .25s;z-index:9999;pointer-events:none;max-width:90vw;text-align:center}
.pb-toast.show{opacity:1;transform:translate(-50%,0)}

/* ---- 9. Card entrance : staggered fade-up ---- */
@keyframes pb-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.pb-rise{opacity:0;animation:pb-rise .5s cubic-bezier(.22,1,.36,1) forwards}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
.pb-blur,.pb-rise{animation-duration:.01s;animation-delay:0s}
.pb-shimmer:before,.pb-grid-bg.animated:before,.pb-skeleton:after{animation:none}
.pb-marquee-track{animation:none;flex-wrap:wrap;width:auto}
.pb-card:hover:before{animation:none}
.pb-ticker{font-variant-numeric:tabular-nums}
}