/* Angle-driven foil, inspired by Holo Card Studio. See js/holo-portrait.LICENSE.txt. */
.home-stellar .about-image.holo-portrait {
    height: auto; aspect-ratio: auto; overflow: visible; clip-path: none;
    border-radius: 18px; perspective: 1000px;
}
.home-stellar .holo-portrait::before, .home-stellar .holo-portrait::after { content: none; }
.holo-card {
    --foil-x: 50%; --foil-y: 50%; --foil-shift: 50%; --glare-shift: 50%;
    --foil-angle: 124deg; --tilt-x: 0deg; --tilt-y: 0deg; --holo-active: 0;
    position: relative; display: block; width: 100%; aspect-ratio: 4 / 5;
    appearance: none; padding: 3px; border: 0; border-radius: 18px;
    background: linear-gradient(var(--foil-angle), #eaf4f2 0%, #83a9b6 16%, #ead1ae 36%, #f9f5ed 48%, #8bd5e4 68%, #b3a4d3 85%, #eaf4f2);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(230, 247, 255, .16);
    transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(.98);
    transition: transform .28s ease-out, box-shadow .28s ease-out;
    touch-action: pan-y pinch-zoom; cursor: grab; -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none; user-select: none; color: inherit;
}
.holo-card:active { cursor: grabbing; }
.holo-card:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 5px; }
.holo-card:disabled { cursor: default; opacity: 1; }
.holo-print { position: absolute; inset: 3px; border-radius: 15px; overflow: hidden; isolation: isolate; background: #1b2324; }
.home-stellar .holo-portrait .holo-photo {
    display: block; width: 100%; height: 100%; object-fit: cover; object-position: 44% center;
    transform: none; filter: none; transition: none; pointer-events: none;
}
.holo-foil, .holo-grain, .holo-glare, .holo-rim { position: absolute; inset: 0; pointer-events: none; }
.holo-foil {
    background-image: repeating-linear-gradient(var(--foil-angle), #ef91b8 0%, #f2d49b 12%, #a2d9e8 24%, #f0f4f6 36%, #b4a3df 48%, #ef91b8 60%);
    background-size: 300% 300%; background-position: var(--foil-shift) var(--foil-y);
    mix-blend-mode: color-dodge; opacity: calc(.09 + var(--holo-active) * .14);
    /* Keep the face legible; foil is strongest on the street and jacket. */
    mask-image: radial-gradient(ellipse 23% 17% at 49% 28%, transparent 20%, rgba(0,0,0,.18) 75%, #000 150%);
}
.holo-grain {
    background: url('../imgs/stellar/holo-grain.svg') 0 0 / 148px 148px;
    mix-blend-mode: screen; opacity: calc(.1 + var(--holo-active) * .3);
    mask-image: radial-gradient(ellipse 65% 45% at var(--foil-x) var(--foil-y), #000 0%, rgba(0,0,0,.5) 35%, transparent 75%);
}
.holo-glare {
    background-image: linear-gradient(108deg, transparent 38%, rgba(199,239,255,.05) 43%, rgba(255,248,221,.7) 48%, rgba(255,255,255,.88) 49%, rgba(255,209,230,.14) 51%, transparent 58%),
        radial-gradient(ellipse at var(--foil-x) var(--foil-y), rgba(230,247,255,.2), transparent 58%);
    background-size: 260% 200%, 100% 100%; background-position: var(--glare-shift) 50%, center;
    mix-blend-mode: screen; opacity: calc(.08 + var(--holo-active) * .25);
}
.holo-rim { border-radius: 15px; border: 1px solid rgba(247,252,255,.45); box-shadow: inset 0 0 0 5px rgba(16,26,30,.08); }
.home-stellar .holo-hint { margin: 12px 8px 0; text-align: center; font-size: 12px; line-height: 1.7; color: var(--text-secondary); font-weight: 400; }
:root[data-theme="light"] .holo-card { box-shadow: 0 16px 35px -22px rgba(25,54,67,.5), 0 0 0 1px rgba(47,75,90,.2); }
@media (prefers-reduced-motion: reduce) { .holo-card { transition: none; transform: scale(.98); } }