.rfx-overlay,
.rfx-overlay * {
    box-sizing: border-box;
}

@property --rfx-spin-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.rfx-host {
    position: relative !important;
    isolation: isolate;
}

.rfx-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
    z-index: 8;
    contain: paint;
}

.rfx-target-text {
    inset: -0.35rem -0.5rem;
    border-radius: 0.7rem;
}

.rfx-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.rfx-fluid-body {
    filter: url(#rfxGoo);
}

.rfx-fluid-gloss {
    mix-blend-mode: screen;
}

.rfx-goo-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .rfx-fluid-body,
    .rfx-fluid-gloss {
        display: none;
    }
}

.rfx-overlay[data-rfx-lifecycle="loop"] .rfx-shimmer,
.rfx-overlay[data-rfx-lifecycle="loop"] .rfx-glow-layer,
.rfx-overlay[data-rfx-lifecycle="loop"] .rfx-vignette,
.rfx-overlay[data-rfx-lifecycle="loop"] .rfx-impact-wash,
.rfx-overlay[data-rfx-lifecycle="loop"] .rfx-flash,
.rfx-overlay[data-rfx-lifecycle="loop"] .rfx-flash-ring,
.rfx-overlay[data-rfx-lifecycle="loop"] .rfx-heartbeat,
.rfx-overlay[data-rfx-lifecycle="loop"] .rfx-breath-haze,
.rfx-overlay[data-rfx-lifecycle="loop"] .rfx-shudder-glow {
    animation-iteration-count: infinite;
}

.rfx-shimmer {
    position: absolute;
    inset: -45%;
    opacity: 0;
    background:
        linear-gradient(
            var(--rfx-angle, 180deg),
            transparent calc(50% - var(--rfx-band, 36%)),
            var(--rfx-wash, rgba(249, 168, 212, .52)) 50%,
            transparent calc(50% + var(--rfx-band, 36%))
        );
    transform: translate3d(-36%, 12%, 0);
    animation: rfxShimmer cubic-bezier(.18,.72,.24,1) forwards;
    mix-blend-mode: screen;
}

@keyframes rfxShimmer {
    0% { opacity: 0; transform: translate3d(-38%, 14%, 0) scale(.94); }
    24% { opacity: .9; }
    64% { opacity: .72; }
    100% { opacity: 0; transform: translate3d(38%, -14%, 0) scale(1.06); }
}

.rfx-glow-layer {
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    opacity: 0;
    box-shadow: inset 0 0 var(--rfx-spread, 28px) var(--rfx-color), 0 0 var(--rfx-spread, 28px) var(--rfx-color);
    animation: rfxGlow ease-in-out forwards;
}

@keyframes rfxGlow {
    0%, 100% { opacity: 0; transform: scale(.995); }
    28%, 62% { opacity: .78; transform: scale(1); }
    44% { opacity: 1; transform: scale(1.006); }
}

.rfx-vignette {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: radial-gradient(ellipse at center, var(--rfx-vignette-inner) 30%, var(--rfx-vignette-mid) 74%, var(--rfx-vignette-outer) 100%);
    animation: rfxVignette cubic-bezier(.2,.7,.2,1) forwards;
}

.rfx-vignette.is-pulsing {
    animation-timing-function: ease-in-out;
}

@keyframes rfxVignette {
    0% { opacity: 0; filter: saturate(.7); }
    24% { opacity: .78; }
    48% { opacity: 1; filter: saturate(1.2); }
    68% { opacity: .82; }
    100% { opacity: 0; filter: saturate(1); }
}

.rfx-impact-wash {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent, var(--rfx-color), transparent);
    animation: rfxImpactWash ease-out forwards;
}

@keyframes rfxImpactWash {
    0%, 100% { opacity: 0; }
    16% { opacity: 1; }
    42% { opacity: .28; }
}

.rfx-shaking {
    animation: rfxShake var(--rfx-shake-dur, 900ms) cubic-bezier(.18,.7,.3,1) forwards;
}

