body.sapphire-front .sapphire-title {
    --sapphire-title-size: clamp(1.05rem, 1.65vw, 2rem);
    position: absolute;
    top: 30%;
    left: 50%;
    z-index: 10;
    display: flex;
    align-items: baseline;
    justify-content: center;
    min-height: 1.35em;
    margin: 0;
    color: var(--sapphire-text);
    font-size: var(--sapphire-title-size);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: 0.012em;
    text-shadow:
        0 0 28px rgba(96, 165, 250, 0.24),
        0 2px 12px rgba(0, 0, 0, 0.48);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transform: translateX(-50%);
}

body.sapphire-front .sapphire-title:focus-visible {
    outline: 2px solid var(--sapphire-cyan);
    outline-offset: 8px;
    border-radius: 6px;
}

body.sapphire-front .sapphire-title__fixed {
    flex: 0 0 auto;
    margin-inline-end: 0.36em;
    background: linear-gradient(100deg, #ffffff 10%, #d8e7ff 55%, #93c5fd 100%);
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
}

body.sapphire-front .sapphire-title__dynamic {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-start;
    min-width: 0;
}

body.sapphire-front .sapphire-title__word {
    display: inline-flex;
    align-items: baseline;
    margin-inline-end: 0.32em;
    transition:
        margin-inline-end 420ms cubic-bezier(.2, .8, .2, 1),
        filter 320ms ease;
}

body.sapphire-front .sapphire-title__word:last-child {
    margin-inline-end: 0;
}

body.sapphire-front .sapphire-title__word.is-acronym {
    margin-inline-end: 0;
    filter: drop-shadow(0 0 8px rgba(147, 197, 253, 0.24));
}

body.sapphire-front .sapphire-title__char {
    display: inline-block;
    transform-origin: 50% 65%;
    will-change: transform, opacity;
}

body.sapphire-front .sapphire-title__char.is-dot {
    color: var(--sapphire-cyan);
    text-shadow: 0 0 10px rgba(147, 197, 253, 0.5);
}

body.sapphire-front .sapphire-title.is-complete .sapphire-title__dynamic {
    animation: sapphire-title-complete-pulse 900ms cubic-bezier(.16, 1, .3, 1);
}

body.sapphire-front .brilliancy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.7rem, 1.15vw, 1.15rem);
    width: max-content;
    max-width: calc(100% - 2rem);
    white-space: nowrap;
}

body.sapphire-front .brilliancy::before,
body.sapphire-front .brilliancy::after {
    content: "";
    flex: 0 1 clamp(2.25rem, 5vw, 5.5rem);
    width: clamp(2.25rem, 5vw, 5.5rem);
    height: 0.7rem;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(96, 165, 250, 0.2) 24%,
        rgba(147, 197, 253, 0.72) 72%,
        rgba(251, 191, 36, 0.98) 100%
    );
    clip-path: polygon(
        0 46%,
        70% 46%,
        79% 0,
        88% 46%,
        100% 46%,
        100% 54%,
        88% 54%,
        79% 100%,
        70% 54%,
        0 54%
    );
    filter:
        drop-shadow(0 0 4px rgba(96, 165, 250, 0.38))
        drop-shadow(0 0 6px rgba(251, 191, 36, 0.3));
    opacity: 0.88;
}

body.sapphire-front .brilliancy::after {
    transform: scaleX(-1);
}

@keyframes sapphire-title-complete-pulse {
    0% {
        filter: brightness(1);
        transform: scale(1);
    }
    35% {
        filter: brightness(1.35);
        transform: scale(1.035);
    }
    100% {
        filter: brightness(1);
        transform: scale(1);
    }
}

@keyframes sapphire-brilliancy-in-mobile {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

body.sapphire-front .sapphire-falling-letter {
    position: fixed;
    z-index: 99999;
    display: inline-block;
    margin: 0;
    padding: 0;
    color: var(--sapphire-text);
    text-shadow:
        0 0 12px rgba(147, 197, 253, 0.4),
        0 4px 14px rgba(0, 0, 0, 0.68);
    pointer-events: none;
    user-select: none;
    will-change: transform, opacity, filter;
}

@media (max-width: 900px) {
    body.sapphire-front .sapphire-title {
        --sapphire-title-size: clamp(0.6rem, 3.15vw, 1rem);
        position: static;
        inset: auto;
        width: 100%;
        min-width: 0;
        min-height: 49px;
        transform: none;
    }

    body.sapphire-front .sapphire-title__fixed {
        margin-inline-end: 0.28em;
    }

    body.sapphire-front .sapphire-title__word {
        margin-inline-end: 0.25em;
    }

    body.sapphire-front .brilliancy {
        width: 100%;
        max-width: 100%;
        gap: 0.6rem;
        animation-name: sapphire-brilliancy-glow, sapphire-brilliancy-in-mobile;
    }

    body.sapphire-front .brilliancy::before,
    body.sapphire-front .brilliancy::after {
        flex-basis: clamp(1.75rem, 8vw, 2.5rem);
        width: clamp(1.75rem, 8vw, 2.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.sapphire-front .sapphire-title__word,
    body.sapphire-front .sapphire-title__dynamic {
        transition: none !important;
        animation: none !important;
    }

    body.sapphire-front .sapphire-falling-letter {
        display: none !important;
    }
}