@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-900-latin.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Motion tuning. Every effect repeats on one shared cycle. The keyframes
     are written for a 31.8s cycle: a 1.8s glitch sequence plus a 30s rest.
     If you change --fx-cycle, the burst lengths scale with it.
     Kill switches: remove class="glitch" (company-name line) or the
     .tm span's class from index.html. */
  --fx-cycle: 31.8s;

  /* Start offset inside the cycle for the name-line glitch (first fires 30s after page load).
     The TM itself rolls non-stop. */
  --tm-glitch-delay: 30s;
  --tm-roll-duration: 1.5s;      /* time for one full turn of the continuously rolling TM */

  --tm-glitch-offset: 6px;     /* slice shift on the company-name line */
  --tm-glitch-flash: #00f0ff;  /* RGB-split layer colours */
  --tm-glitch-shade: #fff;

  --red: #f90a0a;
  --black: #000;
  --white: #fff;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--red);
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--red);
  color: var(--black);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
  text-align: center;
  -webkit-text-size-adjust: 100%;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 72rem;
  flex: 1;
  padding: clamp(1.5rem, 6dvh, 4rem) 1.25rem 0;
  overflow-x: clip;
}

.logo {
  width: clamp(112px, 13vw, 160px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.logo img {
  display: block;
  width: 90%;
  height: auto;
  object-fit: contain;
}

h1 {
  margin: auto 0 0;
  padding-top: 1.5rem;
  font-size: clamp(2.5rem, 12vw, 7rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.name {
  margin: 0.75rem 0 auto;
  font-size: clamp(1.05rem, 3.6vw, 1.6rem);
  font-weight: 500;
}

footer {
  margin-top: auto;
  padding: 1.5rem 0 max(1.5rem, env(safe-area-inset-bottom));
}

.ig {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--black);
  border-radius: 50%;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.ig:hover {
  opacity: 0.65;
  transform: scale(1.1);
}

.ig:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 3px;
}

/* Glitch: sliced, RGB-split copies of the text (clip-path, transform, opacity).
   .glitch = company-name line (glitch, 0.6s pause, glitch, then rest). */
.glitch {
  position: relative;
}

.glitch { animation: tm-glitch-host var(--fx-cycle) steps(1, end) var(--tm-glitch-delay) infinite; }

.glitch::before,
.glitch::after {
  content: attr(data-text) / "";
  position: absolute;
  inset: 0;
  padding: inherit;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
  will-change: transform, opacity;
}

.glitch::before { color: var(--tm-glitch-flash); }

.glitch::after { color: var(--tm-glitch-shade); }

.glitch::before { animation: tm-glitch-a var(--fx-cycle) steps(1, end) var(--tm-glitch-delay) infinite; }
.glitch::after { animation: tm-glitch-b var(--fx-cycle) steps(1, end) var(--tm-glitch-delay) infinite; }

/* Rolling TM: rotates continuously and never stops. */
.tm {
  display: inline-block;
  margin-left: 0.1em; /* tiny gap between the y and the TM */
  animation: tm-roll var(--tm-roll-duration) linear infinite;
}

@keyframes tm-roll {
  to { transform: rotate(360deg); }
}

@keyframes tm-glitch-host {
  0% { transform: none; }
  0.094% { transform: translateX(calc(var(--tm-glitch-offset) * -0.32)); }
  0.472% { transform: translateX(calc(var(--tm-glitch-offset) * 0.4)); }
  0.849% { transform: none; }
  1.132% { transform: translateX(calc(var(--tm-glitch-offset) * -0.48)); }
  1.509% { transform: translateX(calc(var(--tm-glitch-offset) * 0.24)); }
  1.887% { transform: none; }
  3.868% { transform: translateX(calc(var(--tm-glitch-offset) * 0.32)); }
  4.245% { transform: translateX(calc(var(--tm-glitch-offset) * -0.4)); }
  4.623% { transform: none; }
  4.906% { transform: translateX(calc(var(--tm-glitch-offset) * 0.48)); }
  5.283% { transform: translateX(calc(var(--tm-glitch-offset) * -0.24)); }
  5.66% { transform: none; }
}

@keyframes tm-glitch-a {
  0% { opacity: 1; clip-path: inset(10% 0 55% 0); transform: translateX(calc(var(--tm-glitch-offset) * -1)); }
  0.283% { opacity: 1; clip-path: inset(55% 0 12% 0); transform: translateX(calc(var(--tm-glitch-offset) * 0.8)); }
  0.566% { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
  0.755% { opacity: 1; clip-path: inset(30% 0 40% 0); transform: translateX(calc(var(--tm-glitch-offset) * -1.3)); }
  1.038% { opacity: 1; clip-path: inset(0 0 70% 0); transform: translateX(calc(var(--tm-glitch-offset) * 0.7)); }
  1.321% { opacity: 1; clip-path: inset(60% 0 5% 0); transform: translateX(calc(var(--tm-glitch-offset) * 1.2)); }
  1.604% { opacity: 1; clip-path: inset(20% 0 50% 0); transform: translateX(calc(var(--tm-glitch-offset) * -0.8)); }
  1.887% { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
  3.774% { opacity: 1; clip-path: inset(10% 0 55% 0); transform: translateX(calc(var(--tm-glitch-offset) * 1)); }
  4.057% { opacity: 1; clip-path: inset(55% 0 12% 0); transform: translateX(calc(var(--tm-glitch-offset) * -0.8)); }
  4.34% { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
  4.528% { opacity: 1; clip-path: inset(30% 0 40% 0); transform: translateX(calc(var(--tm-glitch-offset) * 1.3)); }
  4.811% { opacity: 1; clip-path: inset(0 0 70% 0); transform: translateX(calc(var(--tm-glitch-offset) * -0.7)); }
  5.094% { opacity: 1; clip-path: inset(60% 0 5% 0); transform: translateX(calc(var(--tm-glitch-offset) * -1.2)); }
  5.377% { opacity: 1; clip-path: inset(20% 0 50% 0); transform: translateX(calc(var(--tm-glitch-offset) * 0.8)); }
  5.66% { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
}

@keyframes tm-glitch-b {
  0% { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
  0.151% { opacity: 1; clip-path: inset(40% 0 30% 0); transform: translateX(calc(var(--tm-glitch-offset) * 1.1)); }
  0.472% { opacity: 1; clip-path: inset(5% 0 65% 0); transform: translateX(calc(var(--tm-glitch-offset) * -0.9)); }
  0.66% { opacity: 1; clip-path: inset(65% 0 0 0); transform: translateX(calc(var(--tm-glitch-offset) * 1.4)); }
  0.849% { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
  1.132% { opacity: 1; clip-path: inset(25% 0 45% 0); transform: translateX(calc(var(--tm-glitch-offset) * -1.2)); }
  1.415% { opacity: 1; clip-path: inset(50% 0 20% 0); transform: translateX(calc(var(--tm-glitch-offset) * 0.9)); }
  1.698% { opacity: 1; clip-path: inset(10% 0 60% 0); transform: translateX(calc(var(--tm-glitch-offset) * -1)); }
  1.887% { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
  3.774% { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
  3.925% { opacity: 1; clip-path: inset(40% 0 30% 0); transform: translateX(calc(var(--tm-glitch-offset) * -1.1)); }
  4.245% { opacity: 1; clip-path: inset(5% 0 65% 0); transform: translateX(calc(var(--tm-glitch-offset) * 0.9)); }
  4.434% { opacity: 1; clip-path: inset(65% 0 0 0); transform: translateX(calc(var(--tm-glitch-offset) * -1.4)); }
  4.623% { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
  4.906% { opacity: 1; clip-path: inset(25% 0 45% 0); transform: translateX(calc(var(--tm-glitch-offset) * 1.2)); }
  5.189% { opacity: 1; clip-path: inset(50% 0 20% 0); transform: translateX(calc(var(--tm-glitch-offset) * -0.9)); }
  5.472% { opacity: 1; clip-path: inset(10% 0 60% 0); transform: translateX(calc(var(--tm-glitch-offset) * 1)); }
  5.66% { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ig {
    transition: none;
  }

  .glitch,
  .glitch::before,
  .glitch::after,
  .tm {
    animation: none;
  }

  .glitch::before,
  .glitch::after {
    display: none;
  }
}