/**
 * Aidem Robot Hero Widget — CSS v1.5.1
 * Prefix: arh-
 */

/* ── Widget wrapper ───────────────────────────────────────────────────────────
   Full-viewport hero block. overflow:clip clips visually without creating a
   scroll container. The Elementor editor class switches to overflow:hidden so
   overflowing entity images don't block panel control interactions.
   ──────────────────────────────────────────────────────────────────────────── */

.elementor-widget-aidem_robot_hero {
  width: 100% !important;
  align-self: stretch !important;
  flex-shrink: 0 !important;
}

.arh-hero {
  position: relative;
  width: 100%;
  min-height: 100svh;
  background: #000;
  overflow: clip;
  isolation: isolate;
}

/*
 * Non-pinned header underlay.
 * The slide background begins at the top of the page, while the entity keeps
 * the same below-header position and the section retains its previous end.
 */
.hero-header-safe-nonpin .arh-hero {
  min-height: calc(100svh + var(--aidem-hero-header-clearance, 0px));
}

.hero-header-safe-nonpin .arh-entity {
  top: var(--aidem-hero-header-clearance, 0px);
}

.elementor-editor-active .arh-hero {
  overflow: hidden;
}

/* ── Background layer ─────────────────────────────────────────────────────────
   Fills the full wrapper. Slides stack inside it.
   ──────────────────────────────────────────────────────────────────────────── */

.arh-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.arh-slide {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  will-change: opacity, transform, filter, clip-path;
}

.arh-slide.is-active {
  opacity: 1;
  z-index: 1;
}

.arh-slide::before,
.arh-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

.arh-slide.arh-fx-tv-in,
.arh-slide.arh-fx-tv-out,
.arh-slide.arh-fx-transmission-in,
.arh-slide.arh-fx-transmission-out {
  animation-duration: var(--arh-transition-ms, 900ms);
  animation-fill-mode: both;
  transform-origin: center center;
}

.arh-slide.arh-fx-tv-in {
  animation-name: arh-tv-tune-in;
  animation-timing-function: cubic-bezier(.22,.7,.2,1);
}

.arh-slide.arh-fx-tv-out {
  animation-name: arh-tv-signal-out;
  animation-timing-function: ease-in;
}

.arh-slide.arh-fx-tv-in::before {
  background:
    repeating-radial-gradient(circle at 37% 42%, rgba(255,255,255,.95) 0 1px, rgba(0,0,0,.9) 1px 3px),
    repeating-linear-gradient(97deg, rgba(255,0,72,.35) 0 1px, rgba(0,224,255,.28) 1px 2px, transparent 2px 5px);
  background-size: 5px 5px, 9px 100%;
  mix-blend-mode: screen;
  animation: arh-tv-noise var(--arh-transition-ms, 900ms) steps(9, end) both;
}

.arh-slide.arh-fx-tv-in::after {
  background:
    linear-gradient(to bottom, transparent 0 43%, rgba(255,255,255,.9) 49%, rgba(255,255,255,.25) 52%, transparent 58%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.16) 0 1px, rgba(0,0,0,.24) 1px 4px);
  mix-blend-mode: screen;
  animation: arh-tv-scan var(--arh-transition-ms, 900ms) linear both;
}

.arh-slide.arh-fx-transmission-in {
  animation-name: arh-transmission-in;
  animation-timing-function: cubic-bezier(.16,.8,.22,1);
}

.arh-slide.arh-fx-transmission-out {
  animation-name: arh-transmission-out;
  animation-timing-function: ease-in;
}

.arh-slide.arh-fx-transmission-in::before {
  background:
    repeating-linear-gradient(to right, transparent 0 7%, rgba(116,67,255,.35) 7% 7.4%, transparent 7.4% 14%),
    repeating-linear-gradient(to bottom, transparent 0 23px, rgba(0,235,255,.3) 23px 25px);
  mix-blend-mode: screen;
  animation: arh-transmission-grid var(--arh-transition-ms, 900ms) steps(7, end) both;
}

.arh-slide.arh-fx-transmission-in::after {
  inset: -18% 0;
  background: linear-gradient(
    to bottom,
    transparent 0 42%,
    rgba(77,24,177,.1) 44%,
    rgba(151,100,255,.9) 48%,
    rgba(255,255,255,1) 50%,
    rgba(0,235,255,.85) 52%,
    rgba(0,235,255,.08) 56%,
    transparent 58% 100%
  );
  mix-blend-mode: screen;
  animation: arh-transmission-beam var(--arh-transition-ms, 900ms) cubic-bezier(.2,.7,.2,1) both;
}

