/* Theme variables */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #fafafa;
  --text-primary: #171717;
  --text-secondary: #737373;
  --border: #e5e5e5;
}

[data-theme="dark"] {
  --bg-primary: #0a0a0a;
  --bg-secondary: #171717;
  --text-primary: #fafafa;
  --text-secondary: #a3a3a3;
  --border: #262626;
}

/* Reset and base styles */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background: var(--bg-primary);
  color: var(--text-primary);
  margin: 0;
  padding: 4rem 1.5rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  transition: background 0.2s ease, color 0.2s ease;
}

h1, h2, h3 {
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
}

h1 {
  font-size: 1.25rem;
}

h2 {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin: 3rem 0 1rem;
}

h3 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin: 1.5rem 0 0.5rem;
}

p {
  margin: 0 0 1rem;
  color: var(--text-secondary);
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  margin: 0.25rem 0;
}

a {
  color: var(--text-primary);
  text-decoration: none;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

section {
  margin-bottom: 2rem;
}

.about p {
  max-width: 480px;
}

/* Static crawlable profile (index.html), removed once the app mounts. Its
   header/about reuse the app's own classes so it paints identically — no
   flash on mount. The link list stays in the DOM for crawlers only. */
.static-profile ul {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Link with animated underline */
.link {
  position: relative;
  display: inline;
}

.link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: var(--text-primary);
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.link:hover::after {
  width: 100%;
}

.desc {
  color: var(--text-secondary);
}

/* Theme toggle */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--text-secondary);
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle:hover {
  color: var(--text-primary);
}

.icon-sun {
  display: none;
}

.icon-moon {
  display: block;
}

[data-theme="dark"] .icon-sun {
  display: block;
}

[data-theme="dark"] .icon-moon {
  display: none;
}

/* View transition: sliding curtain theme switch */
::view-transition-old(root) {
  animation: curtain-slide 300ms cubic-bezier(0.61, 0.03, 0.08, 1) forwards;
  z-index: 2;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

::view-transition-new(root) {
  animation: none;
  z-index: 1;
}

@keyframes curtain-slide {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100vh);
  }
}

/* Preview card */
.preview-card {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--border);
  background: var(--bg-secondary);
}

.preview-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.preview-card.interactive {
  width: min(400px, calc(100vw - 32px));
  height: min(250px, 42vh);
  pointer-events: auto;
  border-color: var(--border);
}

.preview-card iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bg-secondary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.preview-card.interactive iframe {
  width: 200%;
  height: 200%;
  transform: scale(0.5);
  transform-origin: top left;
}

.preview-card iframe.snapshot-frame.active.ready {
  opacity: 1;
  pointer-events: auto;
}

/* Non-active frames must not RENDER, only load: at opacity:0 alone, up to 13
   live replay sites keep compositing behind the visible one whenever the card
   is open. visibility:hidden render-throttles them (JS/network warmup still
   runs; the double-rAF painted signal simply waits until first activation,
   which the 400ms DOM-ready grace already covers). It also snaps the outgoing
   frame out instantly on hover switches instead of cross-fading two sites. */
.preview-card iframe.snapshot-frame:not(.active) {
  visibility: hidden;
}

.preview-card.fading {
  opacity: 0;
  transform: translateY(0);
  /* An invisible card must never eat hovers meant for the links under it. */
  pointer-events: none;
}

/* pointer-events is per-element: without this, the active iframe's own
   `pointer-events: auto` re-enables hit-testing inside a fading card, and the
   invisible frame swallows hovers meant for links underneath. !important
   because the .active.ready rule above is more specific. */
.preview-card.fading iframe {
  pointer-events: none !important;
}

/* Narrow-viewport fallback places the card over the link column — it must be
   a pure overlay there, never a pointer target. */
.preview-card.overlay-placed,
.preview-card.overlay-placed iframe {
  pointer-events: none !important;
}

