/* Selected original motion primitives from the supplied animation-clean reference.
   Brand colors and reduced-motion behavior are layered in styles.css. */

/* Base Settings */
:root {
--mouse-x: 50%;
--mouse-y: 50%;
}
body {
font-family: 'Inter', sans-serif;
background-color: #050505;
overflow-x: hidden;
}
/* Hide scrollbar for clean UI */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #050505;
}
::-webkit-scrollbar-thumb {
background: #262626;
border-radius: 4px;
}
/* Text Reveal Animation */
.char {
display: inline-block;
opacity: 0;
transform: translateY(100%);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.char.revealed {
opacity: 1;
transform: translateY(0);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
/* General Scroll Animations */
.animate-on-scroll {
opacity: 0.01; /* Avoid full 0 for screen readers momentarily */
filter: blur(10px);
transform: translateY(20px);
transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.animate-on-scroll.in-view {
opacity: 1;
filter: blur(0);
transform: translateY(0);
}
/* Marquee Animation */
@keyframes scroll-left {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.marquee-content {
animation: scroll-left 40s linear infinite;
}
.marquee-mask {
mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
/* Border Beam Button */
@keyframes border-beam {
100% { offset-distance: 100%; }
}
.btn-beam {
position: relative;
overflow: hidden;
}
.btn-beam::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border-radius: 9999px;
padding: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.btn-beam:hover::before {
opacity: 1;
animation: spin-beam 2s linear infinite;
}
/* Alternative Beam Implementation that actually travels */
.beam-border {
position: absolute;
inset: -1px;
border-radius: 9999px;
pointer-events: none;
z-index: -1;
opacity: 0;
background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(255,255,255,0.5) 60deg, transparent 120deg);
animation: rotate-beam 2s linear infinite;
transition: opacity 0.3s;
}
.btn-beam-container:hover .beam-border {
opacity: 1;
}
@keyframes rotate-beam {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Background Clip Columns */
.bg-column {
transition: clip-path 1.5s cubic-bezier(0.65, 0, 0.35, 1);
clip-path: inset(100% 0 0 0);
}
.bg-column.active {
clip-path: inset(0 0 0 0);
}
/* Flashlight Effect */
.flashlight-card {
position: relative;
background-color: rgba(23, 23, 23, 0.4);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.flashlight-card::before {
content: "";
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
border-radius: inherit;
background: radial-gradient(
800px circle at var(--mouse-x) var(--mouse-y),
rgba(255, 255, 255, 0.06),
transparent 40%
);
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
z-index: 3;
}
.flashlight-card::after {
content: "";
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
border-radius: inherit;
background: radial-gradient(
600px circle at var(--mouse-x) var(--mouse-y),
rgba(255, 255, 255, 0.4),
transparent 40%
);
z-index: 1;
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
}
/* Border highlight logic via mask */
.flashlight-border {
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: radial-gradient(
600px circle at var(--mouse-x) var(--mouse-y),
rgba(255, 255, 255, 0.6),
transparent 40%
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.5s;
}
.flashlight-card:hover::before,
.flashlight-card:hover .flashlight-border {
opacity: 1;
}
/* Card Rotator Transitions */
.rotator-card {
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
}