/* A short, optional brand reveal. Hidden markup remains harmless without JS. */
.brand-intro[hidden] { display: none !important; }
.brand-intro {
    --intro-purple: #7865ff;
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    isolation: isolate;
    font-family: Inter, Arial, sans-serif;
    overscroll-behavior: contain;
    touch-action: none;
}
.brand-intro__door {
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(50% + 1px);
    overflow: hidden;
    background: #090a12;
    will-change: transform;
}
.brand-intro__door::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(#ffffff04 1px, transparent 1px), linear-gradient(90deg, #ffffff04 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: linear-gradient(transparent, #000 50%, transparent);
}
.brand-intro__door--left {
    left: 0;
    background: radial-gradient(ellipse at 100% 50%, #322568 0, #151327 28%, #090a12 66%);
    border-right: 1px solid #a396ff38;
    animation: seller-door-left 2.65s cubic-bezier(.76, 0, .24, 1) both;
}
.brand-intro__door--right {
    right: 0;
    background: radial-gradient(ellipse at 0 50%, #20203b 0, #10111e 30%, #090a12 66%);
    border-left: 1px solid #ffffff0a;
    animation: seller-door-right 2.65s cubic-bezier(.76, 0, .24, 1) both;
}
.brand-intro__door > span {
    position: absolute;
    top: 50%;
    font-size: clamp(4rem, 15vw, 16rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.08em;
    color: #ffffff03;
    transform: translateY(-50%);
}
.brand-intro__door--left > span { right: 10%; }
.brand-intro__door--right > span { left: 10%; }
.brand-intro__seam {
    position: absolute;
    left: calc(50% - 1px);
    top: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(transparent 10%, #a79aff85 35%, #e4dfff 50%, #a79aff85 65%, transparent 90%);
    box-shadow: 0 0 45px 6px #8171f542;
    transform-origin: center;
    animation: seller-seam 2.65s ease both;
}
.brand-intro__studio {
    position: absolute;
    inset: 36px 4vw auto;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    color: #c2bfdb;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .22em;
    animation: seller-intro-details 2.65s ease both;
}
.brand-intro__center { position: relative; margin-top: -12px; text-align: center; }
.brand-intro__orbit {
    position: relative;
    width: clamp(180px, 25vw, 244px);
    aspect-ratio: 1;
    margin: 0 auto 26px;
    animation: seller-orbit 2.65s cubic-bezier(.65, 0, .2, 1) both;
}
.brand-intro__arc {
    position: absolute;
    inset: -24px;
    border: 1px solid transparent;
    border-radius: 50%;
    animation: seller-arcs 2.65s ease both;
}
.brand-intro__arc--one { border-top-color: #9b89ff80; border-left-color: #9b89ff28; transform: rotate(-25deg); }
.brand-intro__arc--two { inset: -33px; border-bottom-color: #ffffff50; border-right-color: #ffffff15; transform: rotate(-25deg); }
.brand-intro__letter { position: absolute; inset: 0; filter: drop-shadow(0 6px 20px #0003); }
.brand-intro__letter svg { display: block; width: 100%; height: 100%; overflow: visible; }
.brand-intro__letter--s { fill: var(--intro-purple); animation: seller-letter-left 2.65s cubic-bezier(.18, .75, .23, 1) both; }
.brand-intro__letter--r { fill: #f3f0ff; animation: seller-letter-right 2.65s cubic-bezier(.18, .75, .23, 1) both; }
.brand-intro__copy { animation: seller-intro-copy 2.65s ease both; }
.brand-intro__copy p { margin: 0; }
.brand-intro__copy p:first-child { font-size: clamp(21px, 3.2vw, 32px); font-weight: 800; letter-spacing: .14em; }
.brand-intro__copy p:first-child span { font-weight: 400; color: #b6aecf; }
.brand-intro__copy p:last-child { margin-top: 12px; color: #c2bbd9; font-size: 13px; letter-spacing: .04em; }
.brand-intro__footer {
    position: absolute;
    bottom: 38px;
    left: 4vw;
    right: 4vw;
    display: flex;
    align-items: center;
    gap: 24px;
    color: #a9a3bd;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .17em;
    animation: seller-intro-details 2.65s ease both;
}
.brand-intro__progress { height: 1px; flex: 1; background: #ffffff17; overflow: hidden; }
.brand-intro__progress::after { content: ""; display: block; width: 100%; height: 1px; background: #ad9dff; transform-origin: left; animation: seller-progress 1.9s linear both; }
.brand-intro__skip {
    position: absolute;
    top: 69px;
    right: 4vw;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid #ffffff32;
    border-radius: 100px;
    background: #0c0b18cc;
    color: #e0daef;
    font-size: 11px;
    cursor: pointer;
}
.brand-intro__skip:hover { color: #fff; background: #26203e; }
.brand-intro__skip:focus-visible { outline: 2px solid #ad9dff; outline-offset: 4px; }
@keyframes seller-letter-left { 0%, 3% { transform: translateX(-65vw); opacity: 0; } 23%, 66% { transform: translateX(0); opacity: 1; } 80%, 100% { transform: translateX(-50px); opacity: 0; } }
@keyframes seller-letter-right { 0%, 3% { transform: translateX(65vw); opacity: 0; } 23%, 66% { transform: translateX(0); opacity: 1; } 80%, 100% { transform: translateX(50px); opacity: 0; } }
@keyframes seller-orbit { 0%, 25% { transform: rotate(0); } 65%, 100% { transform: rotate(360deg); } }
@keyframes seller-arcs { 0%, 18% { opacity: 0; } 32%, 63% { opacity: 1; } 78%, 100% { opacity: 0; } }
@keyframes seller-intro-copy { 0%, 15% { opacity: 0; transform: translateY(12px); } 31%, 65% { opacity: 1; transform: translateY(0); } 78%, 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes seller-seam { 0%, 10% { opacity: 0; transform: scaleY(.1); } 28%, 62% { opacity: .65; transform: scaleY(1); } 74%, 100% { opacity: 0; transform: scaleY(1); } }
@keyframes seller-door-left { 0%, 70% { transform: translateX(0); } 100% { transform: translateX(-101%); } }
@keyframes seller-door-right { 0%, 70% { transform: translateX(0); } 100% { transform: translateX(101%); } }
@keyframes seller-intro-details { 0%, 65% { opacity: 1; } 78%, 100% { opacity: 0; } }
@keyframes seller-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 600px) {
    .brand-intro__studio { top: 24px; font-size: 8px; letter-spacing: .1em; }
    .brand-intro__studio span:last-child { max-width: 160px; text-align: right; }
    .brand-intro__skip { top: 64px; }
    .brand-intro__footer { bottom: 26px; font-size: 8px; gap: 14px; letter-spacing: .08em; }
    .brand-intro__footer span:last-child { display: none; }
    .brand-intro__orbit { margin-bottom: 24px; }
}
@media (max-height: 480px) {
    .brand-intro__orbit { width: 132px; margin-bottom: 14px; }
    .brand-intro__copy p:first-child { font-size: 20px; }
    .brand-intro__copy p:last-child { margin-top: 4px; }
    .brand-intro__footer { bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) { .brand-intro { display: none !important; } }