/* ==========================================================================
   Wizard Training — "Intelligence in Motion"
   Shared visual system + interaction layer.
   Loaded once site-wide by the Wizard Motion plugin. Elementor handles
   layout; this file supplies tokens, tone surfaces, type helpers,
   components (buttons, links, forms) and the effect hooks used by
   wizard.js. Every class is prefixed `wz-` so nothing collides with
   Elementor's own `e-` / `elementor-` classes.
   ========================================================================== */

/* Fonts (SIL Open Font Licence), served from this plugin */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/newsreader-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("../fonts/newsreader-latin-wght-italic.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/geist-latin-wght-normal.woff2") format("woff2"); }

:root {
  /* Palette (brief) */
  --wz-obsidian: #111310;
  --wz-porcelain: #F5F2EA;
  --wz-forest: #183F36;
  --wz-gold: #BEA477;
  --wz-sage: #D6DFCF;
  /* Derived — chosen for contrast, see Visual System */
  --wz-forest-deep: #0F2A24;   /* darker band for services/footer */
  --wz-gold-ink: #7A6338;      /* gold for TEXT on porcelain (5.1:1) */
  --wz-ink: #111310;
  --wz-ink-soft: #3E423B;      /* body on porcelain 9.2:1, on sage 7.5:1 */
  --wz-porcelain-soft: #B9B7AF;/* body on obsidian 9.4:1 */
  --wz-porcelain-2: #ECE8DC;   /* paper tint for document previews */

  /* Type */
  --wz-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --wz-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wz-fs-hero: clamp(3rem, 8vw, 9rem);
  --wz-fs-h1: clamp(2.6rem, 6vw, 6rem);
  --wz-fs-h2: clamp(2.2rem, 4.8vw, 4.75rem);
  --wz-fs-h3: clamp(1.45rem, 2.3vw, 2.15rem);
  --wz-fs-lead: clamp(1.1rem, 1.35vw, 1.35rem);
  --wz-fs-body: 1.0625rem;
  --wz-fs-small: .875rem;
  --wz-fs-label: .78rem;

  /* Space */
  --wz-gutter: clamp(1.25rem, 4vw, 4rem);
  --wz-section: clamp(5rem, 11vw, 10rem);
  --wz-max: 1440px;

  /* Motion */
  --wz-ease-out: cubic-bezier(.22, 1, .36, 1);
  --wz-ease-inout: cubic-bezier(.65, 0, .35, 1);
  --wz-t-fast: 200ms;
  --wz-t-panel: 420ms;
  --wz-t-reveal: 800ms;

  --wz-radius: 2px;
}

/* ---------- Tone surfaces (apply to an Elementor container) ----------- */
.wz-tone-dark, .wz-tone-forest, .wz-tone-light, .wz-tone-sage {
  --fg: var(--wz-porcelain);
  --fg-soft: var(--wz-porcelain-soft);
  --line: rgba(245, 242, 234, .16);
  --accent: var(--wz-gold);
  --label: var(--wz-gold);
  --btn-bg: var(--wz-porcelain);
  --btn-fg: var(--wz-obsidian);
  --btn-hover: var(--wz-gold);
  --focus: var(--wz-gold);
  color: var(--fg);
}
.wz-tone-dark   { background-color: var(--wz-obsidian); }
.wz-tone-forest { background-color: var(--wz-forest-deep); }
.wz-tone-light, .wz-tone-sage {
  --fg: var(--wz-ink);
  --fg-soft: var(--wz-ink-soft);
  --line: rgba(17, 19, 16, .16);
  --accent: var(--wz-forest);
  --label: var(--wz-gold-ink);
  --btn-bg: var(--wz-obsidian);
  --btn-fg: var(--wz-porcelain);
  --btn-hover: var(--wz-forest);
  --focus: var(--wz-forest);
}
.wz-tone-light { background-color: var(--wz-porcelain); }
.wz-tone-sage  { background-color: var(--wz-sage); --label: var(--wz-forest); }

