/* ========================================================================
   AI ASSESSMENT LANDING PAGE
   Loads only on page-assessment.php. See ironworks_assessment_assets().

   Hand-written in the theme's idiom: every colour, font, radius and shadow
   comes from the :root block in style.css, and the .btn, .kicker,
   .iw-blueprint-dark and .iw-ember-glow classes are the site's own.

   THE TWO STYLESHEETS ON THIS PAGE DO NOT MIX. The React picker ships its own
   Tailwind-compiled sheet and owns everything inside #iw-assessment-picker.
   This file owns the page sections and never selects into that subtree. Every
   rule below is prefixed .iw-assess or .iw-assessment-page, so nothing here can
   reach the picker and nothing on the rest of the site can reach these.

   Mobile first. Most ad traffic is mobile, so the base rules are the phone
   layout and the media queries add columns rather than remove them.
   ======================================================================== */

.iw-assess {
  /* Locals the base theme does not publish. Values are the live tokens the
     Next.js app measured off this stylesheet, pre-blended against navy so no
     rule below needs an alpha channel to sit on a dark ground. */
  --iw-line: #26263A;
  --iw-line-strong: #3A3A55;
  --iw-copper-line: #463122;
  --iw-copper-wash: #241C14;
  --iw-panel: #171728;
  --iw-mist: #BEBEC1;      /* body, 10.4:1 on navy-3 */
  --iw-mist-dim: #8A8A90;  /* meta and hints, 5.6:1 on navy-3 */

  background: var(--navy-3);
}

/* ── Layout primitives ──────────────────────────────────────────────────── */

.iw-assess__inner {
  position: relative;
  z-index: 1;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 var(--gutter-x);
}

.iw-assess-sec {
  position: relative;
  overflow: hidden;
  padding: 64px 0;
  background: var(--navy-3);
  border-bottom: 1px solid var(--iw-line);
}
.iw-assess-sec--navy { background: var(--navy-2); }
.iw-assess-sec--narrow .iw-assess__inner { max-width: 780px; }

.iw-assess-sec__grid,
.iw-assess-hero__grid,
.iw-assess-stat__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ── Type scale ─────────────────────────────────────────────────────────── */

.iw-assess-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 6vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--off);
  max-width: 22ch;
}

.iw-assess-lede {
  margin-top: 20px;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--iw-mist);
}

.iw-assess-closer {
  margin-top: 40px;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--off);
}

/* Buttons inherit .btn from style.css. This only guarantees the 44px target
   the theme's 15px padding lands just under on a phone, and lets a long label
   wrap instead of overflowing a 320px viewport. */
.iw-assess-btn {
  min-height: 48px;
  white-space: normal;
  text-align: left;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.iw-assess-hero {
  position: relative;
  overflow: hidden;
  padding: 64px 0 72px;
  background: var(--navy-3);
  border-bottom: 1px solid var(--iw-line);
}

.iw-assess-hero__title {
  margin-top: 8px;
  max-width: 19ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 9vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--off);
}

.iw-assess-hero__sub {
  margin-top: 26px;
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.55;
  color: var(--iw-mist);
}

.iw-assess-hero__actions {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.iw-assess-hero__note {
  margin-top: 26px;
  font-size: 14px;
  color: var(--iw-mist-dim);
}

/* ── The picker ─────────────────────────────────────────────────────────── */

.iw-assess-picker { margin-top: 36px; }

/* The mount point. The bundle owns everything inside it; this rule only gives
   React somewhere to land. */
#iw-assessment-picker { min-height: 0; }

/* The server-rendered fallback, and the whole reason the page degrades sanely.
   It is painted by PHP, so it is on screen before a byte of JavaScript runs; it
   disappears the instant the picker puts anything in the mount point. That test
   is a CSS sibling selector rather than a class the bundle has to remember to
   set, so the two agents share no runtime handshake — and if the bundle never
   loads, never parses, or throws on mount, the visitor still gets a way to
   reach us. Requires the mount div to contain NO whitespace, which is why the
   template writes it as a single empty tag. */
#iw-assessment-picker:not(:empty) + .iw-assess-picker__fallback { display: none; }

.iw-assess-picker__fallback {
  padding: 28px 24px;
  border: 1px solid var(--iw-copper-line);
  border-left: 3px solid var(--copper);
  border-radius: var(--radius);
  background: var(--iw-copper-wash);
}
.iw-assess-picker__fallback-heading {
  font-size: 18px;
  font-weight: 600;
  color: var(--off);
}
.iw-assess-picker__fallback-body {
  margin-top: 10px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--iw-mist);
}
.iw-assess-picker__fallback .btn { margin-top: 22px; }

/* ── Stat hero ──────────────────────────────────────────────────────────── */

