/* ============================================================================
   DTI BRAND LOCKUP  —  single source of truth for the header identity
   Loaded by every public page (home, pricing, contact, legal, careers, login)
   so the mark and the wordmark can never drift apart again.

   Grammar
     mark      chamfered chip + stencil D-T-I monogram (assets/fav/icon.svg)
     wordmark  two-line justified stack:
                 DATA TERMINAL      19px mono 700, gradient-clipped
                 ─────────────      1px gradient rule, exactly line-1 wide
                 I N T E L L I G E N C E   9px mono 600, tracked to match
   The tracking on line 2 is tuned so both lines end on the same pixel; if you
   change the line-1 size you must retune --dti-sub-track.
   ========================================================================== */

@property --dti-orbit {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
@keyframes dtiOrbitSpin { to { --dti-orbit: 360deg; } }
@keyframes dtiMarkFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
@keyframes dtiRuleWipe {
    0%   { transform: translateX(-115%); opacity: 0; }
    16%  { opacity: 1; }
    84%  { opacity: 1; }
    100% { transform: translateX(305%);  opacity: 0; }
}
/* Inline-SVG cut of the mark: the file at assets/fav/icon.svg carries these in
   its own <style> (an <img> is its own document); the inlined copy gets them
   from here so the rules stay scoped to .dti-mark. */
@keyframes dtiScanRun   { 0% { transform: translateY(0); } 100% { transform: translateY(80px); } }
@keyframes dtiBevelPulse{ 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.dti-mark .dti-scan  { animation: dtiScanRun 3.4s linear infinite; }
.dti-mark .dti-bevel { animation: dtiBevelPulse 2.6s ease-in-out infinite; }
.dti-lockup:hover .dti-mark .dti-scan { animation-duration: 1.5s; }

.dti-lockup {
    --dti-sub-track: .70em;
    display: inline-flex !important;
    align-items: center !important;
    gap: 13px !important;
    text-decoration: none !important;
    opacity: 1 !important;
    line-height: 1;
}

/* ---------- mark ---------- */
.dti-lockup .dti-mark {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: block;
    animation: dtiMarkFloat 4.4s ease-in-out infinite;
}
.dti-lockup .dti-mark > svg,
.dti-lockup .dti-mark > img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 13px rgba(24, 178, 190, .3));
    transition: filter .28s ease;
}
/* bloom — pre-rendered, only opacity animates */
.dti-lockup .dti-mark::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: -13px;
    border-radius: 50%;
    background: radial-gradient(closest-side,
        rgba(84, 240, 224, .42),
        rgba(52, 150, 255, .16) 56%,
        transparent 78%);
    filter: blur(7px);
    opacity: 0;
    transition: opacity .28s ease-out;
    pointer-events: none;
}
/* orbiting beam on the chip rim — matches the chip's 12r + chamfer as closely
   as a border-radius can, and only spins while hovered */
.dti-lockup .dti-mark::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: -2px;
    border-radius: 14px 5px 14px 14px;
    padding: 1.5px;
    background: conic-gradient(from var(--dti-orbit),
        transparent 0deg, transparent 244deg,
        rgba(64, 226, 255, .85) 308deg,
        #ffffff 334deg,
        rgba(60, 240, 214, .85) 350deg,
        transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    filter: blur(.6px);
    opacity: 0;
    transition: opacity .28s ease-out;
    pointer-events: none;
}
.dti-lockup:hover .dti-mark::before { opacity: 1; }
.dti-lockup:hover .dti-mark::after  { opacity: 1; animation: dtiOrbitSpin 2.6s linear infinite; }
.dti-lockup:hover .dti-mark > svg,
.dti-lockup:hover .dti-mark > img {
    filter: drop-shadow(0 5px 18px rgba(40, 226, 214, .5)) brightness(1.08) saturate(1.1);
}

/* ---------- wordmark ---------- */
.dti-lockup .dti-word {
    display: block;
    flex: 0 0 auto;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    white-space: nowrap;
}
.dti-lockup .dti-word-main {
    display: block;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 1.4px;
    background: linear-gradient(96deg, #ffffff 0%, #d6ecff 44%, #58efe0 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    transition: filter .28s ease;
}
.dti-lockup .dti-word-main i {
    font-style: normal;
    /* the gap between the two words is a tuned optical space, not a text space */
    display: inline-block;
    width: 7px;
}
.dti-lockup .dti-word-rule {
    position: relative;
    display: block;
    height: 1px;
    margin: 4px 0 3px;
    /* clips the travelling highlight so the rule can never poke out past the
       wordmark and break the flush two-line stack */
    overflow: hidden;
    background: linear-gradient(90deg,
        rgba(88, 239, 224, .95) 0%,
        rgba(120, 190, 255, .55) 52%,
        rgba(120, 190, 255, 0) 100%);
    transition: filter .28s ease;
}
.dti-lockup .dti-word-rule::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 36%;
    background: linear-gradient(90deg, transparent, #c6fff7, transparent);
    animation: dtiRuleWipe 5.2s ease-in-out infinite;
}
.dti-lockup .dti-word-sub {
    display: block;
    font-size: 9px;
    font-weight: 600;
    color: #6fe6dc;
    letter-spacing: var(--dti-sub-track);
    /* letter-spacing also trails the final glyph — pull it back so line 2 ends
       flush with line 1 instead of overhanging by one track unit */
    margin-right: calc(var(--dti-sub-track) * -1);
    text-shadow: 0 0 14px rgba(64, 230, 219, .35);
    transition: color .28s ease, text-shadow .28s ease;
}
.dti-lockup:hover .dti-word-main { filter: brightness(1.12); }
.dti-lockup:hover .dti-word-rule { filter: brightness(1.35); }
.dti-lockup:hover .dti-word-sub {
    color: #a8fff4;
    text-shadow: 0 0 16px rgba(88, 239, 224, .6);
}

/* ---------- narrow viewports: shrink, never wrap ---------- */
@media (max-width: 900px) {
    .dti-lockup { gap: 10px !important; }
    .dti-lockup .dti-mark { width: 38px; height: 38px; }
    .dti-lockup .dti-word-main { font-size: 16px; letter-spacing: 1.1px; }
    .dti-lockup .dti-word-main i { width: 6px; }
    .dti-lockup .dti-word-sub { font-size: 7.5px; }
}
@media (max-width: 420px) {
    .dti-lockup { gap: 9px !important; }
    .dti-lockup .dti-mark { width: 34px; height: 34px; }
    .dti-lockup .dti-word-main { font-size: 14px; letter-spacing: .8px; }
    .dti-lockup .dti-word-sub { font-size: 6.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .dti-lockup .dti-mark,
    .dti-lockup .dti-word-rule::after,
    .dti-mark .dti-bevel,
    .dti-lockup:hover .dti-mark::after { animation: none !important; }
    .dti-lockup .dti-word-rule::after { opacity: 0; }
    .dti-mark .dti-scan { animation: none !important; opacity: 0; }
}