/* LUFLY Central Vacuum teaser — animated architectural system card */
.cv-home-section {
  position: relative;
  padding: clamp(54px, 7vw, 96px) 0;
  overflow: clip;
  background:
    radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--lu-mint) 20%, transparent) 0, transparent 32%),
    linear-gradient(180deg, var(--ds-bg) 0%, color-mix(in srgb, var(--ds-surface) 68%, var(--ds-bg)) 100%);
}

.cv-home-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
  min-height: clamp(440px, 48vw, 600px);
  padding: clamp(26px, 4vw, 58px);
  overflow: hidden;
  color: var(--ds-band-text);
  background:
    radial-gradient(circle at 76% 22%, var(--ds-primary-glow), transparent 32%),
    linear-gradient(135deg, var(--ds-band-bg), var(--ds-band-surface) 52%, var(--lu-deep-teal));
  border: 1px solid color-mix(in srgb, var(--lu-mint) 22%, transparent);
  border-radius: 34px;
  box-shadow: 0 32px 90px color-mix(in srgb, var(--lu-ink-900) 32%, transparent);
  transform-style: preserve-3d;
}

.cv-home-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.72;
  background:
    radial-gradient(circle at 72% 28%, var(--ds-primary-glow), transparent 34%),
    radial-gradient(circle at 18% 82%, var(--ds-primary-soft), transparent 30%),
    conic-gradient(from 160deg at 68% 42%, transparent 0 24%, var(--ds-primary-tint) 30%, transparent 46% 100%);
}

.cv-home-card::after {
  content: "";
  position: absolute;
  inset: auto -12% -36% 42%;
  height: 52%;
  z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--lu-mint) 34%, transparent), transparent 66%);
  filter: blur(18px);
}

.cv-home-card:hover {
  color: var(--ds-band-text);
}

.cv-home-orbit {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--lu-mint) 20%, transparent);
  border-radius: 999px;
  pointer-events: none;
  transform: rotate(-18deg);
}

.cv-home-orbit--one {
  width: 460px;
  height: 460px;
  right: -100px;
  top: -130px;
}

.cv-home-orbit--two {
  width: 260px;
  height: 260px;
  left: -80px;
  bottom: -80px;
  border-color: color-mix(in srgb, var(--ds-band-accent) 26%, transparent);
}

.cv-home-copy {
  position: relative;
  z-index: 2;
  max-width: 610px;
}

.cv-home-tag {
  color: var(--lu-mint);
}

.cv-home-title {
  margin: 0 0 18px;
  color: var(--ds-band-text);
  font-size: clamp(34px, 4.5vw, 66px);
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.cv-home-desc {
  max-width: 56ch;
  color: color-mix(in srgb, var(--ds-band-text) 76%, transparent);
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  line-height: 1.75;
}

.cv-home-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 30px;
}

.cv-home-pills span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 13px;
  color: color-mix(in srgb, var(--ds-band-text) 82%, transparent);
  background: var(--ds-band-primary-soft);
  border: 1px solid var(--ds-band-border-soft);
  border-radius: 999px;
  font-size: 0.82rem;
  backdrop-filter: blur(10px);
}

.cv-home-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 18px 0 22px;
  color: var(--lu-ink-950);
  background: var(--lu-mint);
  border-radius: 999px;
  font-weight: 800;
  box-shadow: 0 16px 36px color-mix(in srgb, var(--lu-mint) 26%, transparent);
  transition: transform 260ms ease, box-shadow 260ms ease;
}

.cv-home-card:hover .cv-home-link {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px color-mix(in srgb, var(--lu-mint) 34%, transparent);
}

.cv-home-link .icon {
  width: 18px;
  height: 18px;
  transition: transform 260ms ease;
}

.cv-home-card:hover .cv-home-link .icon {
  transform: translateX(4px);
}

.cv-home-visual {
  position: relative;
  min-height: clamp(310px, 38vw, 500px);
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 16%, var(--ds-band-primary-soft), transparent 28%),
    linear-gradient(135deg, var(--ds-band-primary-soft), color-mix(in srgb, var(--ds-band-surface) 38%, transparent));
  border: 1px solid var(--ds-band-border-soft);
  box-shadow: inset 0 1px 0 var(--ds-band-primary-soft), 0 26px 70px color-mix(in srgb, var(--lu-ink-900) 28%, transparent);
  overflow: hidden;
  transform: perspective(900px) rotateY(calc(var(--cv-home-tilt-x, 0) * 1deg)) rotateX(calc(var(--cv-home-tilt-y, 0) * -1deg));
  transition: transform 180ms ease-out;
}

