/*
 * foil-effect.css
 *
 * Single source of truth for all foil card visuals in the app.
 * This file owns two things:
 *   1. .foil-shimmer  — the one-shot metallic sheen applied to card images
 *   2. .foil-btn / .foil-btn--active  — the Foil toggle button states in the deck editor
 *
 * HOW TO APPLY THE SHIMMER
 * -------------------------
 * Add .foil-shimmer to the immediate *wrapper* element of a card image, NOT to
 * the <img> itself. The effect uses a ::after pseudo-element, which requires a
 * positioned parent:
 *
 *   Good:  <div class="card-image-wrap foil-shimmer"><img ...></div>
 *   Bad:   <img class="foil-shimmer" ...>          (::after won't render)
 *
 * At runtime the wrapper gets .foil-shimmer when card.is_foil === true.
 * No other code needs to change — just add or remove the class.
 *
 * HOW THE ANIMATION WORKS
 * -------------------------
 * Uses a CSS class toggle driven by foil-animation.js:
 *   • .foil-shimmer::after          — shimmer translated off-screen right, transition:none
 *   • .foil-shimmer.foil-active::after — shimmer at translateX(0), transition ease-out
 *
 * foil-animation.js adds .foil-active on mouseenter and removes it on mouseleave.
 * The remove is instant (transition:none on the base rule), so every enter
 * always starts from a clean off-screen position — including moves directly
 * from one foil card to another.
 *
 * overflow:hidden on .foil-shimmer clips the off-screen ::after completely.
 *
 * Timing is randomised per card by foil-animation.js, which sets:
 *   --foil-duration   controls how long the sweep takes (default 0.9 s)
 *
 * HOW TO CHANGE THE EFFECT
 * -------------------------
 * Edit only this file. The relevant knobs:
 *   - gradient angle        → the first argument to linear-gradient()
 *   - colour stops          → the rgba() values and their % positions
 *   - starting position     → the 0% keyframe background-position
 *   - settled position      → the 100% keyframe background-position
 *                             (50% 50% = shimmer band centred on card)
 *   - shimmer band width    → background-size (larger = wider band)
 *
 * WHERE IT IS USED
 * ----------------
 *   • Deck editor  — card view and tile view card images
 *   • Deck editor  — hover/preview card display
 *   • Deck selection tiles — character thumbnail images
 *   • Database view ALL tab — card images
 *   • Database view type tabs — foil option in the art cycle
 *   • Collection view — card images
 *
 * WHAT DRIVES IT AT RUNTIME
 * -------------------------
 * The is_foil boolean on card data returned by the API.
 * If card.is_foil === true, the wrapper element gets .foil-shimmer added.
 * foil-animation.js then sets --foil-duration with slight random variance.
 *
 * FOIL BUTTON STATES
 * ------------------
 * The deck editor Foil button always reads "Foil". Its pressed/unpressed
 * appearance is communicated by adding .foil-btn--active when foil is selected.
 * Both states are defined here so all foil visuals live in one place.
 */

/* ─── Shimmer overlay ──────────────────────────────────────────────────────── */

.foil-shimmer {
    position: relative;
    overflow: hidden;
    /*
     * All four vars are re-randomised on every hover by foil-animation.js,
     * so each shimmer instance looks distinct:
     *
     *   --foil-duration      how long the sweep takes          (0.3 – 1.15 s)
     *   --foil-translate-end where the band stops on the card  (-5% – +5% of element)
     *   --foil-opacity       overall shimmer brightness        (0.55 – 1.0)
     *   --foil-angle         gradient sweep direction          (90 – 150 deg)
     *
     * Defaults below are only a fallback; foil-animation.js overwrites them.
     */
    --foil-duration:      0.9s;
    --foil-translate-end: 0%;
    --foil-opacity:       1;
    --foil-angle:         115deg;
}

