@font-face {
font-family: "Uhudscript";
src: url("/-global-assets/fonts/Uhudscript-Demo.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}

/* ============================================================
TOKENS / RESET
============================================================ */
:root {
--ink: #02253d;
--deep: #062d43;
--sky: #10c1d1;
--aqua: #18ccd0;
--mint: #69edab;
--lime: #c6f88f;
--white: #ffffff;

--brand-gradient: linear-gradient(62deg, #02bcdd, #06d1e5, #64eda8, #d0f88d);
--brand-gradient-90: linear-gradient(90deg, #02bcdd 0%, #06d1e5 20%, #64eda8 48%, #d0f88d 100%);
--brand-conic-gradient: conic-gradient(from var(--cta-angle), #02bcdd, #06d1e5, #64eda8, #d0f88d, #64eda8, #06d1e5, #02bcdd);

--cta-height: 64px;
--cta-collapsed-width: 70px;
--cta-expanded-width: 220px;
--cta-border: 2px;
}

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

/* Floating container */
.contact-floating-cta {
position: fixed;
right: 10px;
top: 70%;
box-sizing: border-box;
height: var(--cta-height);
width: var(--cta-collapsed-width);
background: transparent;
border-radius: 999px 0 0 999px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(2, 37, 61, 0.18);
z-index: 9999;
overflow: hidden;
cursor: pointer;
transition:
width 0.42s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s ease;
text-decoration: none;
}

.contact-floating-cta::before {
content: "";
position: absolute;
inset: 0 calc(-1 * var(--cta-border)) 0 0;
z-index: 0;
padding: var(--cta-border);
border-radius: inherit;
background: var(--brand-conic-gradient);
pointer-events: none;
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}

.contact-floating-cta::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
background: transparent;
transition: background 0.35s ease, inset 0.35s ease;
}

.contact-floating-cta:hover {
width: var(--cta-expanded-width);
box-shadow: 0 12px 32px rgba(2, 37, 61, 0.25);
}

.contact-floating-cta:hover::after {
inset: 0;
background: var(--brand-gradient);
}

/* Default icon state */
.cta-default-icon {
position: absolute;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: var(--cta-collapsed-width);
height: var(--cta-height);
transition: opacity 0.18s ease, transform 0.25s ease;
pointer-events: none;
}

.cta-default-icon img {
width: 49px;
height: 49px;
object-fit: contain;
margin-left: 5px;
}

.contact-floating-cta:hover .cta-default-icon {
opacity: 0;
transform: scale(0.7);
}

/* Hover content state */
.cta-hover-content {
display: flex;
position: relative;
z-index: 1;
align-items: center;
justify-content: flex-start;
width: 100%;
padding: 0 10px 0 16px;
gap: 6px;
opacity: 0;
transform: translateX(20px);
transition:
opacity 0.22s ease 0.18s,
transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0.14s;
pointer-events: none;
white-space: nowrap;
}

.contact-floating-cta:hover .cta-hover-content {
opacity: 1;
transform: translateX(0);
pointer-events: all;
margin-left: 12px;
}

/* Label text */
.cta-label {
font-family: "Uhudscript", sans-serif;
font-size: 32px;
font-weight: 400;
letter-spacing: 1.6px;
color: var(--ink);
line-height: 1;
flex: 0 0 auto;
background: none;
-webkit-text-fill-color: var(--ink);
}

/* Arrow circle */
.cta-arrow-btn {
width: 40px;
height: 40px;
min-width: 40px;
margin-left: 8px;
color: var(--ink);
background: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 0.2s ease, background 0.2s ease;
}

.contact-floating-cta:hover .cta-arrow-btn:hover {
background: var(--white);
transform: scale(1.08);
}

.cta-arrow-btn svg {
width: 14px;
height: 14px;
fill: currentColor;
display: block;
}

@keyframes ctaSpin {
to {
--cta-angle: 360deg;
}
}

.contact-floating-cta:hover {
animation: ctaSpin 2.5s linear infinite;
}

/* Entry animation */
@keyframes ctaSlideIn {
0% {
transform: translateX(80px);
opacity: 0;
}

60% {
transform: translateX(-8px);
opacity: 1;
}

80% {
transform: translateX(4px);
}

100% {
transform: translateX(0);
}
}

.contact-floating-cta.cta-animate-in {
animation: ctaSlideIn 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Pulse effect */
@keyframes ctaPulse {
0% {
box-shadow: 0 0 0 0 rgba(24, 204, 208, 0.55);
}

70% {
box-shadow: 0 0 0 14px rgba(24, 204, 208, 0);
}

100% {
box-shadow: 0 0 0 0 rgba(24, 204, 208, 0);
}
}

.contact-floating-cta.cta-pulse {
animation: ctaPulse 1s ease-out;
}