/* telosnexus.space — Canva "Soft/Human" mode: warm neutrals, gentle purples, editorial calm. */
.surface-space { --canvas: #EFE8DE; --rule: rgb(13 13 26 / .14); background: var(--canvas); }
html:has(.surface-space) { background: #EFE8DE; }
.surface-space .top.is-solid { background: rgb(239 232 222 / .9); }
.logo__sub { padding-inline-start: 12px; margin-inline-start: 2px; border-inline-start: 1px solid var(--rule); font-family: var(--text-en); font-weight: 500; font-size: 1rem; }
.s-hero { min-height: max(620px, 86svh); display: grid; align-content: end; gap: clamp(40px, 6vw, 80px); padding-block-start: calc(var(--top-h) + 64px); }
.s-hero .pair { max-width: 920px; }
@media (prefers-reduced-motion: no-preference) {
  .js .s-hero .display > span { animation: rise 1s cubic-bezier(.22,.8,.24,1) both; }
  .js .s-hero .display > span:nth-child(2) { animation-delay: .1s; }
}
.project { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.project__art { border-radius: var(--radius); background: radial-gradient(120% 100% at 30% 20%, #F8F2EA 0%, #E8E0D5 60%, #D9CDBE 100%); aspect-ratio: 600 / 420; overflow: hidden; }
.project__art svg { width: 100%; height: 100%; }
.page rect { fill: #FFFBF8; stroke: rgb(13 13 26 / .12); }
.page--back rect { fill: #F3ECE3; } .page--mid rect { fill: #F8F2EA; }
.page line { stroke: rgb(13 13 26 / .22); stroke-width: 5; stroke-linecap: round; }
.page .page__hl { fill: rgb(117 15 183 / .18); stroke: rgb(117 15 183 / .5); }
.trace { fill: none; stroke: #750FB7; stroke-width: 2.5; stroke-dasharray: 6 7; }
.trace__node { fill: #750FB7; }
.project__body { display: grid; gap: 20px; align-content: start; }
.project:hover .display { color: var(--brand); }
.project .display { transition: color .3s; }
@media (prefers-reduced-motion: no-preference) {
  .page { transition: transform 1s cubic-bezier(.22,.8,.24,1); }
  .project:hover .page--back { transform: translate(-14px, 6px); }
  .project:hover .page--front { transform: translate(10px, -6px); }
}
.s-next { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 40px; }
.s-next > h2 { grid-column: 1 / 8; } .s-next .pair { grid-column: 8 / -1; align-self: end; }
.s-mail { margin-block-start: 12px; }
@media (max-width: 1100px) { .project { grid-template-columns: 1fr; } .s-next > h2, .s-next .pair { grid-column: 1 / -1; } .top__nav { display: none; } }

/* motion: pages settle into a stack, the line is found, the trace carries it to its source */
.trace__pulse { fill: none; stroke: #750FB7; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0 100; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .project__art:not(.tnm-live) .page { opacity: 0; }
  .js .project__art.tnm-live .page { animation: s-settle 1.1s cubic-bezier(.22,.8,.24,1) both; }
  .js .project__art.tnm-live .page--back { animation-delay: .05s; }
  .js .project__art.tnm-live .page--mid { animation-delay: .2s; }
  .js .project__art.tnm-live .page--front { animation-delay: .35s; }
  .js .project__art.tnm-live .page line { stroke-dasharray: 220; animation: tnm-draw .9s ease both; animation-delay: 1s; }
  .js .project__art.tnm-live .page__hl { transform-box: fill-box; transform-origin: left; animation: s-find 1s cubic-bezier(.22,.8,.24,1) both 1.6s; }
  .js .project__art.tnm-live .trace { stroke-dashoffset: 0; animation: s-trace 1.2s ease both 2.2s; }
  .js .project__art.tnm-live .trace__node { transform-box: fill-box; transform-origin: center; animation: tnm-drop .6s cubic-bezier(.22,.8,.24,1) both 3.2s; }
  .js .project__art.tnm-live .trace__pulse { animation: s-pulse 3.2s cubic-bezier(.5,0,.25,1) infinite 3.8s; }
  .js .project__art.tnm-paused .trace__pulse { animation-play-state: paused; }
  .js .s-hero .display > span { animation: rise 1s cubic-bezier(.22,.8,.24,1) both; }
}
@keyframes s-settle { from { opacity: 0; transform: translate(40px, -28px) rotate(4deg); } }
@keyframes s-find { from { transform: scaleX(0); } }
@keyframes s-trace { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes s-pulse { 0% { stroke-dasharray: 0 100; stroke-dashoffset: 0; opacity: 0; } 10% { opacity: 1; stroke-dasharray: 14 100; } 85% { opacity: 1; stroke-dasharray: 14 100; } 100% { stroke-dasharray: 0 100; stroke-dashoffset: -100; opacity: 0; } }