/* ========================================
   Site motion system
   Calm editorial choreography for every page except VimalinxOS.
   Loaded after page styles so timing and interaction behavior stay consistent across the
   older page-specific stylesheets without changing their visual layout.
   ======================================== */

:root {
  --motion-quick: 140ms;
  --motion-standard: 280ms;
  --motion-reveal: 560ms;
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Home signature: ink rises through a fixed line, then the portrait settles.
   Individual scene layers own their transforms; the outer layout stays still. */
.hero--home .hero-title-line {
  overflow: clip;
  padding-block: 0.08em;
  margin-block: -0.08em;
}

.hero-title-ink {
  display: block;
  transform-origin: left bottom;
}

.hero-thought {
  margin-bottom: 26px;
}

.hero-thought .hero-desc--home {
  display: grid;
  margin-bottom: 6px;
}

.hero-thought-line {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 7px, 0);
  transition: opacity 180ms ease-out, transform 320ms var(--motion-ease-out), visibility 320ms;
}

.hero-thought-line.is-current {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
}

.hero-thought-next {
  min-height: 44px;
  padding: 4px 8px 4px 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: 12px var(--font-sans);
  cursor: pointer;
}

.hero-thought-next span {
  display: inline-block;
  margin-left: 5px;
  color: var(--accent);
  transition: transform 200ms var(--motion-ease-out);
}

.hero-thought-next:hover span { transform: translate(2px, -2px); }
.hero-thought-next:active span { transform: translate(1px, -1px) scale(0.9); }

.hero--home .hero-visual {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  border-radius: 50%;
  opacity: 1;
  animation: none;
  transition: none;
  will-change: auto;
  isolation: isolate;
}

.hero--home .hero-avatar-wrapper {
  display: block;
  animation: none;
}

.hero-avatar-wrapper picture {
  display: block;
  position: relative;
  z-index: 2;
  transform: translate3d(var(--portrait-x, 0px), var(--portrait-y, 0px), 0);
}

.hero--home .hero-avatar {
  display: block;
  border-width: 1px;
  box-shadow: 0 18px 48px color-mix(in srgb, var(--text) 12%, transparent);
}

.hero--home .hero-avatar-ring {
  inset: -20px;
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  transform: translate3d(var(--ring-x, 0px), var(--ring-y, 0px), 0) rotate(-18deg);
}

.hero--home .hero-avatar-ring::after {
  inset: -8px;
  border-style: solid;
  border-color: transparent;
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  opacity: 0.48;
  transform: rotate(22deg);
}

.hero--home .hero-avatar-ring--outer {
  inset: -42px;
  opacity: 0.48;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--text) 26%, transparent);
  transform: translate3d(var(--ring-x, 0px), var(--ring-y, 0px), 0) rotate(16deg) scaleX(1.045);
}

.hero--home .hero-avatar-accent { animation: none; }
.hero--home .hero-avatar-accent--1 { background: var(--accent); opacity: 0.75; }
.hero--home .hero-avatar-accent--2 { opacity: 0.35; }
.hero--home .hero-avatar-accent--3 { opacity: 0.5; border-color: var(--accent); }

.hero-visual:focus-visible,
.hero-thought-next:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}

.cursor-dot, .cursor-circle { left: 0; top: 0; }

@media (prefers-reduced-motion: no-preference) {
  .js .hero--home .hero-avatar-wrapper {
    animation: portrait-arrive 1000ms var(--motion-ease-out) 220ms backwards;
  }
  .js .hero--home .hero-avatar-ring {
    animation: portrait-ring-arrive 1100ms var(--motion-ease-out) 380ms backwards;
  }
  .js .hero--home .hero-avatar-ring--outer { animation-delay: 460ms; }
  .js .hero-thought-next { animation: hero-fade-in 460ms ease-out 520ms backwards; }
}

@keyframes portrait-arrive {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.94); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes portrait-ring-arrive {
  from { opacity: 0; transform: rotate(-42deg) scale(0.88); }
}