/* ---------- Typography helpers --------------------------------------- */
.wz-label {
  font: 500 var(--wz-fs-label)/1.4 var(--wz-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--label, var(--wz-gold-ink));
}
.wz-display, .wz-h1, .wz-h2, .wz-h3 {
  font-family: var(--wz-serif);
  font-weight: 400;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0;
}
.wz-display { font-size: var(--wz-fs-hero); line-height: .98; letter-spacing: -.025em; }
.wz-h1 { font-size: var(--wz-fs-h1); line-height: 1.02; }
.wz-h2 { font-size: var(--wz-fs-h2); line-height: 1.04; letter-spacing: -.015em; }
.wz-h3 { font-size: var(--wz-fs-h3); line-height: 1.12; letter-spacing: -.005em; font-weight: 500; }
.wz-display em, .wz-h1 em, .wz-h2 em, .wz-h3 em { font-style: italic; }
.wz-lead { font: 400 var(--wz-fs-lead)/1.55 var(--wz-sans); color: var(--fg-soft); max-width: 36em; text-wrap: pretty; }
.wz-body { font: 400 var(--wz-fs-body)/1.65 var(--wz-sans); color: var(--fg-soft); max-width: 65ch; }
.wz-num { font: 400 .95rem/1 var(--wz-serif); font-style: italic; color: var(--label); font-variant-numeric: lining-nums tabular-nums; }
.wz-rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- Buttons --------------------------------------------------
   Markup: <a class="wz-btn wz-magnetic"><span class="wz-btn__inner">Label
   <span class="wz-btn__arrow" aria-hidden="true">→</span></span></a>
   The magnetic effect moves .wz-btn__inner only; the hit area never moves. */
.wz-btn {
  --b-bg: var(--btn-bg); --b-fg: var(--btn-fg); --b-bd: transparent;
  position: relative; display: inline-flex; align-items: stretch;
  min-height: 3.25rem; padding: 0; border: 1px solid var(--b-bd);
  background: var(--b-bg); color: var(--b-fg);
  font: 500 .95rem/1 var(--wz-sans); letter-spacing: .01em;
  text-decoration: none; border-radius: var(--wz-radius); cursor: pointer;
  overflow: hidden; isolation: isolate;
  transition: color var(--wz-t-fast) var(--wz-ease-out), border-color var(--wz-t-fast) var(--wz-ease-out);
}
.wz-btn::before { /* fill that sweeps in from the left */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-hover); transform: scaleX(0); transform-origin: left;
  transition: transform 380ms var(--wz-ease-out);
}
.wz-btn__inner {
  display: inline-flex; align-items: center; gap: .9rem; padding: 0 1.5rem;
  transition: transform 300ms var(--wz-ease-out);
}
.wz-btn__arrow { display: inline-block; transition: transform 300ms var(--wz-ease-out); }
.wz-btn:hover::before { transform: scaleX(1); }
.wz-btn:hover .wz-btn__arrow { transform: translateX(.3rem); }
.wz-btn:active .wz-btn__inner { transform: scale(.97); transition-duration: 120ms; }
.wz-tone-dark .wz-btn:hover, .wz-tone-forest .wz-btn:hover { color: var(--wz-obsidian); }
.wz-btn--ghost { --b-bg: transparent; --b-fg: var(--fg); --b-bd: var(--line); }
.wz-btn--ghost::before { background: var(--fg); }
.wz-btn--ghost:hover { color: var(--btn-fg); border-color: var(--fg); }
.wz-tone-dark .wz-btn--ghost:hover, .wz-tone-forest .wz-btn--ghost:hover { color: var(--wz-obsidian); }

/* ---------- Links with animated underline ----------------------------- */
.wz-link {
  color: inherit; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left 100% / 0 1px no-repeat;
  transition: background-size 320ms var(--wz-ease-out);
  padding-bottom: 2px;
}
.wz-link:hover, .wz-link[aria-current="page"] { background-size: 100% 1px; }

