@font-face{
  font-family:"Syne";
  src:url("fonts/Syne-Variable.ttf") format("truetype");
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
}
@font-face{
  font-family:"DM Mono";
  src:url("fonts/DMMono-Regular.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:"Michroma Local";
  src:url("fonts/Michroma-Regular.woff2?v=1") format("woff2");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

/* The former image glow is disabled; this lockup is built from live text. */
.hero::before,.hero::after,.top-logo::before,.top-logo::after{content:none!important}
.brand-lockup{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);width:min(720px,88vw);margin-inline:auto;padding:46px 0 38px;place-items:center;color:#f5f7fa;isolation:isolate}
.top-logo .brand-lockup{padding:42px 0 34px}
.brand-name{order:1;display:flex;align-items:center;justify-content:center;gap:clamp(5px,.65vw,10px);font-family:"Michroma Local",Arial,sans-serif!important;font-size:0;font-weight:400;line-height:1;letter-spacing:0;white-space:nowrap;text-transform:uppercase}
.brand-name span{display:inline-block;height:clamp(42px,5.1vw,68px);overflow:hidden;color:transparent;background-position:center;background-repeat:no-repeat;background-size:contain;opacity:0;will-change:transform,filter,opacity}
.brand-name .brand-white{width:clamp(136px,16.56vw,231px);background-image:url("brand-ian.png")}
.brand-name .brand-green{width:clamp(148px,17.97vw,251px);background-image:url("brand-tiai.png?v=2")}
.brand-name .brand-white{filter:drop-shadow(0 0 6px rgba(255,255,255,.18));animation:brandPartLeft 1.35s cubic-bezier(.2,.72,.2,1) .12s forwards}
.brand-name .brand-green{filter:drop-shadow(0 0 10px rgba(0,229,160,.28));animation:brandPartRight 1.35s cubic-bezier(.2,.72,.2,1) .12s forwards}
.brand-rule{order:3;position:relative;justify-self:center;width:min(1040px,calc(100vw - 48px));height:1px;margin-top:20px;background:linear-gradient(90deg,transparent,rgba(0,229,160,.62) 28%,rgba(205,255,242,.92) 49%,rgba(60,170,255,.68) 70%,transparent);box-shadow:0 0 7px rgba(0,229,160,.72),0 0 18px rgba(60,170,255,.36);transform:scaleX(0);transform-origin:center;animation:brandRuleIn 1.15s cubic-bezier(.2,.7,.2,1) .72s forwards}
.brand-rule::after{content:"";position:absolute;inset:-20px 8% -20px;z-index:-1;background:radial-gradient(ellipse at center,rgba(0,229,160,.16),transparent 68%);filter:blur(10px);animation:brandGlowBreath 7s ease-in-out infinite}
.brand-rule i{position:absolute;top:50%;left:10%;width:86px;height:4px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse at center,#fff 0,#b8ffe6 17%,rgba(0,229,160,.72) 42%,transparent 76%);box-shadow:0 0 8px rgba(255,255,255,.85),0 0 20px rgba(0,229,160,.72),0 0 38px rgba(0,229,160,.42);filter:blur(.7px);opacity:0;animation:brandSweep 5.5s ease-in-out 1.65s infinite}
.brand-tagline{order:2;display:flex;align-items:center;justify-content:center;gap:clamp(7px,.8vw,12px);margin-top:20px;font-family:"Michroma Local",Arial,sans-serif!important;font-size:0;font-weight:400;line-height:1;letter-spacing:0;white-space:nowrap;text-transform:uppercase}
.brand-tagline span{--from-x:0px;--from-y:0px;display:inline-block;height:clamp(9px,.78vw,12px);overflow:hidden;color:transparent;background-position:center;background-repeat:no-repeat;background-size:contain;opacity:0;animation:brandSloganIn .92s cubic-bezier(.16,.78,.18,1) forwards}
.brand-tagline span:nth-child(1){width:clamp(82px,7.1vw,109px);background-image:url("brand-think.png")}
.brand-tagline span:nth-child(2){width:clamp(72px,6.2vw,96px);background-image:url("brand-code.png")}
.brand-tagline span:nth-child(3){width:clamp(89px,7.7vw,118px);background-image:url("brand-trade.png")}
.brand-tagline span:nth-child(4){width:clamp(63px,5.45vw,84px);background-image:url("brand-live.png?v=2")}
.brand-tagline span:nth-child(1){--from-x:-46px;animation-delay:1.02s}
.brand-tagline span:nth-child(2){--from-x:-18px;animation-delay:1.13s}
.brand-tagline span:nth-child(3){--from-x:18px;animation-delay:1.24s}
.brand-tagline span:nth-child(4){--from-x:46px;animation-delay:1.35s;filter:drop-shadow(0 0 6px rgba(0,229,160,.55))}
@keyframes brandPartLeft{from{opacity:0;transform:translateX(-38px) scaleX(.88);filter:blur(9px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes brandPartRight{from{opacity:0;transform:translateX(38px) scaleX(.88);filter:blur(9px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes brandRuleIn{to{transform:scaleX(1)}}
@keyframes brandSweep{0%{left:10%;opacity:0}15%{opacity:1}50%{left:90%;opacity:1}68%,100%{left:90%;opacity:0}}
@keyframes brandGlowBreath{0%,100%{opacity:.35}50%{opacity:.8}}
@keyframes brandSloganIn{from{opacity:0;transform:translate(var(--from-x),var(--from-y)) scale(.94);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}

/* Subpages keep a fixed header. Replaying the entrance transforms on every
   page load/navigation caused the visible jump (“Zucken”). The animated
   hero on the home page remains unchanged. */
.top-logo .brand-name span,
.top-logo .brand-tagline span{
  opacity:1;
  transform:none;
  animation:none;
  will-change:auto;
}
.top-logo .brand-rule{
  transform:scaleX(1);
  animation:none;
}
@media(max-width:580px){
  .brand-lockup,.top-logo .brand-lockup{width:min(88vw,520px);padding:22px 0 16px}
  .brand-name{font-size:clamp(36px,11.5vw,52px);letter-spacing:.045em}
  .brand-name span,.brand-tagline span{opacity:1;transform:none;filter:none;animation:none;will-change:auto}
  .brand-rule{width:calc(100vw - 30px);margin-top:13px;transform:scaleX(1);animation:none}
  .brand-rule i,.brand-rule::after{display:none;animation:none}
  .brand-tagline{gap:.42em;margin-top:12px;font-size:clamp(6.5px,2vw,9px);letter-spacing:.07em}
}
@media(prefers-reduced-motion:reduce){.brand-name span,.brand-tagline span{opacity:1;transform:none;filter:none;animation:none}.brand-rule{transform:scaleX(1);animation:none}.brand-rule i,.brand-rule::after{animation:none}.brand-rule i{display:none}}

/* Play the entrance animation only on the first page of a session. Every later
   navigation (e.g. DE<->EN language switch) adds html.no-intro, so the lockup
   is shown instantly with no re-play — killing the "Zucken" on switch. */
html.no-intro .brand-name span,
html.no-intro .brand-tagline span{opacity:1;transform:none;filter:none;animation:none}
html.no-intro .brand-rule{transform:scaleX(1);animation:none}
html.no-intro .brand-rule i{opacity:0;animation:none}
html.no-intro .brand-rule::after{animation:none}