.iw-assess-stat {
  border-top: 1px solid var(--iw-copper-line);
  border-bottom: 1px solid var(--iw-copper-line);
}

.iw-assess-stat__pair {
  display: grid;
  gap: 32px;
  margin-top: 8px;
  /* The figures carry the weight; the h2 itself sets nothing. */
  font-weight: 400;
  letter-spacing: normal;
  line-height: normal;
}

.iw-assess-stat__half { display: block; }

/* The second figure takes a copper hairline that reads as the gap between the
   two numbers. On a phone it is a top rule; at two columns it moves to the left
   edge, so the divider never sits across the reading direction. */
.iw-assess-stat__half--second {
  padding-top: 32px;
  border-top: 1px solid var(--iw-copper-line);
}

.iw-assess-stat__figure {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(56px, 13vw, 88px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--off);
}
.iw-assess-stat__figure--copper { color: var(--copper); }

.iw-assess-stat__label {
  display: block;
  margin-top: 16px;
  max-width: 24ch;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--off);
}
.iw-assess-stat__label--dim { color: var(--iw-mist); }

.iw-assess-stat__line {
  margin-top: 44px;
  max-width: 68ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--iw-mist);
}

/* ── Our thoughts ───────────────────────────────────────────────────────── */

.iw-assess-thoughts {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  gap: 40px;
}

.iw-assess-thought__frame {
  overflow: hidden;
  padding: 16px;
  border: 1px solid var(--iw-line);
  border-radius: var(--radius);
  background: var(--iw-panel);
}
.iw-assess-viz { width: 100%; height: auto; }

.iw-assess-thought__title {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--iw-copper-line);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--off);
}
.iw-assess-thought__body {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--iw-mist);
}

/* ── The ask ────────────────────────────────────────────────────────────── */

.iw-assess-cta {
  background: var(--navy-2);
  border-top: 1px solid var(--iw-copper-line);
  border-bottom: 1px solid var(--iw-copper-line);
}

.iw-assess-cta__title {
  max-width: 20ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 7.5vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--off);
}
.iw-assess-cta__sub {
  margin-top: 24px;
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.55;
  color: var(--iw-mist);
}
.iw-assess-cta__btn { margin-top: 32px; }

/* ── Where it does work ─────────────────────────────────────────────────── */

.iw-assess-where {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.iw-assess-where__card {
  padding: 24px;
  border: 1px solid var(--iw-line);
  border-left: 3px solid var(--copper);
  border-radius: var(--radius);
  background: var(--iw-panel);
  transition: border-color .15s ease;
}
.iw-assess-where__card:hover { border-left-color: var(--copper-hot); }

.iw-assess-where__label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--copper-hot);
}
.iw-assess-where__body {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--iw-mist);
}

/* ── The thirty minutes ─────────────────────────────────────────────────── */

.iw-assess-steps {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  gap: 32px;
  counter-reset: none;
}

.iw-assess-step {
  padding-top: 24px;
  border-top: 1px solid var(--iw-copper-line);
}
.iw-assess-step__n {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--copper-hot);
}
.iw-assess-step__title {
  margin-top: 12px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--off);
}
.iw-assess-step__body {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--iw-mist);
}

.iw-assess-offer__cta { margin-top: 32px; }

/* ── Reasonable questions ───────────────────────────────────────────────── */

.iw-assess-qa {
  margin-top: 36px;
  border-top: 1px solid var(--iw-line);
  border-bottom: 1px solid var(--iw-line);
}
.iw-assess-qa__item + .iw-assess-qa__item { border-top: 1px solid var(--iw-line); }

.iw-assess-qa__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  /* 44px minimum target, met by padding rather than a height, so a two-line
     question grows the row instead of clipping it. */
  padding: 14px 0;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--off);
}
.iw-assess-qa__q::-webkit-details-marker { display: none; }
.iw-assess-qa__q::marker { content: ""; }

.iw-assess-qa__mark {
  flex: none;
  margin-top: 2px;
  font-family: var(--font-mono);
  color: var(--copper-hot);
  transition: transform .15s ease;
}
.iw-assess-qa__item[open] .iw-assess-qa__mark { transform: rotate(45deg); }

.iw-assess-qa__a {
  padding-bottom: 18px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--iw-mist);
}

/* ── Wider viewports ────────────────────────────────────────────────────── */

