File size: 2,304 Bytes
6602693 7f9f518 6602693 0122542 6602693 0122542 6602693 0122542 6602693 e91fc5d 0122542 e91fc5d 0122542 e91fc5d 0122542 6602693 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
@tailwind base;
@tailwind components;
@tailwind utilities;
/* ----------------------------
Animated gradient (HeroHeader)
---------------------------- */
@keyframes gradientMove {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.animate-gradient {
background-size: 200% 200%;
animation: gradientMove 12s ease infinite;
}
/* ----------------------------
Aviation-themed motion background
---------------------------- */
@keyframes runwayMove {
0% { background-position: 0% 0%; transform: translateY(0px); }
100% { background-position: 0% 100%; transform: translateY(-20px); }
}
.aviation-runway {
width: 100%;
height: 100%;
background-image:
linear-gradient(to bottom, rgba(24,24,27,0.08) 0px, rgba(24,24,27,0.08) 1px, transparent 1px, transparent 18px),
linear-gradient(to bottom, rgba(24,24,27,0.06) 0px, rgba(24,24,27,0.06) 1px, transparent 1px, transparent 44px),
linear-gradient(to right, rgba(24,24,27,0.10) 0px, rgba(24,24,27,0.10) 1px, transparent 1px, transparent 120px);
background-size: 100% 18px, 100% 44px, 120px 100%;
animation: runwayMove 10s linear infinite;
mask-image: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.05), transparent);
}
/* ----------------------------
Section transition animation
---------------------------- */
@keyframes sectionIn {
0% { opacity: 0; transform: translateY(8px); filter: blur(6px); }
100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.animate-sectionIn { animation: sectionIn 260ms ease-out both; }
/* ----------------------------
Gentle floating blobs
---------------------------- */
@keyframes floatSlow {
0% { transform: translate(0px, 0px) scale(1); }
50% { transform: translate(14px, -12px) scale(1.03); }
100% { transform: translate(0px, 0px) scale(1); }
}
@keyframes floatSlow2 {
0% { transform: translate(0px, 0px) scale(1); }
50% { transform: translate(-12px, 14px) scale(1.03); }
100% { transform: translate(0px, 0px) scale(1); }
}
.animate-floatSlow { animation: floatSlow 10s ease-in-out infinite; }
.animate-floatSlow2 { animation: floatSlow2 12s ease-in-out infinite; }
/* Optional: avoid horizontal scroll bars due to background effects */
html, body { overflow-x: hidden; }
|