:root {
  --black: #000;
  --white: #fff;
  --red: #ee2625;
  --bezzy: cubic-bezier(0.8, 0, 0, 1);
  --bezzy2: cubic-bezier(0.43, 0.195, 0.02, 1);
  --bezzy3: cubic-bezier(0.5, 0, 0, 1);
  --color-link: #ffffffbc;
  --color-link-hover: #fff;
}

/* Hide scrollbars for all elements */
* {
  margin: 0;
  padding: 0;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  box-sizing: border-box;
  -webkit-font-smoothing: subpixel-antialiased; /* Enable subpixel antialiasing for better text rendering */
  -moz-osx-font-smoothing: grayscale; /* Enable grayscale antialiasing for better text rendering */
  text-rendering: geometricPrecision; /* Improve text rendering quality */
}
*::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera and Edge Chromium */
}

html,
body {
  /* Easy rems, 1rem - 10px */
  font-size: 62.5%;
  background: var(--black);
  color: var(--white);
}
a {
  text-decoration: none;
  color: var(--color-link);
  outline: none;
  cursor: pointer;

  &:hover {
    text-decoration: underline;
    color: var(--color-link-hover);
  }

  &:focus {
    outline: none;
    background: lightgrey;

    &:not(:focus-visible) {
      background: transparent;
    }

    &:focus-visible {
      outline: 2px solid red;
      background: transparent;
    }
  }
}

.wrapper {
  position: relative;
  height: 100svh;
  overflow: hidden;
}

.content {
  position: relative;
}