@media (min-width: 640px) {
  .iw-assess-hero__actions { flex-direction: row; align-items: center; }
  .iw-assess-btn { white-space: nowrap; }

  .iw-assess-stat__pair { grid-template-columns: 1fr 1fr; gap: 48px; }
  .iw-assess-stat__half--second {
    padding-top: 0;
    padding-left: 48px;
    border-top: 0;
    border-left: 1px solid var(--iw-copper-line);
  }

  .iw-assess-where { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .iw-assess-hero { padding: 104px 0 112px; }
  .iw-assess-sec { padding: 96px 0; }

  .iw-assess-thoughts { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .iw-assess-steps { grid-template-columns: repeat(3, 1fr); }
}

/* ── Footer, on this template only ──────────────────────────────────────── */

/* The global footer CTA is suppressed here (see ironworks_assessment_assets()),
   which leaves the link columns floating below 120px of padding plus their own
   100px top margin. Close the gap so the footer reads as a footer rather than
   as a section that lost its content. Scoped to the body class this template
   adds, so no other page moves. */
.iw-assessment-page .site-footer { padding-top: 56px; }
.iw-assessment-page .site-footer__columns { margin-top: 0; }

/* ── Motion for the thoughts drawings ───────────────────────────────────────
   Read inc/assessment-visuals.php before changing any of this.

   Three constraints hold every keyframe below:

   1. Nothing here makes content visible. Each animation moves an element PHP
      already printed at full opacity, so a browser that ignores the whole block
      loses a texture and no words.
   2. The prefers-reduced-motion block at the end stops all of it, because all
      of it is CSS. It could not stop a JS loop, so none of these is one.
   3. Reduced motion freezes an animation on its 100% frame rather than deleting
      it, so every set below resolves to a resting frame that reads correctly
      standing still.

   Only transform, opacity, and stroke-dashoffset animate. Each composites on
   the GPU, none triggers layout, and the section costs no main-thread work
   while the picker above it is fetching. */

/* Colour utilities for the drawings. Names mirror the Tailwind classes the
   Next.js port used, so the two renderings stay diffable. */
.iw-assess .iw-s-copper { stroke: var(--copper); }
.iw-assess .iw-s-copper-hot { stroke: var(--copper-hot); }
.iw-assess .iw-s-copper-line { stroke: var(--iw-copper-line); }
.iw-assess .iw-s-line { stroke: var(--iw-line-strong); }
.iw-assess .iw-f-copper-hot { fill: var(--copper-hot); }
.iw-assess .iw-f-copper-wash { fill: var(--iw-copper-wash); }
.iw-assess .iw-f-navy3 { fill: var(--navy-3); }

/* The dashed guide lines, marching. Every consumer draws dasharray "6 8", a
   14-unit period, so 28 units of travel is two whole periods and the loop is
   seamless in both directions. */
.iw-assess .iw-viz-march { animation: iw-viz-march 3.2s linear infinite; }
@keyframes iw-viz-march {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -28; }
}

/* The carrier lapping the build/break/fix ring. The translate to the pivot is
   part of the keyframe because a CSS transform overrides the SVG transform
   attribute, and transform-box: view-box only lands on Safari 16.4 — the same
   boundary as the oklch bug this estate already works around. */
.iw-assess .iw-viz-orbit { animation: iw-viz-orbit 14s linear infinite; }
@keyframes iw-viz-orbit {
  from { transform: translate(120px, 80px) rotate(0deg); }
  to { transform: translate(120px, 80px) rotate(360deg); }
}

/* The sprout, swaying two degrees off its base. */
.iw-assess .iw-viz-sway { animation: iw-viz-sway 7s ease-in-out infinite; }
@keyframes iw-viz-sway {
  0%, 100% { transform: translate(50px, 88px) rotate(-2deg); }
  50% { transform: translate(50px, 88px) rotate(2deg); }
}

/* The ripple off the lit cell. It ends invisible, which is what reduced motion
   holds: the cell it rings is drawn in the markup and never depends on this. */
.iw-assess .iw-viz-pulse { animation: iw-viz-pulse 5s ease-out infinite; }
@keyframes iw-viz-pulse {
  0% { transform: translate(50px, 112px) scale(1); opacity: 0.45; }
  70%, 100% { transform: translate(50px, 112px) scale(1.7); opacity: 0; }
}

/* Tasks lifting off the plate. Negative delays start each card mid-cycle, so
   they drift apart on first paint instead of moving as one block. */
.iw-assess .iw-viz-lift { animation: iw-viz-lift 5.5s ease-in-out infinite; }
.iw-assess .iw-viz-lift-a { animation-delay: -0.4s; }
.iw-assess .iw-viz-lift-b { animation-delay: -2.2s; }
.iw-assess .iw-viz-lift-c { animation-delay: -3.7s; }
@keyframes iw-viz-lift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */

/* Every animation above resolves to a readable resting frame, so stopping them
   costs texture and nothing else. Scoped to this page's subtree: the picker's
   own stylesheet carries the same courtesy for its own controls. */
@media (prefers-reduced-motion: reduce) {
  .iw-assess *,
  .iw-assess *::before,
  .iw-assess *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}