Fixed animation not loading on mobile

src/app/pages/experience/operative-history/operative-history.component.css

@@ -34,6 +34,7 @@
   width: 100%;
   height: 100%;
   max-height: calc(100vh - 8rem);
+  max-height: calc(100svh - 8rem); /* Mobile viewport fix */
 
   /* Hide overflow initially to prevent scrollbar during animation */
   overflow: hidden;
@@ -627,29 +628,87 @@
 @media (max-width: 480px) {
   :host {
     padding: 0;
+    /* Fallback for browsers that don't support multiple animations */
+    animation-name: fadeInHost;
+    animation-duration: 0.6s;
+    animation-timing-function: ease-out;
+    animation-delay: 0.05s;
+    animation-fill-mode: forwards;
   }
 
   .operative-history-container {
     grid-template-columns: 1fr;
     gap: 0.5rem;
     max-height: calc(100vh - 6rem);
+    max-height: calc(100svh - 6rem); /* Mobile viewport fix */
+    min-height: 100vh; /* Fallback minimum height */
+    min-height: 100svh; /* Mobile viewport fix */
+
+    /* Simplified mobile animations */
+    animation-name: fadeInContainer, enableScrollAfterAnimation;
+    animation-duration: 0.3s, 0s;
+    animation-timing-function: ease-out, ease-out;
+    animation-delay: 0.1s, 1.5s;
+    animation-fill-mode: forwards, forwards;
   }
 
   .column {
     gap: 0.5rem;
     padding-right: 0.25rem;
+
+    /* Ensure columns are visible on mobile */
+    min-height: auto;
+
+    /* Simplified mobile column animations */
+    animation-name: fadeInUp, enableColumnScrollAfterAnimation;
+    animation-duration: 0.3s, 0s;
+    animation-timing-function: ease-out, ease-out;
+    animation-fill-mode: forwards, forwards;
+  }
+
+  .professional-column {
+    animation-delay: 0.15s, 1.5s;
+  }
+
+  .education-column {
+    animation-delay: 0.2s, 1.5s;
+  }
+
+  .personal-column {
+    animation-delay: 0.25s, 1.5s;
   }
 
   .column-title {
     font-size: 0.9rem;
     padding: 0.375rem;
     margin-bottom: 0.5rem;
+
+    /* Simplified title animation */
+    animation-name: slideInLeft;
+    animation-duration: 0.3s;
+    animation-timing-function: ease-out;
+    animation-delay: 0.3s;
+    animation-fill-mode: forwards;
   }
 
   .experience-card,
   .info-card {
     margin-bottom: 0.5rem;
     border-radius: 6px;
+
+    /* Simplified card animations */
+    animation-name: cardFadeIn;
+    animation-duration: 0.3s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: forwards;
+  }
+
+  .experience-card {
+    animation-delay: 0.4s;
+  }
+
+  .info-card {
+    animation-delay: 0.5s;
   }
 
   .experience-header,
@@ -692,6 +751,13 @@
     padding: 0.25rem 0.5rem;
     font-size: 0.7rem;
     margin-bottom: 0.25rem;
+
+    /* Simplified tech item animation */
+    animation-name: techItemFadeIn;
+    animation-duration: 0.2s;
+    animation-timing-function: ease-out;
+    animation-delay: 0.6s;
+    animation-fill-mode: forwards;
   }
 
   .current-status,
@@ -709,11 +775,25 @@
   .trait-item {
     padding: 0.5rem 0.375rem;
     font-size: 0.75rem;
+
+    /* Simplified trait animation */
+    animation-name: techItemFadeIn;
+    animation-duration: 0.2s;
+    animation-timing-function: ease-out;
+    animation-delay: 0.7s;
+    animation-fill-mode: forwards;
   }
 
   .interest-item {
     margin-bottom: 0.75rem;
     padding: 0.5rem 0.25rem;
+
+    /* Simplified interest animation */
+    animation-name: slideInLeft;
+    animation-duration: 0.2s;
+    animation-timing-function: ease-out;
+    animation-delay: 0.8s;
+    animation-fill-mode: forwards;
   }
 
   .interest-label {
@@ -730,12 +810,35 @@
     padding-left: 0.75rem;
     line-height: 1.5;
     margin-bottom: 1rem;
+
+    /* Simplified philosophy animation */
+    animation-name: fadeIn;
+    animation-duration: 0.3s;
+    animation-timing-function: ease-out;
+    animation-delay: 0.9s;
+    animation-fill-mode: forwards;
+  }
+
+  .philosophy-text::before {
+    /* Simple fade for quote mark */
+    animation-name: fadeIn;
+    animation-duration: 0.2s;
+    animation-timing-function: ease-out;
+    animation-delay: 1s;
+    animation-fill-mode: forwards;
   }
 
   .philosophy-note {
     font-size: 0.75rem;
     line-height: 1.4;
     padding-top: 1rem;
+
+    /* Simplified note animation */
+    animation-name: fadeIn;
+    animation-duration: 0.2s;
+    animation-timing-function: ease-out;
+    animation-delay: 1.1s;
+    animation-fill-mode: forwards;
   }
 
   .info-content {
@@ -743,26 +846,29 @@
     line-height: 1.4;
   }
 
-  /* Faster animations on mobile with earlier scrollbar appearance */
+  /* Remove complex animations on very small screens */
-  :host {
+  @media (max-width: 360px) {
-    --animation-duration: 0.3s;
+    :host,
-    --animation-delay-base: 0.05s;
+    .operative-history-container,
+    .column,
+    .column-title,
+    .experience-card,
+    .info-card,
+    .tech-item,
+    .trait-item,
+    .interest-item,
+    .philosophy-text,
+    .philosophy-text::before,
+    .philosophy-note {
+      animation: none !important;
+      opacity: 1 !important;
+      transform: none !important;
     }
 
-  .operative-history-container {
+    .operative-history-container,
-    animation: fadeInContainer 0.3s ease-out 0.1s forwards, enableScrollAfterAnimation 0s ease-out 1.5s forwards;
+    .column {
+      overflow-y: auto !important;
     }
-
-  .professional-column {
-    animation: fadeInUp 0.3s ease-out calc(var(--animation-delay-base) * 3) forwards, enableColumnScrollAfterAnimation 0s ease-out 1.5s forwards;
-  }
-
-  .education-column {
-    animation: fadeInUp 0.3s ease-out calc(var(--animation-delay-base) * 4) forwards, enableColumnScrollAfterAnimation 0s ease-out 1.5s forwards;
-  }
-
-  .personal-column {
-    animation: fadeInUp 0.3s ease-out calc(var(--animation-delay-base) * 5) forwards, enableColumnScrollAfterAnimation 0s ease-out 1.5s forwards;
   }
 }