/* Red transition background overlay */

.transition-modal {
  position: fixed;
  inset: 0;
  display: none;
  pointer-events: none; /* Non-interactive background */
  width: 100%;
  height: 100%;
  z-index: 3000; /* Above experience modal */
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.transition-modal.show {
  display: block;
}

.transition-modal.closing {
  display: block;
}

.transition-content {
  width: 100%;
  height: 100%;
  background: #EE2E31; /* Brand red */
  position: relative;
  overflow: hidden;
}

/* Repeated text background pattern */
.transition-content::before {
  content: 'IVAN JOSEPH THOMAS • SOFTWARE ENGINEER • AI • .NET • PYTHON • FLUTTER • FASTAPI • DOCKER • AZURE • SNOWFLAKE • REDIS • DUBAI • IVAN JOSEPH THOMAS • SOFTWARE ENGINEER • AI • .NET • PYTHON • FLUTTER • FASTAPI • DOCKER • AZURE • SNOWFLAKE • REDIS • DUBAI • IVAN JOSEPH THOMAS • SOFTWARE ENGINEER • AI • .NET • PYTHON • FLUTTER • FASTAPI • DOCKER • AZURE • SNOWFLAKE • REDIS • DUBAI • IVAN JOSEPH THOMAS • SOFTWARE ENGINEER • AI • .NET • PYTHON • FLUTTER • FASTAPI • DOCKER • AZURE • SNOWFLAKE • REDIS • DUBAI • IVAN JOSEPH THOMAS • SOFTWARE ENGINEER • AI • .NET • PYTHON • FLUTTER • FASTAPI • DOCKER • AZURE • SNOWFLAKE • REDIS • DUBAI • IVAN JOSEPH THOMAS • SOFTWARE ENGINEER • AI • .NET • PYTHON • FLUTTER • FASTAPI • DOCKER • AZURE • SNOWFLAKE • REDIS • DUBAI • IVAN JOSEPH THOMAS • SOFTWARE ENGINEER • AI • .NET • PYTHON • FLUTTER • FASTAPI • DOCKER • AZURE • SNOWFLAKE • REDIS • DUBAI • IVAN JOSEPH THOMAS • SOFTWARE ENGINEER • AI • .NET • PYTHON • FLUTTER • FASTAPI • DOCKER • AZURE • SNOWFLAKE • REDIS • DUBAI • IVAN JOSEPH THOMAS • SOFTWARE ENGINEER • AI • .NET • PYTHON • FLUTTER • FASTAPI • DOCKER • AZURE • SNOWFLAKE • REDIS • DUBAI • IVAN JOSEPH THOMAS • SOFTWARE ENGINEER • AI • .NET • PYTHON • FLUTTER • FASTAPI • DOCKER • AZURE • SNOWFLAKE • REDIS • DUBAI • IVAN JOSEPH THOMAS • SOFTWARE ENGINEER • AI • .NET • PYTHON • FLUTTER • FASTAPI • DOCKER • AZURE • SNOWFLAKE • REDIS • DUBAI • IVAN JOSEPH THOMAS • SOFTWARE ENGINEER • AI • .NET • PYTHON • FLUTTER • FASTAPI • DOCKER • AZURE • SNOWFLAKE • REDIS • DUBAI • IVAN JOSEPH THOMAS • SOFTWARE ENGINEER • AI • .NET • PYTHON • FLUTTER • FASTAPI • DOCKER • AZURE • SNOWFLAKE • REDIS • DUBAI • IVAN JOSEPH THOMAS • SOFTWARE ENGINEER • AI • .NET • PYTHON • FLUTTER • FASTAPI • DOCKER • AZURE • SNOWFLAKE • REDIS • DUBAI • IVAN JOSEPH THOMAS • SOFTWARE ENGINEER • AI • .NET • PYTHON • FLUTTER • FASTAPI • DOCKER • AZURE • SNOWFLAKE • REDIS • DUBAI • IVAN JOSEPH THOMAS • SOFTWARE ENGINEER • AI • .NET • PYTHON • FLUTTER • FASTAPI • DOCKER • AZURE • SNOWFLAKE • REDIS • DUBAI • IVAN JOSEPH THOMAS • SOFTWARE ENGINEER • AI • .NET • PYTHON • FLUTTER • FASTAPI • DOCKER • AZURE • SNOWFLAKE • REDIS • DUBAI • IVAN JOSEPH THOMAS • SOFTWARE ENGINEER • AI • .NET • PYTHON • FLUTTER • FASTAPI • DOCKER • AZURE • SNOWFLAKE • REDIS • DUBAI • IVAN JOSEPH THOMAS • SOFTWARE ENGINEER • AI • .NET • PYTHON • FLUTTER • FASTAPI • DOCKER • AZURE • SNOWFLAKE • REDIS • DUBAI • IVAN JOSEPH THOMAS • SOFTWARE ENGINEER • AI • .NET • PYTHON • FLUTTER • FASTAPI • DOCKER • AZURE • SNOWFLAKE • REDIS • DUBAI • ';
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  font-size: 3.5rem;
  font-family: 'Google Sans', sans-serif;
  color: transparent;
  -webkit-text-stroke: 0.85px #000000;
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.3;
  pointer-events: none;
  z-index: 1;
}

/* Diagonal wipe-in animation (top-left to bottom-right) */
.transition-modal.show .transition-content {
  animation: transitionWipeIn 0.35s ease-out forwards;
}

@keyframes transitionWipeIn {
    0% {
        clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
    }
    50% {
        clip-path: polygon(0 0, 0 0, 100% 0, 100% 0, 50% 50%, 0 100%, 0 100%, 0 0);
    }
    100% {
        clip-path: polygon(0 0, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);
    }
}

/* Diagonal wipe-out animation (reveals content beneath) */
.transition-modal.closing .transition-content {
  animation: transitionWipeOut 0.35s ease-out forwards;
}

@keyframes transitionWipeOut {  
    0% {
        clip-path: polygon(0 0, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);
    }
    50% {
        clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 100%);
    }
    100% {
        clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
    }
}