/* ERA XI game-feel layer: motion, feedback and matchday reveals. Presentation only. */

/* ---------- Screen entry: stagger the page's building blocks in ---------- */
@keyframes fx-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fx-fade{from{opacity:0}to{opacity:1}}
.fx-enter #content>*,
.fx-enter .club-command>*,
.fx-enter .command-report>*{animation:fx-rise .46s cubic-bezier(.2,.8,.25,1) both}
.fx-enter .club-command>:nth-child(2),.fx-enter #content>:nth-child(2),.fx-enter .command-report>:nth-child(1){animation-delay:.06s}
.fx-enter .club-command>:nth-child(3),.fx-enter #content>:nth-child(3),.fx-enter .command-report>:nth-child(2){animation-delay:.12s}
.fx-enter .club-command>:nth-child(4),.fx-enter #content>:nth-child(4),.fx-enter .command-report>:nth-child(3){animation-delay:.18s}
.fx-enter .topbar .hud-location{animation:fx-fade .4s both}

/* ---------- Buttons: tactile press, primary shine ---------- */
.btn,.command-result,.text-btn,.hud-tool,.nav-link{transition:transform .12s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease,filter .2s ease}
.btn:not(:disabled):active,.command-result:active,.hud-tool:active{transform:translateY(1px) scale(.97)}
.btn.primary:not(:disabled){position:relative;overflow:hidden;isolation:isolate}
.btn.primary:not(:disabled)::after{content:"";position:absolute;inset:-2px auto -2px -60%;width:45%;z-index:-1;background:linear-gradient(100deg,transparent,rgb(255 255 255/.38),transparent);transform:skewX(-18deg);pointer-events:none;transition:none;left:-60%}
.btn.primary:not(:disabled):hover::after{left:125%;transition:left .65s ease}
.btn.primary:not(:disabled):hover{filter:brightness(1.07);box-shadow:0 6px 22px var(--theme-glow,#0004),0 0 0 1px color-mix(in srgb,var(--theme-accent) 55%,transparent)}

/* The one call-to-action that moves the season forward breathes. */
@keyframes fx-breathe{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--theme-accent) 45%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--theme-accent) 0%,transparent),0 0 26px color-mix(in srgb,var(--theme-accent) 30%,transparent)}}
.command-kickoff:not(:disabled),[data-action=advance]:not(:disabled).primary{animation:fx-breathe 2.4s ease-in-out infinite}
.command-kickoff:disabled{position:relative;overflow:hidden}
.command-kickoff:disabled::before{content:"";position:absolute;inset:auto 0 0;height:2px;background:linear-gradient(90deg,transparent,var(--theme-accent),transparent);animation:fx-scan 1.3s linear infinite}
@keyframes fx-scan{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* ---------- Home cards: lift on hover ---------- */
.command-match,.command-schedule,.command-news,.command-readiness,.command-league{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.command-match:hover,.command-schedule:hover,.command-news:hover,.command-readiness:hover,.command-league:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgb(0 0 0/.28),inset 0 0 0 1px color-mix(in srgb,var(--theme-accent) 30%,transparent)}
.command-versus strong{text-shadow:0 0 18px color-mix(in srgb,var(--theme-accent) 55%,transparent)}
.command-versus>div svg{transition:transform .3s ease}
.command-match:hover .command-versus>div svg{transform:scale(1.06) rotate(-2deg)}
.command-condition i b{position:relative;overflow:hidden}
.command-condition i b::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgb(255 255 255/.35),transparent);animation:fx-scan 2.8s ease-in-out infinite}

/* Results read like form pips. */
.command-result.win{box-shadow:inset 3px 0 0 var(--rating-70,#58c28a)}
.command-result.draw{box-shadow:inset 3px 0 0 var(--theme-faint)}
.command-result.loss{box-shadow:inset 3px 0 0 var(--theme-red)}
.command-standing.me{position:relative;background:linear-gradient(90deg,color-mix(in srgb,var(--theme-accent) 20%,transparent),transparent 80%)}
.command-standing.me::before{content:"";position:absolute;left:0;top:15%;bottom:15%;width:3px;border-radius:2px;background:var(--theme-accent);box-shadow:0 0 10px var(--theme-accent)}

/* ---------- Ratings: elite bands earn a glow ---------- */
[data-rating-tier="80"]{text-shadow:0 0 10px color-mix(in srgb,currentColor 40%,transparent)}
[data-rating-tier="90"]{text-shadow:0 0 12px color-mix(in srgb,currentColor 65%,transparent);animation:fx-glint 3.2s ease-in-out infinite}
@keyframes fx-glint{0%,100%{filter:none}50%{filter:brightness(1.3)}}

/* ---------- Sidebar ---------- */
.nav-link .nav-icon svg{transition:transform .2s ease}
.nav-link:hover .nav-icon svg{transform:translateX(2px) scale(1.08)}
.nav-link[aria-current=page]{position:relative}
.nav-link[aria-current=page] .nav-icon{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--theme-accent) 70%,transparent))}
.nav-link[aria-current=page]::after{content:"";position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:0 3px 3px 0;background:var(--theme-accent);box-shadow:0 0 12px var(--theme-accent);animation:fx-fade .3s both}
.nav-link[data-hotkey]::before{content:attr(data-hotkey);position:absolute;right:6px;top:5px;font:600 9px/1 ui-monospace,monospace;color:var(--theme-faint);opacity:0;transition:opacity .2s}
.nav-link{position:relative}
.sidebar:hover .nav-link[data-hotkey]::before{opacity:.8}

