/* ============================================================
   Twin Eagles Radio — Polish Layer
   Site-wide micro-interactions, balanced tone.
   Honors prefers-reduced-motion.
   ============================================================ */

/* ---- TIMING TOKENS ---- */
:root {
    --ter-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --ter-ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
    --ter-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --ter-fast:   120ms;
    --ter-base:   200ms;
    --ter-slow:   320ms;
    --ter-entry:  400ms;
}

/* ============================================================
   PAGE ENTRANCE — content fades up from below with stagger
   ============================================================ */
@keyframes ter-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Apply to main containers on each page */
.ls-wrap > *,
.dd-wrap > *,
.eet-wrap > *,
.ntt-wrap > *,
main > *,
.page-content > *,
.container > .card,
.ls-hero,
.dd-hero {
    animation: ter-fade-up var(--ter-entry) var(--ter-ease-out) both;
}

/* Stagger children */
.ls-wrap > *:nth-child(1),
.dd-wrap > *:nth-child(1),
main > *:nth-child(1)    { animation-delay: 0ms; }
.ls-wrap > *:nth-child(2),
.dd-wrap > *:nth-child(2),
main > *:nth-child(2)    { animation-delay: 60ms; }
.ls-wrap > *:nth-child(3),
.dd-wrap > *:nth-child(3),
main > *:nth-child(3)    { animation-delay: 120ms; }
.ls-wrap > *:nth-child(4),
.dd-wrap > *:nth-child(4),
main > *:nth-child(4)    { animation-delay: 180ms; }
.ls-wrap > *:nth-child(5),
.dd-wrap > *:nth-child(5),
main > *:nth-child(5)    { animation-delay: 240ms; }

/* Hero entrance — slightly longer for impact */
.ls-hero,
.dd-hero {
    animation-duration: 550ms;
}

/* ============================================================
   BUTTONS — lift + scale on hover, press on active
   ============================================================ */
.btn,
.ls-btn,
.dd-btn,
.btn-gold,
.btn-ghost,
.btn-outline,
.btn-danger,
.btn-green,
button.btn,
a.btn {
    transition:
        background-color var(--ter-base) var(--ter-ease-soft),
        border-color     var(--ter-base) var(--ter-ease-soft),
        color            var(--ter-base) var(--ter-ease-soft),
        transform        var(--ter-base) var(--ter-ease-out),
        box-shadow       var(--ter-base) var(--ter-ease-out) !important;
}

.btn:hover:not(:disabled),
.ls-btn:hover:not(:disabled),
.dd-btn:hover:not(:disabled),
button.btn:hover:not(:disabled),
a.btn:hover {
    transform: translateY(-1px);
}

.btn-gold:hover:not(:disabled),
.ls-btn-gold:hover:not(:disabled),
.dd-btn-gold:hover:not(:disabled) {
    box-shadow: 0 6px 16px rgba(200,168,75,0.25);
}

.btn:active:not(:disabled),
.ls-btn:active:not(:disabled),
.dd-btn:active:not(:disabled),
button.btn:active:not(:disabled),
a.btn:active {
    transform: translateY(0) scale(0.98);
    transition-duration: var(--ter-fast);
    transition-timing-function: var(--ter-ease-in);
}

/* Decade grid buttons (Decade Dash) — slightly more pronounced */
.dd-decade-btn {
    transition:
        background-color var(--ter-base) var(--ter-ease-soft),
        border-color     var(--ter-base) var(--ter-ease-soft),
        color            var(--ter-base) var(--ter-ease-soft),
        transform        var(--ter-base) var(--ter-ease-out) !important;
}
.dd-decade-btn:hover:not(:disabled) {
    transform: translateY(-2px);
}
.dd-decade-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.97);
    transition-duration: var(--ter-fast);
}

