/* ===========================
   Wonder Junkyard — Swiss Grid
   =========================== */

/* Reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Variables */
:root {
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --color-bg: #FAF7F2;
  --color-text: #2C2416;
  --color-muted: #7A6E5E;
  --color-light: #D4C9BB;
  --color-accent: #C4704B;
  --color-accent-hover: #A85D3B;
  --color-surface: #F0EBE3;

  --grid-columns: 12;
  --grid-gutter: 1.5rem;
  --grid-max: 1200px;
  --grid-padding: 1.5rem;

  /* Animation tokens */
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-micro: 200ms;
  --duration-ui: 300ms;
}

/* ===========================
   Themes
   =========================== */

/* Dark — contrast ≥ 4.5:1 for body, ≥ 7:1 for heading */
[data-theme="dark"] {
  --color-bg: #1A1714;
  --color-text: #EDE9E3;
  --color-muted: #A9A198;
  --color-light: #3E3930;
  --color-accent: #E0935E;
  --color-accent-hover: #EBA877;
  --color-surface: #28241E;
}

/* Bloom */
[data-theme="bloom"] {
  --color-bg: #FFFBF5;
  --color-text: #1A1A2E;
  --color-muted: #5E5E74;
  --color-light: #D0CCE0;
  --color-accent: #E94560;
  --color-accent-hover: #D13550;
  --color-surface: #F0ECF6;
}

/* Sunset */
[data-theme="sunset"] {
  --color-bg: #18102A;
  --color-text: #F5E8CC;
  --color-muted: #C0A882;
  --color-light: #3E2C52;
  --color-accent: #FF7640;
  --color-accent-hover: #FF9466;
  --color-surface: #241842;
}

/* Synth */
[data-theme="synth"] {
  --color-bg: #0C0120;
  --color-text: #E8BFFF;
  --color-muted: #B08AD0;
  --color-light: #32206A;
  --color-accent: #FF3DA0;
  --color-accent-hover: #FF6AB8;
  --color-surface: #1A0A42;
}

/* Forest */
[data-theme="forest"] {
  --color-bg: #172013;
  --color-text: #DAE6D6;
  --color-muted: #9AB490;
  --color-light: #334830;
  --color-accent: #8EC34E;
  --color-accent-hover: #A4D468;
  --color-surface: #223420;
}

/* Ocean */
[data-theme="ocean"] {
  --color-bg: #0A1826;
  --color-text: #D0DDE8;
  --color-muted: #8AAAC0;
  --color-light: #253E56;
  --color-accent: #1AC6DC;
  --color-accent-hover: #40D4E8;
  --color-surface: #142E42;
}

/* Smooth theme transition */
body,
.subscribe-form input[type="email"],
.subscribe-form button,
.grid-rule {
  transition: background var(--duration-ui) var(--ease-out),
              color var(--duration-ui) var(--ease-out),
              border-color var(--duration-ui) var(--ease-out);
}

/* Base */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* ===========================
   12-Column Swiss Grid
   =========================== */
main {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 2rem var(--grid-padding) 0;
}

@media (min-width: 768px) {
  :root {
    --grid-padding: 2.5rem;
  }

  main {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    column-gap: var(--grid-gutter);
    padding-top: 4rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --grid-padding: 3rem;
  }

  main {
    padding-top: 5rem;
  }
}

/* ===========================
   Hero
   =========================== */
.hero {
  padding-bottom: 2.5rem;
}

.hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(3.5rem, 10vw, 9rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--color-text);
}

.hero .line {
  display: block;
  overflow: hidden;
  padding: 0.06em 0 0.18em;
  margin-bottom: -0.14em;
}

.hero .line:last-child {
  margin-bottom: 0;
}

.hero .reveal-text {
  display: inline-block;
}

@media (min-width: 768px) {
  .hero {
    grid-column: 1 / span 9;
    padding-bottom: 3rem;
  }
}

/* ===========================
   Intro
   =========================== */
.intro {
  padding-bottom: 2rem;
}

.intro p {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 1rem;
}

.intro p:last-child {
  margin-bottom: 0;
}

