/* Progressive enhancement: regular links still work without transition support. */
@view-transition { navigation:auto; }

/* Native anchor navigation keeps URL hashes, history and keyboard behavior. */
html { scroll-behavior:smooth; }

.notebook-header { view-transition-name:site-header; }
.languages a[aria-current="page"] { view-transition-name:active-language; }
::view-transition-old(root) { animation:page-out 160ms ease-in both; }
::view-transition-new(root) { animation:page-in 260ms ease-out both; }
::view-transition-group(site-header),
::view-transition-group(active-language) { animation-duration:260ms; animation-timing-function:ease-in-out; }
@keyframes page-out { to { opacity:0; } }
@keyframes page-in { from { opacity:0; } }
@keyframes arrive { from { opacity:0; transform:translateY(12px); } }

.notebook-hero h1 { text-wrap:balance; }
.notebook-hero .hero-text { animation:arrive 550ms ease-out both; }
.notebook-hero .hero-action { animation:arrive 550ms 90ms ease-out both; }
.notebook-hero .hero-photo { animation:arrive 650ms 130ms ease-out both; }

.notebook-page .download-button,
.notebook-page .car-btn,
.notebook-page .languages a,
.notebook-page .billing-switch button {
  transition:transform 180ms ease, background-color 180ms ease,
             color 180ms ease, box-shadow 180ms ease;
}
.notebook-page .text-link {
  text-decoration-thickness:1px;
  text-underline-offset:5px;
  transition:text-underline-offset 180ms ease, color 180ms ease;
}
/* A pill behind each link adds feedback without shifting the header layout. */
.notebook-page .primary-nav a {
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  transition:transform 180ms ease, color 180ms ease;
}
.notebook-page .primary-nav a::before {
  content:"";
  position:absolute;
  inset:-8px -9px;
  z-index:-1;
  /* The download button's pill, so the header's two hover shapes match. */
  border-radius:999px;
  background:var(--gold);
  opacity:0;
  transform:scale(.92);
  transition:opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.notebook-page .primary-nav a:focus-visible::before {
  opacity:1;
  transform:scale(1);
}
.notebook-page .feature img { transition:transform 280ms ease; }
.notebook-page .landing-faq summary { transition:color 180ms ease; }
.notebook-page .landing-faq details[open] p { animation:arrive 220ms ease-out; }
.notebook-page .car-btn:not(:disabled):focus-visible {
  transform:translateY(-50%) scale(1.08);
  box-shadow:0 5px 14px rgb(var(--shadow-rgb) / 20%);
}

@media (hover:hover) and (pointer:fine) {
  .notebook-page .download-button:hover,
  .notebook-page .download-button:focus-visible {
    transform:translateY(-3px);
    box-shadow:0 7px 18px rgb(var(--shadow-rgb) / 16%);
  }
  .notebook-page .car-btn:not(:disabled):hover {
    transform:translateY(-50%) scale(1.08);
    box-shadow:0 5px 14px rgb(var(--shadow-rgb) / 20%);
  }
  .notebook-page .languages a:not([aria-current="page"]):hover {
    transform:translateY(-2px);
  }
  .notebook-page .billing-switch button[aria-pressed="false"]:hover {
    transform:translateY(-2px);
  }
  .notebook-page .primary-nav a:hover { transform:translateY(-2px); }
  .notebook-page .primary-nav a:hover::before {
    opacity:1;
    transform:scale(1);
    box-shadow:0 4px 12px rgb(var(--shadow-rgb) / 12%);
  }
  .notebook-page .text-link:hover { text-underline-offset:8px; }
  .notebook-page .feature:hover img { transform:translateY(-5px); }
  .notebook-page .landing-faq summary:hover { color:var(--amber-deep); }
}
.notebook-page .primary-nav a:active,
.notebook-page .download-button:active,
.notebook-page .languages a:active,
.notebook-page .billing-switch button:active { transform:scale(.97); box-shadow:none; }
.notebook-page .car-btn:not(:disabled):active {
  transform:translateY(-50%) scale(.96);
  box-shadow:none;
}

/* Also override the existing reveal styles if the preference changes mid-page. */
@media (prefers-reduced-motion:reduce) {
  @view-transition { navigation:none; }
  html { scroll-behavior:auto; }
  .notebook-page *, .notebook-page *::before, .notebook-page *::after {
    animation:none !important; transition:none !important; scroll-behavior:auto !important;
  }
  .notebook-page .primary-nav a:hover,
  .notebook-page .primary-nav a:active,
  .notebook-page .download-button:hover,
  .notebook-page .download-button:active,
  .notebook-page .download-button:focus-visible,
  .notebook-page .languages a:hover,
  .notebook-page .languages a:active,
  .notebook-page .billing-switch button:hover,
  .notebook-page .billing-switch button:active,
  .notebook-page .feature:hover img,
  .reveal-ready .notebook-page .reveal { transform:none; }
  .reveal-ready .notebook-page .reveal { opacity:1; }
  /* Preserve the arrows' vertical centering while disabling their scaling. */
  .notebook-page .car-btn:not(:disabled):hover,
  .notebook-page .car-btn:not(:disabled):focus-visible,
  .notebook-page .car-btn:not(:disabled):active { transform:translateY(-50%); }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation:none !important; }
}