/* A single-purpose kinetic identity treatment for the homepage title. */

.hero-title.grei-title-reactor {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --light-x: 32%;
  --light-y: 48%;
  --echo-x: 0px;
  --echo-y: 0px;
  position: relative;
  z-index: 3;
  width: max-content;
  max-width: none;
  margin: 0;
  perspective: 920px;
  white-space: nowrap;
  text-shadow: none;
  isolation: isolate;
}

.grei-reactor-particles {
  position: absolute;
  z-index: 8;
  inset: -34px;
  width: calc(100% + 68px);
  height: calc(100% + 68px);
  pointer-events: none;
  overflow: visible;
  mix-blend-mode: screen;
}

.hero-title.grei-title-reactor .grei-reactor-stage {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: .135em;
  width: max-content;
  margin: 0;
  color: inherit;
  font: inherit;
  font-size: 1em;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: uppercase;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform 380ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

.hero-title.grei-title-reactor .grei-reactor-word {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  overflow: visible;
  padding: .055em .032em .14em;
  margin: 0;
  color: inherit;
  font: inherit;
  font-size: 1em;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: uppercase;
  text-shadow: none;
  clip-path: inset(0 100% 0 0);
  animation: grei-word-open 820ms var(--word-delay) cubic-bezier(.18,.86,.2,1) forwards;
  transform-style: preserve-3d;
}

.hero-title.grei-title-reactor .grei-reactor-word.is-open {
  clip-path: none;
  animation: none;
}

.grei-reactor-word::before {
  position: absolute;
  z-index: -1;
  inset: .055em .032em .14em;
  content: attr(data-word);
  color: transparent;
  -webkit-text-stroke: 1px rgba(95,220,255,.32);
  text-shadow: 3px 0 rgba(216,255,99,.16), -3px 0 rgba(116,91,255,.2);
  opacity: .3;
  filter: blur(.25px);
  transform: translate3d(var(--echo-x),var(--echo-y),-28px) scale(1.012);
  transition: transform 190ms ease-out, opacity 180ms ease-out;
}

.grei-reactor-word::after {
  position: absolute;
  z-index: 6;
  inset: .055em .032em .14em;
  content: attr(data-word);
  color: transparent;
  -webkit-text-stroke: 1px rgba(216,255,99,.76);
  text-shadow: 3px 0 rgba(74,211,255,.72), -3px 0 rgba(181,89,255,.58);
  opacity: 0;
  transform: translate3d(0,0,14px);
  pointer-events: none;
  mix-blend-mode: screen;
  animation: grei-idle-glitch 7.2s calc(1.8s + var(--word-delay)) steps(1,end) infinite;
}

.hero-title.grei-title-reactor .grei-reactor-glyph {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  margin: 0;
  color: transparent;
  font: inherit;
  font-size: 1em;
  font-weight: inherit;
  letter-spacing: 0;
  line-height: inherit;
  text-shadow: none;
  text-transform: inherit;
  transform:
    translate3d(0,calc(var(--reaction) * -.055em),calc(1px + var(--reaction) * 20px))
    rotateX(calc(var(--reaction) * -5deg));
  transform-style: preserve-3d;
  transition: transform 190ms cubic-bezier(.2,.82,.2,1), filter 190ms ease;
  filter: brightness(calc(1 + var(--reaction) * .16));
}

.hero-title.grei-title-reactor .grei-reactor-prism {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: block;
  margin: 0;
  color: transparent;
  font: inherit;
  font-size: 1em;
  font-weight: inherit;
  letter-spacing: 0;
  line-height: inherit;
  text-transform: inherit;
  -webkit-text-stroke: .8px rgba(88,211,255,.38);
  text-shadow:
    2px 0 rgba(216,255,99,.28),
    -2px 0 rgba(151,92,255,.3),
    0 0 14px rgba(86,205,255,.18);
  opacity: calc(.12 + var(--reaction) * .58);
  transform:
    translate3d(
      calc(var(--echo-x) + var(--reaction) * 7px),
      calc(var(--echo-y) + var(--reaction) * -3px),
      -18px
    )
    scale(calc(1.01 + var(--reaction) * .025));
  filter: blur(calc(.5px - var(--reaction) * .35px));
  mix-blend-mode: screen;
  transition: opacity 170ms ease, transform 190ms ease-out, filter 190ms ease;
  pointer-events: none;
}

.hero-title.grei-title-reactor .grei-reactor-shine {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: block;
  margin: 0;
  color: transparent;
  font: inherit;
  font-size: 1em;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: 0;
  line-height: inherit;
  text-transform: inherit;
  background: linear-gradient(108deg,transparent 28%,rgba(255,255,255,.08) 39%,#fff 48%,rgba(216,255,99,.92) 52%,rgba(85,211,255,.24) 58%,transparent 70%);
  background-size: 280% 100%;
  background-position: 135% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 5px rgba(216,255,99,.22));
  opacity: .9;
  pointer-events: none;
  animation: grei-letter-shimmer 4.9s calc(1.05s + var(--letter-delay)) cubic-bezier(.2,.72,.2,1) infinite;
}

.grei-reactor-glyph::before,
.grei-reactor-glyph::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: attr(data-char);
  color: #f8fbff;
  background:
    radial-gradient(circle at var(--light-x) var(--light-y), #fff 0 7%, transparent 31%),
    linear-gradient(180deg, #fff 0%, #f9fbff 31%, #aab8c5 49%, #eef3f7 62%, #8f9eaa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 1px 0 rgba(255,255,255,.8),
    0 2px 0 rgba(192,205,216,.94),
    0 4px 0 rgba(102,121,137,.9),
    0 7px 0 rgba(41,57,72,.82),
    0 11px 0 rgba(10,18,27,.54),
    0 16px 28px rgba(0,0,0,.58),
    0 0 calc(20px + var(--reaction) * 24px) rgba(216,255,99,calc(.05 + var(--reaction) * .18));
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.grei-reactor-glyph::before {
  clip-path: inset(0 0 49.3% 0);
  transform-origin: 50% 100%;
  transform: rotateX(-98deg) translateZ(1px);
  opacity: 0;
  animation: grei-flap-upper 700ms var(--letter-delay) cubic-bezier(.15,.8,.2,1) forwards;
}

.grei-reactor-glyph::after {
  clip-path: inset(50.7% 0 0 0);
  transform-origin: 50% 0;
  transform: rotateX(96deg) translateZ(1px);
  opacity: 0;
  animation: grei-flap-lower 700ms calc(var(--letter-delay) + 70ms) cubic-bezier(.15,.8,.2,1) forwards;
}

.grei-reactor-stage::before {
  position: absolute;
  z-index: -2;
  left: var(--light-x);
  top: var(--light-y);
  width: 34%;
  height: 78%;
  content: '';
  pointer-events: none;
  background:
    radial-gradient(circle,rgba(216,255,99,.2),rgba(68,188,255,.07) 38%,transparent 70%);
  filter: blur(24px);
  transform: translate(-50%,-50%);
  transition: left 160ms ease-out, top 160ms ease-out;
}

.grei-title-reactor:hover .grei-reactor-word::before {
  opacity: .58;
}

.grei-title-reactor.is-struck .grei-reactor-stage {
  animation: grei-impact 520ms cubic-bezier(.18,.8,.2,1);
}

.grei-title-reactor.is-struck .grei-reactor-word::before {
  animation: grei-echo-burst 520ms ease-out;
}

.grei-title-reactor.is-struck .grei-reactor-word::after {
  animation: grei-glitch-hit 520ms steps(1,end);
}

.grei-title-reactor.is-struck .grei-reactor-shine {
  animation: grei-shine-hit 540ms cubic-bezier(.16,.8,.2,1);
}

.grei-title-reactor.is-struck .grei-reactor-glyph {
  animation: grei-glyph-shock 520ms calc(var(--glyph-index) * 16ms) cubic-bezier(.18,.82,.2,1);
}

@keyframes grei-word-open { to { clip-path: inset(0); } }

@keyframes grei-letter-shimmer {
  0%,62% { background-position: 135% 0; opacity: 0; }
  67% { opacity: .95; }
  82% { background-position: -135% 0; opacity: .7; }
  87%,100% { background-position: -135% 0; opacity: 0; }
}

@keyframes grei-idle-glitch {
  0%,78%,82%,86%,100% { opacity: 0; transform: translate3d(0,0,14px); clip-path: inset(0); }
  79% { opacity: .48; transform: translate3d(-4px,-1px,14px); clip-path: inset(12% 0 60% 0); }
  80% { opacity: .72; transform: translate3d(5px,1px,14px); clip-path: inset(55% 0 18% 0); }
  81% { opacity: .3; transform: translate3d(-2px,0,14px); clip-path: inset(33% 0 38% 0); }
  83% { opacity: .55; transform: translate3d(3px,0,14px); clip-path: inset(6% 0 72% 0); }
  84% { opacity: .26; transform: translate3d(-3px,1px,14px); clip-path: inset(68% 0 7% 0); }
  85% { opacity: 0; }
}

@keyframes grei-glitch-hit {
  0%,100% { opacity: 0; transform: translate3d(0,0,14px); clip-path: inset(0); }
  14% { opacity: .86; transform: translate3d(-7px,-2px,18px); clip-path: inset(8% 0 64% 0); }
  28% { opacity: .38; transform: translate3d(6px,2px,18px); clip-path: inset(58% 0 12% 0); }
  44% { opacity: .92; transform: translate3d(3px,-1px,18px); clip-path: inset(28% 0 42% 0); }
  61% { opacity: .3; transform: translate3d(-5px,1px,18px); clip-path: inset(72% 0 4% 0); }
  78% { opacity: .62; transform: translate3d(2px,0,18px); clip-path: inset(43% 0 34% 0); }
}

@keyframes grei-shine-hit {
  0% { background-position: 135% 0; opacity: 0; }
  34% { opacity: 1; }
  72% { background-position: -135% 0; opacity: .94; filter: drop-shadow(0 0 12px rgba(216,255,99,.6)); }
  100% { background-position: -135% 0; opacity: 0; }
}

@keyframes grei-flap-upper {
  0% { opacity: 0; transform: rotateX(-98deg) translateY(-.15em) translateZ(1px); filter: blur(5px); }
  62% { opacity: 1; transform: rotateX(11deg) translateY(0) translateZ(1px); filter: blur(0); }
  100% { opacity: 1; transform: rotateX(0) translateY(0) translateZ(1px); filter: blur(0); }
}

@keyframes grei-flap-lower {
  0% { opacity: 0; transform: rotateX(96deg) translateY(.15em) translateZ(1px); filter: blur(5px); }
  62% { opacity: 1; transform: rotateX(-9deg) translateY(0) translateZ(1px); filter: blur(0); }
  100% { opacity: 1; transform: rotateX(0) translateY(0) translateZ(1px); filter: blur(0); }
}

@keyframes grei-impact {
  0% { transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1); }
  28% { transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(.985,1.04); filter: brightness(1.35); }
  62% { transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.012,.992); }
  100% { transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1); filter: none; }
}

