/* ==========================================================================
   Winda — Product overview composition (Copy Deck v3).
     hero (dot-wave field) · three module cards · the Saturn-ring loop · CTA
   Ported from the design export's prototype/product.html.
   ========================================================================== */

/* ==========================================================================
   1. Hero — <dot-wave> fills the section behind the copy.
   Design system §13 hero field, approved variant 2e.
   ========================================================================== */

.hero-product {
  position: relative;
  overflow: hidden;
}

.hero-product__body {
  position: relative;
  z-index: 2;
}

.hero-product__lede {
  margin-top: 22px;
}

.hero-product__cta {
  display: flex;
  gap: 14px;
  margin-top: 36px;
  flex-wrap: wrap;
}

/* ==========================================================================
   2. Module cards — one per product line, each a whole-card link.
   The media is a lime-duotone hologram (.modfig): image + a drifting green
   particle canvas (screen-blended) + a staggered shimmer sweep + vignette.
   ========================================================================== */

.modcard {
  display: block;
  color: inherit;
  padding: 0;
}

.modcard:hover {
  color: inherit;
}

.modfig {
  position: relative;
  height: 200px;
  border-bottom: 1px solid var(--w-line);
  overflow: hidden;
  background: #000;
}

.modfig img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Green motes drifting up over the image. Painted by js/product.js. */
.modfig canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Shimmer sweep, staggered per card so the row does not pulse in unison. */
.modfig::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(181, 208, 88, 0.14), transparent);
  animation: mod-sweep 5.5s ease-in-out infinite;
  pointer-events: none;
}

.grid3 .modcard:nth-child(2) .modfig::after { animation-delay: 1.8s; }
.grid3 .modcard:nth-child(3) .modfig::after { animation-delay: 3.6s; }

@keyframes mod-sweep {
  0% { left: -40%; }
  55%, 100% { left: 120%; }
}

.modfig .vig {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.35) 100%);
}

.modcard__body {
  padding: 26px 28px;
}

.modcard__name {
  margin-bottom: 10px;
  font-size: 26px;
}

.modcard__desc {
  font: 400 15px/1.65 var(--font-body);
  color: var(--w-grey);
  margin-bottom: 20px;
}

/* ==========================================================================
   3. The Saturn-ring loop — the section's signature visual.
   A tilted disc: three counter-rotating rings, a slow conic dust disc, a
   signal dot orbiting the Atlas core, four labelled nodes around the rim, and
   a canvas of ~150 orbiting dust particles behind it. Plays on scroll.
   ========================================================================== */

.lpstage {
  position: relative;
  height: 580px;
  border: 1px solid var(--w-line-green);
  background: #050607;
  overflow: hidden;
}

/* Faint 40px instrument grid behind everything. */
.lpstage .cg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(181, 208, 88, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(181, 208, 88, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

.lpstage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* Anchor at dead centre; the tilt is applied to its child so the rings read
   as a disc seen at a low angle (Saturn). */
.satwrap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 1px;
  z-index: 3;
}

.sattilt {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotateX(72deg);
}

.satr {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(181, 208, 88, 0.35);
  border-radius: 50%;
}

.satr.r1 {
  width: 300px;
  height: 300px;
  margin: -150px 0 0 -150px;
  animation: lp-spin 14s linear infinite;
}

.satr.r2 {
  width: 460px;
  height: 460px;
  margin: -230px 0 0 -230px;
  border-color: rgba(181, 208, 88, 0.22);
  border-style: dashed;
  animation: lp-spin 22s linear infinite reverse;
}

.satr.r3 {
  width: 640px;
  height: 640px;
  margin: -320px 0 0 -320px;
  border-color: rgba(181, 208, 88, 0.15);
  animation: lp-spin 34s linear infinite;
}

.satdisc {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 760px;
  height: 760px;
  margin: -380px 0 0 -380px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(181, 208, 88, 0.08), transparent 40%, rgba(181, 208, 88, 0.05), transparent 70%);
  animation: lp-spin 40s linear infinite;
}

.satorb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 560px;
  height: 560px;
  margin: -280px 0 0 -280px;
  animation: lp-spin 18s linear infinite;
}

/* The signal dot, riding the orbit ring. */
.satorb .p {
  position: absolute;
  left: 50%;
  top: 0;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: #dff0a8;
  box-shadow: 0 0 10px 2px rgba(181, 208, 88, 0.9);
}

@keyframes lp-spin {
  to { transform: rotate(360deg); }
}

/* Atlas core, dead centre. */
.lpcore {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 8;
  width: 150px;
}

.lpcore .t {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  color: var(--w-green);
  line-height: 1;
}

