/* Site-wide motion layer for every customer page (Rank vs Bot, Topup, History, Akun, Leaderboard).
   One orchestrated entrance per page + motion that answers the customer's actions. Additive only. */

/* --- Page title: letters rise, then a gold glint runs across once in a while --- */
.fx-ttl .fx-c{display:inline-block;opacity:0;transform:translateY(.4em);filter:blur(5px)}
.fx-ttl.fx-play .fx-c{animation:fxC .65s cubic-bezier(.2,.75,.25,1) forwards;animation-delay:var(--d)}
@keyframes fxC{to{opacity:1;transform:none;filter:none}}
.fx-ttl.fx-shine .fx-c{opacity:1;transform:none;filter:none;animation:fxShine 7s var(--g) ease-in-out infinite}
@keyframes fxShine{0%,7%,100%{color:inherit}3%{color:#fff4d6;text-shadow:0 0 16px #f5dfaa}}
.inner-hero .eyebrow,.leaderboard-banner-label{position:relative;display:inline-block}
.page.fx-on .inner-hero .eyebrow::after,.page.fx-on .leaderboard-banner-label::after{content:"";position:absolute;left:50%;bottom:-6px;height:1px;width:0;transform:translateX(-50%);
background:linear-gradient(90deg,transparent,#f5dfaa,transparent);animation:fxLine .9s .5s cubic-bezier(.2,.75,.25,1) forwards}
@keyframes fxLine{to{width:120%}}
.inner-hero p{transition:opacity .6s .6s}
.page:not(.fx-on) .inner-hero p{opacity:0}

/* Hero dust (inner pages) */
.inner-hero,.leaderboard-banner-frame{position:relative}
.fx-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.inner-hero>.container,.leaderboard-banner-frame>*:not(.fx-dust){position:relative;z-index:1}

/* --- Panels enter in sequence and their gold corners draw in --- */
.fx-panel{opacity:0;transform:translateY(22px)}
.fx-panel.fx-in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.75,.25,1),transform .7s cubic-bezier(.2,.75,.25,1);transition-delay:var(--d,0s)}
.ornate-panel.fx-in::before{animation:fxCorners 1s var(--d,0s) cubic-bezier(.2,.75,.25,1) both}
@keyframes fxCorners{
  from{background-size:0 1px,1px 0,0 1px,1px 0;opacity:0}
  to{background-size:16px 1px,1px 16px,16px 1px,1px 16px;opacity:.65}}

/* --- Order form: the step you are filling lights up --- */
.form-heading>span{transition:background .35s,box-shadow .35s,color .35s,transform .35s}
.form-block:focus-within .form-heading>span{background:linear-gradient(110deg,#9d753a,#f5dfaa 45%,#be985a);color:#110e09;box-shadow:0 0 16px #e6bc6970;transform:scale(1.08)}
.form-block{position:relative}
.form-block::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:linear-gradient(90deg,#f5dfaa,transparent);transition:width .6s cubic-bezier(.2,.75,.25,1)}
.form-block:focus-within::after{width:100%}
input:focus,textarea:focus,select:focus{transition:border-color .25s,box-shadow .25s}

/* Choosing VIP/VVIP or a rank: the card answers with a ring burst */
.category-option-content{position:relative;transition:transform .3s,border-color .3s,box-shadow .3s}
.category-option:hover .category-option-content{transform:translateY(-3px)}
.category-option-content img,.category-option-content .category-crest{transition:transform .5s cubic-bezier(.2,.75,.25,1),filter .5s}
.category-option input:checked+.category-option-content img,.category-option input:checked+.category-option-content .category-crest{transform:scale(1.08);filter:drop-shadow(0 0 16px #e6bc6999)}
.category-option-content.fx-burst::after{content:"";position:absolute;left:50%;top:42%;width:40px;height:40px;margin:-20px;border-radius:50%;pointer-events:none;
border:1.5px solid #f5dfaa;box-shadow:0 0 18px #e6bc69;animation:fxBurst .7s ease-out forwards}
@keyframes fxBurst{from{opacity:.95;transform:scale(.4)}to{opacity:0;transform:scale(4.2)}}

/* Totals tick when they change */
.fx-tick{animation:fxTick .45s cubic-bezier(.2,.75,.25,1)}
@keyframes fxTick{0%{transform:translateY(-5px);text-shadow:0 0 18px #f5dfaa;color:#fff4d6}100%{transform:none}}
#totalPrice,#topupTotal{display:inline-block;font-variant-numeric:tabular-nums}

/* --- Topup: picking a game / nominal pops --- */
.topup-brand,.topup-item{transition:transform .25s,border-color .25s,box-shadow .25s}
.topup-brand:hover,.topup-item:hover{transform:translateY(-3px);border-color:#d5b784aa}
.topup-brand.active,.topup-item.active{animation:fxPick .45s cubic-bezier(.2,.75,.25,1)}
@keyframes fxPick{0%{transform:scale(.94)}60%{transform:scale(1.04)}100%{transform:none}}
.topup-brand.active .topup-brand-img{box-shadow:0 0 0 2px #f1d49b,0 0 18px #e6bc6980}

/* --- Leaderboard: podium rises silver -> gold -> bronze, then table rows --- */
.fx-rise{opacity:0;transform:translateY(40px) scale(.96)}
.fx-rise.fx-in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.75,.25,1),transform .8s cubic-bezier(.2,.75,.25,1);transition-delay:var(--d,0s)}
.podium-gold.fx-in{animation:fxCrown 3.5s 1.2s ease-in-out infinite}
@keyframes fxCrown{0%,100%{box-shadow:0 0 40px #bb96ef25}50%{box-shadow:0 0 60px #e6bc6960,0 0 0 1px #f5dfaa66}}
.fx-row{opacity:0;transform:translateX(-10px)}
.fx-row.fx-in{opacity:1;transform:none;transition:opacity .5s,transform .5s;transition-delay:var(--d,0s)}
.premium-leaderboard-title{position:relative}

/* --- History cards and customer panels lift on hover --- */
.history-card{transition:transform .3s,border-color .3s,box-shadow .3s}
.history-card:hover{transform:translateY(-2px);border-color:#d5b784aa;box-shadow:0 14px 30px -18px #e6bc6990}

@media (prefers-reduced-motion:reduce){
  .fx-ttl .fx-c,.fx-panel,.fx-rise,.fx-row,.page:not(.fx-on) .inner-hero p{opacity:1!important;transform:none!important;filter:none!important}
  .fx-ttl *,.fx-panel,.fx-rise,.fx-row,.ornate-panel::before,.fx-tick,.podium-gold,.category-option-content::after{animation:none!important;transition:none!important}
  .fx-dust{display:none}
}