/* ===========================================================================
   triovision.css — the AR hero visual for Solution 05.
   The supplied AR photo is dark, so it lives inside a near-black rounded "stage"
   and its edges are FEATHERED (radial mask) into that stage — no hard rectangle
   on the white section. It reuses the site's 3D tilt (.tilt) + scroll parallax
   (data-parallax), and adds a soft teal scan-sweep to extend the AR feel.
   =========================================================================== */

.trio-ar {
  max-width: 1000px;
  margin: clamp(40px, 6vw, 72px) auto 0;
}

.trio-ar-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: clamp(20px, 2.4vw, 34px);
  overflow: hidden;
  background: #07070b;
  box-shadow:
    0 40px 90px -40px rgba(0, 0, 0, .6),
    0 0 0 1px rgba(69, 214, 180, .14),
    0 0 110px -26px rgba(69, 214, 180, .3);
}

/* Feather the photo's edges into the stage so nothing reads as a sharp rectangle.
   The image's own corners are dark, so the fade into #07070b is seamless. */
.trio-ar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-mask-image: radial-gradient(132% 132% at 50% 46%, #000 64%, rgba(0,0,0,.4) 85%, transparent 100%);
  mask-image: radial-gradient(132% 132% at 50% 46%, #000 64%, rgba(0,0,0,.4) 85%, transparent 100%);
}

/* Soft teal scan band sweeping vertically (screen-blended over the dark photo). */
.trio-ar-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 47%, rgba(69, 214, 180, .5) 50%, transparent 53%);
  background-size: 100% 220%;
  mix-blend-mode: screen;
  opacity: .55;
  animation: trioScan 5.5s linear infinite;
}
@keyframes trioScan { from { background-position: 0 -110%; } to { background-position: 0 110%; } }

/* A faint inner edge-darkening for extra softness at the very border. */
.trio-ar-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 60px 8px rgba(7, 7, 11, .7);
}

.trio-ar-cap {
  margin-top: 16px;
  text-align: center;
  font-size: 14px;
  color: var(--text-2);
}
.trio-ar-cap b { color: var(--text); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .trio-ar-scan { animation: none !important; }
}