.foil-shimmer::after {
    content: '';
    position: absolute;
    /*
     * Gradient restored to the look from the last commit.
     * Angle driven by CSS var so foil-animation.js can randomise the sweep
     * direction; all other colour stops are unchanged from the original.
     */
    background: linear-gradient(
        var(--foil-angle),
        transparent 20%,
        rgba(255, 255, 255, 0.30) 38%,
        rgba(200, 160, 255, 0.45) 50%,
        rgba(255, 210, 100, 0.30) 62%,
        transparent 80%
    );
    opacity: var(--foil-opacity);
    /*
     * The element is intentionally LARGER than the card on all sides:
     *   horizontal: ±20% of card width on each side  (element = 140% card width)
     *   vertical:   ±50% of card height on each side (element = 200% card height)
     *
     * Why: the gradient runs diagonally (var(--foil-angle) ≈ 100–135°). Without
     * extra room the diagonal band would intersect the element's own edges at
     * the card corners, producing a visible hard line where the shimmer stops.
     * overflow:hidden on .foil-shimmer clips all the excess invisibly.
     *
     * The ±20% horizontal padding, combined with clamping translateX to ±5%
     * of element width in foil-animation.js, guarantees that the card edges
     * always land in the gradient's fully-transparent zone (0–20% or 80–100%).
     * This prevents the opaque band from being clipped by overflow:hidden at
     * the card boundary, which would produce a visible hard edge.
     *
     * At translateX(0) the gradient centre (50% of element) sits exactly at
     * 50% of the card: −20% + 50% × 140% = 50%.  Centering is preserved.
     */
    inset: -50% -20%;
    /*
     * Resting state: translated entirely off-screen to the right.
     * overflow:hidden on .foil-shimmer clips it invisibly.
     * transition:none means snap-back is instant when foil-active is
     * removed, so each new sweep always starts from a clean off-screen state.
     */
    transform: translateX(110%);
    transition: none;
    pointer-events: none;
    border-radius: inherit;
    z-index: 1;
}

/*
 * Active state — added by foil-animation.js on mouseenter (and by
 * showCardHoverModal for the hover modal), removed on mouseleave/hide.
 * The transition is declared here so the sweep plays on enter but the
 * snap-back is instant on leave.
 *
 * translateX(var(--foil-translate-end)) lets the band land at a different
 * horizontal position on the card each time instead of always centring.
 */
.foil-shimmer.foil-active::after {
    transform: translateX(var(--foil-translate-end));
    transition: transform var(--foil-duration) ease-out;
}

/*
 * One-shot deck-editor shimmer — used when a card is selected as foil in the
 * deck editor. The sweep plays once on render and stops at the resting position
 * (animation-fill-mode: forwards keeps the final frame visible indefinitely).
 *
 * Applied via .foil-shimmer.foil-once (added by the renderer when
 * card.is_foil === true in card-view and tile-view).
 *
 * On hover, foil-animation.js still adds .foil-active which overrides this
 * animation with the interactive transition, giving the usual per-hover sweep.
 * On mouseleave, .foil-active is removed and the one-shot animation re-runs
 * from the start — so you always see the sweep when you come back to the card.
 */
@keyframes foil-once-sweep {
    from { transform: translateX(110%); }
    to   { transform: translateX(0%); }
}

.foil-shimmer.foil-once::after {
    /*
     * --foil-anim-delay defaults to 0s (normal play).
     * initDeckEditorFoilElements sets it to -100s on already-animated instances
     * so the animation jumps to its end state immediately, keeping the shimmer
     * static on cards that were foil before the re-render.
     * Custom properties cascade into ::after, so this works without touching
     * the pseudo-element directly.
     */
    animation: foil-once-sweep var(--foil-duration) ease-out var(--foil-anim-delay, 0s) forwards;
    /* Override the static off-screen resting state from the base rule */
    transform: none;
    transition: none;
    opacity: 0.85;
}

/* foil-active (hover) takes priority — plays the interactive sweep instead */
.foil-shimmer.foil-once.foil-active::after {
    animation: none;
    transform: translateX(var(--foil-translate-end));
    transition: transform var(--foil-duration) ease-out;
}

/*
 * Wrapper for the card image in card-view; keeps foil-shimmer scoped to the
 * image so overflow:hidden never clips the action buttons below it.
 */
