/* ======================================================== */
/* ESTADOS BASE DO PALCO                                    */
/* ======================================================== */
.gpl-global-preview-stage {
position: relative;
width: 100%;
overflow: hidden;
border-radius: inherit;
background: #090a0f;
}

/* Durante o Carregamento, Vazios ou Quebrados: Força 16:9 Mágico */
.gpl-global-preview-stage:not(.is-loaded),
.gpl-global-preview-stage.is-empty,
.gpl-global-preview-stage.is-broken {
aspect-ratio: 16 / 9;
display: flex;
align-items: center;
justify-content: center;
}

/* Estado com Imagem (Após Carregar): Altura Automática Nua e Crua */
.gpl-global-preview-stage.has-image.is-loaded {
height: auto;
aspect-ratio: auto;
background: transparent;
display: block;
}

.gpl-global-preview-stage img {
position: relative;
z-index: 3;
width: 100%;
height: auto;
display: block;
transition: transform 0.5s ease;
opacity: 0; /* Invisível enquanto carrega */
}

/* Efeito de Revelação Mágica ao Carregar */
.gpl-global-preview-stage.is-loaded img {
animation: magicReveal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes magicReveal {
0% { opacity: 0; filter: blur(10px); transform: scale(1.05); }
100% { opacity: 1; filter: blur(0); transform: scale(1); }
}

/* ======================================================== */
/* 1. MODO CARREGAMENTO: Skeleton Loader Mágico             */
/* ======================================================== */
.gpl-magic-loading-state {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(110deg, #090a0f 25%, #1e293b 50%, #090a0f 75%);
background-size: 200% 100%;
animation: shimmerBg 2s infinite linear;
}
@keyframes shimmerBg {
0% { background-position-x: 200%; }
100% { background-position-x: -200%; }
}
.gpl-magic-loading-icon {
font-size: calc(3rem * var(--card-scale, 1));
color: #10b981; /* Verde Científico */
filter: drop-shadow(0 0 15px rgba(16, 185, 129, 0.8));
animation: pulseLoader 1.5s ease-in-out infinite alternate;
}
@keyframes pulseLoader {
0% { transform: scale(0.9); filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.5)); opacity: 0.7; }
100% { transform: scale(1.1); filter: drop-shadow(0 0 25px rgba(16, 185, 129, 1)); opacity: 1; }
}

/* Oculta o Loader quando a imagem carrega ou se o link quebrar */
.gpl-global-preview-stage.is-loaded .gpl-magic-loading-state,
.gpl-global-preview-stage.is-broken .gpl-magic-loading-state {
display: none !important;
}

/* ======================================================== */
/* 2. MODO VAZIO (Universo em Expansão e Foguete)           */
/* ======================================================== */
.gpl-magic-empty-state {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
}

.gpl-magic-stars-1, .gpl-magic-stars-2 {
position: absolute;
width: 200%; height: 200%;
top: -50%; left: -50%;
background: transparent url('data:image/svg+xml;utf8,') repeat;
z-index: 1;
}
.gpl-magic-stars-1 { animation: zoomUniverse 18s linear infinite; }
.gpl-magic-stars-2 { animation: zoomUniverse 24s linear infinite 9s; opacity: 0; }

@keyframes zoomUniverse {
0% { transform: scale(0.5) rotate(0deg); opacity: 0; }
50% { opacity: 1; }
100% { transform: scale(2.5) rotate(25deg); opacity: 0; }
}

.gpl-magic-icon-glow {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: calc(140px * var(--card-scale, 1));
height: calc(140px * var(--card-scale, 1));
background: radial-gradient(circle, rgba(168,85,247,0.25) 0%, transparent 60%);
border-radius: 50%;
z-index: 1;
animation: pulseGlow 4s ease-in-out infinite;
}
@keyframes pulseGlow {
0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

.gpl-magic-icon-core {
position: relative;
z-index: 3;
font-size: calc(3.5rem * var(--card-scale, 1));
color: #f0fdfa;
filter: drop-shadow(0 0 15px #38bdf8) drop-shadow(0 0 35px #a855f7);
animation: floatRocket 4s ease-in-out infinite;
}
@keyframes floatRocket {
0%, 100% { transform: translateY(0) scale(1) rotate(45deg); }
50% { transform: translateY(-8px) scale(1.05) rotate(45deg); filter: drop-shadow(0 0 25px #38bdf8) drop-shadow(0 0 50px #a855f7); }
}

/* ======================================================== */
/* 3. MODO QUEBRADO (Satélite Perdido)                      */
/* ======================================================== */
.gpl-broken-icon {
position: relative;
z-index: 3;
font-size: calc(3.5rem * var(--card-scale, 1));
color: #fee2e2;
filter: drop-shadow(0 0 15px #ef4444) drop-shadow(0 0 35px #f97316);
animation: floatBroken 5s ease-in-out infinite;
}
@keyframes floatBroken {
0%, 100% { transform: translateY(0) rotate(-10deg); }
50% { transform: translateY(-5px) rotate(10deg); filter: drop-shadow(0 0 25px #ef4444) drop-shadow(0 0 50px #f97316); }
}

.gpl-magic-rings {
position: absolute;
width: calc(100px * var(--card-scale, 1));
height: calc(100px * var(--card-scale, 1));
z-index: 2;
}
.gpl-magic-ring-outer, .gpl-magic-ring-inner {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px dashed transparent;
}
.gpl-magic-ring-outer {
border-top-color: #38bdf8;
border-bottom-color: #a855f7;
animation: spinRings 5s linear infinite;
opacity: 0.6;
}
.gpl-magic-ring-inner {
inset: 15px;
border-left-color: #f472b6;
border-right-color: #4ade80;
animation: spinRingsReverse 3s linear infinite;
opacity: 0.8;
}
@keyframes spinRings { 100% { transform: rotate(360deg); } }
@keyframes spinRingsReverse { 100% { transform: rotate(-360deg); } }

/* ======================================================== */
/* 4. MODO HOVER: Scanner Magnético Verde                   */
/* ======================================================== */
.gpl-global-preview-stage::after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 2px; /* Espessura mais fina */
background: #10b981; /* Verde Esmeralda/Néon */
/* Sombra simétrica para ficar bonita subindo e descendo */
box-shadow: 0 0 8px 2px rgba(16, 185, 129, 0.8),
0 0 20px 6px rgba(16, 185, 129, 0.4);
z-index: 10;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
top: 100%; /* Começa sempre na base */
}

.gpl-global-preview-stage:hover::after {
opacity: 1;
/* 'alternate' faz a animação ir de 0 a 100 e depois de 100 a 0 continuamente */
animation: magicMagneticScan 2s ease-in-out infinite alternate;
}

/* Keyframe puro e simples, o vai-e-vem é gerenciado pelo 'alternate' */
@keyframes magicMagneticScan {
0% { top: 100%; }
100% { top: 0%; }
}