@keyframes rfxShake {
    0%, 100% { transform: translate3d(0,0,0) rotate(0); }
    9% { transform: translate3d(calc(var(--rfx-amp, 3px) * -1), calc(var(--rfx-amp, 3px) * .12), 0) rotate(-.08deg); }
    19% { transform: translate3d(var(--rfx-amp, 3px), calc(var(--rfx-amp, 3px) * -.08), 0) rotate(.08deg); }
    31% { transform: translate3d(calc(var(--rfx-amp, 3px) * -.72), 0, 0); }
    45% { transform: translate3d(calc(var(--rfx-amp, 3px) * .65), 0, 0); }
    61% { transform: translate3d(calc(var(--rfx-amp, 3px) * -.38), 0, 0); }
    79% { transform: translate3d(calc(var(--rfx-amp, 3px) * .22), 0, 0); }
}

.rfx-border {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: var(--rfx-thickness, 2px);
    opacity: 0;
    background: conic-gradient(
        from var(--rfx-spin-angle, 0deg),
        transparent 0deg,
        color-mix(in srgb, var(--rfx-color) var(--rfx-alpha), transparent) 52deg,
        var(--rfx-color) 92deg,
        transparent 148deg,
        transparent 230deg,
        color-mix(in srgb, var(--rfx-color) var(--rfx-alpha), transparent) 292deg,
        transparent 360deg
    );
    filter: drop-shadow(0 0 var(--rfx-border-glow, 18px) color-mix(in srgb, var(--rfx-color) 68%, transparent));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: rfxBorderBurst ease-in-out forwards;
}

.rfx-border.is-looping {
    opacity: 1;
    animation: rfxBorderLoop var(--rfx-border-speed, 4.5s) linear infinite;
}

@keyframes rfxBorderBurst {
    0% { opacity: 0; scale: .992; --rfx-spin-angle: 0deg; }
    22% { opacity: 1; }
    72% { opacity: .9; }
    100% { opacity: 0; scale: 1.004; --rfx-spin-angle: 180deg; }
}

@keyframes rfxBorderLoop {
    from { --rfx-spin-angle: 0deg; filter: drop-shadow(0 0 calc(var(--rfx-border-glow, 18px) * .58) color-mix(in srgb, var(--rfx-color) 52%, transparent)); }
    50% { filter: drop-shadow(0 0 var(--rfx-border-glow, 18px) color-mix(in srgb, var(--rfx-color) 76%, transparent)); }
    to { --rfx-spin-angle: 360deg; filter: drop-shadow(0 0 calc(var(--rfx-border-glow, 18px) * .58) color-mix(in srgb, var(--rfx-color) 52%, transparent)); }
}

.rfx-aura {
    position: absolute;
    inset: 0;
    opacity: 0;
    background:
        radial-gradient(circle at 50% 112%, color-mix(in srgb, var(--rfx-aura-color) 76%, transparent) 0%, transparent 54%),
        radial-gradient(ellipse at center, transparent 28%, color-mix(in srgb, var(--rfx-aura-color) var(--rfx-aura-edge), transparent) 100%);
    mix-blend-mode: screen;
    animation: rfxAuraBurst ease-in-out forwards;
}

.rfx-aura.is-looping {
    opacity: var(--rfx-aura-opacity, .42);
    animation: rfxAuraLoop var(--rfx-aura-breathe, 2s) ease-in-out infinite;
}

@keyframes rfxAuraBurst {
    0% { opacity: 0; transform: scale(.97); filter: blur(8px); }
    28% { opacity: var(--rfx-aura-opacity, .42); filter: blur(1px); }
    56% { opacity: calc(var(--rfx-aura-opacity, .42) * 1.35); transform: scale(1.012); }
    100% { opacity: 0; transform: scale(1.03); filter: blur(5px); }
}

