/* Career cards in the "Experience pull" overlay: trading-card proportions,
   a thin rarity-coloured frame and a company panel. They fade up together. */

.experience-pull .pull-reveal-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 18px 0 8px;
    perspective: 1400px;
}

.career-card {
    --i: 0;
    --fan: 0deg;
    --card-rotate-x: 0deg;
    --card-rotate-y: 0deg;
    --shine-x: 50%;
    --shine-y: 30%;
    --frame: #5f6b76;
    --frame-2: #8b97a2;
    --glow: rgba(139, 151, 162, 0.25);
    position: relative;
    flex: 0 0 auto;
    width: 214px;
    aspect-ratio: 63 / 88;
    margin: 0 -10px;
    opacity: 0;
    transform: translateY(16px) rotate(var(--fan));
    transform-origin: 50% 120%;
    transition:
        opacity 320ms ease calc(var(--i) * 90ms),
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 90ms);
    z-index: calc(3 - var(--i));
}
.career-card.is-visible {
    opacity: 1;
    transform: translateY(var(--drop, 0px)) rotate(var(--fan));
}
.career-card:hover { z-index: 5; }

.career-card[data-rarity="rare"] { --frame: #4f8b99; --frame-2: #85c0cf; --glow: rgba(133, 192, 207, 0.32); }
.career-card[data-rarity="holo rare"] { --frame: #6a5aa8; --frame-2: #b39ddb; --glow: rgba(179, 157, 219, 0.35); }
.career-card[data-rarity="secret rare"] { --frame: #a8822f; --frame-2: #e8c46a; --glow: rgba(232, 196, 106, 0.38); }

.cc-inner {
    position: absolute;
    inset: 0;
    transition: translate 220ms ease;
}
.career-card:hover .cc-inner { translate: 0 -6px; }
.cc-back { display: none; }

.cc-face,
.cc-back {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}

/* back: dark with a halftone ring and monogram */
.cc-back {
    transform: rotateY(180deg);
    background:
        radial-gradient(circle at 50% 50%, transparent 0 34%, rgba(133, 192, 207, 0.0) 34%),
        radial-gradient(circle, rgba(133, 192, 207, 0.35) 1.2px, transparent 1.5px) 0 0 / 9px 9px,
        #10161b;
    border: 1px solid #2c3640;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    display: grid;
    place-items: center;
    -webkit-mask-image: none;
}
.cc-back::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 9px;
    border: 1px solid rgba(133, 192, 207, 0.25);
}
.cc-back-mark {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: #edf2f4;
    padding: 18px 20px;
    border-radius: 50%;
    background: #10161b;
    box-shadow: 0 0 0 1px rgba(133, 192, 207, 0.35);
}

/* front */
.cc-face {
    display: flex;
    flex-direction: column;
    padding: 9px;
    background: linear-gradient(160deg, var(--frame-2), var(--frame) 45%, #20262c);
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.5), 0 0 34px var(--glow);
}
.career-card[data-rarity="holo rare"] .cc-face {
    background: conic-gradient(from 210deg at 50% 50%, #b39ddb, #85c0cf, #9ad0a4, #e8c46a, #e59a8c, #b39ddb);
}
.cc-body {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 11px 9px;
    border-radius: 8px;
    background: #12181d;
    color: #edf2f4;
}
.cc-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8a96a0;
}
.cc-pips { color: var(--frame-2); letter-spacing: 0.2em; font-size: 0.62rem; }
.cc-art {
    display: grid;
    place-items: end start;
    height: 74px;
    padding: 10px 12px;
    border-radius: 6px;
    background: linear-gradient(150deg, color-mix(in srgb, var(--frame-2) 26%, #12181d), #0c1115 70%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.cc-art span {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: color-mix(in srgb, var(--frame-2) 70%, #edf2f4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.cc-title {
    margin-top: 2px;
    font-family: var(--font-display);
    font-size: 1.04rem;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: #edf2f4;
}
.cc-place { font-size: 0.72rem; color: #aab3ba; line-height: 1.3; }
.cc-summary {
    font-size: 0.72rem;
    line-height: 1.42;
    color: #c9d1d6;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cc-foot {
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid #222a31;
    display: flex;
    justify-content: space-between;
    font-size: 0.62rem;
    color: #8a96a0;
    letter-spacing: 0.04em;
}

/* foil sheen that follows the pointer (rare and up) */
.cc-sheen {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    pointer-events: none;
    background: radial-gradient(circle at var(--shine-x) var(--shine-y), rgba(255, 255, 255, 0.22), transparent 45%);
    mix-blend-mode: overlay;
    opacity: 0;
    transition: opacity 300ms ease;
}
.career-card:not([data-rarity="uncommon"]):hover .cc-sheen { opacity: 1; }
.career-card[data-rarity="holo rare"] .cc-sheen,
.career-card[data-rarity="secret rare"] .cc-sheen {
    background:
        radial-gradient(circle at var(--shine-x) var(--shine-y), rgba(255, 255, 255, 0.28), transparent 42%),
        linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.10) 45%, transparent 60%);
}

/* the overlay copy sits quieter now the cards carry the colour */
.experience-pull .pull-console h2 { font-weight: 600; }

/* Phones: cards wrap two to a row so all three are fully on screen
   (the desktop fan would spill off both edges). */
@media (max-width: 720px) {
    .experience-pull .pull-reveal-grid {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding: 8px 0 12px;
        perspective: none;
    }
    .career-card {
        /* the fan angle and drop are set inline per card for desktop */
        --fan: 0deg !important;
        --drop: 0px !important;
        width: calc(50% - 5px);
        min-width: 0;
        max-width: 156px;
        aspect-ratio: auto;
        margin: 0;
    }
    /* once the cards are out, the pack copy can shrink to give them room */
    .experience-pull.is-revealing .pull-console { gap: 0.35rem; padding-top: 2rem; }
    .experience-pull.is-revealing .pull-console-support,
    .experience-pull.is-revealing .pull-console-label { display: none; }
    .experience-pull.is-revealing .pull-console h2 { font-size: 1.5rem; }
    .cc-inner, .cc-face { position: relative; inset: auto; }
    .cc-body { padding: 8px 8px 7px; gap: 4px; }
    .cc-art { height: 40px; padding: 6px 8px; }
    .cc-art span { font-size: 0.9rem; }
    .cc-title { font-size: 0.84rem; }
    .cc-place { font-size: 0.64rem; }
    .cc-summary { font-size: 0.64rem; -webkit-line-clamp: 3; }
    .cc-top, .cc-foot { font-size: 0.52rem; }
}

@media (prefers-reduced-motion: reduce) {
    .career-card, .cc-inner { transition-duration: 1ms !important; transition-delay: 0ms !important; }
}