/* Dang Vape About page: scroll-expanding hero image, revealing photos, standards card. */

.dv .dva-intro { text-align: center; padding-bottom: 8px !important; }
.dv .dva-intro .dv-lede, .dv .dva-intro .dv-lede p { max-width: 680px; margin-left: auto; margin-right: auto; }
.dv .dva-intro .dv-byline { justify-content: center; }
.dv .dva-intro h1 { font-size: clamp(40px, 6.4vw, 92px); }

.dv .elementor-section.dva-hero, .dv .dva-hero .elementor-widget-wrap, .dv .dva-hero .elementor-widget-container, .dv .dva-hero .elementor-shortcode { overflow: visible !important; padding: 0 !important; margin: 0 !important; }
.dv .dva-hero .elementor-container { max-width: none !important; }
.dva-scroll { position: relative; height: calc(100vh + 900px); margin-top: -4vh; }
.dva-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--dv-ink, #09090F);
  --a: 25; --b: 75; --s: 170%;
  clip-path: polygon(calc(var(--a) * 1%) calc(var(--a) * 1%), calc(var(--b) * 1%) calc(var(--a) * 1%), calc(var(--b) * 1%) calc(var(--b) * 1%), calc(var(--a) * 1%) calc(var(--b) * 1%));
  will-change: clip-path;
}
.dva-sticky-img { position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; background-size: var(--s); }
.dva-sticky::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(9,9,15,.15) 0%, rgba(9,9,15,0) 40%, rgba(9,9,15,.7) 100%);
}
.dva-caption {
  position: absolute; z-index: 1; left: 50%; bottom: 7vh; transform: translateX(-50%); margin: 0; white-space: nowrap;
  font-family: var(--dv-f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #EEEDF5;
  padding: 9px 16px; border-radius: 999px; background: rgba(9,9,15,.55); border: 1px solid rgba(238,236,246,.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: var(--cap, 0); transition: opacity .3s ease;
}

.dv .elementor-section.dva-row > .elementor-container { align-items: center; }
.dv .dva-copy > .elementor-widget-wrap { padding-left: clamp(16px, 4vw, 56px) !important; }
.dv .dva-flip .dva-copy > .elementor-widget-wrap { padding-left: 15px !important; padding-right: clamp(16px, 4vw, 56px) !important; }
.dv .dva-copy ul { padding-left: 1.1em; }
.dv .dva-copy li { margin: 0 0 10px; color: var(--dv-muted); }
.dv .dva-copy p { color: var(--dv-muted); }
@media (min-width: 768px) {
  .dv .dva-flip > .elementor-container { flex-direction: row-reverse; }
}

.dva-fig { position: relative; margin: 0; --c: 16; --z: 1.18; --y: 0px; }
.dva-glow {
  position: absolute; inset: 10% 8% -4%; z-index: 0; border-radius: 40px; filter: blur(50px); opacity: .55;
  background: radial-gradient(closest-side, hsla(var(--hue), 90%, 62%, .9), transparent);
}
.dva-frame {
  position: relative; z-index: 1; display: block; overflow: hidden; border-radius: 26px;
  border: 1px solid rgba(238,236,246,.14); box-shadow: 0 40px 80px rgba(0,0,0,.5);
  clip-path: inset(calc(var(--c) * 1%) round 26px);
}
.dva-land .dva-frame { aspect-ratio: 16 / 11; }
.dva-tall .dva-frame { aspect-ratio: 4 / 5; max-height: 640px; margin-inline: auto; }
.dva-frame img {
  display: block; width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0 !important;
  transform: translate3d(0, var(--y), 0) scale(var(--z)); will-change: transform;
}

.dv .elementor-section.dva-standards > .elementor-container {
  position: relative; overflow: hidden; border-radius: 28px; border: 1px solid var(--dv-line, rgba(238,236,246,.11));
  padding: clamp(32px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background:
    radial-gradient(50% 120% at 100% 0%, rgba(255,141,181,.22), transparent 60%),
    radial-gradient(50% 120% at 0% 100%, rgba(126,230,255,.18), transparent 60%),
    var(--dv-deep, #111019);
}
.dva-rules { list-style: none; padding: 0 !important; margin: 18px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dva-rules li {
  margin: 0 !important; padding: 16px 18px 16px 48px; position: relative; border-radius: 16px; color: var(--dv-fg, #EEEDF5) !important;
  background: rgba(9,9,15,.5); border: 1px solid rgba(238,236,246,.1); font-weight: 500;
}
.dva-rules li::before {
  content: ""; position: absolute; left: 18px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
  background: conic-gradient(from 0deg, #7EE6FF, #A98CFF, #FF8DB5, #FFC777, #7EE6FF);
  -webkit-mask: radial-gradient(circle, transparent 4px, #000 5px); mask: radial-gradient(circle, transparent 4px, #000 5px);
}

@media (max-width: 767px) {
  .dva-scroll { height: calc(100vh + 600px); }
  .dva-caption { white-space: normal; text-align: center; width: max-content; max-width: 86vw; }
  .dv .dva-copy > .elementor-widget-wrap, .dv .dva-flip .dva-copy > .elementor-widget-wrap { padding: 18px 15px 0 !important; }
  .dva-rules { grid-template-columns: 1fr; }
  .dva-tall .dva-frame { aspect-ratio: 4 / 4.4; }
}
@media (prefers-reduced-motion: reduce) {
  .dva-scroll { height: auto; }
  .dva-sticky { position: relative; height: 70vh; clip-path: none; --s: cover; }
  .dva-caption { opacity: 1; }
  .dva-fig { --c: 0; --z: 1; }
}
/* ---------- v2: vapes rising into the scroll image ---------- */
.dva-devs { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.dva-dev {
  position: absolute; bottom: 14vh; height: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.65)) drop-shadow(0 0 30px rgba(169,140,255,.25));
  opacity: var(--cap, 0); transform: translate3d(0, calc((1 - var(--cap, 0)) * 60px), 0);
  transition: opacity .25s linear;
}
.dva-dev-1 { left: 16%; width: clamp(90px, 9vw, 150px); rotate: -10deg; }
.dva-dev-2 { left: 50%; width: clamp(120px, 12vw, 200px); margin-left: calc(clamp(120px, 12vw, 200px) / -2); bottom: 16vh; }
.dva-dev-3 { right: 16%; width: clamp(95px, 9.5vw, 160px); rotate: 9deg; }
.dva-dev { animation: dva-bob 7s ease-in-out infinite; }
.dva-dev-2 { animation-delay: -2.3s; }
.dva-dev-3 { animation-delay: -4.6s; }
@keyframes dva-bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.dva-caption { z-index: 2; }

/* ---------- v2: faint vapes behind the headline ---------- */
.dv .elementor-section.dva-intro { position: relative; isolation: isolate; overflow: hidden; }
.dv .dva-floaters-widget, .dv .dva-floaters-widget > .elementor-widget-container, .dv .dva-floaters-widget .elementor-shortcode { position: static; margin: 0 !important; }
.dva-floaters { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.dva-float { position: absolute; height: auto; opacity: .13; filter: saturate(.9) blur(.4px); animation: dva-drift 16s ease-in-out infinite; }
.dva-float-1 { width: clamp(90px, 9vw, 150px); left: 5%; top: 14%; rotate: -16deg; }
.dva-float-2 { width: clamp(120px, 12vw, 200px); left: 18%; bottom: -8%; rotate: 12deg; animation-delay: -5s; }
.dva-float-3 { width: clamp(90px, 9vw, 150px); right: 6%; top: 10%; rotate: 14deg; animation-delay: -9s; }
.dva-float-4 { width: clamp(80px, 8vw, 130px); right: 20%; bottom: -4%; rotate: -10deg; animation-delay: -3s; }
.dva-float-5 { width: clamp(70px, 6vw, 110px); left: 46%; top: -6%; rotate: 6deg; opacity: .08; animation-delay: -12s; }
@keyframes dva-drift { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-18px,0) rotate(3deg); } }
.dv .dva-intro::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 70% at 50% 60%, rgba(169,140,255,.14), transparent 70%); }

/* ---------- v2: contact card in "The people behind it" ---------- */
.dva-card {
  position: relative; overflow: hidden; border-radius: 26px; padding: clamp(28px, 4vw, 44px);
  border: 1px solid rgba(238,236,246,.14); background: radial-gradient(70% 90% at 0% 0%, rgba(126,230,255,.14), transparent 60%), radial-gradient(70% 90% at 100% 100%, rgba(255,141,181,.16), transparent 60%), #111019;
  box-shadow: 0 40px 80px rgba(0,0,0,.45);
}
.dva-card-ring { position: absolute; width: 360px; height: 360px; right: -140px; top: -140px; border-radius: 50%; opacity: .5;
  background: conic-gradient(from 0deg, #7EE6FF, #A98CFF, #FF8DB5, #FFC777, #7EE6FF); filter: blur(60px); animation: dva-spin 14s linear infinite; }
@keyframes dva-spin { to { transform: rotate(360deg); } }
.dva-card-logo { position: relative; display: block; max-height: 40px; width: auto; margin-bottom: 26px; }
.dva-card-name { position: relative; font-family: var(--dv-f-display); font-weight: 800; font-size: 28px; color: #EEEDF5; }
.dva-card-list { position: relative; margin: 0; display: grid; gap: 14px; }
.dva-card-list div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(238,236,246,.1); }
.dva-card-list dt { font-family: var(--dv-f-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #A3A0B5; padding-top: 3px; }
.dva-card-list dd { margin: 0; color: #EEEDF5; font-weight: 500; }
.dva-card-list a { color: #EEEDF5; }

/* ---------- v2: prism video behind "What we won't do" ---------- */
.dv .elementor-section.dva-standards-video > .elementor-container { isolation: isolate; }
.dv .dva-standards-video .dvh-cta-widget, .dv .dva-standards-video .dvh-cta-widget > .elementor-widget-container, .dv .dva-standards-video .dvh-cta-widget .elementor-shortcode { position: static; margin: 0 !important; }
.dva-standards-video .dvh-cta-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.dva-standards-video .dvh-cta-video { position: absolute; top: 0; right: 0; height: 100%; width: 70%; object-fit: cover; object-position: 45% 50%; }
.dva-standards-video .dvh-cta-media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(13,12,20,.97) 0%, rgba(13,12,20,.86) 38%, rgba(13,12,20,.35) 70%, rgba(13,12,20,.2) 100%); }
.dva-standards-video .dva-rules li { background: rgba(9,9,15,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

@media (max-width: 767px) {
  .dva-dev { bottom: 18vh; }
  .dva-dev-1 { left: 6%; } .dva-dev-3 { right: 6%; }
  .dva-float-2, .dva-float-4 { display: none; }
  .dva-card-list div { grid-template-columns: 1fr; gap: 2px; }
  .dva-standards-video .dvh-cta-video { width: 100%; }
  .dva-standards-video .dvh-cta-media::after { background: linear-gradient(to bottom, rgba(13,12,20,.5), rgba(13,12,20,.92) 45%); }
}
@media (prefers-reduced-motion: reduce) {
  .dva-dev, .dva-float, .dva-card-ring { animation: none !important; }
  .dva-dev { opacity: 1; transform: none; }
}