/* ============================================================
   Damon Roberts — site styles
   ------------------------------------------------------------
   Sections in this file:
     1. Variables   (colours, fonts — EDIT COLOURS HERE)
     2. Base        (resets, body, background field, grain)
     3. Layout      (page wrapper)
     4. Hero        (name, tagline, contact links)
     5. Writing     (posts list)
     6. Footer
     7. Animations  (reveal on load, blob motion)
     8. Responsive  (small screens)
   ============================================================ */

/* ---------- 1. VARIABLES — edit colours/fonts here ---------- */
:root {
  /* declare the site as already-dark so Android/Chrome "force dark" leaves it
     alone — otherwise auto-dark recolours the #egg "D" grey while AMON stays white */
  color-scheme: dark;

  --bg:        #08070d;   /* page background (near-black) */
  --bg-soft:   #11101a;   /* raised surfaces (link cards)  */
  --text:      #f4f2fb;   /* main text */
  --muted:     #b9b6cf;   /* dimmed text */
  --line:      #221f31;   /* hairlines / borders */

  /* the gradient accent — used on name + hovers.
     full vaporwave sweep so it has somewhere to travel when animated */
  --grad: linear-gradient(110deg,
      #22d3ee 0%, #a855f7 22%, #ec4899 45%, #f97316 68%, #facc15 82%, #22d3ee 100%);
  --accent: #ec4899;      /* solid fallback accent */

  --font-display: "Clash Display", sans-serif;
  --font-body:    "General Sans", system-ui, sans-serif;

  --maxw: 760px;          /* content max width */
}

/* ---------- 2. BASE ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  /* Vaporwave sunset wash — pure gradients (no blur). Iconic palette:
     yellow horizon → orange → hot pink → purple → light blue, on a dark base. */
  background:
    radial-gradient(135% 66% at 50% 124%, rgba(255, 240, 105, 0.62), transparent 58%),
    radial-gradient(120% 64% at 26% 112%, rgba(255, 140, 70, 0.54), transparent 57%),
    radial-gradient(128% 74% at 74% 98%, rgba(255, 86, 200, 0.46), transparent 60%),
    radial-gradient(122% 96% at 84% 4%, rgba(180, 90, 246, 0.50), transparent 60%),
    radial-gradient(100% 82% at 16% -4%, rgba(120, 196, 255, 0.30), transparent 56%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

a { color: inherit; text-decoration: none; }

/* Node-network canvas — sits above the gradient wash, below content.
   opacity is set by JS (--glow) for time-of-day brightness. */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: var(--glow, 0.85);
}

/* Daytime warm glow — JS sets --day (0 = night, 1 = midday).
   screen blend adds brightness + yellow during the day. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(95% 75% at 50% 118%, rgba(255, 236, 110, 0.55), transparent 56%),
    radial-gradient(80% 65% at 24% 108%, rgba(255, 176, 70, 0.45), transparent 55%),
    radial-gradient(85% 70% at 80% 6%, rgba(255, 120, 200, 0.30), transparent 58%);
  mix-blend-mode: screen;
  opacity: var(--day, 0.6);
  transition: opacity 2s linear;
}

/* Night field — mottled deep purples & blues. JS sets --night (0 = midday,
   up to ~0.8 = deep night). Many offset radials give an uneven, nebula-like
   texture rather than a flat dim. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 14% 22%, rgba(78, 52, 150, 0.65), transparent 62%),
    radial-gradient(34% 26% at 82% 28%, rgba(34, 58, 140, 0.60), transparent 62%),
    radial-gradient(30% 34% at 62% 74%, rgba(92, 40, 138, 0.55), transparent 62%),
    radial-gradient(26% 26% at 28% 86%, rgba(26, 50, 120, 0.50), transparent 62%),
    radial-gradient(44% 40% at 92% 90%, rgba(58, 36, 110, 0.55), transparent 66%),
    radial-gradient(30% 30% at 46% 8%, rgba(48, 38, 120, 0.55), transparent 62%),
    radial-gradient(22% 22% at 50% 50%, rgba(70, 44, 132, 0.40), transparent 60%),
    #060510;
  opacity: var(--night, 0);
  transition: opacity 2s linear;
}

/* Fine grain overlay for texture (pure CSS, no image) */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--grain, 0.04);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. LAYOUT ---------- */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(3rem, 10vh, 7rem) 1.5rem 3rem;
}

/* ---------- 4. HERO ---------- */
.hero { margin-bottom: 5rem; }

.eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.4rem;
}

.name {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-size: clamp(3.5rem, 16vw, 8.5rem);
  margin-bottom: 1.5rem;
}
.name .line { display: block; }

/* hidden easter-egg target — the "D" of DAMON. Drag/tap launches NODE RUN
   (see app.js). Hints it's interactive: a faint periodic shimmer sweep, and a
   play-button badge on hover. */
