/* ==========================================================================
   Aidem Dark Glow Card
   Dedicated widget stylesheet extracted from deferred-widgets.css.
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════

   DARK GLOW CARD  —  .agc-*   (Dark glassmorphic animated card)

   Colours via scoped <style> CSS vars; layout via Elementor responsive selectors

   ═══════════════════════════════════════════════════════════════════════════ */



/* ── Keyframes ────────────────────────────────────────────────────────────── */

@keyframes agc-rotate360 { to { rotate: 360deg; } }



@keyframes agc-wobble {

  0%   { transform: translateX(10px)  translateY(20px)  rotate(-3deg)  scale(1);    }

  20%  { transform: translateX(-44px) translateY(-8px)  rotate(6deg)   scale(1.02); }

  60%  { transform: translateX(32px)  translateY(18px)  rotate(-8deg)  scale(1);    }

  80%  { transform: translateX(-42px) translateY(-22px) rotate(12deg)  scale(0.94); }

  100% { transform: translateX(10px)  translateY(20px)  rotate(-3deg)  scale(1);    }

}



/* ── Wrapper ─────────────────────────────────────────────────────────────── */

.agc-wrap {

  position:        relative;

  display:         flex;

  justify-content: center;

  align-items:     center;

  min-height:      640px;

  overflow:        visible;

  padding:         80px 20px 60px;

}



/* ── Main card ───────────────────────────────────────────────────────────── */