@keyframes grei-glyph-shock {
  0% { transform: translate3d(0,calc(var(--reaction) * -.055em),calc(1px + var(--reaction) * 20px)) rotateX(calc(var(--reaction) * -5deg)); }
  32% { transform: translate3d(0,-.11em,30px) rotateX(-8deg) scale(1.035); filter: brightness(1.34); }
  68% { transform: translate3d(0,.025em,8px) rotateX(2deg) scale(.995); }
  100% { transform: translate3d(0,calc(var(--reaction) * -.055em),calc(1px + var(--reaction) * 20px)) rotateX(calc(var(--reaction) * -5deg)); }
}

@keyframes grei-echo-burst {
  0% { opacity: .55; transform: translate3d(var(--echo-x),var(--echo-y),-28px) scale(1.012); }
  45% { opacity: .85; transform: translate3d(calc(var(--echo-x) * 2.4),calc(var(--echo-y) * 2.4),-38px) scale(1.045); }
  100% { opacity: .3; transform: translate3d(var(--echo-x),var(--echo-y),-28px) scale(1.012); }
}

@media (max-width: 680px) {
  .hero-title.grei-title-reactor {
    font-size: clamp(2.55rem,11.75vw,3.35rem);
    letter-spacing: -.065em;
  }

  .hero-title.grei-title-reactor .grei-reactor-stage { gap: .11em; }

  .grei-reactor-glyph::before,
  .grei-reactor-glyph::after {
    text-shadow:
      0 1px 0 rgba(255,255,255,.72),
      0 2px 0 rgba(145,162,176,.88),
      0 4px 0 rgba(55,72,88,.8),
      0 8px 16px rgba(0,0,0,.54);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title.grei-title-reactor .grei-reactor-stage,
  .hero-title.grei-title-reactor .grei-reactor-word,
  .hero-title.grei-title-reactor .grei-reactor-glyph,
  .hero-title.grei-title-reactor .grei-reactor-glyph::before,
  .hero-title.grei-title-reactor .grei-reactor-glyph::after,
  .hero-title.grei-title-reactor .grei-reactor-prism,
  .hero-title.grei-title-reactor .grei-reactor-shine {
    animation: none;
    clip-path: none;
    filter: none;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .grei-reactor-word::before,
  .grei-reactor-word::after,
  .grei-reactor-stage::before,
  .grei-reactor-prism,
  .grei-reactor-shine,
  .grei-reactor-particles { display: none; }
}