/*
=====================================================
Space Vanta — DNA layer (shared, additive)
Primary DNA: floating / geometric / layered.
Secondary DNA: fracture / shards.
Loaded after the page stylesheets; only decorates, never changes layout
or content. Reused by All products and Bundles.
All decoration is CSS only, aria-hidden or pseudo-element based.
=====================================================
*/

/* ---------- geometric facets behind the page (layered, theme-tinted) ---------- */
.svc { position: relative; overflow-x: clip; isolation: isolate; --dna-a: rgba(255, 255, 255, .62); --dna-b: rgba(255, 255, 255, .5); }
.svc[data-sv-theme="breakfast"] { --dna-a: rgba(241, 217, 176, .55); --dna-b: rgba(255, 255, 255, .55); }
.svc[data-sv-theme="snacks"]    { --dna-a: rgba(233, 184, 160, .45); --dna-b: rgba(255, 255, 255, .5); }
.svc[data-sv-theme="home"]      { --dna-a: rgba(201, 209, 217, .6);  --dna-b: rgba(255, 255, 255, .6); }
.svc[data-sv-theme="care"]      { --dna-a: rgba(207, 224, 245, .7);  --dna-b: rgba(255, 255, 255, .65); }
.svc > * { position: relative; z-index: 1; }
.svc::before, .svc::after { content: ""; position: absolute; z-index: 0; pointer-events: none; }
.svc::before {
  top: 0; right: 0; width: min(48vw, 600px); height: min(44vw, 560px);
  background: linear-gradient(200deg, var(--dna-a), rgba(255, 255, 255, 0) 80%);
  clip-path: polygon(30% 0, 100% 0, 100% 76%);
}
.svc::after {
  bottom: 0; left: 0; width: min(40vw, 480px); height: min(36vw, 400px);
  background: linear-gradient(20deg, var(--dna-b), rgba(255, 255, 255, 0) 80%);
  clip-path: polygon(0 24%, 66% 100%, 0 100%);
}

/* ---------- levitation: products float above a contact shadow ---------- */
.svc-card__frame { isolation: isolate; filter: drop-shadow(0 2px 3px rgba(27, 32, 38, .10)); }
.svc-card__frame::after {
  content: ""; position: absolute; z-index: -1; left: 10%; right: 10%; bottom: -13px; height: 16px; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(27, 32, 38, .36), rgba(27, 32, 38, 0) 70%);
  filter: blur(4px);
  transition: transform var(--svc-dur) var(--svc-ease), opacity var(--svc-dur) var(--svc-ease);
}
@media (hover: hover) {
  .svc-card:hover .svc-card__frame::after,
  .svc-card:has(.svc-card__title:focus-visible) .svc-card__frame::after { transform: translateY(9px) scale(.8); opacity: .55; }
  .svc[data-sv-theme="care"] .svc-card:hover .svc-card__frame::after { transform: none; opacity: 1; }
}

/* ---------- strata: hero plate and editorial tile get stacked layers ---------- */
.svc-plate { isolation: isolate; }
.svc-plate__face { position: relative; }
.svc-plate__ghost {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(135deg, var(--sv-silver-1), var(--sv-silver-3));
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
}
.svc-plate__ghost--1 { transform: translate(18px, 18px); opacity: .5; }
.svc-plate__ghost--2 { transform: translate(9px, 9px); opacity: .85; }

.svc-tile__link { position: relative; padding: 0 18px 18px 0; }
.svc-tile__stack i {
  position: absolute; top: 0; left: 0; right: 18px; bottom: 18px;
  clip-path: polygon(var(--sv-cut) 0, 100% 0, 100% calc(100% - var(--sv-cut)), calc(100% - var(--sv-cut)) 100%, 0 100%, 0 var(--sv-cut));
  transition: transform var(--svc-dur) var(--svc-ease);
}
.svc-tile__stack i:nth-child(1) { background: linear-gradient(135deg, var(--sv-silver-2), var(--sv-silver-3)); transform: translate(18px, 18px); opacity: .5; }
.svc-tile__stack i:nth-child(2) { background: linear-gradient(135deg, var(--sv-silver-1), var(--sv-silver-2)); transform: translate(9px, 9px); }
.svc-tile .svc-panel { position: relative; z-index: 2; }
@media (hover: hover) {
  .svc-tile__link:hover .svc-tile__stack i:nth-child(1) { transform: translate(28px, 28px); }
  .svc-tile__link:hover .svc-tile__stack i:nth-child(2) { transform: translate(14px, 14px); }
}

/* ---------- fracture: section rules are broken and offset ---------- */
.svc-ship__bar { border-block: 0; position: relative; padding-block: 20px; }
.svc-ship__bar::before, .svc-ship__bar::after {
  content: ""; position: absolute; left: 0; right: 0; height: 7px; pointer-events: none; opacity: .6;
  background: linear-gradient(90deg, var(--sv-ink-2) 0, var(--sv-ink-2) 35%, var(--sv-blue) 38.5%, var(--sv-blue) 40%, var(--sv-ink-2) 43%, var(--sv-ink-2) 100%);
  clip-path: polygon(0 0, 38% 0, 40.5% 100%, 100% 100%, 100% calc(100% - 1px), 40.2% calc(100% - 1px), 37.7% 1px, 0 1px);
}
.svc-ship__bar::before { top: 0; }
.svc-ship__bar::after  { bottom: 0; transform: scale(-1, -1); }

.svc-prose { position: relative; padding-top: 34px; }
.svc-prose::before {
  content: ""; position: absolute; top: 0; left: clamp(16px, 4vw, 40px); right: clamp(16px, 4vw, 40px); height: 7px; pointer-events: none; opacity: .6;
  background: linear-gradient(90deg, var(--sv-ink-2) 0, var(--sv-ink-2) 18%, var(--sv-blue) 20.5%, var(--sv-blue) 22%, var(--sv-ink-2) 25%, var(--sv-ink-2) 100%);
  clip-path: polygon(0 0, 20% 0, 22.5% 100%, 100% 100%, 100% calc(100% - 1px), 22.2% calc(100% - 1px), 19.7% 1px, 0 1px);
}

@media (prefers-reduced-motion: reduce) {
  .svc-card__frame::after { transition: none !important; }
}