.cv-home-console {
  position: absolute;
  left: 22px;
  top: 20px;
  z-index: 3;
  display: inline-flex;
  gap: 7px;
}

.cv-home-console span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lu-mint);
  opacity: 0.75;
}

.cv-home-console span:nth-child(2) { background: var(--ds-band-accent); }
.cv-home-console span:nth-child(3) { background: var(--lu-danger-dark); }

.cv-home-svg {
  position: absolute;
  inset: 4% 3% 0;
  width: 94%;
  height: 94%;
  overflow: visible;
}

.cvh-grid,
.cvh-house,
.cvh-room {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.cvh-grid { display: none; }

.cvh-house {
  stroke: var(--ds-band-line);
  stroke-width: 2;
}

.cvh-room {
  stroke: var(--ds-band-border-soft);
  stroke-width: 1.6;
}

.cvh-pipe {
  fill: none;
  stroke: url(#cvh-pipe-gradient);
  stroke-width: 5.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.92;
}

.cvh-pipe--main { stroke-width: 7; }
.cv-home-section.is-visible .cvh-pipe { animation: cvh-draw 1.45s cubic-bezier(.2,.7,.1,1) forwards; }
.cv-home-section.is-visible .cvh-pipe:nth-of-type(4) { animation-delay: 120ms; }
.cv-home-section.is-visible .cvh-pipe:nth-of-type(5) { animation-delay: 260ms; }
.cv-home-section.is-visible .cvh-pipe:nth-of-type(6) { animation-delay: 420ms; }
.cv-home-section.is-visible .cvh-pipe:nth-of-type(7) { animation-delay: 620ms; }

@keyframes cvh-draw { to { stroke-dashoffset: 0; } }

/* moving light: same path as its pipe, so it can only travel inside the pipe */
.cvh-flow-line {
  fill: none;
  stroke: #eafcff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 2 34;
  stroke-dashoffset: 0;
  opacity: 0;
}

.cv-home-section.is-visible .cvh-flow-line {
  animation: cvh-run 2.4s linear infinite, cvh-flow-in .6s ease 1.6s forwards;
}

@keyframes cvh-run { to { stroke-dashoffset: -36; } }
@keyframes cvh-flow-in { to { opacity: .85; } }

.cvh-unit rect {
  fill: var(--ds-band-primary-soft);
  stroke: color-mix(in srgb, var(--lu-mint) 65%, transparent);
  stroke-width: 2;
}

.cvh-unit circle,
.cvh-unit path {
  fill: none;
  stroke: var(--ds-band-text-soft);
  stroke-width: 2;
  stroke-linecap: round;
}

.cvh-inlets circle,
.cvh-flow circle {
  fill: var(--lu-mint);
}

.cvh-inlets circle {
  animation: cvh-pulse 2.8s ease-in-out infinite;
}

.cvh-inlets circle:nth-child(2) { animation-delay: .4s; }
.cvh-inlets circle:nth-child(3) { animation-delay: .8s; }

@keyframes cvh-pulse {
  0%, 100% { opacity: .75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.35); }
}

.cv-home-label {
  position: absolute;
  z-index: 4;
  padding: 7px 10px;
  color: var(--ds-band-text);
  background: color-mix(in srgb, var(--ds-band-bg) 68%, transparent);
  border: 1px solid var(--ds-band-border-soft);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  backdrop-filter: blur(14px);
}

.cv-home-label--rooms { left: 13%; top: 28%; }
.cv-home-label--unit { right: 9%; bottom: 13%; color: var(--lu-mint); }

@media (max-width: 1024px) {
  .cv-home-card { grid-template-columns: 1fr; }
  .cv-home-visual { min-height: 390px; }
}

@media (max-width: 640px) {
  .cv-home-section { padding-block: 44px; }
  .cv-home-card { padding: 24px; border-radius: 24px; }
  .cv-home-title { font-size: clamp(32px, 11vw, 48px); }
  .cv-home-visual { min-height: 310px; border-radius: 20px; }
  .cv-home-pills span { width: 100%; justify-content: center; }
  .cv-home-link { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cv-home-visual,
  .cv-home-link,
  .cv-home-link .icon,
  .cvh-pipe,
  .cvh-flow-line,
  .cvh-inlets circle {
    animation: none !important;
    transition: none !important;
  }

  .cvh-pipe { stroke-dashoffset: 0; }
  .cvh-flow-line { display: none; }
}