@keyframes arh-tv-tune-in {
  0% {
    opacity: 0;
    transform: scale3d(.62,.012,1);
    filter: grayscale(1) brightness(5) contrast(3);
    border-radius: 48%;
  }
  10% {
    opacity: 1;
    transform: scale3d(.82,.018,1);
    filter: grayscale(1) brightness(4) contrast(3.2);
  }
  22% {
    transform: translate3d(-1.2%,0,0) scale3d(.9,.16,1) skewX(2deg);
    filter: grayscale(.85) brightness(2.8) contrast(2.4);
  }
  34% {
    transform: translate3d(1.6%,0,0) scale3d(1.02,.48,1) skewX(-1.5deg);
    filter: grayscale(.65) brightness(2.1) contrast(2.1) hue-rotate(18deg);
  }
  48% {
    transform: translate3d(-.9%,.5%,0) scale3d(.99,.82,1);
    filter: grayscale(.45) brightness(1.65) contrast(1.8) hue-rotate(-12deg);
    border-radius: 8%;
  }
  61% {
    transform: translate3d(.65%,-.25%,0) scale3d(1.008,1.015,1);
    filter: grayscale(.2) brightness(1.35) contrast(1.55);
  }
  72% {
    transform: translate3d(-.4%,.18%,0) scale3d(.998,.992,1);
    filter: brightness(1.18) contrast(1.35) saturate(1.2);
  }
  84% {
    transform: translate3d(.18%,0,0);
    filter: brightness(1.08) contrast(1.15);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: none;
    border-radius: 0;
  }
}

@keyframes arh-tv-signal-out {
  0% {
    opacity: 1;
    transform: scale3d(1,1,1);
    filter: none;
  }
  35% {
    opacity: .7;
    transform: scale3d(1.02,.97,1);
    filter: grayscale(.7) brightness(1.7) contrast(2);
  }
  72% {
    opacity: .18;
    transform: scale3d(.82,.08,1);
    filter: grayscale(1) brightness(3) contrast(3);
  }
  100% {
    opacity: 0;
    transform: scale3d(.45,.002,1);
    filter: grayscale(1) brightness(5);
  }
}