.lpcore .s {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--w-grey);
  margin-top: 8px;
}

/* The four nodes around the rim. Three link to product pages; the fourth
   (Decision) is the output and is not a link. */
/* Each node is anchored by its dot, which sits exactly on the outer ring
   ellipse (radius 320 tilted 72deg -> rx 320, ry 320*cos72 = 99). The label
   floats outward from the dot so it never covers the rings. Fixed-px offsets
   track the fixed-px rings at any stage width. */
.lpnode {
  position: absolute;
  z-index: 7;
  color: inherit;
  transition: transform var(--dur-base) var(--ease-engage);
}
.lpnode--top    { left: 50%; top: calc(50% - 99px); transform: translate(-50%, -50%); }
.lpnode--bottom { left: 50%; top: calc(50% + 99px); transform: translate(-50%, -50%); }
.lpnode--right  { left: calc(50% + 320px); top: 50%; transform: translate(-50%, -50%); }
.lpnode--left   { left: calc(50% - 320px); top: 50%; transform: translate(-50%, -50%); }

.lpnode:hover,
.lpnode:focus-visible {
  transform: translate(-50%, -50%) scale(1.08);
}

.lpnode .dot {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--w-green);
  box-shadow: 0 0 12px 2px rgba(181, 208, 88, 0.8);
}

/* Label radiates away from Atlas so the dot stays clean on the ring. */
.lp-label {
  position: absolute;
  width: 190px;
  text-align: center;
}
.lpnode--top .lp-label    { left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 14px; }
.lpnode--bottom .lp-label { left: 50%; top: 100%; transform: translateX(-50%); margin-top: 14px; }
.lpnode--left .lp-label   { right: 100%; top: 50%; transform: translateY(-50%); margin-right: 16px; text-align: right; }
.lpnode--right .lp-label  { left: 100%; top: 50%; transform: translateY(-50%); margin-left: 16px; text-align: left; }

.lpnode .k {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--w-green);
}

.lpnode .n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--w-white);
  margin-top: 5px;
  line-height: 1.1;
}

.lpnode:hover .n,
.lpnode:focus-visible .n {
  color: var(--w-green);
}

.lpnode .r {
  font: 400 12px/1.5 var(--font-body);
  color: var(--w-grey);
  margin-top: 6px;
}

.lplegend {
  position: absolute;
  right: 24px;
  bottom: 18px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--w-grey-2);
  z-index: 9;
}

/* Nothing in the stage moves for reduced-motion users. The rings and nodes
   are still fully readable at rest. */
@media (prefers-reduced-motion: reduce) {
  .lpstage * {
    animation: none !important;
  }
}

/* ==========================================================================
   Narrow viewports.
   ========================================================================== */

/* Below the wide desktop there isn't room for labels to radiate horizontally
   outside the ring, so fall back to the compact stacked layout (dot on top,
   label beneath) placed near the four rim points. */
@media (max-width: 1160px) {
  .lpnode--top    { left: 50%; top: 15%; }
  .lpnode--right  { left: 82%; top: 50%; }
  .lpnode--bottom { left: 50%; top: 85%; }
  .lpnode--left   { left: 18%; top: 50%; }

  .lpnode .dot { margin: 0 auto 10px; }

  .lp-label,
  .lpnode--top .lp-label,
  .lpnode--bottom .lp-label,
  .lpnode--left .lp-label,
  .lpnode--right .lp-label {
    position: static;
    width: 168px;
    margin: 0;
    transform: none;
    text-align: center;
  }
}

@media (max-width: 900px) {
  /* Ring is fixed px; shrink the stage and scale the tilted disc down with it. */
  .lpstage {
    height: 460px;
  }

  .sattilt {
    transform: translate(-50%, -50%) rotateX(72deg) scale(0.72);
  }

  .lp-label,
  .lpnode--top .lp-label,
  .lpnode--bottom .lp-label,
  .lpnode--left .lp-label,
  .lpnode--right .lp-label {
    width: 148px;
  }

  .lpnode .r {
    display: none; /* keep the label + name; drop the sentence at this size */
  }
}

@media (max-width: 600px) {
  .lpstage {
    height: 400px;
  }

  .sattilt {
    transform: translate(-50%, -50%) rotateX(72deg) scale(0.5);
  }

  .lp-label,
  .lpnode--top .lp-label,
  .lpnode--bottom .lp-label,
  .lpnode--left .lp-label,
  .lpnode--right .lp-label {
    width: 120px;
  }

  .lpnode .n {
    font-size: 15px;
  }

  .lplegend {
    display: none;
  }

  .modfig {
    height: 168px;
  }
}