/* Circular text (Contact Me) styles */
.circular-text {
    position: absolute;
    top: 61.2%;
    right: 0%;
    /* Responsive sizing - use viewport width for scaling, but constrain height to stay above 70% line */
    /* Top is 61.2%, line is at 70%, so max height is 8.8vh - use 8vh for safety */
    width: clamp(60px, 10vw, 100px);
    height: clamp(60px, 8vh, 100px);
    max-height: 8vh; /* Lock above 70% line (70% - 61.2% = 8.8%, use 8vh for buffer) */
    animation: fadeSlideUp 1s ease forwards;
    animation-delay: 1.7s;
    opacity: 0;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    pointer-events: auto;
}

.circle {
    position: relative;
    /* Circle is 2x the container size - maintain this ratio for proper animation */
    /* Use viewport width for responsive scaling */
    width: clamp(120px, 20vw, 200px);
    height: clamp(120px, 20vw, 200px);
    animation: rotate 20s linear infinite;
}

.circle span {
    position: absolute;
    top: 0;
    left: 50%;
    /* Transform origin must be at the circle radius (half of circle size) */
    /* This ensures text rotates around the circle perimeter correctly */
    /* Circle radius = half of circle width/height */
    transform-origin: 0 clamp(60px, 10vw, 100px);
    color: white;
    /* Responsive font size - scales with viewport width */
    font-size: clamp(0.7rem, 1vw, 1rem);
    font-family: var(--app-font-family, Arial, Helvetica, sans-serif);
    transform: rotate(calc(12deg * var(--i)));
}

/* Style the divider characters */
.circle span:nth-child(10),
.circle span:nth-child(20),
.circle span:nth-child(30) {
    color: #808080;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Responsive adjustments - maintain animation while staying above 70% line */
@media (max-height: 600px) {
    .circular-text {
        width: clamp(50px, 9vw, 90px);
        height: clamp(50px, 7vh, 80px);
        max-height: 7vh; /* More conservative on smaller screens */
    }
    
    .circle {
        /* Maintain 2:1 ratio with container */
        width: clamp(100px, 18vw, 180px);
        height: clamp(100px, 18vw, 180px);
    }
    
    .circle span {
        /* Transform origin must match circle radius */
        transform-origin: 0 clamp(50px, 9vw, 90px);
        font-size: clamp(0.6rem, 0.9vw, 0.9rem);
    }
}

@media (max-height: 500px) {
    .circular-text {
        width: clamp(45px, 8vw, 80px);
        height: clamp(45px, 6.5vh, 70px);
        max-height: 6.5vh;
    }
    
    .circle {
        width: clamp(90px, 16vw, 160px);
        height: clamp(90px, 16vw, 160px);
    }
    
    .circle span {
        transform-origin: 0 clamp(45px, 8vw, 80px);
        font-size: clamp(0.55rem, 0.8vw, 0.85rem);
    }
}

@media (max-height: 400px) {
    .circular-text {
        width: clamp(40px, 7vw, 70px);
        height: clamp(40px, 6vh, 60px);
        max-height: 6vh;
    }
    
    .circle {
        width: clamp(80px, 14vw, 140px);
        height: clamp(80px, 14vw, 140px);
    }
    
    .circle span {
        transform-origin: 0 clamp(40px, 7vw, 70px);
        font-size: clamp(0.5rem, 0.7vw, 0.8rem);
    }
}