/* Chapter rules unfold after their heading. No new observers or scroll loop. */
.hero--home ~ .section .section-head {
  position: relative;
  padding-bottom: 22px;
}

.hero--home ~ .section .section-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--border) 24%, transparent);
  transform-origin: left;
  transition: transform 800ms var(--motion-ease-out) 100ms;
}

.js .hero--home ~ .section .section-head:not(.visible)::after { transform: scaleX(0); }

/* Selection, orbit and screenshot use the same 640 ms settle. Never write a
   generic transform onto .product-universe-preview: the rail owns its geometry. */
.product-universe { --universe-selection-duration: 640ms; }
.product-universe-preview {
  transition-property: transform, opacity;
  transition-duration: var(--universe-selection-duration);
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.product-universe-active-item {
  filter: none;
  transition-property: transform, opacity;
  transition-duration: 240ms;
}
.product-universe-active-item.is-active { transition-delay: 100ms; }
.product-universe-halo {
  background: radial-gradient(ellipse, color-mix(in srgb, var(--accent) 11%, var(--bg)) 0%, transparent 70%);
}
.product-universe-ring { transition-property: opacity, border-color; }
.product-universe-rail.is-positioning .product-universe-preview,
.product-universe-rail.is-dragging .product-universe-preview { transition-duration: 0ms; }

@media (prefers-reduced-motion: reduce) {
  .js .hero-title-ink,
  .js .hero-thought-next,
  .hero--home .hero-avatar-wrapper,
  .hero--home .hero-avatar,
  .hero--home .hero-avatar-ring,
  .hero--home .hero-avatar-accent {
    animation: none;
  }
  .hero-title-ink,
  .hero-thought-line,
  .hero-thought-next span,
  .hero-avatar-wrapper picture,
  .hero--home .hero-avatar,
  .hero--home .hero-avatar-ring,
  .hero--home ~ .section .section-head::after {
    transform: none;
    transition: none;
  }
  .js .hero--home ~ .section .section-head:not(.visible)::after { transform: none; }
  .product-universe-preview,
  .product-universe-active-item,
  .product-universe-active-item.is-active { transition: none; }
}

/* Reveal choreography: distance and direction follow the content role. */

body:not([data-page="os"]) .reveal {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--motion-reveal) ease-out,
    transform var(--motion-reveal) var(--motion-ease-out);
}

body:not([data-page="os"]) .reveal-d1 { transition-delay: 55ms; }
body:not([data-page="os"]) .reveal-d2 { transition-delay: 110ms; }
body:not([data-page="os"]) .reveal-d3 { transition-delay: 165ms; }
body:not([data-page="os"]) .reveal-d4 { transition-delay: 220ms; }

/* Interactive surfaces: small lift, quiet image continuity, no tilt or bounce. */

body:not([data-page="os"]) :where(
  .summary-card--linked,
  .note-card--linked,
  .case-card--linked,
  .archive-card--linked,
  .featured-card--linked,
  .article-row--linked,
  .post-related-card--linked,
  .post-neighbor--linked,
  .related-card,
  .product-future-item
) {
  transform: translate3d(0, 0, 0);
  transition:
    transform var(--motion-standard) var(--motion-ease-out),
    border-color var(--motion-quick) ease-out,
    background-color var(--motion-quick) ease-out;
}

body:not([data-page="os"]) :where(
  .case-thumb img,
  .archive-thumb img,
  .product-feature-media img,
  .product-universe-preview-media img,
  .project-use-case-screen img,
  .post-attachment img
) {
  transform: translate3d(0, 0, 0) scale(1);
  transition: transform 620ms var(--motion-ease-out), opacity var(--motion-standard) ease-out;
}

body:not([data-page="os"]) :where(
  .note-link,
  .case-link-text,
  .archive-link-text,
  .featured-read-more,
  .article-row-link,
  .post-related-link,
  .product-future-enter,
  .product-universe-preview-enter,
  .section-link,
  .project-back,
  .connect-row-arrow
) {
  transition: transform var(--motion-standard) var(--motion-ease-out), color var(--motion-quick) ease-out;
}

