fixed page - 85% ready if you asked me

2026-10-05 22:56:34 -04:00
parent e90ebde399
commit 4341adc147
104 changed files with 647 additions and 76 deletions
@@ -0,0 +1,78 @@
+.image-carousel {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  background: var(--wash);
+  /* Each image owns a 5s slot; the cycle must span every image or the last
+     one collides with the first and paints over it. */
+  --carousel-count: 3;
+}
+.image-carousel--n2 {
+  --carousel-count: 2;
+}
+.image-carousel--n3 {
+  --carousel-count: 3;
+}
+.image-carousel--n4 {
+  --carousel-count: 4;
+}
+.image-carousel--n5 {
+  --carousel-count: 5;
+}
+.image-carousel--n6 {
+  --carousel-count: 6;
+}
+.image-carousel__image {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  animation: carousel-fade calc(var(--carousel-count) * 5s) infinite;
+}
+.image-carousel__image:nth-child(2) {
+  animation-delay: 5s;
+}
+.image-carousel__image:nth-child(3) {
+  animation-delay: 10s;
+}
+.image-carousel__image:nth-child(4) {
+  animation-delay: 15s;
+}
+.image-carousel__image:nth-child(5) {
+  animation-delay: 20s;
+}
+.image-carousel__image:nth-child(6) {
+  animation-delay: 25s;
+}
+/* Each slide fades IN over the previous one (which stays opaque beneath it),
+   so there is never a moment with no image on screen — works for any count. */
+@keyframes carousel-fade {
+  0% {
+    opacity: 0;
+    transform: scale(1);
+  }
+  4%,
+  96% {
+    opacity: 1;
+  }
+  96% {
+    transform: scale(1.015);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.015);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .image-carousel__image {
+    animation: none;
+    opacity: 0;
+    transform: none;
+  }
+  .image-carousel__image:first-child {
+    opacity: 1;
+  }
+}