:root {
    --txi-berry-night: #060101;
    --txi-berry-wine: #580005;
    --txi-cream: #fff3d9;
    --txi-peach: #ee4668;
    --txi-rounded: "Microsoft YaHei UI", "PingFang SC", "Noto Sans SC", sans-serif;
    --txi-latin: "Trebuchet MS", "Avenir Next", sans-serif;
}

html.tx-brand-intro-pending body.home-index-body {
    overflow: hidden;
}

.tx-brand-intro {
    position: fixed;
    inset: 0;
    z-index: 1000000000;
    display: none;
    place-items: center;
    overflow: hidden;
    color: var(--txi-cream);
    background:
        radial-gradient(circle at 50% 44%, rgba(238, 70, 104, .18), transparent 23rem),
        radial-gradient(circle at 12% 8%, rgba(88, 0, 5, .5), transparent 30rem),
        linear-gradient(135deg, var(--txi-berry-night) 0%, #310008 48%, #160305 100%);
    font-family: var(--txi-rounded);
    isolation: isolate;
}

html.tx-brand-intro-pending .tx-brand-intro {
    display: grid;
}

.tx-brand-intro[hidden] {
    display: none !important;
}

.tx-brand-intro__curtain {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -3;
    width: 51%;
    background:
        linear-gradient(90deg, transparent, rgba(255, 243, 217, .045), transparent 42%),
        linear-gradient(135deg, var(--txi-berry-night), #3b030b 58%, #120203);
    will-change: transform;
}

.tx-brand-intro__curtain--left {
    left: 0;
    border-right: 1px solid rgba(255, 245, 231, .06);
}

.tx-brand-intro__curtain--right {
    right: 0;
    border-left: 1px solid rgba(255, 245, 231, .06);
    transform: scaleX(-1);
}

.tx-brand-intro__grain {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .16;
    background-image:
        radial-gradient(circle at 20% 15%, rgba(255, 132, 122, .24), transparent 31rem),
        radial-gradient(circle at 83% 84%, rgba(255, 199, 183, .1), transparent 24rem),
        repeating-linear-gradient(115deg, rgba(255, 237, 225, .025) 0 1px, transparent 1px 9px);
}

.tx-brand-intro__orbit {
    position: absolute;
    z-index: -2;
    width: min(70vw, 760px);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 190, 180, .12);
    border-radius: 50%;
    will-change: transform, opacity;
}

.tx-brand-intro__orbit--one {
    transform: rotate(-12deg) scaleY(.43);
}

.tx-brand-intro__orbit--two {
    width: min(92vw, 980px);
    transform: rotate(20deg) scaleY(.28);
}

.tx-brand-intro__skip {
    position: absolute;
    top: max(22px, env(safe-area-inset-top));
    right: max(22px, env(safe-area-inset-right));
    z-index: 4;
    min-width: 92px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid rgba(255, 205, 193, .25);
    border-radius: 999px;
    color: var(--txi-cream);
    background: rgba(255, 207, 196, .07);
    font-family: var(--txi-rounded);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.tx-brand-intro__skip:focus-visible {
    outline: 3px solid rgba(255, 170, 160, .55);
    outline-offset: 4px;
}

.tx-brand-intro__lockup {
    display: grid;
    justify-items: center;
    gap: 18px;
    width: max-content;
    will-change: transform, opacity;
}

.tx-brand-intro__logo-scene {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(172px, 19vw, 218px);
    aspect-ratio: 1;
    transform-origin: 50% 68%;
    backface-visibility: hidden;
    isolation: isolate;
    will-change: transform, opacity;
}

.tx-brand-intro__logo {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 24px 44px rgba(0, 0, 0, .28));
}

.tx-brand-intro__halo {
    position: absolute;
    inset: -28%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 105, 102, .34) 0%,
        rgba(255, 105, 102, .16) 36%,
        rgba(255, 105, 102, .05) 58%,
        transparent 74%);
    pointer-events: none;
    will-change: transform, opacity;
}

