/* ============================================================================
   Aedan Rose — shared device-frame + scroll-effect design system
   Included by the marketing pages (features, compare, venue pages, etc.).
   The /assets/device-frames/{ipad,iphone}/*.webp images ALREADY have the device
   bezel baked in, so these classes add presentation (float, glow, tilt, parallax)
   and responsive scaling — NOT a fake bezel. Mobile-first + WCAG-AA friendly.
   ============================================================================ */

:root {
  --ar-purple: #8b5cf6;
  --ar-purple-2: #a78bfa;
  --ar-cyan: #00d4ff;
  --ar-ink: #0a0a0f;
}

/* ---- Device showcase: a framed screenshot presented like a top-SaaS hero ---- */
.ar-device {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  will-change: transform;
  transform: perspective(1400px) rotateX(4deg) rotateY(-6deg);
  transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s ease;
  filter: drop-shadow(0 40px 80px rgba(139, 92, 246, 0.28))
          drop-shadow(0 10px 24px rgba(0, 0, 0, 0.5));
}
.ar-device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
/* Straighten + lift on hover for interactivity (desktop). */
@media (hover: hover) and (min-width: 900px) {
  .ar-device:hover { transform: perspective(1400px) rotateX(0deg) rotateY(0deg) translateY(-6px); }
}
/* Center / straight variant (no tilt). */
.ar-device.ar-device--flat { transform: none; }
/* Right/left lean variants for alternating feature rows. */
.ar-device.ar-device--lean-left  { transform: perspective(1400px) rotateX(4deg) rotateY(6deg); }
.ar-device.ar-device--lean-right { transform: perspective(1400px) rotateX(4deg) rotateY(-6deg); }

/* Soft aura behind a device for depth. */
.ar-device::after {
  content: "";
  position: absolute; inset: -8% -6% -12% -6%;
  z-index: -1; border-radius: 40px;
  background: radial-gradient(60% 60% at 50% 40%, rgba(139,92,246,.30), rgba(0,212,255,.10) 55%, transparent 75%);
  filter: blur(28px);
  opacity: .9;
}

/* iPhone frames are tall/narrow — cap their height so they don't dominate. */
.ar-device.ar-device--phone { max-width: 300px; }
.ar-device.ar-device--phone img { max-height: 620px; width: auto; }

/* A row that pairs an iPad + an iPhone (like App Store hero clusters). */
.ar-device-cluster {
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(12px, 3vw, 40px); flex-wrap: wrap;
}
.ar-device-cluster .ar-device--phone { margin-bottom: 4%; }

/* ---- Scroll-reveal: elements fade/slide in as they enter the viewport ---- */
.ar-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.ar-reveal.ar-in { opacity: 1; transform: none; }
.ar-reveal.ar-reveal--left  { transform: translateX(-32px); }
.ar-reveal.ar-reveal--right { transform: translateX(32px); }
.ar-reveal.ar-reveal--zoom  { transform: scale(.94); }
.ar-reveal.ar-in.ar-reveal--left,
.ar-reveal.ar-in.ar-reveal--right,
.ar-reveal.ar-in.ar-reveal--zoom { transform: none; }
/* Stagger children of a container marked .ar-reveal-group. */
.ar-reveal-group > .ar-reveal { transition-delay: calc(var(--ar-i, 0) * 90ms); }

/* Parallax layers driven by marketing-fx.js (data-ar-parallax). */
[data-ar-parallax] { will-change: transform; }

/* ---- Accessibility: honor reduced-motion (no tilt, no parallax, instant reveal) ---- */
@media (prefers-reduced-motion: reduce) {
  .ar-device, .ar-device:hover,
  .ar-device.ar-device--lean-left, .ar-device.ar-device--lean-right { transform: none !important; }
  .ar-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-ar-parallax] { transform: none !important; }
}

/* ---- Mobile: flatten tilt, stack clusters, scale down ---- */
@media (max-width: 640px) {
  .ar-device,
  .ar-device.ar-device--lean-left,
  .ar-device.ar-device--lean-right { transform: none; }
  .ar-device::after { inset: -4%; filter: blur(18px); }
  .ar-device.ar-device--phone { max-width: 220px; }
  .ar-device.ar-device--phone img { max-height: 460px; }
  .ar-device-cluster { gap: 14px; }
}