/* ==========================================================================
   Prime Empire — showpiece support for the Elementor build
   --------------------------------------------------------------------------
   Styles only. Contains no copy and no content. Every rule targets an
   element ID or class that the Elementor markup supplies, so editing any
   headline, button or image in Elementor cannot affect this file.

   Elementor containers ignore the custom "CSS Classes" field, so these hooks
   are element IDs set on the containers instead.
   ========================================================================== */

/* ---------- SHOWPIECE 1 — hero foil canvas ---------- */
#pe-hero { position: relative; isolation: isolate; overflow: hidden; }
#pe-hero canvas.pe-foil {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.2s ease;
}
#pe-hero canvas.pe-foil.on { opacity: 1; }
#pe-hero > .e-con-inner,
#pe-hero > .elementor-element { position: relative; z-index: 2; }

/* ---------- SHOWPIECE 2 — category cards ---------- */
[id^="pe-cat-"] {
  position: relative; overflow: hidden;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
[id^="pe-cat-"]:hover { transform: translateY(-6px); }

[id^="pe-cat-"] .pe-trace {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none; overflow: visible;
}
[id^="pe-cat-"] .pe-trace rect {
  fill: none;
  stroke: url(#peFoilStroke);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--tl, 1200);
  stroke-dashoffset: var(--tl, 1200);
  transition: stroke-dashoffset 1.5s cubic-bezier(.16,1,.3,1);
}
[id^="pe-cat-"].is-traced .pe-trace rect { stroke-dashoffset: 0; }

[id^="pe-cat-"] .pe-glow {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .45s ease;
  background: radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
              rgba(241,200,107,.22), transparent 68%);
}
[id^="pe-cat-"]:hover .pe-glow { opacity: 1; }
[id^="pe-cat-"] > .e-con-inner,
[id^="pe-cat-"] > .elementor-element { position: relative; z-index: 2; }

/* ---------- SHOWPIECE 3 — printer finder ---------- */
#finder { position: relative; }
#finder .pe-find-step { display: flex; flex-direction: column; gap: 12px; }
#finder .pe-find-label {
  font: 600 12px/1 Inter, sans-serif;
  letter-spacing: 2.6px; text-transform: uppercase;
  color: #A8A49B; margin: 0 0 4px;
}
#finder .pe-find-opts { display: flex; flex-wrap: wrap; gap: 8px; }
#finder .pe-opt {
  padding: 10px 17px;
  font: 500 13px/1 Inter, sans-serif;
  color: #A8A49B;
  background: rgba(245,245,240,.02);
  border: 1px solid rgba(245,245,240,.12);
  border-radius: 2px; cursor: pointer;
  transition: border-color .25s, color .25s, background .25s,
              transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .4s;
}
#finder .pe-opt:hover { border-color: rgba(202,138,13,.55); color: #F5F5F0; transform: translateY(-2px); }
#finder .pe-opt.is-on {
  background: linear-gradient(135deg,#CA8A0D,#F1C86B,#CA8A0D);
  border-color: #CA8A0D; color: #120C00; font-weight: 600;
  box-shadow: 0 0 0 1px rgba(202,138,13,.4), 0 18px 46px -18px rgba(202,138,13,.42);
}
#finder .pe-find-filter input {
  width: 100%; padding: 11px 14px;
  background: rgba(10,10,10,.65);
  border: 1px solid rgba(245,245,240,.18);
  border-radius: 2px; color: #F5F5F0;
  font: 400 13px Inter, sans-serif;
}
#finder .pe-find-filter input::placeholder { color: #6E6B65; }
#finder .pe-find-filter input:focus {
  outline: none; border-color: #CA8A0D;
  box-shadow: 0 0 0 3px rgba(202,138,13,.16);
}
#finder .pe-more { width: 100%; margin: 6px 0 0; font: 400 12px Inter, sans-serif; color: #6E6B65; }

#finder .pe-hit {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid rgba(245,245,240,.10);
  opacity: 0; transform: translateY(12px);
  animation: peHitIn .5s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes peHitIn { to { opacity: 1; transform: none; } }
#finder .pe-hit img {
  width: 58px; height: 58px; flex: none; object-fit: cover;
  border: 1px solid rgba(245,245,240,.12); border-radius: 2px; background: #0A0A0A;
}
#finder .pe-hit-main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
#finder .pe-hit-name {
  font: 600 14px/1.35 Inter, sans-serif; color: #F5F5F0; text-decoration: none;
}
#finder .pe-hit-name:hover { color: #F1C86B; }
#finder .pe-hit-meta {
  font: 400 10px/1 Inter, sans-serif; letter-spacing: 2px;
  text-transform: uppercase; color: #6E6B65;
}
#finder .pe-hit-price {
  font: 600 19px/1 'Cormorant Garamond', serif; color: #F1C86B; flex: none;
}
#finder .pe-idle {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 48px 0; color: #6E6B65;
  font: 400 14px Inter, sans-serif;
}
#finder .pe-idle img { width: 52px; opacity: .22; }
#finder .pe-count { font: 400 12px Inter, sans-serif; color: #6E6B65; }

@media (prefers-reduced-motion: reduce) {
  [id^="pe-cat-"] .pe-trace rect { stroke-dashoffset: 0; transition: none; }
  #finder .pe-hit { opacity: 1; transform: none; animation: none; }
}

/* Step-2 label and the idle note are native Elementor widgets. They start
   hidden so nothing flashes before the script decides, and the script only
   flips their display — it never supplies their words. */
#pe-step2 { display: none; }
#pe-idle-note { color: #6E6B65; }

/* A heading that exists for screen readers and search engines only. Used to
   keep the heading hierarchy unbroken where the design has no visible
   sub-heading above a row of cards. */
.pe-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}