/* ---------- HUD ---------- */
.hud-funds{position:relative}
.fx-bump .money{animation:fx-pop .5s ease}
@keyframes fx-pop{40%{transform:scale(1.12)}}
.fx-delta{position:absolute;right:0;top:-2px;font-size:12px;font-weight:700;line-height:1;pointer-events:none;animation:fx-float 1.9s ease-out forwards;white-space:nowrap}
.fx-delta.up{color:var(--rating-70,#6fd49a)}
.fx-delta.down{color:var(--theme-red)}
@keyframes fx-float{0%{opacity:0;transform:translateY(8px)}15%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(-18px)}}
.sfx-tool{opacity:.55}
.sfx-tool.is-on{opacity:1;color:var(--theme-accent)}

/* ---------- Toast: game-style banner with timer ---------- */
@keyframes fx-toast{from{opacity:0;transform:translate(-50%,16px) scale(.96)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes fx-timer{from{transform:scaleX(1)}to{transform:scaleX(0)}}
#toast:not([hidden]){animation:fx-toast .32s cubic-bezier(.2,.9,.3,1.2) both;padding-left:46px;overflow:hidden;border-left:3px solid var(--theme-accent)}
#toast::before{content:"✓";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:700 12px/1 sans-serif;background:var(--theme-accent);color:var(--theme-accent-ink)}
#toast.error{border-left-color:var(--theme-red)}
#toast.error::before{content:"!";background:var(--theme-red)}
#toast:not([hidden])::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;opacity:.35;transform-origin:left;animation:fx-timer 4.5s linear forwards}
#toast.error:not([hidden])::after{animation-duration:14s}

/* ---------- Notification stack ---------- */
#fxStack{position:fixed;right:18px;bottom:64px;z-index:90;display:grid;gap:8px;width:min(320px,calc(100vw - 32px));pointer-events:none}
.fx-note{pointer-events:auto;position:relative;overflow:hidden;display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:8px;background:color-mix(in srgb,var(--theme-panel-raised) 92%,transparent);border:1px solid var(--theme-line);color:var(--theme-text);text-decoration:none;box-shadow:0 10px 30px rgb(0 0 0/.35);backdrop-filter:blur(8px);animation:fx-slide .42s cubic-bezier(.2,.9,.3,1.15) both;cursor:pointer}
.fx-note.out{animation:fx-slide-out .3s ease forwards}
@keyframes fx-slide{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes fx-slide-out{to{opacity:0;transform:translateX(40px)}}
.fx-note-icon{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:15px;background:color-mix(in srgb,var(--theme-accent) 22%,transparent);color:var(--theme-accent)}
.fx-note-body{display:grid;gap:2px;min-width:0}
.fx-note-body b{font-size:13px}
.fx-note-body small{font-size:12px;color:var(--theme-muted)}
.fx-note-timer{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--theme-accent);transform-origin:left;animation:fx-timer 5.6s linear forwards;opacity:.6}
.fx-note.up .fx-note-icon{background:color-mix(in srgb,var(--rating-70,#58c28a) 25%,transparent);color:var(--rating-70,#6fd49a)}
.fx-note.up{border-left:3px solid var(--rating-70,#58c28a)}
.fx-note.gold .fx-note-icon{background:#e8c56a33;color:#f0cf74}
.fx-note.gold{border-left:3px solid #e0bd62}
.fx-note.bad{border-left:3px solid var(--theme-red)}
.fx-note.good{border-left:3px solid var(--theme-accent)}

/* ---------- Matchday result reveal ---------- */
.fx-splash{--fx-c:var(--theme-accent);position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--fx-c) 28%,transparent),rgb(3 7 10/.9) 62%);backdrop-filter:blur(5px);animation:fx-fade .3s both;color:#f3f5f2}
.fx-splash.win{--fx-c:#f0cf74}
.fx-splash.draw{--fx-c:#9fb3bd}
.fx-splash.loss{--fx-c:#e0776a}
.fx-splash.out{animation:fx-fade .26s reverse forwards}
.fx-splash-card{position:relative;text-align:center;display:grid;justify-items:center;gap:6px;max-width:640px;width:100%}
.fx-splash-comp{margin:0;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#c6d0d3;animation:fx-rise .4s .1s both}
.fx-splash-word{margin:4px 0 0;font:900 clamp(52px,12vw,112px)/.95 'Pretendard Variable',Pretendard,system-ui,sans-serif;letter-spacing:.06em;color:var(--fx-c);text-shadow:0 0 38px color-mix(in srgb,var(--fx-c) 60%,transparent),0 4px 0 rgb(0 0 0/.35);animation:fx-slam .6s .15s cubic-bezier(.2,1.4,.4,1) both;position:relative}
.fx-splash.win .fx-splash-word{background:linear-gradient(100deg,#b88a2c 20%,#fff2c2 45%,#f0cf74 55%,#b88a2c 80%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fx-slam .6s .15s cubic-bezier(.2,1.4,.4,1) both,fx-sheen 2.6s .8s ease-in-out infinite}
@keyframes fx-slam{from{opacity:0;transform:scale(2.2);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes fx-sheen{from{background-position:100% 0}to{background-position:-150% 0}}
.fx-splash-ko{margin:0;font-size:15px;letter-spacing:.5em;color:#dfe6e4;animation:fx-rise .4s .45s both}
.fx-splash-score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;width:100%;margin:18px 0 4px;animation:fx-rise .45s .6s both}
.fx-splash-score span{font-size:15px;color:#aebcc0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-splash-score span:first-child{text-align:right}
.fx-splash-score span:last-child{text-align:left}
.fx-splash-score span.me{color:#fff;font-weight:700}
.fx-splash-score strong{font:800 clamp(40px,8vw,64px)/1 'Pretendard Variable',Pretendard,system-ui,sans-serif;font-variant-numeric:tabular-nums;padding:6px 20px;border-radius:10px;background:rgb(255 255 255/.06);border:1px solid rgb(255 255 255/.12)}
.fx-splash-score strong i{font-style:normal;opacity:.45;margin:0 .18em}
.fx-splash-rank{margin:6px 0 0;font-size:14px;color:#dfe6e4;animation:fx-rise .4s .75s both}
.fx-splash-rank em{font-style:normal;font-weight:700;margin-left:4px}
.fx-splash-rank em.up{color:#7ddba4}
.fx-splash-rank em.down{color:#ef8f82}
.fx-splash-extra{margin:0;font-size:12px;color:#aebcc0;animation:fx-rise .4s .8s both}
.fx-splash-actions{display:flex;gap:10px;margin-top:20px;animation:fx-rise .4s .9s both}
.fx-splash-actions .btn{min-width:140px}
.fx-confetti{position:absolute;inset:0;pointer-events:none}
.fx-confetti i{position:absolute;top:-4%;left:var(--x);width:8px;height:13px;border-radius:2px;background:#f0cf74;animation:fx-fall var(--t) var(--d) cubic-bezier(.3,.6,.5,1) forwards;opacity:0}
.fx-confetti i[data-c="1"]{background:#fff3cf;width:6px}
.fx-confetti i[data-c="2"]{background:var(--theme-accent);height:9px}
.fx-confetti i[data-c="3"]{background:#e6a93c;border-radius:50%;width:8px;height:8px}
@keyframes fx-fall{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:.9;transform:translate(calc(var(--r)/6),110vh) rotate(var(--r))}}

@media (max-width:640px){
 .fx-splash-score{gap:8px}
 .fx-splash-score strong{padding:4px 12px}
 .fx-splash-actions{flex-direction:column;width:100%}
 #fxStack{right:16px;left:16px;width:auto;bottom:58px}
}
@media (prefers-reduced-motion:reduce){
 .fx-enter #content>*,.fx-enter .club-command>*,.fx-enter .command-report>*,
 .command-kickoff,[data-action=advance],[data-rating-tier="90"],.command-condition i b::after,.command-kickoff:disabled::before,
 .fx-splash *,.fx-note,#toast:not([hidden]){animation:none!important}
 .fx-splash.win .fx-splash-word{color:#f0cf74;background:none}
 .btn.primary:not(:disabled):hover::after{transition:none}
}