@keyframes rfxAuraLoop {
    0%, 100% { opacity: calc(var(--rfx-aura-opacity, .42) * .62); transform: scale(.995); filter: saturate(.9); }
    50% { opacity: var(--rfx-aura-opacity, .42); transform: scale(1.012); filter: saturate(1.3); }
}

.rfx-converge {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    opacity: 0;
    animation: rfxConverge cubic-bezier(.12,.72,.16,1) forwards;
}

.rfx-converge.is-looping {
    opacity: 1;
    animation: rfxConvergeLoop 2.4s ease-in-out infinite;
}

.rfx-converge-edge {
    position: absolute;
    display: block;
    background: linear-gradient(to var(--rfx-edge-direction), color-mix(in srgb, var(--rfx-converge-color) 44%, transparent), transparent);
    filter: blur(calc(var(--rfx-converge-glow, 42px) * .28));
    mix-blend-mode: screen;
}

.rfx-converge-edge.is-top,
.rfx-converge-edge.is-bottom {
    left: 0;
    right: 0;
    height: var(--rfx-converge-squeeze, 44%);
}

.rfx-converge-edge.is-left,
.rfx-converge-edge.is-right {
    top: 0;
    bottom: 0;
    width: var(--rfx-converge-squeeze, 44%);
}

.rfx-converge-edge.is-top { top: 0; --rfx-edge-direction: bottom; }
.rfx-converge-edge.is-right { right: 0; --rfx-edge-direction: left; }
.rfx-converge-edge.is-bottom { bottom: 0; --rfx-edge-direction: top; }
.rfx-converge-edge.is-left { left: 0; --rfx-edge-direction: right; }

.rfx-converge-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(22vmin, 11rem);
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--rfx-converge-color) 84%, white);
    border-radius: 50%;
    box-shadow:
        0 0 var(--rfx-converge-glow, 42px) var(--rfx-converge-color),
        inset 0 0 calc(var(--rfx-converge-glow, 42px) * .7) var(--rfx-converge-color);
    transform: translate(-50%, -50%) scale(2.8);
    opacity: 0;
}

@keyframes rfxConverge {
    0% { opacity: 0; transform: scale(1.14); }
    18% { opacity: calc(var(--rfx-converge-depth, .62) * .7); }
    48% { opacity: var(--rfx-converge-depth, .62); transform: scale(.93); }
    59% { opacity: calc(var(--rfx-converge-depth, .62) * 1.14); transform: scale(.985); }
    66% { opacity: calc(var(--rfx-converge-depth, .62) * .26); transform: scale(1.035); }
    82% { opacity: calc(var(--rfx-converge-depth, .62) * .72); }
    100% { opacity: 0; transform: scale(1.09); }
}

@keyframes rfxConvergeLoop {
    0%, 100% { opacity: calc(var(--rfx-converge-depth, .62) * .42); transform: scale(1.035); }
    50% { opacity: var(--rfx-converge-depth, .62); transform: scale(.965); }
}

.rfx-converge:not(.is-looping) .rfx-converge-core {
    animation-name: rfxConvergeCore;
    animation-timing-function: cubic-bezier(.12,.72,.18,1);
    animation-fill-mode: forwards;
}

.rfx-converge.is-looping .rfx-converge-core {
    animation: rfxConvergeCoreLoop 2.4s ease-in-out infinite;
}

@keyframes rfxConvergeCore {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(2.8); }
    48% { opacity: .9; transform: translate(-50%, -50%) scale(.1); }
    58% { opacity: 1; transform: translate(-50%, -50%) scale(.04); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(4.2); }
}

@keyframes rfxConvergeCoreLoop {
    0%, 100% { opacity: .12; transform: translate(-50%, -50%) scale(1.55); }
    50% { opacity: .72; transform: translate(-50%, -50%) scale(.34); }
}

