/* ==========================================================================
   Deferred Scene Widgets
   Extracted from core.css so below-the-fold homepage scenes no longer
   sit in the shared base stylesheet for every Blunor page.
   ========================================================================== */

/* ==========================================================================
   Logos Wheel  (.alw-*)
   ========================================================================== */

.alw-wrap {
  position: relative;
  margin: 0 auto;
  width: min(92vw, 980px);
  aspect-ratio: 1 / 1;
  overflow: visible;
  touch-action: none;
  --alw-item-size: 100px;
  --alw-nm-bg: #f0f0f3;
  --alw-nm-light: #ffffff;
  --alw-nm-dark: #c8ccd4;
  --alw-nm-offset: 6px;
  --alw-nm-blur: 12px;
  --alw-nm-pad: 8px;
  --alw-title-gap: 6px;
}

.alw-wheel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* NO will-change here — it would create a stacking context that isolates
     item z-indices from .alw-center, breaking the pass-through depth effect.
     GSAP animates each .alw-item individually; they form their own stacking
     contexts and can correctly compete with the sibling .alw-center. */
  user-select: none;
}

.alw-item {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--alw-item-size, 100px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  pointer-events: auto;
}

.alw-upright {
  transform-origin: 50% 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* -- Circle ---------------------------------------------------------------- */

.alw-circle {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: visible;
  flex-shrink: 0;
}

/* Inner wrapper clips image to circle */
.alw-img-wrap {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--alw-img-pad, 8px); /* inner breathing room — keeps images inside circle */
}

.alw-img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* default: show full logo, no cropping */
  object-position: center;
  flex-shrink: 0;
}

.alw-img-wrap .alw-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Embossed -- raised */
.alw-wrap[data-nm="embossed"] .alw-circle {
  background: var(--alw-nm-bg);
  padding: var(--alw-nm-pad);
  box-shadow:
    calc(-1 * var(--alw-nm-offset)) calc(-1 * var(--alw-nm-offset)) var(--alw-nm-blur) var(--alw-nm-light),
    var(--alw-nm-offset) var(--alw-nm-offset) var(--alw-nm-blur) var(--alw-nm-dark);
}

/* Inverted -- pressed */
.alw-wrap[data-nm="inverted"] .alw-circle {
  background: var(--alw-nm-bg);
  padding: var(--alw-nm-pad);
  box-shadow:
    inset calc(-1 * var(--alw-nm-offset)) calc(-1 * var(--alw-nm-offset)) var(--alw-nm-blur) var(--alw-nm-light),
    inset var(--alw-nm-offset) var(--alw-nm-offset) var(--alw-nm-blur) var(--alw-nm-dark);
}

/* -- Title below circle ---------------------------------------------------- */

.alw-title {
  display: block;
  margin-top: var(--alw-title-gap, 6px);
  font-size: 0.7em;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  color: #333;
  pointer-events: none;
}

/* -- Tooltip --------------------------------------------------------------- */

.alw-item::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(0,0,0,0.8);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 5px 9px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10;
}

.alw-item::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(0,0,0,0.8);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 9;
  pointer-events: none;
}

.alw-item:hover::after,
.alw-item:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* -- Center (sandwich layers) ---------------------------------------------- */

/* Shared base for both layers */
.alw-center {
  position: absolute;
  top: calc(50% + var(--alw-center-y, 0px));
  left: calc(50% + var(--alw-center-x, 0px));
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  width: max-content;
  max-width: 80%;
}

/* Layer 1 — solid text, default position above everything */
.alw-center--back  { z-index: 200; }

/* Layer 3 — stroke-only text, hidden unless passthrough is active */
.alw-center--front { z-index: 200; display: none; }

/* ── Sandwich / passthrough mode ─────────────────────────────────────────── */

/* Back layer drops behind all circles (z-index 10–90) */
.alw-wrap[data-mode="planets"][data-zmode="passthrough"] .alw-center--back  { z-index: 1; }

/* Front layer floats above all circles */
.alw-wrap[data-mode="planets"][data-zmode="passthrough"] .alw-center--front {
  display: block;
  z-index: 200;
}

