/* Motion follows the Mac window, segmented control, and Dock interactions. */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.2, .9, .25, 1.25);
}
@property --accent { syntax: '<color>'; inherits: true; initial-value: #1264eb; }
@property --accent-soft { syntax: '<color>'; inherits: true; initial-value: #eaf1ff; }
html { scrollbar-gutter: stable; transition: --accent .6s ease, --accent-soft .6s ease; }
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: min(1100px, 110vw); height: 750px; left: 50%; top: 140px;
  transform: translateX(-50%); opacity: .46;
  background: radial-gradient(ellipse, var(--accent-soft), transparent 68%);
}
.hero-line { display: inline-block; }
.hero-enter { animation: hero-enter .85s var(--ease-out) both; animation-delay: var(--enter-delay, 0ms); }
.hero-window-enter { animation: window-enter 1.1s var(--ease-out) .26s both; transform-origin: center 25%; }
@keyframes hero-enter {
  from { opacity: 0; transform: translateY(23px); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes window-enter {
  from { opacity: 0; transform: perspective(1400px) translateY(48px) rotateX(7deg) scale(.97); }
  to { opacity: 1; transform: perspective(1400px) translateY(0) rotateX(0) scale(1); }
}
.motion-pending { opacity: 0; }
.motion-reveal { animation: reveal-window .9s var(--ease-out) both; }
[data-reveal='copy'].motion-reveal { animation-name: reveal-copy; animation-duration: .7s; }
@keyframes reveal-window {
  from { opacity: 0; transform: translateY(34px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes reveal-copy {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.site-header { transition: background-color .3s ease, box-shadow .3s ease; }
.site-header.is-scrolled { background: rgba(255,255,255,.94); box-shadow: 0 6px 26px -18px #1c335f55; }
.scroll-progress {
  position: absolute; bottom: -1px; left: 0; right: 0; height: 2px;
  background: var(--accent); transform: scaleX(var(--reading-progress, 0));
  transform-origin: left center; pointer-events: none; opacity: .65;
}
.desktop-nav a { position: relative; padding-block: 8px; transition: color .22s ease; }
.desktop-nav a::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  border-radius: 2px; background: var(--accent); transform: scaleX(0);
  transform-origin: center; transition: transform .3s var(--ease-out);
}
.desktop-nav a[aria-current='location'] { color: var(--accent); }
.desktop-nav a[aria-current='location']::after { transform: scaleX(1); }
.button, .nav-download {
  transition: transform .25s var(--ease-out), box-shadow .3s ease,
    background-color .3s ease, color .3s ease, border-color .3s ease, filter .25s ease;
}
.button:not([aria-disabled='true']):active, .nav-download:active { transform: translateY(1px) scale(.97); }
.button-quiet svg { transition: transform .35s var(--ease-out); }
.view-tabs { position: relative; isolation: isolate; }
.tab-indicator {
  position: absolute; top: 4px; bottom: 4px; left: 0; z-index: -1;
  width: var(--tab-width, 62px); transform: translateX(var(--tab-left, 4px));
  border-radius: 6px; background: white; box-shadow: 0 2px 7px #1f356119;
  transition: transform .44s var(--ease-out), width .44s var(--ease-out); pointer-events: none;
}
.tabs-enhanced button[aria-selected='true'] { background: transparent; box-shadow: none; color: var(--accent); }
.view-tabs button { transition: color .2s ease, transform .2s var(--ease-out); }
.view-tabs button:active { transform: scale(.93); }
.screenshot-button .screenshot-outgoing { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.zoom-hint { z-index: 2; transform: translateY(5px); transition: opacity .25s ease, transform .35s var(--ease-out); }
.screenshot-button:hover .zoom-hint, .screenshot-button:focus-visible .zoom-hint { transform: translateY(0); }
.app-window { transition: box-shadow .5s ease; }
.app-window.is-switching { box-shadow: 0 25px 64px -20px #40578466, 0 4px 12px #32466b18; }
[data-lightbox] { cursor: zoom-in; }
.reading-visual, .extensions-visual { transition: border-color .4s ease, box-shadow .4s ease; }
.feature-icon { transition: background-color .4s ease, color .4s ease, transform .3s var(--ease-out); }
.personality-section { background: color-mix(in srgb, var(--accent-soft) 60%, white); }
.brand-playground { position: relative; }
.brand-playground > img { position: relative; z-index: 1; }
.brand-playground::before {
  content: ''; position: absolute; width: 350px; max-width: 100%; height: 210px;
  top: -25px; left: 50%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--accent) 10%, transparent), transparent 68%);
}
.color-option { --dock-scale: 1; --dock-lift: 0px; }
.color-option img, .color-option:hover img {
  transform: translateY(var(--dock-lift)) scale(var(--dock-scale));
  transition: transform .38s var(--ease-spring), filter .3s ease; transform-origin: center bottom;
}
.color-option[aria-pressed='true'] img { filter: drop-shadow(0 5px 6px #1a35532b); }
.color-option::after {
  content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); bottom: -3px; left: calc(50% - 2px);
  opacity: 0; transform: scale(0); transition: opacity .25s ease, transform .4s var(--ease-spring);
}
.color-option[aria-pressed='true']::after { opacity: 1; transform: scale(1); }
.shortcuts kbd { transition: transform .18s ease, background-color .2s ease, border-color .2s ease; }
.shortcuts > div:hover kbd { transform: translateY(2px); background: var(--accent-soft); border-color: #cad7ec; }
.faq-list details { overflow: hidden; }
.faq-list summary { transition: color .2s ease; }
.faq-list summary:hover { color: var(--accent); }
.faq-list summary span { transition: transform .35s var(--ease-out), color .25s ease; }
.faq-list details[open] summary span { color: var(--accent); }
.faq-list details p { transform-origin: top; }
.menu-toggle span { transition: transform .3s var(--ease-out), opacity .2s ease; }
.menu-toggle[aria-expanded='true'] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.mobile-nav { overflow: hidden; transform-origin: top; }
dialog { transform-origin: var(--dialog-origin, 50% 50%); }
dialog[open]::backdrop { animation: backdrop-enter .3s ease both; }
dialog.is-closing::backdrop { animation: backdrop-leave .24s ease both; }
@keyframes backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdrop-leave { from { opacity: 1; } to { opacity: 0; } }
.dialog-toolbar button { transition: background-color .2s ease, transform .2s ease; }
.dialog-toolbar button:hover { background: #45536a; }
.dialog-toolbar button:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .button:not([aria-disabled='true']):hover, .nav-download:hover { transform: translateY(-3px); }
  .button-primary:not([aria-disabled='true']):hover { box-shadow: 0 9px 22px -7px color-mix(in srgb, var(--accent) 45%, transparent); }
  .button-quiet:hover svg { transform: translateY(3px); }
  .desktop-nav a:hover::after { transform: scaleX(1); }
  .reading-visual:hover, .extensions-visual:hover { border-color: #c6d3e9; box-shadow: 0 15px 36px -24px #284c8b55; }
  .reading-details article:hover .feature-icon { transform: translateY(-2px); }
}
@media (max-width: 600px) {
  .hero-enter { animation-duration: .7s; }
  .hero-window-enter { animation-duration: .85s; }
  .tab-indicator { top: 3px; bottom: 3px; border-radius: 5px; }
  .zoom-hint { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-pending { opacity: 1; }
  .color-option img, .button:hover, .nav-download:hover, .zoom-hint { transform: none !important; }
}