/* ============================================================
   Ragno v4 — theme tokens + overrides for the toggle page
   (iterations/v4/index.html). Foundry is the default theme;
   [data-theme="linear"] swaps tokens and applies the
   Linear-light component treatments (rescoped from palette/linear.css).
   ============================================================ */

/* ---------------- FOUNDRY (default: black & gold) ---------------- */
:root,
:root[data-theme="foundry"] {
  --bg:        #0C0C0C;
  --raise:     #14140F;
  --text:      #F0EDE6;
  --muted:     rgba(240, 237, 230, 0.62);
  --accent:    #C8A96E;
  --accent-2:  #C8A96E;
  --on-accent: #0C0C0C;
  --hairline:  rgba(240, 237, 230, 0.12);

  --mark-line: #C8A96E;
  --mark-fill: #F0EDE6;

  --web-thread:       rgba(240, 237, 230, 0.5);
  --web-thread-inner: rgba(240, 237, 230, 0.28);
  --web-stitch:       rgba(240, 237, 230, 0.35);
  --web-center:       rgba(240, 237, 230, 0.95);

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, monospace;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;
  --tracking-display: -0.02em;

  --card-radius: 10px;
  --btn-radius: 999px;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 240ms;
  --dur-med:  600ms;
  --dur-slow: 1200ms;
}

/* ---------------- LINEAR-LIGHT (blue & white SaaS) ---------------- */
:root[data-theme="linear"] {
  --bg:        #FAFBFE;
  --raise:     #FFFFFF;
  --text:      #0A0F1E;
  --muted:     #5A6478;
  --accent:    #0053BC;
  --accent-2:  #4D9FFF;
  --on-accent: #FFFFFF;
  --hairline:  rgba(10, 15, 30, 0.08);
  --nav-bg:    rgba(250, 251, 254, 0.65);

  --mark-line: #0053BC;
  --mark-fill: #0A0F1E;

  --web-thread:       rgba(0, 83, 188, 0.42);
  --web-thread-inner: rgba(0, 83, 188, 0.24);
  --web-stitch:       rgba(0, 83, 188, 0.32);
  --web-center:       rgba(0, 83, 188, 0.75);

  --font-display: 'Inter', system-ui, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, monospace;
  --font-body:    'Inter', system-ui, sans-serif;
  --tracking-display: -0.03em;

  --card-radius: 18px;
}

/* linear theme: gradient wash behind the hero */
[data-theme="linear"] .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(77, 159, 255, 0.14), transparent 70%),
    radial-gradient(40% 35% at 50% 55%, rgba(0, 83, 188, 0.08), transparent 70%);
  pointer-events: none;
}

[data-theme="linear"] .hero__word {
  font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, var(--text) 60%, rgba(10, 15, 30, 0.55));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

[data-theme="linear"] .hero__sub { letter-spacing: 0.45em; color: var(--accent); }

/* linear theme: three identical work cards */
[data-theme="linear"] .card {
  box-shadow: 0 1px 2px rgba(10, 15, 30, 0.04), 0 8px 24px rgba(10, 15, 30, 0.05);
}

[data-theme="linear"] .card:hover {
  border-color: rgba(0, 83, 188, 0.35);
  box-shadow: 0 2px 4px rgba(10, 15, 30, 0.05), 0 16px 40px rgba(0, 83, 188, 0.12);
}

/* linear theme: pill buttons with soft shadow */
[data-theme="linear"] .btn--solid {
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0, 83, 188, 0.3), 0 6px 16px rgba(0, 83, 188, 0.25);
}

[data-theme="linear"] .btn--ghost {
  border-color: var(--hairline);
  color: var(--text);
  background: var(--raise);
}

[data-theme="linear"] .card__stack li {
  background: rgba(0, 83, 188, 0.05);
  border-color: rgba(0, 83, 188, 0.12);
  color: var(--accent);
}

@media (max-width: 900px) {
  [data-theme="linear"] .work__grid { grid-template-columns: 1fr; }
  [data-theme="linear"] .card:first-child { grid-row: auto; }
}

/* ---------------- statement + pain web ---------------- */
.statement-block__wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(32px, 6vw, 80px);
}

.statement-block__web canvas {
  width: 100%;
  aspect-ratio: 1;
  max-width: 440px;
  margin-left: auto;
  display: block;
}

.statement-block__caption {
  margin: 8px 0 0;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 900px) {
  .statement-block__wrap { grid-template-columns: 1fr; }
  .statement-block__web canvas { margin: 0 auto; }
  .statement-block__caption { text-align: center; }
}

/* ---------------- theme toggle button (fixed bottom-left) ---------------- */
.theme-toggle {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 60;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 900px) {
  .nav { padding: 12px 16px; }
  .nav__links { gap: 14px; }
  .theme-toggle { padding: 7px 10px; }
  .theme-toggle__label { display: none; }
}

/* ---------------- section separation ---------------- */
/* alternating bands + consistent rhythm so each section reads
   as its own chapter; tints come from per-theme tokens */
:root, :root[data-theme="foundry"] { --band: #0F0E0B; }
:root[data-theme="linear"]        { --band: #F0F4FB; }

main .block { border-top: 1px solid var(--hairline); }

main .block:nth-of-type(odd) { background: var(--band); }

/* ---------------- smooth scroll reveals ---------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}

.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* smooth theme swap */
body, .card, .btn, .nav, .hero__word, .kicker, .statement, .footer {
  transition: background-color 300ms var(--ease-out),
              color 300ms var(--ease-out),
              border-color 300ms var(--ease-out);
}

/* ---------------- work cards: vertical stack, footage-first ---------------- */
/* one wide card per row; the info panel hides below the fold of the card
   and slides up on hover/focus, so the footage fills the card at rest.
   text + scrim are hardcoded light-over-dark so they read in both themes */
.work__grid { grid-template-columns: 1fr; }

.card {
  position: relative;
  display: block;
  aspect-ratio: 21 / 9;
  min-height: 400px;
  overflow: hidden;
}

.card__media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-bottom: none;
}

.card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 26px 24px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.88));
  transform: translateY(calc(100% - 92px)); /* peek: num + name stay visible */
  transition: transform 500ms var(--ease-out);
}

.card:hover .card__body,
.card:focus-within .card__body { transform: none; }

.card .card__num  { color: var(--accent); }
.card .card__name { color: #F0EDE6; }
.card .card__kind { color: rgba(240, 237, 230, 0.7); }
.card .card__blurb { color: rgba(240, 237, 230, 0.78); }

.card .card__stack li {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
  color: #F0EDE6;
}

/* touch devices have no hover: keep the panel open */
@media (hover: none) {
  .card__body { transform: none; }
}

/* cards are anchors now (link to the case-study pages) */
a.card { text-decoration: none; color: inherit; }

.card__cta {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 900px) {
  .card { aspect-ratio: 16 / 11; min-height: 340px; }
  .card__body { padding: 16px 20px 20px; transform: translateY(calc(100% - 84px)); }
}

@media (hover: none) and (max-width: 900px) {
  .card__body { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .card__body { transition: none; }
}