/*
 * DIA CAPITAL — Global Polish V2 — FINAL, FROZEN for the launch phase (canonical). Loads AFTER every section stylesheet; removable as one file.
 * No section is redesigned: this file only adds (1) soft seam ramps, (2) one reveal system (opacity / translateY, driven by
 * src/js/modules/global-polish-motion.js), (3) one hover / press / focus language, (4) a gentler FAQ expansion.
 * All motion is gated by html.dia-motion (set by the module only when the user has no reduced-motion preference), so
 * content is fully visible without JS and with prefers-reduced-motion.
 */
@layer dia.utilities {
  /* ---------- 1. Seams: surface bands soften their step from the neighbouring ground (no new separators) ---------- */
  .dia-apex :is(#que-es-apex, #inteligencias, #antes-de-comprar, #planes, #preguntas-frecuentes) { position: relative; }

  .dia-apex :is(#que-es-apex, #inteligencias, #antes-de-comprar, #planes, #preguntas-frecuentes)::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0 0 auto 0;
    block-size: 2.75rem;
    pointer-events: none;
    background: linear-gradient(to bottom, var(--dia-seam-from, var(--dia-bg)), transparent);
  }

  /* The ground each band comes from: 02 (dark chapter) → 03; 03 surface → 04; 10A ground → 10B; 10B surface → 10C; 10C ground → 11. */
  .dia-apex #que-es-apex { --dia-seam-from: var(--dia-island-bg); }
  .dia-theme-light .dia-apex #que-es-apex { --dia-seam-from: var(--dia-bg); }
  .dia-apex #inteligencias { --dia-seam-from: var(--dia-surface); }
  .dia-apex #planes { --dia-seam-from: var(--dia-surface); }
  .dia-apex #planes::before { block-size: 6rem; background: linear-gradient(to bottom, var(--dia-surface) 0, color-mix(in srgb, var(--dia-surface) 72%, transparent) 22%, color-mix(in srgb, var(--dia-surface) 38%, transparent) 50%, color-mix(in srgb, var(--dia-surface) 12%, transparent) 78%, transparent 100%); }

  /* ---------- 2. Reveal system ---------- */
  html.dia-motion .dia-apex [data-reveal] {
    opacity: 0;
    transform: translate3d(0, var(--rv-y, 16px), 0);
    transition: opacity 640ms cubic-bezier(0.23, 1, 0.32, 1), transform 720ms cubic-bezier(0.23, 1, 0.32, 1);
    transition-delay: var(--rv-d, 0ms);
  }

  html.dia-motion .dia-apex [data-reveal="fade"] { transform: none; transition-property: opacity; transition-duration: 800ms; }

  html.dia-motion .dia-apex [data-reveal].is-in { opacity: 1; transform: none; }

  /* ---------- 3. One interaction language ---------- */
  @media (hover: hover) and (pointer: fine) {
    .dia-apex :is(.dia-btn, .dia-rdy3__cta-link, .dia-rdy3__video, .dia-final__secondary, .dia-plans2__cta) {
      transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;
    }

    .dia-apex :is(.dia-btn, .dia-rdy3__cta-link, .dia-rdy3__video, .dia-plans2__cta):hover { transform: translateY(-1px); }
    .dia-apex :is(.dia-btn, .dia-rdy3__cta-link, .dia-rdy3__video, .dia-plans2__cta):active { transform: translateY(0); transition-duration: 80ms; }
  }

  .dia-apex :is(a, button, [role="tab"], [tabindex="0"]):focus-visible { outline: 2px solid var(--dia-focus); outline-offset: 3px; }

    /* ---------- 3b. Touch (mobile-native checklist): no tap flash, no double-tap delay, controls are not text-selectable ---------- */
  .dia-apex :is(a, button, summary, [role="tab"], [role="button"]) { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .dia-apex :is(button, [role="tab"], summary) { -webkit-user-select: none; user-select: none; }

  /* ---------- 3c. Small screens: blur is GPU / battery cost; the translucent fills already carry the separation.
     The <dialog> ::backdrop (a pseudo-element, untouched here) keeps its dimming for modal separation. ---------- */
  @media (max-width: 767px) {
    .dia-apex :is(*, *::before, *::after) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  }

  /* ---------- 3d. Contrast fixes from the numeric audit ---------- */
  /* Light page: the entry ramps into the dark chapters (05, 12) were longer than the heading offset on small screens, so the
     Bronze eyebrow sat on a half-lit band. Compress both ramps to end above the eyebrow. */
  .dia-theme-light .dia-apex .dia-eco2--v2::before {
    block-size: 3rem;
    background: linear-gradient(to bottom, #F7F8F8 0%, #C9D6DC 22%, #5E7886 52%, rgb(7 20 28 / 0.7) 82%, transparent 100%);
  }

  .dia-theme-light .dia-apex .dia-final3::before {
    block-size: 3.5rem;
    background: linear-gradient(to bottom, #FFFFFF 0%, #D2DEE3 20%, #5E7886 52%, rgb(7 20 28 / 0.75) 82%, transparent 100%);
  }

  /* Text that sits on bright scene art: a dark halo (the canonical rules already do this for the Hero and 06A statement). */
  .dia-apex :is(.dia-m42__fn-text, .dia-mf__result) { text-shadow: 0 0 6px #04101A, 0 0 14px #04101A, 0 0 22px #04101A; }

  /* Section 02 "Market behavior" (11 px text on the bright platform disc): white + a feathered dark plate behind the glyphs. */
  .dia-apex .dia-mf__result { color: #FFFFFF; isolation: isolate; }
  .dia-apex .dia-mf__result::before { content: ""; position: absolute; z-index: -1; inset: -0.9em -2em; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(4 12 19 / 0.88), rgb(4 12 19 / 0.55) 55%, transparent 100%); pointer-events: none; }

  /* 06A function copy that crosses the energy waves: lift it one step (secondary text → near-primary). */
  .dia-apex .dia-m42__fn-text { color: #CBD5D9; }
  @media (max-width: 767px) { .dia-apex .dia-mf__result::before { inset: -1.1em -2.6em; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(4 12 19 / 1) 0%, rgb(4 12 19 / 0.92) 45%, rgb(4 12 19 / 0.6) 75%, transparent 100%); } }

  /* ---------- 4. FAQ: smooth expansion where supported (native <details>; content stays in the accessibility tree) ---------- */
  @supports (interpolate-size: allow-keywords) {
    .dia-apex { interpolate-size: allow-keywords; }

    .dia-apex .dia-faq2__item::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size 260ms cubic-bezier(0.23, 1, 0.32, 1), content-visibility 260ms allow-discrete;
    }

    .dia-apex .dia-faq2__item[open]::details-content { block-size: auto; }
  }
}

@media (prefers-reduced-motion: reduce) {
  @layer dia.utilities {
    html.dia-motion .dia-apex [data-reveal] { opacity: 1; transform: none; transition: none; }
    .dia-apex :is(.dia-btn, .dia-rdy3__cta-link, .dia-rdy3__video, .dia-final__secondary, .dia-plans2__cta) { transition: none; transform: none; }
    .dia-apex .dia-faq2__item::details-content { transition: none; }
  }
}