@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.2; }
    100% { opacity: 1; }
}

/* Tightening the layout for a modern "compressed" feel */
.display-2 {
    font-size: clamp(3rem, 8vw, 5.5rem);
}

/* Modern Reveal Container */
.modern-reveal {
    overflow: hidden; /* Important for clipping the skew */
}

/* The actual animation state */
[data-cue="modern-skew"] {
    opacity: 0;
    transform: translateY(100px) skewY(7deg);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

/* When the element becomes visible */
[data-cue="modern-skew"].show {
    opacity: 1;
    transform: translateY(0) skewY(0deg);
}

/* Staggered Delay Helpers */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }


/* 1. Scale-Blur Animation (Initial Reveal) */
[data-reveal="scale-blur"] {
    opacity: 0;
    filter: blur(10px);
    transform: scale(0.95);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform, opacity, filter;
}

[data-reveal="scale-blur"].reveal-active {
    opacity: 1;
    filter: blur(0px);
    transform: scale(1);
}

/* 2. THE ACTIVE FRAME - High Readability Hover */
.unit-card {
    background-color: #fff;
    border: 1px solid rgba(0,0,0,1) !important;
    position: relative;
    transition: border-color 0.3s ease;
}

/* The "Loading/Active" bar at the bottom */
.unit-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 4px; /* Thin, clean accent */
    background-color: #000;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Subtle border emphasis and bar growth */
.unit-card:hover {
    border-color: #000 !important;
}

.unit-card:hover::after {
    width: 100%;
}

/* Keeping text 100% readable - just a slight opacity boost */
.unit-card p {
    transition: opacity 0.3s ease;
}

.unit-card:hover p {
    opacity: 1 !important;
}

/* Special Case: The black card stays black, bar becomes white */
.bg-black.unit-card::after {
    background-color: #fff;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* Moves halfway because we have two identical spans */
}

.marquee-container {
  display: flex;
  width: max-content; /* Ensures the container is as wide as the text */
  animation: marquee 20s linear infinite;
}

/* Optional: Pause on hover for better UX */
.marquee-container:hover {
  animation-play-state: paused;
}


/* Footer Legal Links Hover */
.hover-opacity-100:hover {
    opacity: 1 !important;
    transition: opacity 0.3s ease;
}