#egg {
  position: relative;
  display: inline-block;
  cursor: pointer;
  touch-action: none;
  will-change: transform;
  /* no text-selection / blue tap-highlight when dragging the "D" on touch */
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  /* base is the normal text colour; a coloured band sweeps left→right periodically.
     band colours are randomised within the page palette each cycle (set by JS) */
  background: linear-gradient(110deg,
    currentColor 0%, currentColor 42%,
    var(--egg-c1, #a855f7) 48%, var(--egg-c2, #facc15) 57%,
    currentColor 63%, currentColor 100%);
  background-size: 300% 100%;
  background-position: 130% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: eggShimmer 7s ease-in-out infinite;
}
#egg:active { cursor: grabbing; }
/* hover: a thin gradient outline traced on the D's own glyph (not a box around it) */
#egg::before {
  content: "D";
  position: absolute; left: 0; top: 0;
  background: var(--grad);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px #fff; /* opaque stroke → the clipped gradient shows only on the outline */
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
#egg:hover::before { opacity: 1; }
/* tiny white play triangle in the gap of the D — appears on hover only */
#egg::after {
  content: "►";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  font-size: 0.2em; line-height: 1;
  color: #fff; -webkit-text-fill-color: #fff;
  text-shadow: 0 0 7px rgba(0, 0, 0, 0.6);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#egg:hover::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@keyframes eggShimmer {
  0%, 28%   { background-position: 130% 0; } /* starts sooner */
  90%, 100% { background-position: -30% 0; } /* slower sweep, rests off-screen */
}
@media (prefers-reduced-motion: reduce) { #egg { animation: none; } }

/* gradient-filled text for the surname */
/* "ROBERTS" — bright vaporwave gradient that flows through the palette */
.line--grad {
  background: var(--grad);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 12s linear infinite;
}

.tagline {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  color: var(--muted);
  max-width: 34ch;
  margin-bottom: 3rem;
}

/* About */
.about {
  margin-bottom: 4rem; max-width: 64ch;
  /* slight backdrop so the copy stays readable over the bright gradient wash */
  padding: 1.6rem 1.8rem;
  background: rgba(8, 7, 13, 0.42);
  border: 1px solid var(--line);
  border-radius: 16px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.about__head {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.about p { color: var(--muted); line-height: 1.7; }

/* Contact links — stacked cards */
.links { display: flex; flex-direction: column; gap: 0.6rem; }

/* email card holds a mailto link + a copy button */
.link--email .link__val { transition: color 0.2s ease; }
.link--email .link__val:hover { color: var(--accent); text-decoration: underline; }
.link__copy {
  justify-self: end;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  padding: 0.2rem 0.3rem;
  border-radius: 6px;
  transition: color 0.2s ease, transform 0.2s ease;
}
.link__copy:hover { color: var(--accent); transform: scale(1.12); }

.link {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.link:hover {
  transform: translateX(6px);
  border-color: transparent;
  background:
    linear-gradient(var(--bg-soft), var(--bg-soft)) padding-box,
    var(--grad) border-box;
  border: 1px solid transparent;
}
.link__label {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.link__val { font-weight: 500; }
.link__arrow {
  font-size: 1.1rem;
  color: var(--muted);
  transition: transform 0.25s ease, color 0.25s ease;
}
.link:hover .link__arrow { transform: translate(3px, -3px); color: var(--accent); }

/* ---------- 5. WRITING ---------- */
.writing {
  margin-bottom: 5rem;
  /* slight translucent panel so the list sits above the colour wash */
  background: rgba(17, 16, 26, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.8rem 1.6rem;
}
.writing__head {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.8rem;
}
.writing__head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
}
.writing__rule {
  flex: 1;
  height: 1px;
  background: var(--line);
}

.posts { list-style: none; }
.posts__empty { color: var(--muted); font-size: 0.95rem; }

.post-item a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.25s ease;
}
.post-item a:hover { padding-left: 0.6rem; }
.post-item__title { font-size: 1.15rem; font-weight: 500; transition: color 0.25s ease; }
.post-item a:hover .post-item__title { color: var(--accent); }
.post-item__date { font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.post-item__summary { flex-basis: 100%; color: var(--muted); font-size: 0.95rem; }

/* ---------- 6. FOOTER ---------- */
.foot {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text);
  /* translucent panel keeps it legible over the bright yellow glow */
  background: rgba(8, 7, 13, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 0.9rem 1.2rem;
  border-radius: 12px;
  border: 1px solid var(--line);
}

/* ---------- 7. ANIMATIONS ---------- */
/* staggered reveal on page load — uses --d as the step index */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-delay: calc(var(--d) * 0.09s);
}
@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  to { background-position: 200% center; }
}

/* respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  .line--grad { animation: none; }
}

/* ---------- 8. SCROLLBAR (vaporwave) ---------- */
html { scrollbar-width: thin; scrollbar-color: #c774e8 var(--bg); } /* Firefox */

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  border: 3px solid var(--bg);          /* inset padding effect */
  background-image: linear-gradient(180deg, #c774e8, #ff6ad5 55%, #ff8a60);
}
::-webkit-scrollbar-thumb:hover {
  background-image: linear-gradient(180deg, #d98bff, #ff7fd6 55%, #ffa066);
}

/* ---------- 9. TOAST ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.6rem;
  transform: translate(-50%, 1.2rem);
  z-index: 200;
  padding: 0.7rem 1.2rem;
  font-size: 0.9rem;
  color: var(--text);
  background: rgba(17, 16, 26, 0.92);
  border: 1px solid transparent;
  border-image: var(--grad) 1;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- 10. RESPONSIVE ---------- */
@media (max-width: 540px) {
  body { font-size: 16px; }
  .link { grid-template-columns: 1fr auto; }
  .link__label { display: none; }   /* hide the small label on phones */
}

@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 0.25s ease; transform: translate(-50%, 0); }
}