@keyframes arh-tv-noise {
  0% {
    opacity: .95;
    transform: translate3d(-2%,1%,0) scale(1.08);
  }
  14% {
    opacity: .85;
    transform: translate3d(2%,-1%,0) scale(1.05);
    background-position: 17px -11px, -8px 0;
  }
  36% {
    opacity: .72;
    transform: translate3d(-1%,2%,0) scale(1.03);
    background-position: -23px 7px, 13px 0;
  }
  62% {
    opacity: .42;
    transform: translate3d(1%,0,0);
    background-position: 31px -19px, -21px 0;
  }
  82% {
    opacity: .18;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}

@keyframes arh-tv-scan {
  0% {
    opacity: .9;
    transform: translate3d(0,-58%,0);
  }
  55% {
    opacity: .72;
  }
  100% {
    opacity: 0;
    transform: translate3d(0,58%,0);
  }
}

@keyframes arh-transmission-in {
  0% {
    opacity: 0;
    clip-path: inset(49.6% 0 49.6% 0);
    transform: scaleX(.82);
    filter: brightness(4) contrast(2.8) saturate(1.8) hue-rotate(32deg);
  }
  12% {
    opacity: 1;
    clip-path: inset(45% 0 43% 0);
    transform: translate3d(0,-1%,0) scaleX(.9);
  }
  26% {
    clip-path: inset(34% 0 31% 0);
    transform: translate3d(0,1.1%,0) scaleX(.96);
    filter: brightness(2.6) contrast(2.3) saturate(1.6) hue-rotate(-24deg);
  }
  43% {
    clip-path: inset(19% 0 22% 0);
    transform: translate3d(.4%,0,0) scaleX(1.01);
  }
  59% {
    clip-path: inset(8% 0 11% 0);
    transform: translate3d(-.3%,0,0);
    filter: brightness(1.65) contrast(1.7) saturate(1.35);
  }
  76% {
    clip-path: inset(0);
    transform: translate3d(.15%,0,0);
    filter: brightness(1.22) contrast(1.3);
  }
  100% {
    opacity: 1;
    clip-path: inset(0);
    transform: translate3d(0,0,0);
    filter: none;
  }
}

@keyframes arh-transmission-out {
  0% {
    opacity: 1;
    clip-path: inset(0);
    transform: translate3d(0,0,0);
    filter: none;
  }
  45% {
    opacity: .7;
    clip-path: inset(12% 0 14% 0);
    transform: scaleX(1.01);
    filter: brightness(1.55) contrast(1.7) hue-rotate(-18deg);
  }
  100% {
    opacity: 0;
    clip-path: inset(49.7% 0 49.7% 0);
    transform: scaleX(.72);
    filter: brightness(3.5) contrast(2.7);
  }
}

@keyframes arh-transmission-grid {
  0% {
    opacity: .92;
    transform: translate3d(-3%,0,0);
    background-position: -60px 0, 0 -50px;
  }
  35% {
    opacity: .7;
    transform: translate3d(2%,0,0);
    background-position: 40px 0, 0 30px;
  }
  68% {
    opacity: .35;
    transform: translate3d(-1%,0,0);
    background-position: -20px 0, 0 70px;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}

@keyframes arh-transmission-beam {
  0% {
    opacity: 0;
    transform: translate3d(0,-42%,0);
  }
  12% {
    opacity: 1;
  }
  78% {
    opacity: .9;
  }
  100% {
    opacity: 0;
    transform: translate3d(0,42%,0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .arh-slide.arh-fx-tv-in,
  .arh-slide.arh-fx-tv-out,
  .arh-slide.arh-fx-transmission-in,
  .arh-slide.arh-fx-transmission-out,
  .arh-slide.arh-fx-tv-in::before,
  .arh-slide.arh-fx-tv-in::after,
  .arh-slide.arh-fx-transmission-in::before,
  .arh-slide.arh-fx-transmission-in::after {
    animation: none;
  }
}

/* ── Scanlines ────────────────────────────────────────────────────────────────
   CSS variables set inline from PHP: --sg (gap), --so (opacity), --sc (colour)
   ──────────────────────────────────────────────────────────────────────────── */

.arh-scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--sg, 4px) - 1px),
    var(--sc, #000) calc(var(--sg, 4px) - 1px),
    var(--sc, #000) var(--sg, 4px)
  );
  background-size: 100% var(--sg, 4px);
  opacity: var(--so, 0.2);
}

.arh-scan--go {
  will-change: background-position;
}

/* ── Entity layer ─────────────────────────────────────────────────────────────
   Absolutely fills the hero wrapper. Flex-start so the image anchors to the
   top. pointer-events:none so it never blocks Elementor panel interactions.
   ──────────────────────────────────────────────────────────────────────────── */

.arh-entity {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  pointer-events: none;
}

/* One shrink-wrapped visual owns the image, chest panel, scale, and offset. */
.arh-visual {
  --arh-scale: 1;
  --arh-offset-y: 0px;
  display: inline-block;
  position: relative;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto;
  line-height: 0;
  pointer-events: none;
  transform-origin: center top;
  transform: translateY(var(--arh-offset-y)) scale(var(--arh-scale));
}

.arh-pic {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  margin: 0;
  line-height: 0;
  pointer-events: none;
  transform: none !important;
}

/* Intrinsic by default: never upscale, but shrink to the available width/height. */
.arh-img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100svh !important;
  object-fit: contain;
  pointer-events: none;
  transform: none !important;
}

/* ── Chest text panel ─────────────────────────────────────────────────────────
   Positioned relative to .arh-visual (the rendered entity footprint).
   top/width/text-align controlled by Elementor selectors.
   Default top:50% places it halfway down the image — adjust per design.
   ──────────────────────────────────────────────────────────────────────────── */

.arh-chest {
  --arh-line-gap: 0px;
  --arh-title-gap: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: 22%;
  pointer-events: none;
}

.arh-chest > .arh-title,
.arh-chest > .arh-line {
  display: block;
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  will-change: opacity, transform;
}

.arh-chest > .arh-title {
  font-weight: 700;
  line-height: 1.2;
}

.arh-chest > .arh-title:not(:empty) {
  margin-block-end: var(--arh-title-gap);
}

.arh-chest > .arh-line {
  line-height: 1.3;
}

.arh-chest > .arh-line:not([data-n="0"]):not(:empty) {
  margin-block-start: var(--arh-line-gap);
}

@media (max-width: 1024px) {
  .arh-chest > .arh-title,
  .arh-chest > .arh-line { white-space: normal; }
}

/* ── Typed cursor ─────────────────────────────────────────────────────────────
   background-color set by Elementor selector.
   ──────────────────────────────────────────────────────────────────────────── */

.arh-cursor {
  display: none;
  width: 2px;
  height: 0.95em;
  vertical-align: -0.1em;
  margin-left: 3px;
  line-height: 1;
  background-color: #8f5cf7;
  animation: arh-blink 0.75s step-end infinite;
}

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