/* ==========================================================================
   Aidem Neumorphic Ripple
   Dedicated widget stylesheet extracted from deferred-widgets.css.
   ========================================================================== */

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

   Aidem Neumorphic Ripple  (.anr-*)

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



.anr-wrap {

  position:        relative;

  display:         flex;

  align-items:     center;

  justify-content: center;

  width:           100%;

  overflow:        hidden;

  background:      var(--anr-wrap-bg, var(--anr-bg, #e0e5ec));

}



.anr-ring {

  position:      absolute;

  top:           50%;

  left:          50%;

  border-radius: 50%;

  /* JS sizes width/height; start invisible for GSAP from-scale animation */

  background:    var(--anr-bg, #e0e5ec);

  box-shadow:

    calc(var(--anr-sh-size, 18px) * -0.55) calc(var(--anr-sh-size, 18px) * -0.55) calc(var(--anr-sh-size, 18px) * 1.6) var(--anr-sh-light, #ffffff),

    calc(var(--anr-sh-size, 18px) *  0.55) calc(var(--anr-sh-size, 18px) *  0.55) calc(var(--anr-sh-size, 18px) * 1.6) var(--anr-sh-dark,  #b8bec7);

  /* JS sets translate so position stays centred after GSAP transforms */

  will-change: transform, opacity;

}



.anr-centre {

  position:      relative;

  z-index:       20;

  width:         var(--anr-img-size, 160px);

  height:        var(--anr-img-size, 160px);

  border-radius: 50%;

  overflow:      hidden;

  flex-shrink:   0;

  box-shadow:

    calc(var(--anr-sh-size, 18px) * -0.55) calc(var(--anr-sh-size, 18px) * -0.55) calc(var(--anr-sh-size, 18px) * 1.6) var(--anr-sh-light, #ffffff),

    calc(var(--anr-sh-size, 18px) *  0.55) calc(var(--anr-sh-size, 18px) *  0.55) calc(var(--anr-sh-size, 18px) * 1.6) var(--anr-sh-dark,  #b8bec7);

}



/* Slides stacked inside the circle — JS + GSAP controls opacity transitions */

.anr-slide {

  position:   absolute;

  top:        0;

  left:       0;

  width:      100%;

  height:     100%;

  object-fit: cover;

  display:    block;

  opacity:    0;

}



.anr-slide--active {

  opacity: 1;

}



/* Bad-TV canvas overlay — drawn by JS during slide transitions */

.anr-tv-canvas {

  position:       absolute;

  top:            0;

  left:           0;

  width:          100%;

  height:         100%;

  border-radius:  50%;

  pointer-events: none;

  z-index:        5;

  opacity:        0;

}



/* Replay cursor hint */

.anr-wrap[data-click-replay="yes"] {

  cursor: pointer;

}



/* ── Title & Subtitle overlays ───────────────────────────────────────────── */



.anr-title,

.anr-subtitle {

  position:       absolute;

  left:           0;

  right:          0;

  text-align:     center;

  pointer-events: none;

  z-index:        50; /* above rings (max z-index: count ≤ 16) and centre (z-index: 20) */

  font-family:    var(--anr-text-font, inherit);

  font-weight:    var(--anr-text-weight, 500);

  letter-spacing: var(--anr-text-spacing, 0.2em);

  text-transform: var(--anr-text-transform, uppercase);

  color:          var(--anr-text-color, #c5cad3);

  /* Neumorphic embossed default */

  text-shadow:

    -1px -1px 2px var(--anr-sh-light, #ffffff),

     1px  1px 3px var(--anr-sh-dark,  #b8bec7);

}



.anr-title {

  font-size: var(--anr-title-size, 32px);

  /* Sit above the centre image; gap driven by CSS var */

  bottom: calc(50% + var(--anr-img-size) / 2 + var(--anr-text-gap, 24px));

}



.anr-subtitle {

  font-size: var(--anr-subtitle-size, 20px);

  /* Sit below the centre image */

  top: calc(50% + var(--anr-img-size) / 2 + var(--anr-text-gap, 24px));

}



/* Debossed variant — reversed shadows */

.anr-wrap[data-text-shadow="debossed"] .anr-title,

.anr-wrap[data-text-shadow="debossed"] .anr-subtitle {

  text-shadow:

     1px  1px 2px var(--anr-sh-light, #ffffff),

    -1px -1px 3px var(--anr-sh-dark,  #b8bec7);

}



/* No shadow */

.anr-wrap[data-text-shadow="none"] .anr-title,

.anr-wrap[data-text-shadow="none"] .anr-subtitle {

  text-shadow: none;

}