/* hero-menu backdrops.
 *
 * KIND: gradient (default, plate token = entry id) | image | video
 * Register a plate: .hm-plate--<id> with --hm-field + optional --hm-pattern.
 * Register a section wash: .hm-section--<section_id> .hm-bg__wash
 *
 * Bounded fills only — no blur halos. Brand / ember family.
 */

.hm-bg-stack,
.hm-bg__wash {
    display: none;
    pointer-events: none;
}

@media (min-width: 768px) {
    .hm-bg-stack,
    .hm-bg__wash {
        display: block;
    }
}

.hm-bg-stack { z-index: 0; }

.hm-bg-stack__layer {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.hm-bg-stack__layer.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .hm-bg-stack__layer { transition: none; }
    .hm-360-host { transition: none; }
}

/* ONE live 360 host per section, behind the wash, beside the stack layers.
 * No display toggle: .hm-bg-stack is already display:none below 768px. */
.hm-360-host {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-out;
}

.hm-section.is-360-on .hm-360-host { opacity: 1; }

/* Still frame under the engine canvas — stays when the canvas is released. */
.hm-360-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The viewer core constructs into this box, so it must never be zero-size. */
.hm-360-mount {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hm-360-mount canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Host chips have no dissolving parent layer — they carry their own toggle. */
.hm-360-caption {
    opacity: 0;
    pointer-events: none;
}

.hm-360-caption.is-on { opacity: 1; }

.hm-bg__wash {
    z-index: 1;
    background: linear-gradient(
        100deg,
        #0a0a0b 0%,
        #0a0a0b 36%,
        rgba(10, 10, 11, 0.78) 46%,
        rgba(10, 10, 11, 0.18) 56%,
        transparent 64%
    );
}

.hm-section--the-sphere .hm-bg__wash,
.hm-section--sphere-menu .hm-bg__wash {
    background: linear-gradient(
        92deg,
        #0a0a0b 0%,
        #0a0a0b 38%,
        rgba(10, 10, 11, 0.8) 48%,
        rgba(10, 10, 11, 0.2) 58%,
        transparent 68%
    );
}

.hm-section--create .hm-bg__wash,
.hm-section--ways-in .hm-bg__wash {
    background: linear-gradient(
        108deg,
        #0a0a0b 0%,
        #0a0a0b 34%,
        rgba(10, 10, 11, 0.75) 44%,
        rgba(10, 10, 11, 0.16) 54%,
        transparent 62%
    );
}

.hm-section--factory .hm-bg__wash,
.hm-section--automation .hm-bg__wash {
    background: linear-gradient(
        88deg,
        #0a0a0b 0%,
        #0a0a0b 37%,
        rgba(10, 10, 11, 0.82) 47%,
        rgba(10, 10, 11, 0.2) 57%,
        transparent 66%
    );
}

.hm-section--tools .hm-bg__wash {
    background: linear-gradient(
        96deg,
        #0a0a0b 0%,
        #0a0a0b 36%,
        rgba(10, 10, 11, 0.78) 46%,
        rgba(10, 10, 11, 0.18) 56%,
        transparent 64%
    );
}

.hm-section--engines-menu .hm-bg__wash {
    background: linear-gradient(
        112deg,
        #0a0a0b 0%,
        #0a0a0b 35%,
        rgba(10, 10, 11, 0.76) 45%,
        rgba(10, 10, 11, 0.16) 55%,
        transparent 63%
    );
}

.hm-section--worlds-menu .hm-bg__wash {
    background: linear-gradient(
        94deg,
        #0a0a0b 0%,
        #0a0a0b 38%,
        rgba(10, 10, 11, 0.8) 48%,
        rgba(10, 10, 11, 0.2) 58%,
        transparent 67%
    );
}

.hm-section__body { z-index: 2; }

.hm-bg__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- plates --- */

.hm-plate {
    --hm-field: linear-gradient(108deg, #140807 0%, #ae1f0e 55%, #e13e13 100%);
    --hm-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 116'%3E%3Cpath fill='%23ffffff' d='M50 0L100 29v58L50 116 0 87V29z'/%3E%3C/svg%3E");
    --hm-pattern-size: 64px 74px;
    --hm-pattern-opacity: 0.1;
    position: absolute;
    inset: 0;
    background-color: #1a0c09;
}

.hm-plate::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--hm-field);
    background-repeat: no-repeat;
}

.hm-plate::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: var(--hm-pattern-opacity);
    background-image: var(--hm-pattern);
    background-size: var(--hm-pattern-size);
}

