/* ==========================================================================
   Product Detail Section — "Genesis — Ink Trace"
   One entry in the extensible "product detail sections" library — see
   inc/product-detail-sections.php for how a shop owner picks which of
   these (if any) appears below a given product.
   ========================================================================== */

.omh-pd-genesis{
  min-height:70vh; padding:5rem 1.5rem; display:flex; flex-direction:column;
  align-items:center; justify-content:center; position:relative; overflow:hidden;
  background:var(--color-bg);
}
.omh-pd-genesis .eyebrow{
  font-size:0.64rem; letter-spacing:var(--tracking-label); text-transform:uppercase;
  color:var(--color-ink-soft); margin-bottom:0.7rem;
}
.omh-pd-genesis h2{
  font-family:var(--font-display); font-weight:400; font-size:clamp(1.4rem,1.1rem + 1.5vw,2.2rem);
  text-align:center; margin-bottom:2.6rem; opacity:0; transform:translateY(14px);
  transition:opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.omh-pd-genesis h2.in{ opacity:1; transform:translateY(0); }

.omh-pd-stage-wrap{
  position:relative; width:100%; max-width:900px; display:grid;
  grid-template-columns:1fr auto 1fr; align-items:center; gap:2rem;
}
.omh-pd-stage{ position:relative; width:min(240px, 60vw); margin:0 auto; }
.omh-pd-genesis .genesis-svg{ width:100%; height:auto; display:block; overflow:visible; }
.omh-pd-genesis .gline{
  fill:none; stroke:var(--color-ink); stroke-width:2.2;
  stroke-dasharray:1; stroke-dashoffset:1; opacity:1;
  animation:omhPdInk 2.6s cubic-bezier(0.22,1,0.36,1) both;
  animation-delay:var(--tdelay);
}
@keyframes omhPdInk{ to{ stroke-dashoffset:0; } }
.omh-pd-genesis .glogo{ fill:var(--color-ink); opacity:0; transition:opacity 1s ease; }
.omh-pd-genesis .glogo.in{ opacity:1; }

.omh-pd-genesis .gdot{ animation:none !important; opacity:0.3; }
.omh-pd-stage.ambient .gdot:nth-of-type(1){ animation:omhPdDot 2.4s ease-in-out infinite !important; }
.omh-pd-stage.ambient .gdot:nth-of-type(2){ animation:omhPdDot 2.4s ease-in-out infinite 0.25s !important; }
.omh-pd-stage.ambient .gdot:nth-of-type(3){ animation:omhPdDot 2.4s ease-in-out infinite 0.5s !important; }
@keyframes omhPdDot{ 0%,100%{ opacity:0.25; } 50%{ opacity:1; } }
.omh-pd-stage.ambient .omh-pd-tilt{ animation:omhPdWave 8s ease-in-out infinite; }
@keyframes omhPdWave{ 0%,100%{ transform:skewX(0deg); } 50%{ transform:skewX(0.8deg); } }

.omh-pd-specs{ display:flex; flex-direction:column; gap:1.3rem; }
.omh-pd-specs.right{ align-items:flex-start; }
.omh-pd-specs.left{ align-items:flex-end; text-align:right; }
.omh-pd-spec-item{
  opacity:0; transform:translateX(10px);
  transition:opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.omh-pd-specs.left .omh-pd-spec-item{ transform:translateX(-10px); }
.omh-pd-spec-item.in{ opacity:1; transform:translateX(0); }
.omh-pd-spec-num{ font-family:var(--font-display); font-size:1.3rem; color:var(--color-ink); }
.omh-pd-spec-label{
  font-size:0.62rem; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--color-ink-soft); margin-top:0.15rem;
}

@media (max-width:620px){
  .omh-pd-stage-wrap{ grid-template-columns:1fr; }
  .omh-pd-stage{ order:-1; width:min(220px, 65vw); }
  .omh-pd-specs{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:1rem 1.4rem; }
  .omh-pd-specs.left{ align-items:flex-start; text-align:left; }
  .omh-pd-specs.right{ align-items:flex-start; text-align:left; }
  .omh-pd-spec-item{ width:42%; transform:translateY(8px); }
  .omh-pd-spec-item.in{ transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce){
  .omh-pd-genesis .gline{ animation:none; stroke-dashoffset:0; }
  .omh-pd-stage.ambient .gdot,
  .omh-pd-stage.ambient .omh-pd-tilt{ animation:none; }
}

/* Desktop — bigger, more imposing presence: the graphic and the
   figures both scale up noticeably rather than just stretching the
   surrounding whitespace. */
@media (min-width:900px){
  .omh-pd-genesis{ padding:8rem 3rem; min-height:85vh; }
  .omh-pd-genesis h2{ font-size:clamp(2.2rem, 1.6rem + 1.6vw, 3.2rem); margin-bottom:4rem; }
  .omh-pd-stage-wrap{ max-width:1200px; gap:4rem; }
  .omh-pd-stage{ width:min(400px, 34vw); }
  .omh-pd-spec-num{ font-size:2.4rem; }
  .omh-pd-spec-label{ font-size:0.78rem; }
  .omh-pd-specs{ gap:2.4rem; }
}