.rfx-focus {
    position: absolute;
    inset: calc(var(--rfx-focus-blur, 14px) * -1);
    opacity: 0;
    background:
        radial-gradient(
            ellipse at 50% 50%,
            transparent 0,
            transparent var(--rfx-focus-aperture, 42%),
            color-mix(in srgb, var(--rfx-focus-color) 42%, transparent) calc(var(--rfx-focus-aperture, 42%) + 12%),
            color-mix(in srgb, var(--rfx-focus-color) 46%, #05030a) 100%
        );
    filter: blur(var(--rfx-focus-blur, 14px)) saturate(1.25);
    animation: rfxFocus cubic-bezier(.2,.72,.2,1) forwards;
}

.rfx-focus.is-looping {
    opacity: var(--rfx-focus-opacity, .68);
    animation: rfxFocusLoop 3.6s ease-in-out infinite;
}

@keyframes rfxFocus {
    0% { opacity: 0; transform: scale(1.18); }
    34% { opacity: var(--rfx-focus-opacity, .68); transform: scale(.97); }
    58% { opacity: calc(var(--rfx-focus-opacity, .68) * 1.15); transform: scale(1); }
    100% { opacity: 0; transform: scale(1.08); }
}

@keyframes rfxFocusLoop {
    0%, 100% { opacity: calc(var(--rfx-focus-opacity, .68) * .62); transform: scale(1.035); }
    50% { opacity: var(--rfx-focus-opacity, .68); transform: scale(.985); }
}

.rfx-breath-haze {
    position: absolute;
    inset: 8% 5%;
    z-index: 1;
    opacity: 0;
    background:
        radial-gradient(ellipse at 34% 78%, color-mix(in srgb, var(--rfx-breath-color) 72%, transparent) 0%, transparent 46%),
        radial-gradient(ellipse at 66% 68%, color-mix(in srgb, var(--rfx-breath-color) 58%, transparent) 0%, transparent 42%);
    filter: blur(10px);
    mix-blend-mode: screen;
    animation: rfxBreathHaze ease-in-out forwards;
}

@keyframes rfxBreathHaze {
    0%, 100% { opacity: 0; transform: translateY(12%) scale(.82); }
    34% { opacity: calc(var(--rfx-breath-opacity, .5) * .78); }
    62% { opacity: var(--rfx-breath-opacity, .5); transform: translateY(-5%) scale(1.08); }
}

.rfx-shudder-host {
    animation: rfxShudderHost var(--rfx-shudder-dur, 1300ms) cubic-bezier(.14,.72,.2,1) forwards;
}

.rfx-shudder-glow {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    box-shadow:
        inset 0 0 var(--rfx-shudder-glow, 32px) color-mix(in srgb, var(--rfx-shudder-color) 72%, transparent),
        0 0 calc(var(--rfx-shudder-glow, 32px) * .72) color-mix(in srgb, var(--rfx-shudder-color) 48%, transparent);
    animation: rfxShudderGlow ease-out forwards;
}

@keyframes rfxShudderHost {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    8% { transform: translate3d(calc(var(--rfx-shudder-amp, 4px) * -.42), calc(var(--rfx-shudder-lift, 3px) * -1), 0) scale(1.004); }
    14% { transform: translate3d(var(--rfx-shudder-amp, 4px), var(--rfx-shudder-lift, 3px), 0) scale(.998); }
    22% { transform: translate3d(calc(var(--rfx-shudder-amp, 4px) * -.8), calc(var(--rfx-shudder-lift, 3px) * -.7), 0) scale(1.006); }
    33% { transform: translate3d(calc(var(--rfx-shudder-amp, 4px) * .58), calc(var(--rfx-shudder-lift, 3px) * .5), 0) scale(.999); }
    47% { transform: translate3d(calc(var(--rfx-shudder-amp, 4px) * -.36), calc(var(--rfx-shudder-lift, 3px) * -.32), 0) scale(1.003); }
    64% { transform: translate3d(calc(var(--rfx-shudder-amp, 4px) * .18), 0, 0) scale(1); }
}

@keyframes rfxShudderGlow {
    0%, 100% { opacity: 0; }
    10% { opacity: .9; }
    20% { opacity: .16; }
    32% { opacity: .7; }
    50% { opacity: .12; }
    68% { opacity: .42; }
}

.rfx-flash {
    position: absolute;
    inset: 0;
    opacity: 0;
    background:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--rfx-flash-color) 92%, white) 0%, color-mix(in srgb, var(--rfx-flash-color) 38%, transparent) 24%, transparent 72%);
    animation: rfxFlash steps(calc(var(--rfx-flash-pulses, 1) * 2), end) forwards;
    mix-blend-mode: screen;
}