.intro a {
  color: var(--color-accent);
  text-decoration: none;
  background-image: linear-gradient(var(--color-light), var(--color-light));
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  transition: background-size var(--duration-micro) var(--ease-out),
              color var(--duration-micro) var(--ease-out);
}

.intro a:hover {
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
}

.cta-line {
  font-weight: 500;
  color: var(--color-text);
}

/* Inline icons in text */
.inline-icon {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.1em;
  margin: 0 0.05em 0 0.12em;
  color: var(--color-accent);
  opacity: 0.5;
  cursor: default;
  transition: opacity var(--duration-micro) var(--ease-out),
              transform var(--duration-micro) var(--ease-out);
}

.inline-icon:hover {
  opacity: 1;
}

/* Code — rock side to side */
.icon-code:hover {
  animation: rock 0.4s var(--ease-out);
}

/* Eye — blink */
.icon-eye:hover {
  animation: blink 0.45s var(--ease-out);
}

/* Lightbulb — pulse glow */
.icon-lightbulb:hover {
  animation: glow 0.5s var(--ease-out);
}

/* Globe — spin */
.icon-globe:hover {
  animation: spin 0.6s var(--ease-out);
}

/* Flask — bubble wobble */
.icon-flask:hover {
  animation: wobble 0.4s var(--ease-out);
}

/* Cursor — click nudge */
.icon-cursor:hover {
  animation: click 0.3s var(--ease-out);
}

/* Users — bounce up */
.icon-users:hover {
  animation: bounce 0.4s var(--ease-out);
}

/* Sparkles — twinkle spin + scale */
.icon-sparkles:hover {
  animation: twinkle 0.5s var(--ease-out);
}

@keyframes rock {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-14deg); }
  75% { transform: rotate(14deg); }
}

@keyframes blink {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  40% { transform: scaleY(0.05); opacity: 0.6; }
  60% { transform: scaleY(0.05); opacity: 0.6; }
}

@keyframes glow {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.3); opacity: 1; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes wobble {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-8deg); }
  40% { transform: rotate(8deg); }
  60% { transform: rotate(-5deg); }
  80% { transform: rotate(5deg); }
}

@keyframes click {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(1px, 2px) scale(0.92); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-4px); }
  70% { transform: translateY(-1px); }
}

@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.5; }
  50% { transform: scale(1.35) rotate(20deg); opacity: 1; }
}

@media (min-width: 768px) {
  .intro {
    grid-column: 1 / span 7;
    padding-bottom: 2.5rem;
  }
}

/* ===========================
   Subscribe
   =========================== */
.subscribe {
  padding-bottom: 2.5rem;
}

.subscribe-form {
  display: flex;
  gap: 0.5rem;
}

.subscribe-form input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-light);
  border-radius: 6px;
  outline: none;
  transition: border-color var(--duration-micro) var(--ease-out);
}

.subscribe-form input[type="email"]::placeholder {
  color: var(--color-muted);
}

.subscribe-form input[type="email"]:focus {
  border-color: var(--color-accent);
}

.subscribe-form button {
  padding: 0.7rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-bg);
  background: var(--color-accent);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-micro) var(--ease-out),
              transform var(--duration-micro) var(--ease-out);
}

.subscribe-form button:hover {
  background: var(--color-accent-hover);
}

.subscribe-form button:active {
  transform: scale(0.97);
}

@media (min-width: 768px) {
  .subscribe {
    grid-column: 1 / span 5;
    padding-bottom: 3rem;
  }
}

/* ===========================
   Grid Rule (Divider)
   =========================== */
.grid-rule {
  border: none;
  border-top: 1px solid var(--color-light);
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  .grid-rule {
    grid-column: 1 / span 8;
    margin-bottom: 4rem;
  }
}

/* ===========================
   Feed
   =========================== */
.feed {
  padding-bottom: 2rem;
}

@media (min-width: 768px) {
  .feed {
    grid-column: 1 / -1;
  }
}

/* Entry — nested grid */
.entry {
  margin-bottom: 4rem;
}

.entry:last-child {
  margin-bottom: 0;
}

.entry-content {
  margin-bottom: 1.5rem;
}

