/*
 * Gold Power Overlay — HumiSpot 预约提交过渡动画
 * 在预约提交期间通过 Portal 挂载到 document.body
 */

:root {
    --gp-gold-light: #fff4c7;
    --gp-gold-main: #d7aa29;
    --gp-gold-deep: #8d6311;
    --gp-gold-glow: rgba(215, 170, 41, 0.30);
    --gp-surface: rgba(255, 249, 228, 0.96);
    --gp-bg-deep: rgba(8, 10, 14, 0.92);
    --gp-duration: 2.6s;
}

/* ─── 遮罩容器 ─────────────────────────────────────────────── */
#ep-booking-overlay.ep-gp-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100%;
    background:
        radial-gradient(circle at 50% 35%, rgba(215, 170, 41, 0.12) 0%, transparent 30%),
        linear-gradient(180deg, rgba(7, 8, 12, 0.96) 0%, rgba(12, 14, 18, 0.94) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.35s ease;
    font-family: "Inter", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

/* ─── 舞台 ────────────────────────────────────────────────── */
.ep-gp-stage {
    position: relative;
    width: 240px;
    height: 240px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ─── 放射火花 ────────────────────────────────────────────── */
.ep-gp-spark {
    position: absolute;
    width: 2px;
    height: 68px;
    background: linear-gradient(to top, rgba(255, 244, 199, 0.95), transparent);
    transform-origin: bottom center;
    opacity: 0;
    filter: blur(0.4px);
    animation: ep-gp-sparks var(--gp-duration) infinite;
}

/* ─── 核心光晕 ────────────────────────────────────────────── */
.ep-gp-glow {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--gp-gold-glow) 0%, transparent 72%);
    opacity: 0;
    animation: ep-gp-flash var(--gp-duration) infinite;
}

/* ─── 冲击波涟漪 ──────────────────────────────────────────── */
.ep-gp-ripple {
    position: absolute;
    width: 88px;
    height: 88px;
    border: 1px solid rgba(215, 170, 41, 0.34);
    border-radius: 50%;
    opacity: 0;
    animation: ep-gp-ripple-out var(--gp-duration) infinite;
}
.ep-gp-ripple:nth-child(2) { animation-delay: 0.18s; }

/* ─── 核心智核（替代小人） ───────────────────────────────── */
.ep-gp-stickman {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 28%, #fffdf7 0%, #ffe59d 28%, #d7aa29 58%, #8d6311 100%);
    box-shadow:
        0 0 0 8px rgba(215, 170, 41, 0.10),
        0 14px 30px rgba(143, 93, 14, 0.24),
        inset 0 -8px 14px rgba(75, 49, 7, 0.22);
    animation: gp-overlay-float var(--gp-duration) ease-in-out infinite;
}