.card-foil-img-wrap {
    width: 100%;
    flex-grow: 1;
    display: block;
    border-radius: 6px;
    overflow: hidden;
}

/*
 * Standalone shimmer overlay for deck-editor tile view character cards.
 *
 * The character tile already uses ::before (card image) and ::after (dark
 * overlay), so we cannot use pseudo-elements here. This div animates its
 * own background-position instead — no ::after, no overflow tricks.
 *
 * The gradient is applied as a background-image directly on the div; it
 * stays naturally within the div's bounds (background never bleeds out).
 *
 * !important on position/inset overrides the .character-card > * rule in
 * index.css which sets position: relative; z-index: 1 on all children.
 * pointer-events: none ensures the overlay never blocks button clicks.
 * Document order (injected before info/action divs) means text renders
 * on top at the same z-index without needing explicit z-index bumping.
 */
@keyframes tile-foil-sweep {
    from { background-position: 250% center; }
    to   { background-position: 0% center; }
}

.tile-foil-shimmer {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 6px;
    pointer-events: none;
    background-image: linear-gradient(
        var(--foil-angle, 115deg),
        transparent 20%,
        rgba(255, 255, 255, 0.30) 38%,
        rgba(200, 160, 255, 0.45) 50%,
        rgba(255, 210, 100, 0.30) 62%,
        transparent 80%
    );
    background-size: 250% 100%;
    background-position: 250% center;
    /* --foil-anim-delay: -100s snaps to end state for already-animated instances */
    animation: tile-foil-sweep var(--foil-duration, 0.7s) ease-out var(--foil-anim-delay, 0s) forwards;
}

/* Ensure action buttons render above the shimmer overlay */
.foil-shimmer .card-view-actions,
.foil-shimmer .deck-card-editor-actions {
    position: relative;
    z-index: 2;
}

/* ─── Foil toggle button ───────────────────────────────────────────────────── */

/* Base state — inherits sizing/colour from .alternate-art-btn in index.css */
.foil-btn {
    background: rgba(78, 205, 196, 0.2);
    color: #4ecdc4;
    border: 1px solid rgba(78, 205, 196, 0.3);
    padding: 3.3px 6.6px;
    border-radius: 3.3px;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
}

.foil-btn:hover {
    background: rgba(78, 205, 196, 0.3);
    border-color: rgba(78, 205, 196, 0.4);
}

/* Pressed / active state — solid filled, matches KO button active pattern */
.foil-btn--active {
    background: #4ecdc4;
    color: rgba(26, 26, 46, 0.9);
    border-color: #4ecdc4;
}

.foil-btn--active:hover {
    background: #3bbdb4;
    border-color: #3bbdb4;
}

/* Card-view variant (matches .card-view-btn sizing) */
.card-view-btn.foil-btn {
    font-size: 9px;
    padding: 2px 4px;
    min-width: 28px;
    height: 18px;
}

.card-view-btn.foil-btn--active {
    background: #4ecdc4 !important;
    color: rgba(26, 26, 46, 0.9) !important;
    border-color: #4ecdc4 !important;
}

.card-view-btn.foil-btn--active:hover {
    background: #3bbdb4 !important;
    border-color: #3bbdb4 !important;
}

/* ─── Foil badge (Database view type tabs) ─────────────────────────────────── */

/* ─── Collection view foil row & inline badge ──────────────────────────────── */

/* Inline badge used inside the card-name cell in collection view */
.collection-foil-badge {
    display: inline-block;
    background: linear-gradient(90deg, #b8860b, #ffd700, #b8860b);
    color: #1a1a1a;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 0.05em;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 5px;
    vertical-align: middle;
}

/* Subtle gold left-border accent on foil rows */
.collection-card-foil {
    border-left: 2px solid rgba(212, 175, 55, 0.5);
}

/* ─── Database view type-tab foil badge ─────────────────────────────────────── */

/* Badge shown above a card image when the cycled art is the foil version */
.foil-card-badge {
    display: block;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    background: linear-gradient(90deg, #b8860b, #ffd700, #b8860b);
    color: #1a1a1a;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: 3px;
    pointer-events: none;
    white-space: nowrap;
}