.agc-card {

  position:        relative;

  z-index:         1; /* above .agc-accents (z-index:0) */

  width:           320px;

  height:          500px;

  border-radius:   16px;

  background:      linear-gradient(180deg, var(--agc-bg-start, rgba(41,41,41,.67)) 0%, var(--agc-bg-end, rgba(25,25,25,.8)) 50%);

  backdrop-filter: blur(4px);

  -webkit-backdrop-filter: blur(4px);

  box-shadow:      inset 0  2px 2px 0 color-mix(in srgb, var(--agc-glow, #e7c4a0) 53%, transparent),

                   inset 0 -2px 2px 0 rgba(0,0,0,0.2);

  color:           var(--agc-title, #ccc);

  text-shadow:     1px 1px 3px rgba(51,51,51,.67);

  padding:         24px;

  padding-right:   42px;

  padding-top:     180px; /* slides body up to overlap bottom of image; overridden by Layout control */

  display:         flex;

  flex-direction:  column;

  justify-content: flex-start;

}



/* ── Image area ──────────────────────────────────────────────────────────── */

.agc-img-wrap {

  position:      absolute;

  top:           24px;

  left:          24px;

  right:         24px;

  height:        220px;

  border-radius: 12px;

  overflow:      hidden;

}



/* Single or slideshow — img shown at natural ratio, no crop */

.agc-img-wrap img,

.agc-slide {

  position:       absolute;

  top:            0;

  left:           0;

  width:          100%;

  height:         100%;

  object-fit:     contain;

  object-position: center center;

  display:        block;

  user-select:    none;

  pointer-events: none;

  opacity:        0;

}



.agc-slide--active { opacity: 1; }



/* Bad-TV canvas overlay — sits above slides, below glass */

.agc-tv-canvas {

  position:       absolute;

  top:            0;

  left:           0;

  width:          100%;

  height:         100%;

  pointer-events: none;

  z-index:        5;

  opacity:        0;

}



/* Glassmorphic overlay on the image */

.agc-img-glass {

  position:      absolute;

  inset:         0;

  background:    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 50%, rgba(0,0,0,0.25) 100%);

  backdrop-filter: blur(0.3px);

  border-radius: inherit;

  border:        1px solid rgba(255,255,255,0.12);

}



/* ── Card body ───────────────────────────────────────────────────────────── */

.agc-body { position: relative; z-index: 1; }



.agc-title {

  font-size:   1.1em;

  font-weight: 700;

  color:       var(--agc-title, #ccc) !important;

  margin:      8px 0;

  text-shadow: 1px 1px 3px rgba(51,51,51,.67);

  text-align:  center;

}



.agc-text {

  font-size:   0.9em;

  font-weight: 800;

  color:       var(--agc-text, #aaa) !important;

  margin:      8px 0;

  text-align:  center;

}



/* ── Button ──────────────────────────────────────────────────────────────── */

.agc-btn {

  display:         block;

  width:           fit-content;

  margin-left:     auto;

  margin-right:    auto;

  border-radius:   100px !important;

  padding:         8px 36px;

  margin-top:      12px;

  background:      var(--agc-btn-bg, rgba(255,255,255,0.13)) !important;

  color:           var(--agc-btn-col, #ccc) !important;

  text-decoration: none !important;

  border:          none !important;

  cursor:          pointer;

  box-shadow:      0 0 0 1px rgba(255,255,255,0.2),

                   inset 120px 0 100px -100px rgba(0,0,0,0.75),

                   0 0 0 0 rgba(255,255,255,0.07) !important;

  transition:      box-shadow 0.4s ease-in-out;

}



.agc-btn:hover {

  box-shadow: 0 0 0 1px rgba(255,255,255,0.2),

              inset 200px 0 100px -100px rgba(0,0,0,0.63),

              -4px 0 8px 2px rgba(255,255,255,0.13) !important;

}



/* ── Accents container — z-index:0, entire layer sits behind card ────────── */

.agc-accents {

  position:        absolute;

  inset:           0;

  pointer-events:  none;

  user-select:     none;

  display:         flex;

  justify-content: center;

  align-items:     center;

  z-index:         0;

}



/* ── Wobbling accent cards ───────────────────────────────────────────────── */

.agc-acc-card {

  position:         absolute;

  width:            330px;

  height:           500px;

  background:       rgba(238,238,238,0.07);

  opacity:          0.8;

  z-index:          1; /* in front of .agc-light (z-index:0) within accents */

  border-radius:    16px;

  box-shadow:       inset 0  2px 2px 0 rgba(224,201,178,0.4),

                    inset 0 -2px 2px 0 rgba(0,0,0,0.27);

  backdrop-filter:  blur(4px);

  -webkit-backdrop-filter: blur(4px);

  transform-origin: 20% 80%;

}



.agc-acc-card:nth-child(1) { animation: agc-wobble 18s ease-in-out infinite; }

.agc-acc-card:nth-child(2) { animation: agc-wobble 22s ease-in-out -6s infinite reverse; }

.agc-acc-card:nth-child(3) { animation: agc-wobble 26s ease-in-out -18s infinite; }



/* ── Rotating circle lights (inline SVG, color via currentColor) ─────────── */

.agc-light {

  position:   absolute;

  right:      calc(16% + 10px);

  left:       0;

  top:        calc(50% + 20px);

  margin:     auto;

  width:      164px;

  height:     164px;

  z-index:    0; /* behind .agc-acc-card (z-index:1) within accents */

  color:      var(--agc-circle-color, rgba(200,200,200,0.7));

  animation:  agc-rotate360 22s linear infinite;

}



/* SVG inherits currentColor for its strokes; drop-shadow creates the halo */

.agc-light svg {

  filter: drop-shadow(0 0 4px currentColor)

          drop-shadow(0 0 10px currentColor);

}



.agc-light-sm {

  width:     100px;

  height:    100px;

  left:      calc(15% + 15px);

  right:     0;

  top:       calc(30% - 50px);

  animation: agc-rotate360 18s linear -10s infinite;

}



/* ── Top light bar — sibling of card, above it (z-index:3) ──────────────── */

/* Positioned absolute within .agc-wrap (position:relative)                   */

.agc-top-light {

  position:       absolute;

  left:           0;

  right:          0;

  top:            calc(50% - 292px);

  margin:         auto;

  width:          284px;

  height:         6px;

  border-radius:  10px;

  pointer-events: none;

  user-select:    none;

  background:     var(--agc-top-light, #fffef9);

  box-shadow:     0  0px  1px  1px  var(--agc-top-light, #ffc78e),

                  0  1px  2px  1px  color-mix(in srgb, var(--agc-top-light, #ff9429) 47%, transparent),

                  0  2px  6px  1px  color-mix(in srgb, var(--agc-top-light, #e98b2d) 47%, transparent),

                  0  4px 12px  0px  color-mix(in srgb, var(--agc-top-light, #ff9e3d) 60%, transparent),

                  0 12px 20px 12px  color-mix(in srgb, var(--agc-top-light, #ff8000) 27%, transparent);

  z-index:        3;

}



/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 736px) {

  .agc-card     { width: 85vw !important; }

  .agc-acc-card { width: calc(85vw + 10px) !important; }

  .agc-wrap     { min-height: 560px; padding: 60px 16px 40px; }

}