.orbit-hero {
position: relative;
overflow: hidden;
isolation: isolate;
background: var(--ty-color-ink);
color: var(--ty-color-text-onink);
padding: clamp(56px, 8vw, 108px) 0 clamp(48px, 7vw, 96px);
}
.orbit-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.orbit-hero__bg picture { position: absolute; inset: 0; display: block; }
.orbit-hero__bg-img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
object-position: 50% 22%;
}
.orbit-hero__bg-img--1 { opacity: 1; }
.orbit-hero__bg-img--2 { opacity: 0; animation: orbit-crossfade 30s ease-in-out infinite; }
@media (min-width: 901px) {
.orbit-hero__bg-img { object-position: 80% 26%; }
}
.orbit-hero__scrim {
position: absolute; inset: 0;
background:
linear-gradient(100deg,
color-mix(in srgb, var(--ty-color-ink) 82%, transparent) 0%,
color-mix(in srgb, var(--ty-color-ink) 62%, transparent) 34%,
color-mix(in srgb, var(--ty-color-ink) 30%, transparent) 60%,
color-mix(in srgb, var(--ty-color-ink) 46%, transparent) 100%),
radial-gradient(130% 140% at 50% 6%, transparent 30%, color-mix(in srgb, var(--ty-color-ink) 42%, transparent) 100%);
}
@media (max-width: 900px) {
.orbit-hero__scrim {
background:
linear-gradient(180deg,
color-mix(in srgb, var(--ty-color-ink) 38%, transparent) 0%,
color-mix(in srgb, var(--ty-color-ink) 74%, transparent) 58%,
var(--ty-color-ink) 100%);
}
}
.orbit-hero__layout {
position: relative; z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: clamp(40px, 7vw, 96px);
align-items: center;
}
@media (max-width: 900px) {
.orbit-hero__layout { grid-template-columns: 1fr; text-align: center; }
}
.orbit-hero h1, .orbit-hero .h1 { color: #fff; margin-bottom: var(--ty-space-md); }
.orbit-hero .accent { background: linear-gradient(92deg, var(--ty-color-primary-onink), #fff 120%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.orbit-hero .lead { color: var(--ty-color-text-onink-muted); font-size: clamp(1.05rem, .5vw + 1rem, 1.3rem); margin-bottom: 0; }
.orbit-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.orbit-hero__cta--desktop { margin: var(--ty-space-xl) 0 var(--ty-space-md); }
.orbit-hero__note { font-size: var(--ty-font-size-sm); color: var(--ty-color-text-onink-muted); margin: 0; }
.orbit-hero__cta--mobile, .orbit-hero__note--mobile { display: none; }
@media (max-width: 900px) {
.orbit-hero__cta { justify-content: center; }
.orbit-hero__cta--desktop, .orbit-hero__note--desktop { display: none; }
.orbit-hero__cta--mobile { display: flex; margin: var(--ty-space-lg) 0 0; }
.orbit-hero__note--mobile { display: block; margin-top: var(--ty-space-sm); }
}
.orbit-hero__wrap { display: flex; flex-direction: column; align-items: center; gap: var(--ty-space-lg); }
@media (max-width: 900px) { .orbit-hero__wrap { margin-top: var(--ty-space-xl); } }
.orbit-hero__system {
position: relative;
width: clamp(460px, 34vw, 560px);
aspect-ratio: 1 / 1;
isolation: isolate;
--planet-size: 58px;
}
@media (max-width: 1180px) { .orbit-hero__system { width: clamp(420px, 44vw, 520px); --planet-size: 54px; } }
@media (max-width: 900px)  { .orbit-hero__system { width: min(74vw, 420px); --planet-size: 50px; } }
@media (max-width: 560px)  { .orbit-hero__system { width: min(78vw, 300px); --planet-size: 38px; } }
.orbit-hero__glow {
position: absolute; inset: -22%; z-index: 0; border-radius: 50%;
background:
radial-gradient(circle, color-mix(in srgb, var(--ty-color-primary) 40%, transparent) 0%, transparent 62%),
radial-gradient(circle, color-mix(in srgb, var(--ty-color-ink) 55%, transparent) 0%, transparent 78%);
}
.orbit-hero__core {
position: absolute; inset: 0; margin: auto; z-index: 3;
width: 26%; height: 26%; min-width: 76px; min-height: 76px; max-width: 128px; max-height: 128px;
border-radius: 50%;
display: grid; place-items: center;
background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--ty-color-primary) 65%, var(--ty-color-ink)) 0%, var(--ty-color-ink) 76%);
box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ty-color-primary-onink) 55%, transparent), 0 0 40px 6px color-mix(in srgb, var(--ty-color-primary) 35%, transparent), var(--ty-shadow-lg);
animation: orbit-heartbeat 3.6s ease-in-out infinite;
}
@keyframes orbit-heartbeat { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.055); } 60% { transform: scale(.99); } }
.orbit-hero__core-pulse {
position: absolute; inset: -22%; border-radius: 50%;
border: 1.5px solid color-mix(in srgb, var(--ty-color-primary-onink) 60%, transparent);
animation: orbit-core-ring 3.6s ease-out infinite;
}
.orbit-hero__core-pulse--2 { animation-delay: 1.8s; }
@keyframes orbit-core-ring { 0% { transform: scale(.68); opacity: .9; } 85%, 100% { transform: scale(1.55); opacity: 0; } }
.orbit-hero__yoke { width: 42%; height: auto; color: var(--ty-color-primary-onink); }
.orbit-hero__yoke-hub { fill: var(--ty-color-surface); }
.orbit-hero__yoke rect, .orbit-hero__yoke circle:not(.orbit-hero__yoke-hub) { fill: currentColor; }
.orbit-hero__core-label {
position: absolute; bottom: -2.15em; left: 50%; transform: translateX(-50%);
font-size: .74rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
color: #fff;
background: color-mix(in srgb, var(--ty-color-ink) 60%, transparent);
padding: 2px 10px; border-radius: var(--ty-radius-pill);
}
.orbit-hero__sweep {
position: absolute; inset: 0; margin: auto; z-index: 1; border-radius: 50%;
width: calc(100% - var(--planet-size)); height: calc(100% - var(--planet-size));
background: conic-gradient(from 0deg,
color-mix(in srgb, var(--ty-color-primary-onink) 70%, transparent) 0deg,
color-mix(in srgb, var(--ty-color-primary-onink) 22%, transparent) 20deg,
transparent 46deg, transparent 360deg);
mix-blend-mode: screen;
animation: orbit-spin 22s linear infinite;
pointer-events: none;
}
.orbit-hero__track {
position: absolute; inset: 0; margin: auto; z-index: 1;
width: calc(100% - var(--planet-size)); height: calc(100% - var(--planet-size));
border-radius: 50%;
border: 2px solid color-mix(in srgb, var(--ty-color-primary-onink) 48%, transparent);
border-style: dashed;
box-shadow: 0 0 24px color-mix(in srgb, var(--ty-color-primary-onink) 18%, transparent) inset;
animation: orbit-spin var(--dur, 46s) linear infinite reverse;
}
@keyframes orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.orbit-hero__spoke { position: absolute; inset: 0; transform: rotate(calc(var(--angle, 0) * 1deg)); pointer-events: none; }
.orbit-hero__point { position: absolute; top: 0; left: 50%; width: 0; height: 0; pointer-events: none; }
.orbit-hero__counter {
position: absolute; top: 0; left: 0; z-index: 2;
transform: rotate(calc(var(--angle, 0) * -1deg));
animation: orbit-counter var(--dur, 46s) linear infinite reverse;
pointer-events: none;
}
@keyframes orbit-counter {
from { transform: rotate(calc(var(--angle, 0) * -1deg)); }
to   { transform: rotate(calc(var(--angle, 0) * -1deg - 360deg)); }
}
.orbit-hero__planet {
position: absolute; top: 0; left: 0; transform: translate(-50%, -50%);
display: flex; flex-direction: column; align-items: center; gap: 6px;
text-decoration: none !important;
pointer-events: auto;
z-index: 2;
}
.orbit-hero__planet-dot {
position: relative;
width: var(--planet-size, 52px); height: var(--planet-size, 52px);
border-radius: 50%;
display: grid; place-items: center;
background: linear-gradient(150deg, color-mix(in srgb, var(--ty-color-primary) 30%, var(--ty-color-surface) 12%) 0%, color-mix(in srgb, var(--ty-color-ink) 70%, var(--ty-color-surface) 4%) 100%);
border: 1.5px solid color-mix(in srgb, var(--ty-color-primary-onink) 55%, transparent);
box-shadow: 0 6px 18px -4px rgba(0,0,0,.55), inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent);
color: var(--ty-color-primary-onink);
transition: transform var(--ty-motion-standard) var(--ty-ease), background var(--ty-motion-standard) var(--ty-ease),
border-color var(--ty-motion-standard) var(--ty-ease), color var(--ty-motion-standard) var(--ty-ease);
}
.orbit-hero__planet-icon { display: grid; place-items: center; width: 54%; height: 54%; }
.orbit-hero__planet-icon svg { width: 100%; height: 100%; }
.orbit-hero__planet-badge {
position: absolute; top: -4px; right: -4px; z-index: 1;
min-width: 18px; height: 18px; padding: 0 4px;
border-radius: var(--ty-radius-pill);
background: var(--ty-color-primary); color: #fff;
font-size: .62rem; font-weight: 800; line-height: 18px; text-align: center;
box-shadow: 0 0 0 2px var(--ty-color-ink);
}
.orbit-hero__planet-label {
font-size: .86rem; font-weight: 700; white-space: nowrap;
color: #fff;
background: color-mix(in srgb, var(--ty-color-ink) 58%, transparent);
padding: 3px 11px; border-radius: var(--ty-radius-pill);
}
@media (max-width: 1180px) {
.orbit-hero__planet-label { font-size: .78rem; padding: 2px 9px; }
}
.orbit-hero__planet:hover .orbit-hero__planet-dot, .orbit-hero__planet:focus-visible .orbit-hero__planet-dot {
background: var(--ty-color-primary);
border-color: var(--ty-color-primary-onink);
color: #fff;
transform: scale(1.12);
}
.orbit-hero__planet:focus-visible { outline: none; }
.orbit-hero__planet:focus-visible .orbit-hero__planet-dot { box-shadow: var(--ty-focus-ring), 0 6px 18px -4px rgba(0,0,0,.55); }
.orbit-hero__system:hover .orbit-hero__planet:not(:hover),
.orbit-hero__system:focus-within .orbit-hero__planet:not(:focus-visible) {
opacity: .5;
}
.orbit-hero__planet-glow {
position: absolute; inset: -55%; border-radius: 50%; z-index: -1;
background: radial-gradient(circle, color-mix(in srgb, var(--ty-color-primary-onink) 75%, transparent) 0%, transparent 70%);
opacity: 0;
animation-name: orbit-planet-glow; animation-duration: var(--dur, 46s); animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes orbit-planet-glow { 0%, 9%, 100% { opacity: 0; } 3% { opacity: 1; } }
.orbit-hero__tooltip {
position: absolute; left: 50%; bottom: calc(100% + 12px);
transform: translateX(-50%) translateY(4px);
width: max-content; max-width: min(230px, 60vw);
background: var(--ty-color-surface); color: var(--ty-color-text);
border-radius: var(--ty-radius-card); box-shadow: var(--ty-shadow-lg);
padding: 10px 14px; text-align: left;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity var(--ty-motion-standard) var(--ty-ease), transform var(--ty-motion-standard) var(--ty-ease);
z-index: 30;
}
.orbit-hero__tooltip strong { display: block; font-size: .82rem; margin-bottom: 2px; color: var(--ty-color-text); }
.orbit-hero__tooltip span { display: block; font-size: .8rem; line-height: 1.35; color: var(--ty-color-text-muted); }
.orbit-hero__tooltip::after {
content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
border: 6px solid transparent; border-top-color: var(--ty-color-surface);
}
.orbit-hero__planet:hover .orbit-hero__tooltip,
.orbit-hero__planet:focus-visible .orbit-hero__tooltip {
opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
@media (max-width: 560px) {
.orbit-hero__planet-label { display: none; }
}
.orbit-hero__tick-spoke {
position: absolute; inset: 0; margin: auto; z-index: 1;
width: calc(100% - var(--planet-size)); height: calc(100% - var(--planet-size));
transform: rotate(calc(var(--angle, 0) * 1deg)); pointer-events: none;
}
.orbit-hero__tick {
position: absolute; top: 0; left: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
border-radius: 50%; background: var(--ty-color-primary-onink); opacity: .3;
animation: orbit-tick 22s linear infinite;
animation-delay: var(--tick-delay, 0s);
}
@keyframes orbit-tick { 0%, 90%, 100% { opacity: .3; transform: scale(1); } 95% { opacity: 1; transform: scale(2); } }
.orbit-hero__pulse-track { position: absolute; inset: 0; z-index: 1; width: calc(100% - var(--planet-size)); height: calc(100% - var(--planet-size)); margin: auto; animation: orbit-spin var(--dur, 46s) linear infinite reverse; pointer-events: none; }
.orbit-hero__pulse-dot {
position: absolute; top: 0; left: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
border-radius: 50%;
background: radial-gradient(circle, #fff 0%, var(--ty-color-primary-onink) 55%, transparent 78%);
box-shadow: 0 0 18px 5px color-mix(in srgb, var(--ty-color-primary-onink) 70%, transparent);
}
.orbit-hero__caption {
position: relative; min-height: 2.6em; width: min(92vw, 480px);
display: grid; place-items: center; text-align: center;
}
.orbit-hero__caption-slot {
grid-area: 1 / 1; margin: 0;
font-size: 1rem; font-weight: 600; color: #fff;
background: color-mix(in srgb, var(--ty-color-ink) 62%, transparent);
border: 1px solid color-mix(in srgb, var(--ty-color-primary-onink) 30%, transparent);
border-radius: var(--ty-radius-pill);
padding: 10px 22px;
opacity: 0;
animation-name: orbit-caption; animation-duration: var(--dur, 46s); animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes orbit-caption { 0% { opacity: 1; } 11% { opacity: 1; } 11.01% { opacity: 0; } 100% { opacity: 0; } }
.orbit-hero__caption-slot:first-child { opacity: 1; }
.orbit-hero__system:hover .orbit-hero__motion,
.orbit-hero__system:focus-within .orbit-hero__motion,
.orbit-hero__system.is-idle .orbit-hero__motion {
animation-play-state: paused;
}
.orbit-hero__wrap:has(.orbit-hero__system:hover) .orbit-hero__caption-slot,
.orbit-hero__wrap:has(.orbit-hero__system:focus-within) .orbit-hero__caption-slot,
.orbit-hero__wrap:has(.orbit-hero__system.is-idle) .orbit-hero__caption-slot {
animation-play-state: paused;
}
.orbit-hero__list { margin: 0; padding: 0; }
@media (prefers-reduced-motion: reduce) {
.orbit-hero__track,
.orbit-hero__counter,
.orbit-hero__sweep,
.orbit-hero__tick,
.orbit-hero__planet-glow,
.orbit-hero__pulse-track,
.orbit-hero__caption-slot,
.orbit-hero__core,
.orbit-hero__core-pulse,
.orbit-hero__bg-img--2 {
animation: none !important;
}
.orbit-hero__bg-img--2 { opacity: 0; }
.orbit-hero__pulse-dot { opacity: .6; }
.orbit-hero__planet, .orbit-hero__tooltip, .orbit-hero__planet-dot { transition: none; }
.orbit-hero__spoke:first-child .orbit-hero__planet-dot {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ty-color-primary-onink) 55%, transparent), 0 6px 18px -4px rgba(0,0,0,.55);
}
}