/* Bingalo city carousel plus 25 interaction motions and 10 quiet live-marketplace motions. */
.banner-slide>div{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.banner-slide p{margin-bottom:20px;max-width:560px}
.banner-slide .button{position:relative;z-index:2;margin-top:4px;flex:0 0 auto}

.trending-cities{margin:82px 0 88px;opacity:0;transform:translateY(18px)}
.trending-cities.motion-visible{animation:bingaloInt01 .65s cubic-bezier(.2,.75,.25,1) both}
.city-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.city-heading h2{margin:0 0 9px;max-width:720px;font-size:clamp(32px,4vw,48px);line-height:1.02;letter-spacing:-1.8px;color:#123b4d}
.city-heading p{margin:0;color:#667f8b;font-size:13px;line-height:1.65}
.city-heading-actions{display:flex;align-items:center;gap:9px}
.city-live-note{display:inline-flex;align-items:center;gap:7px;background:#eef9f5;color:#2d7561;padding:8px 11px;border-radius:999px;font-size:10px;font-weight:700;white-space:nowrap}
.city-live-dot{width:8px;height:8px;border-radius:50%;background:#24b879;box-shadow:0 0 0 0 #24b87955;animation:bingaloLive01 2.2s ease-out infinite}
.city-controls{display:flex;gap:7px}
.city-controls .icon-button:hover{animation:bingaloInt06 .42s ease}
.city-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(320px,1fr);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:7px 5px 18px;overscroll-behavior-inline:contain}
.city-track::-webkit-scrollbar{display:none}
.city-card-shell{position:relative;scroll-snap-align:start;border:1px solid #dbe8ed;border-radius:30px;background:#fff;overflow:hidden;min-height:421px;box-shadow:0 18px 48px #123b4d1a,0 2px 8px #123b4d0b;transition:transform .4s cubic-bezier(.2,.75,.25,1),box-shadow .4s ease}
.city-card-shell:hover{transform:translateY(-9px);box-shadow:0 32px 70px #123b4d2b,0 6px 16px #123b4d12}
.city-card{display:block;position:relative;width:100%;height:382px;padding:0;border:0;background:#dce9ee;overflow:hidden;text-align:start;cursor:pointer;color:#fff}
.city-card img{width:100%;height:100%;display:block;object-fit:cover;transform:scale(1.01);filter:saturate(1.08) contrast(1.035);transition:transform 1.15s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.city-card:hover img{transform:scale(1.075);filter:saturate(1.17) contrast(1.055)}
.city-card:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,24,33,.1) 0%,transparent 32%,rgba(5,24,34,.15) 55%,rgba(5,23,32,.96) 100%)}
.city-card:before{content:'';position:absolute;z-index:1;inset:0;box-shadow:inset 0 0 0 1px #ffffff2e,inset 0 -100px 120px #071f2d22;pointer-events:none}
.city-card-kicker{position:absolute;z-index:2;top:18px;inset-inline-start:18px;padding:8px 11px;border:1px solid #ffffff55;border-radius:999px;background:#071f2d80;backdrop-filter:blur(12px);font-size:9px;letter-spacing:1.4px;font-weight:850;color:#fff}
.city-card-copy{position:absolute;z-index:2;inset-inline:22px;bottom:23px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.city-card-copy strong{display:block;font-size:32px;line-height:1;letter-spacing:-1px;text-shadow:0 3px 22px #0009}
.city-card-copy small{display:block;margin-top:9px;max-width:225px;color:#eaf7fb;font-size:11px;line-height:1.4;font-weight:680;text-shadow:0 2px 12px #0008}
.city-card-copy>span:last-child{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#087fbb;box-shadow:0 10px 25px #0005;transition:transform .3s ease}
.city-card:hover .city-card-copy>span:last-child{animation:bingaloInt05 .5s ease both}
.city-credit{display:block;height:39px;padding:12px 16px 0;color:#718995;font-size:8px;letter-spacing:.15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.city-credit:hover{color:#087fbb;text-decoration:underline}
.city-card-shell:nth-child(1){animation-delay:.04s}.city-card-shell:nth-child(2){animation-delay:.1s}.city-card-shell:nth-child(3){animation-delay:.16s}.city-card-shell:nth-child(4){animation-delay:.22s}.city-card-shell:nth-child(5){animation-delay:.28s}.city-card-shell:nth-child(6){animation-delay:.34s}
.trending-cities.motion-visible .city-card-shell{animation:bingaloInt03 .62s cubic-bezier(.18,.82,.2,1) both}

.market-banner.motion-visible .banner-slide.active .eyebrow{animation:bingaloInt02 .6s .08s ease both}
.market-banner.motion-visible .banner-slide.active h1{animation:bingaloInt04 .7s .14s cubic-bezier(.2,.8,.2,1) both}
.market-banner.motion-visible .banner-slide.active p{animation:bingaloInt07 .65s .21s ease both}
.market-banner.motion-visible .banner-slide.active .button{animation:bingaloInt08 .65s .28s cubic-bezier(.2,.8,.2,1) both}
.market-banner-image img{animation:bingaloLive02 14s ease-in-out infinite alternate}
.market-banner:before{content:'';position:absolute;z-index:2;pointer-events:none;top:0;bottom:0;width:28%;left:-35%;background:linear-gradient(100deg,transparent,#ffffff23,transparent);animation:bingaloLive03 10s ease-in-out infinite}
.featured-section.motion-visible .featured-card{animation:bingaloInt09 .55s ease both}
.featured-card:hover .premium-badge{animation:bingaloInt10 .55s ease}
.product-card:hover .product-price{animation:bingaloInt11 .38s ease}
.save-button:active{animation:bingaloInt12 .4s ease}
.search-bar:focus-within{animation:bingaloInt13 .42s ease both}
.category-button:hover .category-icon{animation:bingaloInt14 .42s ease}
.login-button:hover{animation:bingaloInt15 .38s ease}
.modal-head{animation:bingaloInt16 .35s ease both}
.form-field:focus-within{animation:bingaloInt17 .4s ease}
.social-button:active{animation:bingaloInt18 .33s ease}
.otp-digits input:focus{animation:bingaloInt19 1.4s ease-in-out infinite}
.toast.visible{animation:bingaloInt20 .42s cubic-bezier(.2,.8,.2,1) both}
.chip:active{animation:bingaloInt21 .34s ease}
.page-links a:active{animation:bingaloInt22 .35s ease}
.location-map-button:hover svg{animation:bingaloInt23 .5s ease}
.trust-chip.verified svg{animation:bingaloInt24 .7s ease}
.footer-newsletter .button:hover svg{animation:bingaloInt25 .45s ease}
.product-grid .product-card:nth-child(5n+1) .product-image:after{content:'';position:absolute;inset:-50%;pointer-events:none;background:linear-gradient(105deg,transparent 43%,#ffffff26 49%,transparent 55%);animation:bingaloLive04 11s ease-in-out infinite}
.contact-launcher{animation:bingaloLive05 4.2s ease-in-out infinite}
.banner-controls button[aria-pressed=true]{animation:bingaloLive06 2.8s ease-in-out infinite}
.local-feature>span{animation:bingaloLive07 5s ease-in-out infinite}
.sell-art .sell-photo:first-child{animation:bingaloLive08 7s ease-in-out infinite}
.sell-art .sell-photo:last-child{animation:bingaloLive09 7s 1.1s ease-in-out infinite}
.footer-newsletter{background-size:200% 200%;animation:bingaloLive10 12s ease-in-out infinite}

/* 25 interaction animations */
@keyframes bingaloInt01{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes bingaloInt02{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes bingaloInt03{from{opacity:0;transform:translateY(25px) scale(.96)}to{opacity:1;transform:none}}
@keyframes bingaloInt04{from{opacity:0;transform:translateY(18px);letter-spacing:.01em}to{opacity:1;transform:none}}
@keyframes bingaloInt05{0%{transform:translateX(0)}55%{transform:translateX(6px)}100%{transform:none}}
@keyframes bingaloInt06{50%{transform:scale(1.09) rotate(3deg)}}
@keyframes bingaloInt07{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes bingaloInt08{from{opacity:0;transform:translateY(12px) scale(.96)}70%{transform:translateY(-2px) scale(1.01)}to{opacity:1;transform:none}}
@keyframes bingaloInt09{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes bingaloInt10{50%{transform:scale(1.05);filter:brightness(1.12)}}
@keyframes bingaloInt11{45%{transform:translateY(-2px) scale(1.035);color:#008bd5}}
@keyframes bingaloInt12{35%{transform:scale(.78)}70%{transform:scale(1.14)}}
@keyframes bingaloInt13{50%{box-shadow:0 0 0 4px #008bd518,0 8px 24px #173f5214}}
@keyframes bingaloInt14{35%{transform:translateY(-3px) rotate(-5deg)}70%{transform:translateY(0) rotate(3deg)}}
@keyframes bingaloInt15{50%{transform:translateY(-2px);color:#008bd5}}
@keyframes bingaloInt16{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes bingaloInt17{50%{transform:translateY(-1px)}}
@keyframes bingaloInt18{50%{transform:scale(.97);background:#eff8fd}}
@keyframes bingaloInt19{50%{box-shadow:0 0 0 4px #008bd516;border-color:#008bd5}}
@keyframes bingaloInt20{from{opacity:0;transform:translate(-50%,14px) scale(.96)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes bingaloInt21{50%{transform:scale(.95)}}
@keyframes bingaloInt22{50%{transform:scale(.86)}to{transform:scale(1)}}
@keyframes bingaloInt23{40%{transform:translateY(-3px)}70%{transform:translateY(1px)}}
@keyframes bingaloInt24{0%{transform:scale(.4);opacity:.3}60%{transform:scale(1.25)}to{transform:scale(1);opacity:1}}
@keyframes bingaloInt25{50%{transform:translateX(4px)}}

/* 10 subtle animations that make the marketplace feel active */
@keyframes bingaloLive01{0%{box-shadow:0 0 0 0 #24b87966}70%{box-shadow:0 0 0 8px #24b87900}to{box-shadow:0 0 0 0 #24b87900}}
@keyframes bingaloLive02{from{transform:scale(1.015)}to{transform:scale(1.055)}}
@keyframes bingaloLive03{0%,35%{left:-35%}60%,100%{left:120%}}
@keyframes bingaloLive04{0%,60%{transform:translateX(-55%) rotate(8deg)}85%,100%{transform:translateX(55%) rotate(8deg)}}
@keyframes bingaloLive05{0%,88%,100%{transform:translateY(0)}92%{transform:translateY(-4px)}96%{transform:translateY(1px)}}
@keyframes bingaloLive06{50%{opacity:.65;transform:scale(.9)}}
@keyframes bingaloLive07{50%{transform:translateY(-3px);box-shadow:0 7px 17px #008bd518}}
@keyframes bingaloLive08{50%{transform:translateY(-5px) rotate(-1deg)}}
@keyframes bingaloLive09{50%{transform:translateY(4px) rotate(1deg)}}
@keyframes bingaloLive10{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}

.auth-direct{border:1px solid #d8e7ed;background:linear-gradient(145deg,#fbfdfe,#f3f9fc);border-radius:17px;padding:16px;margin:17px 0 5px}
.auth-direct>h3{font-size:14px;color:#254f62;margin:0 0 13px}
.auth-methods{display:grid;grid-template-columns:1fr 1fr;background:#e9f1f5;padding:4px;border-radius:12px;margin-bottom:12px}
.auth-methods button{border:0;background:transparent;color:#6a818d;border-radius:9px;padding:10px;font-weight:750}
.auth-methods button.active{background:#fff;color:#087fba;box-shadow:0 2px 9px #173e5014}
.auth-choice-card{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #d9e6ec;border-radius:13px;padding:13px;margin-bottom:11px}
.auth-choice-icon{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;background:#e9f6fd;color:#087fba;font-weight:850;font-size:17px;flex:0 0 auto}
.auth-choice-card strong,.auth-choice-card small{display:block}.auth-choice-card strong{font-size:12px;color:#23495b}.auth-choice-card small{font-size:9px;color:#7c929d;line-height:1.55;margin-top:4px}
.auth-activation-disclosure{font-size:9px;line-height:1.55;color:#7f929b;margin:10px 2px 0;text-align:center}

@media(max-width:760px){
  .trending-cities{margin:52px 0 58px}
  .city-heading{align-items:flex-start;flex-direction:column}
  .city-heading-actions{width:100%;justify-content:space-between}
  .city-heading h2{font-size:34px;letter-spacing:-1.2px}
  .city-track{grid-auto-columns:88%;gap:16px;padding-bottom:14px}
  .city-card-shell{min-height:383px;border-radius:25px}.city-card{height:345px}.city-card-copy strong{font-size:29px}
  .banner-slide p{margin-bottom:22px}
}

@media(prefers-reduced-motion:reduce){
  .trending-cities,.trending-cities.motion-visible,.trending-cities.motion-visible .city-card-shell,
  .market-banner *,.featured-section *,.product-card *,.search-bar,.category-button *,.login-button,
  .modal-head,.form-field,.social-button,.otp-digits input,.toast,.chip,.page-links a,
  .location-map-button svg,.trust-chip svg,.footer-newsletter,.contact-launcher,.local-feature>span,
  .sell-art .sell-photo,.city-live-dot{animation:none!important;transition:none!important}
  .trending-cities{opacity:1;transform:none}.city-card img{transform:none}
}