/* Cathey House prototype: shared base. Each direction page sets its own tokens on :root
   and its own layout; this file holds only what all three share. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--selection, rgba(180, 154, 116, .35)); }

:root {
  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --gutter: clamp(16px, 4vw, 48px);
  --house-paper: var(--ground);
}

.wrap { width: min(1180px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---- reveal ---- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 900ms var(--ease-soft), transform 1100ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal="scale"] { transform: scale(.97); }

/* ---- svg draw-on ---- */
[data-draw] svg { width: 100%; height: auto; display: block; overflow: visible; }
[data-draw] .h-fine { stroke-width: .7; opacity: .7; }
[data-draw].draw-primed svg * {
  transition: stroke-dashoffset var(--draw-dur, 1400ms) var(--ease-soft) var(--draw-delay, 0ms);
}
[data-draw].draw-primed .h-siding,
[data-draw].draw-primed svg [fill^="var"] { transition-property: stroke-dashoffset, fill-opacity; }
[data-draw].is-in svg * { stroke-dashoffset: 0 !important; }

/* ---- motion off ---- */
.motion-off *, .motion-off *::before, .motion-off *::after { transition: none !important; animation: none !important; }
.motion-off [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---- prototype stand-in note ---- */
.standin-note { font: 12px/1.4 system-ui, sans-serif; opacity: .55; text-align: center; padding: 16px; }

/* ---- skip link ---- */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: #fff; padding: 8px 12px; }

/* ---- "Site designed by ANGL Works" footer credit (Nathan, 2026-10-08: "remove the underline...
   on hover it should highlight, no underline, show arrow. thats it.") ----
   The arrow sits outside the text, so nothing shifts, and carries width/height attributes, so it
   stays small even if this sheet doesn't load. */
.made-by a { position: relative; white-space: nowrap; text-decoration: none; transition: color 280ms var(--ease); }
.made-by a:hover, .made-by a:focus-visible { color: #fff; }
.made-by .ind { position: absolute; left: 100%; top: 50%; margin: -5px 0 0 6px; opacity: 0; transform: translateX(-5px); transition: opacity 280ms var(--ease), transform 280ms var(--ease); }
.made-by a:hover .ind, .made-by a:focus-visible .ind { opacity: 1; transform: none; }