/* =========================================================
   01BAZAAR BILLBOARD (header 2.2)
   While visitors scroll, the header bar becomes an animated billboard drawn in code.
   Everything is scoped under #ob-header so themes (Hello Elementor, Elementor Site
   Settings) cannot restyle it. No red anywhere: lime, cyan, blue, violet, pink on black.
   ========================================================= */

#ob-header{--bb-h: 96px;--bb-tick: 16px;--bb-pink: #ff4fd8}
@media (max-width: 600px){ #ob-header{--bb-h: 80px;--bb-tick: 14px} }

/* frame: floats over the page (the header spacer keeps the page in place) */
#ob-header .bb{position: absolute !important;left: 0 !important;right: 0 !important;top: 0 !important;height: var(--bb-h) !important;z-index: 6 !important;overflow: hidden !important;background: #04050b !important;color: #f5f7fb !important;opacity: 0 !important;visibility: hidden !important;transform: translateY(-6px) scaleY(.96) !important;transform-origin: top center !important;transition: opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1), visibility 0s linear .45s !important;box-shadow: 0 14px 40px rgba(0,0,0,.45) !important;font-family: var(--ob-font) !important;text-align: left !important;pointer-events: none !important}
#ob-header.is-bb .bb{pointer-events: auto !important;opacity: 1 !important;visibility: visible !important;transform: none !important;transition: opacity .3s ease, transform .45s cubic-bezier(.22,1,.36,1), visibility 0s !important}
#ob-header.is-bb .ob-nav > :not(.bb){opacity: 0 !important;filter: blur(6px) !important;pointer-events: none !important;transition: opacity .3s ease, filter .3s ease !important}
#ob-header .ob-nav > :not(.bb){transition: opacity .35s ease, filter .35s ease !important}
#ob-header.is-bb .ob-nav{border-bottom-color: transparent !important}

#ob-header .bb *,#ob-header .bb *::before,#ob-header .bb *::after{box-sizing: border-box !important}
#ob-header .bb-slide{position: absolute !important;left: 0 !important;right: 0 !important;top: 0 !important;bottom: var(--bb-tick) !important;display: block !important;opacity: 0 !important;visibility: hidden !important;color: #f5f7fb !important;text-decoration: none !important;transition: opacity .45s ease, visibility 0s linear .45s !important;outline: none !important}
#ob-header .bb-slide.on{opacity: 1 !important;visibility: visible !important;transition: opacity .45s ease, visibility 0s !important}
#ob-header .bb-slide:focus-visible{outline: 2px solid var(--ob-cyan) !important;outline-offset: -4px !important;box-shadow: none !important}
#ob-header .bb-content{position: absolute !important;inset: 0 !important;display: flex !important;align-items: center !important;gap: clamp(14px,2.4vw,32px) !important;padding: 0 calc(var(--ob-pad) + 230px) 0 var(--ob-pad) !important}

/* entering: a quick holographic tear (lime / violet) + the parts rising in */
#ob-header .bb-slide.enter .bb-content{animation: bb-tear .32s steps(3) 1 !important}
@keyframes bb-tear {
  0% { clip-path: inset(0 0 62% 0); transform: translateX(-10px); filter: drop-shadow(4px 0 0 rgba(154,77,255,.8)) drop-shadow(-4px 0 0 rgba(186,255,0,.7)); }
  50% { clip-path: inset(38% 0 18% 0); transform: translateX(8px); }
  100% { clip-path: inset(0); transform: none; filter: none; }
}
#ob-header .bb-slide.enter .bb-content > *{animation: bb-rise .6s cubic-bezier(.22,1,.36,1) both !important}
#ob-header .bb-slide.enter .bb-content > :nth-child(2){animation-delay: .07s !important}
#ob-header .bb-slide.enter .bb-content > :nth-child(3){animation-delay: .14s !important}
@keyframes bb-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* glass + light */
#ob-header .bb-scan{position: absolute !important;inset: 0 !important;pointer-events: none !important;background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px) !important;mix-blend-mode: overlay !important}
#ob-header .bb-sweep{position: absolute !important;top: -20% !important;bottom: -20% !important;width: 18% !important;left: -30% !important;pointer-events: none !important;transform: skewX(-18deg) !important;background: linear-gradient(100deg, transparent, rgba(255,255,255,.12) 45%, rgba(36,217,255,.14) 50%, transparent 60%) !important;animation: bb-sweep 3.6s ease-in-out infinite !important}
@keyframes bb-sweep { 0% { left: -30%; } 55%, 100% { left: 120%; } }
#ob-header .bb-edge{position: absolute !important;inset: 0 !important;pointer-events: none !important;box-shadow: inset 0 0 0 1px rgba(36,217,255,.16), inset 0 -2px 0 rgba(186,255,0,.55) !important}

/* neon type */
#ob-header .bb-neon{font-family: var(--ob-tech) !important;letter-spacing: .06em !important;line-height: 1 !important;white-space: nowrap !important;font-weight: 400 !important}
#ob-header .bb-grad{background: linear-gradient(90deg, var(--ob-lime), var(--ob-cyan)) !important;-webkit-background-clip: text !important;background-clip: text !important;color: transparent !important;filter: drop-shadow(0 0 8px rgba(36,217,255,.45)) !important}
#ob-header .bb-grad2{background: linear-gradient(90deg, #c58bff, var(--bb-pink) 45%, var(--ob-cyan)) !important;-webkit-background-clip: text !important;background-clip: text !important;color: transparent !important;filter: drop-shadow(0 0 10px rgba(197,139,255,.55)) !important}
#ob-header .bb-glow-lime{color: var(--ob-lime) !important;text-shadow: 0 0 6px rgba(186,255,0,.9), 0 0 18px rgba(186,255,0,.45) !important}
#ob-header .bb-glow-cyan{color: #bff4ff !important;text-shadow: 0 0 6px rgba(36,217,255,.95), 0 0 20px rgba(36,217,255,.5) !important}

/* ---------- billboard 1: Lucky Eggs ---------- */
#ob-header .bb-eggs{background: radial-gradient(120% 140% at 15% 50%, #3b136f 0, #1a0a3a 45%, #0a0a24 100%) !important}
#ob-header .bb-eggs::before{content: "" !important;position: absolute !important;inset: 0 !important;opacity: .6 !important;animation: bb-grid 6s linear infinite !important;background: linear-gradient(transparent 0 calc(100% - 1px), rgba(154,77,255,.25) 0) 0 0/100% 12px, linear-gradient(90deg, transparent 0 calc(100% - 1px), rgba(154,77,255,.18) 0) 0 0/24px 100% !important;-webkit-mask-image: linear-gradient(transparent, #000 70%) !important;mask-image: linear-gradient(transparent, #000 70%) !important}
@keyframes bb-grid { to { background-position: 0 12px, 24px 0; } }
#ob-header .bb-title{display: flex !important;flex-direction: column !important;gap: 6px !important;position: relative !important}
#ob-header .bb-title b{font-size: clamp(17px,2.1vw,26px) !important}
#ob-header .bb-title small{font: 600 10px/1 var(--ob-tech) !important;letter-spacing: .3em !important;color: #c9b8ff !important}
#ob-header .bb-shelf{position: relative !important;flex: 1 !important;min-width: 0 !important;height: 100% !important;display: flex !important;align-items: center !important;justify-content: space-around !important}
#ob-header .bb-shelf::after{content: "" !important;position: absolute !important;left: 4% !important;right: 4% !important;bottom: 9% !important;height: 10px !important;border-radius: 50% !important;background: radial-gradient(closest-side, rgba(186,255,0,.55), rgba(36,217,255,.25) 60%, transparent) !important;filter: blur(2px) !important}
#ob-header .bb-egg{position: relative !important;z-index: 1 !important;height: 54px !important;width: auto !important;max-width: none !important;flex: none !important;display: block !important;margin: 0 !important;border: 0 !important;border-radius: 0 !important;box-shadow: none !important;background: none !important;filter: drop-shadow(0 0 10px rgba(36,217,255,.35)) !important;animation: bb-bob 2.6s ease-in-out infinite !important}
#ob-header .bb-egg:nth-child(2n){animation-delay: -.6s !important;filter: drop-shadow(0 0 10px rgba(154,77,255,.45)) !important}
#ob-header .bb-egg:nth-child(3n){animation-delay: -1.3s !important;filter: drop-shadow(0 0 10px rgba(186,255,0,.35)) !important}
#ob-header .bb-egg:nth-child(4n){animation-delay: -1.9s !important}
@keyframes bb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ---------- billboard 2: 01BAZAAR city ---------- */
#ob-header .bb-city{background: linear-gradient(180deg, #0a0420 0%, #160a3c 55%, #2a0d55 100%) !important}
#ob-header .bb-city canvas{position: absolute !important;inset: 0 !important;width: 100% !important;height: 100% !important;display: block !important}
#ob-header .bb-brand{display: flex !important;flex-direction: column !important;gap: 5px !important;position: relative !important}
#ob-header .bb-brand b{font-size: clamp(18px,2.3vw,30px) !important;letter-spacing: .12em !important;animation: bb-flick 7s infinite !important}
#ob-header .bb-brand small{font: 600 8px/1 var(--ob-tech) !important;letter-spacing: .24em !important;color: #9fb3ff !important}
@keyframes bb-flick { 0%, 92%, 96%, 100% { opacity: 1; } 93%, 95% { opacity: .55; } }
#ob-header .bb-tag{position: relative !important;font: 600 10px/1.35 var(--ob-tech) !important;letter-spacing: .22em !important;color: #e6ecff !important;text-align: center !important;text-shadow: 0 0 8px rgba(36,217,255,.6) !important}
#ob-header .bb-tag i{display: block !important;font-style: normal !important;color: var(--ob-lime) !important;letter-spacing: .1em !important;margin-top: 2px !important}
#ob-header .bb-brand small,#ob-header .bb-tag{white-space: nowrap !important}
#ob-header .bb-tag{padding: 5px 12px !important;border-radius: 8px !important;background: rgba(7,5,26,.62) !important;box-shadow: inset 0 0 0 1px rgba(36,217,255,.18) !important}
@media (max-width: 1180px){ #ob-header .bb-tag{display: none !important} }
#ob-header .bb-tiles{display: flex !important;gap: 10px !important;margin-left: auto !important;position: relative !important}
#ob-header .bb-tile{width: 54px !important;height: 46px !important;border-radius: 12px !important;display: grid !important;place-items: center !important;color: #fff !important;background: rgba(14,10,40,.7) !important;border: 1.5px solid rgba(36,217,255,.55) !important;box-shadow: 0 0 12px rgba(36,217,255,.35), inset 0 0 12px rgba(154,77,255,.3) !important;animation: bb-pulse 2.8s ease-in-out infinite !important}
#ob-header .bb-tile svg{width: 22px !important;height: 22px !important;filter: drop-shadow(0 0 4px rgba(36,217,255,.9)) !important}
#ob-header .bb-tile:nth-child(2){animation-delay: -.5s !important;border-color: rgba(154,77,255,.7) !important}
#ob-header .bb-tile:nth-child(3){animation-delay: -1s !important}
#ob-header .bb-tile:nth-child(4){animation-delay: -1.5s !important;border-color: rgba(255,79,216,.6) !important}
#ob-header .bb-tile:nth-child(5){animation-delay: -2s !important;border-color: rgba(186,255,0,.6) !important}
@keyframes bb-pulse { 0%, 100% { box-shadow: 0 0 10px rgba(36,217,255,.25), inset 0 0 10px rgba(154,77,255,.25); } 50% { box-shadow: 0 0 22px rgba(36,217,255,.55), inset 0 0 16px rgba(154,77,255,.45); } }

/* ---------- billboard 3: 01Cards ---------- */
#ob-header .bb-cards{background: radial-gradient(90% 160% at 50% 120%, #1b0c3d 0, #070a1c 60%, #03040b 100%) !important}
#ob-header .bb-cards::before{content: "" !important;position: absolute !important;inset: 0 !important;opacity: .5 !important;background: radial-gradient(circle, rgba(36,217,255,.35) 0 1px, transparent 1.5px) 0 0/10px 10px !important;-webkit-mask-image: linear-gradient(90deg, #000, transparent 25%, transparent 75%, #000) !important;mask-image: linear-gradient(90deg, #000, transparent 25%, transparent 75%, #000) !important}
#ob-header .bb-upg{display: flex !important;flex-direction: column !important;gap: 6px !important;position: relative !important}
#ob-header .bb-upg b{font-size: clamp(15px,1.9vw,24px) !important}
#ob-header .bb-upg span{font-size: clamp(12px,1.5vw,19px) !important}
#ob-header .bb-deck{display: flex !important;gap: 16px !important;margin-left: auto !important;perspective: 500px !important;position: relative !important}
@property --bb-spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
#ob-header .bb-holo{position: relative !important;width: 128px !important;height: 66px !important;border-radius: 12px !important;padding: 8px 10px !important;border: 1.5px solid transparent !important;flex: none !important;overflow: hidden !important;background: linear-gradient(135deg, #0a1124, #160e33) padding-box, conic-gradient(from var(--bb-spin), var(--ob-lime), var(--ob-cyan), var(--ob-violet), var(--bb-pink), var(--ob-lime)) border-box !important;animation: bb-spin 4s linear infinite, bb-float 3.2s ease-in-out infinite !important;transform: rotateY(-14deg) !important;box-shadow: 0 8px 24px rgba(36,217,255,.18) !important}
#ob-header .bb-holo::after{content: "" !important;position: absolute !important;top: 0 !important;bottom: 0 !important;width: 40% !important;left: -60% !important;background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent) !important;animation: bb-shine 3.4s ease-in-out infinite !important}
#ob-header .bb-holo small{display: block !important;font: 600 7px/1 var(--ob-tech) !important;letter-spacing: .22em !important;color: #9fb3ff !important}
#ob-header .bb-holo b{display: block !important;margin-top: 9px !important;font: 400 19px/1 var(--ob-tech) !important;letter-spacing: .08em !important}
#ob-header .bb-holo i{position: absolute !important;right: 10px !important;top: 9px !important;width: 16px !important;height: 12px !important;border-radius: 3px !important;background: linear-gradient(135deg, var(--ob-lime), #7bc400) !important;box-shadow: 0 0 6px rgba(186,255,0,.6) !important}
#ob-header .bb-holo:nth-child(2){animation-delay: 0s, -1s !important}
#ob-header .bb-holo:nth-child(3){animation-delay: 0s, -2s !important}
@keyframes bb-spin { to { --bb-spin: 360deg; } }
@keyframes bb-float { 0%, 100% { transform: rotateY(-14deg) translateY(0); } 50% { transform: rotateY(-6deg) translateY(-4px); } }
@keyframes bb-shine { 0% { left: -60%; } 60%, 100% { left: 130%; } }

/* ---------- ticker, button, dots, menu ---------- */
#ob-header .bb-ticker{position: absolute !important;left: 0 !important;right: 0 !important;bottom: 0 !important;height: var(--bb-tick) !important;background: #020306 !important;border-top: 1px solid rgba(186,255,0,.25) !important;overflow: hidden !important;-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent) !important;mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent) !important}
#ob-header .bb-ticker span{position: absolute !important;top: 2px !important;left: 0 !important;white-space: nowrap !important;font: 600 11px/12px var(--ob-tech) !important;letter-spacing: .32em !important;color: var(--ob-lime) !important;text-shadow: 0 0 6px rgba(186,255,0,.8) !important;animation: bb-tick 24s linear infinite !important;-webkit-mask-image: radial-gradient(circle, #000 55%, transparent 60%) !important;-webkit-mask-size: 3px 3px !important;mask-image: radial-gradient(circle, #000 55%, transparent 60%) !important;mask-size: 3px 3px !important}
@keyframes bb-tick { from { transform: translateX(100vw); } to { transform: translateX(-100%); } }
#ob-header .bb-cta{position: absolute !important;right: calc(var(--ob-pad) + 52px) !important;top: calc((var(--bb-h) - var(--bb-tick)) / 2 - 17px) !important;height: 34px !important;padding: 0 16px !important;border-radius: 99px !important;display: flex !important;align-items: center !important;font: 700 12px/1 var(--ob-font) !important;color: #04120a !important;white-space: nowrap !important;pointer-events: none !important;background: linear-gradient(90deg, var(--ob-lime), var(--ob-cyan)) !important;box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 6px 22px rgba(36,217,255,.35) !important}
#ob-header .bb-dots{position: absolute !important;right: calc(var(--ob-pad) + 52px) !important;bottom: calc(var(--bb-tick) + 7px) !important;display: flex !important;gap: 5px !important;pointer-events: none !important}
#ob-header .bb-dots i{width: 16px !important;height: 3px !important;border-radius: 3px !important;background: rgba(255,255,255,.25) !important;overflow: hidden !important;position: relative !important}
#ob-header .bb-dots i.on::after{content: "" !important;position: absolute !important;inset: 0 !important;background: var(--ob-lime) !important;transform-origin: left !important;animation: bb-fill var(--bb-dur, 4s) linear forwards !important}
@keyframes bb-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
#ob-header .bb-menu{position: absolute !important;right: var(--ob-pad) !important;top: calc((var(--bb-h) - var(--bb-tick)) / 2 - 20px) !important;z-index: 2 !important;width: 40px !important;height: 40px !important;margin: 0 !important;padding: 0 !important;border-radius: 50% !important;border: 1px solid rgba(255,255,255,.22) !important;background: rgba(0,0,0,.55) !important;color: #fff !important;display: grid !important;place-content: center !important;cursor: pointer !important;-webkit-appearance: none !important;appearance: none !important;-webkit-backdrop-filter: blur(6px) !important;backdrop-filter: blur(6px) !important;box-shadow: none !important}
#ob-header .bb-menu:hover,#ob-header .bb-menu:focus{background: rgba(0,0,0,.7) !important;border-color: rgba(36,217,255,.5) !important;color: #fff !important}
#ob-header .bb-menu:focus-visible{outline: 2px solid var(--ob-cyan) !important;outline-offset: 2px !important;box-shadow: none !important}
#ob-header .bb-menu i{display: block !important;width: 17px !important;height: 1.5px !important;margin: 2.5px auto !important;background: #fff !important;border-radius: 2px !important}
#ob-header .bb.hold *{animation-play-state: paused !important}

/* ---------- smaller screens ---------- */
@media (max-width: 1100px){
  #ob-header .bb-tag{display: none !important}
  #ob-header .bb-holo:nth-child(1){display: none !important}
  #ob-header .bb-egg:nth-child(n+8){display: none !important}
}
@media (max-width: 600px){
  #ob-header .bb-content{padding: 0 104px 0 16px !important;gap: 10px !important}
  #ob-header .bb-cta{right: 56px !important;width: 36px !important;height: 36px !important;padding: 0 !important;justify-content: center !important;font-size: 0 !important;top: calc((var(--bb-h) - var(--bb-tick)) / 2 - 18px) !important}
  #ob-header .bb-cta::before{content: "→" !important;font: 700 17px/1 var(--ob-font) !important}
  #ob-header[lang="fa"] .bb-cta::before{content: "←" !important}
  #ob-header .bb-dots{left: 16px !important;right: auto !important;bottom: calc(var(--bb-tick) + 4px) !important}
  #ob-header .bb-dots i{width: 12px !important}
  #ob-header .bb-menu{right: 12px !important;width: 38px !important;height: 38px !important}
  #ob-header .bb-title small,#ob-header .bb-brand small,#ob-header .bb-upg span{display: none !important}
  #ob-header .bb-title b{font-size: 14px !important;line-height: 1.2 !important;white-space: normal !important;max-width: 7.5em !important}
  #ob-header .bb-egg{height: 36px !important}
  #ob-header .bb-egg:nth-child(n+5){display: none !important}
  #ob-header .bb-shelf{justify-content: space-evenly !important}
  #ob-header .bb-brand b{font-size: 15px !important}
  #ob-header .bb-tiles{gap: 6px !important}
  #ob-header .bb-tile{width: 34px !important;height: 32px !important;border-radius: 9px !important}
  #ob-header .bb-tile svg{width: 16px !important;height: 16px !important}
  #ob-header .bb-tile:nth-child(n+4){display: none !important}
  #ob-header .bb-upg b{font-size: 13px !important;white-space: normal !important;line-height: 1.2 !important;max-width: 9em !important}
  #ob-header .bb-holo{width: 76px !important;height: 44px !important;padding: 6px 7px !important;border-radius: 9px !important}
  #ob-header .bb-holo b{font-size: 12px !important;margin-top: 6px !important}
  #ob-header .bb-holo small{font-size: 5px !important}
  #ob-header .bb-holo i{width: 10px !important;height: 8px !important;top: 6px !important;right: 7px !important}
  #ob-header .bb-holo:nth-child(3){display: none !important}
}

/* ---------- Persian ---------- */
#ob-header[lang="fa"] .bb-content{direction: rtl !important}
#ob-header[lang="fa"] .bb-neon,#ob-header[lang="fa"] .bb-title small,#ob-header[lang="fa"] .bb-brand small,#ob-header[lang="fa"] .bb-tag{letter-spacing: 0 !important;font-family: "Vazirmatn", var(--ob-tech) !important;font-weight: 700 !important}
#ob-header[lang="fa"] .bb-brand b,#ob-header[lang="fa"] .bb-holo b{font-family: var(--ob-tech) !important;font-weight: 400 !important;letter-spacing: .08em !important}
#ob-header[lang="fa"] .bb-tiles,#ob-header[lang="fa"] .bb-deck{margin-left: 0 !important;margin-right: auto !important}
#ob-header[lang="fa"] .bb-cta{font-family: "Vazirmatn", var(--ob-font) !important}
#ob-header[lang="fa"] .bb-ticker span{letter-spacing: .08em !important;font-family: "Vazirmatn", var(--ob-tech) !important}

/* ---------- calm version: no motion, a plain crossfade ---------- */
#ob-header .bb.calm *,#ob-header .bb.calm *::before,#ob-header .bb.calm *::after{animation: none !important}
@media (prefers-reduced-motion: reduce){
  #ob-header .bb *,#ob-header .bb *::before,#ob-header .bb *::after{animation: none !important}
}