/* Difficulty pills — same treatment */
.ls-diff-btn, .dd-diff-btn {
    transition:
        background-color var(--ter-base) var(--ter-ease-soft),
        border-color     var(--ter-base) var(--ter-ease-soft),
        color            var(--ter-base) var(--ter-ease-soft),
        transform        var(--ter-base) var(--ter-ease-out) !important;
}
.ls-diff-btn:hover, .dd-diff-btn:hover { transform: translateY(-1px); }

/* ============================================================
   CARDS — subtle lift + gold accent on hover
   ============================================================ */
.card,
.ls-card,
.dd-card,
.summary-card,
.stat-card {
    transition:
        transform var(--ter-base) var(--ter-ease-out),
        box-shadow var(--ter-base) var(--ter-ease-out),
        border-color var(--ter-base) var(--ter-ease-soft) !important;
}

/* Only lift cards that don't contain interactive forms (skip form cards) */
.card:hover:not(:focus-within),
.summary-card:hover,
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.25);
}

/* Editor-card quick links (admin/games.php) — more pronounced */
a.editor-card:hover,
a[href$=".php"][style*="border-top:2px solid"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(200,168,75,0.12);
}

/* ============================================================
   LEADERBOARD ROWS — soft highlight on hover
   ============================================================ */
.ls-rank-row,
.dd-rank-row,
.rank-row {
    transition: background-color var(--ter-fast) var(--ter-ease-soft);
}
.ls-rank-row:hover,
.dd-rank-row:hover,
.rank-row:hover {
    background-color: rgba(200,168,75,0.04);
}

/* ============================================================
   WORD CHIPS (Lyrics Scramble) — playful pop on click
   ============================================================ */
.ls-word {
    transition:
        background-color var(--ter-base) var(--ter-ease-soft),
        border-color     var(--ter-base) var(--ter-ease-soft),
        opacity          var(--ter-base) var(--ter-ease-soft),
        transform        var(--ter-fast) var(--ter-ease-out) !important;
}
.ls-word:hover:not(.placed) {
    transform: translateY(-1px) scale(1.03);
}
.ls-word:active:not(.placed) {
    transform: scale(0.95);
    transition-duration: 80ms;
}

