/* Guildhall ambient effect layers. Rendered inside .gh-scene-fx: above art, below hotspots,
   pointer-events none, dimmed by .gh-scene-dimmed, and fully reduced-motion aware. */

.ghfx-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.72;
}

.ghfx-forge-glow {
    left: 42%;
    top: 40%;
    width: 38%;
    height: 46%;
    background: radial-gradient(circle, color-mix(in srgb, var(--gold-bright) 42%, transparent), color-mix(in srgb, var(--wound) 18%, transparent) 55%, transparent 72%);
    animation: ghfx-flicker 4.8s ease-in-out infinite;
}

.ghfx-hearth-glow {
    left: 38%;
    top: 42%;
    width: 30%;
    height: 40%;
    background: radial-gradient(circle, color-mix(in srgb, var(--gold-bright) 34%, transparent), transparent 68%);
    animation: ghfx-flicker 5.2s ease-in-out infinite;
}

.ghfx-arcane-glow {
    left: 44%;
    top: 40%;
    width: 36%;
    height: 44%;
    background: radial-gradient(circle, color-mix(in srgb, var(--ward) 32%, transparent), color-mix(in srgb, var(--acc-forbidden) 18%, transparent) 55%, transparent 72%);
    animation: ghfx-pulse 7.2s ease-in-out infinite;
}

.ghfx-table-glow {
    left: 34%;
    top: 48%;
    width: 34%;
    height: 34%;
    background: radial-gradient(circle, color-mix(in srgb, var(--gold-bright) 26%, transparent), transparent 66%);
    animation: ghfx-flicker 6.4s ease-in-out infinite;
}

.ghfx-lantern-glow {
    left: 60%;
    top: 30%;
    width: 26%;
    height: 30%;
    background: radial-gradient(circle, color-mix(in srgb, var(--gold-bright) 22%, transparent), transparent 64%);
    animation: ghfx-flicker 7.4s ease-in-out infinite;
}

.ghfx-training-glow {
    left: 40%;
    top: 8%;
    width: 30%;
    height: 34%;
    background: radial-gradient(circle, color-mix(in srgb, var(--parch) 15%, transparent), transparent 66%);
    animation: ghfx-flicker 8.2s ease-in-out infinite;
}

.ghfx-hall-glow {
    left: 54%;
    top: 42%;
    width: 30%;
    height: 36%;
    background: radial-gradient(circle, color-mix(in srgb, var(--gold-bright) 18%, transparent), transparent 66%);
    animation: ghfx-flicker 8s ease-in-out infinite;
}

.ghfx-armory-glow {
    left: 58%;
    top: 30%;
    width: 28%;
    height: 32%;
    background: radial-gradient(circle, color-mix(in srgb, var(--gold-bright) 15%, transparent), transparent 66%);
    animation: ghfx-flicker 8.6s ease-in-out infinite;
}

.ghfx-faint {
    opacity: 0.5;
}

.ghfx-cut-forge {
    left: 60%;
    top: 44%;
    width: 22%;
    height: 26%;
}

.ghfx-cut-arcane {
    left: 68%;
    top: 18%;
    width: 16%;
    height: 22%;
}

@keyframes ghfx-flicker {
    0%, 100% { opacity: 0.62; }
    35% { opacity: 0.78; }
    58% { opacity: 0.56; }
    82% { opacity: 0.72; }
}

@keyframes ghfx-pulse {
    0%, 100% { opacity: 0.48; }
    50% { opacity: 0.74; }
}

.ghfx-embers {
    position: absolute;
    left: 38%;
    bottom: 16%;
    width: 40%;
    height: 52%;
    pointer-events: none;
}

.ghfx-ember {
    position: absolute;
    bottom: 0;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--gold-bright);
    box-shadow: 0 0 6px 1px color-mix(in srgb, var(--wound) 70%, transparent);
    opacity: 0;
    animation: ghfx-ember-rise var(--t, 8s) ease-in var(--d, 0s) infinite;
}

@keyframes ghfx-ember-rise {
    0% { transform: translate(0, 0) scale(1); opacity: 0; }
    12% { opacity: 0.9; }
    70% { opacity: 0.5; }
    100% { transform: translate(var(--dx, 6px), -160px) scale(0.4); opacity: 0; }
}

.ghfx-motes {
    position: absolute;
    inset: 8% 10% 16%;
    pointer-events: none;
}

.ghfx-mote {
    position: absolute;
    top: 60%;
    width: 2.5px;
    height: 2.5px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--parch) 70%, transparent);
    opacity: 0;
    animation: ghfx-mote-float var(--t, 9s) ease-in-out var(--d, 0s) infinite;
}

