: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: var(--hero-h, 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;
    }
  }
}

/* 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: 'Roboto Flex', sans-serif; /* узкий экземпляр wdth 40, YTUC 760 — кириллица; wdth 25 превращал КЛІПИ в частокол */
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

h3 {
  font-size: clamp(8rem, 12vw, 24rem);
  font-family: 'Comforter', cursive; /* автор Ms Madi, с кириллицей */
  font-weight: 400;
  font-style: normal;
}

/* ==== Кнопка раздела на слайде (25.09.2026) ==================================
   Співачка → Читати, Кліпи → Дивитися, Музика → Слухати. Узкие прописные и длинная
   стрелка, как «ТА ІНШІ →»; без скруглений. Наведение — белый блок прорезается слева,
   буквы перепечатываются (приём Tsula из меню). */
.hero-cta {
  position: absolute;
  left: 50%;
  bottom: clamp(22px, 4.5svh, 48px);
  z-index: 4;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 8px 14px;
  isolation: isolate;
  font-family: 'Roboto Flex', sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 3.4svh, 34px);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  text-shadow: 0 2px 18px rgb(0 0 0 / 0.55);
  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.06s;
}

.hero-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--white);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-cta svg {
  width: clamp(64px, 6vw, 96px);
  height: auto;
  filter: drop-shadow(0 2px 10px rgb(0 0 0 / 0.5));
  animation: hero-cta-nudge 2.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

.hero-cta__label .l { display: inline-block; white-space: pre; }

.hero-cta:hover,
.hero-cta:focus-visible { color: var(--black); text-decoration: none; text-shadow: none; outline: none; }
.hero-cta:hover::before,
.hero-cta:focus-visible::before { clip-path: inset(0 0 0 0); }
.hero-cta:hover svg,
.hero-cta:focus-visible svg { animation-duration: 1s; filter: none; }

@keyframes hero-cta-nudge {
  0%, 100% { translate: 0 0; }
  50% { translate: 10px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cta svg { animation: none; }
}
.hero-cta, .hero-cta__label { white-space: nowrap; }

/* ==== Киношное зерно поверх видео (25.09.2026) ================================
   Только на кадре (.hero-image), текст и кнопки поверх остаются чёткими. Тайл 256 px,
   сдвиг ступенями ~8 кадров/с — как плёнка; мягкий свет (overlay) на малой прозрачности
   прячет «пластик» сгенерированного видео. */
.hero-image::after {
  content: '';
  position: absolute;
  inset: -60px;
  z-index: 1;
  pointer-events: none;
  background: url('./assets/grain.png') 0 0 / 256px 256px repeat;
  opacity: 0.16;
  mix-blend-mode: overlay;
  animation: film-grain 1s steps(8) infinite;
}
@keyframes film-grain {
  0%   { transform: translate(0, 0); }
  12%  { transform: translate(-22px, 14px); }
  25%  { transform: translate(18px, -26px); }
  37%  { transform: translate(-30px, -8px); }
  50%  { transform: translate(8px, 30px); }
  62%  { transform: translate(28px, 6px); }
  75%  { transform: translate(-12px, -30px); }
  87%  { transform: translate(24px, 22px); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .hero-image::after { animation: none; } }

/* Зерно v2 (25.09.2026): без движения по траектории — меняются случайные кадры шума,
   как на плёнке (кадры генерирует scripts.js, --grain подставляет текущий). */
.hero-image::after {
  inset: 0;
  animation: none;
  transform: none;
  background: var(--grain, none) 0 0 / 220px 220px repeat;
  opacity: 0.2;
}