/* Motion layer: loaded after Bootstrap and style.css. All effects are disabled by the
   prefers-reduced-motion rule in style.css and the guard at the end of this file. */
:root { --bs-body-bg: var(--background); --bs-body-color: var(--text); --bs-body-font-family: Inter, Hanuman, sans-serif; --bs-body-font-size: 14px; --bs-body-line-height: 1.7; }
p { margin-top: 0; }

/* Scroll progress + topbar */
.scroll-progress { position: fixed; top: 0; left: 0; z-index: 200; height: 3px; width: 100%; background: var(--gold-gradient); box-shadow: 0 0 12px #ffb900aa; transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
.topbar { transition: background .3s, box-shadow .3s; }
.topbar.scrolled { background: #0b0b0bf2; box-shadow: 0 10px 40px #000a, 0 1px 0 #ffb90040; }
.topbar.scrolled .nav-inner { min-height: 68px; }
.nav-inner { transition: min-height .3s ease; }
.brand-mark { transition: transform .5s cubic-bezier(.2, .9, .3, 1.4), box-shadow .3s; }
.brand:hover .brand-mark { transform: rotate(-10deg) scale(1.1); box-shadow: 0 0 22px #ffb90060; }
.main-nav a { position: relative; }
.main-nav a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 3px; height: 2px; background: var(--gold); border-radius: 2px; transition: left .3s, right .3s; }
.main-nav a:hover::after, .main-nav a.active::after { left: 12px; right: 12px; }

/* Hero */
.hero-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(#ffb90010 1px, transparent 1px), linear-gradient(90deg, #ffb90010 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%); animation: grid-drift 18s linear infinite; }
.hero-sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-orbit { animation: orbit-spin 40s linear infinite; }
.hero-orbit::before { border-top-color: #ffb90090; animation: orbit-spin 12s linear infinite reverse; }
.hero-orbit::after { border-right-color: #ffb90070; animation: orbit-spin 8s linear infinite; }

.hero-content > * { opacity: 0; transform: translateY(34px); filter: blur(8px); animation: rise-in .9s cubic-bezier(.16, 1, .3, 1) forwards; }
.hero-content > :nth-child(1) { animation-delay: .1s; }
.hero-content > :nth-child(2) { animation-delay: .22s; }
.hero-content > :nth-child(3) { animation-delay: .38s; }
.hero-content > :nth-child(4) { animation-delay: .5s; }
.hero-content > :nth-child(5) { animation-delay: .64s; }
.hero h1 span { position: relative; display: inline-block; background: linear-gradient(100deg, #ffb900 20%, #fff3c4 40%, #ffb900 60%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gold-shine 3.2s ease-in-out infinite 1.2s; text-shadow: none; filter: drop-shadow(0 0 18px #ffb90055); }
.hero .gold-dot, .chip-market .gold-dot { animation: dot-pulse 1.6s ease-in-out infinite; }

.hero-visual { perspective: 900px; opacity: 0; animation: zoom-in 1.1s cubic-bezier(.16, 1, .3, 1) .35s forwards; }
.tilt-stage { position: absolute; inset: 0; display: grid; place-items: center; transform-style: preserve-3d; transition: transform .2s ease-out; }
.facebook-tile { position: relative; overflow: hidden; animation: tile-float 5s ease-in-out infinite; }
.facebook-tile::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, #fff6 50%, transparent 60%); transform: translateX(-100%); animation: sweep 3.8s ease-in-out infinite 1.5s; }
.facebook-tile i { animation: icon-glow 2.6s ease-in-out infinite; }
.chip-pages { animation: chip-float-a 6s ease-in-out infinite; }
.chip-market { animation: chip-float-b 7s ease-in-out infinite; }
.chip-line { background-size: 200% 100%; animation: line-run 1.8s linear infinite; background-image: linear-gradient(90deg, #ffb900, transparent, #ffb900); }

.service-strip > * { transition: transform .3s, color .3s; }
.service-strip > *:hover { transform: translateY(-4px); }
.service-strip > *:hover i { animation: wiggle .5s ease; }

/* Buttons */
.gold-button { position: relative; overflow: hidden; isolation: isolate; }
.gold-button::before { content: ""; position: absolute; top: 0; left: -75%; z-index: -1; width: 50%; height: 100%; background: linear-gradient(110deg, transparent, #ffffffb0, transparent); transform: skewX(-20deg); animation: btn-shine 3s ease-in-out infinite; }
.gold-button:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 30px #ffb90060, 0 0 0 1px #ffe39a; }
.gold-button:active { transform: scale(.96); }
.hero-actions .gold-button { animation: btn-pulse 2.4s ease-in-out infinite 1.5s; }
.gold-button .fa-arrow-right { transition: transform .3s; }
.gold-button:hover .fa-arrow-right { transform: translateX(5px); }
.icon-button:active { transform: scale(.9); }
.filter { transition: all .25s cubic-bezier(.2, .9, .3, 1.3); }
.filter:hover { transform: translateY(-2px); }
.filter.active { box-shadow: 0 0 18px #ffb90030, inset 0 0 0 1px #ffb90060; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(46px) scale(.97); filter: blur(6px); transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1), filter .8s; transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.in { opacity: 1; transform: none; filter: none; }

/* Product cards */
.product-grid { perspective: 1200px; }
.product-card { position: relative; transform-style: preserve-3d; will-change: transform; }
.product-card.reveal { transform: translateY(60px) rotateX(18deg) scale(.94); }
.product-card.reveal.in { transform: none; }
.product-card.tilting { transition: transform .08s linear, border-color .25s, box-shadow .25s; }
.product-card::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), #ffd66b30, transparent 45%); transition: opacity .3s; }
.product-card:hover::before { opacity: 1; }
.product-card:hover { border-color: var(--gold); box-shadow: 0 22px 50px #000c, 0 0 32px #ffb90028; }
.product-image img { transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.product-card:hover .product-image img { transform: scale(1.09); }
.discount { animation: badge-pop 2s ease-in-out infinite; }
.value-tag { position: relative; overflow: hidden; animation: dot-pulse 2s ease-in-out infinite; }
.loading-state::before { content: ""; display: block; width: 46px; height: 46px; margin: 0 auto 16px; border: 3px solid #ffb90025; border-top-color: var(--gold); border-radius: 50%; animation: orbit-spin .8s linear infinite; box-shadow: 0 0 20px #ffb90030; }

/* Cart + floating button + dialogs */
.cart-toggle span.bump { animation: bump .6s cubic-bezier(.2, .9, .3, 1.6); }
.telegram-float::before, .telegram-float::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--gold); animation: ring 2.2s ease-out infinite; }
.telegram-float::after { animation-delay: 1.1s; }
.telegram-float:hover { transform: translateY(-4px) rotate(-8deg) scale(1.08); }
dialog[open] { animation: dialog-in .45s cubic-bezier(.16, 1, .3, 1); }
dialog[open]::backdrop { animation: fade-in .3s ease; }
.smm-toast.visible { animation: toast-in .5s cubic-bezier(.2, .9, .3, 1.4); box-shadow: 0 0 30px #ffb90040; }
.benefit-list i { transition: transform .4s cubic-bezier(.2, .9, .3, 1.5), box-shadow .3s; }
.benefit-list > div:hover i { transform: rotate(-12deg) scale(1.15); box-shadow: 0 0 20px #ffb90040; }
.contact-card { position: relative; overflow: hidden; }
.contact-card::before { content: ""; position: absolute; inset: -2px; z-index: -1; background: conic-gradient(from var(--angle, 0deg), transparent 70%, #ffb900 85%, transparent); animation: border-spin 4s linear infinite; }
.contact-card { isolation: isolate; }
.contact-card::after { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: calc(var(--radius) - 1px); background: radial-gradient(ellipse at top right, #ffb9000d, transparent 70%), #201c17; }
.telegram-icon i { display: inline-block; animation: tile-float 3s ease-in-out infinite; }
.tooltip { --bs-tooltip-bg: #ffb900; --bs-tooltip-color: #1b1506; --bs-tooltip-font-size: 11px; font-family: Inter, Hanuman, sans-serif; font-weight: 700; }

@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes border-spin { to { --angle: 360deg; } }
@keyframes rise-in { to { opacity: 1; transform: none; filter: none; } }
@keyframes zoom-in { from { opacity: 0; scale: .7; rotate: 6deg; filter: blur(10px); } to { opacity: 1; scale: 1; rotate: 0deg; filter: none; } }
@keyframes gold-shine { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@keyframes dot-pulse { 0%, 100% { box-shadow: 0 0 0 0 #ffb90080; } 50% { box-shadow: 0 0 0 6px #ffb90000, 0 0 16px #ffb900; } }
@keyframes orbit-spin { to { rotate: 360deg; } }
@keyframes grid-drift { to { background-position: 46px 46px; } }
@keyframes tile-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes sweep { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes icon-glow { 0%, 100% { text-shadow: 0 8px 35px #ffb90020; } 50% { text-shadow: 0 0 40px #ffb900aa, 0 0 80px #ffb90050; } }
@keyframes chip-float-a { 0%, 100% { translate: 0 0; } 50% { translate: 8px -12px; } }
@keyframes chip-float-b { 0%, 100% { translate: 0 0; } 50% { translate: -10px 10px; } }
@keyframes line-run { to { background-position: -200% 0; } }
@keyframes wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -15deg; } 75% { rotate: 15deg; } }
@keyframes btn-shine { 0% { left: -75%; } 40%, 100% { left: 130%; } }
@keyframes btn-pulse { 0%, 100% { box-shadow: 0 0 0 0 #ffb90070; } 50% { box-shadow: 0 0 0 12px #ffb90000; } }
@keyframes badge-pop { 0%, 100% { scale: 1; } 50% { scale: 1.12; } }
@keyframes bump { 0% { scale: 1; } 40% { scale: 1.8; background: #fff; } 100% { scale: 1; } }
@keyframes ring { 0% { opacity: .8; scale: 1; } 100% { opacity: 0; scale: 1.7; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(40px) scale(.9) rotateX(10deg); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes toast-in { from { transform: translate(-50%, 30px) scale(.8); } }

@media (prefers-reduced-motion: reduce) {
  .reveal, .product-card.reveal, .hero-content > *, .hero-visual { opacity: 1; transform: none; filter: none; }
  .hero-sparks, .scroll-progress { display: none; }
}