/* Desert Ruins Gallery v1.0 */

/* ── Base ───────────────────────────────────────────────────────── */
.drg-wrap {
    position: relative;
    width: 100%;
    height: 700px;
    min-height: 200px;
    overflow: hidden;
    background: #1a0d00;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    cursor: crosshair;
}
.drg-wrap .drg-canvas {
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
}

/* ── Heat shimmer overlay (2D canvas) ───────────────────────────── */
.drg-wrap .drg-shimmer-canvas {
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
    z-index: 5;
    mix-blend-mode: screen;
    opacity: 0.22;
}

/* ── Sand storm overlay ──────────────────────────────────────────── */
.drg-wrap .drg-storm-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 8;
    opacity: 0;
    background: radial-gradient(ellipse at 50% 60%, rgba(180,120,40,0.5) 0%, rgba(100,60,10,0.7) 100%);
    transition: opacity 0.25s;
}
.drg-wrap .drg-storm-overlay.active { opacity: 1; }
@keyframes drg-storm-pulse {
    0%,100% { opacity:0.6; }
    50%      { opacity:1.0; }
}
.drg-wrap .drg-storm-overlay.pulsing {
    animation: drg-storm-pulse 0.18s ease-in-out infinite;
}

/* ── Lightning flash ─────────────────────────────────────────────── */
.drg-wrap .drg-flash {
    position: absolute;
    inset: 0;
    background: rgba(255,220,120,0.0);
    pointer-events: none;
    z-index: 25;
    opacity: 0;
}
@keyframes drg-lightning {
    0%  { opacity:0; }
    8%  { opacity:0.85; }
    16% { opacity:0.1; }
    24% { opacity:0.7; }
    40% { opacity:0; }
}
.drg-wrap .drg-flash.strike {
    background: rgba(255,230,140,0.8);
    animation: drg-lightning 0.45s ease-out forwards;
}

/* ── Pressure wave ripple ────────────────────────────────────────── */
.drg-wrap .drg-ripple {
    position: absolute;
    border-radius: 50%;
    border: 2.5px solid rgba(210,160,60,0.8);
    pointer-events: none;
    z-index: 26;
    width: 0; height: 0;
    opacity: 0;
    transform: translate(-50%,-50%);
    box-shadow: 0 0 20px rgba(200,140,40,0.4);
}
@keyframes drg-ripple {
    0%   { width:0;     height:0;     opacity:0.9; border-width:3px; }
    50%  { opacity:0.5; border-width:1.5px; }
    100% { width:440px; height:440px; opacity:0;   border-width:0.5px; }
}
.drg-wrap .drg-ripple.active {
    animation: drg-ripple 0.95s cubic-bezier(0.1,0.9,0.2,1) forwards;
}

/* ── Gyro button ─────────────────────────────────────────────────── */
.drg-wrap .drg-gyro-btn {
    position: absolute;
    bottom: 20px; left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    padding: 10px 24px;
    background: rgba(30,15,0,0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffcc66;
    border: 1px solid rgba(200,140,40,0.5);
    border-radius: 50px;
    font-size: 13px; font-weight: 500;
    cursor: pointer; white-space: nowrap;
    transition: background .2s;
}
.drg-wrap .drg-gyro-btn:hover {
    background: rgba(60,30,0,0.9);
    border-color: rgba(240,180,60,0.7);
}

/* ── Lightbox base ───────────────────────────────────────────────── */
.drg-wrap .drg-lightbox {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 18px;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(.4,0,.2,1);
}
.drg-wrap .drg-lightbox.drg-lb-active {
    display: flex;
    opacity: 1;
}

/* ancient style */
.drg-wrap .drg-lb--ancient {
    background: radial-gradient(ellipse at 50% 80%, rgba(30,15,0,0.97) 0%, rgba(10,5,0,0.98) 65%);
}
/* hologram style */
.drg-wrap .drg-lb--hologram {
    background: rgba(8,12,5,0.96);
}
/* dark style */
.drg-wrap .drg-lb--dark {
    background: rgba(5,3,0,0.97);
}

.drg-wrap .drg-lb-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.drg-wrap .drg-lb-frame {
    position: relative;
    display: inline-block;
}

/* Ancient stone double-border */
.drg-wrap .drg-lb--ancient .drg-lb-frame::before {
    content: '';
    position: absolute;
    inset: -14px;
    border: 1px solid rgba(200,150,50,0.35);
    pointer-events: none;
}
.drg-wrap .drg-lb--ancient .drg-lb-frame::after {
    content: '';
    position: absolute;
    inset: -26px;
    border: 1px solid rgba(180,120,30,0.15);
    pointer-events: none;
}

/* Hologram scan-line overlay on lightbox frame */
.drg-wrap .drg-lb--hologram .drg-lb-frame::before {
    content: '';
    position: absolute;
    inset: -12px;
    border: 1px solid rgba(100,255,150,0.3);
    pointer-events: none;
}
.drg-wrap .drg-lb--hologram .drg-lb-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(100,255,120,0.04) 3px, rgba(100,255,120,0.04) 4px);
    pointer-events: none;
    z-index: 1;
}

