/* Premium polish: quiet, fast, and switched off for anyone who prefers reduced motion. */

::selection { background: var(--copper-glow); color: var(--text); }

/* Header: gains depth once the page scrolls beneath it (class set in premium.js) */
header {
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
header.is-scrolled { box-shadow: 0 14px 34px -20px rgba(0, 0, 0, 0.6); border-bottom-color: var(--copper-glow); }

/* Links in running text: a hairline underline that relaxes and brightens on hover */
main p a {
  text-decoration-thickness: 1px; text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color 0.25s ease, text-underline-offset 0.25s ease, color 0.2s ease;
}
main p a:hover, main p a:focus-visible { text-underline-offset: 0.32em; text-decoration-color: currentColor; }

@media (prefers-reduced-motion: no-preference) {
  /* Smooth fade between pages (Chromium cross-document view transitions; other browsers just navigate) */
  @view-transition { navigation: auto; }
  @keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
  ::view-transition-old(root) { animation: 0.2s cubic-bezier(0.4, 0, 1, 1) both vt-out; }
  ::view-transition-new(root) { animation: 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both vt-in; }

  /* Light/dark switch: the new theme grows out of the toggle button as a circle (clip-path set in premium.js) */
  html.theme-vt::view-transition-old(root), html.theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
  html.theme-vt::view-transition-old(root) { z-index: 1; }
  html.theme-vt::view-transition-new(root) { z-index: 2; }

  /* Entrance: header drifts in, headline rises, tab cards cascade. "backwards" fill only styles the delay period,
     so hover transforms keep working afterwards. */
  @keyframes enter-up { from { opacity: 0; transform: translateY(14px); } }
  @keyframes enter-down { from { opacity: 0; transform: translateY(-10px); } }
  header { animation: enter-down 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
  .page-title, #about { animation: enter-up 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s backwards; }
  .tab-card { animation: enter-up 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
  .tab-card:nth-child(1) { animation-delay: 0.28s; }
  .tab-card:nth-child(2) { animation-delay: 0.36s; }
  .tab-card:nth-child(3) { animation-delay: 0.44s; }
  .tab-card:nth-child(4) { animation-delay: 0.52s; }
  .tab-card:nth-child(5) { animation-delay: 0.6s; }
  .tab-card:nth-child(6) { animation-delay: 0.68s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Theme switch: no colour transitions while the theme flips, so the page lands on its final colours in one frame
   (otherwise each element fades on its own schedule and the switch reads as a washed-out blink). See premium.js. */
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; }

/* Content that fades in on scroll must never depend on that script: show it when scripting is off, and on paper. */
@media (scripting: none) { .reveal { opacity: 1 !important; transform: none !important; } }

/* Small header icons keep their look but get a thumb-sized hit area (WCAG 2.5.8) */
.brand-star, .home-doodle { position: relative; }
.brand-star::after, .home-doodle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; }

/* Footer: local time where Tarang is, and how far that is from the reader's clock (see premium.js) */
.local-time { display: inline-block; margin-left: 10px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.local-time::before { content: "·"; margin-right: 10px; opacity: 0.6; }
.local-time .lt-rel { opacity: 0.75; }
.visit-count { display: inline-block; margin-left: 10px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.visit-count::before { content: "·"; margin-right: 10px; opacity: 0.6; }
@media (max-width: 560px) { .local-time, .visit-count { display: block; margin: 6px 0 0; } .local-time::before, .visit-count::before { display: none; } }

/* Print: a clean, ink-on-paper copy of whatever page is open */
@media print {
  :root, html.light-mode { --bg: #fff; --text: #111; --muted: #444; --rule: #ccc; --copper: #333; --copper-light: #111; --link: #111; }
  html, body { background: #fff !important; color: #111 !important; }
  .photo-bg, .scrollgraph, .cursor-atoms, .theme-toggle, .kp-hint, .local-time, .visit-count, header nav, .home-doodle, .lb, .tab-icon-svg { display: none !important; }
  header { position: static !important; background: none !important; box-shadow: none !important; border: 0 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; animation: none !important; transition: none !important; }
  .tab-grid, .update-entry, .sx-card, .sx-stat, .sx-feature, .idea-panel { background: none !important; border-color: #ccc !important; break-inside: avoid; }
  a { color: #111 !important; }
  main p a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
}

/* Footer on the inner pages: the same hairline the home page has, now that the icon row is gone */
body:not(.page-home) .site-footer:not(:has(.contact)) { border-top: 1px solid var(--rule); }   /* Contact keeps its icons, already ruled off */
body:not(.page-home) .site-footer:not(:has(.contact)) .footer-copy { margin-top: 18px; }