.entry-date {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin-bottom: 0.375rem;
}

.entry h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 0.375rem;
}

.entry h3 a {
  text-decoration: none;
  background-image: linear-gradient(var(--color-text), var(--color-text));
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size var(--duration-ui) var(--ease-out);
}

.entry h3 a:hover {
  background-size: 100% 1px;
}

.entry > .entry-content > p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text);
}

/* Entry CTA */
.entry-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-accent);
  transition: gap var(--duration-micro) var(--ease-out);
}

.entry-cta:hover {
  gap: 0.625rem;
}

.entry-cta .arrow {
  display: inline-block;
  transition: transform var(--duration-micro) var(--ease-out);
}

.entry-cta:hover .arrow {
  transform: translateX(2px);
}

/* Entry image */
.entry-image-link {
  display: block;
  overflow: hidden;
  border-radius: 4px;
}

.entry-image-link img {
  width: 100%;
  display: block;
  transition: transform 0.4s var(--ease-out);
}

.entry-image-link:hover img {
  transform: scale(1.03);
}

@media (min-width: 768px) {
  .entry {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    column-gap: var(--grid-gutter);
    align-items: start;
  }

  .entry-content {
    grid-column: 1 / span 5;
    margin-bottom: 0;
    padding-top: 0.25rem;
  }

  .entry-images {
    grid-column: 7 / span 6;
  }
}

/* ===========================
   Footer
   =========================== */
.site-footer {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 3rem var(--grid-padding) 2rem;
}

.site-footer p {
  font-size: 0.875rem;
  color: var(--color-muted);
}

.site-footer a {
  color: var(--color-text);
  text-decoration: none;
  background-image: linear-gradient(var(--color-light), var(--color-light));
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  transition: background-image var(--duration-micro) var(--ease-out);
}

.site-footer a:hover {
  background-image: linear-gradient(var(--color-text), var(--color-text));
}

/* ===========================
   Mode Switcher
   =========================== */
.mode-switcher {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 200;
}

.mode-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-light);
  background: var(--color-bg);
  color: var(--color-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-micro) var(--ease-out),
              border-color var(--duration-micro) var(--ease-out),
              color var(--duration-micro) var(--ease-out),
              transform var(--duration-micro) var(--ease-out);
}

.mode-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-surface);
}

.mode-btn:active {
  transform: scale(0.97);
}

.mode-icon {
  transition: transform 0.4s var(--ease-out);
}

.mode-btn:hover .mode-icon {
  transform: rotate(45deg);
}

.mode-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  border-radius: 10px;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 130px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(0.97);
  transform-origin: top right;
  transition: opacity var(--duration-micro) var(--ease-out),
              visibility var(--duration-micro) var(--ease-out),
              transform var(--duration-micro) var(--ease-out);

  /* Fixed light panel colors — guaranteed contrast */
  background: #FAF8F5;
  border: 1px solid #DDD8D0;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

/* Dark themes get a dark panel */
:is([data-theme="dark"], [data-theme="sunset"], [data-theme="synth"], [data-theme="forest"], [data-theme="ocean"]) .mode-panel {
  background: #1E1C18;
  border-color: #3A3630;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.mode-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.mode-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.625rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-micro) var(--ease-out);

  /* Fixed text color — high contrast */
  color: #3C3428;
}

.mode-option:hover {
  background: #EFEBE4;
}

.mode-option.active {
  background: #E8E3DB;
  font-weight: 500;
}

/* Dark panel option colors */
:is([data-theme="dark"], [data-theme="sunset"], [data-theme="synth"], [data-theme="forest"], [data-theme="ocean"]) .mode-option {
  color: #E0DCD6;
}

:is([data-theme="dark"], [data-theme="sunset"], [data-theme="synth"], [data-theme="forest"], [data-theme="ocean"]) .mode-option:hover {
  background: #2E2A24;
}

:is([data-theme="dark"], [data-theme="sunset"], [data-theme="synth"], [data-theme="forest"], [data-theme="ocean"]) .mode-option.active {
  background: #38342C;
}

.mode-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ===========================
   Reduced Motion
   =========================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}