/* ========================= */
/* RESET */
/* ========================= */

html,
body {

  margin: 0;

  padding: 0;

  width: 100%;

  background:
  var(--bg);

  overflow-x: hidden;

}

/* ========================= */
/* HERO */
/* ========================= */

.hero {

  width: 100%;

  padding-top: 1.5rem;

  text-align: center;

  box-sizing: border-box;

}

/* ========================= */
/* HERO SYSTEM */
/* ========================= */

.hero-hover {

  position: relative;

  z-index: 5;

  display: inline-block;

  font-size: 8rem;

  line-height: 1;

  white-space: nowrap;

  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);

}

/* ========================= */
/* RESPONSIVE SCALE */
/* ========================= */

@media (max-width: 1200px) {

  .hero-hover {

    font-size: 6.5rem;

  }

}

@media (max-width: 768px) {

  .hero-hover {

    font-size: 5rem;

  }

}

@media (max-width: 480px) {

  .hero-hover {

    font-size: 3.8rem;

  }

}

/* ========================= */
/* HERO TITLE */
/* ========================= */

.hero-title {

  margin: 0;

}

/* ========================= */
/* LETTER */
/* ========================= */

.letter {

  position: relative;

  display: inline-block;

  vertical-align: top;

  transition:
    text-shadow 0.6s ease;

}

.ll-letter {

  cursor: pointer;

}

.ll-letter:focus-visible {

  outline:
    2px solid currentColor;

  outline-offset:
    0.08em;

}

/* ========================= */
/* LETTER WRAPPER */
/* ========================= */

.letter-wrapper {

  position: relative;

  display: inline-block;

  vertical-align: top;

  isolation:
    isolate;

}

/* ========================= */
/* INTERACTIVE HITBOX */
/* ========================= */

:root {

  --hero-hitbox-width:
    0.5em;

  --hero-hitbox-height:
    0.7em;

}

/* ========================= */
/* TARGET */
/* ========================= */

.wave-1,
.wave-2 {

  position: relative;

}

/* ========================= */
/* HITBOX */
/* ========================= */

.wave-1::before,
.wave-2::before {

  content: "";

  position: absolute;

  top: 41%;
  left: 55%;

  width:
    var(--hero-hitbox-width);

  height:
    var(--hero-hitbox-height);

  transform:
    translate(-50%, -50%);

  z-index: 4;

}

/* ========================= */
/* INTERACTIVE */
/* ========================= */

.interactive {

  position: relative;

  z-index: 5;

  cursor: pointer;

  touch-action: manipulation;

}

@media (hover: hover) {

  .interactive:hover {

    text-shadow:
      0 0 0.11em rgba(255,255,255,0.32),
      0 0 0.22em rgba(255,255,255,0.11);

  }

}

  .glow-active {

    text-shadow:
      0 0 0.11em rgba(255,255,255,0.32),
      0 0 0.22em rgba(255,255,255,0.11);

  }

/* ========================= */
/* COLORS */
/* ========================= */

.ukraine-blue {

  position: relative;

  color: #4D82FF;

  z-index: 5;

}

.ukraine-yellow {

  position: relative;

  color: #FFD84D;

  z-index: 4;

}

/* ========================= */
/* REVEAL */
/* ========================= */

.reveal-column {

  position: absolute;

  top: 0.84em;

  left: 0.02em;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  font-size: inherit;

  pointer-events: none;

}

.reveal-column::before {

  content: none;

}

/* ========================= */
/* CUSTOM POSITIONS */
/* ========================= */

.reveal-intro {

  z-index: 5;

  left: 0.027em;

}

.reveal-info {

  z-index: 5;

  left: -0.15em;

}

.reveal-about {

  z-index: 5;

  left: -0.007em;

}

/* ========================= */
/* REVEAL LETTERS */
/* ========================= */

.reveal-column span {

  position:
    relative;

  z-index:
    1;

  font-size: 0.32em;

  line-height: 1;

  margin-top: 0.12em;

  letter-spacing: -0.04em;

  opacity: 0;

  transform:
    translateY(0.04em)
    scale(0.96);

  text-shadow:
    0 0 0.13em rgba(255,255,255,0.18);

  transition:
    opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    text-shadow 0.42s ease;

}

.reveal-column span:first-child {

  margin-top: 0;

}