/* Safe corridor: an invisible hit band bridging the gap between the hovered
   row and a beside-placed card, one row tall at the card's vertical center
   (where the hovered link sits). Entering it counts as entering the card, so
   the pointer can cross from text to preview at any speed without the grace
   timer hiding the card mid-journey. Kept short so rows above/below stay
   hoverable. */
.preview-card.visible.interactive:not(.overlay-placed)::before {
  content: "";
  position: absolute;
  right: 100%;
  width: 120px;
  top: calc(50% - 22px);
  height: 44px;
}

/* Dark images get white border, light images get black border */
.preview-card.dark-image {
  border-color: #ffffff;
}

.preview-card.light-image {
  border-color: #000000;
}

.preview-card img {
  display: block;
  width: 320px;
  height: 213px;
  object-fit: cover;
  background: var(--bg-secondary);
  border-radius: inherit;
}

/* Stacked posters: one per snapshot, absolutely positioned under the iframes;
   only the hovered snapshot's poster is visible. No src swapping, no decode
   flash. */
.preview-card .preview-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  opacity: 0;
}

.preview-card .preview-poster.active {
  opacity: 1;
}

[data-theme="dark"] .preview-card {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

@media (hover: none), (pointer: coarse) {
  .preview-card {
    display: none;
  }
}

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

/* Days counter */
.days-counter {
  margin-top: 3rem;
  text-align: center;
}

.counter-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.counter-value {
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* Claude spinner page */
@property --shimmer-pos {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 110%;
}

.claude-hero p {
  max-width: 480px;
}

.spinner-demo {
  margin: 2rem 0;
  font-family: 'Menlo', 'Monaco', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: 14px;
}

.spinner-line {
  display: flex;
  align-items: baseline;
}

.spinner-symbol {
  color: #D77757;
  width: 2ch;
  display: inline-block;
  flex-shrink: 0;
}

.spinner-verb {
  min-width: 0;
}

.spinner-verb-text {
  --shimmer-pos: 110%;
  background: linear-gradient(
    90deg,
    #D77757 0%,
    #D77757 calc(var(--shimmer-pos) - 8%),
    #EB9F7F var(--shimmer-pos),
    #D77757 calc(var(--shimmer-pos) + 8%),
    #D77757 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
  0% { --shimmer-pos: 110%; }
  100% { --shimmer-pos: -10%; }
}

.spinner-meta {
  color: #666;
  margin-left: 1ch;
  flex-shrink: 0;
  font-size: 13px;
}

.claude-install {
  margin-top: 2rem;
}

.install-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.install-header h2 {
  margin: 0;
}

.copy-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  font-family: inherit;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.copy-btn:hover {
  color: var(--text-primary);
  border-color: var(--text-secondary);
}

.copy-btn.copied {
  color: #4EBA65;
  border-color: #4EBA65;
}

.install-code {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
  overflow-x: auto;
  font-family: 'Menlo', 'Monaco', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-primary);
}

.install-code code {
  font-family: inherit;
}

/* Beta blog — raw white text on black, nothing else */
.beta-page {
  position: fixed;
  inset: 0;
  background: #000;
  color: #fff;
  overflow-y: auto;
  -webkit-font-smoothing: antialiased;
}

.beta-content {
  max-width: 600px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}

.beta-content h1 {
  font-size: 1.5rem;
  font-weight: 400;
  color: #fff;
  margin-bottom: 1.5rem;
}

.beta-content h2 {
  font-size: 1rem;
  font-weight: 400;
  color: #fff;
  text-transform: none;
  letter-spacing: normal;
  margin: 2rem 0 0.75rem;
}

.beta-content p {
  color: #ccc;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.beta-content strong {
  color: #fff;
  font-weight: 600;
}

.beta-content a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.beta-content a:hover {
  color: #ccc;
}

.beta-content ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin-bottom: 1.25rem;
}

.beta-content li {
  color: #ccc;
  line-height: 1.7;
  margin: 0.35rem 0;
}

.beta-back {
  margin-bottom: 2rem;
}

.beta-back a {
  color: #666;
  font-size: 0.875rem;
  text-decoration: none;
}

.beta-back a:hover {
  color: #fff;
}