/* Ancient glow animation */
@keyframes drg-ancient-glow {
    0%,100% { box-shadow: 0 0 10px rgba(200,140,30,0.3), 0 0 24px rgba(160,100,20,0.15); }
    40%     { box-shadow: 0 0 20px rgba(240,180,50,0.55), 0 0 45px rgba(200,140,30,0.25); }
    70%     { box-shadow: 0 0 13px rgba(220,160,40,0.4), 0 0 30px rgba(180,120,25,0.2); }
}
.drg-wrap .drg-lb--ancient .drg-lb-frame {
    animation: drg-ancient-glow 4s ease-in-out infinite;
}

/* Hologram pulse animation */
@keyframes drg-holo-pulse {
    0%,100% { opacity:0.96; filter:brightness(1) hue-rotate(0deg); }
    50%     { opacity:1.0;  filter:brightness(1.08) hue-rotate(2deg); }
}
.drg-wrap .drg-lb--hologram .drg-lb-img {
    animation: drg-holo-pulse 2.5s ease-in-out infinite;
}

.drg-wrap .drg-lb-img {
    max-width: 85%;
    max-height: 66vh;
    display: block;
    object-fit: contain;
    border-radius: 2px;
    transform: scale(0.91);
    transition: transform 0.65s cubic-bezier(.4,0,.2,1);
}
.drg-wrap .drg-lightbox.drg-lb-active .drg-lb-img { transform: scale(1); }

.drg-wrap .drg-lb-close {
    position: absolute;
    top: 18px; right: 22px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(200,140,40,0.35);
    color: rgba(220,170,80,0.8);
    font-size: 16px;
    padding: 5px 10px;
    border-radius: 50%;
    cursor: pointer;
    transition: background .2s, color .2s;
    z-index: 51;
}
.drg-wrap .drg-lb-close:hover {
    background: rgba(120,70,10,0.2);
    color: #ffcc66;
}

.drg-wrap .drg-lb-prev,
.drg-wrap .drg-lb-next {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    background: rgba(20,10,0,0.7);
    border: 1px solid rgba(180,120,30,0.35);
    color: rgba(220,170,80,0.8);
    font-size: 28px; line-height: 1;
    padding: 10px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .2s;
    z-index: 51;
}
.drg-wrap .drg-lb-prev { left: 16px; }
.drg-wrap .drg-lb-next { right: 16px; }
.drg-wrap .drg-lb-prev:hover, .drg-wrap .drg-lb-next:hover {
    background: rgba(50,25,0,0.88);
    color: #ffd980;
}

.drg-wrap .drg-lb-caption {
    font-family: 'Georgia', serif;
    font-style: italic;
    font-size: 13px;
    letter-spacing: .12em;
    color: rgba(200,150,60,0.55);
    margin: 0;
}
.drg-wrap .drg-lb-counter {
    font-family: sans-serif;
    font-size: 9px;
    letter-spacing: .5em;
    color: rgba(160,110,30,0.3);
    text-transform: uppercase;
    margin: 0;
}
.drg-wrap .drg-lb-hint {
    font-family: sans-serif;
    font-size: 10px;
    letter-spacing: .3em;
    color: rgba(140,90,20,0.22);
    text-transform: uppercase;
    margin: 0;
    cursor: pointer;
}

.drg-wrap .drg-seo {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; list-style: none;
    padding: 0; margin: 0; border: 0;
}

@media (max-width: 767px) {
    .drg-wrap { height: 460px; cursor: auto; }
    .drg-wrap .drg-lb-prev { left: 6px; padding: 8px 10px; }
    .drg-wrap .drg-lb-next { right: 6px; padding: 8px 10px; }
}

.elementor-editor-active .drg-wrap[data-images="[]"]::before {
    content: "🏜️ Desert Ruins Gallery: Keine Bilder ausgewählt";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    color: rgba(220,170,80,0.85);
    font-family: sans-serif; font-size: 13px;
    z-index: 5;
    background: rgba(30,15,0,0.78);
    padding: 10px 22px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    border: 1px solid rgba(180,120,30,0.35);
}