/* ========================= */
/* ACTIVE */
/* ========================= */

.reveal-active {

  pointer-events: auto;

  cursor: pointer;

}

.reveal-active span {

  pointer-events: auto;

  opacity: 1;

  transform:
    translateY(0em)
    scale(1);

  text-shadow:
    0 0 0.1em var(--bg),
    0 0 0.22em var(--bg),
    0 0 0.34em rgba(77,130,255,0.22);

}

body.light-theme .reveal-active span {

  text-shadow:
    0 0 0.08em rgba(255,255,255,0.95),
    0 0 0.2em rgba(255,255,255,0.82),
    0 0 0.32em rgba(77,130,255,0.2);

}

/* ========================= */
/* STAGGER */
/* ========================= */

.reveal-column span:nth-child(1) {

  transition-delay: 0.24s;

}

.reveal-column span:nth-child(2) {

  transition-delay: 0.17s;

}

.reveal-column span:nth-child(3) {

  transition-delay: 0.10s;

}

.reveal-column span:nth-child(4) {

  transition-delay: 0.03s;

}

.reveal-active span:nth-child(1) {

  transition-delay: 0.03s;

}

.reveal-active span:nth-child(2) {

  transition-delay: 0.10s;

}

.reveal-active span:nth-child(3) {

  transition-delay: 0.17s;

}

.reveal-active span:nth-child(4) {

  transition-delay: 0.24s;

}

/* ========================= */
/* WAVE */
/* ========================= */

.wave-1 {

  z-index: 4;

  animation:
    wave 4.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;

}

.wave-2 {

  animation:
    wave 4.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;

  animation-delay: 0.35s;

}

.wave-3 {

  animation:
    wave 4.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;

  animation-delay: 0.7s;

}

/* ========================= */
/* WAVE KEYFRAMES */
/* ========================= */

@keyframes wave {

  0% {

    transform:
      translateY(0em);

  }

  8% {

    transform:
      translateY(-0.08em);

  }

  16% {

    transform:
      translateY(0em);

  }

  38% {

    transform:
      translateY(0em);

  }

  100% {

    transform:
      translateY(0em);

  }

}

/* ========================= */
/* WAVE LOCK */
/* ========================= */

.wave-locked .wave-1,
.wave-locked .wave-2,
.wave-locked .wave-3 {

  animation: none !important;

  transform:
    translateY(0em) !important;

}

.wave-locked .interactive {

  pointer-events: none !important;

}

/* ========================= */
/* FORCE REVEAL CLOSE */
/* ========================= */

/* ========================= */
/* FORCE CLOSE */
/* ========================= */

.wave-locked .reveal-active span {

  opacity: 0 !important;

  transform:
    translateY(0.04em)
    scale(0.96) !important;

  text-shadow:
    0 0 0.13em rgba(255,255,255,0) !important;

}

/* ========================= */
/* SCROLL LOCK */
/* ========================= */

.wave-locked .reveal-column {

  pointer-events: none;

}

/* ========================= */
/* LOCKED HERO */
/* ========================= */

.wave-locked .interactive {

  pointer-events: none;

}

.wave-locked .reveal-column {

  pointer-events: none;

}

/* ========================= =========================  =========================  =========================  =========================  =========================  =========================  =========================  =========================  =========================  =========================  =========================  =========================  =========================  =========================  =========================  =========================  =========================  =========================  */
/* ========================= */
/* HERO MOVE */
/* ========================= */

.hero-hover {

  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);

  will-change:
    transform;

}

.hero-hover.eraser-active {

  transform:
    translateX(calc(-50vw + 50% + 1.5rem));

}

/* ========================= */
/* ERASER SYSTEM */
/* ========================= */

.eraser-system {

  position: absolute;

  top: 0em;

  left: calc(100% + 0.045em);

  width: 0.10em;

  height: 0.10em;

  display: flex;

  align-items: center;

  justify-content: center;

  pointer-events: none;

  z-index: 20;

  transform-origin:
    center center;

  transition:
    left 0.7s cubic-bezier(0.22, 1, 0.36, 1);

}

/* ========================= */
/* ACTIVE MOVE */
/* ========================= */

.hero-hover.eraser-active .eraser-system {

  left: 0.234em;

}

