/*
 * Page-specific styles for /products/dlym.
 *
 * Port of the design's inline <style> block in `Imaginando DLYM.html`.
 * Same convention as the TKFX / UBRIDGE pages — the product-detail
 * chrome (.product-nav, .sec-head, .hero, .req-grid, .help-grid…) is
 * duplicated here intentionally. Hoist into /style.css once a
 * fourth product-detail page mounts the same chrome.
 *
 * Already in /style.css (intentionally NOT duplicated):
 *   :root tokens, html/body/a/button resets, ::selection, .mono, .wrap,
 *   .btn / .btn.primary / .btn.ghost / .btn .arrow, .section, .reveal.
 *
 * NOT-quite-the-same in /style.css (overridden below):
 *   .sec-head — global is sized for homepage scale; design wants the
 *               product-detail larger h2 with accent on em + mono meta.
 *   .hero     — global is the homepage hero; product hero is taller
 *               (clamp(72px,11vw,180px) h1 + extra padding).
 */

/* ============================================================
 * Local palette tokens — picked up from the DLYM handoff `:root`
 * (Imaginando DLYM.html lines 23-25). Never declared globally
 * because they're DLYM-specific accents; without these declarations
 * every `var(--accent-2)` / `var(--accent-3)` reference in this
 * file silently resolves to empty, leaving:
 *   • path.alt + path.deep strokes invisible (the engine `.fv-svg`
 *     visuals only show the base `--accent` path — 1 line instead
 *     of 2/3, so card 1 looks like card 2 looks like card 3),
 *   • rect[fill="var(--accent-3)"] invisible on the `width` tile
 *     (only the top row of bars renders, not the mirrored bottom),
 *   • two of the three `.hero-bg` radial-gradient layers vanish.
 * Re-declaring them here on a `:root`-scoped block restores the
 * full handoff palette without leaking outside the DLYM page (no
 * other product page sources this stylesheet). */
:root {
  --accent-2: #7fb800;  /* deeper olive-green   — DLYM handoff */
  --accent-3: #e6ff8a;  /* pale chartreuse      — DLYM handoff */
}

/* ============================================================
 * Section heading override — product-detail scale.
 * ============================================================ */
.sec-head { margin-bottom: 48px; flex-wrap: wrap; }
.sec-head h2 {
  font-size: clamp(38px, 5vw, 72px);
  line-height: 0.95;
  max-width: none;
  margin: 8px 0 0;
}
.sec-head h2 em { color: var(--accent); }
.sec-head .meta {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: right;
  max-width: 30ch;
}

/* ============================================================
 * HERO
 * ============================================================ */
/* ============================================================
 * HERO — DLYM tint + visual only. Chrome is shared (`.phero-*` in
 * public/style.css, via +productHero — refs #444). DLYM keeps its
 * deeper padding, tri-colour gradient, 1.05fr split, 1100px collapse
 * and wider copy columns; the shared base covers the rest.
 * ============================================================ */
