.rth-home {
position: relative;
min-height: calc(100vh - 52px);
min-height: calc(100svh - 52px);
display: flex;
align-items: center;
justify-content: center;
padding: 60px 24px 40px;
overflow: hidden;
isolation: isolate;
text-align: center;
}

.rth-home-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
z-index: 0;
pointer-events: none;
background: transparent;
opacity: .96;
}

.rth-home::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(
ellipse at center,
transparent 25%,
rgba(0,0,0,.025) 62%,
rgba(0,0,0,.14) 100%
);
}

.rth-home-welcome {
position: relative;
z-index: 3;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transform: translate3d(0,0,0);
transition:
opacity .8s ease,
transform .8s cubic-bezier(.22,1,.36,1);
}

.rth-home-orb {
--orb-energy: 0;
--orb-cyan: 0;
--orb-magenta: 0;
--orb-yellow: 0;
--lens-x: 0;
--lens-y: 0;


position: relative;

width: clamp(245px, 32vw, 325px);
aspect-ratio: 1;

display: flex;
align-items: center;
justify-content: center;

cursor: pointer;
outline: none;

border-radius:
    47% 53% 51% 49% /
    52% 46% 54% 48%;

animation:
    rth-orb-float 8s ease-in-out infinite,
    rth-orb-morph 13s ease-in-out infinite alternate;

filter:
    drop-shadow(
        0 30px 42px
        rgba(0,0,0,.3)
    );

transition:
    filter .6s ease,
    transform .6s cubic-bezier(.22,1,.36,1);


}

.rth-home-orb::before {
content: "";


position: absolute;

inset: -25%;

border-radius:
    46% 54% 50% 50%;

background:
    radial-gradient(
        ellipse 54% 48%
        at 27% 43%,
        rgba(0,210,235,.22),
        transparent 68%
    ),
    radial-gradient(
        ellipse 52% 48%
        at 72% 34%,
        rgba(255,0,155,.20),
        transparent 67%
    ),
    radial-gradient(
        ellipse 48% 52%
        at 54% 76%,
        rgba(255,235,0,.14),
        transparent 68%
    );

filter:
    blur(30px)
    saturate(1.35);

opacity: .62;

transform:
    scale(.92);

animation:
    rth-orb-aura 5.8s ease-in-out infinite;

pointer-events: none;


}

.rth-home-orb::after {
content: "";


position: absolute;

inset: 0;

border-radius:
    47% 53% 51% 49% /
    52% 46% 54% 48%;

pointer-events: none;

z-index: 5;

background:
    radial-gradient(
        ellipse 72% 44%
        at 29% 15%,
        rgba(255,255,255,.075),
        transparent 62%
    ),
    radial-gradient(
        ellipse 58% 75%
        at 78% 81%,
        rgba(0,0,0,.62),
        transparent 72%
    );

box-shadow:
    inset 0 1px 0
        rgba(255,255,255,.035),
    inset 0 -35px 65px
        rgba(0,0,0,.34);

mix-blend-mode: screen;


}

.rth-home-orb-inner {
position: absolute;


inset: 0;

overflow: hidden;

border-radius:
    47% 53% 51% 49% /
    52% 46% 54% 48%;

background:
    radial-gradient(
        ellipse 68% 62%
        at 30% 45%,
        rgba(0,185,215,.075),
        transparent 67%
    ),
    radial-gradient(
        ellipse 62% 60%
        at 71% 33%,
        rgba(255,0,150,.065),
        transparent 68%
    ),
    radial-gradient(
        ellipse 58% 58%
        at 55% 77%,
        rgba(245,235,0,.045),
        transparent 70%
    ),
    radial-gradient(
        ellipse at 48% 42%,
        rgba(18,18,22,.24),
        rgba(5,5,8,.57) 62%,
        rgba(0,0,0,.88) 100%
    );

box-shadow:
    inset 25px 20px 55px
        rgba(255,255,255,.02),
    inset -38px -42px 80px
        rgba(0,0,0,.62),
    inset 0 0 75px
        rgba(0,0,0,.46);

backdrop-filter:
    blur(
        calc(
            8px +
            var(--orb-energy) * 7px
        )
    )
    saturate(
        calc(
            1.15 +
            var(--orb-energy) * 1.8
        )
    )
    contrast(
        calc(
            1 +
            var(--orb-energy) * .14
        )
    );

-webkit-backdrop-filter:
    blur(
        calc(
            8px +
            var(--orb-energy) * 7px
        )
    )
    saturate(
        calc(
            1.15 +
            var(--orb-energy) * 1.8
        )
    )
    contrast(
        calc(
            1 +
            var(--orb-energy) * .14
        )
    );

pointer-events: none;

transform:
    translate3d(
        calc(var(--lens-x) * .35px),
        calc(var(--lens-y) * .35px),
        0
    )
    scale(
        calc(
            .985 +
            var(--orb-energy) * .025
        )
    );

transition:
    transform .5s cubic-bezier(.22,1,.36,1),
    filter .5s ease;


}