/* ---------- Focus (never removed) ------------------------------------- */
.wz-site :focus-visible, [class*="wz-tone"] :focus-visible {
  outline: 2px solid var(--focus, var(--wz-gold));
  outline-offset: 3px;
  border-radius: var(--wz-radius);
}

/* ---------- Forms (also styles Elementor Pro Form via .wz-form) ------- */
.wz-form { display: grid; gap: 1.25rem; }
.wz-field { display: grid; gap: .45rem; min-width: 0; }
.wz-field label, .wz-form .elementor-field-label {
  font: 500 .8rem/1.3 var(--wz-sans); letter-spacing: .04em; color: var(--fg);
}
.wz-input, .wz-form .elementor-field-textual {
  width: 100%; min-height: 3rem; padding: .75rem .9rem;
  font: 400 1rem/1.4 var(--wz-sans); color: var(--fg);
  background: transparent; border: 1px solid var(--line); border-radius: var(--wz-radius);
  transition: border-color var(--wz-t-fast), box-shadow var(--wz-t-fast), background-color var(--wz-t-fast);
}
.wz-input:hover { border-color: color-mix(in srgb, var(--fg) 45%, transparent); }
.wz-input:focus, .wz-input:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
.wz-input[aria-invalid="true"] { border-color: #A3412F; box-shadow: 0 0 0 3px rgba(163, 65, 47, .18); }
.wz-tone-dark .wz-input[aria-invalid="true"], .wz-tone-forest .wz-input[aria-invalid="true"] { border-color: #E59A85; }
.wz-error { font: 400 .8rem/1.4 var(--wz-sans); color: #9A3A28; min-height: 0; }
.wz-tone-dark .wz-error, .wz-tone-forest .wz-error { color: #F0B4A3; }
.wz-demo-note {
  display: flex; gap: .6rem; align-items: flex-start;
  font: 500 .82rem/1.45 var(--wz-sans); color: var(--fg);
  padding: .75rem .9rem; border: 1px dashed var(--line); border-radius: var(--wz-radius);
}
.wz-demo-note::before { content: ""; flex: none; width: .5rem; height: .5rem; margin-top: .35rem; border-radius: 50%; background: var(--accent); }
.wz-status[data-state="demo"] { border-style: solid; border-color: var(--accent); }

/* ---------- Platform badges & logo slots ------------------------------
   <span class="wz-plat"><span class="wz-logo" data-logo="chatgpt" aria-hidden="true"></span>ChatGPT</span>
   A .wz-logo shows the official logo file when one has been approved and
   added (Settings → Wizard Motion); otherwise it shows a small dot, so the
   badge always reads as a clean name label. Logos are never recoloured. */
.wz-plat {
  display: inline-flex; align-items: center; gap: .5rem; vertical-align: middle;
  min-height: 2rem; padding: .3rem .8rem .3rem .55rem;
  font: 500 .85rem/1 var(--wz-sans); letter-spacing: .01em; text-transform: none; white-space: nowrap;
  color: var(--fg, currentColor); border: 1px solid var(--line, currentColor); border-radius: 99px;
}
.wz-plat--on-art { color: var(--wz-porcelain); background: rgba(17, 19, 16, .62); border-color: rgba(245, 242, 234, .22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.wz-logo { display: inline-grid; place-items: center; flex: none; width: 1.15em; height: 1.15em; }
.wz-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.wz-logo:empty::before { content: ""; width: .42em; height: .42em; border-radius: 50%; background: currentColor; opacity: .75; }
.wz-logo--lg { width: 3.25rem; height: 3.25rem; }
.wz-logo--lg:empty::before { width: .7rem; height: .7rem; }

/* ---------- Effect hooks ------------------------------------------------ */
/* Headline line masks (wz-lines splits on <br>) */
.wz-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.wz-line__inner { display: block; will-change: transform; }

/* Contour drift: wrap the SVG in .wz-contours */
.wz-contours { position: absolute; inset: 0; overflow: hidden; pointer-events: none; color: var(--fg); }
.wz-contours svg { position: absolute; inset: -12%; width: 124%; height: 124%; opacity: .14;
  animation: wz-drift 38s var(--wz-ease-inout) infinite alternate; will-change: transform; }
@keyframes wz-drift {
  from { transform: translate3d(-2%, -1%, 0) rotate(-1.5deg); }
  to   { transform: translate3d(2%, 1.5%, 0) rotate(1.5deg); }
}
/* Film grain overlay */
.wz-grain { position: relative; }
.wz-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Soft light that slowly moves */
.wz-glow { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(190, 164, 119, .16), rgba(24, 63, 54, .10) 45%, transparent 70%);
  animation: wz-glow 26s var(--wz-ease-inout) infinite alternate; }
@keyframes wz-glow { from { transform: translate3d(-6%, -4%, 0) scale(1); } to { transform: translate3d(6%, 5%, 0) scale(1.12); } }

/* Ribbon canvas host (hero) */
.wz-ribbon { position: absolute; inset: 0; pointer-events: none; }
.wz-ribbon canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wz-ribbon__poster, .wz-ribbon__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.wz-ribbon__poster { transition: opacity 900ms var(--wz-ease-out); }
.wz-ribbon.is-live .wz-ribbon__poster { opacity: 0; }
.wz-ribbon:has(.wz-ribbon__poster):not(.is-live) canvas { visibility: hidden; }

/* Paused when off-screen or tab hidden (set by wizard.js) */
.wz-paused, .wz-paused * { animation-play-state: paused !important; }

/* Scroll cue */
.wz-scroll-cue { display: inline-flex; align-items: center; gap: .75rem; color: var(--fg-soft); text-decoration: none; font: 500 var(--wz-fs-label)/1 var(--wz-sans); letter-spacing: .2em; text-transform: uppercase; }
.wz-scroll-cue i { position: relative; width: 1px; height: 2.75rem; background: var(--line); overflow: hidden; }
.wz-scroll-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--accent); animation: wz-cue 2.4s var(--wz-ease-inout) infinite; }
@keyframes wz-cue { to { top: 100%; } }

/* Drawn paths */
.wz-draw { fill: none; }

/* Accordion */
.wz-acc { border-top: 1px solid var(--line); }
.wz-acc:last-child { border-bottom: 1px solid var(--line); }
.wz-acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 0; }
.wz-acc summary::-webkit-details-marker { display: none; }
.wz-acc summary .wz-acc__icon { position: relative; flex: none; width: 1rem; height: 1rem; }
.wz-acc summary .wz-acc__icon::before, .wz-acc summary .wz-acc__icon::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: currentColor; transition: transform var(--wz-t-panel) var(--wz-ease-out); }
.wz-acc summary .wz-acc__icon::after { transform: rotate(90deg); }
.wz-acc[open] summary .wz-acc__icon::after { transform: rotate(0deg); }
.wz-acc__body { overflow: hidden; }

/* ---------- Reduced motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wz-contours svg, .wz-glow, .wz-scroll-cue i::after { animation: none !important; }
  .wz-btn::before, .wz-btn__inner, .wz-btn__arrow, .wz-link { transition-duration: 1ms !important; }
}
html.wz-reduced .wz-contours svg, html.wz-reduced .wz-glow, html.wz-reduced .wz-scroll-cue i::after { animation: none !important; }
html.wz-reduced .wz-btn::before, html.wz-reduced .wz-btn__inner, html.wz-reduced .wz-btn__arrow { transition-duration: 1ms !important; }

/* The hidden attribute must win over display rules (tabs, filters, dialogs) */
[hidden] { display: none !important; }

/* Skip link */
.wz-skip { position: absolute; left: 1rem; top: -4rem; z-index: 1000; padding: .75rem 1rem; background: var(--wz-porcelain); color: var(--wz-obsidian); font: 500 .9rem var(--wz-sans); text-decoration: none; }
.wz-skip:focus { top: 1rem; }
.wz-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }