/* 3d-home-services.css: the six service cards as display plinths.
   The slot (.obj) at the top of each card stays clear so the 3D piece behind it is not dimmed; the text sits on frosted glass below a hairline.
   Scoped to html.svc-3d (set by home-services.js once the pieces exist). Metrics (padding, margins) stay the same as 3d.css so the page never shifts when the class appears. */

#services { --scrim: 0.3; --scrim-feather: 120; }

/* the pieces failed to start (home-services.js sets html.svc-fail): plain cards, no empty slot */
html.svc-fail #services .card .obj { display: none; }
html.svc-fail #services .card { background: linear-gradient(180deg, var(--card-top), var(--card-bottom)); }

html.svc-3d:not(.gl-lost) #services .card {
  --obj-h: 220px;
  background: none;
  border: 1px solid rgba(var(--ink-rgb), 0.075);
  border-radius: 22px;
  isolation: isolate;
  box-shadow: 0 54px 70px -54px rgba(0, 0, 0, 0.8);
  transition:
    opacity 0.9s var(--ease) var(--d, 0s),
    translate 1.1s var(--ease) var(--d, 0s),
    border-color 0.5s var(--ease),
    transform 0.7s var(--ease),
    box-shadow 0.7s var(--ease);
}
html.svc-3d:not(.gl-lost) #services .card:hover,
html.svc-3d:not(.gl-lost) #services .card:focus-within {
  border-color: rgba(var(--accent-rgb), 0.24);
  transform: translateY(-6px);
  box-shadow: 0 64px 80px -52px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(var(--accent-rgb), 0.05);
}

/* the glass under the slot, with a hairline plinth along its top edge */
html.svc-3d:not(.gl-lost) #services .card::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0; right: 0; bottom: 0;
  top: calc(var(--obj-h) + 18px);
  border-radius: 0 0 21px 21px;
  background:
    linear-gradient(90deg, transparent, rgba(var(--ink-rgb), 0.2) 50%, transparent) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(var(--ink-rgb), 0.05) 0, rgba(var(--bg-rgb), 0.5) 40px, rgba(var(--bg-rgb), 0.66) 100%);
  -webkit-backdrop-filter: blur(7px) saturate(1.1);
  backdrop-filter: blur(7px) saturate(1.1);
  transition: background-position 0.6s var(--ease);
}
/* the old top hairline of 3d.css, narrower */
html.svc-3d:not(.gl-lost) #services .card::after { left: 22%; right: 22%; background: linear-gradient(90deg, transparent, rgba(var(--ink-rgb), 0.12), transparent); }

/* corner ticks on the slot: bone at rest, lime on hover (drafting marks, no box) */
html.svc-3d:not(.gl-lost) #services .card .obj { overflow: visible; }
html.svc-3d:not(.gl-lost) #services .card .obj::before,
html.svc-3d:not(.gl-lost) #services .card .obj::after {
  --b: 12px;
  content: "";
  position: absolute;
  inset: 8px 2px 2px;
  pointer-events: none;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / var(--b) 1px no-repeat,
    linear-gradient(currentColor, currentColor) 0 0 / 1px var(--b) no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / var(--b) 1px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 1px var(--b) no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / var(--b) 1px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 1px var(--b) no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / var(--b) 1px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 1px var(--b) no-repeat;
  transition: opacity 0.5s var(--ease), inset 0.7s var(--ease);
}
html.svc-3d:not(.gl-lost) #services .card .obj::before { color: rgba(var(--ink-rgb), 0.2); }
html.svc-3d:not(.gl-lost) #services .card .obj::after { color: var(--accent); opacity: 0; }
html.svc-3d:not(.gl-lost) #services .card:hover .obj::after,
html.svc-3d:not(.gl-lost) #services .card:focus-within .obj::after { opacity: 0.85; inset: 4px -2px -2px; }
html.svc-3d:not(.gl-lost) #services .card:hover .obj::before,
html.svc-3d:not(.gl-lost) #services .card:focus-within .obj::before { opacity: 0; }


/* touch: no hover lift, no blur (cheaper on phones), a little more body on the glass */
@media (hover: none) {
  html.svc-3d:not(.gl-lost) #services .card:hover { transform: none; }
  html.svc-3d:not(.gl-lost) #services .card::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background:
      linear-gradient(90deg, transparent, rgba(var(--ink-rgb), 0.2) 50%, transparent) top / 100% 1px no-repeat,
      linear-gradient(180deg, rgba(var(--bg-rgb), 0.4) 0, rgba(var(--bg-rgb), 0.62) 100%);
  }
}
@media (max-width: 800px) {
  html.svc-3d:not(.gl-lost) #services .card { --obj-h: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  html.svc-3d:not(.gl-lost) #services .card { transition-duration: 0.35s, 0.35s, 0.3s, 0.3s, 0.3s; }
}