/* Soontek product pages: the animated layout
   Loaded after soontek-tuotesivu.css and soontek-kuvitus.css by a page whose body has
   class "px". The shared file still gives the ground, the type, the table, the pinned
   band and the footer; this file adds the look of the front page draft and the harness
   page: mono eyebrows, hairline cards, a header that sticks, drawings that draw
   themselves. Pages without the class do not change.

   Motion rules, the same everywhere (vault: wiki/mainossivujen-liike.md):
   - Every base style is the FINAL state; animations run from hidden into it.
   - Hidden-until-revealed states exist only under html.js, a class that
     skriptit/sivu.js sets itself. No script, no class, nothing hidden.
   - prefers-reduced-motion stops everything and leaves the finished page. */

.px {
  --wide: 72rem;
  --px-ink-3: #808483;
  --px-panel: #0a0b0d;
  --px-line: rgba(255, 255, 255, .13);
  --px-glow: rgba(255, 106, 31, .34);
  --px-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --px-ease: cubic-bezier(.2, .7, .2, 1);
  overflow-x: clip;
}
html { scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.px section { border-top: 0; position: relative; }
.px section + section { border-top: 0; }
.px .wrap > h2::before { content: none; }
.px ::selection { background: var(--accent); color: #000; }
.px em { font-style: normal; color: var(--accent); }
.px h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); text-wrap: balance; }
.px h2 { font-size: clamp(1.9rem, 4vw, 3rem); text-wrap: balance; }
.px .panel { background: var(--px-panel); border-block: 1px solid var(--px-line); }

/* ---- progress wire and header ------------------------------------------- */
.px-progress { position: fixed; left: 0; top: 0; z-index: 60; width: 100%; height: 2px; pointer-events: none; }
.px-progress i { display: block; height: 100%; background: var(--accent); box-shadow: 0 0 12px var(--px-glow);
  transform: scaleX(var(--px-scroll, 0)); transform-origin: 0 50%; }
.px .site-head { position: sticky; top: 0; z-index: 50; background: rgba(0, 0, 0, .62);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: transparent; transition: border-color .3s, background .3s; }
.px .site-head.is-stuck { border-bottom-color: var(--px-line); background: rgba(0, 0, 0, .82); }
.px .site-head nav { align-items: center; }
.px .site-head nav a { color: var(--ink-2); }
.px .site-head nav a:hover { color: var(--ink); text-decoration: none; }
.px .site-head nav .px-cta { color: var(--accent); border: 1px solid var(--accent); padding: .55rem 1rem; font-weight: 700; transition: background .25s, color .25s; }
.px .site-head nav .px-cta:hover { background: var(--accent); color: #000; }

/* ---- shared bits ---------------------------------------------------------- */
.px .eyebrow { color: var(--accent); display: inline-flex; align-items: center; gap: .7rem; font-family: var(--px-mono); letter-spacing: .2em; }
.px-dot { width: .5rem; height: .5rem; background: var(--accent); display: inline-block; animation: px-ping 2.4s ease-out infinite; }
@keyframes px-ping { 0% { box-shadow: 0 0 0 0 var(--px-glow); } 70%, 100% { box-shadow: 0 0 0 .7rem rgba(255, 106, 31, 0); } }
.px-sechead { max-width: 46rem; margin-bottom: 3.2rem; }
.px-sechead p:last-child { color: var(--ink-2); font-size: 1.12rem; margin: 0; }
.px .button { display: inline-flex; gap: .6rem; align-items: center; margin-top: 0; transition: box-shadow .3s, transform .3s var(--px-ease), background .25s, color .25s; }
.px .button:hover { background: var(--accent); color: #000; box-shadow: 0 0 40px var(--px-glow); transform: translateY(-2px); }
.px-ghost { font-weight: 700; font-size: .92rem; border-bottom: 1px solid var(--px-line); padding-bottom: .25rem; transition: border-color .3s; }
.px-ghost:hover { border-color: var(--accent); text-decoration: none; }

/* ---- hero: text beside a drawing ------------------------------------------- */
.px-hero { padding: 4.5rem 0 5rem; overflow: hidden; }
.px-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60rem 30rem at 85% 10%, rgba(255, 106, 31, .1), transparent 60%),
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 100% 4rem,
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 4rem 100%;
  -webkit-mask-image: radial-gradient(ellipse at 70% 45%, #000 15%, transparent 72%); mask-image: radial-gradient(ellipse at 70% 45%, #000 15%, transparent 72%); }
.px-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3rem; align-items: center; z-index: 1; }
.px-hero .lead { font-size: 1.25rem; font-weight: 300; color: var(--ink-2); max-width: 32rem; margin: 1.5rem 0 2.2rem; }
.px-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; }
.px-trust { list-style: none; margin: 2.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.8rem;
  font: .74rem/1.4 var(--px-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--px-ink-3); }
