/* =============================================================
   Cadence SVP — Social Video Phone (realtors hero centerpiece)
   Self-contained. Loaded only on realtors.html.
   Phone mockup playing a real listing reel + gold engagement
   chips that pop and drift off the screen. CSS-only, no JS.
   ============================================================= */

/* --- split the page hero into copy | phone --- */
.phero--split .phero-inner{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
.phero-copy{min-width:0}

/* --- stage: gives the floating chips room to drift outside the phone --- */
.svp-stage{
  position:relative;
  justify-self:center;
  width:min(320px,82vw);
  aspect-ratio:1/1.5;
  display:grid;
  place-items:center;
}
/* warm light pool behind the device */
.svp-stage::before{
  content:"";
  position:absolute;
  inset:4% 2%;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(201,178,138,.20),transparent 72%);
  filter:blur(20px);
  z-index:0;
}

/* --- the device --- */
.svp-phone{
  position:relative;
  z-index:2;
  width:min(238px,64vw);
  aspect-ratio:9/19;
  border-radius:42px;
  padding:9px;
  background:linear-gradient(155deg,#28303a 0%,#161c22 44%,#0b0d0f 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(0,0,0,.5),
    0 32px 64px -24px rgba(0,0,0,.88),
    0 0 0 1px rgba(201,178,138,.20);
}
/* notch / island */
.svp-phone::before{
  content:"";
  position:absolute;
  top:17px; left:50%;
  transform:translateX(-50%);
  width:76px; height:18px;
  border-radius:999px;
  background:#06080a;
  box-shadow:0 0 0 1px rgba(255,255,255,.04);
  z-index:5;
}

.svp-screen{
  position:relative;
  width:100%; height:100%;
  border-radius:33px;
  overflow:hidden;
  background:#000;
}
.svp-screen video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
/* glass sheen + bottom scrim to seat the action rail */
.svp-screen::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(135deg,rgba(255,255,255,.14),transparent 30%),
    linear-gradient(0deg,rgba(0,0,0,.42),transparent 34%);
}

/* --- on-screen action rail (subtle, grounds the floating chips) --- */
.svp-rail{
  position:absolute;
  right:9px; bottom:16px;
  z-index:6;
  display:flex;
  flex-direction:column;
  gap:15px;
  align-items:center;
}
.svp-rail span{
  display:grid;
  place-items:center;
  color:var(--gold-300);
  opacity:.92;
  filter:drop-shadow(0 1px 5px rgba(0,0,0,.6));
}
.svp-rail svg{width:23px; height:23px}

/* --- floating engagement chips --- */
.svp-fx{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}
.svp-chip{
  position:absolute;
  width:44px; height:44px;
  border-radius:15px;
  display:grid; place-items:center;
  color:var(--gold-300);
  background:linear-gradient(160deg,rgba(36,42,50,.94),rgba(13,15,18,.94));
  border:1px solid rgba(201,178,138,.36);
  box-shadow:
    0 10px 24px -10px rgba(0,0,0,.72),
    0 0 20px -6px rgba(201,178,138,.55);
  opacity:0;
  animation:svp-float 5.6s ease-in-out infinite;
}
.svp-chip svg{width:20px; height:20px}

/* positions + staggered timing so only 2-3 are visible at once */
.svp-chip.c1{left:-7%;  top:62%; animation-delay:.2s}
.svp-chip.c2{right:-9%; top:50%; animation-delay:1.6s}
.svp-chip.c3{left:1%;   top:34%; animation-delay:2.9s}
.svp-chip.c4{right:-3%; top:22%; animation-delay:4.1s}
.svp-chip.c5{left:-10%; top:80%; animation-delay:.95s}

@keyframes svp-float{
  0%   {opacity:0;   transform:translateY(24px) scale(.55)}
  13%  {opacity:1;   transform:translateY(6px)  scale(1)}
  68%  {opacity:.9}
  100% {opacity:0;   transform:translateY(-62px) scale(.9)}
}

/* --- responsive --- */
@media (max-width:900px){
  .phero--split .phero-inner{grid-template-columns:1fr; gap:2.5rem}
  .svp-stage{order:2; width:min(300px,80vw)}
}

/* --- motion-safety: page is fully usable, phone is static --- */
@media (prefers-reduced-motion:reduce){
  .svp-chip{animation:none; opacity:1; transform:none}
}

/* =============================================================
   Vertical reel marquee — ported from cadence-home.css so the
   realtors "Recent work" section shows live listing reels instead
   of empty placeholder cards. (--c-black swapped for --ink-900,
   which exists in cadence-site.css.)
   ============================================================= */
.reel-marquee{position:relative;overflow:hidden;margin-inline:calc(var(--gutter) * -1)}
.reel-marquee::before,.reel-marquee::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:3;pointer-events:none}
.reel-marquee::before{left:0;background:linear-gradient(90deg,var(--ink-900),transparent)}
.reel-marquee::after{right:0;background:linear-gradient(270deg,var(--ink-900),transparent)}
.reel-track{display:flex;width:max-content;align-items:stretch;padding-block:6px;
  animation:reelScroll 46s linear infinite;will-change:transform}
.reel-marquee:hover .reel-track{animation-play-state:paused}
.reel-card{flex:0 0 clamp(150px,15vw,196px);aspect-ratio:9/16;margin-inline:8px;
  position:relative;border-radius:var(--radius-lg);overflow:hidden;isolation:isolate;
  border:1px solid var(--border-default);background:linear-gradient(150deg,#222b33,#0e1216);
  box-shadow:var(--shadow-cinematic);
  transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.reel-card:hover{transform:translateY(-4px);border-color:var(--border-gold);box-shadow:0 22px 48px -22px var(--glow-amb)}
.reel-card video,.reel-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel-card--ig{display:block;text-decoration:none;cursor:pointer}
.reel-card--ig::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(8,10,12,.5),transparent 55%);opacity:.55;transition:opacity var(--dur-base) var(--ease-out)}
.reel-card--ig:hover::after{opacity:0}
.reel-card .ig-badge{position:absolute;top:9px;right:9px;z-index:2;width:27px;height:27px;border-radius:8px;
  display:grid;place-items:center;color:#fff;background:rgba(11,13,15,.55);border:1px solid var(--border-gold);
  box-shadow:0 2px 10px -2px rgba(0,0,0,.5)}
.reel-card .ig-badge svg{width:15px;height:15px}
/* highlighted "drone" reel — gold frame + badge, a touch wider so it leads the row */
.reel-card--drone{flex-basis:clamp(186px,18.5vw,244px);border-color:var(--border-gold);
  box-shadow:0 0 0 1px var(--border-gold),0 24px 52px -20px var(--glow-amb)}
.reel-card--drone::after{opacity:.35}
.reel-card .drone-badge{position:absolute;top:9px;left:9px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  font:var(--type-caption);font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;
  padding:4px 10px 4px 8px;border-radius:var(--radius-pill);color:var(--ink-900);background:var(--accent);box-shadow:var(--glow-gold)}
.reel-card .drone-badge svg{width:13px;height:13px}
@keyframes reelScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.reel-track{animation:none}}