.ls-answer-word {
    animation: ter-pop-in 250ms var(--ter-ease-out);
    transition: opacity var(--ter-fast), transform var(--ter-fast);
}
.ls-answer-word:hover {
    transform: scale(0.96);
}
@keyframes ter-pop-in {
    from { opacity: 0; transform: scale(0.7) translateY(4px); }
    60%  { transform: scale(1.05); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============================================================
   FORM FIELDS — focus state with subtle gold pulse
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="search"],
textarea,
select {
    transition:
        border-color var(--ter-base) var(--ter-ease-soft),
        background-color var(--ter-base) var(--ter-ease-soft),
        box-shadow var(--ter-base) var(--ter-ease-soft) !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    box-shadow: 0 0 0 3px rgba(200,168,75,0.10);
}

/* ============================================================
   NAVIGATION — link underline animation
   ============================================================ */
nav a,
.nav-link,
.main-nav a {
    position: relative;
    transition: color var(--ter-base) var(--ter-ease-soft);
}
nav a::after,
.nav-link::after,
.main-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 1px;
    background: var(--gold, #C8A84B);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--ter-base) var(--ter-ease-out);
}
nav a:hover::after,
.nav-link:hover::after,
.main-nav a:hover::after {
    transform: scaleX(1);
}

/* Dropdown caret rotation */
.nav-dropdown.open .caret,
.user-menu.open .caret,
[aria-expanded="true"] .caret {
    transform: rotate(180deg);
}
.caret {
    display: inline-block;
    transition: transform 250ms var(--ter-ease-out);
}

/* ============================================================
   PLAYER BAR — volume thumb, smooth transitions
   ============================================================ */
.player-bar,
#playerBar,
.pb-bar {
    transition:
        background-color var(--ter-base),
        transform var(--ter-slow) var(--ter-ease-out);
}

.pb-play,
.pb-toggle,
button.pb-btn {
    transition:
        background-color var(--ter-base) var(--ter-ease-soft),
        transform var(--ter-base) var(--ter-ease-out) !important;
}
.pb-play:hover,
.pb-toggle:hover,
button.pb-btn:hover {
    transform: scale(1.06);
}
.pb-play:active,
.pb-toggle:active,
button.pb-btn:active {
    transform: scale(0.94);
    transition-duration: var(--ter-fast);
}

/* Volume track */
.pb-volume,
.volume-track {
    transition: opacity var(--ter-base) var(--ter-ease-soft);
}
.pb-volume:hover,
.volume-track:hover {
    opacity: 1;
}

/* ============================================================
   TABS — smooth indicator
   ============================================================ */
.tab-btn,
.ls-tab-btn,
.dd-tab-btn,
.admin-tab {
    transition:
        background-color var(--ter-base) var(--ter-ease-soft),
        color            var(--ter-base) var(--ter-ease-soft),
        border-color     var(--ter-base) var(--ter-ease-soft) !important;
}

/* ============================================================
   FEEDBACK BANNERS — slide in from above
   ============================================================ */
.ls-feedback.show,
.dd-feedback.show,
.flash-success,
.flash-error,
.flash-warning {
    animation: ter-slide-down 280ms var(--ter-ease-out);
}
@keyframes ter-slide-down {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   TIMER BAR — already animates width; ensure smooth
   ============================================================ */
.ls-timer-bar,
.dd-timer-bar,
.timer-bar {
    transition: width 950ms linear;
}

/* ============================================================
   IMAGES & LOGO — gentle scale on hover
   ============================================================ */
.logo,
.site-logo img,
.show-thumb,
.dj-avatar,
img.hover-zoom {
    transition: transform var(--ter-slow) var(--ter-ease-out);
}
.logo:hover,
a:hover > .logo,
.show-card:hover .show-thumb {
    transform: scale(1.03);
}

/* ============================================================
   TABLE ROWS — admin tables
   ============================================================ */
.admin-table tr,
.table tr {
    transition: background-color var(--ter-fast) var(--ter-ease-soft);
}

/* ============================================================
   LINKS — gold color shift
   ============================================================ */
a {
    transition: color var(--ter-base) var(--ter-ease-soft);
}

/* ============================================================
   CHECKBOX & RADIO — subtle accent
   ============================================================ */
input[type="checkbox"],
input[type="radio"] {
    transition: transform var(--ter-fast) var(--ter-ease-out);
}
input[type="checkbox"]:hover,
input[type="radio"]:hover {
    transform: scale(1.1);
}

/* ============================================================
   STAT NUMBERS — gentle pulse on first appearance
   ============================================================ */
.ls-stat-num,
.dd-stat-num,
.stat-num,
.summary-num {
    animation: ter-fade-up var(--ter-entry) var(--ter-ease-out) both;
    animation-delay: 200ms;
}

/* ============================================================
   ICONS — slight bounce when used as buttons
   ============================================================ */
.icon-btn,
button .icon,
.btn .icon {
    transition: transform var(--ter-base) var(--ter-ease-out);
}
.icon-btn:hover {
    transform: scale(1.08) rotate(-2deg);
}

/* ============================================================
   ADMIN SIDEBAR — link hover
   ============================================================ */
.admin-sidebar a,
.sidebar a {
    transition:
        background-color var(--ter-base) var(--ter-ease-soft),
        color            var(--ter-base) var(--ter-ease-soft),
        padding-left     var(--ter-base) var(--ter-ease-out);
}
.admin-sidebar a:hover,
.sidebar a:hover {
    padding-left: calc(var(--sidebar-padding, 16px) + 4px);
}

/* ============================================================
   MODAL / DIALOG — fade + scale entrance
   ============================================================ */
.modal.open .modal-content,
.dialog[open] {
    animation: ter-modal-in 280ms var(--ter-ease-out);
}
@keyframes ter-modal-in {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============================================================
   REDUCED MOTION — respect user preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}