@keyframes rfxFlash {
    0% { opacity: 0; }
    16% { opacity: var(--rfx-flash-opacity, .6); }
    34% { opacity: .08; }
    52% { opacity: calc(var(--rfx-flash-opacity, .6) * .7); }
    100% { opacity: 0; }
}

.rfx-flash-ring {
    position: absolute;
    width: min(42vw, 34rem);
    aspect-ratio: 1;
    left: 50%;
    top: 50%;
    border: 2px solid var(--rfx-flash-color);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.08);
    box-shadow: 0 0 30px var(--rfx-flash-color), inset 0 0 18px var(--rfx-flash-color);
    animation: rfxFlashRing cubic-bezier(.12,.62,.2,1) forwards;
}

@keyframes rfxFlashRing {
    0% { opacity: .9; transform: translate(-50%, -50%) scale(.08); }
    65% { opacity: .45; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.85); }
}

.rfx-heartbeat {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    box-shadow: inset 0 0 var(--rfx-heart-glow, 34px) var(--rfx-heart-color), 0 0 var(--rfx-heart-glow, 34px) color-mix(in srgb, var(--rfx-heart-color) 54%, transparent);
    animation: rfxHeartbeatGlow ease-in-out forwards;
}

.rfx-heartbeat-host {
    animation: rfxHeartbeatHost var(--rfx-heart-dur, 1500ms) ease-in-out forwards;
}

@keyframes rfxHeartbeatGlow {
    0%, 100% { opacity: 0; }
    12%, 32%, 52%, 72% { opacity: .86; }
    20%, 40%, 60%, 80% { opacity: .18; }
}

@keyframes rfxHeartbeatHost {
    0%, 100% { scale: 1; }
    12%, 32%, 52%, 72% { scale: var(--rfx-heart-scale, 1.012); }
    20%, 40%, 60%, 80% { scale: 1; }
}

.rfx-contact-host {
    animation: rfxContactHost var(--rfx-contact-dur, 1450ms) cubic-bezier(.16,.72,.2,1) forwards;
    transform-origin: 50% 68%;
}

.rfx-contact-mark {
    position: absolute;
    inset: 15% 4%;
    border-radius: inherit;
    opacity: 0;
    background:
        linear-gradient(90deg, transparent 4%, color-mix(in srgb, var(--rfx-contact-color) 76%, transparent) 48%, transparent 96%) bottom / 100% 2px no-repeat,
        radial-gradient(ellipse at 50% 82%, color-mix(in srgb, var(--rfx-contact-color) 54%, transparent), transparent 66%);
    mix-blend-mode: screen;
    animation: rfxContactMark ease-out forwards;
}

@keyframes rfxContactHost {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    12% { transform: translate3d(0, calc(var(--rfx-contact-shift, 4px) * -.48), 0) scale(1.004); }
    21% { transform: translate3d(0, var(--rfx-contact-shift, 4px), 0) scale(.997); }
    34% { transform: translate3d(0, calc(var(--rfx-contact-shift, 4px) * -.22), 0) scale(1.002); }
}

@keyframes rfxContactMark {
    0%, 100% { opacity: 0; transform: scaleX(.42); }
    18% { opacity: var(--rfx-contact-warmth, .42); transform: scaleX(.76); }
    38% { opacity: calc(var(--rfx-contact-warmth, .42) * 1.25); transform: scaleX(1); }
    68% { opacity: calc(var(--rfx-contact-warmth, .42) * .38); }
}

