/* Custom Cursor */
.cursor-dot {
    position: fixed;
    width: 30px;
    height: 30px;
    background: transparent;
    border: 1px solid #e76b00   ;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: all .18s ease-out;
}

* {
    cursor: default !important;
}

@media (max-width: 768px) {
    .cursor-dot {
        display: none;
    }
}

/* Error Pages */
.glitch {
    position: relative;
}

.glitch:before,
.glitch:after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.glitch::before {
    left: 2px;
    text-shadow: -1px 0 red;
    clip: rect(424px, 450px, 516px, 0);
    animation: glitchText 2s infinite linear alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: -1px 0 blue;
    clip: rect(424px, 450px, 526px, 0);
    animation: glitchText2 2s infinite linear alternate-reverse;
}

@keyframes glitchText2 {
    0% {
        clip: rect(412px, 9999px, 237px, 0);
    }

    10% {
        clip: rect(323px, 9999px, 234px, 0);
    }

    20% {
        clip: rect(8px, 9999px, 811px, 0);
    }

    30% {
        clip: rect(435px, 9999px, 217px, 0);
    }

    40% {
        clip: rect(921px, 9999px, 147px, 0);
    }

    50% {
        clip: rect(274px, 9999px, 284px, 0);
    }

    60% {
        clip: rect(46px, 9999px, 621px, 0);
    }

    70% {
        clip: rect(19px, 9999px, 123px, 0);
    }

    80% {
        clip: rect(629px, 9999px, 432px, 0);
    }

    90% {
        clip: rect(4px, 9999px, 343px, 0);
    }

    100% {
        clip: rect(121px, 9999px, 11px, 0);
    }
}

@keyframes glitchText {
    0% {
        clip: rect(125px, 9999px, 1px, 0);
    }

    10% {
        clip: rect(120px, 9999px, 322px, 0);
    }

    20% {
        clip: rect(58px, 9999px, 235px, 0);
    }

    30% {
        clip: rect(30px, 9999px, 7px, 0);
    }

    40% {
        clip: rect(126px, 9999px, 528px, 0);
    }

    50% {
        clip: rect(42px, 9999px, 96px, 0);
    }

    60% {
        clip: rect(247px, 9999px, 620px, 0);
    }

    70% {
        clip: rect(728px, 9999px, 517px, 0);
    }

    80% {
        clip: rect(15px, 9999px, 66px, 0);
    }

    90% {
        clip: rect(923px, 9999px, 204px, 0);
    }

    100% {
        clip: rect(62px, 9999px, 6px, 0);
    }
}

/* Recaptch Hidden Badge */
.grecaptcha-badge {
    visibility: hidden;
}

/* Smooth Wrapper with Sticky Footer */
html {
    height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* The key wrapper that needs to grow */
#smooth-wrapper {
    flex: 1 0 auto;

    /* ← grow to fill available space */
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    /* ensure it at least fills viewport */
}

/* Make sure the content area (everything except footer) pushes the footer down */
#smooth-content {
    flex: 1 0 auto;

    /* ← this grows and pushes footer to bottom */
    display: flex;
    flex-direction: column;
}

/* Footer should NOT grow — it stays at the bottom */
footer {
    flex-shrink: 0;
    width: 100%;
}

/* Text-Trim */
.text-trim-both {
    text-box-trim: trim-both;
}

.text-trim-start {
    text-box-trim: trim-start;
}

.text-trim-end {
    text-box-trim: trim-end;
}

.text-trim-none {
    text-box-trim: none;
}

.leading-trim-cap {
    text-box: trim-both cap alphabetic;
}

.leading-trim-ex {
    text-box: trim-both ex alphabetic;
}

.leading-trim-text {
    text-box: trim-both text alphabetic;
}

.marquee-wrapper {
    overflow: hidden;
}

.marquee-content,
.marquee-content-reverse {
    will-change: transform;
    display: inline-flex;

    /* Make sure there's enough content to cover overflow */
    min-width: max-content;
}

/* Pause animation on hover — optional but nice UX */
.marquee-wrapper:hover .marquee-content,
.marquee-wrapper:hover .marquee-content-reverse {
    /* Handled in JS below if you want hover pause */
}

/* Card Border Animation */
.animate-border-container {
    position: relative;
    width: fit-content;

    /* Explicit border-radius matching rounded-3xl (Tailwind = 1.5rem = 24px) */
    border-radius: 1.5rem;

    /* Create a new stacking context so z-index works correctly */
    isolation: isolate;
}

.animate-border-container {
    position: relative;
    width: fit-content;
    border-radius: 1.5rem;
    isolation: isolate;
    overflow: hidden;
    padding: 2px;
}

/* Animated glowing border layer */
.animate-border-container::before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgb(157, 23, 77) 10deg,
    rgb(157, 23, 77) 50deg,
    transparent 120deg,
    transparent 360deg
  );
    pointer-events: none;
    z-index: 0;

    /* Always animating */
    animation: rotate 3s linear infinite;

    /* Smooth fade transition */
    transition: opacity 0.4s ease;
    opacity: 1;
}

/* Pause + fade on hover */
.animate-border-container:hover::before {
    animation-play-state: paused;
    opacity: 0;
}

/* White cutout */
.animate-border-container::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: calc(1.5rem - 2px);
    background: white;
    pointer-events: none;
    z-index: 1;

    /* Smooth shadow transition */
    transition: box-shadow 0.5s ease;
}

/* Add inner glow on hover to replace the border */
.animate-border-container:hover::after {
    box-shadow: inset 0 0 0 2px rgba(157, 23, 77, 0.15);
}

@keyframes rotate {
    to {
        transform: translate(-50%, -50%) rotate(1turn);
    }
}

.animate-border-container.delay-0::before {
    animation-delay: 0s;
}

.animate-border-container.delay-1::before {
    animation-delay: -1s;
}

.animate-border-container.delay-2::before {
    animation-delay: -2s;
}