/* Trade Frontage intro: a street of dark frontages lights up one market at a
   time, the centre unit becomes the brand mark, the name lands. ~3 s.
   CSS-only safety: the page un-hides at 1.4 s even if the script never runs. */
html.tfi-pre body { visibility: hidden; animation: tfi-unveil 0s 1.4s forwards; }
@keyframes tfi-unveil { to { visibility: visible; } }

#tfi { position: fixed; inset: 0; z-index: 2147483000; background: #0c0d0b; color: #f3f2ec; display: grid; place-items: center; cursor: pointer; overflow: hidden;
  transition: clip-path .7s cubic-bezier(.7,0,.2,1); clip-path: circle(150% at 50% 50%); }
#tfi.out { clip-path: circle(0% at 50% 46%); }
#tfi .in { width: min(980px, 92vw); text-align: center; }
#tfi .row { display: flex; align-items: flex-end; justify-content: center; gap: clamp(3px, .6vw, 7px); height: clamp(70px, 12vw, 130px); }
#tfi .u { flex: 0 0 auto; width: clamp(9px, 2.6vw, 30px); border: 1.5px solid #2c2f28; position: relative; height: var(--h); transform-origin: bottom; transform: scaleY(0); animation: tfi-up .5s var(--d) cubic-bezier(.2,.8,.2,1) forwards; }
#tfi .u::after { content: ''; position: absolute; left: 28%; right: 28%; bottom: 0; height: 45%; background: var(--c); opacity: 0; animation: tfi-lit .3s calc(var(--d) + .45s) ease-out forwards; box-shadow: 0 0 18px var(--c); }
#tfi .u.hero { width: clamp(16px, 4.4vw, 50px); border-color: #c8f03c; }
#tfi .u.hero::after { background: #c8f03c; box-shadow: 0 0 30px #c8f03c; }
#tfi .gnd { height: 2px; background: #2c2f28; margin-top: 0; transform: scaleX(0); animation: tfi-gnd .7s cubic-bezier(.7,0,.2,1) forwards; }
#tfi b { display: block; margin-top: clamp(22px, 4vw, 40px); font: 800 clamp(30px, 6.4vw, 78px)/1 "Unbounded", "Arial Black", sans-serif; letter-spacing: -.035em; clip-path: inset(0 0 100% 0); transform: translateY(18px); animation: tfi-rise .7s 1.75s cubic-bezier(.2,.8,.2,1) forwards; }
#tfi span.t { display: block; margin-top: 14px; font: 400 clamp(10px, 1.3vw, 13px)/1.4 "Martian Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: #a7ab9d; opacity: 0; animation: tfi-fade .5s 2.2s ease forwards; }
#tfi span.t em { font-style: normal; color: #c8f03c; }
#tfi .skip { position: fixed; right: 18px; bottom: 18px; left: auto; top: auto; width: auto; height: auto; margin: 0; line-height: 1; background: transparent; color: #f3f2ec; border: 1.5px solid #5c6153; border-radius: 99px; padding: 9px 14px; font: 400 12px/1 "Martian Mono", monospace; cursor: pointer; }
#tfi .skip:focus-visible { outline: 3px solid #ff5b2e; outline-offset: 2px; }
@keyframes tfi-up { to { transform: scaleY(1); } }
@keyframes tfi-lit { to { opacity: 1; } }
@keyframes tfi-gnd { to { transform: scaleX(1); } }
@keyframes tfi-rise { to { clip-path: inset(0 0 -10% 0); transform: none; } }
@keyframes tfi-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #tfi { display: none !important; } html.tfi-pre body { visibility: visible; animation: none; } }