/*
    Shop flair, used on /trolls and in the Shop's previews. How to add items and pictures: docs/shop-flair.md
    Each frame or background item in Services/ShopCatalogue.cs is styled by the class "flair-{key}" here.
    Richer looks can use pictures from wwwroot/images/flair (e.g. background-image / border-image).
*/

.flair-title {
    font-family: warfont;
    font-size: 1.4rem;
    color: #f3e2a0;
    -webkit-text-stroke: 1px black;
    text-align: center;
    margin: -0.25rem 0 0.5rem 0;
}

/* ---- Portrait frames ----
   Portraits sit in a .frame-slot wrapper that carries the frame class. A frame either sets --frame-art
   (a picture drawn over round portraits, with a see-through middle) or styles the picture inside (> :first-child).
   .frame-slot.full is the rectangular picture on a troll's page, where ring art doesn't fit, so frames give it a
   matching border instead. */

.frame-slot {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.frame-slot.full {
    display: block;
}

.frame-slot:not(.full)::after {
    content: '';
    position: absolute;
    inset: var(--frame-inset, -14%);
    background: var(--frame-art, none) center / contain no-repeat;
    pointer-events: none;
}

/* Gold */
.flair-frame-gold {
    --frame-art: url('../images/flair/frame-gold.svg');
}

.flair-frame-gold.full > :first-child {
    border: 6px solid #c9971c !important;
    outline: 2px solid #5a3c08;
    box-shadow: inset 0 0 0 2px #ffe99a, 0 0 0 4px #7e5304, 0 0 18px 4px rgba(255, 200, 60, 0.55);
}

/* Bone */
.flair-frame-bone {
    --frame-art: url('../images/flair/frame-bone.svg');
}

.flair-frame-bone.full > :first-child {
    border: 7px double #efe4c8 !important;
    outline: 3px solid #3b2413;
    box-shadow: 0 0 0 6px #6b4a2c, 0 0 14px 4px rgba(0, 0, 0, 0.6);
}

/* Voodoo */
.flair-frame-voodoo {
    --frame-art: url('../images/flair/frame-voodoo.svg');
}

.flair-frame-voodoo.full > :first-child {
    border: 4px solid #2a0f3d !important;
    outline: 2px solid #c77dff;
    animation: flair-voodoo-pulse 3.2s ease-in-out infinite;
}

@keyframes flair-voodoo-pulse {
    0%, 100% { box-shadow: 0 0 10px 3px rgba(176, 77, 255, 0.55); }
    50% { box-shadow: 0 0 24px 8px rgba(192, 96, 255, 0.95); }
}

/* Fire: its art has extra room above the ring for the flames, so it sits further out. */
.flair-frame-fire {
    --frame-art: url('../images/flair/frame-fire.svg');
    --frame-inset: -30%;
}

.flair-frame-fire.full > :first-child {
    border: 4px solid #3a1403 !important;
    outline: 2px solid #ff8a1c;
    animation: flair-fire-flicker 1.7s ease-in-out infinite;
}

@keyframes flair-fire-flicker {
    0%, 100% { box-shadow: 0 0 14px 4px rgba(255, 90, 0, 0.8), 0 -6px 26px 6px rgba(255, 200, 0, 0.35); }
    35% { box-shadow: 0 0 20px 6px rgba(255, 110, 0, 0.95), 0 -10px 34px 10px rgba(255, 210, 0, 0.5); }
    70% { box-shadow: 0 0 12px 3px rgba(255, 70, 0, 0.75), 0 -4px 22px 5px rgba(255, 190, 0, 0.3); }
}

@media (prefers-reduced-motion: reduce) {
    .flair-frame-voodoo.full > :first-child,
    .flair-frame-fire.full > :first-child {
        animation: none;
    }
}

/* ---- Page backgrounds: behind the whole profile (picture and text). ----
   The gradients below are placeholders until pictures are added; docs/shop-flair.md has the steps. In short, put
   e.g. bg-jungle.webp in wwwroot/images/flair and replace that item's background with:
       background: #1f5e2a url('../images/flair/bg-jungle.webp') center / cover no-repeat; */

[class*="flair-bg-"] {
    border-radius: 12px;
}

/* On a troll's page the background is sized to the window, not the whole (often very tall) profile, so the picture
   isn't blown up and cropped to a thin strip; it stays put while the page scrolls over it. Phones that don't support
   this (iOS Safari) just scroll it with the page. The Shop's small previews keep the normal behaviour. */
.fullProfileContainer[class*="flair-bg-"] {
    padding: 2.5rem;
    background-attachment: fixed;
}

@media (max-width: 768px) {
    .fullProfileContainer[class*="flair-bg-"] {
        padding: 1rem;
    }
}

.flair-bg-jungle {
    background: #2d6448 url('../images/flair/bg-jungle.webp') center / cover no-repeat;
}

/* Voodoo and Blood Moon are very wide; anchored left so their skull-and-candle altars show below the portrait. */
.flair-bg-voodoo {
    background: #1e0a33 url('../images/flair/bg-voodoo.webp') left center / cover no-repeat;
}

.flair-bg-echo-isles {
    background: #2f7fb8 url('../images/flair/bg-echo-isles.webp') center / cover no-repeat;
}

.flair-bg-blood-moon {
    background: #3a0606 url('../images/flair/bg-blood-moon.webp') left center / cover no-repeat;
}