.px-trust li::before { content: "+ "; color: var(--accent); }
.px-h1line { display: block; overflow: hidden; } .px-h1line > span { display: block; }
.px-scope { background: linear-gradient(180deg, #101215, #0a0b0d); position: relative; }
.px-cursor { opacity: 0; }
.px .ill text.lid { font: 800 17px "Montserrat", Arial, sans-serif; letter-spacing: .14em; fill: rgba(255, 255, 255, .8); }

/* ---- two columns: words and a drawing --------------------------------------- */
.px-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
.px-duo p { color: var(--ink-2); max-width: 34rem; }
.px-duo p.px-big { color: #fff; font-size: 1.3rem; font-weight: 300; line-height: 1.55; }

/* ---- the chain: numbered cards joined by a wire ------------------------------ */
.px-chain { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--px-line); counter-reset: step; }
.px-step { position: relative; padding: 2.2rem 2rem 2.1rem; border-right: 1px solid var(--px-line); border-bottom: 1px solid var(--px-line);
  overflow: hidden; isolation: isolate; counter-increment: step; }
.px-step:nth-child(3n) { border-right: 0; } .px-step:nth-last-child(-n+3) { border-bottom: 0; }
.px-step::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s;
  background: radial-gradient(20rem circle at var(--mx, 50%) var(--my, 0%), rgba(255, 106, 31, .15), transparent 65%); }
.px-step:hover::before { opacity: 1; }
/* the wire along the top edge of each card: together they read as one line through all six */
.px-step::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--accent);
  transform-origin: 0 50%; box-shadow: 0 0 10px var(--px-glow); }
.px-step .no { display: flex; justify-content: space-between; align-items: center; font: .74rem var(--px-mono); letter-spacing: .18em; color: var(--px-ink-3); margin-bottom: 1.4rem; }
.px-step .no::before { content: "0" counter(step); color: var(--accent); }
.px-step .ill { width: 5rem; height: 5rem; margin-bottom: 1.3rem; transition: transform .5s var(--px-ease); }
.px-step:hover .ill { transform: translateY(-4px); }
.px-step h3 { font-size: 1.1rem; margin-bottom: .6rem; }
.px-step p { color: var(--ink-2); font-size: .95rem; line-height: 1.6; margin: 0; }

