:root {
      --ash-black: #111111;
      --ash-black-opacity: rgba(17, 17, 17, 0.5);
      --ivory-dust: #F5F5F1;
      --ivory-dust-opacity: rgba(245, 245, 241, 0.8);
      --velvet-red: #8C1F28;
      --velvet-red-dark: #61161c;
      --glitch-purple: #7A1C99;
      --chrome-gray: #999999;
    }
    
    html {scroll-behavior: smooth;}
    body { scroll-behavior: smooth; font-family: 'Times New Roman', Times, serif;} 
    
    body::selection {
	background: var(--velvet-red);
  background-blend-mode:luminosity;
}
    @keyframes fade-in {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: no-preference) {
    .square-animation { animation: fade-in 0.7s ease-out forwards; }
    }


    .slash { list-style-type: "∕";  padding-left: 0.75rem; }
        .menu { list-style-type: none;  padding-left: 0.75rem; }
    

h1 {
  letter-spacing: 0.03em;
  text-transform: uppercase;
  
}

h1 > div {
  overflow: hidden;
}

.cloneText {
  position: absolute;
  left: 0;
  top: 0;
}

 .portfolio-card4 {
  position: relative;
  background: url('https://gdr.one/simg/800x400/f5f5f5/111/?text=SOON') center/cover no-repeat;
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.portfolio-card3 {
   position: relative;
  background: url('/images/lynthos/agency1.webp') center/cover no-repeat;
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.portfolio-card3::before {
  z-index: 1;
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.336); /* dark overlay for text readability */
  transition: background 0.3s ease;
}


.portfolio-card4::before {
    z-index: 1;
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.712); /* dark overlay for text readability */
  transition: background 0.3s ease;
}
.portfolio-card3:hover, .portfolio-card4:hover{
  transform: scale(1.03);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.portfolio-card3:hover::before, .portfolio-card4:hover::before {
  background: rgba(0,0,0,0.5); /* slightly darker overlay */
}