:root{
  --dcy-svm-bg: #000;
  --dcy-svm-fg: #fff;
}

.dcy-svm{
  position: relative;
  background: var(--dcy-svm-bg);
  height: 260vh; /* durata scroll */
  overflow: hidden;
}

.dcy-svm-pin{
  position: relative;
  height: 100vh;
  width: 100%;
}

.dcy-svm-stage{
  position: absolute;
  inset: 0;
  background: #000;
  overflow: hidden;
}

/* Video box: parte 16:9 e poi si anima nello schermo */
.dcy-svm-videoBox{
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 0px;
  will-change: transform, width, height, border-radius;
  background: #000;
}

.dcy-svm-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dcy-svm-tapToPlay{
  position:absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.45);
  color: var(--dcy-svm-fg);
  opacity: 0;
  pointer-events:none;
}

/* CTA */
.dcy-svm-cta{
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  place-items: end center;
  padding: 24px 16px;
  z-index: 5;
}

.dcy-svm-ctaBox{
  pointer-events: auto;
  max-width: 560px;
  width: min(560px, calc(100vw - 32px));
  color: var(--dcy-svm-fg);
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  padding: 14px 14px 10px;
  backdrop-filter: blur(10px);
}

.dcy-svm-ctaTitle{ font-size: 18px; font-weight: 700; line-height: 1.2; }
.dcy-svm-ctaText{ margin-top: 6px; font-size: 14px; line-height: 1.35; opacity: .92; }

.dcy-svm-ctaBtns{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.dcy-svm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--dcy-svm-fg);
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
}

.dcy-svm-unmute{
  margin-top: 10px;
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: var(--dcy-svm-fg);
}

/* Phone mockup */
.dcy-svm-phone{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(.98);
  z-index: 2;
}

.dcy-svm-phoneImg{
  width: min(560px, 88vw);
  height: auto;
  display:block;
  filter: drop-shadow(0 14px 40px rgba(0,0,0,.55));
  pointer-events:none;
  user-select:none;
}

.dcy-svm-phoneFallback{
  width: min(560px, 88vw);
  aspect-ratio: 9 / 16;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
}

/* Rettangolo target dello schermo: serve solo per misurare */
.dcy-svm-phoneScreenTarget{
  position: absolute;
  inset: var(--dcy-screen-inset, 10% 14% 12% 14%);
  border-radius: 28px;
}

@media (prefers-reduced-motion: reduce){
  .dcy-svm{ height: 120vh; }
}


.dcy-svm-error{position:absolute;left:16px;right:16px;top:16px;z-index:5;background:rgba(0,0,0,.7);color:#fff;padding:10px 12px;border-radius:12px;font:14px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Arial;}