/*
 * Dada's figure with the animated chakra behind the head.
 * Markup: app/Views/partials/deity_chakra.php
 *
 * The chakra is centred on the head: turban and face together span the
 * top 20% of the figure image (370 x 1100), so their middle is 10.8% down.
 * The image is 2.98 times as tall as it is wide.
 *
 *   --chakra-size  chakra width, as a multiple of the figure width
 *   --head-y       head centre, as a fraction of the image height
 *   --room-above   space above the figure for the rays, as a multiple of the figure width
 */
.deity {
    --figure-w: min(240px, 56vw);
    --chakra-size: 1.5;
    --head-y: 0.108;
    --room-above: 0.32;
    position: relative;
    width: var(--figure-w);
    margin: 0 auto;
    padding-top: calc(var(--figure-w) * var(--room-above));
}

.deity--md { --figure-w: min(200px, 48vw); }

@media (min-width: 768px) {
    .deity--lg { --figure-w: 320px; }
}

.deity__figure {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 12px 18px rgba(80, 30, 0, .25));
}

.chakra {
    position: absolute;
    z-index: 0;
    left: 50%;
    top: calc(var(--figure-w) * (var(--room-above) + 2.98 * var(--head-y)));
    width: calc(var(--figure-w) * var(--chakra-size));
    height: calc(var(--figure-w) * var(--chakra-size));
    transform: translate(-50%, -50%);
    overflow: visible;
    pointer-events: none;
}

.chakra__glow,
.chakra__rays,
.chakra__ring,
.chakra__sparks {
    transform-origin: 200px 200px;
    transform-box: view-box;
    will-change: transform;
}

.chakra__glow   { animation: chakra-breathe 4s ease-in-out infinite; }
.chakra__rays   { animation: chakra-spin 40s linear infinite; }
.chakra__ring   { animation: chakra-spin 28s linear infinite reverse; }
.chakra__sparks { animation: chakra-spin 18s linear infinite; }

.chakra__sparks path {
    fill: none;
    stroke: #fff4c2;
    stroke-width: 6;
    stroke-linecap: round;
    animation: chakra-flicker 3s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

@keyframes chakra-spin {
    to { transform: rotate(360deg); }
}

@keyframes chakra-breathe {
    0%, 100% { transform: scale(1);    opacity: .9; }
    50%      { transform: scale(1.07); opacity: 1; }
}

@keyframes chakra-flicker {
    0%, 100% { opacity: .4; }
    50%      { opacity: 1; }
}

/* Respect the phone or computer setting for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .chakra__glow,
    .chakra__rays,
    .chakra__ring,
    .chakra__sparks,
    .chakra__sparks path {
        animation: none;
    }
}