/* ============================================================
   Kitsune AI — Shared hero device UI (themeable)
   Two-column phero + floating product device + glass photo.
   Theme via .pvph--indigo / .pvph--electric (defaults = fox/indigo).
   ============================================================ */

/* ---- Hero: two-column with right-side device ---- */
.phero__inner.phero__inner--split { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: clamp(36px,4.5vw,72px); align-items: center; }
.phero-viz { position: relative; }

/* ---- Device shell ---- */
.pvph {
  position: relative; width: clamp(258px,28vw,310px); margin: 0 auto;
  animation: pvphfloat 7s ease-in-out infinite;
  /* theme tokens (default fox/indigo) */
  --dev-brand: var(--kit-fox-400);
  --dev-live: var(--kit-fox-300);
  --dev-dot: var(--kit-fox-500); --dev-dot-rgb: 238,77,31;
  --dev-run: #5b7bff; --dev-run-rgb: 91,123,255;
  --dev-glow: radial-gradient(44% 40% at 64% 32%, rgba(238,77,31,.55), transparent 70%), radial-gradient(48% 46% at 28% 72%, rgba(35,55,241,.6), transparent 72%), radial-gradient(40% 40% at 80% 80%, rgba(123,80,255,.4), transparent 72%);
  --dev-feat: linear-gradient(135deg, rgba(238,77,31,.13), rgba(35,55,241,.13));
  --dev-tile-a: linear-gradient(150deg, rgba(238,77,31,.22), rgba(238,77,31,.04));
  --dev-tile-b: linear-gradient(150deg, rgba(35,55,241,.24), rgba(35,55,241,.04));
}
@keyframes pvphfloat { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-14px); } }
.pvph__glow { position:absolute; inset:-26% -34%; z-index:0; background: var(--dev-glow); filter: blur(38px); pointer-events:none; }
.pvph__device { position: relative; z-index:1; border-radius: 44px; padding: 9px; background: linear-gradient(155deg,#242838,#0a0c11); box-shadow: 0 50px 100px -34px rgba(12,14,40,.66), 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.07); transform-style: preserve-3d; animation: pvphsway 9s ease-in-out infinite; }
@keyframes pvphsway { 0%,100%{ transform: perspective(1300px) rotateY(-15deg) rotateX(6deg) rotateZ(1deg); } 50%{ transform: perspective(1300px) rotateY(-9deg) rotateX(3deg) rotateZ(0deg); } }
.pvph__screen { position:relative; z-index:1; border-radius: 35px; overflow: hidden; background: radial-gradient(120% 70% at 50% 0%, #18203a, #0a0d16 62%); aspect-ratio: 280/600; color:#fff; padding: 20px 15px 16px; display:flex; flex-direction:column; gap:11px; }
.pvph__top { display:flex; align-items:center; }
.pvph__brand { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:600; font-size:14.5px; }
.pvph__brand svg { width:14px; height:14px; color:var(--dev-brand); }
.pvph__live { margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--dev-live); }
.pvph__live i { width:6px; height:6px; border-radius:50%; background:var(--dev-dot); animation:pvpulse 1.6s infinite; }
@keyframes pvpulse { 0%{ box-shadow:0 0 0 0 rgba(var(--dev-dot-rgb),.5);} 70%,100%{ box-shadow:0 0 0 6px rgba(var(--dev-dot-rgb),0);} }
.pvph__feat { display:flex; align-items:center; gap:14px; background:var(--dev-feat); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:14px; }
.pvph__ring { position:relative; width:74px; height:74px; flex:none; }
.pvph__ring svg { width:100%; height:100%; }
.pvph__ringp { animation: pvphring 3.4s ease-out forwards; }
@keyframes pvphring { from{ stroke-dashoffset:214; } to{ stroke-dashoffset:13; } }
.pvph__ringc { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.pvph__ringc b { font-family:var(--font-display); font-weight:600; font-size:19px; line-height:1; }
.pvph__ringc span { font-family:var(--font-mono); font-size:7px; letter-spacing:.05em; text-transform:uppercase; color:var(--kit-slate-400); margin-top:2px; }
.pvph__featx { display:flex; flex-direction:column; }
.pvph__fl { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--kit-slate-500); }
.pvph__fv { font-family:var(--font-display); font-weight:600; font-size:28px; line-height:1.05; }
.pvph__fm { font-size:11px; color:var(--kit-slate-400); }
.pvph__tiles { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.pvph__tile { border-radius:14px; padding:12px 13px; border:1px solid rgba(255,255,255,.08); }
.pvph__tile span { display:block; font-family:var(--font-mono); font-size:9px; letter-spacing:.05em; text-transform:uppercase; color:var(--kit-slate-400); margin-bottom:3px; }
.pvph__tile b { font-family:var(--font-display); font-weight:600; font-size:21px; }
.pvph__tile--a { background:var(--dev-tile-a); }
.pvph__tile--b { background:var(--dev-tile-b); }
.pvph__team { position:relative; flex:1; min-height:78px; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.08); }
.pvph__team img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 32%; }
.pvph__team::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,13,22,.08) 0%, rgba(10,13,22,.46) 58%, rgba(10,13,22,.84) 100%); }
.pvph__team-glass { position:absolute; left:9px; right:9px; bottom:9px; z-index:1; display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:13px; background:rgba(18,22,34,.4); -webkit-backdrop-filter:blur(14px) saturate(1.35); backdrop-filter:blur(14px) saturate(1.35); border:1px solid rgba(255,255,255,.15); box-shadow:0 10px 26px -12px rgba(0,0,0,.55); }
.pvph__team-glass b { display:block; font-size:12px; font-weight:600; line-height:1.2; }
.pvph__team-glass span { font-family:var(--font-mono); font-size:8.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--kit-slate-300); }
.pvph__team-dot { width:8px; height:8px; border-radius:50%; flex:none; background:#5fc48b; animation:pvpulsg 2s infinite; }
@keyframes pvpulsg { 0%{box-shadow:0 0 0 0 rgba(95,196,139,.5);} 70%,100%{box-shadow:0 0 0 6px rgba(95,196,139,0);} }
.pvph__feed { display:flex; flex-direction:column; gap:1px; }
.pvph__fi { display:flex; align-items:center; gap:9px; padding:8px 3px; border-top:1px solid rgba(255,255,255,.05); font-size:12.5px; font-weight:500; }
.pvph__fi:first-child { border-top:0; }
.pvph__fdot { width:7px; height:7px; border-radius:50%; flex:none; }
.pvph__fdot--ok{ background:#5fc48b; } .pvph__fdot--run{ background:var(--dev-run); animation:pvpulseb 1.6s infinite; } .pvph__fdot--fox{ background:var(--dev-dot); }
@keyframes pvpulseb { 0%{box-shadow:0 0 0 0 rgba(var(--dev-run-rgb),.5);}70%,100%{box-shadow:0 0 0 5px rgba(var(--dev-run-rgb),0);} }
.pvph__ft { margin-left:auto; font-family:var(--font-mono); font-size:10px; color:var(--kit-slate-500); }

/* ---- Floating integration chips ---- */
.pvchip { position:absolute; z-index:2; display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:12px; background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(20,20,40,.06); box-shadow:0 16px 34px -12px rgba(20,20,50,.32); font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.03em; color:var(--fg-1); }
.pvchip__d { width:8px; height:8px; border-radius:50%; flex:none; }
.pvchip svg { width:12px; height:12px; }
.pvchip--accent { color:#fff; background:var(--dev-dot); box-shadow:0 16px 36px -10px rgba(var(--dev-dot-rgb),.55); }
.pvchip--1 { top:5%; left:-4%; animation:pvchipf 6s ease-in-out infinite; }
.pvchip--2 { top:33%; left:-11%; animation:pvchipf 7.4s ease-in-out infinite .6s; }
.pvchip--3 { bottom:15%; left:-5%; animation:pvchipf 6.8s ease-in-out infinite 1.2s; }
.pvchip--4 { top:10%; right:-7%; animation:pvchipf 7s ease-in-out infinite .3s; }
.pvchip--5 { top:45%; right:-11%; animation:pvchipf 6.4s ease-in-out infinite .9s; }
@keyframes pvchipf { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-11px); } }

/* ---- Themes ---- */
.pvph--indigo {
  --dev-brand:#9db0ff; --dev-live:#b3c0ff;
  --dev-dot:#5b7bff; --dev-dot-rgb:91,123,255;
  --dev-run:#9db0ff; --dev-run-rgb:91,123,255;
  --dev-glow: radial-gradient(44% 40% at 64% 32%, rgba(91,123,255,.55), transparent 70%), radial-gradient(48% 46% at 28% 72%, rgba(123,80,255,.6), transparent 72%), radial-gradient(40% 40% at 80% 80%, rgba(53,160,255,.42), transparent 72%);
  --dev-feat: linear-gradient(135deg, rgba(91,123,255,.16), rgba(123,80,255,.16));
  --dev-tile-a: linear-gradient(150deg, rgba(91,123,255,.24), rgba(91,123,255,.04));
  --dev-tile-b: linear-gradient(150deg, rgba(123,80,255,.24), rgba(123,80,255,.04));
}
.pvph--electric {
  --dev-brand:#6ea8ff; --dev-live:#8fc0ff;
  --dev-dot:#2e6bf5; --dev-dot-rgb:46,107,245;
  --dev-run:#4d9bff; --dev-run-rgb:53,140,255;
  --dev-glow: radial-gradient(44% 40% at 64% 32%, rgba(35,55,241,.55), transparent 70%), radial-gradient(48% 46% at 28% 72%, rgba(53,160,255,.55), transparent 72%), radial-gradient(40% 40% at 80% 80%, rgba(99,160,255,.4), transparent 72%);
  --dev-feat: linear-gradient(135deg, rgba(35,55,241,.18), rgba(53,160,255,.16));
  --dev-tile-a: linear-gradient(150deg, rgba(35,55,241,.26), rgba(35,55,241,.04));
  --dev-tile-b: linear-gradient(150deg, rgba(53,160,255,.24), rgba(53,160,255,.04));
}

/* ---- Responsive / reduced-motion ---- */
@media (max-width: 900px){ .phero__inner.phero__inner--split { grid-template-columns: 1fr; } .pvph { margin: 30px auto 0; } .pvchip--2,.pvchip--5 { display:none; } }
@media (prefers-reduced-motion: reduce){ .pvph, .pvph__device, .pvchip, .pvph__live i, .pvph__ringp, .pvph__fdot--run, .pvph__team-dot { animation:none; } .pvph__ringp{ stroke-dashoffset:13; } }