html {
scroll-behavior: smooth;
}
/* Custom Animations */
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.glass-panel {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.map-bg-overlay {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.6) 0%,
rgba(248, 250, 252, 1) 100%
);
}
/* Modal Transitions */
.modal {
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-in-out;
}
.modal.active {
opacity: 1;
visibility: visible;
}
.modal-content {
transform: scale(0.95);
transition: all 0.3s ease-in-out;
}
.modal.active .modal-content {
transform: scale(1);
}
/* [MODAL-VIEWPORT-BOUND] feature-modal / tech-modal had no height cap, so tall injected
content spilled off-screen and the footer + Close button became unreachable. Bound each
card to the viewport and let its BODY (the middle section between the fixed header and
footer) scroll internally — mirrors the search #data-modal pattern already in the markup
(max-h-[90vh] + flex flex-col + inner overflow-y-auto). Scoped to these two modals so the
other modals (which already set their own max-h/flex) are untouched. */
#feature-modal .modal-content,
#tech-modal .modal-content {
max-height: 90vh;
max-height: 90dvh; /* dvh keeps it within the mobile viewport incl. the URL bar */
display: flex;
flex-direction: column;
}
#feature-modal .modal-content > div:nth-child(2),
#tech-modal .modal-content > div:nth-child(2) {
overflow-y: auto;
min-height: 0; /* let the flex child shrink so it actually scrolls */
}
/* Hide scrollbar for clean look */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
.lang-active {
@apply bg-brand-primary text-white;
}
/* Quote Fade Effect */
.quote-fade {
animation: fadeEffect 1s;
}
@keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Demo Animations for Modals */
@keyframes pulse-ring {
0% {
transform: scale(0.5);
opacity: 0.8;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
.demo-isochrone-circle {
animation: pulse-ring 2s infinite ease-out;
}
@keyframes draw-path {
0% {
stroke-dashoffset: 100;
}
100% {
stroke-dashoffset: 0;
}
}
.demo-path {
stroke-dasharray: 100;
stroke-dashoffset: 100;
animation: draw-path 2s infinite linear;
}
@keyframes scan-line {
0% {
top: 0;
}
100% {
top: 100%;
}
}
.demo-scan {
animation: scan-line 2s infinite linear;
}
/* Heatmap Animation */
@keyframes heat-pulse {
0%,
100% {
opacity: 0.5;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.1);
}
}
.heat-blob {
animation: heat-pulse 3s infinite ease-in-out;
filter: blur(15px);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5000000s ease-in-out 0s;
}
.scene {
position: relative;
width: 650px;
height: 650px;
margin: auto;
perspective: 1200px;
}
.carousel {
width: 100%;
height: 100%;
position: absolute;
/* transform: translateZ(-325px); */
transform-style: preserve-3d;
transition: transform 1s;
}
.carousel__cell {
position: absolute;
width: 100%;
height: 500px;
transition:
transform 1s,
opacity 1s;
}
/* Quote carousel scene: the 600px width overflows narrow screens. Cap it to
the available width. The JS reads `carousel.offsetWidth` to compute the 3D
cylinder radius, and the cells are width:100%, so the whole carousel scales
down to fit automatically. Desktop (>=1024px) is unchanged (still 600px). */
#quotes {
width: min(700px, 100%);
}
@media (max-width: 1023px) {
/* Each card rotates in 3D and, magnified by the perspective, sweeps wider
than the scene box — on small screens that spills past the viewport.
Clip the horizontal sweep; keep overflow-y visible so the decorative
quote mark that sits above each card is not cut off. */
#quotes {
overflow-x: clip;
overflow-y: visible;
}
/* [QUOTE-MARK-SIZE] The decorative double-quote is 80x80px hanging 40px down
into the card (-top-10 w-20 h-20). Once the card padding shrinks on mobile
the glyph lands on the first line of text. Halve it and keep the part that
hangs into the card inside the card's top padding. (lucide swaps the
for an