/* ========================================
   NT Title Basics
   ======================================== */
.nt-title {
    font-weight: 700;
    font-size: 50px;
    line-height: 1.2;
    text-align: left;
    margin-bottom: 0.5em;
}

.nt-title--center { text-align: center; }
.nt-title--right { text-align: right; }

.nt-title--smaller { font-size: 24px; }
.nt-title--small { font-size: 36px; }
.nt-title--large { font-size: 90px; }

.nt-title--lh-tight { line-height: 1.1; }
.nt-title--lh-normal { line-height: 1.2; }
.nt-title--lh-relaxed { line-height: 1.4; }
.nt-title--lh-loose { line-height: 1.6; }

/* ========================================
   NT Title V2
   ======================================== */
.nt-title-v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: 0;
}

.nt-title-v2--left { align-items: flex-start; }
.nt-title-v2--right { align-items: flex-end; }

.nt-title-v2__row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    padding: 0;
    gap: 8px;
}

.nt-title-v2--left .nt-title-v2__row { justify-content: flex-start; }
.nt-title-v2--right .nt-title-v2__row { justify-content: flex-end; }

.nt-title-v2__highlight {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 14px;
    background: linear-gradient(89.57deg, #00d1b2 -13.9%, #f7f7f7 123.63%);
    border-radius: 4px;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.2;
    text-align: center;
    color: #333;
    white-space: nowrap;
    flex-shrink: 0;
}

.nt-title-v2__text {
    font-weight: 700;
    font-size: 40px;
    line-height: 1.2;
    text-align: center;
    color: #1b1b1b;
    margin: 0;
}

.nt-title-v2--left .nt-title-v2__text { text-align: left; }
.nt-title-v2--right .nt-title-v2__text { text-align: right; }

/* ========================================
   NT Title V3
   ======================================== */
.nt-title-v3 {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.nt-title-v3--left { align-items: flex-start; }
.nt-title-v3--right { align-items: flex-end; }

.nt-title-v3__line {
    font-size: 50px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1;
}

/* ========================================
   NT Title V4
   ======================================== */
.nt-title-v4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
}

.nt-title-v4--left { align-items: flex-start; }
.nt-title-v4--right { align-items: flex-end; }

.nt-title-v4__row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 0;
    gap: 8px;
    margin: 0;
}

.nt-title-v4--left .nt-title-v4__row { justify-content: flex-start; }
.nt-title-v4--right .nt-title-v4__row { justify-content: flex-end; }