.ep-gp-stickman::before {
    content: '';
    position: absolute;
    inset: -18%;
    border-radius: 50%;
    background: conic-gradient(from 110deg, transparent 0deg, rgba(255,255,255,0.86) 82deg, transparent 140deg, rgba(255,232,155,0.45) 212deg, transparent 320deg);
    -webkit-mask: radial-gradient(circle, transparent 42%, #000 52%);
    mask: radial-gradient(circle, transparent 42%, #000 52%);
    opacity: 0.78;
    animation: gp-overlay-sheen 1.8s linear infinite;
}

.ep-gp-stickman::after {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 1px solid rgba(255, 251, 231, 0.46);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}

.ep-gp-arm,
.ep-gp-leg {
    display: none;
}

/* ─── 底部状态文字 ─────────────────────────────────────────── */
.ep-gp-status {
    margin-top: 44px;
    font-size: 12px;
    color: rgba(255, 244, 199, 0.92);
    letter-spacing: 0.24em;
    text-transform: none;
    font-weight: 500;
    text-align: center;
    animation: ep-gp-text-glow var(--gp-duration) infinite;
}

/* ═══════════════════════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════════════════════ */
@keyframes gp-overlay-float {
    0%, 100% { transform: translateY(0) scale(0.98); }
    50% { transform: translateY(-8px) scale(1.02); }
}

@keyframes gp-overlay-sheen {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes ep-gp-ripple-out {
    0% { transform: scale(0.42); opacity: 0; }
    18% { opacity: 0.75; }
    100% { transform: scale(2.15); opacity: 0; }
}

@keyframes ep-gp-flash {
    0%, 100% { opacity: 0.16; transform: scale(0.86); }
    45% { opacity: 0.6; transform: scale(1.18); }
}

@keyframes ep-gp-sparks {
    0%, 20% { opacity: 0; transform: rotate(var(--gp-r)) translateY(0); }
    35% { opacity: 1; transform: rotate(var(--gp-r)) translateY(-34px); }
    100% { opacity: 0; transform: rotate(var(--gp-r)) translateY(-70px); }
}

@keyframes ep-gp-text-glow {
    0%, 100% { opacity: 0.45; text-shadow: none; }
    50% { opacity: 1; text-shadow: 0 0 14px rgba(215, 170, 41, 0.28); }
}

/* ─── 渐出状态 ────────────────────────────────────────────── */
#ep-booking-overlay.ep-gp-overlay.is-hiding {
    opacity: 0;
    pointer-events: none;
}

/* ==========================================================
   Gold Power Loader Variant Library — Quiet Luxury Edition
   方向 A：流体光影 / Wisdom Cohesion
   方向 B：精英几何 / Establishment of Order
   方向 C：品牌图腾 / C-Shaped Glimmer
   ========================================================== */

:root {
    --gp-luxe-white: #fffdf5;
    --gp-luxe-ivory: #fff4cc;
    --gp-luxe-soft: #f7da7a;
    --gp-luxe-gold: #d4af37;
    --gp-luxe-deep: #8f6212;
    --gp-luxe-shadow: rgba(96, 67, 10, 0.24);
    --gp-luxe-line: rgba(212, 175, 55, 0.24);
}

.ep-loader--golden-hero .ep-loading-shell,
.ep-loading-shell.ep-loader--golden-hero,
.ep-loader--golden-guardian .ep-loading-shell,
.ep-loading-shell.ep-loader--golden-guardian,
.ep-loader--golden-comet .ep-loading-shell,
.ep-loading-shell.ep-loader--golden-comet,
.ep-loader--golden-bloom .ep-loading-shell,
.ep-loading-shell.ep-loader--golden-bloom {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 50% 18%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.18) 18%, transparent 42%),
        radial-gradient(circle at 50% 110%, rgba(212,175,55,0.15), transparent 46%),
        linear-gradient(160deg, rgba(255,255,255,0.98) 0%, rgba(255,249,229,0.98) 38%, rgba(244,231,190,0.96) 100%);
    border: 1px solid rgba(212, 175, 55, 0.22);
    box-shadow:
        0 20px 40px rgba(97, 69, 14, 0.16),
        inset 0 1px 0 rgba(255,255,255,0.88),
        inset 0 -10px 20px rgba(212,175,55,0.08);
    transform: translateZ(0);
    will-change: transform, filter, box-shadow;
}

.ep-loader--golden-hero .ep-loading-shell::before,
.ep-loading-shell.ep-loader--golden-hero::before,
.ep-loader--golden-guardian .ep-loading-shell::before,
.ep-loading-shell.ep-loader--golden-guardian::before,
.ep-loader--golden-comet .ep-loading-shell::before,
.ep-loading-shell.ep-loader--golden-comet::before,
.ep-loader--golden-bloom .ep-loading-shell::before,
.ep-loading-shell.ep-loader--golden-bloom::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 22px;
    border: 1px solid rgba(212, 175, 55, 0.14);
    background: linear-gradient(135deg, rgba(255,255,255,0.16), transparent 34%, rgba(212,175,55,0.06) 70%, transparent 100%);
    pointer-events: none;
}

.ep-loader--golden-hero .ep-loader-bird,
.ep-loader--golden-guardian .ep-loader-bird,
.ep-loader--golden-comet .ep-loader-bird,
.ep-loader--golden-bloom .ep-loader-bird {
    display: none !important;
}

/* ──────────────────────────────────────────────────────────
   A. Golden Elite — 流体光影 / Wisdom Cohesion
   ────────────────────────────────────────────────────────── */
.ep-loader--golden-hero .ep-loader-stage {
    width: 72px;
    height: 72px;
}

.ep-loader--golden-hero .ep-loader-core {
    display: block;
    inset: 14px;
    border-radius: 50%;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 28%, rgba(255,255,255,0.96) 0%, rgba(255,239,187,0.96) 26%, rgba(212,175,55,0.98) 58%, rgba(143,98,18,1) 100%);
    box-shadow:
        0 0 0 9px rgba(212,175,55,0.10),
        0 10px 22px rgba(97,69,14,0.18),
        inset 0 -8px 12px rgba(74,48,8,0.24);
    animation: gp-fluid-core-float 2.8s ease-in-out infinite;
}

.ep-loader--golden-hero .ep-loader-core::after {
    content: '';
    position: absolute;
    inset: -18%;
    border-radius: 50%;
    background: conic-gradient(from 110deg, transparent 0deg, rgba(255,255,255,0.88) 78deg, transparent 132deg, rgba(255,232,155,0.50) 210deg, transparent 320deg);
    -webkit-mask: radial-gradient(circle, transparent 42%, #000 52%);
    mask: radial-gradient(circle, transparent 42%, #000 52%);
    opacity: 0.78;
    animation: gp-fluid-sheen 1.6s linear infinite;
}

.ep-loader--golden-hero .ep-loader-orbit--a {
    display: block;
    inset: 2px;
    border-style: solid;
    border-color: rgba(212,175,55,0.22);
    animation-duration: 3.8s;
}

.ep-loader--golden-hero .ep-loader-orbit--b {
    display: block;
    inset: 10px;
    border-style: solid;
    border-color: rgba(255,255,255,0.30);
    animation-duration: 2.2s;
}

.ep-loader--golden-hero .ep-loader-bars {
    display: none;
}

.ep-loader--golden-hero .ep-loader-dots {
    display: block;
    inset: 0;
    pointer-events: none;
}

.ep-loader--golden-hero .ep-loader-dots span {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,232,155,0.92) 50%, rgba(212,175,55,0.78) 72%, transparent 74%);
    box-shadow: 0 0 10px rgba(212,175,55,0.26);
}

.ep-loader--golden-hero .ep-loader-dots span:nth-child(1) {
    top: 8px;
    left: 10px;
    animation: gp-fluid-particle-1 2.4s ease-in-out infinite;
}

.ep-loader--golden-hero .ep-loader-dots span:nth-child(2) {
    top: 14px;
    right: 8px;
    animation: gp-fluid-particle-2 2.8s ease-in-out infinite;
}

.ep-loader--golden-hero .ep-loader-dots span:nth-child(3) {
    bottom: 10px;
    left: 20px;
    animation: gp-fluid-particle-3 2.6s ease-in-out infinite;
}

/* ──────────────────────────────────────────────────────────
   B. Golden Focus — 精英几何 / Establishment of Order
   ────────────────────────────────────────────────────────── */
.ep-loader--golden-guardian .ep-loader-stage {
    width: 80px;
    height: 80px;
    transform: rotateX(52deg) rotateZ(45deg);
    transform-style: preserve-3d;
}

.ep-loader--golden-guardian .ep-loader-core,
.ep-loader--golden-guardian .ep-loader-dots {
    display: none;
}

.ep-loader--golden-guardian .ep-loader-orbit--a,
.ep-loader--golden-guardian .ep-loader-orbit--b {
    display: none;
}

.ep-loader--golden-guardian .ep-loader-bars {
    position: absolute;
    inset: 0;
    display: block;
}

.ep-loader--golden-guardian .ep-loader-bars span {
    position: absolute;
    display: block;
    border-radius: 7px;
    background: linear-gradient(145deg, rgba(255,247,207,0.98) 0%, rgba(247,218,122,0.98) 34%, rgba(212,175,55,0.96) 68%, rgba(143,98,18,0.96) 100%);
    border: 1px solid rgba(255,247,207,0.28);
    box-shadow: inset 0 -3px 6px rgba(103,72,14,0.18), 0 8px 16px rgba(97,69,14,0.12);
    will-change: transform, opacity;
}

.ep-loader--golden-guardian .ep-loader-bars span:nth-child(1) {
    width: 30px;
    height: 30px;
    top: 22px;
    left: 22px;
    animation: gp-order-block-1 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.ep-loader--golden-guardian .ep-loader-bars span:nth-child(2) {
    width: 18px;
    height: 40px;
    top: 14px;
    left: 50px;
    animation: gp-order-block-2 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.ep-loader--golden-guardian .ep-loader-bars span:nth-child(3) {
    width: 40px;
    height: 18px;
    top: 50px;
    left: 14px;
    animation: gp-order-block-3 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.ep-loader--golden-guardian .ep-loader-bars span:nth-child(4) {
    width: 12px;
    height: 12px;
    top: 52px;
    left: 56px;
    animation: gp-order-block-4 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.ep-loader--golden-guardian .ep-loader-bars span:nth-child(5) {
    display: none;
}

/* ──────────────────────────────────────────────────────────
   C. Golden Ascent — C形图腾 / C-Shaped Glimmer
   ────────────────────────────────────────────────────────── */
.ep-loader--golden-comet .ep-loader-stage {
    width: 72px;
    height: 72px;
}

.ep-loader--golden-comet .ep-loader-bars {
    display: none;
}

.ep-loader--golden-comet .ep-loader-core {
    display: block;
    inset: 28px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.96), rgba(255,233,171,0.92) 42%, rgba(212,175,55,0.90) 72%, transparent 75%);
    box-shadow: 0 0 14px rgba(212,175,55,0.20);
    animation: gp-c-core-pulse 2.6s ease-in-out infinite;
}

.ep-loader--golden-comet .ep-loader-orbit--a {
    display: block;
    inset: 8px;
    border-radius: 50%;
    border: 6px solid rgba(212,175,55,0.96);
    border-right-color: transparent;
    border-right-width: 0;
    border-top-color: rgba(255,244,199,0.96);
    box-shadow: 0 0 16px rgba(212,175,55,0.22);
    animation: gp-c-ring-rotate 2.6s ease-in-out infinite;
}

.ep-loader--golden-comet .ep-loader-orbit--b {
    display: block;
    inset: 0;
    border-style: dashed;
    border-color: rgba(212,175,55,0.18);
    animation-duration: 4.8s;
}

.ep-loader--golden-comet .ep-loader-dots {
    display: block;
    inset: 0;
    pointer-events: none;
}

.ep-loader--golden-comet .ep-loader-dots span {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.96), rgba(247,218,122,0.96) 54%, rgba(212,175,55,0.86) 70%, transparent 72%);
    box-shadow: 0 0 12px rgba(212,175,55,0.26);
}

.ep-loader--golden-comet .ep-loader-dots span:nth-child(1) {
    width: 10px;
    height: 10px;
    top: 30px;
    right: 4px;
    animation: gp-c-particle-fill 2.6s ease-in-out infinite;
}

.ep-loader--golden-comet .ep-loader-dots span:nth-child(2) {
    width: 6px;
    height: 6px;
    top: 12px;
    right: 18px;
    animation: gp-c-glint-1 2.1s ease-in-out infinite;
}

.ep-loader--golden-comet .ep-loader-dots span:nth-child(3) {
    width: 6px;
    height: 6px;
    bottom: 14px;
    right: 20px;
    animation: gp-c-glint-2 2.3s ease-in-out infinite;
}

/* ──────────────────────────────────────────────────────────
   D. Golden Zen — 安静的奢华 / Quiet Luxury Halo
   ────────────────────────────────────────────────────────── */
.ep-loader--golden-bloom .ep-loader-stage {
    width: 74px;
    height: 74px;
}

.ep-loader--golden-bloom .ep-loader-bars {
    display: none;
}

.ep-loader--golden-bloom .ep-loader-core {
    display: block;
    inset: 16px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.90) 0%, rgba(255,239,187,0.94) 32%, rgba(212,175,55,0.90) 56%, rgba(212,175,55,0.08) 74%, transparent 76%);
    box-shadow: 0 0 0 10px rgba(255,242,178,0.10), 0 8px 18px rgba(97,69,14,0.10);
    animation: gp-zen-core-breathe 3.2s ease-in-out infinite;
}

.ep-loader--golden-bloom .ep-loader-orbit--a {
    display: block;
    inset: 2px;
    border-style: solid;
    border-color: rgba(212,175,55,0.24);
    animation-duration: 5.4s;
}

.ep-loader--golden-bloom .ep-loader-orbit--b {
    display: block;
    inset: 10px;
    border-style: dashed;
    border-color: rgba(255,244,199,0.42);
    animation-duration: 2.8s;
}

.ep-loader--golden-bloom .ep-loader-dots {
    display: block;
    inset: 0;
    pointer-events: none;
}

.ep-loader--golden-bloom .ep-loader-dots span {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.96), rgba(255,232,155,0.96) 50%, rgba(212,175,55,0.78) 74%, transparent 76%);
    box-shadow: 0 0 10px rgba(212,175,55,0.18);
}

.ep-loader--golden-bloom .ep-loader-dots span:nth-child(1) {
    top: 8px;
    left: 16px;
    animation: gp-zen-particle-1 2.7s ease-in-out infinite;
}

.ep-loader--golden-bloom .ep-loader-dots span:nth-child(2) {
    top: 16px;
    right: 10px;
    animation: gp-zen-particle-2 3s ease-in-out infinite;
}

.ep-loader--golden-bloom .ep-loader-dots span:nth-child(3) {
    bottom: 14px;
    left: 22px;
    animation: gp-zen-particle-3 2.8s ease-in-out infinite;
}

/* ──────────────────────────────────────────────────────────
   Keyframes
   ────────────────────────────────────────────────────────── */
@keyframes gp-fluid-core-float {
    0%, 100% { transform: translateY(0) scale(0.98); }
    50% { transform: translateY(-6px) scale(1.02); }
}

@keyframes gp-fluid-sheen {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes gp-fluid-particle-1 {
    0%, 100% { transform: translate(0, 0) scale(0.92); opacity: 0.45; }
    50% { transform: translate(6px, -6px) scale(1.08); opacity: 1; }
}

@keyframes gp-fluid-particle-2 {
    0%, 100% { transform: translate(0, 0) scale(0.88); opacity: 0.4; }
    50% { transform: translate(-4px, 8px) scale(1.04); opacity: 0.92; }
}

@keyframes gp-fluid-particle-3 {
    0%, 100% { transform: translate(0, 0) scale(0.9); opacity: 0.46; }
    50% { transform: translate(7px, -5px) scale(1.06); opacity: 0.96; }
}

@keyframes gp-order-block-1 {
    0%, 100% { transform: translateY(14px) scale(0.72); opacity: 0.12; }
    18% { transform: translateY(0) scale(1.04); opacity: 1; }
    50% { transform: rotateY(180deg) translateZ(4px); opacity: 1; }
    78% { transform: translateY(-4px) scale(0.96); opacity: 0.88; }
}

@keyframes gp-order-block-2 {
    0%, 100% { transform: translateX(12px) scaleY(0.7); opacity: 0.1; }
    20% { transform: translateX(0) scaleY(1.04); opacity: 1; }
    52% { transform: rotateX(180deg) translateZ(4px); opacity: 1; }
    80% { transform: translateY(-2px) scale(0.98); opacity: 0.86; }
}

@keyframes gp-order-block-3 {
    0%, 100% { transform: translateX(-12px) scaleX(0.72); opacity: 0.1; }
    24% { transform: translateX(0) scaleX(1.04); opacity: 1; }
    56% { transform: rotateY(-180deg) translateZ(4px); opacity: 1; }
    82% { transform: translateY(-2px) scale(0.98); opacity: 0.86; }
}

@keyframes gp-order-block-4 {
    0%, 100% { transform: scale(0.4); opacity: 0; }
    32%, 72% { transform: scale(1); opacity: 0.95; }
}

@keyframes gp-c-core-pulse {
    0%, 100% { transform: scale(0.94); opacity: 0.82; }
    50% { transform: scale(1.06); opacity: 1; }
}

@keyframes gp-c-ring-rotate {
    0%, 100% { transform: rotate(0deg) scale(0.98); }
    50% { transform: rotate(-14deg) scale(1.02); }
}

@keyframes gp-c-particle-fill {
    0% { transform: translate(10px, 0) scale(0.5); opacity: 0; }
    42% { transform: translate(0, 0) scale(1); opacity: 1; }
    72% { transform: translate(-4px, 0) scale(0.96); opacity: 0.92; }
    100% { transform: translate(-6px, 0) scale(0); opacity: 0; }
}

@keyframes gp-c-glint-1 {
    0%, 100% { transform: translate(0, 0) scale(0.7); opacity: 0.28; }
    50% { transform: translate(-5px, -3px) scale(1.08); opacity: 0.9; }
}

@keyframes gp-c-glint-2 {
    0%, 100% { transform: translate(0, 0) scale(0.75); opacity: 0.32; }
    50% { transform: translate(-3px, 4px) scale(1.06); opacity: 0.88; }
}

@keyframes gp-zen-core-breathe {
    0%, 100% { transform: scale(0.94); opacity: 0.84; }
    50% { transform: scale(1.04); opacity: 1; }
}

@keyframes gp-zen-particle-1 {
    0%, 100% { transform: translate(0, 0) scale(0.9); opacity: 0.45; }
    50% { transform: translate(5px, -5px) scale(1.06); opacity: 0.95; }
}

@keyframes gp-zen-particle-2 {
    0%, 100% { transform: translate(0, 0) scale(0.88); opacity: 0.4; }
    50% { transform: translate(-4px, 7px) scale(1.04); opacity: 0.88; }
}

@keyframes gp-zen-particle-3 {
    0%, 100% { transform: translate(0, 0) scale(0.9); opacity: 0.44; }
    50% { transform: translate(7px, -4px) scale(1.05); opacity: 0.92; }
}

@media (prefers-reduced-motion: reduce) {
    .ep-loader--golden-hero .ep-loading-shell,
    .ep-loader--golden-guardian .ep-loading-shell,
    .ep-loader--golden-comet .ep-loading-shell,
    .ep-loader--golden-bloom .ep-loading-shell,
    .ep-loader--golden-hero .ep-loading-shell *,
    .ep-loader--golden-guardian .ep-loading-shell *,
    .ep-loader--golden-comet .ep-loading-shell *,
    .ep-loader--golden-bloom .ep-loading-shell * {
        animation: none !important;
        transition: none !important;
    }
}