/* ==========================================================================
   Deferred Widget Styles
   Extracted from core.css so these heavier, non-hero widgets only load
   when the matching Elementor widget is present on the page.
   ========================================================================== */

/* ─── Aidem Testimonial Carousel v0.1.0 ─────────────────────────────────── */



.atc-wrap {

  --atc-width:      28em;

  --atc-height:     20em;

  --atc-move:       2.2em;

  --atc-arrow-gap:  5em;

  --atc-blur:       12px;

  --atc-p7:         hsl(223, 90%, 70%);

  --atc-s8:         hsl(178, 90%, 80%);

  --atc-dot-active: hsl(223, 90%, 60%);

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 1.5em;

}



/* Carousel viewport — sized to contain both offset cards */

.atc-carousel {

  position: relative;

  width:  calc(var(--atc-width)  + var(--atc-move) * 2);

  height: calc(var(--atc-height) + var(--atc-move) * 2);

}



/* Each slide fills the carousel; GSAP positions off-screen when inactive */

.atc-slide {

  position: absolute;

  inset: 0;

}



/* .cards origin sits at the carousel centre so both offset cards fit */

.atc-slide .cards {

  position: absolute;

  top:  50%;

  left: 50%;

}



/* Shared card base */

.atc-slide .card {

  border-radius: 1em;

  box-shadow:    0 0.25em 0.375em hsla(0, 0%, 0%, 0.1);

  position:      absolute;

  width:         var(--atc-width);

  height:        var(--atc-height);

  transform:     translate(-50%, -50%);

}



/* Back (coloured) card — bottom-left offset, same translate as glass card */

.atc-card-bg {

  top:      var(--atc-move);

  left:     calc(var(--atc-move) * -1);

  overflow: hidden; /* clip decorative symbols to card boundary */

  /* inherits transform: translate(-50%,-50%) from .atc-slide .card */

}



/* ── Decorative blurred symbols on the coloured back card ────────────── */

.atc-deco {

  position:       absolute;

  display:        block;

  pointer-events: none;

  user-select:    none;

  color:          color-mix(in srgb, var(--atc-accent) 50%, white);

  opacity:        0.35;

  filter:         blur(6px);

  overflow:       visible;

}

.atc-deco--sm {

  opacity: 0.40;

  filter:  blur(5px);

}



/* Pulse: CSS animation so it never conflicts with the translate transform */

@keyframes atc-bg-pulse {

  0%, 100% { transform: translate(-50%, -50%) scale(1); }

  50%       { transform: translate(-50%, -50%) scale(var(--atc-ps, 1.02)); }

}



.atc-wrap[data-pulse="1"] .atc-card-bg {

  animation: atc-bg-pulse var(--atc-pd, 4s) ease-in-out infinite;

}



/* Glass front card */

.atc-slide .card--glass {

  backdrop-filter: blur(var(--atc-blur));

  -webkit-backdrop-filter: blur(var(--atc-blur));

  background-image: linear-gradient(90deg, hsla(0,0%,100%,.20), hsla(0,0%,100%,.05));

  top:  calc(var(--atc-move) * -1);

  left: var(--atc-move);

}



.atc-slide .card--glass::before,

.atc-slide .card--glass::after {

  border-radius: inherit;

  content: "";

  display: block;

  position: absolute;

  inset: 0;

}



/* Top-left glint — white edge highlight */

.atc-slide .card--glass::before {

  border: 1px solid hsl(0, 0%, 100%);

  mask-image: linear-gradient(135deg, hsl(0,0%,100%), hsla(0,0%,100%,0) 50%);

  -webkit-mask-image: linear-gradient(135deg, hsl(0,0%,100%), hsla(0,0%,100%,0) 50%);

}



/* Bottom-right accent edge — uses per-slide --atc-accent colour */

.atc-slide .card--glass::after {

  border: 1px solid var(--atc-accent, var(--atc-dot-active));

  mask-image: linear-gradient(135deg, hsla(0,0%,100%,0) 50%, hsl(0,0%,100%));

  -webkit-mask-image: linear-gradient(135deg, hsla(0,0%,100%,0) 50%, hsl(0,0%,100%));

}



/* ── Card content — gradient-clipped text matching the original design ─── */