.nt-title-v4__highlight {
    display: inline-flex;
    padding: 1px 14px;
    background: linear-gradient(89.57deg, #00d1b2 -13.9%, #f7f7f7 123.63%);
    border-radius: 4px;
    font-weight: 700;
    font-size: 40px;
    color: #333;
}

.nt-title-v4__text {
    font-weight: 700;
    font-size: 40px;
    color: #1b1b1b;
}

/* ========================================
   Matrix Effect
   ======================================== */
.nt-title-matrix {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow: hidden;
    z-index: 2;
    min-height: 120px;
}

.nt-title-matrix.nt-title--left { justify-content: flex-start; }
.nt-title-matrix.nt-title--right { justify-content: flex-end; }

.nt-title-matrix__text {
    color: var(--matrix-color, #0f0);
    font-size: inherit;
    font-weight: 700;
    font-family: monospace;
    position: relative;
    text-shadow: 0 0 10px var(--matrix-color, #0f0), 0 0 20px var(--matrix-color, #0f0);
    z-index: 2;
}

.nt-title-matrix__text::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: nt-matrix-glitch 2s infinite;
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    transform: translate(-2px, -2px);
    color: var(--matrix-color, #0f0);
    text-shadow: 0 0 5px var(--matrix-color, #0f0);
}

.nt-title-matrix__rain {
    display: none;
}

@keyframes nt-matrix-glitch {
    0%, 100% {
        clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
        transform: translate(0);
    }
    33% {
        clip-path: polygon(0 0, 100% 0, 100% 15%, 0 15%);
        transform: translate(-5px, -5px);
    }
    66% {
        clip-path: polygon(0 85%, 100% 85%, 100% 100%, 0 100%);
        transform: translate(5px, 5px);
    }
}

/* ========================================
   Text Masking
   ======================================== */
.nt-title-masking__text {
    font-size: inherit;
    font-weight: 900;
    text-transform: uppercase;
    background-size: 200%;
    background-position: 0 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: nt-animate-background 5s infinite alternate linear;
    display: inline-block;
}

@keyframes nt-animate-background {
    0% {
        background-position: 0 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

/* ========================================
   Neon Glow
   ======================================== */
.nt-title-neon__text {
    font-size: inherit;
    color: #fff;
    text-shadow: 0 0 5px var(--neon-color, #ff005e), 0 0 10px var(--neon-color, #ff005e), 0 0 20px var(--neon-color, #ff005e), 0 0 40px var(--neon-color, #ff005e), 0 0 80px var(--neon-color, #ff005e);
    animation: nt-neon-glow 1.5s infinite alternate;
}

@keyframes nt-neon-glow {
    0% {
        text-shadow: 0 0 5px var(--neon-color, #ff005e), 0 0 10px var(--neon-color, #ff005e), 0 0 20px var(--neon-color, #ff005e), 0 0 40px var(--neon-color, #ff005e), 0 0 80px var(--neon-color, #ff005e);
    }
    100% {
        text-shadow: 0 0 10px var(--neon-color-2, #00d4ff), 0 0 20px var(--neon-color-2, #00d4ff), 0 0 40px var(--neon-color-2, #00d4ff), 0 0 80px var(--neon-color-2, #00d4ff), 0 0 160px var(--neon-color-2, #00d4ff);
    }
}

@keyframes nt-neon-glow {
    from { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px var(--neon-color), 0 0 30px var(--neon-color), 0 0 40px var(--neon-color); }
    to { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px var(--neon-color), 0 0 40px var(--neon-color), 0 0 60px var(--neon-color); }
}

/* ========================================
   Wavy Text
   ======================================== */
.nt-title-wavy h1, .nt-title-wavy h2, .nt-title-wavy h3, .nt-title-wavy h4 {
    display: flex;
    gap: 2px;
}

.nt-title-wavy span {
    display: inline-block;
    animation: nt-wavy 2s ease-in-out infinite;
}

@keyframes nt-wavy {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* ========================================
   Sliding Background
   ======================================== */
.nt-title-sliding-bg__text {
    position: relative;
    padding: 0 10px;
    display: inline-block;
    z-index: 1;
    font-size: inherit;
}

.nt-title-sliding-bg__text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--bg-color);
    z-index: -1;
    transition: width 0.4s ease-in-out;
}

.nt-title-sliding-bg:hover .nt-title-sliding-bg__text::before {
    width: 100%;
}

/* ========================================
   Gradient Typing
   ======================================== */
.nt-title-typing-gradient {
    overflow: hidden;
}
.nt-title-typing-gradient__text {
    font-size: inherit;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid var(--grad-start);
    background: linear-gradient(to right, var(--grad-start), var(--grad-end));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: nt-typing 4s steps(var(--chars)) forwards, nt-blink 0.8s infinite;
}

@keyframes nt-typing {
    from { width: 0; }
}

@keyframes nt-blink {
    50% { border-color: transparent; }
}

/* ========================================
   Animated Split Hover
   ======================================== */
.nt-title-hover-split__wrapper {
    position: relative;
    cursor: pointer;
    color: transparent;
    text-shadow: 0 0 0px var(--split-color, #ff005e);
    font-size: inherit;
    font-weight: 900;
    line-height: 1.1;
    display: block;
    overflow: hidden;
    transition: all ease-out .5s;
    user-select: none;
}

.nt-title-hover-split__wrapper:before {
    content: "";
    width: 100%;
    position: absolute;
    border-bottom: solid 4px var(--hover-color, #fff);
    left: -100%;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.5s cubic-bezier(1, -0.04, 0, 1.16);
    z-index: 10;
}

.nt-title-hover-split__wrapper span {
    display: block;
    position: absolute;
    height: 50%;
    width: 100%;
    overflow: hidden;
    left: 0;
}

.nt-title-hover-split__wrapper span:before {
    content: attr(data-text);
    color: var(--hover-color, #fff);
    display: block;
    transition: ease-out all 0.3s -0.1s;
    width: 100%;
}

.nt-title-hover-split__wrapper span:nth-child(1) {
    top: 0;
}

.nt-title-hover-split__wrapper span:nth-child(2) {
    bottom: 0;
}

.nt-title-hover-split__wrapper span:nth-child(1):before {
    transform: translateY(50%);
}

.nt-title-hover-split__wrapper span:nth-child(2):before {
    transform: translateY(-100%);
}

.nt-title-hover-split__wrapper:hover {
    transition: all ease-out 0s;
    text-shadow: none;
}

.nt-title-hover-split__wrapper:hover:before {
    transform: translate(200%, -50%); /* Faster line animation */
}

.nt-title-hover-split__wrapper:hover span:before {
    transition: ease-out all 0.3s;
    transition-delay: .3s;
}

.nt-title-hover-split__wrapper:hover span:nth-child(1):before {
    transform: translateY(0);
}

.nt-title-hover-split__wrapper:hover span:nth-child(2):before {
    transform: translateY(-50%);
}

/* ========================================
   Reveal Middle Hover
   ======================================== */
.nt-title-hover-believe__wrapper {
  position: relative;
  font-size: inherit;
  font-weight: 900;
  color: transparent;
  text-transform: uppercase;
  display: inline-block;
  line-height: 1.2;
}

.nt-title-hover-believe__wrapper span:nth-child(1) {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--believe-color, #000);
  transition: 0.5s;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  overflow: hidden;
  width: 100%;
}

.nt-title-hover-believe__wrapper:hover span:nth-child(1) {
  transform: translateY(-25%);
}

.nt-title-hover-believe__wrapper span:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--believe-color, #000);
  transition: 0.5s;
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  overflow: hidden;
  width: 100%;
}

.nt-title-hover-believe__wrapper:hover span:nth-child(2) {
  transform: translateY(25%);
}

.nt-title-hover-believe__wrapper span:nth-child(3) {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) scaleY(0);
  width: 100%;
  color: var(--believe-mid-color, #000);
  background: var(--believe-bg, #ff0);
  font-size: 0.25em;
  font-weight: 500;
  letter-spacing: 0.5em;
  text-align: center;
  transition: 0.5s;
  z-index: 10;
  white-space: nowrap;
  padding: 5px 0;
}

.nt-title-hover-believe__wrapper:hover span:nth-child(3) {
  transform: translateY(-50%) scaleY(1);
}

/* ========================================
   The Aurora
   ======================================== */
/* ========================================
   The Aurora (Double Blend Edition)
   ======================================== */
.nt-title-aurora {
    position: relative;
    overflow: hidden;
    background: var(--aurora-bg, #000); /* User-selected background */
}

.nt-title--center.nt-title-aurora { text-align: center; }
.nt-title--right.nt-title-aurora { text-align: right; }

.nt-title-aurora__inner {
    display: inline-block;
    vertical-align: middle;
    mix-blend-mode: screen; /* Makes the inner black background transparent */
}

.nt-title-aurora__content {
    position: relative;
    padding: 2rem;
    overflow: hidden;
    background: #000 !important; /* Required black base for darken blend */
}

.nt-title-aurora__text {
    font-size: inherit;
    font-weight: 800;
    position: relative;
    margin: 0;
    color: #fff !important; /* White text acts as the mask for darken */
    z-index: 1;
}

.nt-title-aurora__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    mix-blend-mode: darken; /* Only shows colors on the white text */
    pointer-events: none;
}

.nt-title-aurora__item {
    overflow: hidden;
    position: absolute;
    width: 60vw;
    height: 60vw;
    background-color: var(--aurora-clr-1);
    border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    filter: blur(1rem);
    mix-blend-mode: overlay;
}

.nt-title-aurora__item:nth-of-type(1) {
    top: -50%;
    animation: nt-aurora-border 6s ease-in-out infinite,
        nt-aurora-1 12s ease-in-out infinite alternate;
}

.nt-title-aurora__item:nth-of-type(2) {
    background-color: var(--aurora-clr-3);
    right: 0;
    top: 0;
    animation: nt-aurora-border 6s ease-in-out infinite,
        nt-aurora-2 12s ease-in-out infinite alternate;
}

.nt-title-aurora__item:nth-of-type(3) {
    background-color: var(--aurora-clr-2);
    left: 0;
    bottom: 0;
    animation: nt-aurora-border 6s ease-in-out infinite,
        nt-aurora-3 8s ease-in-out infinite alternate;
}

.nt-title-aurora__item:nth-of-type(4) {
    background-color: var(--aurora-clr-4);
    right: 0;
    bottom: -50%;
    animation: nt-aurora-border 6s ease-in-out infinite,
        nt-aurora-4 24s ease-in-out infinite alternate;
}

@keyframes nt-aurora-1 {
    0% { top: 0; right: 0; }
    50% { top: 100%; right: 75%; }
    75% { top: 100%; right: 25%; }
    100% { top: 0; right: 0; }
}

@keyframes nt-aurora-2 {
    0% { top: -50%; left: 0%; }
    60% { top: 100%; left: 75%; }
    85% { top: 100%; left: 25%; }
    100% { top: -50%; left: 0%; }
}

@keyframes nt-aurora-3 {
    0% { bottom: 0; left: 0; }
    40% { bottom: 100%; left: 75%; }
    65% { bottom: 40%; left: 50%; }
    100% { bottom: 0; left: 0; }
}

@keyframes nt-aurora-4 {
    0% { bottom: -50%; right: 0; }
    50% { bottom: 0%; right: 40%; }
    90% { bottom: 50%; right: 25%; }
    100% { bottom: -50%; right: 0; }
}

@keyframes nt-aurora-border {
    0% { border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%; }
    25% { border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%; }
    50% { border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%; }
    75% { border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%; }
    100% { border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%; }
}

@keyframes nt-aurora-border {
    0% { border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%; }
    25% { border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%; }
    50% { border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%; }
    75% { border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%; }
    100% { border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%; }
}

/* ========================================
   Dropping Texts
   ======================================== */
.nt-title-dropping {
    font-size: inherit;
    font-weight: 300;
}

.nt-title-dropping__wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.nt-title-dropping__list {
    display: inline-block;
    position: relative;
    height: 1.2em;
    vertical-align: middle;
    min-width: 150px;
}

.nt-title-dropping__item {
    font-size: 0px;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    font-weight: 700;
    white-space: nowrap;
}

.nt-title-dropping__item:nth-child(1) { animation: nt-roll 5s linear infinite 0s; }
.nt-title-dropping__item:nth-child(2) { animation: nt-roll 5s linear infinite 1s; }
.nt-title-dropping__item:nth-child(3) { animation: nt-roll 5s linear infinite 2s; }
.nt-title-dropping__item:nth-child(4) { animation: nt-roll2 5s linear infinite 3s; }

@keyframes nt-roll {
    0% {
        font-size: 0px;
        opacity: 0;
        margin-left: -30px;
        margin-top: 0px;
        transform: rotate(-25deg);
    }
    3% {
        opacity: 1;
        transform: rotate(0deg);
    }
    5% {
        font-size: inherit;
        opacity: 1;
        margin-left: 0px;
        margin-top: 0px;
    }
    20% {
        font-size: inherit;
        opacity: 1;
        margin-left: 0px;
        margin-top: 0px;
        transform: rotate(0deg);
    }
    27% {
        font-size: 0px;
        opacity: 0.5;
        margin-left: 20px;
        margin-top: 100px;
    }
    100% {
        font-size: 0px;
        opacity: 0;
        margin-left: -30px;
        margin-top: 0px;
        transform: rotate(15deg);
    }
}

@keyframes nt-roll2 {
    0% {
        font-size: 0px;
        opacity: 0;
        margin-left: -30px;
        margin-top: 0px;
        transform: rotate(-25deg);
    }
    3% {
        opacity: 1;
        transform: rotate(0deg);
    }
    5% {
        font-size: inherit;
        opacity: 1;
        margin-left: 0px;
        margin-top: 0px;
    }
    30% {
        font-size: inherit;
        opacity: 1;
        margin-left: 0px;
        margin-top: 0px;
        transform: rotate(0deg);
    }
    37% {
        font-size: 500px; /* Reduced from 1500px for safety */
        opacity: 0;
        margin-left: -200px;
        margin-top: -200px;
    }
    100% {
        font-size: 0px;
        opacity: 0;
        margin-left: -30px;
        margin-top: 0px;
        transform: rotate(15deg);
    }
}

/* Responsive */
@media (max-width: 767px) {
    .nt-title { font-size: 32px; }
    .nt-title--large { font-size: 48px; }
    .nt-title-v2__highlight, .nt-title-v2__text,
    .nt-title-v4__highlight, .nt-title-v4__text {
        font-size: 32px;
    }
    .nt-title-v2__row, .nt-title-v4__row {
        flex-direction: column;
        gap: 4px;
    }
}