@media (hover: hover) and (pointer: fine) {
  body:not([data-page="os"]) :where(
    .summary-card--linked,
    .note-card--linked,
    .case-card--linked,
    .archive-card--linked,
    .featured-card--linked,
    .article-row--linked,
    .post-related-card--linked,
    .post-neighbor--linked,
    .related-card,
    .product-future-item
  ):hover {
    transform: translate3d(0, -3px, 0);
    border-color: color-mix(in srgb, var(--text) 52%, var(--border));
  }

  body:not([data-page="os"]) :where(
    .case-card--linked,
    .archive-card--linked,
    .product-feature,
    .product-universe-preview-link,
    .project-use-case
  ):hover :where(
    .case-thumb img,
    .archive-thumb img,
    .product-feature-media img,
    .product-universe-preview-media img,
    .project-use-case-screen img
  ) {
    transform: translate3d(0, 0, 0) scale(1.018);
  }

  body:not([data-page="os"]) :where(
    .summary-card--linked,
    .note-card--linked,
    .case-card--linked,
    .archive-card--linked,
    .featured-card--linked,
    .article-row--linked,
    .post-related-card--linked,
    .post-neighbor--linked,
    .product-future-item,
    .product-universe-preview-link,
    .section-link
  ):hover :where(
    .note-link,
    .case-link-text,
    .archive-link-text,
    .featured-read-more,
    .article-row-link,
    .post-related-link,
    .product-future-enter,
    .product-universe-preview-enter
  ),
  body:not([data-page="os"]) .section-link:hover,
  body:not([data-page="os"]) .project-back:hover,
  body:not([data-page="os"]) .connect-row:hover .connect-row-arrow {
    transform: translate3d(4px, 0, 0);
  }
}

/* Rows and reading links move along the reading axis instead of lifting. */

body:not([data-page="os"]) :where(.connect-row, .reading-index a, .topic-item, .post-toc-link) {
  transition:
    color var(--motion-quick) ease-out,
    background-color var(--motion-quick) ease-out,
    border-color var(--motion-quick) ease-out,
    transform var(--motion-standard) var(--motion-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  body:not([data-page="os"]) :where(.reading-index a, .topic-item, .post-toc-link):hover {
    transform: translate3d(3px, 0, 0);
  }

  body:not([data-page="os"]) .connect-row:hover {
    transform: translate3d(4px, 0, 0);
  }
}

/* Controls: quick response on press, measured follow-through on release. */

body:not([data-page="os"]) :where(
  .button-link,
  .subscribe-btn,
  .product-action,
  .filter-tag,
  .account-button,
  .account-mini-button,
  .account-text-button,
  .post-action-btn,
  .journey-action,
  .dg-btn,
  .dg-menu-item,
  .dg-zoombar button,
  .theme-toggle
) {
  transform: translate3d(0, 0, 0);
  transition:
    transform var(--motion-quick) var(--motion-ease-out),
    color var(--motion-quick) ease-out,
    background-color var(--motion-quick) ease-out,
    border-color var(--motion-quick) ease-out,
    opacity var(--motion-quick) ease-out;
}

body:not([data-page="os"]) :where(
  .button-link,
  .subscribe-btn,
  .product-action,
  .filter-tag,
  .account-button,
  .account-mini-button,
  .account-text-button,
  .post-action-btn,
  .journey-action,
  .dg-btn,
  .dg-menu-item,
  .dg-zoombar button,
  .theme-toggle
):active:not(:disabled) {
  transform: scale(0.975);
  transition-duration: 80ms;
}

body:not([data-page="os"]) .theme-toggle {
  position: relative;
}

body:not([data-page="os"]) .theme-toggle :where(.theme-icon--sun, .theme-icon--moon) {
  position: absolute;
  display: block;
  transform-origin: center;
  transition: transform var(--motion-standard) var(--motion-ease-out), opacity var(--motion-quick) ease-out;
}

html:not([data-theme="dark"]) body:not([data-page="os"]) .theme-icon--sun,
html[data-theme="dark"] body:not([data-page="os"]) .theme-icon--moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

html:not([data-theme="dark"]) body:not([data-page="os"]) .theme-icon--moon {
  opacity: 0;
  transform: rotate(-24deg) scale(0.78);
}

html[data-theme="dark"] body:not([data-page="os"]) .theme-icon--sun {
  opacity: 0;
  transform: rotate(24deg) scale(0.78);
}

/* Theme variables touch most of the document. Freeze unrelated hover/focus
   transitions for that single commit frame so hundreds of color tweens do not
   start together; the local sun/moon feedback remains animated. */
html.theme-switching body *,
html.theme-switching body *::before,
html.theme-switching body *::after {
  transition-property: none !important;
}

html.theme-switching body:not([data-page="os"]) .theme-toggle :where(.theme-icon--sun, .theme-icon--moon) {
  transition-property: transform, opacity !important;
}

@media (hover: hover) and (pointer: fine) {
  html:not([data-theme="dark"]) body:not([data-page="os"]) .theme-toggle:hover .theme-icon--sun {
    transform: rotate(12deg) scale(1.04);
  }

  html[data-theme="dark"] body:not([data-page="os"]) .theme-toggle:hover .theme-icon--moon {
    transform: rotate(-8deg) scale(1.04);
  }
}

/* Forms signal focus as one composed surface, without moving layout. */

body:not([data-page="os"]) :where(
  .subscribe-form-fields,
  .blog-search,
  .account-login-form label,
  .dg-field
) {
  transition:
    border-color var(--motion-quick) ease-out,
    background-color var(--motion-quick) ease-out;
}

body:not([data-page="os"]) :where(
  .subscribe-form-fields,
  .blog-search,
  .account-login-form label,
  .dg-field
):focus-within {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--border));
}

