/* Motion belongs to the homepage; the working tools keep their own behavior. */
body { isolation: isolate; }
.site-background { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.site-background::before {
  content: "";
  position: absolute;
  inset: -8%;
  background: radial-gradient(ellipse at 91% 13%,rgb(217 76 22 / .065),transparent 46%),radial-gradient(ellipse at 5% 83%,rgb(217 76 22 / .045),transparent 43%);
}
:root[data-theme=dark] .site-background::before {
  background: radial-gradient(ellipse at 91% 13%,rgb(240 128 78 / .085),transparent 46%),radial-gradient(ellipse at 5% 83%,rgb(240 128 78 / .05),transparent 43%);
}
.constellation-canvas { display: block; width: 100%; height: 100%; }

/* A pre-paint cover prevents a flash of the page before the opening is ready. */
html.opening-pending { overflow: hidden; }
html.opening-pending body::before { content: ""; position: fixed; inset: 0; z-index: 100; background: var(--bg); }
.site-opening { position: fixed; inset: 0; z-index: 101; overflow: hidden; background: var(--bg); transition: opacity .6s ease; }
.site-opening[hidden] { display: none; }
.site-opening:not([hidden]) { display: grid; place-items: center; }
.site-opening.is-leaving { opacity: 0; pointer-events: none; }
.opening-mark { position: relative; display: grid; justify-items: center; gap: 4px; translate: 0 -15px; transition: opacity .3s ease,transform .6s cubic-bezier(.2,.7,.2,1); }
.opening-art { width: min(68vw,280px); height: auto; overflow: visible; }
.opening-wordmark { color: var(--text); font: 750 44px/1 system-ui,sans-serif; letter-spacing: -1.7px; animation: opening-wordmark .7s .28s both; }
.opening-ring { stroke: var(--accent); stroke-width: 1; stroke-opacity: .55; stroke-dasharray: 1; stroke-dashoffset: 1; animation: opening-trace 1.05s var(--ring-delay,0s) cubic-bezier(.2,.7,.2,1) forwards; }
.opening-turn { transform-origin: 160px 160px; animation: opening-turn 2.3s cubic-bezier(.2,.7,.2,1) both; }
.opening-core { fill: var(--accent); transform-box: fill-box; transform-origin: center; animation: opening-core 1.35s cubic-bezier(.2,.7,.2,1) both; }
.opening-core-halo { stroke: var(--accent); stroke-width: .7; stroke-opacity: .25; transform-box: fill-box; transform-origin: center; animation: opening-wordmark .8s .2s both; }
.opening-spark { fill: var(--accent); opacity: 0; animation: opening-spark .95s .4s both; }
.opening-spark--two { animation-delay: .7s; }
.opening-satellite { fill: var(--accent); opacity: 0; animation: opening-spark .9s .5s both; }
.opening-satellite--two { animation-delay: .8s; }
.opening-halo { position: absolute; width: 180px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,rgb(217 76 22 / .1),rgb(217 76 22 / .025) 50%,transparent 70%); transition: transform .8s cubic-bezier(.1,.6,.2,1),opacity .6s; }
.site-opening.is-leaving .opening-mark { opacity: 0; transform: scale(1.14); }
.site-opening.is-leaving .opening-halo { transform: scale(16); opacity: 0; }
.opening-skip { position: absolute; right: max(24px,calc((100vw - 1240px) / 2)); bottom: 24px; display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 12px; border: 0; background: transparent; color: var(--muted); font: 13px/1.3 system-ui,sans-serif; }
.opening-skip:hover { color: var(--accent); }
@keyframes opening-trace { to { stroke-dashoffset: 0; } }
@keyframes opening-turn { from { transform: rotate(-42deg) scale(.82); } to { transform: rotate(18deg) scale(1); } }
@keyframes opening-core { 0% { transform: scale(0); } 45% { transform: scale(1.25); } 70%,100% { transform: scale(1); } }
@keyframes opening-wordmark { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes opening-spark { 0% { opacity: 0; } 50%,100% { opacity: 1; } }
@keyframes atmosphere-drift { from { transform: translate(-1%,-1%) scale(1); } to { transform: translate(1.5%,2%) scale(1.045); } }

.intro { position: relative; }
.intro-orbit {
  position: absolute;
  right: calc(100% + 28px);
  top: 50%;
  translate: 0 -50%;
  width: 218px;
  aspect-ratio: 1;
  pointer-events: none;
}
.intro-orbit canvas { display: block; width: 100%; height: 100%; }
.brand-dot { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.brand:hover .brand-dot { transform: scale(.78); }
.text-link span { display: inline-block; transition: transform .3s ease; }
.text-link:hover span { transform: translate(3px,-3px); }

@media (prefers-reduced-motion: no-preference) {
  html.home-motion .site-background::before { animation: atmosphere-drift 26s ease-in-out infinite alternate; }
  html.motion-paused .site-background::before { animation-play-state: paused; }
  html.home-motion .preview {
    transform: perspective(800px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(var(--lift,0px));
    transition: transform .45s cubic-bezier(.2,.7,.2,1);
  }
  html.home-motion .tool-card:hover { --lift: -5px; }
  html.home-motion .mini-timer svg { animation: timer-orbit 24s linear infinite; }
  html.home-motion .mini-note { animation: note-float 7s ease-in-out infinite; }
  html.home-motion .mini-note i {
    transform-origin: left;
    animation: note-lines 7s ease-in-out infinite;
    animation-delay: calc(var(--line-index,0) * .15s);
  }
  html.home-motion .mini-bars i {
    transform-origin: bottom;
    animation: probability-wave 5.2s ease-in-out infinite;
    animation-delay: calc(var(--bar-index,0) * -.12s);
  }
  html.home-motion .tool-card:not(.motion-in-view) *,
  html.home-motion.motion-paused .mini-timer svg,
  html.home-motion.motion-paused .mini-note,
  html.home-motion.motion-paused .mini-note i,
  html.home-motion.motion-paused .mini-bars i { animation-play-state: paused; }
}
@keyframes timer-orbit { to { transform: rotate(360deg); } }
@keyframes note-float {
  0%,100% { transform: translateY(2px) rotate(-2deg); }
  50% { transform: translateY(-5px) rotate(1deg); }
}
@keyframes note-lines {
  0%,60%,100% { transform: scaleX(1); opacity: 1; }
  78% { transform: scaleX(.6); opacity: .4; }
}
@keyframes probability-wave {
  0%,100% { transform: scaleY(1); }
  50% { transform: scaleY(.72); }
}
@media (max-width:1100px) and (min-width:761px) {
  .intro-orbit { width: calc(15vw - 28px); right: calc(100% + 12px); }
}
@media (max-width:760px) {
  .intro-orbit { position: relative; top: auto; right: auto; translate: none; width: 118px; margin: -28px 0 15px -10px; }
}
@media (prefers-reduced-motion:reduce) {
  html.opening-pending { overflow: auto; }
  html.opening-pending body::before,.site-opening { display: none; }
  .brand-dot,.text-link span { transition: none; }
  .tool-card:hover .preview,.brand:hover .brand-dot,.text-link:hover span { transform: none; }
}