/* ========================= */
/* GLYPHS */
/* ========================= */

.eraser-burger,
.eraser-side-left,
.eraser-side-right {

  position: absolute;

  top: 0;

  font: inherit;

  line-height: 1;

  color: var(--text);

  user-select: none;

  text-shadow:
    0 0 0.025em rgba(255,255,255,0.16),
    0 0 0.08em rgba(255,255,255,0.06);

  transition:
    left 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    top 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.16s ease,
    margin-left 0.18s cubic-bezier(0.4, 0, 0.2, 1);

}

/* ========================= */
/* BURGER */
/* ========================= */

.eraser-burger {

  left: 0.165em;

  z-index: 15;

  opacity: 0;

}

/* ========================= */
/* LEFT */
/* ========================= */

.eraser-side-left {

  left: -0.235em;

  z-index: 15;

  opacity: 0;

}

/* ========================= */
/* RIGHT */
/* ========================= */

.eraser-side-right {

  left: 0.165em;

  z-index: 15;

  opacity: 0;

}

/* ========================= */
/* BURGER SHOW */
/* ========================= */

.hero-hover.eraser-visible .eraser-burger {

  opacity: 1;

}

/* ========================= */
/* RIGHT MOVE */
/* ========================= */

.hero-hover.show-right .eraser-side-right {

  left: 0.566em;

  opacity: 1;

}

/* ========================= */
/* LEFT SHOW */
/* ========================= */

.hero-hover.show-left .eraser-side-left {

  opacity: 1;

}

/* ========================= */
/* HIDE ILLIA */
/* ========================= */

.hero-hover .letter,
.hero-hover .letter-wrapper {

  transition:
    opacity 0.16s ease,
    text-shadow 0.16s ease;

}

.hero-hover.hide-illia .letter,
.hero-hover.hide-illia .letter-wrapper {

  opacity: 0;

  text-shadow:
    0 0 0 rgba(255,255,255,0);

}

/* ========================= */
/* HIDE SHADOW */
/* ========================= */

.shadow-system {

  transition:
    opacity 0.32s ease;

}

.hero-hover.hide-shadow .shadow-system {

  opacity: 0;

}

/* ========================= */
/* ERASER SHADOW */
/* ========================= */

.eraser-shadow {

  position: absolute;

  top: 0.02em;

  left: 0.2em;

  width: 4.2em;

  height: 0.82em;

  background:
    var(--bg);

  opacity: 1;

  z-index: 10;

  transition:
    opacity 0.32s ease;

}

.hero-hover.hide-shadow .eraser-shadow {

  opacity: 0;

}

/* ========================= */
/* TIGHTEN */
/* ========================= */

.hero-hover.tighten-eraser .eraser-side-right {

  left: 0.43em;

}

.hero-hover.tighten-eraser .eraser-side-left {

  left: -0.11em;

}

/* ========================= */
/* STACK */
/* ========================= */

.hero-hover.burger-stacked .eraser-side-left {

  left: 0.165em;

  top: -0.39em;

  transform:
    rotate(90deg);

  margin-left: -0.12em;

}

.hero-hover.burger-stacked .eraser-burger {

  top: -0.12em;

  transform:
    rotate(90deg);

  margin-left: -0.12em;

}

.hero-hover.burger-stacked .eraser-side-right {

  left: 0.165em;

  top: 0.15em;

  transform:
    rotate(90deg);

  margin-left: -0.12em;

}

/* ========================= */
/* NO INTRO */
/* ========================= */

.no-intro-animation .eraser-system,
.no-intro-animation .eraser-burger,
.no-intro-animation .eraser-side-left,
.no-intro-animation .eraser-side-right,
.no-intro-animation .hero-title,
.no-intro-animation .shadow-system {

  transition: none !important;

}

/* ========================= */
/* ERASER HITBOX */
/* ========================= */

.eraser-hitbox {

  position: absolute;

  top: 0.3em;
  left: -2em;
  width: 7.15em;
  height: 7.15em;

  border: none;

  background: transparent;

  padding: 0;

  margin: 0;

  cursor: pointer;

  opacity: 0;

  pointer-events: none;

  z-index: 50;

}

/* ACTIVE ONLY WHEN STACKED */

.hero-hover.burger-stacked .eraser-hitbox {

  pointer-events: auto;

}