/* data-destruction.html — page-only pieces on top of v3-kit.css (2026-09-28)
   · hero: a drive being wiped (spinning platter, scan beam, progress, bits)
   · scanner wall across the media types · wipe vs shred method cards */

/* ─── Hero drive ──────────────────────────────────────────────────────── */
.dd-hero-art { width: min(100%, 440px); }
.dd-drive { position: absolute; inset: 4%; width: 92%; height: 92%; overflow: visible; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .5)); }
.dd-platter, .dd-arm { transform-box: view-box; }
.dd-platter { transform-origin: 182px 182px; }
.dd-arm { transform-origin: 300px 104px; }
.dd-prog { transform-box: fill-box; transform-origin: left center; }
.dd-prog-t { font: 800 13px/1 var(--body); letter-spacing: .2em; fill: rgba(255, 255, 255, .75); }
.dd-bits text { opacity: 0; }
html.sv-js .dd-platter { animation: svSpin 2.4s linear infinite; }
html.sv-js .dd-arm { animation: ddArm 3.2s ease-in-out infinite; }
html.sv-js .dd-beam { animation: ddBeam 2.6s ease-in-out infinite; }
html.sv-js .dd-prog { animation: ddProg 5.2s cubic-bezier(.5, 0, .3, 1) infinite; }
html.sv-js .dd-bits text { animation: ddBit 2.8s ease-out infinite; }
html.sv-js .dd-bits text:nth-child(2) { animation-delay: .5s; } html.sv-js .dd-bits text:nth-child(3) { animation-delay: 1s; }
html.sv-js .dd-bits text:nth-child(4) { animation-delay: 1.5s; } html.sv-js .dd-bits text:nth-child(5) { animation-delay: 2s; } html.sv-js .dd-bits text:nth-child(6) { animation-delay: 2.4s; }
.sv-js .dd-hero-art .dd-prog { transform: scaleX(0); }
@keyframes ddArm { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }
@keyframes ddBeam { 0% { transform: translateX(0); } 50% { transform: translateX(260px); } 100% { transform: translateX(0); } }
@keyframes ddProg { 0% { transform: scaleX(0); } 80%, 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes ddBit { 0% { opacity: 0; transform: translateY(30px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40px); } }
.dd-hero-art .sv-chip--1 { left: -6%; top: 10%; }
.dd-hero-art .sv-chip--2 { right: -8%; top: 44%; }
.dd-hero-art .sv-chip--3 { left: -4%; bottom: 8%; }

/* ─── Scanner wall ────────────────────────────────────────────────────── */
.dd-scan { position: relative; overflow: hidden; border-radius: 32px; padding: clamp(18px, 2.4vw, 28px); background: var(--forest); background-image: linear-gradient(rgba(185, 242, 74, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(185, 242, 74, .06) 1px, transparent 1px); background-size: 32px 32px; }
[data-theme="dark"] .dd-scan { background-color: #030f07; border: 1px solid rgba(185, 242, 74, .14); }
.dd-media { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dd-media li { position: relative; display: flex; flex-direction: column; gap: 16px; min-height: 150px; padding: 22px; border-radius: 22px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: #fff; font: 700 16.5px/1.35 var(--display); letter-spacing: -.01em; transition: background .3s, transform .4s var(--ease); }
.dd-media li:hover { background: rgba(185, 242, 74, .1); transform: translateY(-4px); }
.dd-media li:first-child { grid-row: span 2; justify-content: flex-end; font-size: 22px; background: rgba(185, 242, 74, .1); border-color: rgba(185, 242, 74, .3); }
.dd-media li:first-child .dd-m-ic { width: 72px; height: 72px; margin-bottom: auto; }
.dd-media li:first-child .dd-m-ic svg { width: 36px; height: 36px; }
.dd-media li::after { content: ""; position: absolute; top: 18px; right: 18px; width: 22px; height: 22px; border-radius: 50%; opacity: 0; transform: scale(.4);
  background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2305200d' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat; }
.dd-m-ic { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: rgba(185, 242, 74, .12); color: var(--lime); }
.dd-m-ic svg { width: 25px; height: 25px; }
.dd-scan-beam { position: absolute; left: 0; right: 0; top: 0; height: 90px; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(185, 242, 74, .16) 70%, rgba(185, 242, 74, .9) 98%, transparent); }
html.sv-js .dd-scan-beam { animation: ddScan 4.5s cubic-bezier(.45, 0, .55, 1) infinite; }
html.sv-js .dd-media li::after { animation: ddTick 4.5s ease infinite; }
html.sv-js .dd-media li:nth-child(n+5)::after { animation-delay: .9s; }
@keyframes ddScan { 0% { transform: translateY(-100px); opacity: 0; } 8% { opacity: 1; } 70% { opacity: 1; } 80%, 100% { transform: translateY(var(--scan-h, 420px)); opacity: 0; } }
@keyframes ddTick { 0%, 25% { opacity: 0; transform: scale(.4); } 35%, 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }

/* ─── Method cards ────────────────────────────────────────────────────── */
.dd-method { padding: clamp(24px, 3vw, 40px); border-radius: 30px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.dd-method p { margin-top: 12px !important; font-size: 16.5px; line-height: 1.65; color: rgba(255, 255, 255, .78); }
.dd-method p strong { color: #fff; }
.dd-method p a { color: var(--lime) !important; font-weight: 700; }
.dd-wipe, .dd-shred-box { position: relative; height: 230px; margin-bottom: 26px; border-radius: 22px; background: linear-gradient(160deg, #173a22, #07160d); border: 1px solid rgba(185, 242, 74, .15); overflow: hidden; }
.dd-shred-box svg { width: 100%; height: 100%; }
.dd-wipe-rows { position: absolute; inset: 40px 60px; display: grid; gap: 14px; align-content: center; }
.dd-wipe-rows i { display: block; height: 14px; border-radius: 7px; background: repeating-linear-gradient(90deg, #9fb1a4 0 18px, transparent 18px 24px); transform-origin: right center; }
.dd-wipe-rows i:nth-child(2) { width: 80%; } .dd-wipe-rows i:nth-child(3) { width: 92%; } .dd-wipe-rows i:nth-child(4) { width: 70%; } .dd-wipe-rows i:nth-child(5) { width: 86%; }
.dd-wipe::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60px; z-index: 1; background: linear-gradient(90deg, transparent, rgba(185, 242, 74, .8), transparent); opacity: 0; }
.dd-wipe-ok { position: absolute; left: 50%; top: 50%; width: 78px; height: 78px; margin: -39px 0 0 -39px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--forest); opacity: 0; transform: scale(.3); }
.dd-wipe-ok svg { width: 38px; height: 38px; }
html.sv-js .dd-wipe-rows i { animation: ddErase 4.6s cubic-bezier(.6, 0, .3, 1) infinite; }
html.sv-js .dd-wipe-rows i:nth-child(2) { animation-delay: .12s; } html.sv-js .dd-wipe-rows i:nth-child(3) { animation-delay: .24s; }
html.sv-js .dd-wipe-rows i:nth-child(4) { animation-delay: .36s; } html.sv-js .dd-wipe-rows i:nth-child(5) { animation-delay: .48s; }
html.sv-js .dd-wipe::before { animation: ddSweep 4.6s cubic-bezier(.6, 0, .3, 1) infinite; }
html.sv-js .dd-wipe-ok { animation: ddOk 4.6s cubic-bezier(.3, 1.5, .5, 1) infinite; }
@keyframes ddErase { 0%, 15% { transform: scaleX(1); opacity: 1; } 45% { transform: scaleX(0); opacity: 1; } 90% { transform: scaleX(0); opacity: 0; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes ddSweep { 0%, 12% { transform: translateX(-60px); opacity: 0; } 15% { opacity: 1; } 48% { transform: translateX(560px); opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ddOk { 0%, 50% { opacity: 0; transform: scale(.3); } 60%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }

/* ─── Reviews (static three-up) ───────────────────────────────────────── */
.dd-revs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dd-revs .sv-review { width: auto; margin: 0; }
.dd-revs .sv-review:nth-child(3n) { background: var(--forest); }

@media (max-width: 980px) {
  .dd-media { grid-template-columns: 1fr 1fr; }
  /* stacked layouts: the feature tile matches the others (no oversized text, no right-push) */
  .dd-media li:first-child { grid-row: auto; grid-column: 1 / -1; min-height: 0; justify-content: flex-start; font-size: 16.5px; }
  .dd-media li:first-child .dd-m-ic { width: 50px; height: 50px; margin-bottom: 0; }
  .dd-media li:first-child .dd-m-ic svg { width: 25px; height: 25px; }
  .dd-scan { --scan-h: 900px; }
  .dd-revs { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .dd-media { grid-template-columns: 1fr; }
  .dd-media li { min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; padding-right: 50px; }
  .dd-scan { --scan-h: 1100px; }
}