.atc-slide .card__content {

  background:

    linear-gradient(

      hsla(0,0%,100%,0) 3.5em,

      var(--atc-p7)     3.8em,

      var(--atc-s8)     5.5em

    ) 0 0 / calc(var(--atc-width) - var(--atc-move) * 2) 50%,

    linear-gradient(

      90deg,

      var(--atc-s8)     14em,

      var(--atc-p7)     calc(var(--atc-width) - var(--atc-move) * 2),

      hsla(0,0%,100%,0) 23em

    ) 0 100% / 100% 50%,

    linear-gradient(

      90deg,

      hsla(0,0%,100%,.55) 5em,

      hsla(0,0%,100%,.22)

    ) 0 0 / 100% 100%;

  -webkit-background-clip: text;

  background-clip:   text;

  background-repeat: no-repeat;

  color:     transparent;

  display:   flex;

  flex-wrap: wrap;

  justify-content: space-between;

  align-items:     flex-start;

  padding:  1.5em 1.75em 1.5em 1.75em;

  position: relative;

  height:   100%;

  z-index:  1;

  box-sizing: border-box;

}



.atc-slide .card__title {

  font-family: Caladea, Georgia, serif;

  font-size:   1.1em;

  font-weight: 700;

  line-height: 1.3;

  flex: 1 1 0;

  min-width: 0;

  /* colour: transparent (inherited from .card__content) shows gradient by default.

     Setting a colour via Elementor controls overrides this and uses plain colour. */

}



.atc-slide .card__logo {

  display:     flex;

  align-items: flex-start;

  justify-content: flex-end;

  flex:        0 0 auto;

  width:       auto;

}

.atc-slide .card__logo img {

  width:         48px;

  height:        48px;

  max-width:     none;

  aspect-ratio:  1 / 1;

  border-radius: 50%;

  object-fit:    cover;

  display:       block;

  flex-shrink:   0;

  box-shadow:    0 2px 8px rgba(0,0,0,0.25);

}



.atc-slide .card__author {

  font-size:   0.8em;

  font-weight: 600;

  align-self:  flex-end;

  width: 100%;

  margin-top:  auto;

}



.atc-slide .card__url {

  font-size: 0.7em;

  margin:    0;

  width:     100%;

}



/* ── Navigation dots ─────────────────────────────────────────────────── */

.atc-dots {

  display:         flex;

  gap:             0.5em;

  justify-content: center;

}



.atc-dot {

  width:         0.55em;

  height:        0.55em;

  border-radius: 50%;

  background:    hsla(0, 0%, 100%, 0.3);

  cursor:        pointer;

  transition:    background 0.3s ease, transform 0.3s ease;

  padding:       0;

  border:        none;

  flex-shrink:   0;

}



.atc-dot--active {

  background: var(--atc-dot-active, hsl(223, 90%, 60%));

  transform:  scale(1.5);

}



/* ── Navigation arrows ───────────────────────────────────────────────── */

.atc-arrows {

  position:        absolute;

  top:             50%;

  left:            50%;

  transform:       translate(-50%, -50%);

  width:           calc(var(--atc-width) + var(--atc-move) * 4 + var(--atc-arrow-gap, 5em));

  display:         flex;

  justify-content: space-between;

  align-items:     center;

  pointer-events:  none;

}



.atc-arrow {

  width:           2.2em;

  height:          2.2em;

  border-radius:   50%;

  background:      hsla(0, 0%, 100%, 0.15);

  backdrop-filter: blur(4px);

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

  border:          1px solid hsla(0, 0%, 100%, 0.3);

  color:           hsl(0, 0%, 100%);

  font-size:       1em;

  line-height:     1;

  cursor:          pointer;

  pointer-events:  auto;

  display:         flex;

  align-items:     center;

  justify-content: center;

  flex-shrink:     0;

  transition:      background 0.2s ease, border-color 0.2s ease;

}



.atc-arrow:hover {

  background:   hsla(0, 0%, 100%, 0.28);

  border-color: hsla(0, 0%, 100%, 0.5);

}