/* Front heading: transparent fill + stroke — wraps visually around circles */
.alw-wrap[data-mode="planets"][data-zmode="passthrough"] .alw-center--front .alw-center-heading {
  -webkit-text-stroke: var(--alw-stroke-width, 2px) var(--alw-stroke-color, #222222);
  color: transparent;
  paint-order: stroke fill; /* stroke paints under fill in supporting browsers */
}

/* Front subtext: match stroke treatment */
.alw-wrap[data-mode="planets"][data-zmode="passthrough"] .alw-center--front .alw-center-sub {
  -webkit-text-stroke: 1px var(--alw-stroke-color, #222222);
  color: transparent;
}

.alw-center-heading {
  font-size: clamp(1.2rem, 2.8vw, 2.2rem);
  font-weight: 700;
  color: #222;
  letter-spacing: 0.05em;
  margin: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.alw-center-sub {
  margin: 6px 0 0;
  font-size: clamp(0.75rem, 1.5vw, 1rem);
  color: #666;
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .alw-wrap { touch-action: auto; }
}

@media (max-width: 768px) {
  .alw-wrap { width: min(92vw, 600px); }
}

/* ── Parallax Objects widget (apo) ───────────────────────────────────────── */
.apo-widget {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.apo-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* roiheads pattern: will-change only — no backface-visibility, no transform-style */
.apo-object {
  position: absolute;
  transform-origin: center center;
  will-change: transform;
  transition: none !important;
}

.apo-object-inner {
  width: 100%;
  will-change: transform;
}

.apo-object-inner img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.elementor-widget-aidem_parallax_objects {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
  z-index: 40 !important;
  overflow: visible !important;
}

/* ── Object Overlay Linker / Edged Cards ────────────────────────────────── */
.gsap-pin-on,
.gsap-pin-on > .e-con-inner,
.gsap-pin-on > .elementor-container,
.e-con:has(.gsap-pin-on),
.elementor-section:has(.gsap-pin-on),
.e-con:has(.aool-widget),
.e-con:has(.aool-widget) > .e-con-inner,
.elementor-section:has(.aool-widget),
.elementor-section:has(.aool-widget) > .elementor-container {
  transition: none !important;
}

.elementor-widget-aidem_object_overlay_linker {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100%;
  align-self: stretch;
  pointer-events: none;
  z-index: var(--aool-widget-z-index, 12) !important;
  overflow: visible !important;
}

.elementor-widget-aidem_edged_cards {
  position: relative;
  width: 100%;
  max-width: none;
  height: 100%;
  overflow: visible;
}

.elementor-widget-aidem_object_overlay_linker > .elementor-widget-container,
.elementor-widget-aidem_edged_cards > .elementor-widget-container {
  width: 100%;
  height: 100%;
}

.aool-widget,
.aro-widget,
.aec-widget {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ── Object Overlay Linker ──────────────────────────────────────────────── */
.aool-widget {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  isolation: isolate;
  pointer-events: none;
  transition: none !important;
  --aool-reveal-progress: 0;
  --aool-transition-progress: 0;
  --aool-object-width: var(--aool-object-width-desktop, 42%);
  --aool-object-offset-y: var(--aool-object-offset-y-desktop, 0px);
  --aool-base-shift-x: var(--aool-base-shift-x-desktop, 0px);
  --aool-base-shift-y: var(--aool-base-shift-y-desktop, 0px);
  --aool-overlay-shift-x: var(--aool-overlay-shift-x-desktop, 0px);
  --aool-overlay-shift-y: var(--aool-overlay-shift-y-desktop, 0px);
  --aool-lottie-width: var(--aool-lottie-width-desktop, var(--aool-object-width-desktop, 42%));
  --aool-lottie-offset-y: var(--aool-lottie-offset-y-desktop, 0px);
  --aool-object-align: var(--aool-object-align-desktop, center);
}

.aool-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: none !important;
}

.aool-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity, filter, clip-path;
}

.aool-object-slot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: var(--aool-object-align, var(--aool-object-align-desktop, center));
  padding: 0 2vw;
  z-index: 1;
}

.aool-object-shell {
  position: relative;
  width: var(--aool-object-width, var(--aool-object-width-desktop, 42%));
  max-width: 100%;
  transform: translateY(var(--aool-object-offset-y, var(--aool-object-offset-y-desktop, 0px)));
  will-change: transform, filter;
}

.aool-object-shell--fixed-stage {
  aspect-ratio: var(--aool-aspect-ratio, auto);
}

.aool-object-shell--shadow .aool-object--base img {
  filter: drop-shadow(-10px 18px 28px rgba(0, 0, 0, 0.42));
}

.aool-object,
.aool-reveal-fx,
.aool-transition {
  position: absolute;
  inset: 0;
}

.aool-object--base {
  position: relative;
  z-index: 1;
}

.aool-object--overlay {
  z-index: 2;
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: transform, opacity, filter, clip-path;
  mix-blend-mode: normal;
}

.aool-overlay-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

 .aool-overlay-layer--image {
   position: relative;
   z-index: 2;
 }

.aool-overlay-layer--lottie {
  z-index: 3;
}

.aool-overlay-layer__lottie-viewport {
  width: var(--aool-lottie-width, var(--aool-lottie-width-desktop, var(--aool-object-width-desktop, 42%)));
  max-width: 100%;
  max-height: 100%;
  height: auto;
  aspect-ratio: var(--aool-lottie-aspect-ratio, auto);
  position: relative;
  flex: 0 0 auto;
  overflow: visible;
  transform: translateY(var(--aool-lottie-offset-y, var(--aool-lottie-offset-y-desktop, 0px)));
  will-change: transform;
}

.aool-object-shell--fixed-stage .aool-overlay-layer--image {
  position: absolute;
}

.aool-overlay-layer--template > *,
.aool-overlay-layer__lottie-viewport > svg,
.aool-overlay-layer__lottie-viewport > canvas {
  width: 100%;
  height: 100%;
}

.aool-overlay-layer--template > .elementor {
  width: 100%;
}

.aool-overlay-layer__lottie-viewport svg,
.aool-overlay-layer__lottie-viewport canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.aool-object__img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.aool-object-shell--fixed-stage .aool-object,
.aool-object-shell--fixed-stage .aool-reveal-fx,
.aool-object-shell--fixed-stage .aool-transition {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.aool-object-shell--fixed-stage .aool-object--base,
.aool-object-shell--fixed-stage .aool-object--overlay {
  position: absolute;
  inset: 0;
}

.aool-object-shell--fixed-stage .aool-object__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.aool-object__img--base {
  transform: translate(var(--aool-base-shift-x, 0px), var(--aool-base-shift-y, 0px));
  will-change: transform;
}

.aool-object__img--overlay {
  transform: translate(var(--aool-overlay-shift-x, 0px), var(--aool-overlay-shift-y, 0px));
  will-change: transform;
}

.elementor-editor-active .aool-widget[data-aool-editor-preview="1"] .aool-object--overlay {
  opacity: 0.62;
  clip-path: none !important;
  filter: none !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

.elementor-editor-active .aool-widget[data-aool-editor-preview="1"] .aool-transition,
.elementor-editor-active .aool-widget[data-aool-editor-preview="1"] .aool-reveal-fx {
  opacity: 0;
}

.aool-reveal-fx {
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
}

.aool-reveal-sheen,
.aool-reveal-scan,
.aool-reveal-noise,
.aool-reveal-ring,
.aool-transition-bar,
.aool-transition-arc,
.aool-transition-drip {
  position: absolute;
  pointer-events: none;
}

.aool-reveal-sheen {
  inset: 10% -6%;
  opacity: 0;
  background:
    radial-gradient(circle at var(--aool-focus-x, 50%) var(--aool-focus-y, 50%),
      color-mix(in srgb, white 76%, transparent) 0%,
      color-mix(in srgb, var(--aool-accent-2, #FFB50D) 36%, transparent) 12%,
      transparent 42%);
  filter: blur(28px);
  transform: scale(0.72);
}

.aool-reveal-scan {
  inset: 0 auto 0 0;
  width: 18%;
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--aool-accent-1, #8C5FF5) 72%, white 8%) 48%,
    transparent 100%
  );
  filter: blur(14px);
  transform: translateX(-30%);
}

.aool-reveal-noise {
  inset: -6%;
  opacity: 0;
  background:
    linear-gradient(135deg, transparent 0 44%, rgba(255, 255, 255, 0.38) 48%, transparent 52% 100%),
    repeating-linear-gradient(
      90deg,
      transparent 0 8px,
      color-mix(in srgb, var(--aool-accent-1, #8C5FF5) 28%, transparent) 8px 10px,
      transparent 10px 24px
    );
  filter: blur(1px);
  mix-blend-mode: screen;
}

.aool-reveal-ring {
  display: none !important;
  inset: 50% auto auto 50%;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--aool-accent-1, #8C5FF5) 68%, white 10%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
}

.aool-reveal-ring--1 {
  width: min(22vw, 22vh);
  height: min(22vw, 22vh);
}

.aool-reveal-ring--2 {
  width: min(34vw, 34vh);
  height: min(34vw, 34vh);
  border-color: color-mix(in srgb, var(--aool-accent-2, #FFB50D) 62%, white 12%);
}

.aool-transition {
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: opacity, transform;
}

.aool-transition-bar {
  left: -8%;
  right: -8%;
  height: 10%;
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--aool-accent-1, #8C5FF5) 78%, transparent) 24%,
    color-mix(in srgb, white 80%, transparent) 50%,
    color-mix(in srgb, var(--aool-accent-2, #FFB50D) 72%, transparent) 76%,
    transparent 100%
  );
  mix-blend-mode: screen;
  filter: blur(10px);
}

.aool-transition-bar--1 { top: 8%; }
.aool-transition-bar--2 { top: 30%; }
.aool-transition-bar--3 { top: 56%; }
.aool-transition-bar--4 { top: 78%; }

.aool-transition-arc {
  inset: 50% auto auto 50%;
  width: min(42vw, 42vh);
  height: 2px;
  opacity: 0;
  transform-origin: left center;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--aool-accent-2, #FFB50D) 86%, white 10%) 0%,
    color-mix(in srgb, var(--aool-accent-1, #8C5FF5) 88%, transparent) 72%,
    transparent 100%
  );
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--aool-accent-1, #8C5FF5) 64%, transparent));
}

.aool-transition-arc--1 { transform: translate(0, -50%) rotate(18deg) scaleX(0); }
.aool-transition-arc--2 { transform: translate(0, -50%) rotate(126deg) scaleX(0); }
.aool-transition-arc--3 { transform: translate(0, -50%) rotate(244deg) scaleX(0); }

.aool-transition-drip {
  bottom: -4%;
  width: 10%;
  border-radius: 999px 999px 28px 28px;
  opacity: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, white 58%, transparent) 0%,
    color-mix(in srgb, var(--aool-accent-1, #8C5FF5) 42%, transparent) 18%,
    color-mix(in srgb, var(--aool-accent-2, #FFB50D) 84%, transparent) 100%
  );
  filter: blur(10px);
}

.aool-transition-drip--1 { left: 18%; height: 30%; }
.aool-transition-drip--2 { left: 44%; height: 42%; }
.aool-transition-drip--3 { left: 70%; height: 36%; }

.aool-widget--reveal-liquid_glass .aool-object--overlay {
  clip-path: circle(0% at var(--aool-focus-x, 50%) var(--aool-focus-y, 50%));
}

.aool-widget--reveal-liquid_glass .aool-reveal-sheen,
.aool-widget--reveal-prism_iris .aool-reveal-sheen,
.aool-widget--reveal-prism_iris .aool-reveal-ring {
  opacity: calc(var(--aool-reveal-progress) * 0.95);
}

.aool-widget--reveal-blurry_focus .aool-reveal-sheen,
.aool-widget--reveal-blurry_focus .aool-reveal-ring {
  opacity: calc(var(--aool-reveal-progress) * 0.55);
}

.aool-widget--reveal-ink_aberration .aool-reveal-noise,
.aool-widget--reveal-chromatic_scan .aool-reveal-scan {
  opacity: calc(var(--aool-reveal-progress) * 0.95);
}

.aool-widget--transition-glitch .aool-transition-bar {
  opacity: calc(var(--aool-transition-progress) * 0.9);
}

.aool-widget--transition-electronic .aool-transition-arc {
  opacity: calc(var(--aool-transition-progress) * 1);
}

.aool-widget--transition-glass_dissolve .aool-transition-drip {
  opacity: calc(var(--aool-transition-progress) * 0.92);
}

@media (min-width: 2400px) {
  .aool-widget {
    --aool-object-width: var(--aool-object-width-widescreen, var(--aool-object-width-desktop, 42%));
    --aool-object-offset-y: var(--aool-object-offset-y-widescreen, var(--aool-object-offset-y-desktop, 0px));
    --aool-base-shift-x: var(--aool-base-shift-x-widescreen, var(--aool-base-shift-x-desktop, 0px));
    --aool-base-shift-y: var(--aool-base-shift-y-widescreen, var(--aool-base-shift-y-desktop, 0px));
    --aool-overlay-shift-x: var(--aool-overlay-shift-x-widescreen, var(--aool-overlay-shift-x-desktop, 0px));
    --aool-overlay-shift-y: var(--aool-overlay-shift-y-widescreen, var(--aool-overlay-shift-y-desktop, 0px));
    --aool-lottie-width: var(--aool-lottie-width-widescreen, var(--aool-lottie-width-desktop, var(--aool-object-width-desktop, 42%)));
    --aool-lottie-offset-y: var(--aool-lottie-offset-y-widescreen, var(--aool-lottie-offset-y-desktop, 0px));
    --aool-object-align: var(--aool-object-align-widescreen, var(--aool-object-align-desktop, center));
  }
}

@media (max-width: 1440px) {
  .aool-widget {
    --aool-object-width: var(--aool-object-width-laptop, var(--aool-object-width-desktop, 42%));
    --aool-object-offset-y: var(--aool-object-offset-y-laptop, var(--aool-object-offset-y-desktop, 0px));
    --aool-base-shift-x: var(--aool-base-shift-x-laptop, var(--aool-base-shift-x-desktop, 0px));
    --aool-base-shift-y: var(--aool-base-shift-y-laptop, var(--aool-base-shift-y-desktop, 0px));
    --aool-overlay-shift-x: var(--aool-overlay-shift-x-laptop, var(--aool-overlay-shift-x-desktop, 0px));
    --aool-overlay-shift-y: var(--aool-overlay-shift-y-laptop, var(--aool-overlay-shift-y-desktop, 0px));
    --aool-lottie-width: var(--aool-lottie-width-laptop, var(--aool-lottie-width-desktop, var(--aool-object-width-desktop, 42%)));
    --aool-lottie-offset-y: var(--aool-lottie-offset-y-laptop, var(--aool-lottie-offset-y-desktop, 0px));
    --aool-object-align: var(--aool-object-align-laptop, var(--aool-object-align-desktop, center));
  }
}

@media (max-width: 1280px) {
  .aool-widget {
    --aool-object-width: var(--aool-object-width-tablet-extra, var(--aool-object-width-laptop, var(--aool-object-width-desktop, 42%)));
    --aool-object-offset-y: var(--aool-object-offset-y-tablet-extra, var(--aool-object-offset-y-laptop, var(--aool-object-offset-y-desktop, 0px)));
    --aool-base-shift-x: var(--aool-base-shift-x-tablet-extra, var(--aool-base-shift-x-laptop, var(--aool-base-shift-x-desktop, 0px)));
    --aool-base-shift-y: var(--aool-base-shift-y-tablet-extra, var(--aool-base-shift-y-laptop, var(--aool-base-shift-y-desktop, 0px)));
    --aool-overlay-shift-x: var(--aool-overlay-shift-x-tablet-extra, var(--aool-overlay-shift-x-laptop, var(--aool-overlay-shift-x-desktop, 0px)));
    --aool-overlay-shift-y: var(--aool-overlay-shift-y-tablet-extra, var(--aool-overlay-shift-y-laptop, var(--aool-overlay-shift-y-desktop, 0px)));
    --aool-lottie-width: var(--aool-lottie-width-tablet-extra, var(--aool-lottie-width-laptop, var(--aool-lottie-width-desktop, var(--aool-object-width-desktop, 42%))));
    --aool-lottie-offset-y: var(--aool-lottie-offset-y-tablet-extra, var(--aool-lottie-offset-y-laptop, var(--aool-lottie-offset-y-desktop, 0px)));
    --aool-object-align: var(--aool-object-align-tablet-extra, var(--aool-object-align-laptop, var(--aool-object-align-desktop, center)));
  }
}

@media (max-width: 1024px) {
  .aool-widget {
    --aool-object-width: var(--aool-object-width-tablet, var(--aool-object-width-tablet-extra, var(--aool-object-width-laptop, var(--aool-object-width-desktop, 42%))));
    --aool-object-offset-y: var(--aool-object-offset-y-tablet, var(--aool-object-offset-y-tablet-extra, var(--aool-object-offset-y-laptop, var(--aool-object-offset-y-desktop, 0px))));
    --aool-base-shift-x: var(--aool-base-shift-x-tablet, var(--aool-base-shift-x-tablet-extra, var(--aool-base-shift-x-laptop, var(--aool-base-shift-x-desktop, 0px))));
    --aool-base-shift-y: var(--aool-base-shift-y-tablet, var(--aool-base-shift-y-tablet-extra, var(--aool-base-shift-y-laptop, var(--aool-base-shift-y-desktop, 0px))));
    --aool-overlay-shift-x: var(--aool-overlay-shift-x-tablet, var(--aool-overlay-shift-x-tablet-extra, var(--aool-overlay-shift-x-laptop, var(--aool-overlay-shift-x-desktop, 0px))));
    --aool-overlay-shift-y: var(--aool-overlay-shift-y-tablet, var(--aool-overlay-shift-y-tablet-extra, var(--aool-overlay-shift-y-laptop, var(--aool-overlay-shift-y-desktop, 0px))));
    --aool-lottie-width: var(--aool-lottie-width-tablet, var(--aool-lottie-width-tablet-extra, var(--aool-lottie-width-laptop, var(--aool-lottie-width-desktop, var(--aool-object-width-desktop, 42%)))));
    --aool-lottie-offset-y: var(--aool-lottie-offset-y-tablet, var(--aool-lottie-offset-y-tablet-extra, var(--aool-lottie-offset-y-laptop, var(--aool-lottie-offset-y-desktop, 0px))));
    --aool-object-align: var(--aool-object-align-tablet, var(--aool-object-align-tablet-extra, var(--aool-object-align-laptop, var(--aool-object-align-desktop, center))));
  }
}

@media (max-width: 768px) {
  .aool-widget {
    --aool-object-width: var(--aool-object-width-mobile-extra, var(--aool-object-width-tablet, var(--aool-object-width-tablet-extra, var(--aool-object-width-laptop, var(--aool-object-width-desktop, 42%)))));
    --aool-object-offset-y: var(--aool-object-offset-y-mobile-extra, var(--aool-object-offset-y-tablet, var(--aool-object-offset-y-tablet-extra, var(--aool-object-offset-y-laptop, var(--aool-object-offset-y-desktop, 0px)))));
    --aool-base-shift-x: var(--aool-base-shift-x-mobile-extra, var(--aool-base-shift-x-tablet, var(--aool-base-shift-x-tablet-extra, var(--aool-base-shift-x-laptop, var(--aool-base-shift-x-desktop, 0px)))));
    --aool-base-shift-y: var(--aool-base-shift-y-mobile-extra, var(--aool-base-shift-y-tablet, var(--aool-base-shift-y-tablet-extra, var(--aool-base-shift-y-laptop, var(--aool-base-shift-y-desktop, 0px)))));
    --aool-overlay-shift-x: var(--aool-overlay-shift-x-mobile-extra, var(--aool-overlay-shift-x-tablet, var(--aool-overlay-shift-x-tablet-extra, var(--aool-overlay-shift-x-laptop, var(--aool-overlay-shift-x-desktop, 0px)))));
    --aool-overlay-shift-y: var(--aool-overlay-shift-y-mobile-extra, var(--aool-overlay-shift-y-tablet, var(--aool-overlay-shift-y-tablet-extra, var(--aool-overlay-shift-y-laptop, var(--aool-overlay-shift-y-desktop, 0px)))));
    --aool-lottie-width: var(--aool-lottie-width-mobile-extra, var(--aool-lottie-width-tablet, var(--aool-lottie-width-tablet-extra, var(--aool-lottie-width-laptop, var(--aool-lottie-width-desktop, var(--aool-object-width-desktop, 42%))))));
    --aool-lottie-offset-y: var(--aool-lottie-offset-y-mobile-extra, var(--aool-lottie-offset-y-tablet, var(--aool-lottie-offset-y-tablet-extra, var(--aool-lottie-offset-y-laptop, var(--aool-lottie-offset-y-desktop, 0px)))));
    --aool-object-align: var(--aool-object-align-mobile-extra, var(--aool-object-align-tablet, var(--aool-object-align-tablet-extra, var(--aool-object-align-laptop, var(--aool-object-align-desktop, center)))));
  }
}

@media (max-width: 736px) {
  .aool-widget {
    --aool-object-width: var(--aool-object-width-mobile, var(--aool-object-width-mobile-extra, var(--aool-object-width-tablet, var(--aool-object-width-tablet-extra, var(--aool-object-width-laptop, var(--aool-object-width-desktop, 42%))))));
    --aool-object-offset-y: var(--aool-object-offset-y-mobile, var(--aool-object-offset-y-mobile-extra, var(--aool-object-offset-y-tablet, var(--aool-object-offset-y-tablet-extra, var(--aool-object-offset-y-laptop, var(--aool-object-offset-y-desktop, 0px))))));
    --aool-base-shift-x: var(--aool-base-shift-x-mobile, var(--aool-base-shift-x-mobile-extra, var(--aool-base-shift-x-tablet, var(--aool-base-shift-x-tablet-extra, var(--aool-base-shift-x-laptop, var(--aool-base-shift-x-desktop, 0px))))));
    --aool-base-shift-y: var(--aool-base-shift-y-mobile, var(--aool-base-shift-y-mobile-extra, var(--aool-base-shift-y-tablet, var(--aool-base-shift-y-tablet-extra, var(--aool-base-shift-y-laptop, var(--aool-base-shift-y-desktop, 0px))))));
    --aool-overlay-shift-x: var(--aool-overlay-shift-x-mobile, var(--aool-overlay-shift-x-mobile-extra, var(--aool-overlay-shift-x-tablet, var(--aool-overlay-shift-x-tablet-extra, var(--aool-overlay-shift-x-laptop, var(--aool-overlay-shift-x-desktop, 0px))))));
    --aool-overlay-shift-y: var(--aool-overlay-shift-y-mobile, var(--aool-overlay-shift-y-mobile-extra, var(--aool-overlay-shift-y-tablet, var(--aool-overlay-shift-y-tablet-extra, var(--aool-overlay-shift-y-laptop, var(--aool-overlay-shift-y-desktop, 0px))))));
    --aool-lottie-width: var(--aool-lottie-width-mobile, var(--aool-lottie-width-mobile-extra, var(--aool-lottie-width-tablet, var(--aool-lottie-width-tablet-extra, var(--aool-lottie-width-laptop, var(--aool-lottie-width-desktop, var(--aool-object-width-desktop, 42%)))))));
    --aool-lottie-offset-y: var(--aool-lottie-offset-y-mobile, var(--aool-lottie-offset-y-mobile-extra, var(--aool-lottie-offset-y-tablet, var(--aool-lottie-offset-y-tablet-extra, var(--aool-lottie-offset-y-laptop, var(--aool-lottie-offset-y-desktop, 0px))))));
    --aool-object-align: var(--aool-object-align-mobile, var(--aool-object-align-mobile-extra, var(--aool-object-align-tablet, var(--aool-object-align-tablet-extra, var(--aool-object-align-laptop, var(--aool-object-align-desktop, center))))));
  }
}

body.elementor-device-widescreen .aool-widget {
  --aool-object-width: var(--aool-object-width-widescreen, var(--aool-object-width-desktop, 42%)) !important;
  --aool-object-offset-y: var(--aool-object-offset-y-widescreen, var(--aool-object-offset-y-desktop, 0px)) !important;
  --aool-base-shift-x: var(--aool-base-shift-x-widescreen, var(--aool-base-shift-x-desktop, 0px)) !important;
  --aool-base-shift-y: var(--aool-base-shift-y-widescreen, var(--aool-base-shift-y-desktop, 0px)) !important;
  --aool-overlay-shift-x: var(--aool-overlay-shift-x-widescreen, var(--aool-overlay-shift-x-desktop, 0px)) !important;
  --aool-overlay-shift-y: var(--aool-overlay-shift-y-widescreen, var(--aool-overlay-shift-y-desktop, 0px)) !important;
  --aool-lottie-width: var(--aool-lottie-width-widescreen, var(--aool-lottie-width-desktop, var(--aool-object-width-desktop, 42%))) !important;
  --aool-lottie-offset-y: var(--aool-lottie-offset-y-widescreen, var(--aool-lottie-offset-y-desktop, 0px)) !important;
  --aool-object-align: var(--aool-object-align-widescreen, var(--aool-object-align-desktop, center)) !important;
}

body.elementor-device-laptop .aool-widget {
  --aool-object-width: var(--aool-object-width-laptop, var(--aool-object-width-desktop, 42%)) !important;
  --aool-object-offset-y: var(--aool-object-offset-y-laptop, var(--aool-object-offset-y-desktop, 0px)) !important;
  --aool-base-shift-x: var(--aool-base-shift-x-laptop, var(--aool-base-shift-x-desktop, 0px)) !important;
  --aool-base-shift-y: var(--aool-base-shift-y-laptop, var(--aool-base-shift-y-desktop, 0px)) !important;
  --aool-overlay-shift-x: var(--aool-overlay-shift-x-laptop, var(--aool-overlay-shift-x-desktop, 0px)) !important;
  --aool-overlay-shift-y: var(--aool-overlay-shift-y-laptop, var(--aool-overlay-shift-y-desktop, 0px)) !important;
  --aool-lottie-width: var(--aool-lottie-width-laptop, var(--aool-lottie-width-desktop, var(--aool-object-width-desktop, 42%))) !important;
  --aool-lottie-offset-y: var(--aool-lottie-offset-y-laptop, var(--aool-lottie-offset-y-desktop, 0px)) !important;
  --aool-object-align: var(--aool-object-align-laptop, var(--aool-object-align-desktop, center)) !important;
}

body.elementor-device-tablet_extra .aool-widget {
  --aool-object-width: var(--aool-object-width-tablet-extra, var(--aool-object-width-laptop, var(--aool-object-width-desktop, 42%))) !important;
  --aool-object-offset-y: var(--aool-object-offset-y-tablet-extra, var(--aool-object-offset-y-laptop, var(--aool-object-offset-y-desktop, 0px))) !important;
  --aool-base-shift-x: var(--aool-base-shift-x-tablet-extra, var(--aool-base-shift-x-laptop, var(--aool-base-shift-x-desktop, 0px))) !important;
  --aool-base-shift-y: var(--aool-base-shift-y-tablet-extra, var(--aool-base-shift-y-laptop, var(--aool-base-shift-y-desktop, 0px))) !important;
  --aool-overlay-shift-x: var(--aool-overlay-shift-x-tablet-extra, var(--aool-overlay-shift-x-laptop, var(--aool-overlay-shift-x-desktop, 0px))) !important;
  --aool-overlay-shift-y: var(--aool-overlay-shift-y-tablet-extra, var(--aool-overlay-shift-y-laptop, var(--aool-overlay-shift-y-desktop, 0px))) !important;
  --aool-lottie-width: var(--aool-lottie-width-tablet-extra, var(--aool-lottie-width-laptop, var(--aool-lottie-width-desktop, var(--aool-object-width-desktop, 42%)))) !important;
  --aool-lottie-offset-y: var(--aool-lottie-offset-y-tablet-extra, var(--aool-lottie-offset-y-laptop, var(--aool-lottie-offset-y-desktop, 0px))) !important;
  --aool-object-align: var(--aool-object-align-tablet-extra, var(--aool-object-align-laptop, var(--aool-object-align-desktop, center))) !important;
}

body.elementor-device-tablet .aool-widget {
  --aool-object-width: var(--aool-object-width-tablet, var(--aool-object-width-tablet-extra, var(--aool-object-width-laptop, var(--aool-object-width-desktop, 42%)))) !important;
  --aool-object-offset-y: var(--aool-object-offset-y-tablet, var(--aool-object-offset-y-tablet-extra, var(--aool-object-offset-y-laptop, var(--aool-object-offset-y-desktop, 0px)))) !important;
  --aool-base-shift-x: var(--aool-base-shift-x-tablet, var(--aool-base-shift-x-tablet-extra, var(--aool-base-shift-x-laptop, var(--aool-base-shift-x-desktop, 0px)))) !important;
  --aool-base-shift-y: var(--aool-base-shift-y-tablet, var(--aool-base-shift-y-tablet-extra, var(--aool-base-shift-y-laptop, var(--aool-base-shift-y-desktop, 0px)))) !important;
  --aool-overlay-shift-x: var(--aool-overlay-shift-x-tablet, var(--aool-overlay-shift-x-tablet-extra, var(--aool-overlay-shift-x-laptop, var(--aool-overlay-shift-x-desktop, 0px)))) !important;
  --aool-overlay-shift-y: var(--aool-overlay-shift-y-tablet, var(--aool-overlay-shift-y-tablet-extra, var(--aool-overlay-shift-y-laptop, var(--aool-overlay-shift-y-desktop, 0px)))) !important;
  --aool-lottie-width: var(--aool-lottie-width-tablet, var(--aool-lottie-width-tablet-extra, var(--aool-lottie-width-laptop, var(--aool-lottie-width-desktop, var(--aool-object-width-desktop, 42%))))) !important;
  --aool-lottie-offset-y: var(--aool-lottie-offset-y-tablet, var(--aool-lottie-offset-y-tablet-extra, var(--aool-lottie-offset-y-laptop, var(--aool-lottie-offset-y-desktop, 0px)))) !important;
  --aool-object-align: var(--aool-object-align-tablet, var(--aool-object-align-tablet-extra, var(--aool-object-align-laptop, var(--aool-object-align-desktop, center)))) !important;
}

body.elementor-device-mobile_extra .aool-widget {
  --aool-object-width: var(--aool-object-width-mobile-extra, var(--aool-object-width-tablet, var(--aool-object-width-tablet-extra, var(--aool-object-width-laptop, var(--aool-object-width-desktop, 42%))))) !important;
  --aool-object-offset-y: var(--aool-object-offset-y-mobile-extra, var(--aool-object-offset-y-tablet, var(--aool-object-offset-y-tablet-extra, var(--aool-object-offset-y-laptop, var(--aool-object-offset-y-desktop, 0px))))) !important;
  --aool-base-shift-x: var(--aool-base-shift-x-mobile-extra, var(--aool-base-shift-x-tablet, var(--aool-base-shift-x-tablet-extra, var(--aool-base-shift-x-laptop, var(--aool-base-shift-x-desktop, 0px))))) !important;
  --aool-base-shift-y: var(--aool-base-shift-y-mobile-extra, var(--aool-base-shift-y-tablet, var(--aool-base-shift-y-tablet-extra, var(--aool-base-shift-y-laptop, var(--aool-base-shift-y-desktop, 0px))))) !important;
  --aool-overlay-shift-x: var(--aool-overlay-shift-x-mobile-extra, var(--aool-overlay-shift-x-tablet, var(--aool-overlay-shift-x-tablet-extra, var(--aool-overlay-shift-x-laptop, var(--aool-overlay-shift-x-desktop, 0px))))) !important;
  --aool-overlay-shift-y: var(--aool-overlay-shift-y-mobile-extra, var(--aool-overlay-shift-y-tablet, var(--aool-overlay-shift-y-tablet-extra, var(--aool-overlay-shift-y-laptop, var(--aool-overlay-shift-y-desktop, 0px))))) !important;
  --aool-lottie-width: var(--aool-lottie-width-mobile-extra, var(--aool-lottie-width-tablet, var(--aool-lottie-width-tablet-extra, var(--aool-lottie-width-laptop, var(--aool-lottie-width-desktop, var(--aool-object-width-desktop, 42%)))))) !important;
  --aool-lottie-offset-y: var(--aool-lottie-offset-y-mobile-extra, var(--aool-lottie-offset-y-tablet, var(--aool-lottie-offset-y-tablet-extra, var(--aool-lottie-offset-y-laptop, var(--aool-lottie-offset-y-desktop, 0px))))) !important;
  --aool-object-align: var(--aool-object-align-mobile-extra, var(--aool-object-align-tablet, var(--aool-object-align-tablet-extra, var(--aool-object-align-laptop, var(--aool-object-align-desktop, center))))) !important;
}

body.elementor-device-mobile .aool-widget {
  --aool-object-width: var(--aool-object-width-mobile, var(--aool-object-width-mobile-extra, var(--aool-object-width-tablet, var(--aool-object-width-tablet-extra, var(--aool-object-width-laptop, var(--aool-object-width-desktop, 42%)))))) !important;
  --aool-object-offset-y: var(--aool-object-offset-y-mobile, var(--aool-object-offset-y-mobile-extra, var(--aool-object-offset-y-tablet, var(--aool-object-offset-y-tablet-extra, var(--aool-object-offset-y-laptop, var(--aool-object-offset-y-desktop, 0px)))))) !important;
  --aool-base-shift-x: var(--aool-base-shift-x-mobile, var(--aool-base-shift-x-mobile-extra, var(--aool-base-shift-x-tablet, var(--aool-base-shift-x-tablet-extra, var(--aool-base-shift-x-laptop, var(--aool-base-shift-x-desktop, 0px)))))) !important;
  --aool-base-shift-y: var(--aool-base-shift-y-mobile, var(--aool-base-shift-y-mobile-extra, var(--aool-base-shift-y-tablet, var(--aool-base-shift-y-tablet-extra, var(--aool-base-shift-y-laptop, var(--aool-base-shift-y-desktop, 0px)))))) !important;
  --aool-overlay-shift-x: var(--aool-overlay-shift-x-mobile, var(--aool-overlay-shift-x-mobile-extra, var(--aool-overlay-shift-x-tablet, var(--aool-overlay-shift-x-tablet-extra, var(--aool-overlay-shift-x-laptop, var(--aool-overlay-shift-x-desktop, 0px)))))) !important;
  --aool-overlay-shift-y: var(--aool-overlay-shift-y-mobile, var(--aool-overlay-shift-y-mobile-extra, var(--aool-overlay-shift-y-tablet, var(--aool-overlay-shift-y-tablet-extra, var(--aool-overlay-shift-y-laptop, var(--aool-overlay-shift-y-desktop, 0px)))))) !important;
  --aool-lottie-width: var(--aool-lottie-width-mobile, var(--aool-lottie-width-mobile-extra, var(--aool-lottie-width-tablet, var(--aool-lottie-width-tablet-extra, var(--aool-lottie-width-laptop, var(--aool-lottie-width-desktop, var(--aool-object-width-desktop, 42%))))))) !important;
  --aool-lottie-offset-y: var(--aool-lottie-offset-y-mobile, var(--aool-lottie-offset-y-mobile-extra, var(--aool-lottie-offset-y-tablet, var(--aool-lottie-offset-y-tablet-extra, var(--aool-lottie-offset-y-laptop, var(--aool-lottie-offset-y-desktop, 0px)))))) !important;
  --aool-object-align: var(--aool-object-align-mobile, var(--aool-object-align-mobile-extra, var(--aool-object-align-tablet, var(--aool-object-align-tablet-extra, var(--aool-object-align-laptop, var(--aool-object-align-desktop, center)))))) !important;
}

@media (max-width: 768px) {
  .aool-object-slot {
    padding: 0 4vw;
  }
  .aool-transition-arc {
    width: min(54vw, 54vh);
  }
}

.aro-scene {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  perspective-origin: 50% 50%;
}

.aro-card-slot {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  justify-content: center;
  align-items: center;
}

/* Scroll animation target — wraps .aro-card so drag and scroll don't conflict */
.aro-card-outer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  max-width: 100%;
  transform-style: preserve-3d;
  will-change: transform;
  cursor: grab;
}
.aro-card-outer.aro-dragging {
  cursor: grabbing;
}

.aro-card {
  position: relative;
  width: 100%;
  max-width: 100%;
  transform-style: preserve-3d;
  will-change: transform;
  border-radius: 6px;
  background: transparent;
}

.aro-depth {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.aro-face {
  position: relative;
  z-index: 1;
  transform: translateZ(0);
}

.aro-face img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.aro-face--shadow img {
  filter: drop-shadow(-6px 6px 10px rgba(0, 0, 0, 0.55));
}

/* Scene cards — glassmorphic portrait cards, positioned absolute within aro-widget */
.aro-scene-card {
  position: absolute;
  left: var(--aro-left-desktop, 0%);
  top: var(--aro-top-desktop, 0%);
  display: var(--aro-display-desktop, block);
  pointer-events: none;
  will-change: transform;
  z-index: 5;
  transform-style: preserve-3d;
}

.aro-scene-card.aec-entry-metallic-dissolve,
.aro-scene-card.aec-entry-glass-melt {
  will-change: transform, opacity, filter, clip-path;
}

.aro-scene-card.aec-entry-metallic-dissolve::before,
.aro-scene-card.aec-entry-glass-melt::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: 12;
  pointer-events: none;
  opacity: 0.42;
  mix-blend-mode: screen;
  border-radius: inherit;
}

.aro-scene-card.aec-entry-metallic-dissolve::before {
  background:
    repeating-linear-gradient(
      104deg,
      rgba(255, 255, 255, 0) 0 7px,
      rgba(255, 255, 255, 0.5) 7px 9px,
      rgba(60, 66, 78, 0.18) 9px 15px
    );
  filter: contrast(1.45);
}

.aro-scene-card.aec-entry-glass-melt::before {
  background:
    radial-gradient(ellipse at 24% 34%, rgba(255, 255, 255, 0.42), transparent 34%),
    radial-gradient(ellipse at 72% 66%, rgba(146, 214, 255, 0.22), transparent 38%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 58%);
  filter: blur(4px) saturate(1.25);
}

.aec-widget {
  --aec-card-width: 180px;
  --aec-card-height: 270px;
  --aec-card-bg-rgb: 255, 255, 255;
  --aec-card-bg-opacity: 0.1;
  --aec-card-blur: 16px;
  --aec-card-border-opacity: 0.18;
  --aec-card-radius: 14px;
  --aec-card-title-size: 11px;
  --aec-card-title-spacing: 0.1em;
  --aec-card-detail-size: 9px;
}

.aro-gcard {
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--aec-card-width, 180px);
  height: var(--aec-card-height, 270px);
  overflow: hidden;
  background: rgba(var(--aec-card-bg-rgb, 255, 255, 255), var(--aec-card-bg-opacity, 0.1));
  backdrop-filter: blur(var(--aec-card-blur, 16px));
  -webkit-backdrop-filter: blur(var(--aec-card-blur, 16px));
  border: 1px solid rgba(var(--aec-card-bg-rgb, 255, 255, 255), var(--aec-card-border-opacity, 0.18));
  border-radius: var(--aec-card-radius, 14px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  will-change: transform;
}

/* Top gloss streak — the highlight that makes glass believable */
.aro-gcard__gloss {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.04) 60%,
    rgba(255, 255, 255, 0.00) 100%
  );
  pointer-events: none;
  z-index: 10;
}

.aro-gcard__img {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.aro-gcard__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* Engraved title — light top edge, dark bottom edge, low-opacity fill */
.aro-gcard__title {
  padding: 8px 10px 10px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  font-size: var(--aec-card-title-size, 11px);
  letter-spacing: var(--aec-card-title-spacing, 0.1em);
  color: rgba(255, 255, 255, 0.18);
  text-shadow:
    0  1px 1px rgba(255, 255, 255, 0.40),
    0 -1px 1px rgba(0, 0, 0, 0.70);
  line-height: 1.4;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.aro-gcard__detail {
  padding: 0 10px 10px;
  margin-top: -4px;
  text-align: center;
  font-weight: 500;
  font-size: var(--aec-card-detail-size, 9px);
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.34);
  text-shadow:
    0 1px 1px rgba(255, 255, 255, 0.22),
    0 -1px 1px rgba(0, 0, 0, 0.55);
  line-height: 1.35;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  overflow-wrap: anywhere;
}

.aro-scene-card .aro-gcard {
  transform: rotateY(var(--aro-card-tilt, 0deg));
}

@media (max-width: 1024px) {
  .aro-scene-card {
    left: var(--aro-left-tablet, var(--aro-left-desktop, 0%));
    top: var(--aro-top-tablet, var(--aro-top-desktop, 0%));
    display: var(--aro-display-tablet, var(--aro-display-desktop, block));
  }
}

@media (max-width: 767px) {
  .aro-scene-card {
    left: var(--aro-left-mobile, var(--aro-left-tablet, var(--aro-left-desktop, 0%)));
    top: var(--aro-top-mobile, var(--aro-top-tablet, var(--aro-top-desktop, 0%)));
    display: var(--aro-display-mobile, var(--aro-display-tablet, var(--aro-display-desktop, block)));
  }
}

body.elementor-device-tablet .aro-scene-card,
body.elementor-device-tablet_extra .aro-scene-card {
  left: var(--aro-left-tablet, var(--aro-left-desktop, 0%)) !important;
  top: var(--aro-top-tablet, var(--aro-top-desktop, 0%)) !important;
  display: var(--aro-display-tablet, var(--aro-display-desktop, block)) !important;
}

body.elementor-device-mobile .aro-scene-card,
body.elementor-device-mobile_extra .aro-scene-card {
  left: var(--aro-left-mobile, var(--aro-left-tablet, var(--aro-left-desktop, 0%))) !important;
  top: var(--aro-top-mobile, var(--aro-top-tablet, var(--aro-top-desktop, 0%))) !important;
  display: var(--aro-display-mobile, var(--aro-display-tablet, var(--aro-display-desktop, block))) !important;
}

/* Parallax object layout now comes from per-object custom properties. */
.apo-object {
  width: var(--apo-width-desktop, 220px);
  left: var(--apo-left-desktop, 50%);
  top: var(--apo-top-desktop, 50%);
  display: var(--apo-display-desktop, block);
  transform: rotate(var(--apo-rotation-desktop, 0deg));
}

@media (min-width: 2400px) {
  .apo-object {
    width: var(--apo-width-widescreen, var(--apo-width-desktop, 220px));
    left: var(--apo-left-widescreen, var(--apo-left-desktop, 50%));
    top: var(--apo-top-widescreen, var(--apo-top-desktop, 50%));
    display: var(--apo-display-widescreen, var(--apo-display-desktop, block));
    transform: rotate(var(--apo-rotation-widescreen, var(--apo-rotation-desktop, 0deg)));
  }
}

@media (max-width: 1440px) {
  .apo-object {
    width: var(--apo-width-laptop, var(--apo-width-desktop, 220px));
    left: var(--apo-left-laptop, var(--apo-left-desktop, 50%));
    top: var(--apo-top-laptop, var(--apo-top-desktop, 50%));
    display: var(--apo-display-laptop, var(--apo-display-desktop, block));
    transform: rotate(var(--apo-rotation-laptop, var(--apo-rotation-desktop, 0deg)));
  }
}

@media (max-width: 1280px) {
  .apo-object {
    width: var(--apo-width-tablet-extra, var(--apo-width-laptop, var(--apo-width-desktop, 220px)));
    left: var(--apo-left-tablet-extra, var(--apo-left-laptop, var(--apo-left-desktop, 50%)));
    top: var(--apo-top-tablet-extra, var(--apo-top-laptop, var(--apo-top-desktop, 50%)));
    display: var(--apo-display-tablet-extra, var(--apo-display-laptop, var(--apo-display-desktop, block)));
    transform: rotate(var(--apo-rotation-tablet-extra, var(--apo-rotation-laptop, var(--apo-rotation-desktop, 0deg))));
  }
}

@media (max-width: 1024px) {
  .apo-object {
    width: var(--apo-width-tablet, var(--apo-width-tablet-extra, var(--apo-width-laptop, var(--apo-width-desktop, 220px))));
    left: var(--apo-left-tablet, var(--apo-left-tablet-extra, var(--apo-left-laptop, var(--apo-left-desktop, 50%))));
    top: var(--apo-top-tablet, var(--apo-top-tablet-extra, var(--apo-top-laptop, var(--apo-top-desktop, 50%))));
    display: var(--apo-display-tablet, var(--apo-display-tablet-extra, var(--apo-display-laptop, var(--apo-display-desktop, block))));
    transform: rotate(var(--apo-rotation-tablet, var(--apo-rotation-tablet-extra, var(--apo-rotation-laptop, var(--apo-rotation-desktop, 0deg)))));
  }
}

@media (max-width: 768px) {
  .apo-object {
    width: var(--apo-width-mobile-extra, var(--apo-width-tablet, var(--apo-width-tablet-extra, var(--apo-width-laptop, var(--apo-width-desktop, 220px)))));
    left: var(--apo-left-mobile-extra, var(--apo-left-tablet, var(--apo-left-tablet-extra, var(--apo-left-laptop, var(--apo-left-desktop, 50%)))));
    top: var(--apo-top-mobile-extra, var(--apo-top-tablet, var(--apo-top-tablet-extra, var(--apo-top-laptop, var(--apo-top-desktop, 50%)))));
    display: var(--apo-display-mobile-extra, var(--apo-display-tablet, var(--apo-display-tablet-extra, var(--apo-display-laptop, var(--apo-display-desktop, block)))));
    transform: rotate(var(--apo-rotation-mobile-extra, var(--apo-rotation-tablet, var(--apo-rotation-tablet-extra, var(--apo-rotation-laptop, var(--apo-rotation-desktop, 0deg))))));
  }
}

@media (max-width: 736px) {
  .apo-object {
    width: var(--apo-width-mobile, var(--apo-width-mobile-extra, var(--apo-width-tablet, var(--apo-width-tablet-extra, var(--apo-width-laptop, var(--apo-width-desktop, 220px))))));
    left: var(--apo-left-mobile, var(--apo-left-mobile-extra, var(--apo-left-tablet, var(--apo-left-tablet-extra, var(--apo-left-laptop, var(--apo-left-desktop, 50%))))));
    top: var(--apo-top-mobile, var(--apo-top-mobile-extra, var(--apo-top-tablet, var(--apo-top-tablet-extra, var(--apo-top-laptop, var(--apo-top-desktop, 50%))))));
    display: var(--apo-display-mobile, var(--apo-display-mobile-extra, var(--apo-display-tablet, var(--apo-display-tablet-extra, var(--apo-display-laptop, var(--apo-display-desktop, block))))));
    transform: rotate(var(--apo-rotation-mobile, var(--apo-rotation-mobile-extra, var(--apo-rotation-tablet, var(--apo-rotation-tablet-extra, var(--apo-rotation-laptop, var(--apo-rotation-desktop, 0deg)))))));
  }
}

body.elementor-device-widescreen .apo-object {
  width: var(--apo-width-widescreen, var(--apo-width-desktop, 220px)) !important;
  left: var(--apo-left-widescreen, var(--apo-left-desktop, 50%)) !important;
  top: var(--apo-top-widescreen, var(--apo-top-desktop, 50%)) !important;
  display: var(--apo-display-widescreen, var(--apo-display-desktop, block)) !important;
  transform: rotate(var(--apo-rotation-widescreen, var(--apo-rotation-desktop, 0deg))) !important;
}

body.elementor-device-laptop .apo-object {
  width: var(--apo-width-laptop, var(--apo-width-desktop, 220px)) !important;
  left: var(--apo-left-laptop, var(--apo-left-desktop, 50%)) !important;
  top: var(--apo-top-laptop, var(--apo-top-desktop, 50%)) !important;
  display: var(--apo-display-laptop, var(--apo-display-desktop, block)) !important;
  transform: rotate(var(--apo-rotation-laptop, var(--apo-rotation-desktop, 0deg))) !important;
}

body.elementor-device-tablet_extra .apo-object {
  width: var(--apo-width-tablet-extra, var(--apo-width-laptop, var(--apo-width-desktop, 220px))) !important;
  left: var(--apo-left-tablet-extra, var(--apo-left-laptop, var(--apo-left-desktop, 50%))) !important;
  top: var(--apo-top-tablet-extra, var(--apo-top-laptop, var(--apo-top-desktop, 50%))) !important;
  display: var(--apo-display-tablet-extra, var(--apo-display-laptop, var(--apo-display-desktop, block))) !important;
  transform: rotate(var(--apo-rotation-tablet-extra, var(--apo-rotation-laptop, var(--apo-rotation-desktop, 0deg)))) !important;
}

body.elementor-device-tablet .apo-object {
  width: var(--apo-width-tablet, var(--apo-width-tablet-extra, var(--apo-width-laptop, var(--apo-width-desktop, 220px)))) !important;
  left: var(--apo-left-tablet, var(--apo-left-tablet-extra, var(--apo-left-laptop, var(--apo-left-desktop, 50%)))) !important;
  top: var(--apo-top-tablet, var(--apo-top-tablet-extra, var(--apo-top-laptop, var(--apo-top-desktop, 50%)))) !important;
  display: var(--apo-display-tablet, var(--apo-display-tablet-extra, var(--apo-display-laptop, var(--apo-display-desktop, block)))) !important;
  transform: rotate(var(--apo-rotation-tablet, var(--apo-rotation-tablet-extra, var(--apo-rotation-laptop, var(--apo-rotation-desktop, 0deg))))) !important;
}

body.elementor-device-mobile_extra .apo-object {
  width: var(--apo-width-mobile-extra, var(--apo-width-tablet, var(--apo-width-tablet-extra, var(--apo-width-laptop, var(--apo-width-desktop, 220px))))) !important;
  left: var(--apo-left-mobile-extra, var(--apo-left-tablet, var(--apo-left-tablet-extra, var(--apo-left-laptop, var(--apo-left-desktop, 50%))))) !important;
  top: var(--apo-top-mobile-extra, var(--apo-top-tablet, var(--apo-top-tablet-extra, var(--apo-top-laptop, var(--apo-top-desktop, 50%))))) !important;
  display: var(--apo-display-mobile-extra, var(--apo-display-tablet, var(--apo-display-tablet-extra, var(--apo-display-laptop, var(--apo-display-desktop, block))))) !important;
  transform: rotate(var(--apo-rotation-mobile-extra, var(--apo-rotation-tablet, var(--apo-rotation-tablet-extra, var(--apo-rotation-laptop, var(--apo-rotation-desktop, 0deg)))))) !important;
}

body.elementor-device-mobile .apo-object {
  width: var(--apo-width-mobile, var(--apo-width-mobile-extra, var(--apo-width-tablet, var(--apo-width-tablet-extra, var(--apo-width-laptop, var(--apo-width-desktop, 220px)))))) !important;
  left: var(--apo-left-mobile, var(--apo-left-mobile-extra, var(--apo-left-tablet, var(--apo-left-tablet-extra, var(--apo-left-laptop, var(--apo-left-desktop, 50%)))))) !important;
  top: var(--apo-top-mobile, var(--apo-top-mobile-extra, var(--apo-top-tablet, var(--apo-top-tablet-extra, var(--apo-top-laptop, var(--apo-top-desktop, 50%)))))) !important;
  display: var(--apo-display-mobile, var(--apo-display-mobile-extra, var(--apo-display-tablet, var(--apo-display-tablet-extra, var(--apo-display-laptop, var(--apo-display-desktop, block)))))) !important;
  transform: rotate(var(--apo-rotation-mobile, var(--apo-rotation-mobile-extra, var(--apo-rotation-tablet, var(--apo-rotation-tablet-extra, var(--apo-rotation-laptop, var(--apo-rotation-desktop, 0deg))))))) !important;
}