.rth-home-orb-inner::before {
content: "";


position: absolute;

inset: -18%;

border-radius: 50%;

background:
    radial-gradient(
        ellipse 66% 57%
        at 23% 47%,
        rgba(0,205,230,.24),
        transparent 67%
    ),
    radial-gradient(
        ellipse 64% 56%
        at 74% 30%,
        rgba(255,0,150,.22),
        transparent 66%
    ),
    radial-gradient(
        ellipse 60% 63%
        at 55% 80%,
        rgba(250,235,0,.15),
        transparent 67%
    );

filter:
    blur(21px)
    saturate(1.25);

mix-blend-mode: screen;

opacity: .82;

transform:
    translate3d(0,0,0)
    scale(.96);

animation:
    rth-orb-cmy-flow 6.4s ease-in-out infinite;

pointer-events: none;


}

.rth-home-orb-inner::after {
content: "";


position: absolute;

width: 72%;
height: 36%;

left: 12%;
top: 3%;

border-radius: 50%;

background:
    radial-gradient(
        ellipse,
        rgba(255,255,255,.065),
        transparent 70%
    );

filter: blur(15px);

opacity: .55;

transform:
    rotate(-13deg);

pointer-events: none;


}

.rth-home-orb-content {
position: relative;
z-index: 7;


width: 72%;

display: flex;
align-items: center;
justify-content: center;

pointer-events: none;
user-select: none;

color:
    rgba(
        255,
        255,
        255,
        calc(
            .76 +
            var(--orb-energy) * .22
        )
    );

transform:
    translate3d(
        calc(var(--lens-x) * -.08px),
        calc(var(--lens-y) * -.08px),
        0
    );

transition:
    color .4s ease,
    transform .5s cubic-bezier(.22,1,.36,1);


}

.rth-home-orb-content strong {
display: block;


font-size:
    clamp(
        17px,
        1.9vw,
        22px
    );

font-weight: 400;

line-height: 1.18;

letter-spacing:
    -.025em;

text-shadow:
    0 3px 26px rgba(0,0,0,.9),
    0 0 32px rgba(255,255,255,.045);


}

.rth-home-orb-content span {
display: none;
}

.rth-home-orb:hover {
filter:
drop-shadow(
0 34px 48px
rgba(0,0,0,.34)
);


transform:
    scale(1.025);


}

.rth-home-orb:hover::before {
animation-duration: 3.4s;
opacity: .9;
filter:
blur(25px)
saturate(1.5);
}

.rth-home-orb:hover .rth-home-orb-inner::before {
animation-duration: 3.6s;
opacity: 1;
filter:
blur(18px)
saturate(1.45);
}

.rth-home-orb:active {
transform:
scale(.985);


filter:
    drop-shadow(
        0 24px 34px
        rgba(0,0,0,.3)
    );


}

.rth-home-orb:focus-visible {
box-shadow:
0 0 0 1px
rgba(255,255,255,.06),
0 0 45px
rgba(0,190,220,.08);
}

@keyframes rth-orb-float {
0%,
100% {
transform:
translate3d(0,0,0)
rotate(-3deg);
}


50% {
    transform:
        translate3d(0,-13px,0)
        rotate(2deg);
}


}

@keyframes rth-orb-morph {
0% {
border-radius:
47% 53% 51% 49% /
52% 46% 54% 48%;
}


50% {
    border-radius:
        52% 48% 45% 55% /
        46% 54% 50% 50%;
}

100% {
    border-radius:
        46% 54% 57% 43% /
        54% 46% 48% 52%;
}


}

@keyframes rth-orb-aura {
0%,
100% {
opacity: .48;


    transform:
        scale(.88)
        translate3d(-2%,1%,0);

    filter:
        blur(32px)
        saturate(1.15);
}

25% {
    opacity: .76;

    transform:
        scale(1.02)
        translate3d(2%,-3%,0);

    filter:
        blur(25px)
        saturate(1.45);
}

52% {
    opacity: .58;

    transform:
        scale(.94)
        translate3d(4%,3%,0);

    filter:
        blur(34px)
        saturate(1.25);
}

76% {
    opacity: .82;

    transform:
        scale(1.06)
        translate3d(-3%,-1%,0);

    filter:
        blur(23px)
        saturate(1.55);
}


}

@keyframes rth-orb-cmy-flow {
0%,
100% {
opacity: .62;


    transform:
        translate3d(-4%,1%,0)
        scale(.94);

    filter:
        blur(25px)
        saturate(1.05);
}

16% {
    opacity: .9;

    transform:
        translate3d(2%,-4%,0)
        scale(1.04);

    filter:
        blur(18px)
        saturate(1.42);
}

34% {
    opacity: .7;

    transform:
        translate3d(6%,1%,0)
        scale(1.1);

    filter:
        blur(27px)
        saturate(1.18);
}

51% {
    opacity: .96;

    transform:
        translate3d(-2%,6%,0)
        scale(1.14);

    filter:
        blur(17px)
        saturate(1.5);
}

68% {
    opacity: .72;

    transform:
        translate3d(-6%,2%,0)
        scale(1.03);

    filter:
        blur(28px)
        saturate(1.2);
}

84% {
    opacity: .91;

    transform:
        translate3d(3%,-3%,0)
        scale(1.08);

    filter:
        blur(19px)
        saturate(1.42);
}


}

