/* ── Apple Devices Animation — themed to Qasonic ─────────────────────────── */
/* Color tokens used: --bg, --bg-elev, --bg-elev-2, --fg, --fg-dim, --fg-mute,
   --line, --line-strong, --accent, --brand, --brand-dark.
   Faulty states use a warm-rose oklch swatch to read against any theme. */

.ad-stage {
  position: relative;
  width: 100%;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ad-row {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 28px;
  perspective: 1000px;
  transform: scale(0.78);
  transform-origin: center bottom;
  padding-bottom: 24px;
}

/* ── Slot animations (entrance) ───────────────────────────────────────────── */
.ad-slot {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 700ms cubic-bezier(.2,.8,.2,1), transform 700ms cubic-bezier(.2,.8,.2,1);
}
.ad-slot.is-in { opacity: 1; transform: none; }
.ad-slot--iphone { z-index: 30; transform: translate(48px, 0); margin-right: 12px; }
.ad-slot--iphone.is-in { transform: translate(48px, 0); }
.ad-slot--mac    { z-index: 20; transition-delay: 100ms; margin: 0 12px; }
.ad-slot--ipad   { z-index: 10; transform: translate(-32px, 40px); transition-delay: 200ms; }
.ad-slot--ipad.is-in { transform: translate(-32px, 0); }

/* ── Scanner (checkmark) ─────────────────────────────────────────────────── */
/* Removed old scanner styles — now using SVG checkmark animation */

/* ── Screen content (shared across devices) ───────────────────────────────── */
.ad-screen-inner {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  padding: 7%;
  transition: background-color .5s;
}
.ad-screen-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
  opacity: .55;
}
.ad-bar { background: var(--fg-mute); border-radius: 999px; }
.ad-bar--w33 { height: 5px; width: 33%; }
.ad-bar--w12 { height: 5px; width: 12px; }
.ad-bar--dot { height: 5px; width: 5px; }

.ad-screen-hero {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
  background: var(--bg-elev-2);
  border: 2px solid transparent;
  transition: background-color .5s, border-color .5s, transform .5s;
}
.ad-screen-hero.is-faulty {
  background: oklch(0.92 0.06 25);
  border-color: oklch(0.78 0.12 25);
  transform: rotate(1deg) scale(1.04);
}
.ad-screen-hero.is-verified {
  background: oklch(0.95 0.07 160);
  border-color: oklch(0.82 0.14 160);
}
.ad-icon-faulty   { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: oklch(0.55 0.18 25); animation: ad-pulse 1.2s ease-in-out infinite; }
.ad-icon-verified { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: oklch(0.55 0.16 160); animation: ad-pop .35s cubic-bezier(.2,.8,.2,1) both; }

@keyframes ad-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(.92); } }
@keyframes ad-pop   { from { opacity: 0; transform: scale(.4) rotate(-90deg); } to { opacity: 1; transform: scale(1) rotate(0); } }

.ad-screen-lines { display: flex; flex-direction: column; gap: 5px; opacity: .65; }
.ad-line { height: 5px; background: var(--fg-mute); border-radius: 999px; transition: background .4s, width .5s; }
.ad-line--full { width: 100%; }
.ad-line--w83  { width: 83%; }
.ad-line--w66  { width: 66%; }
.ad-line.is-faulty       { background: oklch(0.7 0.14 25); width: 110%; }
.ad-line.is-faulty-short { background: oklch(0.7 0.14 25); width: 40%; }

.ad-screen-cta {
  margin-top: auto;
  height: 22px;
  width: 100%;
  border-radius: 6px;
  background: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  transition: background .5s, transform .5s, opacity .5s;
}
.ad-screen-cta.is-faulty   { background: oklch(0.65 0.16 25); transform: translateY(2px); opacity: .55; }
.ad-screen-cta.is-verified { background: oklch(0.6 0.14 160); }