/* ---- wide drawing and detail cards --------------------------------------------- */
.px-wide { margin: 0; border: 1px solid var(--px-line); background: #050607; padding: clamp(1rem, 3vw, 2.2rem); overflow-x: auto; }
.px-wide .ill { min-width: 44rem; }
.px-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.px-details figure { margin: 0; border: 1px solid var(--px-line); background: #050607; display: flex; flex-direction: column; transition: border-color .3s, transform .5s var(--px-ease); }
.px-details figure:hover { border-color: var(--accent); transform: translateY(-4px); }
.px-details .ill { padding: 1.4rem 1.4rem .4rem; }
.px-details figcaption { padding: 1rem 1.5rem 1.6rem; color: var(--ink-2); font-size: .93rem; border-top: 1px solid var(--px-line); flex: 1; }
.px-details figcaption b { display: block; color: #fff; font-weight: 900; text-transform: uppercase; font-size: .95rem; letter-spacing: .02em; margin-bottom: .35rem; }

.px table { margin-top: 0; } .px th { color: #fff; font-family: var(--px-mono); font-weight: 400; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; padding-top: 1.05rem; }
.px .cta { background: radial-gradient(50rem 22rem at 50% 100%, rgba(255, 106, 31, .13), transparent 70%); }

/* ---- motion ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js .px [data-reveal] { opacity: 0; transform: translateY(1.6rem);
    transition: opacity .9s var(--px-ease) var(--d, 0s), transform .9s var(--px-ease) var(--d, 0s); }
  .js .px [data-reveal].is-in { opacity: 1; transform: none; }
  .js .px-step::after { transform: scaleX(0); transition: transform 1s var(--px-ease) calc(var(--d, 0s) + .2s); }
  .js .px-step.is-in::after { transform: scaleX(1); }
  /* drawings inside a revealed block draw themselves */
  .js .px [data-reveal] .ill [pathLength="1"]:not(.sweep):not(.range) { stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.7s var(--px-ease) calc(var(--d, 0s) + var(--i, 0) * .12s + .15s); }
  .js .px [data-reveal].is-in .ill [pathLength="1"]:not(.sweep):not(.range) { stroke-dashoffset: 0; }

  .px-blink { animation: px-blink 1.1s steps(2, jump-none) infinite; }
  /* the log's cursor: waits for the traces to draw, then sweeps the plot */
  .px-cursor { animation: px-sweep 7s linear 2.8s infinite both; }
  .js .px-h1line > span { animation: px-rise 1s var(--px-ease) both; animation-delay: var(--d, 0s); }
  .js .px-fade { animation: px-fade .9s var(--px-ease) both; animation-delay: var(--d, 0s); }

  /* exploded view: starts assembled, opens once, then floats a little */
  .js .ex-lid  { animation: ex-lid 1.6s var(--px-ease) .5s both, ex-float 7s ease-in-out 2.4s infinite alternate; }
  .js .ex-pcb  { animation: ex-pcb 1.6s var(--px-ease) .5s both; }
  .js .ex-base { animation: ex-sink 7s ease-in-out 2.4s infinite alternate; }
  .js .ex-note { animation: px-fade 1s var(--px-ease) 1.7s both; }
  .js .ex-pcb [pathLength="1"] { stroke-dasharray: 1; animation: ill-draw 1.4s var(--px-ease) both; animation-delay: calc(1.6s + var(--i, 0) * .12s); }
}
@keyframes px-blink { to { opacity: 0; } }
@keyframes px-sweep { from { transform: translateX(0); opacity: 0; } 4% { opacity: .9; } 96% { opacity: .9; } to { transform: translateX(400px); opacity: 0; } }
@keyframes px-rise { from { transform: translateY(105%); } }
@keyframes px-fade { from { opacity: 0; transform: translateY(1rem); } }
/* from = the closed box: lid on the base (250 - 28), board inside it */
@keyframes ex-lid  { from { transform: translateY(222px); } }
@keyframes ex-pcb  { from { transform: translateY(80px); } }
@keyframes ex-float { to { transform: translateY(-9px); } }
@keyframes ex-sink  { to { transform: translateY(6px); } }

@media (max-width: 975px) {
  .px-hero .wrap, .px-duo { grid-template-columns: 1fr; gap: 2.5rem; }
  .px-chain, .px-details { grid-template-columns: 1fr 1fr; }
  .px-step:nth-child(n) { border-right: 1px solid var(--px-line); border-bottom: 1px solid var(--px-line); }
  .px-step:nth-child(2n) { border-right: 0; } .px-step:nth-last-child(-n+2) { border-bottom: 0; }
  .px .site-head nav a:not(.px-cta) { display: none; }
}
@media (max-width: 575px) {
  /* the labels of the exploded view would be unreadable: show the device larger and leave
     the words to the cards below, which say the same thing */
  .px-exploded { overflow: hidden; } .px-exploded .ill { width: 150%; max-width: none; }
  .px-exploded g.ex-note:has(text) { display: none; }
  .px-chain, .px-details { grid-template-columns: 1fr; }
  .px-step:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--px-line); } .px-step:last-child { border-bottom: 0; }
}
@media print { .px-progress, .px-hero::before { display: none; } .px .site-head { position: static; } }