/* ──────────────────────────────────────────────────────────────────
   apple-design pass — ADDITIVE LAYER
   Loaded AFTER styles.css, which stays byte-identical to the
   CEO-supplied original. Remove the <link> and the page is the replica
   again. Nothing here changes copy, layout, structure or palette.
   Applied to /apple only; / remains the approved baseline.

   Principles referenced from the apple-design skill by section.
   ────────────────────────────────────────────────────────────────── */

:root {
  /* Apple states springs as damping + response, not duration.
     This page has no drag gestures — only scroll and click — so CSS
     transitions are legitimate here (§4 reserves true interruptible
     springs for things the user can grab and redirect mid-flight).
     These curves are critically damped: they settle, they never
     overshoot. Bounce is deliberately absent because no gesture on this
     page carries momentum. */
  --ease-settle: cubic-bezier(0.22, 0.61, 0.36, 1);   /* damping 1.0 */
  --response-fast: 0.18s;                              /* press feedback */
  --response-ui: 0.34s;                                /* §4: response 0.3–0.4 */
  --response-reveal: 0.42s;
}

/* ── §1 Response — acknowledge the press, instantly ──────────────
   The baseline has no :active state at all, so every button reads as
   dead until navigation happens. Feedback belongs on pointer-down. */

.button,
.button-small,
.button-light,
.review-actions button,
.text-link {
  transition:
    background var(--response-fast) var(--ease-settle),
    border-color var(--response-fast) var(--ease-settle),
    color var(--response-fast) var(--ease-settle),
    transform var(--response-fast) var(--ease-settle);
}

.button:active,
.button-small:active,
.button-light:active,
.review-actions button:active {
  /* Small, physical, and over in under 200ms. */
  transform: scale(0.975);
}

.text-link:active {
  transform: translateY(1px);
}

/* §10: hit padding around small targets, without moving anything. */
.text-link,
.utility-inner a,
.footer-grid a {
  position: relative;
}

.text-link::after,
.utility-inner a::after,
.footer-grid a::after {
  content: "";
  position: absolute;
  inset: -8px -6px;
}

/* ── §12 Materials — let the blur actually do something ──────────
   The baseline sets backdrop-filter: blur(10px) behind a 0.96-alpha
   white, so almost nothing shows through. Lowering the alpha and
   raising blur + saturation makes the header read as a translucent
   layer with content moving under it, which is the point of the
   material. */

.site-header {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);

  /* §12: scroll edge effect, not a hard divider. The 1px rule is
     replaced by a short gradient where content meets the chrome. */
  border-bottom: 1px solid rgba(216, 220, 229, 0.55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
              0 8px 24px -16px rgba(17, 24, 58, 0.18);
}

.utility-bar {
  background: rgba(17, 24, 58, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── §15 Typography — optical sizing, leading with size ──────────
   The baseline already does size-specific tracking well (-0.035em on
   h1, -0.025em on h2, +0.14em on eyebrows), so tracking is left alone.
   What is missing is optical sizing and slightly tighter leading on the
   largest display type. */

h1,
h2,
h3,
.article-header h1 {
  font-optical-sizing: auto;
  text-wrap: balance;          /* no orphaned last word in a heading */
}

h1,
.article-header h1 {
  line-height: 1.04;           /* §15: tight leading for large text */
}

.hero-lede,
.article-lede {
  text-wrap: pretty;
}

/* ── §4 Behaviour — reveal on scroll, critically damped ──────────
   One-shot entrance, driven by apple-design.js. No overshoot, and the
   element is fully visible with JS disabled — the reveal is additive,
   never a prerequisite for reading the page. */

/* Only hide when the script is present and running. Without .js-reveal on
   <html>, these selectors never match and the page renders fully visible. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--response-reveal) var(--ease-settle),
    transform var(--response-reveal) var(--ease-settle);
}

.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* §8: stagger hints the direction of travel down the page. */
.js-reveal [data-reveal][data-reveal-delay="1"] { transition-delay: 60ms; }
.js-reveal [data-reveal][data-reveal-delay="2"] { transition-delay: 120ms; }
.js-reveal [data-reveal][data-reveal-delay="3"] { transition-delay: 180ms; }

/* ── §1/§10 Interaction states on cards ─────────────────────────
   The baseline has five interaction states in the whole stylesheet.
   Cards that lead somewhere should say so on hover and acknowledge a
   press. Square corners are preserved — no radius is introduced. */

.solution-card,
.resource-grid article,
.principle {
  transition:
    transform var(--response-ui) var(--ease-settle),
    box-shadow var(--response-ui) var(--ease-settle),
    border-color var(--response-ui) var(--ease-settle);
}

.solution-card:hover,
.resource-grid article:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -28px rgba(17, 24, 58, 0.34);
}

.solution-card:active,
.resource-grid article:active {
  transform: translateY(0);
  transition-duration: var(--response-fast);
}

.architecture-step {
  transition: background var(--response-ui) var(--ease-settle);
}

/* ── Agency — visible focus, keyboard parity ─────────────────────
   §16.2: keep people in control. The baseline defines no
   :focus-visible, so keyboard users get only the UA default. */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: 1px;          /* hairline only — the design is square */
}

/* ── §14 Accessibility — three independent signals ───────────────

   Reduced motion does NOT mean no feedback. The baseline collapses
   every transition to 0.01ms, which removes the press acknowledgement
   and the hover affordance along with the movement. Here: drop the
   translation and the scale, keep opacity and colour. */

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] {
    transform: none;
    transition: opacity 200ms ease;
  }

  .solution-card:hover,
  .resource-grid article:hover {
    transform: none;
  }

  .button:active,
  .button-small:active,
  .button-light:active,
  .review-actions button:active,
  .text-link:active {
    transform: none;
    /* Retained, non-vestibular acknowledgement of the press. */
    opacity: 0.78;
  }
}

/* Translucency is a preference, not a given. */
@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--rule);
    box-shadow: none;
  }

  .utility-bar {
    background: var(--navy-deep);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .site-header {
    background: var(--white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--ink);
  }

  .solution-card,
  .resource-grid article {
    border-color: var(--ink);
  }

  a:focus-visible,
  button:focus-visible {
    outline-width: 3px;
  }
}