/* ============================================================
   SECTION LAYOUT
============================================================ */
/* This CSS file defines the layout and styles for the welcome section of the home page. 
 It includes styles for the section background, corner accents, and section label. 
 The welcome section features a dynamic background with a diagonal flow animation and a 
 pulsing border effect, creating an engaging visual experience for visitors. 
 The corner accents are designed to expand on hover, adding an interactive element that 
 enhances the overall aesthetic of the section. 
 The section label is positioned prominently to clearly identify the content and draw 
 attention to the welcome message. 
 These styles work together to create a visually appealing and welcoming introduction 
 to the website. */
#section-welcome {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 48px 5%;
  box-sizing: border-box;

  position: relative;
  overflow: hidden;

  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;

  border-radius: 0;

  background: linear-gradient(
    160deg,
    #080808 0%,
    #0a0a0a 30%,
    #060606 50%,
    #0a0a0a 70%,
    #080808 100%
  );
  background-size: 300% 300%;

  border-top: 2px solid rgba(255, 255, 255, 0.9);
  border-bottom: 2px solid rgba(255, 255, 255, 0.9);
  border-left: none;
  border-right: none;

  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);

  animation: diagonalFlow 18s linear infinite, borderPulse 7s ease infinite;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

/* Hover */
#section-welcome:hover {
  border-color: rgba(255, 255, 255, 1);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}