.rfx-contraction-host {
    animation: rfxContractionHost var(--rfx-contraction-dur, 1900ms) ease-in-out forwards;
    transform-origin: 50% 60%;
}

.rfx-contraction-pressure {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    box-shadow:
        inset 0 -10px var(--rfx-contraction-glow, 34px) color-mix(in srgb, var(--rfx-contraction-color) 72%, transparent),
        inset 0 8px calc(var(--rfx-contraction-glow, 34px) * .6) color-mix(in srgb, var(--rfx-contraction-color) 42%, transparent);
    animation: rfxContractionPressure steps(calc(var(--rfx-contraction-pulses, 4) * 2), end) forwards;
}

@keyframes rfxContractionHost {
    0%, 100% { transform: translate3d(0,0,0) scale(1); letter-spacing: normal; }
    10%, 30%, 50%, 70% {
        transform: translate3d(0, calc(var(--rfx-contraction-lift, 2px) * -1), 0) scaleX(var(--rfx-contraction-squeeze, .982)) scaleY(1.016);
        letter-spacing: -.006em;
    }
    18%, 38%, 58%, 78% { transform: translate3d(0,0,0) scale(1); }
}

@keyframes rfxContractionPressure {
    0%, 100% { opacity: 0; }
    8%, 28%, 48%, 68% { opacity: .88; }
    16%, 36%, 56%, 76% { opacity: .12; }
}

.rfx-settle-host {
    animation: rfxSettleHost var(--rfx-settle-dur, 2400ms) cubic-bezier(.16,.72,.22,1) forwards;
    transform-origin: 50% 30%;
}

.rfx-settle-warmth {
    position: absolute;
    inset: 0;
    opacity: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--rfx-settle-color) 52%, transparent));
    animation: rfxSettleWarmth ease-out forwards;
}

@keyframes rfxSettleHost {
    0% { transform: translateY(calc(var(--rfx-settle-drop, 5px) * -1)) scaleY(1.02); }
    36% { transform: translateY(var(--rfx-settle-drop, 5px)) scaleY(.985); }
    68%, 100% { transform: translateY(0) scale(1); }
}

@keyframes rfxSettleWarmth {
    0%, 100% { opacity: 0; }
    28% { opacity: var(--rfx-settle-opacity, .34); }
    66% { opacity: calc(var(--rfx-settle-opacity, .34) * .42); }
}

.rfx-release-overlay {
    inset: -.35rem -.55rem -1.2rem;
    overflow: visible;
}

.rfx-release-action {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    animation: rfxReleaseHold var(--rfx-release-total, 8000ms) linear forwards;
    filter: drop-shadow(0 1px 4px color-mix(in srgb, var(--rfx-release-color) 42%, transparent));
}

.rfx-action-phrase {
    display: inline-block;
    position: relative;
    border-radius: .28em;
    vertical-align: baseline;
}

.rfx-action-live {
    z-index: 1;
    transform-origin: 50% 62%;
    will-change: transform, text-shadow;
    backface-visibility: hidden;
}

.rfx-pressure-focus {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--rfx-pressure-color) 34%, transparent);
    border-bottom-color: color-mix(in srgb, var(--rfx-pressure-color) 78%, white);
    border-radius: .5rem;
    opacity: 0;
    background:
        linear-gradient(
            180deg,
            transparent 18%,
            color-mix(in srgb, var(--rfx-pressure-color) 8%, transparent) 58%,
            color-mix(in srgb, var(--rfx-pressure-color) 26%, transparent) 100%
        );
    transform: translate3d(0,0,0);
    transform-origin: 50% 64%;
    mix-blend-mode: screen;
    will-change: transform, opacity, box-shadow;
    backface-visibility: hidden;
}

.rfx-pressure-focus.is-internal {
    transform-origin: 50% 50%;
}