.ghfx-mote-cold {
    background: color-mix(in srgb, var(--ward) 76%, transparent);
    box-shadow: 0 0 5px 1px color-mix(in srgb, var(--ward) 60%, transparent);
}

@keyframes ghfx-mote-float {
    0% { transform: translate(0, 0); opacity: 0; }
    20% { opacity: 0.7; }
    80% { opacity: 0.5; }
    100% { transform: translate(var(--dx, 6px), -90px); opacity: 0; }
}

.ghfx-skywash {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 40%;
    pointer-events: none;
    background:
        radial-gradient(70% 76% at 50% -18%, color-mix(in srgb, var(--ward) 18%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--parch) 8%, transparent), transparent 76%);
    opacity: calc(0.22 + (var(--gh-daylight, 1) * 0.24));
}

.ghfx-clouds {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 34%;
    pointer-events: none;
    background:
        radial-gradient(60% 80% at 20% 40%, color-mix(in srgb, var(--parch) 10%, transparent), transparent 70%),
        radial-gradient(50% 70% at 60% 30%, color-mix(in srgb, var(--ward) 10%, transparent), transparent 70%),
        radial-gradient(55% 75% at 88% 50%, color-mix(in srgb, var(--parch) 9%, transparent), transparent 70%);
    background-size: 200% 100%;
    opacity: calc(0.48 + (var(--gh-night, 0) * 0.18));
    transform: translateZ(0);
}

.ghfx-smoke {
    position: absolute;
    pointer-events: none;
    opacity: 0.18;
    background:
        radial-gradient(closest-side at 35% 72%, color-mix(in srgb, var(--parch-dim) 18%, transparent), transparent 72%),
        radial-gradient(closest-side at 54% 48%, color-mix(in srgb, var(--muted) 16%, transparent), transparent 70%),
        radial-gradient(closest-side at 70% 28%, color-mix(in srgb, var(--ward) 12%, transparent), transparent 68%);
}

.ghfx-forge-smoke {
    left: 54%;
    top: 6%;
    width: 28%;
    height: 42%;
}

.ghfx-cut-smoke {
    left: 70%;
    top: 7%;
    width: 16%;
    height: 28%;
    opacity: 0.14;
}

.ghfx-birds {
    position: absolute;
    left: 0;
    top: 10%;
    width: 100%;
    height: 18%;
    pointer-events: none;
    opacity: calc(0.28 + (var(--gh-daylight, 1) * 0.28));
}

.ghfx-birds span {
    position: absolute;
    left: -8%;
    top: var(--bird-y, 38%);
    width: 18px;
    height: 8px;
    color: color-mix(in srgb, var(--ink) 48%, transparent);
    animation: ghfx-bird-cross var(--bird-t, 38s) linear var(--bird-d, 0s) infinite;
}

.ghfx-birds span::before,
.ghfx-birds span::after {
    content: "";
    position: absolute;
    top: 3px;
    width: 9px;
    height: 4px;
    border-top: 1px solid currentColor;
}

.ghfx-birds span::before {
    left: 0;
    transform: rotate(16deg);
    transform-origin: right center;
}

.ghfx-birds span::after {
    right: 0;
    transform: rotate(-16deg);
    transform-origin: left center;
}

.ghfx-birds span:nth-child(1) { --bird-y: 24%; --bird-t: 42s; --bird-d: -4s; }
.ghfx-birds span:nth-child(2) { --bird-y: 54%; --bird-t: 54s; --bird-d: -21s; transform: scale(0.76); }
.ghfx-birds span:nth-child(3) { --bird-y: 40%; --bird-t: 48s; --bird-d: -34s; transform: scale(0.62); }

@keyframes ghfx-bird-cross {
    0% { translate: 0 0; opacity: 0; }
    10% { opacity: 0.65; }
    82% { opacity: 0.45; }
    100% { translate: 116vw -18px; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ghfx-forge-glow,
    .ghfx-hearth-glow,
    .ghfx-arcane-glow,
    .ghfx-table-glow,
    .ghfx-lantern-glow,
    .ghfx-training-glow,
    .ghfx-hall-glow,
    .ghfx-armory-glow,
    .ghfx-ember,
    .ghfx-mote,
    .ghfx-clouds,
    .ghfx-smoke,
    .ghfx-birds span {
        animation: none !important;
    }

    .ghfx-ember,
    .ghfx-mote,
    .ghfx-birds {
        display: none;
    }
}