/* ═══════════════════════════════════════════════════════════════
   GhostMirror15 v2.0 — ghost-mirror.css
   ═══════════════════════════════════════════════════════════════ */

:root {
    --gm15-black-wood: #0d0a07;
    --gm15-wood-mid:   #1a1208;
    --gm15-gold:       #c9a84c;
    --gm15-gold-light: #e8c96a;
    --gm15-glass-bg:   #0a0d10;
    --gm15-flash:      #c8f0ff;
    --gm15-ornament:   #c9a84c;
}

/* ─────────────────────────── Wrapper ─────────────────────────── */
.gm15-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    user-select: none;
    font-size: 0;
    overflow: visible;
    padding-bottom: 24px;
}

/* ─────────────────────────── Candles ─────────────────────────── */
.gm15-candle {
    position: absolute;
    top: 80px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.gm15-candle-l { left: -44px; }
.gm15-candle-r { right: -44px; }

.gm15-candle-body {
    width: 14px;
    height: 64px;
    background: linear-gradient(180deg, #e8d8b0 0%, #c4a870 50%, #a08040 100%);
    border-radius: 2px 2px 1px 1px;
    position: relative;
    box-shadow: inset -3px 0 6px rgba(0,0,0,0.3);
}
.gm15-candle-body::after {          /* wax drip */
    content: '';
    position: absolute;
    top: 4px; left: 3px;
    width: 3px; height: 14px;
    background: rgba(255,255,255,0.35);
    border-radius: 0 0 3px 3px;
}

.gm15-candle-flame {
    position: absolute;
    top: -28px;
    width: 16px;
    height: 28px;
    display: flex;
    justify-content: center;
}

/* Outer flame */
.gm15-candle-flame::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 14px;
    height: 26px;
    background: radial-gradient(ellipse at 50% 80%,
        #fff8e0 0%, #ffcc44 35%, #ff8800 65%, transparent 100%);
    border-radius: 50% 50% 30% 30%;
    animation: gm15-flame 0.12s ease-in-out infinite alternate;
    transform-origin: bottom center;
    filter: blur(0.5px);
}
/* Inner blue core */
.gm15-flame-inner {
    position: absolute;
    bottom: 2px;
    width: 5px;
    height: 10px;
    background: radial-gradient(ellipse, #c0e8ff 0%, #80c0ff 60%, transparent 100%);
    border-radius: 50% 50% 30% 30%;
    animation: gm15-flame-inner 0.09s ease-in-out infinite alternate;
    transform-origin: bottom center;
}

@keyframes gm15-flame {
    0%   { transform: scaleX(1)    scaleY(1)    rotate(-1deg); }
    33%  { transform: scaleX(0.88) scaleY(1.06) rotate(2deg);  }
    66%  { transform: scaleX(1.08) scaleY(0.96) rotate(-2deg); }
    100% { transform: scaleX(0.94) scaleY(1.04) rotate(1deg);  }
}
@keyframes gm15-flame-inner {
    0%   { transform: scaleX(1)    rotate(1deg);  }
    100% { transform: scaleX(0.85) rotate(-2deg); }
}

/* Dynamic warm glow cast on the frame wood */
.gm15-candle-glow {
    position: absolute;
    top: -18px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,180,40,0.38) 0%, transparent 70%);
    animation: gm15-glow-pulse 0.15s ease-in-out infinite alternate;
    pointer-events: none;
    mix-blend-mode: screen;
}
@keyframes gm15-glow-pulse {
    0%   { transform: scale(1);    opacity: 0.8; }
    100% { transform: scale(1.12); opacity: 1;   }
}

/* ─────────────────────────── Floor ──────────────────────────── */
.gm15-floor {
    position: relative;
    width: 340px;
    height: 28px;
    background: linear-gradient(to right, #080604 0%, #1c160c 30%, #2a2012 50%, #1c160c 70%, #080604 100%);
    border-radius: 2px;
    margin-top: -6px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.9), 0 2px 6px rgba(0,0,0,0.7);
}
.gm15-floor::before {
    content:''; position:absolute; inset:0;
    background: repeating-linear-gradient(90deg, transparent 0px, transparent 18px,
        rgba(255,255,255,0.025) 18px, rgba(255,255,255,0.025) 19px);
    border-radius: inherit;
}
.gm15-floor-shadow {
    position:absolute; bottom:-12px; left:10%; width:80%; height:20px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.7) 0%, transparent 70%);
    filter: blur(6px);
}