.hero {
  position: relative;
  z-index: 1;

  display: grid;
  place-items: center;

  width: 100%;
  height: 100svh;
  overflow: clip;

  & .hero-image,
  & img,
  & video {
    display: block;
  }

  & .hero-image {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--black);

    & img,
    & video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

/* Everything below here is not needed to create the infinite scroll effect */

/* Header Styling */
.frame {
  padding: 1.5rem;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Open Sans',
    'Helvetica Neue',
    sans-serif;
  display: grid;
  z-index: 1000;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 13px;
  grid-row-gap: 1rem;
  grid-column-gap: 2rem;
  pointer-events: none;
  justify-items: start;
  align-content: start;
  grid-template-columns: auto auto auto 1fr;
  grid-template-areas:
    'title title title title'
    'back archive github ...'
    'demos demos demos demos'
    'tags tags tags tags'
    'sponsor sponsor sponsor sponsor';

  #cdawrap {
    justify-self: start;
    grid-area: sponsor;
  }

  a,
  button {
    pointer-events: auto;
  }

  .frame__title {
    grid-area: title;
    font-size: inherit;
    margin: 0;
  }

  .frame__back {
    grid-area: back;
    justify-self: start;
  }

  .frame__archive {
    grid-area: archive;
    justify-self: start;
  }

  .frame__github {
    grid-area: github;
  }

  .frame__tags {
    grid-area: tags;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .frame__demos {
    grid-area: demos;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  @media screen and (min-width: 53em) {
    grid-template-columns: auto auto auto auto 1fr;
    grid-template-rows: auto auto;
    align-content: space-between;
    grid-template-areas:
      'title back github archive demos'
      'tags tags tags sponsor sponsor';

    .frame__tags {
      align-self: end;
    }

    .frame__demos,
    #cdawrap {
      justify-self: end;
      text-align: right;
      max-width: 300px;
    }
  }
}

/* Логотип владельца в левом верхнем углу: поверх слайдов, вне прокрутки Lenis */
.logo {
  position: fixed;
  top: var(--ui-inset);
  left: var(--ui-inset);
  z-index: 12;
  display: block;
  width: clamp(84px, 6.4vw, 124px);  /* уменьшен 21.09 по указанию владельца */
  color: var(--white);
  filter: drop-shadow(0 1px 10px rgb(0 0 0 / 0.35));
  cursor: pointer;

  & svg {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* ---- Шапка: бургер справа, меню-оверлей ---------------------------------- */
:root {
  --ui-inset: clamp(16px, 2.2vw, 32px);
  --e-display: cubic-bezier(0.16, 1, 0.3, 1);
  --e-ui: cubic-bezier(0.4, 0, 0.2, 1);
}

.burger {
  position: fixed;
  top: calc(var(--ui-inset) - 4px);
  right: calc(var(--ui-inset) - 4px);
  z-index: 13;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 1px 10px rgb(0 0 0 / 0.35));

  & .burger__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  & .burger__ring {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    /* pathLength=100: 86 нарисовано, 14 — разрыв; разрыв вращается из JS */
    stroke-dasharray: 86 14;
    transform-origin: 24px 24px;
    transition: stroke-dasharray 0.5s var(--e-ui);
  }

  & .burger__line {
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    transform-origin: 24px 24px;
  }

  &[aria-expanded="true"] .burger__ring {
    stroke-dasharray: 100 0;
  }

  &:focus-visible {
    outline: 1.5px solid var(--red);
    outline-offset: 4px;
    border-radius: 50%;
  }
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 11;
  display: grid;
  align-content: center;
  padding: 0 var(--ui-inset) 0 clamp(24px, 8vw, 160px);
  background: rgb(8 8 9 / 0.9);
  visibility: hidden;
  clip-path: circle(0px at 100% 0%);
}

.menu-overlay[aria-hidden="false"] {
  visibility: visible;
}

/* ---- Tsula (Codrops Menu Hover Effects, MIT) — в наших цветах --------------- */
.menu {
  position: relative;
  z-index: 10;
  font-family: 'Space Mono', monospace;
  font-size: clamp(20px, 2.6vw, 44px);
}

.menu__mask {
  /* маска режет только по вертикали: бока открыты, чтобы мигающий курсор слева не срезался */
  clip-path: inset(-0.35em -100vw 0 -100vw);
}

.menu__item {
  line-height: 1;
  position: relative;
  display: block;
  margin: 0.9em 0;
  padding-left: 0.25em;
  outline: none;
  text-decoration: none;
  color: var(--white);
}

.menu__item-name,
.menu__item-label {
  position: relative;
  display: inline-block;
}

.menu__item-name {
  font-size: 1.25em;
  text-transform: uppercase;
  color: var(--white);
}

.menu__item:hover .menu__item-name,
.menu__item:focus-visible .menu__item-name {
  color: var(--black);
  background: var(--red);
}

.menu__item::before {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  width: 0.9em;
  height: 1em;
  opacity: 0;
  background: rgb(238 38 37 / 0.3);
  animation: none;
}

.menu__item:hover::before,
.menu__item:focus-visible::before {
  animation: blinkblink 0.4s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
}

.menu__item-label {
  margin: 0 0 0 0.5em;
  color: rgb(255 255 255 / 0.55);
  white-space: pre;
}

@keyframes blinkblink {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 599.98px) {
  .menu__item-label {
    display: block;
    margin: 0.35em 0 0;
    font-size: 0.7em;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .burger__ring { transition: none; }
  .menu__item:hover::before,
  .menu__item:focus-visible::before { animation: none; opacity: 1; }
}

/* OSMO Curved Marquee Styling*/
.marquees {
  position: relative;
  width: 100%;
  /* Дуга опущена по указанию владельца 21.09.2026: зазор от нижней точки текста до низа окна
     вдвое меньше исходного. Исходно блок центрирован, нижняя точка дуги = 50svh + 0.533em
     заголовка h2, поэтому сдвиг = 25svh - 0.266em. Три ветки повторяют clamp() у h2. */
  --arc-drop: calc(25svh - 8.5rem);          /* h2 = 32rem  (окно от 1600px) */
  transform: translateY(var(--arc-drop));  /* точное значение в px ставит settleArcDrop() в scripts.js */
}

@media (max-width: 1599.98px) {
  .marquees { --arc-drop: calc(25svh - 5.33vw); }  /* h2 = 20vw */
}

@media (max-width: 599.98px) {
  .marquees { --arc-drop: calc(25svh - 3.2rem); }  /* h2 = 12rem */
}

.radial-text-marquee {
  width: 100%;
  transform: translateY(-60%);

  &.script {
    position: absolute;
    inset: 10% 0 0 0;
  }
}

h2,
h3 {
  text-align: center;
  white-space: nowrap;
  user-select: none;
  color: var(--white);

  &.red {
    color: var(--red);
  }
}

h2 {
  font-size: clamp(12rem, 20vw, 32rem);
  font-family: 'League Gothic', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 80;
}

h3 {
  font-size: clamp(8rem, 12vw, 24rem);
  font-family: 'Ms Madi', cursive;
  font-weight: 400;
  font-style: normal;
}