/* effects.css — raios elétricos dourados + faíscas + zoom leve + modal ação */

/* ===== HOVER: zoom sutil só na imagem ===== */
.product-card__thumb {
  overflow: hidden;
  border-radius: 12px;
  position: relative;
}
.product-card__thumb img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
  transition: transform .25s ease;
}
.lightning-card:hover .product-card__thumb img {
  transform: scale(1.05);
}

/* ===== CAMADA DA TEMPESTADE ===== */
.storm-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: rgba(255, 215, 64, 0.05);
  overflow: hidden;
  opacity: 0;
}
.storm-flash--on { animation: storm-loop 30s linear forwards; }
@keyframes storm-loop {
  0%,100% { opacity: 0; }
  5%,10%,15%,20%,25%,30%,35%,40%,45%,50%,55%,60%,65%,70%,75%,80%,85%,90%,95% { opacity: 1; }
}

/* ===== RELÂMPAGO PRINCIPAL (traço) ===== */
.bolt {
  position: absolute;
  width: 2px;
  height: 200px;
  background: linear-gradient(to bottom, rgba(255,240,180,0.0) 0%, rgba(255,225,100,1) 45%, rgba(255,240,180,0.0) 100%);
  filter: drop-shadow(0 0 16px rgba(255,220,90,0.9)) drop-shadow(0 0 28px rgba(255,200,60,0.55));
  opacity: 0;
  transform: rotate(var(--angle, 0deg));
}
.bolt--flash { animation: bolt-strike 1s ease-out forwards; }
@keyframes bolt-strike {
  0%   { opacity: 0; transform: scaleY(0.6) rotate(var(--angle)); }
  10%  { opacity: 1; transform: scaleY(1.1) rotate(var(--angle)); }
  35%  { opacity: .9; }
  60%  { opacity: .45; }
  100% { opacity: 0; transform: scaleY(0.9) rotate(var(--angle)); }
}

/* ===== FAÍSCAS (partículas) ===== */
.spark {
  position: absolute;
  width: var(--size, 4px);
  height: var(--size, 4px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,235,140,1) 0%, rgba(255,210,70,.9) 40%, rgba(255,210,70,0) 70%);
  box-shadow:
    0 0 6px rgba(255, 220, 90, .9),
    0 0 12px rgba(255, 200, 60, .6);
  opacity: 0;
  transform: translate(-50%, -50%) translate3d(0,0,0);
}
.spark--fly {
  animation: spark-fly var(--dur, 900ms) ease-out forwards;
}
@keyframes spark-fly {
  0%   { opacity: 1; transform: translate(-50%, -50%) translate3d(0,0,0) scale(1); }
  70%  { opacity: .9; transform: translate(-50%, -50%) translate3d(var(--vx, 40px), var(--vy, -30px), 0) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate3d(calc(var(--vx) * 1.4), calc(var(--vy) * 1.4), 0) scale(.8); }
}

/* ===== MODAL DE AÇÃO (Adicionar / Finalizar) ===== */
.action-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-items: center;
  background: rgba(0,0,0,.45);
}
.action-card {
  width: min(520px, 92vw);
  background: linear-gradient(180deg, rgba(14,22,44,.96), rgba(8,13,28,.98));
  color: #fff;
  border: 1px solid rgba(151, 170, 220, 0.28);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.action-card header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.action-card h4 { margin: 0; font-size: 1.05rem; }
.action-card p { margin: 8px 0 16px; color: #c9ced6; }
.action-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-primary {
  background: linear-gradient(120deg, #22d3ee, #a78bfa);
  color: #061027;
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost {
  background: transparent; color: #fff; border: 1px solid rgba(151, 170, 220, 0.35);
  border-radius: 10px; padding: 10px 16px; cursor: pointer;
}
.btn-ghost:hover { border-color: #22d3ee; color: #67e8f9; }

/* shake carrinho */
.shake { animation: shake .5s ease; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  50% { transform: translateX(2px); }
  75% { transform: translateX(-1px); }
}

/* Neo Noir overrides (efeitos que eram dourados) */
.storm-flash { background: rgba(34, 211, 238, 0.06); }
.bolt {
  background: linear-gradient(to bottom, rgba(167,240,255,0) 0%, rgba(34,211,238,1) 45%, rgba(167,139,250,0) 100%);
  filter: drop-shadow(0 0 16px rgba(34,211,238,0.85)) drop-shadow(0 0 28px rgba(167,139,250,0.45));
}
.spark {
  background: radial-gradient(circle, rgba(186,230,253,1) 0%, rgba(34,211,238,.85) 40%, rgba(34,211,238,0) 70%);
  box-shadow: 0 0 6px rgba(34, 211, 238, .85), 0 0 12px rgba(167, 139, 250, .55);
}