.rth-home-reception {
position: absolute;
inset: 0;
z-index: 5;


display: flex;
align-items: center;
justify-content: center;

padding: 40px 24px;

opacity: 0;
visibility: hidden;
pointer-events: none;

transform:
    translate3d(0,20px,0);

transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.22,1,.36,1),
    visibility 0s linear .7s;


}

.rth-home.is-reception-active .rth-home-welcome {
opacity: 0;
pointer-events: none;
transform:
translate3d(0,-18px,0);
}

.rth-home.is-reception-active .rth-home-reception {
opacity: 1;
visibility: visible;
pointer-events: auto;


transform:
    translate3d(0,0,0);

transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.22,1,.36,1),
    visibility 0s linear 0s;


}

.rth-home.is-reception-active .rth-home-canvas {
opacity: .22;
}

@media (max-width: 768px) {
.rth-home {
min-height:
calc(100svh - 20px);


    padding:
        45px 20px 30px;
}

.rth-home-canvas {
    opacity: .84;
}

.rth-home-orb {
    width:
        clamp(
            185px,
            56vw,
            235px
        );
}

.rth-home-content {
    width: 76%;
}

.rth-home-orb-content {
    width: 76%;
}

.rth-home-orb-content strong {
    font-size: 17px;
}


}

@media (max-width: 420px) {
.rth-home {
padding:
35px 16px 25px;
}


.rth-home-orb {
    width: 175px;
}

.rth-home-orb-content strong {
    font-size: 16px;
}


}

@media (prefers-reduced-motion: reduce) {
.rth-home-orb,
.rth-home-orb::before,
.rth-home-orb-inner,
.rth-home-orb-inner::before {
animation: none;
}

.rth-home-welcome,
.rth-home-reception,
.rth-home-orb {
    transition: none;
}

}

.rth-home-orb {
will-change:
transform,
filter;
}

.rth-home-orb::before {
will-change:
transform,
opacity,
filter;
}

.rth-home-orb-inner::before {
will-change:
transform,
opacity,
filter;
}

.rth-home.orb-clicking .rth-home-orb {
animation:
rth-orb-click-pulse .65s cubic-bezier(.22,1,.36,1) both;
}

.rth-home.orb-clicking .rth-home-orb::before {
animation:
rth-orb-click-aura .65s cubic-bezier(.22,1,.36,1) both;
}

.rth-home.orb-clicking .rth-home-orb-inner::before {
animation:
rth-orb-click-color .65s cubic-bezier(.22,1,.36,1) both;
}

@keyframes rth-orb-click-pulse {
0% {
transform:
scale(1);
}


28% {
    transform:
        scale(1.055);
}

52% {
    transform:
        scale(.985);
}

100% {
    transform:
        scale(1);
}


}

@keyframes rth-orb-click-aura {
0% {
opacity: .62;
transform: scale(.92);
filter:
blur(30px)
saturate(1.35);
}


38% {
    opacity: 1;
    transform: scale(1.18);
    filter:
        blur(19px)
        saturate(1.8);
}

100% {
    opacity: .38;
    transform: scale(1.02);
    filter:
        blur(34px)
        saturate(1.05);
}


}

@keyframes rth-orb-click-color {
0% {
opacity: .82;
transform:
scale(.96);
filter:
blur(21px)
saturate(1.25);
}


32% {
    opacity: 1;
    transform:
        scale(1.16);
    filter:
        blur(13px)
        saturate(1.8);
}

58% {
    opacity: .92;
    transform:
        scale(1.05);
    filter:
        blur(18px)
        saturate(1.5);
}

100% {
    opacity: .7;
    transform:
        scale(1);
    filter:
        blur(24px)
        saturate(1.1);
}


}


.rth-home-intro {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -100%);
    width: min(560px, 90vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 6;
    pointer-events: none;
    margin-top: -215px;
}

.rth-home-brand {
    display: block;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: .32em;
    text-indent: .32em;
    color: rgba(255,255,255,.96);
    text-shadow:
        0 0 22px rgba(255,255,255,.12);
}

.rth-home-service {
    display: block;
    margin-top: 11px;
    max-width: 520px;
    font-size: clamp(11px, .85vw, 13px);
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: .035em;
    color: rgba(255,255,255,.76);
}

@media (max-width: 700px) {

    .rth-home-intro {
        width: 88vw;
        margin-top: -205px;
    }

    .rth-home-service {
        max-width: 330px;
        font-size: 10px;
        line-height: 1.45;
    }

    .rth-home-brand {
        font-size: 14px;
    }
}