/* ── iPhone ───────────────────────────────────────────────────────────────── */
.ad-iphone {
  position: relative;
  width: 110px;
  height: 224px;
  border-radius: 26px;
  background: #1c1c1e;
  box-shadow: 0 24px 50px -10px rgba(0,0,0,0.45), 0 6px 14px rgba(0,0,0,0.25);
}
.ad-iphone-frame {
  position: absolute; inset: 0;
  border-radius: 26px;
  border: 1px solid #3f3f3f;
  background: linear-gradient(135deg, #2a2a2a, #4a4a4a 50%, #2a2a2a);
  z-index: 0;
}
.ad-iphone-bezel { position: absolute; inset: 3px; background: #000; border-radius: 23px; z-index: 1; }
.ad-iphone-screen {
  position: absolute; inset: 6px;
  background: var(--bg-elev);
  border-radius: 21px;
  overflow: hidden;
  z-index: 2;
}
.ad-iphone-island {
  position: absolute; top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 32px; height: 10px;
  background: #000; border-radius: 999px;
  z-index: 3;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 4px;
}
.ad-iphone-island span { width: 4px; height: 4px; background: #1a1a1a; border-radius: 50%; opacity: .6; }
.ad-iphone-btn { position: absolute; background: #3a3a3a; }
.ad-iphone-btn--action { top: 46px;  left: -3px; width: 2px; height: 8px;  border-top-left-radius: 1px; border-bottom-left-radius: 1px; }
.ad-iphone-btn--volup  { top: 66px;  left: -3px; width: 2px; height: 16px; border-top-left-radius: 1px; border-bottom-left-radius: 1px; }
.ad-iphone-btn--voldn  { top: 90px;  left: -3px; width: 2px; height: 16px; border-top-left-radius: 1px; border-bottom-left-radius: 1px; }
.ad-iphone-btn--power  { top: 72px;  right: -3px; width: 2px; height: 24px; border-top-right-radius: 1px; border-bottom-right-radius: 1px; }

/* ── iPad ─────────────────────────────────────────────────────────────────── */
.ad-ipad {
  position: relative;
  width: 188px;
  height: 250px;
  border-radius: 20px;
  background: #1a1a1a;
  box-shadow: 0 24px 50px -10px rgba(0,0,0,0.45), 0 6px 14px rgba(0,0,0,0.25);
}
.ad-ipad-frame { position: absolute; inset: 0; border-radius: 20px; border: 1px solid #3f3f3f; background: linear-gradient(180deg, #3a3a3a, #1a1a1a); }
.ad-ipad-bezel { position: absolute; inset: 6px; background: #000; border-radius: 16px; }
.ad-ipad-screen {
  position: absolute; inset: 10px;
  background: var(--bg-elev);
  border-radius: 13px;
  overflow: hidden;
}
.ad-ipad-cam  { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; background: #1a1a1a; border-radius: 50%; z-index: 3; }
.ad-ipad-conn { position: absolute; left: -2px; top: 50%; transform: translateY(-50%); width: 2px; height: 26px; background: #3a3a3a; border-top-left-radius: 1px; border-bottom-left-radius: 1px; }

/* ── MacBook ──────────────────────────────────────────────────────────────── */
.ad-mac { position: relative; display: flex; flex-direction: column; align-items: center; }
.ad-mac-lid {
  position: relative;
  width: 330px;
  height: 218px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  background: #0f0f0f;
  box-shadow: 0 24px 50px -10px rgba(0,0,0,0.45);
  will-change: transform;
}
.ad-mac-lid.ad-glitch {
  animation: ad-glitch-kf .3s cubic-bezier(.25,.46,.45,.94) infinite;
}
.ad-mac-screen {
  position: absolute; top: 5px; left: 5px; right: 5px; bottom: 0;
  background: var(--bg-elev);
  border-top-left-radius: 11px;
  border-top-right-radius: 11px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  will-change: auto;
}
.ad-mac-menubar {
  height: 22px;
  background: var(--bg-elev-2);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px;
}
.ad-mac-menu { display: flex; gap: 8px; font-family: var(--font-mono); font-size: 7px; color: var(--fg-mute); letter-spacing: .04em; }
.ad-mac-menu-bold { font-weight: 700; color: var(--fg-dim); }
.ad-mac-notch {
  position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 9px; background: #000;
  border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;
  z-index: 5;
}
.ad-mac-base {
  width: 370px;
  height: 13px;
  background: linear-gradient(180deg, #2a2a2a, #111);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.3);
  position: relative;
  display: flex; justify-content: center;
  border-top: 1px solid #333;
}
.ad-mac-scoop { width: 54px; height: 4px; background: #1a1a1a; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; opacity: .55; }
.ad-mac-shadow { width: 330px; height: 7px; background: rgba(0,0,0,0.3); filter: blur(8px); margin-top: -2px; border-radius: 50%; }

/* ── Phase badge ──────────────────────────────────────────────────────────── */
.ad-badge-wrap {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 280px;
  z-index: 50;
}
.ad-badge {
  background: color-mix(in oklch, var(--bg) 75%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 12px 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  transition: background .3s;
}
.ad-badge-text { display: flex; flex-direction: column; gap: 3px; }
.ad-badge-step { font-size: 9px; color: var(--fg-mute); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.ad-badge-label { font-size: 14px; font-weight: 700; color: var(--fg); letter-spacing: .02em; }
.ad-badge-desc {
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: .04em;
  background: color-mix(in oklch, var(--bg) 60%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  transition: opacity .5s;
}
.ad-dot { width: 9px; height: 9px; border-radius: 50%; transition: background .3s, box-shadow .3s; }
.ad-dot--idle { background: var(--brand); }
.ad-dot--exec { background: oklch(0.62 0.2 25); box-shadow: 0 0 8px color-mix(in oklch, oklch(0.62 0.2 25) 60%, transparent); animation: ad-pulse 1.1s ease-in-out infinite; }
.ad-dot--ok   { background: oklch(0.6 0.14 160); box-shadow: 0 0 8px color-mix(in oklch, oklch(0.6 0.14 160) 60%, transparent); }

.hero__device-anim {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
}
[data-hero-variant="orbit"] .hero__device-anim,
[data-hero-variant="stacked"] .hero__device-anim {
  display: none;
}

@media (max-width: 1100px) {
  .ad-row { transform: scale(0.66); }
}
@media (max-width: 900px) {
  .hero__device-anim { display: none; }
}