.tx-brand-intro__play-pulse {
    position: absolute;
    top: 50%;
    left: 52%;
    z-index: 4;
    width: 51px;
    aspect-ratio: 1;
    border: 2px solid rgba(255, 245, 231, .72);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 22px rgba(255, 196, 180, .28);
    pointer-events: none;
    will-change: transform, opacity;
}

.tx-brand-intro__spark {
    position: absolute;
    z-index: 3;
    width: 22px;
    aspect-ratio: 1;
    background: #ffe1ce;
    clip-path: polygon(50% 0, 61% 37%, 100% 50%, 61% 63%, 50% 100%, 39% 63%, 0 50%, 39% 37%);
    filter: drop-shadow(0 0 10px rgba(255, 245, 231, .6));
    will-change: transform, opacity;
}

.tx-brand-intro__spark--one {
    top: 6%;
    right: -4%;
}

.tx-brand-intro__spark--two {
    bottom: 10%;
    left: -9%;
    width: 12px;
    opacity: .72;
}

.tx-brand-intro__dot {
    position: absolute;
    z-index: 4;
    width: 7px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #ffd4c5;
    box-shadow: 0 0 0 4px rgba(255, 197, 184, .09);
    will-change: transform, opacity;
}

.tx-brand-intro__dot--one { top: 25%; left: -8%; }
.tx-brand-intro__dot--two { top: 51%; right: -12%; width: 5px; background: #ff8f89; }
.tx-brand-intro__dot--three { right: 7%; bottom: -2%; width: 9px; }
.tx-brand-intro__dot--four { bottom: 12%; left: 2%; width: 4px; background: #ff8f89; }

.tx-brand-intro__copy {
    display: grid;
    justify-items: center;
}

.tx-brand-intro__opening-line {
    margin: 0 0 10px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 179, 165, .14);
    border-radius: 999px;
    color: #ffb3a5;
    background: rgba(255, 151, 139, .06);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: .22em;
}

.tx-brand-intro__title {
    display: flex;
    gap: .08em;
    margin: 0;
    color: var(--txi-cream);
    font-family: var(--txi-rounded);
    font-size: clamp(46px, 6.4vw, 74px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: .095em;
    text-shadow: 0 12px 34px rgba(9, 5, 16, .3);
    -webkit-text-stroke: .25px rgba(255, 255, 255, .18);
}

.tx-brand-intro__char-mask {
    display: block;
    overflow: hidden;
    padding: .06em .01em .12em;
}

.tx-brand-intro__char-mask > span {
    display: block;
    will-change: transform, opacity;
}

.tx-brand-intro__char-mask:nth-child(1) > span,
.tx-brand-intro__char-mask:nth-child(3) > span {
    transform-origin: 50% 100%;
}

.tx-brand-intro__char-mask:nth-child(2) > span,
.tx-brand-intro__char-mask:nth-child(4) > span {
    transform-origin: 50% 0;
}

.tx-brand-intro__char-mask:nth-child(2) > span {
    color: var(--txi-peach);
}

.tx-brand-intro__english {
    margin: 8px 0 0;
    color: rgba(255, 222, 209, .7);
    font-family: var(--txi-latin);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: .28em;
}

.tx-brand-intro__footer {
    position: absolute;
    bottom: max(28px, env(safe-area-inset-bottom));
    left: 50%;
    display: flex;
    align-items: center;
    gap: 14px;
    transform: translateX(-50%);
    color: rgba(255, 218, 204, .54);
    white-space: nowrap;
}

.tx-brand-intro__footer p {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .12em;
}

.tx-brand-intro__footer span {
    width: 34px;
    height: 1px;
    background: rgba(255, 199, 182, .22);
}

@media (max-width: 820px) {
    .tx-brand-intro__logo-scene {
        width: 158px;
    }

    .tx-brand-intro__lockup {
        gap: 14px;
    }

    .tx-brand-intro__title {
        font-size: 48px;
        letter-spacing: .075em;
    }

    .tx-brand-intro__footer {
        bottom: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.tx-brand-intro-pending body.home-index-body {
        overflow: auto;
    }

    html.tx-brand-intro-pending .tx-brand-intro {
        display: none;
    }
}