.rfx-pressure-focus.is-source {
    border-color: color-mix(in srgb, var(--rfx-pressure-color) 26%, transparent);
    border-left-color: color-mix(in srgb, var(--rfx-pressure-color) 72%, white);
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--rfx-pressure-color) 24%, transparent),
            color-mix(in srgb, var(--rfx-pressure-color) 7%, transparent) 52%,
            transparent
        );
    transform-origin: 35% 58%;
}

.rfx-pressure-focus.is-target {
    border-color: color-mix(in srgb, var(--rfx-pressure-color) 32%, transparent);
    border-bottom-color: color-mix(in srgb, var(--rfx-pressure-color) 82%, white);
}

.rfx-pressure-focus.is-oral {
    border-radius: .65rem;
    transform-origin: 50% 58%;
}

.rfx-pressure-focus.is-receiving {
    border-bottom-width: 2px;
    transform-origin: 50% 62%;
}

.rfx-release-residue {
    position: absolute;
    left: calc(var(--rfx-target-x, 50%) - 29%);
    width: 58%;
    bottom: .15rem;
    height: 3px;
    border-radius: 999px;
    opacity: .76;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rfx-release-color) 78%, white), transparent);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--rfx-release-color) 52%, transparent);
    transform: scaleX(.1);
    transform-origin: center;
    animation:
        rfxReleaseResidueIn var(--rfx-residue-in, 2500ms) cubic-bezier(.2,.7,.2,1) forwards,
        rfxReleaseResidueFade var(--rfx-residue-linger, 1800ms) ease-in-out var(--rfx-residue-delay, 2500ms) forwards;
}

.rfx-release-action.is-external .rfx-release-residue {
    left: calc(var(--rfx-target-x, 50%) - 36%);
    width: 72%;
    height: 4px;
}

.rfx-release-action.is-oral .rfx-release-residue {
    left: calc(var(--rfx-target-x, 50%) - 12%);
    width: 24%;
    height: 3px;
}

.rfx-release-action.is-receiving .rfx-release-residue {
    left: calc(var(--rfx-target-x, 50%) - 32%);
    width: 64%;
    height: 3px;
}

.rfx-internal-host {
    animation: rfxInternalHost var(--rfx-release-dur, 2700ms) ease-in-out forwards;
}

.rfx-external-host {
    animation: rfxExternalHost var(--rfx-release-dur, 2350ms) cubic-bezier(.16,.7,.18,1) forwards;
}

.rfx-oral-host {
    animation: rfxOralHost var(--rfx-release-dur, 2450ms) ease-in-out forwards;
}

.rfx-receiving-host {
    animation: rfxReceivingHost var(--rfx-release-dur, 2650ms) cubic-bezier(.14,.72,.2,1) forwards;
    transform-origin: 50% 64%;
}

@keyframes rfxReleaseHold {
    0% { opacity: 0; }
    3% { opacity: var(--rfx-release-opacity, .88); }
    76% { opacity: calc(var(--rfx-release-opacity, .88) * .72); }
    100% { opacity: 0; }
}

@keyframes rfxReleaseResidueIn {
    0% { opacity: 0; transform: scaleX(.08); }
    28% { opacity: .18; }
    68%, 100% { opacity: .82; transform: scaleX(1); }
}

@keyframes rfxReleaseResidueFade {
    0% { opacity: .82; }
    100% { opacity: 0; }
}

@keyframes rfxInternalHost {
    0%, 100% { transform: scale(1); }
    10%, 30%, 50% { transform: scaleX(.986) scaleY(1.012); }
    18%, 38%, 58% { transform: scale(1); }
}

@keyframes rfxExternalHost {
    0%, 100% { transform: translate3d(0,0,0); }
    10%, 30%, 50% { transform: translate3d(0,-2px,0) scale(1.004); }
    18%, 38%, 58% { transform: translate3d(0,1px,0) scale(.998); }
}

@keyframes rfxOralHost {
    0%, 100% { transform: scale(1); }
    12%, 32%, 52% { transform: translateY(2px) scaleY(.987); }
    22%, 42%, 62% { transform: translateY(0) scaleY(1); }
    76% { transform: translateY(1px) scaleY(.992); }
}

