/* ===========================================================================
   DJ Typing Effect 1.2.0
   =========================================================================== */

/* --------------------------- typewriter ---------------------------------- */

.type-line,
.type-rotate { min-height: 1em; }

.type-line .rs-tw-cursor,
.type-rotate .rs-tw-cursor {
  display: inline-block;
  width: 0.06em;
  min-width: 2px;
  height: 0.88em;
  margin-left: 0.06em;
  background: currentColor;
  vertical-align: -0.05em;
  animation: djteBlink 1s steps(1, end) infinite;
}

@keyframes djteBlink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-tw-cursor { animation: none; }
}

/* ---------------------------- [dj_hero] ---------------------------------- */

.djte-hero {
  --djte-ink:     #0A0710;
  --djte-sand:    #FFFFFF;
  --djte-display: 'Anton', 'Arial Narrow', Impact, sans-serif;

  --djte-height:  100svh;                    /* desktop height  */
  --djte-mheight: 68svh;                     /* mobile height   */
  --djte-dim:     .42;                       /* overlay darkness, 0 = none */
  --djte-size:    clamp(26px, 6vw, 88px);    /* desktop text size */
  --djte-msize:   clamp(22px, 7vw, 40px);    /* mobile text size  */

  position: relative;
  width: 100%;
  height: 100vh;
  height: var(--djte-height);
  min-height: 380px;
  overflow: hidden;
  background: var(--djte-ink);
  color: var(--djte-sand);
}

.djte-hero * { box-sizing: border-box; }

.djte-bgs { position: absolute; inset: 0; }

.djte-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.djte-slide.is-on { opacity: 1; }

.djte-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #1B0E24;
  transform: scale(1.06);
  transition: transform 9s linear;
}

.djte-slide.is-on .djte-bg { transform: scale(1); }

/* the dark wash over the photo - controlled by --djte-dim */
.djte-scrim {
  position: absolute;
  inset: 0;
  opacity: var(--djte-dim);
  background:
    radial-gradient(68% 62% at 50% 52%, rgba(10,7,16,.30) 0%, rgba(10,7,16,.95) 100%),
    linear-gradient(0deg, rgba(10,7,16,.70) 0%, rgba(10,7,16,.10) 45%, rgba(10,7,16,.55) 100%);
}

.djte-content {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 clamp(16px, 5vw, 70px);
}

.djte-line {
  margin: 0;
  font-family: var(--djte-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: .01em;
  white-space: nowrap;
  font-size: var(--djte-size);
  color: var(--djte-sand);
  /* keeps white text readable now that the photo shows through */
  text-shadow: 0 2px 18px rgba(10,7,16,.75), 0 0 60px rgba(10,7,16,.5);
}

@media (max-width: 768px) {
  .djte-hero { height: var(--djte-mheight); min-height: 320px; }
  .djte-line { font-size: var(--djte-msize); }
}

@media (prefers-reduced-motion: reduce) {
  .djte-slide, .djte-bg { transition: none; }
}