/* ── Testimonial responsive ─────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .atc-wrap {
    --atc-width:  22em;
    --atc-height: 22em;
    --atc-move:   1.6em;
    font-size:    0.92em;
  }
}

@media (max-width: 767px) {
  .atc-wrap {
    --atc-width:  18em;
    --atc-height: 24em;
    --atc-move:   1.2em;
    font-size:    0.85em;
  }

  .atc-slide .card__content {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.9em;
    padding-left: 1.1em;
    padding-right: 1.1em;
  }

  .atc-slide .card__logo {
    order: 1;
    width: 100%;
    justify-content: center;
    align-items: center;
  }

  .atc-slide .card__title {
    order: 2;
    width: 100%;
    flex: 0 0 auto;
    text-align: left;
  }

  .atc-slide .card__author {
    order: 3;
    width: 100%;
    margin-top: 0;
    align-self: stretch;
  }

  .atc-slide .card__url {
    order: 4;
    width: 100%;
  }
}



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

   NEUMORPHIC FEATURE CARDS  —  .afc-*   (v0.7 — fully responsive)

   Colours: scoped <style> CSS vars per breakpoint (output by widget render())

   Layout:  Elementor responsive controls + selectors (override defaults here)

   Typo:    Group_Control_Typography selectors (override defaults here)

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



/* ── Wrapper — CSS var defaults (overridden by widget <style> block) ─────── */

.afc-wrap {

  --afc-bg:          #ebf5fc;

  --afc-sh-light:    #ffffff;

  --afc-sh-dark:     #ceced1;

  --afc-num-color:   rgba(0,0,0,0.05);

  --afc-num-size:    9rem;

  --afc-img-size:    110px;

  --afc-title-color: #777;

  --afc-text-color:  #777;

  --afc-btn-bg:      #03a9f4;

  --afc-btn-color:   #fff;

  display: block;

  width:   100%;

  padding: 40px 0;

}



/* ── Grid — gap overridden by Elementor responsive selector ──────────────── */

.afc-grid {

  display:         flex;

  justify-content: center;

  align-items:     flex-start;

  flex-wrap:       wrap;

  gap:             30px;

  padding:         40px 20px;

}



/* ── Card — width/height overridden by Elementor responsive selector ─────── */

.afc-card {

  position:      relative;

  width:         350px;

  height:        480px;

  border-radius: 15px;

  box-shadow:    inset  5px  5px 10px rgba(0,0,0,0.10),

                 inset -5px -5px 20px rgba(255,255,255,0.10),

                        5px  5px 10px rgba(0,0,0,0.05),

                       -5px -5px 20px rgba(255,255,255,0.05);

  will-change:   transform, opacity;

}



/* ── Inner — absolute inset, flex center ────────────────────────────────── */

.afc-inner {

  position:        absolute;

  top:             20px;

  left:            20px;

  right:           20px;

  bottom:          20px;

  background:      var(--afc-bg);

  box-shadow:      0 10px 20px rgba(0,0,0,0.10);

  border-radius:   19px;

  display:         flex;

  justify-content: center;

  align-items:     center;

  overflow:        visible;

}



/* ── Image circle — position/size overridden by Elementor responsive ─────── */

