/* Gateway · signal field. The symbol assembles (Marca), the dot emits one wave that
   lights the Voces, and the threads close with the signature. Text stays HTML. */
.gateway .hx-field{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity .9s cubic-bezier(.2,0,0,1)}
.gateway .hx-field.is-ready{opacity:1}
.gateway .gateway__symbol svg{display:block;width:100%;height:auto;overflow:visible}

/* Quiet instrument readout in the corners. */
.gateway .hx-hud{position:absolute;left:48px;right:48px;bottom:34px;z-index:2;display:flex;justify-content:space-between;align-items:baseline;pointer-events:none;font-family:var(--font-mono,"IBM Plex Mono",ui-monospace,monospace);font-size:11px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:#87837D;font-variant-numeric:tabular-nums}
.gateway .hx-hud b{font-weight:500;color:#1A1917}
.gateway .hx-hud i{font-style:normal;color:#D6D2CC;margin:0 .35em}
.gateway .hx-hud>span:first-child::before{content:"";display:inline-block;width:6px;height:6px;margin-right:10px;border-radius:50%;background:#F97316;vertical-align:1px}
@media(max-width:900px),(max-height:620px){.gateway .hx-hud{display:none}}

@media(prefers-reduced-motion:no-preference){
 /* Marca: the stem rises, then the dot lands. */
 .gateway .hx-symbol__l{transform-box:fill-box;animation:hx-rise .9s cubic-bezier(.2,0,0,1) .08s both}
 .gateway .hx-symbol__dot{transform-box:fill-box;transform-origin:center;animation:hx-dot .42s cubic-bezier(.2,0,0,1) .74s both}
 .gateway .gateway__brand{animation:hx-fade .8s cubic-bezier(.2,0,0,1) .22s both}
 /* Statement: each line slides out of its own mask. */
 .gateway .gateway__lead,.gateway .gateway__claim{overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
 .gateway .hx-line{display:inline-block;animation:hx-line 1s cubic-bezier(.2,0,0,1) .3s both}
 .gateway .gateway__claim .hx-line{animation-delay:.42s}
 /* Firma: the period is the last mark to arrive. */
 .gateway .gateway__period{display:inline-block;transform-origin:50% 80%;animation:hx-period .42s cubic-bezier(.2,0,0,1) 1.3s both}
 .gateway .gateway__actions .gate-button{animation:hx-fade .8s cubic-bezier(.2,0,0,1) .72s both}
 .gateway .gateway__actions .gate-button+.gate-button{animation-delay:.84s}
 .gateway .hx-hud{animation:hx-fade 1s cubic-bezier(.2,0,0,1) 1.6s both}
 .gateway .gate-button{transition:background-color .14s cubic-bezier(.2,0,0,1),color .14s cubic-bezier(.2,0,0,1),transform .14s cubic-bezier(.2,0,0,1)}
 .gateway .gate-button:hover{transform:translateY(-1px)}
 .gateway .gate-button span{transition:transform .14s cubic-bezier(.2,0,0,1)}
 .gateway .gate-button:hover span{transform:translate(2px,-2px)}
}
@keyframes hx-rise{from{clip-path:inset(100% 0 0 0) fill-box;transform:translateY(10px)}to{clip-path:inset(0 0 0 0) fill-box;transform:none}}
@keyframes hx-dot{from{transform:translateX(-26px) scale(0);opacity:0}60%{opacity:1}to{transform:none;opacity:1}}
@keyframes hx-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes hx-line{from{transform:translateY(108%)}to{transform:none}}
@keyframes hx-period{from{transform:scale(0)}to{transform:none}}

/* Scroll invitation: a fine rail with a signal travelling down it. */
.gateway a.hero-scroll{width:auto;height:auto;bottom:28px;display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 10px;border:0;border-radius:0;background:transparent;color:#87837D;text-decoration:none;transition:color 140ms cubic-bezier(.2,0,0,1)}
.gateway a.hero-scroll:hover{background:transparent;color:#1A1917}
.gateway a.hero-scroll:focus-visible{outline:2px solid #C2410C;outline-offset:4px}
.gateway .hx-scroll__label{font-family:var(--font-mono,"IBM Plex Mono",ui-monospace,monospace);font-size:11px;line-height:1;letter-spacing:.14em;text-transform:uppercase}
.gateway .hx-scroll__rail{position:relative;display:block;width:1px;height:48px;background:#D6D2CC;overflow:hidden}
.gateway .hx-scroll__rail i{position:absolute;left:-1px;top:0;width:3px;height:14px;border-radius:2px;background:#F97316;transform:translateY(-14px)}
.gateway a.hero-scroll:hover .hx-scroll__rail{background:#AFABA5}
@media(prefers-reduced-motion:no-preference){
 .gateway .hx-scroll__rail i{animation:hx-scroll-signal 2.4s cubic-bezier(.2,0,0,1) infinite}
}
@media(prefers-reduced-motion:reduce){.gateway .hx-scroll__rail i{transform:translateY(17px)}}
@keyframes hx-scroll-signal{0%{transform:translateY(-14px)}60%,100%{transform:translateY(48px)}}
@media(max-width:760px),(max-height:700px){.gateway a.hero-scroll{bottom:16px;gap:8px}.gateway .hx-scroll__rail{height:32px}@keyframes hx-scroll-signal{0%{transform:translateY(-14px)}60%,100%{transform:translateY(32px)}}}