html { scroll-behavior: smooth; }
body { margin: 0; background: #0A0A0A; -webkit-font-smoothing: antialiased; }
::selection { background: #7B2DFF; color: #0A0A0A; }

/* hand-built macron for the ē in "Technē" — centered over the e, since the font's precomposed glyph sits off to the right */
.tm-e { position: relative; display: inline-block; line-height: 1; vertical-align: baseline; }
.tm-e::after { content: ""; position: absolute; left: 50%; top: 0.17em; transform: translateX(-50%); width: 0.42em; height: 0.05em; background: currentColor; border-radius: 1px; pointer-events: none; }

/* logo lockup: triangle + square SVG, brush-ring PNG overlaid, wordmark */
.tm-logo { font-family:'Michroma',system-ui,sans-serif; text-transform:uppercase; letter-spacing:0.34em; font-weight:400; line-height:1; white-space:nowrap; }
.tm-mac { position:relative; }
.tm-mac::after { content:""; position:absolute; left:0; right:0.34em; top:-0.22em; height:0.06em; background:currentColor; }
.tm-lockup { position:relative; display:inline-block; aspect-ratio:340 / 190; flex:none; }
.tm-lockup > svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.tm-lockup > .tm-circle { position:absolute; left:35.55%; top:26.75%; width:28.9%; aspect-ratio:1 / 1; background:url('../assets/ring-orange.png') center / contain no-repeat; }
.tm-lockup > .tm-circle.tm-circle-bold { background-image:url('../assets/ring-orange-bold.png'); }
.tm-lockup > .tm-circle.tm-circle-heavy { background-image:url('../assets/ring-orange-heavy.png'); }

/* shared keyframes */
@keyframes te-floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
@keyframes te-floaty2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(16px); } }
@keyframes te-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes te-cue { 0% { transform: translateY(0); opacity: .3; } 50% { transform: translateY(10px); opacity: 1; } 100% { transform: translateY(0); opacity: .3; } }
@keyframes te-morph {
  0%   { opacity: 0; transform: scale(0.25) rotate(-130deg); }
  8%   { opacity: 1; transform: scale(1.15) rotate(8deg); }
  13%  { transform: scale(1) rotate(0deg); }
  33%  { opacity: 1; transform: scale(1) rotate(0deg); }
  45%  { opacity: 0; transform: scale(0.25) rotate(130deg); }
  100% { opacity: 0; transform: scale(0.25) rotate(130deg); }
}
@keyframes te-blobA { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(38px,30px) scale(1.18); } }
@keyframes te-blobB { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(-34px,-26px) scale(1.12); } }
@keyframes te-blobC { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(26px,-32px) scale(0.9); } }
@keyframes te-floatShape { 0%,100% { transform:translate(0,0) rotate(0deg); } 50% { transform:translate(-14px,18px) rotate(20deg); } }
@keyframes te-floatShape2 { 0%,100% { transform:translate(0,0) rotate(0deg); } 50% { transform:translate(16px,-14px) rotate(-18deg); } }

[data-emblem] { animation: te-floaty 11s ease-in-out infinite; }
[data-emblem2] { animation: te-floaty2 13s ease-in-out infinite; }
[data-cue] { animation: te-cue 2.6s ease-in-out infinite; }