/* =============================================================================
   ideomotion.com — hub page styles (v1)
   Minimal "artist page": a white-framed slideshow fills the first screen on a
   soft neutral-gray canvas; scroll down to a modern inquiry section.
   Tokens come from tokens.css (loaded first).
   ============================================================================= */

/* Hub-local additions on top of the shared, shop-aligned tokens. Kept here so
   we don't fork the canonical token file. */
:root {
  --color-canvas: #FFFFFF;              /* clean white page background */
  --frame-mat: clamp(14px, 2.4vw, 30px); /* white mat thickness around image */
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; }

/* ========================== First screen ================================== */
/* Header + slideshow + scroll cue fill the viewport, so the inquiry section
   sits just below the fold. svh keeps it honest on mobile browser chrome. */
.screen {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-5);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-line);
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-lg);
  letter-spacing: 0.01em;
  color: var(--color-ink);
  text-decoration: none;
}
.wordmark-sm { font-size: var(--fs-base); }

/* ---------------------------------- Nav ----------------------------------- */
.site-nav {
  display: flex;
  gap: var(--space-5);
}
.site-nav a {
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  text-decoration: none;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-nav a:hover { color: var(--color-ink); }
.site-nav a[aria-current="page"] { color: var(--color-ink); }

/* ------------------------------ Centerpiece ------------------------------- */
.stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-5);
}
/* Width capped by viewport height too (84svh → 3:2 image height ≈ 56svh), so
   the header, caption, controls AND the scroll cue always fit on the first
   screen — the cue never gets pushed below the fold. */
.slideshow { width: min(760px, 92vw, 84svh); }

/* White mat/frame around the image */
.frame {
  background: #fff;
  padding: var(--frame-mat);
  box-shadow: var(--shadow-lg);
}

/* Picture area — adapts to each slide's native aspect ratio. */
.slides {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--color-surface-soft);
}
.slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
  pointer-events: none;
}
/* The active slide flows in-document so the container sizes to it. */
.slide.is-active { position: relative; opacity: 1; pointer-events: auto; }
.slide img { width: 100%; height: auto; display: block; }

/* ------------------------------- Controls --------------------------------- */
.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.slide-arrow {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.slide-arrow:hover { color: var(--color-ink); }
.slide-arrow svg { width: 1.4rem; height: 1.4rem; }

.slide-dots { display: flex; gap: var(--space-3); }
.slide-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--color-ink-soft);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.slide-dot[aria-selected="true"] { background: var(--color-ink); box-shadow: none; }

/* -------------------------------- Caption --------------------------------- */
.caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-5) 0 0;
  font-size: var(--fs-sm);
}
.caption-name {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--color-ink);
}
.caption-link { color: var(--color-ink-muted); text-decoration: none; }
.caption-link:hover { color: var(--color-ink); }

/* ------------------------------- Scroll cue ------------------------------- */
.scroll-cue {
  align-self: center;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
  padding: var(--space-2);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.scroll-cue:hover { color: var(--color-ink); }

/* Chevron in a circular "button" ring that bounces — an obvious scroll-down. */
.cue-ring {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  color: var(--color-ink-soft);
  animation: nudge 1.5s var(--ease-out) infinite;
}
.scroll-cue:hover .cue-ring { color: var(--color-ink); }
.cue-ring svg { width: 1.15rem; height: 1.15rem; }
@keyframes nudge {
  0%, 100% { transform: translateY(-4px); }
  50%      { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .cue-ring { animation: none; }
}

/* ========================== Inquiry section =============================== */
.inquire {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-9) var(--space-5);
}
.inquire-card {
  width: min(100%, 540px);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(var(--space-6), 5vw, var(--space-8));
  text-align: center;
}
.eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-3);
}
.inquire-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3);
}
.inquire-lead {
  color: var(--color-ink-muted);
  font-size: var(--fs-sm);
  margin: 0 auto var(--space-6);
  max-width: 36ch;
}

/* Checkbox field — tactile custom checkbox */
.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  padding: 0.9em 1em;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.checkbox-field:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}
.checkbox-field input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  border: 2px solid var(--color-ink-soft);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  position: relative;
  margin-top: 0.1em;
  transition: all var(--dur-fast) var(--ease-out);
}
.checkbox-field input[type="checkbox"]:checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.checkbox-field input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checkbox-label {
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  line-height: var(--lh-snug);
}