.phero { padding: 48px 0 96px; }
.phero-bg {
  background:
    radial-gradient(ellipse 70% 55% at 75% 30%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 90%, color-mix(in oklab, var(--accent-2) 18%, transparent), transparent 60%),
    radial-gradient(ellipse 40% 40% at 50% 50%, color-mix(in oklab, var(--accent-3) 8%, transparent), transparent 70%);
}
.phero-grid { grid-template-columns: 1fr 1.05fr; }
.phero h2 { max-width: 22ch; }
.phero .lede { max-width: 50ch; }
@media (max-width: 1100px) {
  .phero-grid { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .hero-img-col { margin-top: 0; }
}

/* OVERVIEW — the `.ov-*` block is now shared in public/style.css
 * (Product "Overview" section). DLYM uses it unchanged. */

/* ============================================================
 * ENGINE — feature mosaic
 * ============================================================ */
.ftile {
  position: relative;
  border: 0.5px solid var(--line);
  border-radius: 18px;
  background: var(--card, #0a0d14);
  padding: 28px 28px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  min-height: 340px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.ftile:hover { border-color: var(--line-strong); }
.ftile.featured {
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 8%, var(--card, #0a0d14)), var(--card, #0a0d14));
  border-color: color-mix(in oklab, var(--accent) 30%, var(--line));
}
.ftile.warm {
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent-3) 5%, var(--card, #0a0d14)), var(--card, #0a0d14));
}
.ftile .ix { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); }
.ftile h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
.ftile h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.ftile p { margin: 0; color: var(--fg-dim); font-size: 14px; line-height: 1.55; text-wrap: pretty; max-width: 46ch; }
.ftile .vis {
  margin-top: auto;
  height: 140px;
  border-top: 0.5px dashed var(--line);
  margin-left: -28px;
  margin-right: -28px;
  padding: 0;
  display: grid;
  place-items: stretch;
  /* Clip the oversized SVG. The inline SVGs use
     `preserveAspectRatio="xMidYMid slice"` so the geometry fills the
     entire band (no warping, no letterboxing) and any content that
     overflows the container gets cropped — that "fragment of a
     larger composition" look is intentional. */
  overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, color-mix(in oklab, var(--accent) 6%, transparent), transparent 70%);
}
.fv-svg { width: 100%; height: 100%; display: block; color: var(--fg-dim); }
.fv-svg path { fill: none; stroke: var(--accent); stroke-width: 1.5; filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent) 50%, transparent)); }
.fv-svg path.alt { stroke: var(--accent-3); filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent-3) 50%, transparent)); }
.fv-svg path.deep { stroke: var(--accent-2); filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent-2) 50%, transparent)); }
.fv-svg text { fill: var(--fg-faint); font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; }
.fv-svg circle { fill: var(--accent); }

/* Platform pills (sync kind) — replaces the React layout */
.platform-pills { padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; height: 100%; justify-content: center; }
.platform-row { display: grid; grid-template-columns: 60px 1fr 14px; gap: 10px; align-items: center; }
.platform-row .plat-name { font-family: var(--display); font-size: 11px; font-weight: 500; color: var(--fg); }
.platform-row .plat-fmt  { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim); }
.platform-row .plat-dot  { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }

/* ============================================================
 * DRY / WET — redesigned panel.
 *
 * Stack: source tabs (BASS/GUITAR/BEAT) → DRY/WET caption → flat
 * SVG knob (circle ring + lollipop indicator at 12 o'clock that
 * rotates with the value) → bottom transport row (round play btn +
 * full-width accent progress bar). The dry/wet end-labels and the
 * percentage readout from the previous design are gone; the knob's
 * angle and the bar fill carry the meaning.
 * ============================================================ */
.dw-single {
  /* Panel-scoped accent override — the DLYM plugin chassis uses
     this specific orange across selector + play button + progress
     line. !important is needed to beat the page-level light-theme
     `--accent` declaration which itself uses !important. */
  --accent: #FF5033 !important;

  max-width: 560px;
  min-height: 410px;
  margin: 0 auto;
  border-radius: 15px;
  background:
    linear-gradient(141.5deg, rgba(102, 102, 102, 0.2) 10.9%, rgba(0, 0, 0, 0.2) 100.48%),
    #2B2B2B;
  /* Padding + gap are tuned so the flex column lands every child at
     its exact Figma y-position: tabs at 42, label at 118, knob at
     180, transport (play button) at 324. The transport row also gets
     a 9px margin-top override below so its gap is 44px instead of
     35px (matches the Figma offset from the knob bottom). */
  padding: 42px 44px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 35px;
  text-align: center;
}

/* Source tab row — fixed 258.46×41 rounded-rect container with
   three equal-width cells (= 258.46/3 ≈ 86.15px each). Active cell
   fills with accent, inactive cells stay transparent with accent
   text. Oswald Light is loaded by views/site/dlym.pug for this page
   only. */
.dw-switch {
  display: flex;
  width: 258.46px;
  height: 41px;
  gap: 0;
  border: 1px solid var(--accent);
  border-radius: 6px;
}
.dw-seg {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-family: "Oswald", "Inter Tight", sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease;
}
/* Active text uses the panel base colour `#2B2B2B` (not the page's
   `--accent-ink`) so it reads as part of the chassis aesthetic, per
   the Figma spec. */
.dw-seg.on { background: var(--accent); color: #2B2B2B; }

/* Centred caption above the knob — Oswald 300 18px / 27px line
   height, muted grey colour per the Figma spec. */
.dw-label {
  font-family: "Oswald", "Inter Tight", sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #91898D;
}

/* Knob — the asset at https://cdn.imaginando.pt/website3/products/dlym/dlym-effect-button.svg
   provides the shape (ring + vertical pill indicator at 12 o'clock).
   The whole <img> rotates via CSS transform; centre of rotation is
   the image centre which is also the ring centre, so the indicator
   orbits cleanly. */
.dw-knob {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  position: relative;
  cursor: ns-resize;
  touch-action: none;
  outline: none;
  display: grid;
  place-items: center;
}
.dw-knob:focus-visible {
  border-radius: 50%;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 55%, transparent);
}
.dw-knob-img {
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  transform: rotate(40.5deg);
  transform-origin: 50% 50%;
  /* JS toggles this off while the user is actively dragging so the
     pointer feels 1:1; on tap/keypress the easing kicks back in. */
  transition: transform 0.12s ease-out;
}

/* Transport row — round play button (46×46, 1px #454545 border) +
   4px accent progress line. The 9px margin-top sits on top of the
   panel's 35px flex gap to make the gap before this row 44px — so
   the play button lands at exactly y=324 per the Figma spec. */
.dw-transport {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 102%;
  margin-top: 9px;
}
.dw-play {
  width: 47px;
  height: 47px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid #454545;
  display: grid;
  place-items: center;
  color: var(--accent);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
  background: transparent;
  padding: 0;
}
.dw-play:hover { border-color: var(--accent); }
.dw-play.on { background: var(--accent); color: #2B2B2B; border-color: var(--accent); }
/* 4px tall progress line. Figma shows a single solid accent line
   (no track), but we keep audio progress indication by giving the
   track a faint-accent tint and the fill a solid accent. At rest
   the line still reads as one continuous accent line. */
.dw-bar {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 28%, transparent);
  overflow: hidden;
}
.dw-bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  width: 0%;
  transition: width 0.12s linear;
}

/* ============================================================
 * REQUIREMENTS — 3 cards (no cloud-sync row)
 * ============================================================ */
.req-grid { grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--card, #0a0d14); }
.req-grid .req:last-child { border-right: 0; }
@media (max-width: 900px) {
  .req-grid .req:nth-child(2n+1) { border-right: 0.5px solid var(--line); }
}
@media (max-width: 520px) {
  .req-grid .req { border-right: 0; }
}

/* ============================================================
 * HELP — 2 cards (manual + support)
 * ============================================================ */
.help-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 900px) { .help-grid { grid-template-columns: 1fr; } }
.hcard {
  position: relative;
  border: 0.5px solid var(--line);
  border-radius: 14px;
  background: var(--card, #0a0d14);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.25s ease, transform 0.25s ease;
  color: inherit;
}
.hcard:hover { border-color: var(--accent); transform: translateY(-2px); }
.hcard .icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 0.5px solid var(--line-strong);
  display: grid;
  place-items: center;
  color: var(--accent);
  margin-bottom: 4px;
}
.hcard .icon svg { width: 20px; height: 20px; }
.hcard .kind { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); }
.hcard h4 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin: 0;
  text-wrap: balance;
}
.hcard h4 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.hcard p { margin: 0; color: var(--fg-dim); font-size: 13.5px; line-height: 1.5; flex: 1; }
.hcard .more {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hcard .more .arrow { transition: transform 0.25s ease; }
.hcard:hover .more .arrow { transform: translateX(3px); }