.afc-img-area {

  position:        absolute;

  top:             15px;

  left:            15px;

  width:           var(--afc-img-size, 110px);

  height:          var(--afc-img-size, 110px);

  border-radius:   50%;

  background:      var(--afc-bg);

  box-shadow:      -3px -3px 7px var(--afc-sh-light, #ffffff),

                    3px  3px  5px var(--afc-sh-dark,  #ceced1);

  display:         flex;

  align-items:     center;

  justify-content: center;

  z-index:         2;

}



.afc-img-inner {

  width:         calc(100% - 12px);

  height:        calc(100% - 12px);

  border-radius: 50%;

  overflow:      hidden;

}



.afc-img-inner img {

  width:         100%;

  height:        100%;

  object-fit:    cover;

  border-radius: 50%;

  display:       block;

}



/* ── Content ─────────────────────────────────────────────────────────────── */

.afc-content {

  padding:    20px;

  text-align: center;

  width:      100%;

}



/* When an image circle is present, push content down to clear it.

   --afc-img-size is kept in sync by the img_size responsive control selector. */

.afc-content.has-image {

  padding-top: calc(var(--afc-img-size, 110px) + 20px);

}



/* ── Number watermark — top/right/font-size overridden by Elementor ──────── */

.afc-num {

  position:       absolute;

  top:            70px;

  right:          15px;

  font-size:      var(--afc-num-size, 9rem);

  font-weight:    900;

  line-height:    1;

  color:          var(--afc-num-color) !important;

  pointer-events: none;

  user-select:    none;

  margin:         0;

  z-index:        0;

}



/* ── Title — font-size/weight overridden by Group_Control_Typography ─────── */

.afc-title {

  position:    relative;

  z-index:     1;

  font-size:   1.8em;

  font-weight: 700;

  color:       var(--afc-title-color) !important;

  margin:      0 0 10px !important;

  display:     block !important;

}



/* ── Body text ────────────────────────────────────────────────────────────── */

.afc-text {

  font-size:   1em;

  font-weight: 300;

  line-height: 1.6;

  color:       var(--afc-text-color) !important;

  margin:      0 !important;

  display:     block !important;

}



/* ── Button — neumorphic profile-card style ──────────────────────────────── */

.afc-btn {

  position:        relative;

  display:         inline-block !important;

  padding:         12px 28px !important;

  background:      var(--afc-btn-bg) !important;

  margin-top:      15px !important;

  border-radius:   50px !important;

  color:           var(--afc-btn-color) !important;

  text-decoration: none !important;

  font-weight:     400;

  font-size:       1em;

  border:          none !important;

  cursor:          pointer;

  box-shadow:      -3px -3px 7px var(--afc-sh-light, #ffffff),

                    3px  3px  5px var(--afc-sh-dark,  #ceced1) !important;

}



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

@media (max-width: 736px) {

  .afc-card { width: 100%; }

  .afc-grid { padding: 20px 16px; gap: 20px; }

}



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

   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; }

}



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

   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;

}

/* ==========================================================================
   Terminal  (.at-*)
   ========================================================================== */

.at-wrap {
  --at-bg:            #1e1e1e;
  --at-header-bg:     #2d2d2d;
  --at-text:          #00ff00;
  --at-prompt:        #00ff00;
  --at-cursor:        #00ff00;
  --at-out:           #cccccc;
  --at-height:        320px;
  --at-radius:        8px;
  --at-font-size:     13px;
  --at-cursor-speed:  0.7s;

  width: 100%;
  border-radius: var(--at-radius);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
}

/* -- Header ---------------------------------------------------------------- */

.at-header {
  background: var(--at-header-bg);
  height: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 0;
  flex-shrink: 0;
  position: relative;
}

.at-btns {
  display: flex;
  gap: 6px;
  align-items: center;
  z-index: 1;
}

.at-btn {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
}

.at-btn--close { background: #ff5f57; }
.at-btn--min   { background: #ffbd2e; }
.at-btn--max   { background: #28c840; }

.at-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: #888;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.02em;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  max-width: 60%;
  text-overflow: ellipsis;
}

/* -- Body ------------------------------------------------------------------ */

.at-body {
  background: var(--at-bg);
  height: var(--at-height);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 16px 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-size: var(--at-font-size);
  font-family: "Courier New", Courier, Menlo, Monaco, monospace;
  line-height: 1.6;
  /* Thin custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #444 transparent;
}

.at-body::-webkit-scrollbar       { width: 5px; }
.at-body::-webkit-scrollbar-track { background: transparent; }
.at-body::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }

/* -- History --------------------------------------------------------------- */

.at-history { }

.at-history-line {
  display: block;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
}

.at-hist-prompt { color: var(--at-prompt); }
.at-hist-cmd    { color: var(--at-text); }

/* -- Output ---------------------------------------------------------------- */

.at-output {
  color: var(--at-out);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 1px 0 10px;
  padding-left: 2px;
}

/* Output colour helpers */
.at-output .at-green  { color: #27c93f; }
.at-output .at-gray,
.at-output .at-grey   { color: #888888; }
.at-output .at-yellow { color: #ffbd2e; }
.at-output .at-red    { color: #ff5f57; }
.at-output .at-cyan   { color: #00d8d6; }
.at-output .at-white  { color: #ffffff; }
.at-output .at-dim    { color: #555555; }
.at-output .at-blue   { color: #5bc0de; }

/* -- Active line (prompt + typing area) ------------------------------------ */

.at-active-line {
  flex-shrink: 0;
  min-height: 1.6em;
  margin-top: 2px;
  word-break: break-all;
}

.at-prompt {
  display: inline;
  color: var(--at-prompt);
  white-space: pre;
}

.at-typed {
  display: inline;
  color: var(--at-text);
  white-space: pre-wrap;
}

.at-cursor {
  display: inline;
  color: var(--at-cursor);
  animation: at-blink var(--at-cursor-speed, 0.7s) step-end infinite;
}

@keyframes at-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* -- Mobile ---------------------------------------------------------------- */

@media (max-width: 768px) {
  .at-body { padding: 10px 12px; }
  .at-title { display: none; }
}