/* Tenzin Wadsworth — personal site
   Ported from the "Tenzin Personal Site Design" Claude Design project
   (project 0b061b15-0a3b-426f-932a-b62eedaf16e9, file "Tenzin Wadsworth.dc.html").

   The design canvas expressed hover states in a `style-hover` attribute, which is
   a DSL feature with no CSS equivalent — each one becomes a class below. Everything
   else stays as the inline styles the design authored, so the two stay comparable
   line by line. */

html, body { margin: 0; padding: 0; background: #100e0c; scroll-behavior: smooth; }
* { box-sizing: border-box; }
a { color: #ef9563; text-decoration: none; }
a:hover { color: #f6bf98; }
::selection { background: #d6d0c6; color: #16130f; }

@keyframes tw-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tw-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tw-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } }

/* Panels animate in on open, matching the design's `animation: tw-rise` on each
   revealed block. Applied by script so a panel opened once doesn't re-animate. */
[data-panel][data-animate] { animation: tw-rise .45s ease both; }

/* Most panels carry an inline `display: grid` from the design, and an inline
   display declaration outranks the UA stylesheet's `[hidden] { display: none }`
   — so the `hidden` attribute alone left them visible. This restores it. */
[data-panel][hidden] { display: none !important; }

/* The hero rulestring doubles as the link to the Life simulator at /life.
   Colour lives here rather than inline so the hover state can win — an inline
   `color` would outrank any stylesheet rule short of !important. site.js
   rewrites this element's textContent as the moment changes, which is
   unaffected by it being an anchor. */
.rule-link { color: #7a6e63; transition: color .2s ease; }
.rule-link:hover { color: #a99c8c; }

/* ── Easter egg: the glider in the hero's top-left ──────────────────── */
/* Left at 7% so it passes for three stray live cells of the field. It brightens and
   steps one pixel-ish diagonally on hover or keyboard focus — a glider's actual
   motion — and links to /life. Cells inherit `currentColor`, which site.js sets to
   the current moment's accent, so the egg changes colour with the hero. */
.glider-egg {
  opacity: .07;
  transition: opacity .35s ease, transform .35s ease;
}
.glider-egg span { display: block; background: currentColor; }
.glider-egg:hover,
.glider-egg:focus-visible {
  opacity: .95;
  transform: translate(4px, 4px);
}
.glider-egg:focus-visible { outline: 1px solid currentColor; outline-offset: 8px; }

/* ── hero touch affordances ─────────────────────────────────────────── */
/* The hero canvas is `touch-action: none` so one finger can draw anywhere in any
   direction. Touch devices get the scrolling back two ways: #heroScroll, a native
   pan-y band across the bottom of the hero, and a two-finger pan anywhere (site.js).
   Both the band and its caption are inert for a mouse — the band sits above the
   canvas, so on a pointer:fine device it would swallow painting in the bottom of the
   hero for no benefit. Driven by a media query rather than by toggling `hidden`,
   which any inline `display` would outrank (see the disclosure note above). */
#heroScroll, #scrollHint { display: none; }
@media (pointer: coarse) {
  #heroScroll, #scrollHint { display: block; }
  /* "Click to draw" is both wrong and redundant beside the touch caption. */
  #drawHint { display: none !important; }
}

/* ── style-hover ports ──────────────────────────────────────────────── */
.hv-bio:hover       { color: #8a3f2a; border-color: #8a3f2a; }
.hv-awe-link:hover  { background: #ef95631a; }
.hv-awe-btn:hover   { color: #f2f4f8; border-color: #4a5480; }
.hv-seed-link:hover { background: #e3f2e3; }
.hv-seed-btn:hover  { color: #4bbd68; }
.hv-jnl-link:hover  { color: #3c4675; border-color: #3c4675; }
.hv-jnl-btn:hover   { background: #4d5885; }

/* The Awesomate section's fact table sits beside the copy on wide screens and
   below it on narrow ones — `auto` as a second column would otherwise squeeze
   the heading on phones. */
@media (max-width: 860px) {
  .awe-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Respect a reduced-motion preference: the hero keeps rendering but stops
   animating, reveals appear immediately, and the pulse dot holds still. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-panel][data-animate] { animation: none; }
  * { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; }
  /* The egg still brightens — that is the affordance — but stops travelling. */
  .glider-egg:hover, .glider-egg:focus-visible { transform: none; }
}