/* DetailGame panels and dynamic feedback keep the app feeling spatial. */

body:not([data-page="os"]) :where(.dg-menu-panel, .dg-panel, .dg-drawer, .dg-play-frame) {
  transform-origin: top right;
  animation-duration: 300ms;
  animation-timing-function: var(--motion-ease-out);
}

body:not([data-page="os"]) :where(.dg-node, .dg-choice-item, .dg-toast) {
  transition:
    transform var(--motion-standard) var(--motion-ease-out),
    opacity var(--motion-standard) ease-out,
    border-color var(--motion-quick) ease-out,
    background-color var(--motion-quick) ease-out;
}

/* Performance: promote only while an interaction is actually active. */

@media (hover: hover) and (pointer: fine) {
  body:not([data-page="os"]) :where(
    .summary-card--linked,
    .note-card--linked,
    .case-card--linked,
    .archive-card--linked,
    .featured-card--linked,
    .article-row--linked,
    .post-related-card--linked,
    .post-neighbor--linked,
    .product-future-item,
    .product-universe-preview-link,
    .connect-row
  ):hover {
    will-change: transform;
  }
}

/* Tiered reduced motion: remove spatial movement and loops, retain short state
   changes so focus, hover and async status still communicate clearly. */

@media (prefers-reduced-motion: reduce) {
  body:not([data-page="os"]) :where(
    .hero-kicker,
    .hero-title-line,
    .hero-desc--home,
    .hero-summary .summary-card--linked,
    .hero-avatar-wrapper,
    .reveal,
    [data-motion-stagger] > *,
    .journey-scroll i::after,
    .account-loading-mark i
  ) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  body:not([data-page="os"]) :where(
    .reveal,
    .summary-card--linked,
    .note-card--linked,
    .case-card--linked,
    .archive-card--linked,
    .featured-card--linked,
    .article-row--linked,
    .post-related-card--linked,
    .post-neighbor--linked,
    .product-future-item,
    .product-universe-preview-link,
    .connect-row,
    .button-link,
    .subscribe-btn,
    .product-action,
    .filter-tag,
    .account-button,
    .post-action-btn,
    .dg-btn
  ) {
    transition-duration: var(--motion-quick) !important;
    transition-property: color, background-color, border-color, opacity !important;
  }
}