/* Form — modern, soft, monochrome to match the artist-page aesthetic */
.inquire-form { display: grid; gap: var(--space-4); text-align: left; }
.field { display: grid; gap: var(--space-2); }
.field-label {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.inquire-form input,
.inquire-form textarea {
  width: 100%;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--color-ink);
  background: var(--color-surface-soft);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 0.8em 0.95em;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.inquire-form textarea { resize: vertical; min-height: 6.5rem; }
.inquire-form input::placeholder,
.inquire-form textarea::placeholder { color: var(--color-ink-soft); }
.inquire-form input:focus,
.inquire-form textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--color-ink);
  box-shadow: 0 0 0 3px rgba(14, 20, 22, 0.08);
}

.btn-send {
  justify-self: stretch;
  font: inherit;
  font-weight: 500;
  font-size: var(--fs-sm);
  color: #fff;
  background: var(--color-ink);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.9em 1.4em;
  margin-top: var(--space-1);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn-send:hover { background: #000; transform: translateY(-1px); }
.btn-send:active { transform: none; }

/* Honeypot — visually hidden but still in the DOM for bots to fill.
   Scoped under .inquire-form to outrank the `.inquire-form input` field styles. */
.inquire-form .hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.form-note {
  margin: var(--space-1) 0 0;
  min-height: 1.2em;
  font-size: var(--fs-xs);
  color: var(--color-ink-muted);
  text-align: center;
}
.form-note.is-error { color: var(--color-accent-deep); }

/* Inline thank-you shown after a successful background submit */
.inquire-success { text-align: center; }
.inquire-success-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-lg);
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}
.inquire-success-body {
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  margin: 0;
}

.inquire-alt {
  margin: var(--space-6) 0 0;
  font-size: var(--fs-xs);
  color: var(--color-ink-soft);
}
.inquire-alt a { color: var(--color-ink-muted); text-decoration: underline; text-underline-offset: 2px; }
.inquire-alt a:hover { color: var(--color-ink); }

/* ============================== Page layout =============================== */
.page {
  max-width: var(--width-narrow);
  margin: 0 auto;
  padding: var(--space-8) var(--space-5) var(--space-9);
}

.page-hero {
  text-align: center;
  margin-bottom: var(--space-8);
}
.page-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(var(--fs-h2), 5vw, var(--fs-h1));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
}
.page-lead {
  font-size: var(--fs-lg);
  color: var(--color-ink-muted);
  max-width: 50ch;
  margin: 0 auto;
  line-height: var(--lh-body);
}

/* Content cards — white panels on the gray canvas */
.content-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(var(--space-6), 5vw, var(--space-8));
  margin-bottom: var(--space-6);
}
.content-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
}
.content-card p {
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-4);
  max-width: var(--width-text);
}
.content-card p:last-child { margin-bottom: 0; }

/* Team grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}
.team-member { text-align: center; }
.team-name {
  font-weight: 500;
  color: var(--color-ink);
  margin: 0 0 var(--space-1);
}
.team-role {
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  margin: 0;
}

/* Primary button (used on inner pages) */
.btn-primary {
  display: inline-block;
  font: inherit;
  font-weight: 500;
  font-size: var(--fs-sm);
  color: #fff;
  background: var(--color-ink);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.9em 2em;
  margin-top: var(--space-4);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn-primary:hover { background: #000; transform: translateY(-1px); }
.btn-primary:active { transform: none; }

/* --------------------------------- Footer --------------------------------- */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-6) var(--space-5);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

/* ----------------------------- Scroll reveal ------------------------------ */
/* Hidden initial state is gated behind .js (added by the script). If JS never
   runs, .reveal stays fully visible — the inquiry box is never trapped hidden. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------ Focus state ------------------------------- */
a:focus-visible,
button:focus-visible,
.slide-dot:focus-visible,
.wordmark:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}
.inquire-form input:focus-visible,
.inquire-form textarea:focus-visible { outline: none; }

/* --------------------------- Reduced motion ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }
  .btn-send:hover { transform: none; }
}