/* ─────────────────────────── Pedestal & Poles ───────────────── */
.gm15-stand { display:flex; flex-direction:column; align-items:center; position:relative; }

.gm15-pedestal {
    width:260px; height:30px;
    background: linear-gradient(180deg,#201808 0%,#0d0a05 100%);
    border:2px solid var(--gm15-ornament,#c9a84c);
    border-radius:4px 4px 0 0;
    position:relative;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.8), inset 0 1px 3px rgba(255,220,100,0.15);
}
.gm15-pedestal::before {
    content:''; position:absolute; top:4px; left:12px; right:12px; height:2px;
    background: linear-gradient(90deg,transparent,var(--gm15-ornament,#c9a84c),transparent);
    opacity:0.5;
}

.gm15-pedestal-ornament {
    position:absolute; top:50%; width:18px; height:18px;
    border-radius: 50% 50% 50% 0;
    background: var(--gm15-ornament,#c9a84c);
    box-shadow: 0 0 6px rgba(200,160,60,0.6);
}
.gm15-orn-bot-l { left:20px;  transform:translateY(-50%) rotate(-45deg); }
.gm15-orn-bot-r { right:20px; transform:translateY(-50%) rotate(135deg); }

.gm15-pole {
    position:absolute; top:28px; width:14px; height:48px;
    background: linear-gradient(90deg,#0e0b06 0%,#2a2010 50%,#0e0b06 100%);
    border-left:1px solid rgba(200,160,60,0.3);
    border-right:1px solid rgba(200,160,60,0.3);
}
.gm15-pole-l { left:calc(50% - 140px); }
.gm15-pole-r { right:calc(50% - 140px); }

/* ─────────────────────────── Frame outer ────────────────────── */
.gm15-frame-outer {
    position:relative; width:300px; min-height:420px;
    background: linear-gradient(160deg,#1e1508 0%,#0d0a05 40%,#1a1208 100%);
    border:6px solid transparent;
    border-image: linear-gradient(160deg,
        var(--gm15-gold-light,#e8c96a) 0%,
        var(--gm15-ornament,#c9a84c) 30%,
        #7a5c18 60%,
        var(--gm15-ornament,#c9a84c) 100%
    ) 1;
    border-radius:8px 8px 4px 4px;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.9),
        0 0 30px rgba(0,0,0,0.95),
        inset 0 0 20px rgba(0,0,0,0.8),
        0 0 60px rgba(100,60,0,0.15);
    padding:14px; margin-top:-2px; z-index:2;
    perspective: 800px;
    transform-style: preserve-3d;
    transition: box-shadow 0.4s ease;
}

/* Warm candle glow bleed onto frame edges */
.gm15-frame-outer::after {
    content:''; position:absolute; inset:-4px;
    border-radius:inherit;
    background: transparent;
    box-shadow: -24px 0 40px rgba(255,160,30,0.08), 24px 0 40px rgba(255,160,30,0.08);
    pointer-events:none; z-index:-1;
    animation: gm15-frame-candle-glow 0.18s ease-in-out infinite alternate;
}
@keyframes gm15-frame-candle-glow {
    0%   { box-shadow: -24px 0 40px rgba(255,160,30,0.06), 24px 0 40px rgba(255,160,30,0.06); }
    100% { box-shadow: -24px 0 52px rgba(255,160,30,0.14), 24px 0 52px rgba(255,160,30,0.14); }
}

/* ─────────────────────────── Corners ────────────────────────── */
.gm15-corner { position:absolute; width:32px; height:32px; z-index:10; }
.gm15-corner::before,.gm15-corner::after {
    content:''; position:absolute;
    background:var(--gm15-ornament,#c9a84c);
    box-shadow:0 0 8px rgba(200,160,60,0.5); border-radius:1px;
}
.gm15-corner::before { width:100%; height:3px; top:12px; left:0; }
.gm15-corner::after  { width:3px; height:100%; left:12px; top:0; }
.gm15-corner-tl { top:-4px; left:-4px; }
.gm15-corner-tr { top:-4px; right:-4px; transform:scaleX(-1); }
.gm15-corner-bl { bottom:-4px; left:-4px; transform:scaleY(-1); }
.gm15-corner-br { bottom:-4px; right:-4px; transform:scale(-1); }

/* ─────────────────────────── Crest ──────────────────────────── */
.gm15-crest { position:absolute; top:-44px; left:50%; transform:translateX(-50%); width:100px; z-index:20; }
.gm15-crest-svg {
    width:100%; height:auto;
    color:var(--gm15-ornament,#c9a84c);
    filter:drop-shadow(0 0 6px rgba(200,160,60,0.7)) drop-shadow(0 0 12px rgba(200,160,60,0.3));
}

/* ─────────────────────────── Mirror Viewport ────────────────── */
.gm15-mirror-viewport {
    position:relative; width:100%; height:380px;
    background:var(--gm15-glass-bg);
    border-radius:3px; overflow:hidden; cursor:pointer; outline:none;
}
.gm15-mirror-viewport:focus-visible {
    box-shadow:0 0 0 3px var(--gm15-ornament,#c9a84c);
}

/* ─────────────────────────── Before/After ───────────────────── */
.gm15-ba-normal {
    position:absolute; inset:0; z-index:1;
    background-size:cover; background-position:center;
    opacity:0; pointer-events:none;
    transition:none;
}
.gm15-wrapper[data-beforeafter="yes"] .gm15-ba-normal {
    opacity:1;
}
/* clip-path set via JS: right half reveals canvas */
.gm15-wrapper[data-beforeafter="yes"] .gm15-canvas {
    clip-path:inset(0 0 0 50%);
}

.gm15-ba-divider {
    display:none;
    position:absolute; top:0; bottom:0; width:3px;
    background: linear-gradient(180deg, transparent, rgba(200,160,60,0.8), transparent);
    z-index:12; left:50%;
    pointer-events:none;
}
.gm15-wrapper[data-beforeafter="yes"] .gm15-ba-divider { display:block; }

.gm15-ba-handle {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:28px; height:28px; border-radius:50%;
    background:var(--gm15-ornament,#c9a84c);
    box-shadow:0 0 12px rgba(200,160,60,0.8);
    border:2px solid #fff8;
}

/* ─────────────────────────── WebGL canvas ───────────────────── */
.gm15-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; z-index:2; }

/* ─────────────────────────── Cracks ─────────────────────────── */
.gm15-cracks {
    position:absolute; inset:0; width:100%; height:100%;
    pointer-events:none; z-index:7; overflow:visible;
}
.gm15-crack-line {
    stroke: rgba(255,255,255,0.55);
    stroke-width: 1;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 2px rgba(180,220,255,0.7));
}
/* Animated via stroke-dashoffset in JS */

/* ─────────────────────────── Scratches ──────────────────────── */
.gm15-scratches {
    position:absolute; inset:0; pointer-events:none;
    background-image:
        linear-gradient(23deg, transparent 30%, rgba(255,255,255,0.04) 31%, transparent 32%),
        linear-gradient(65deg, transparent 55%, rgba(255,255,255,0.03) 56%, transparent 58%),
        linear-gradient(110deg, transparent 10%, rgba(255,255,255,0.025) 11%, transparent 13%),
        linear-gradient(145deg, transparent 70%, rgba(255,255,255,0.035) 71%, transparent 73%);
    z-index:4;
}

/* ─────────────────────────── Particles ──────────────────────── */
.gm15-particles { position:absolute; inset:0; pointer-events:none; z-index:5; overflow:hidden; }
.gm15-particle {
    position:absolute; border-radius:50%;
    background: radial-gradient(circle at 40% 40%,
        rgba(200,240,255,0.9) 0%, rgba(150,210,240,0.4) 50%, transparent 100%);
    animation:gm15-float linear infinite;
    pointer-events:none; mix-blend-mode:screen;
}
@keyframes gm15-float {
    0%   { transform:translateY(0)    translateX(0)   scale(1);   opacity:0; }
    10%  { opacity:1; }
    50%  { transform:translateY(-45%) translateX(8%)  scale(1.1); }
    90%  { opacity:0.7; }
    100% { transform:translateY(-90%) translateX(-5%) scale(0.8); opacity:0; }
}

/* ─────────────────────────── Ghost Text ─────────────────────── */
.gm15-ghost-text {
    position:absolute; inset:0; z-index:9;
    display:flex; align-items:center; justify-content:center;
    pointer-events:none; opacity:0;
    transition: opacity 1.8s ease;
    text-align:center; padding:20px;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: clamp(14px, 4cqw, 22px);
    font-style:italic;
    line-height:1.6;
    color: rgba(210,230,255,0.88);
    text-shadow:
        0 0 8px rgba(150,200,255,0.9),
        0 0 20px rgba(100,160,255,0.6),
        0 0 40px rgba(80,130,220,0.3);
    letter-spacing:0.05em;
    background: radial-gradient(ellipse at center, rgba(30,40,60,0.45) 0%, transparent 70%);
}
.gm15-ghost-text.gm15-gt-visible { opacity:1; }

/* ─────────────────────────── Flash overlay ──────────────────── */
.gm15-flash-overlay {
    position:absolute; inset:0;
    background:var(--gm15-flash,#c8f0ff);
    opacity:0; pointer-events:none; z-index:8; mix-blend-mode:screen;
}

/* ─────────────────────────── Vignette ───────────────────────── */
.gm15-vignette {
    position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%);
    z-index:6;
}

/* ─────────────────────────── Slide Dots ─────────────────────── */
.gm15-slide-dots {
    position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
    display:flex; gap:6px; z-index:11; pointer-events:none;
}
.gm15-dot {
    width:7px; height:7px; border-radius:50%;
    background:rgba(255,255,255,0.35);
    transition:background 0.3s, transform 0.3s;
}
.gm15-dot.gm15-dot-active {
    background:var(--gm15-ornament,#c9a84c);
    transform:scale(1.3);
}

/* ═══════════════════════════════════════════════════════════════
   Lightbox
   ═══════════════════════════════════════════════════════════════ */
.gm15-lightbox {
    position:fixed; inset:0; z-index:99999;
    display:flex; align-items:center; justify-content:center;
    background:rgba(2,2,4,0.92);
    opacity:0; pointer-events:none;
    transition:opacity 0.4s ease;
}
.gm15-lightbox.gm15-lb-open { opacity:1; pointer-events:all; }

.gm15-lb-fog {
    position:absolute; inset:0;
    background:radial-gradient(ellipse at center, transparent 30%, rgba(30,10,10,0.85) 100%);
    pointer-events:none;
    animation:gm15-fog-pulse 6s ease-in-out infinite;
}
@keyframes gm15-fog-pulse {
    0%,100% { opacity:0.7; }
    50%     { opacity:1; }
}

.gm15-lb-close,.gm15-lb-prev,.gm15-lb-next {
    position:absolute;
    background:transparent;
    border:1px solid rgba(200,160,60,0.5);
    color:var(--gm15-gold,#c9a84c);
    cursor:pointer; z-index:10;
    transition:background 0.2s, color 0.2s;
    display:flex; align-items:center; justify-content:center;
    font-family:serif;
}
.gm15-lb-close:hover,.gm15-lb-prev:hover,.gm15-lb-next:hover {
    background:rgba(200,160,60,0.2); color:#fff;
}
.gm15-lb-close { top:20px; right:24px; font-size:28px; width:44px; height:44px; border-radius:50%; }
.gm15-lb-prev  { left:20px;  top:50%; transform:translateY(-50%); font-size:36px; width:44px; height:64px; border-radius:4px; }
.gm15-lb-next  { right:20px; top:50%; transform:translateY(-50%); font-size:36px; width:44px; height:64px; border-radius:4px; }

.gm15-lb-media-wrap {
    position:relative; max-width:90vw; max-height:90vh;
    display:flex; align-items:center; justify-content:center;
}
.gm15-lb-glow {
    position:absolute; inset:-30px; border-radius:8px;
    box-shadow:0 0 0 2px rgba(160,20,20,0.6), 0 0 40px rgba(160,20,20,0.4), 0 0 80px rgba(160,20,20,0.2);
    pointer-events:none;
    animation:gm15-lb-glow-pulse 3s ease-in-out infinite;
}
@keyframes gm15-lb-glow-pulse {
    0%,100% { box-shadow:0 0 0 2px rgba(160,20,20,0.6),0 0 40px rgba(160,20,20,0.4),0 0 80px rgba(160,20,20,0.2); }
    50%     { box-shadow:0 0 0 2px rgba(200,30,30,0.8),0 0 60px rgba(200,30,30,0.5),0 0 120px rgba(200,30,30,0.25); }
}
.gm15-lb-inner img,
.gm15-lb-inner video {
    max-width:90vw; max-height:85vh; border-radius:4px; display:block; position:relative; z-index:2;
}

/* ═══════════════════════════════════════════════════════════════
   Responsive – Mobile
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:600px) {
    .gm15-floor,.gm15-pole,.gm15-pedestal,.gm15-candle { display:none !important; }
    .gm15-frame-outer { width:94vw; margin-top:0; }
    .gm15-wrapper { padding-bottom:8px; }
}

@media (prefers-reduced-motion:reduce) {
    .gm15-particle,.gm15-lb-fog,.gm15-lb-glow,
    .gm15-candle-flame::before,.gm15-flame-inner,
    .gm15-candle-glow,.gm15-frame-outer::after { animation:none !important; }
}