@keyframes rfxReceivingHost {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    7%, 21%, 35%, 49%, 63%, 77% {
        transform: translate3d(0, calc(var(--rfx-receiving-lift, 4px) * -1), 0) scaleX(var(--rfx-receiving-squeeze, .974)) scaleY(1.018);
    }
    14%, 28%, 42%, 56%, 70%, 84% { transform: translate3d(0,1px,0) scale(1); }
}

.rfx-reduced {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--rfx-reduced-color);
    animation: rfxReduced ease-out forwards;
}

@keyframes rfxReduced {
    0%, 100% { opacity: 0; }
    36% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .rfx-shimmer,
    .rfx-vignette,
    .rfx-border,
    .rfx-aura,
    .rfx-converge,
    .rfx-converge-core,
    .rfx-focus,
    .rfx-breath-haze,
    .rfx-shudder-glow,
    .rfx-flash,
    .rfx-flash-ring,
    .rfx-heartbeat,
    .rfx-impact-wash {
        animation: none !important;
    }
    .rfx-shaking,
    .rfx-heartbeat-host,
    .rfx-shudder-host,
    .rfx-contact-host,
    .rfx-contraction-host,
    .rfx-settle-host,
    .rfx-internal-host,
    .rfx-external-host,
    .rfx-oral-host,
    .rfx-receiving-host {
        animation: none !important;
    }
}

/* ── Arousal feedback: scoped to the chat column, never the viewport ─────── */

:root {
    --arousal-level: 0;
    --arousal-breath: 5.4s;
}

.chat-thread-scroll {
    position: relative;
}

.chat-thread-scroll::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: calc(var(--arousal-level) * .5);
    box-shadow:
        inset 0 -5rem 4rem -4rem rgba(255, 64, 124, .85),
        inset 0 5rem 4rem -4.6rem rgba(196, 62, 158, .55);
    pointer-events: none;
    transition: opacity .8s ease;
    animation: arousal-breathe var(--arousal-breath) ease-in-out infinite;
}

.chat-thread-scroll > * {
    position: relative;
    z-index: 1;
}

[data-arousal-phase="afterglow"] .chat-thread-scroll::after {
    box-shadow: inset 0 -4rem 3.4rem -3.6rem rgba(255, 132, 116, .6);
    animation-duration: 7.4s;
}

@keyframes arousal-breathe {
    0%, 100% { opacity: calc(var(--arousal-level) * .34); }
    46% { opacity: calc(var(--arousal-level) * .62); }
}

#chatComposer {
    box-shadow: 0 0 calc(var(--arousal-level) * 1.6rem) calc(var(--arousal-level) * -.5rem) rgba(255, 72, 132, .55);
    transition: box-shadow .7s ease, border-color .7s ease;
}

[data-arousal-phase="peak"] #chatComposer,
[data-arousal-phase="afterglow"] #chatComposer {
    border-color: rgba(255, 118, 164, .5) !important;
}

#chatComposer.is-awaiting-reply {
    animation: composer-awaiting 1.9s ease-in-out infinite;
}

@keyframes composer-awaiting {
    0%, 100% { border-color: rgba(129, 111, 189, .55); }
    50% { border-color: rgba(178, 152, 255, .95); }
}

.chat-thread-scroll .chat-bubble,
.chat-thread-scroll .story-turn {
    transition: border-color .8s ease;
}

[data-arousal-phase="peak"] .chat-thread-scroll .chat-bubble,
[data-arousal-phase="peak"] .chat-thread-scroll .story-turn,
[data-arousal-phase="afterglow"] .chat-thread-scroll .chat-bubble,
[data-arousal-phase="afterglow"] .chat-thread-scroll .story-turn {
    border-color: rgba(255, 122, 166, .3) !important;
}

@media (prefers-reduced-motion: reduce) {
    .chat-thread-scroll::after { animation: none; }
    #chatComposer.is-awaiting-reply { animation: none; }
}