/* OVERVIEW */
.hm-plate--tiling-pass {
    --hm-field:
        radial-gradient(ellipse 90% 110% at 78% 42%, rgba(225, 62, 19, 0.95) 0%, rgba(225, 62, 19, 0.45) 38%, transparent 68%),
        linear-gradient(108deg, #140807 0%, #4a1610 42%, #e13e13 100%);
    --hm-pattern-opacity: 0.14;
}

.hm-plate--spot-editor {
    --hm-field:
        radial-gradient(circle 14rem at 72% 48%, rgba(255, 107, 53, 0.95) 0%, rgba(225, 62, 19, 0.4) 28%, transparent 52%),
        linear-gradient(108deg, #100807 0%, #2a100c 100%);
    --hm-pattern: radial-gradient(circle, rgba(255, 107, 53, 0.7) 1px, transparent 1.4px);
    --hm-pattern-size: 22px 22px;
    --hm-pattern-opacity: 0.35;
}

.hm-plate--upsample {
    --hm-field:
        repeating-radial-gradient(circle at 76% 48%, rgba(255, 107, 53, 0.55) 0 3px, transparent 3px 22px),
        linear-gradient(125deg, #140807 0%, #ae1f0e 100%);
    --hm-pattern: none;
}

.hm-plate--layer-editor {
    --hm-field: linear-gradient(180deg, #140807 0%, #3a1610 28%, #e13e13 48%, #ff6b35 50%, #e13e13 52%, #3a1610 72%, #140807 100%);
    --hm-pattern: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 28px);
    --hm-pattern-size: auto;
    --hm-pattern-opacity: 0.5;
}

.hm-plate--post-processing {
    --hm-field:
        radial-gradient(ellipse 80% 60% at 88% 8%, rgba(255, 107, 53, 0.7) 0%, transparent 58%),
        linear-gradient(165deg, #ae1f0e 0%, #1a0c09 50%, #4a1610 100%);
    --hm-pattern: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 4px);
    --hm-pattern-size: auto;
    --hm-pattern-opacity: 0.7;
}

.hm-plate--node-versioning {
    --hm-field:
        radial-gradient(circle 20rem at 62% 24%, rgba(225, 62, 19, 0.7) 0%, transparent 55%),
        radial-gradient(circle 18rem at 88% 78%, rgba(255, 107, 53, 0.65) 0%, transparent 58%),
        linear-gradient(120deg, #140807 0%, #5a1a10 100%);
    --hm-pattern:
        repeating-linear-gradient(90deg, rgba(255, 107, 53, 0.18) 0 1px, transparent 1px 32px),
        repeating-linear-gradient(0deg, rgba(255, 107, 53, 0.18) 0 1px, transparent 1px 32px);
    --hm-pattern-size: auto;
    --hm-pattern-opacity: 0.55;
}

/* Same recipe as OVERVIEW: a big color wash that dissolves, pattern quiet on top. */

/* THE SPHERE */
.hm-plate--pole-pinch {
    --hm-field:
        radial-gradient(ellipse 100% 55% at 76% 0%, rgba(255, 107, 53, 0.95) 0%, transparent 62%),
        radial-gradient(ellipse 100% 55% at 76% 100%, rgba(225, 62, 19, 0.9) 0%, transparent 62%),
        linear-gradient(180deg, #4a1610 0%, #140807 42%, #140807 58%, #ae1f0e 100%);
    --hm-pattern-opacity: 0.08;
}

.hm-plate--wrap-seam {
    --hm-field:
        radial-gradient(ellipse 70% 120% at 88% 50%, rgba(255, 107, 53, 0.9) 0%, transparent 62%),
        linear-gradient(90deg, #140807 0%, #3a1610 55%, #e13e13 100%);
    --hm-pattern: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 36px);
    --hm-pattern-size: auto;
    --hm-pattern-opacity: 0.22;
}

.hm-plate--angular-size {
    --hm-field:
        radial-gradient(circle 28rem at 74% 50%, rgba(225, 62, 19, 0.85) 0%, rgba(225, 62, 19, 0.35) 40%, transparent 68%),
        linear-gradient(108deg, #140807 0%, #5a1a10 50%, #e13e13 100%);
    --hm-pattern: repeating-radial-gradient(circle at 74% 50%, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 26px);
    --hm-pattern-size: auto;
    --hm-pattern-opacity: 0.28;
}

.hm-plate--native-poles {
    --hm-field:
        radial-gradient(ellipse 90% 50% at 78% 10%, rgba(225, 62, 19, 0.95) 0%, transparent 60%),
        radial-gradient(ellipse 90% 50% at 78% 92%, rgba(174, 31, 14, 0.9) 0%, transparent 60%),
        linear-gradient(180deg, #ae1f0e 0%, #140807 45%, #140807 55%, #4a1610 100%);
    --hm-pattern-opacity: 0.12;
}

.hm-plate--upscale-poles,
.hm-plate--pole-upscale {
    --hm-field:
        radial-gradient(ellipse 95% 90% at 78% 72%, rgba(255, 107, 53, 0.85) 0%, transparent 62%),
        linear-gradient(160deg, #140807 0%, #4a1610 40%, #e13e13 100%);
    --hm-pattern: repeating-radial-gradient(circle at 78% 72%, rgba(255, 255, 255, 0.1) 0 2px, transparent 2px 20px);
    --hm-pattern-size: auto;
    --hm-pattern-opacity: 0.25;
}

/* CREATE / WAYS IN */
.hm-plate--import-photo,
.hm-plate--photo {
    --hm-field:
        radial-gradient(circle 26rem at 74% 48%, rgba(255, 107, 53, 0.55) 0%, transparent 42%),
        radial-gradient(circle 22rem at 74% 48%, rgba(225, 62, 19, 0.9) 38%, rgba(174, 31, 14, 0.55) 48%, transparent 62%),
        linear-gradient(108deg, #140807 0%, #3a1610 100%);
    --hm-pattern-opacity: 0.08;
}

.hm-plate--import-render,
.hm-plate--render {
    --hm-field:
        radial-gradient(ellipse 85% 80% at 82% 40%, rgba(225, 62, 19, 0.88) 0%, transparent 64%),
        linear-gradient(125deg, #140807 0%, #4a1610 45%, #ae1f0e 100%);
    --hm-pattern:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 40px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 40px);
    --hm-pattern-size: auto;
    --hm-pattern-opacity: 0.28;
}

.hm-plate--generate-360-lora,
.hm-plate--prompt {
    --hm-field:
        radial-gradient(ellipse 80% 70% at 70% 32%, rgba(255, 107, 53, 0.9) 0%, transparent 58%),
        radial-gradient(ellipse 60% 50% at 86% 70%, rgba(225, 62, 19, 0.7) 0%, transparent 60%),
        linear-gradient(108deg, #140807 0%, #4a1610 100%);
    --hm-pattern: radial-gradient(circle, rgba(255, 255, 255, 0.35) 1px, transparent 1.3px);
    --hm-pattern-size: 26px 26px;
    --hm-pattern-opacity: 0.22;
}

.hm-plate--generate-patterns,
.hm-plate--patterns-input {
    --hm-field:
        radial-gradient(circle 22rem at 66% 38%, rgba(225, 62, 19, 0.8) 0%, transparent 58%),
        radial-gradient(circle 18rem at 84% 68%, rgba(255, 107, 53, 0.75) 0%, transparent 58%),
        linear-gradient(108deg, #140807 0%, #3a1610 50%, #ae1f0e 100%);
    --hm-pattern-opacity: 0.1;
}

.hm-plate--fractals {
    --hm-field:
        radial-gradient(ellipse 90% 90% at 76% 48%, rgba(225, 62, 19, 0.85) 0%, transparent 62%),
        linear-gradient(200deg, #140807 0%, #ae1f0e 55%, #e13e13 100%);
    --hm-pattern: repeating-conic-gradient(from 20deg at 76% 48%, rgba(255, 107, 53, 0.35) 0 8deg, transparent 8deg 16deg);
    --hm-pattern-size: auto;
    --hm-pattern-opacity: 0.22;
}

/* CLAUDE CODE / AUTOMATION */
.hm-plate--coding-agent,
.hm-plate--agent {
    --hm-field:
        radial-gradient(ellipse 95% 80% at 80% 30%, rgba(225, 62, 19, 0.9) 0%, transparent 64%),
        linear-gradient(180deg, #ae1f0e 0%, #140807 100%);
    --hm-pattern: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 7px);
    --hm-pattern-size: auto;
    --hm-pattern-opacity: 0.28;
}

.hm-plate--build-script,
.hm-plate--cli {
    --hm-field:
        radial-gradient(ellipse 85% 90% at 78% 58%, rgba(255, 107, 53, 0.85) 0%, transparent 62%),
        linear-gradient(115deg, #140807 0%, #4a1610 40%, #e13e13 100%);
    --hm-pattern: repeating-linear-gradient(55deg, rgba(255, 255, 255, 0.08) 0 8px, transparent 8px 20px);
    --hm-pattern-size: auto;
    --hm-pattern-opacity: 0.2;
}

.hm-plate--many-worlds,
.hm-plate--worlds-catalog {
    --hm-field:
        radial-gradient(circle 16rem at 64% 28%, rgba(225, 62, 19, 0.85) 0%, transparent 62%),
        radial-gradient(circle 14rem at 86% 68%, rgba(255, 107, 53, 0.8) 0%, transparent 62%),
        linear-gradient(108deg, #140807 0%, #3a1610 100%);
    --hm-pattern-opacity: 0.08;
}

/* TOOLS */
.hm-plate--upscale {
    --hm-field:
        radial-gradient(ellipse 100% 90% at 78% 50%, rgba(255, 107, 53, 0.75) 0%, transparent 60%),
        linear-gradient(125deg, #140807 0%, #ae1f0e 50%, #e13e13 100%);
    --hm-pattern: repeating-radial-gradient(circle at 78% 50%, rgba(255, 255, 255, 0.1) 0 2px, transparent 2px 22px);
    --hm-pattern-size: auto;
    --hm-pattern-opacity: 0.22;
}

.hm-plate--resize {
    --hm-field:
        radial-gradient(ellipse 80% 75% at 76% 45%, rgba(225, 62, 19, 0.85) 0%, transparent 62%),
        linear-gradient(108deg, #140807 0%, #5a1a10 100%);
    --hm-pattern-opacity: 0.1;
}

.hm-plate--transform {
    --hm-field:
        radial-gradient(ellipse 90% 80% at 72% 62%, rgba(255, 107, 53, 0.88) 0%, transparent 62%),
        linear-gradient(135deg, #140807 0%, #e13e13 100%);
    --hm-pattern: repeating-linear-gradient(-32deg, rgba(255, 255, 255, 0.08) 0 5px, transparent 5px 18px);
    --hm-pattern-size: auto;
    --hm-pattern-opacity: 0.2;
}

.hm-plate--pass,
.hm-plate--multi-pass {
    --hm-field:
        linear-gradient(180deg, #140807 0%, #3a1610 28%, #e13e13 48%, #ff6b35 52%, #e13e13 56%, #3a1610 76%, #140807 100%);
    --hm-pattern-opacity: 0.08;
}

.hm-plate--spot-edit {
    --hm-field:
        radial-gradient(circle 20rem at 74% 48%, rgba(255, 107, 53, 0.95) 0%, rgba(225, 62, 19, 0.4) 36%, transparent 58%),
        linear-gradient(108deg, #100807 0%, #2a100c 100%);
    --hm-pattern-opacity: 0.08;
}

.hm-plate--layers {
    --hm-field: linear-gradient(180deg, #140807 0%, #ae1f0e 38%, #ff6b35 50%, #ae1f0e 62%, #140807 100%);
    --hm-pattern: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 28px);
    --hm-pattern-size: auto;
    --hm-pattern-opacity: 0.22;
}

.hm-plate--effects {
    --hm-field:
        radial-gradient(ellipse 80% 55% at 88% 10%, rgba(255, 107, 53, 0.9) 0%, transparent 60%),
        linear-gradient(165deg, #ae1f0e 0%, #140807 55%, #4a1610 100%);
    --hm-pattern: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 5px);
    --hm-pattern-size: auto;
    --hm-pattern-opacity: 0.28;
}

.hm-plate--reframe {
    --hm-field:
        radial-gradient(ellipse 75% 70% at 82% 48%, rgba(225, 62, 19, 0.88) 0%, transparent 62%),
        linear-gradient(108deg, #140807 0%, #5a1a10 55%, #e13e13 100%);
    --hm-pattern-opacity: 0.1;
}

/* ENGINES */
.hm-plate--sd35 {
    --hm-field:
        radial-gradient(ellipse 90% 85% at 80% 40%, rgba(225, 62, 19, 0.92) 0%, transparent 64%),
        linear-gradient(100deg, #140807 0%, #e13e13 100%);
    --hm-pattern-opacity: 0.1;
}

.hm-plate--sdxl {
    --hm-field:
        radial-gradient(ellipse 85% 80% at 76% 52%, rgba(174, 31, 14, 0.9) 0%, transparent 62%),
        linear-gradient(108deg, #140807 0%, #ae1f0e 100%);
    --hm-pattern-opacity: 0.12;
}

.hm-plate--sd21 {
    --hm-field:
        radial-gradient(ellipse 80% 75% at 84% 36%, rgba(255, 107, 53, 0.8) 0%, transparent 62%),
        linear-gradient(108deg, #140807 0%, #5a1a10 100%);
    --hm-pattern: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 3px, transparent 3px 14px);
    --hm-pattern-size: auto;
    --hm-pattern-opacity: 0.2;
}

.hm-plate--sd15 {
    --hm-field:
        radial-gradient(ellipse 88% 82% at 72% 60%, rgba(225, 62, 19, 0.85) 0%, transparent 62%),
        linear-gradient(108deg, #140807 0%, #4a1610 100%);
    --hm-pattern: radial-gradient(circle, rgba(255, 255, 255, 0.28) 1px, transparent 1.4px);
    --hm-pattern-size: 18px 18px;
    --hm-pattern-opacity: 0.22;
}

.hm-plate--flux1-schnell {
    --hm-field:
        radial-gradient(ellipse 95% 80% at 78% 45%, rgba(255, 107, 53, 0.88) 0%, transparent 62%),
        linear-gradient(70deg, #140807 0%, #e13e13 100%);
    --hm-pattern: repeating-linear-gradient(70deg, rgba(255, 255, 255, 0.08) 0 3px, transparent 3px 16px);
    --hm-pattern-size: auto;
    --hm-pattern-opacity: 0.18;
}

.hm-plate--flux2-klein {
    --hm-field:
        radial-gradient(ellipse 82% 78% at 80% 55%, rgba(174, 31, 14, 0.88) 0%, transparent 62%),
        linear-gradient(108deg, #140807 0%, #ae1f0e 100%);
    --hm-pattern-opacity: 0.1;
}

.hm-plate--qwen-image {
    --hm-field:
        radial-gradient(ellipse 90% 70% at 76% 28%, rgba(225, 62, 19, 0.9) 0%, transparent 62%),
        linear-gradient(180deg, #ae1f0e 0%, #140807 100%);
    --hm-pattern: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 18px);
    --hm-pattern-size: auto;
    --hm-pattern-opacity: 0.22;
}

.hm-plate--z-image {
    --hm-field:
        radial-gradient(ellipse 90% 90% at 76% 48%, rgba(255, 107, 53, 0.85) 0%, transparent 62%),
        linear-gradient(108deg, #140807 0%, #e13e13 100%);
    --hm-pattern: repeating-conic-gradient(from 0deg at 76% 48%, rgba(255, 107, 53, 0.25) 0 6deg, transparent 6deg 12deg);
    --hm-pattern-size: auto;
    --hm-pattern-opacity: 0.2;
}

.hm-plate--alpha-engines {
    --hm-field:
        radial-gradient(ellipse 80% 75% at 70% 40%, rgba(225, 62, 19, 0.75) 0%, transparent 62%),
        linear-gradient(108deg, #140807 0%, #5a1a10 100%);
    --hm-pattern: repeating-linear-gradient(-28deg, rgba(255, 255, 255, 0.1) 0 8px, transparent 8px 20px);
    --hm-pattern-size: auto;
    --hm-pattern-opacity: 0.2;
}

/* WORLDS */
.hm-plate--hextile-templates {
    --hm-field:
        radial-gradient(ellipse 90% 95% at 78% 46%, rgba(225, 62, 19, 0.9) 0%, transparent 64%),
        linear-gradient(108deg, #140807 0%, #e13e13 100%);
    --hm-pattern-size: 88px 102px;
    --hm-pattern-opacity: 0.14;
}

.hm-plate--polyhedral-geometry {
    --hm-field:
        radial-gradient(ellipse 85% 80% at 76% 50%, rgba(174, 31, 14, 0.88) 0%, transparent 62%),
        linear-gradient(108deg, #140807 0%, #ae1f0e 100%);
    --hm-pattern: repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.08) 0 10px, transparent 10px 22px);
    --hm-pattern-size: auto;
    --hm-pattern-opacity: 0.2;
}

.hm-plate--directional {
    --hm-field:
        radial-gradient(ellipse 70% 45% at 76% 16%, rgba(225, 62, 19, 0.9) 0%, transparent 62%),
        radial-gradient(ellipse 55% 70% at 92% 50%, rgba(255, 107, 53, 0.85) 0%, transparent 62%),
        radial-gradient(ellipse 70% 45% at 76% 86%, rgba(174, 31, 14, 0.85) 0%, transparent 62%),
        linear-gradient(108deg, #140807 0%, #2a100c 100%);
    --hm-pattern-opacity: 0.08;
}