/* styles.css */

/* Custom CSS to enforce high-end visual design rules */

/* Hide scrollbar for clean look */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #FDFBF7;
}
::-webkit-scrollbar-thumb {
  background: #24453c;
  border-radius: 10px;
}

/* Base resets & utilities */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scroll reveal utility classes (IntersectionObserver targets) */
.reveal-up {
    opacity: 0;
    transform: translateY(4rem);
    filter: blur(8px);
    transition: opacity 1.2s cubic-bezier(0.32, 0.72, 0, 1),
                transform 1.2s cubic-bezier(0.32, 0.72, 0, 1),
                filter 1.2s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform, opacity, filter;
}

.reveal-up.active {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Delay modifiers for staggered reveals */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }

/* The "Double-Bezel" components (Outer ring + Inner core) */
.doppelrand-outer {
    background: rgba(36, 69, 60, 0.03);
    border: 1px solid rgba(36, 69, 60, 0.08);
    padding: 0.5rem;
    border-radius: 2rem;
}

.doppelrand-inner {
    background: #FDFBF7;
    border-radius: calc(2rem - 0.5rem);
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* subtle inner highlight */
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 
                0 10px 40px -10px rgba(36, 69, 60, 0.05);
}

/* Marquee animation */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.animate-marquee {
    animation: marquee 20s linear infinite;
    will-change: transform;
}