:root {
  --bg-colour: #0f172a;
}

html {
  background: var(--bg-colour);
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* background-color: var(--bg-colour); */
  background: linear-gradient(135deg,#1a1a2e, #16213e, #0f3460);
  /* background-attachment: fixed; */
  color: #fff;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
  /* background-image: radial-gradient( rgba(167, 119, 235, 0.1) 4px, transparent 2px);
  background-size: 60px 60px; */
}

body::before {
  --circle-color: oklch(from rgba(73,66,133,0.2) calc(l + 0.3) c h);
  --circle-size: clamp(200px, 40vw, 600px);
  content: "";
  position: fixed;
  /* inset: -50px; */
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 3% 95%, var(--circle-color) 0 var(--circle-size) ,transparent calc(var(--circle-size) + 1px)),
    radial-gradient(circle at 97% 5%, var(--circle-color) 0 var(--circle-size) ,transparent calc(var(--circle-size) + 2px));
  /* animation: floatUp 4s infinite alternate ease-in-out; */
}

@media (max-width: 768px) {
  body::before {
    animation: none;

    background:
      radial-gradient(
        circle at 0% 100%,
        var(--circle-color) 0 var(--circle-size),
        transparent calc(var(--circle-size) + 1px)
      ),
      radial-gradient(
        circle at 100% 0%,
        var(--circle-color) 0 var(--circle-size),
        transparent calc(var(--circle-size) + 2px)
      );
  }
}

@media (max-width: 768px) {
  body::before {
    position: absolute;
  }

  body {
    position: relative;
  }
}

@keyframes floatUp {
  from { transform: translateY(0px); }
  to {transform: translateY(30px); }
}

.container {
  max-width: 1200px;
  width: 100%;
}

h1 {
  font-size: 4rem;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: -2px;
  /* background: linear-gradient(90deg, rgb(35, 75, 237), purple, pink); */
  background: conic-gradient(from -25deg,skyblue, pink);
  background-clip: text;
  color: transparent;
  filter: blur(3px);
  animation: unblurText 0.5s ease forwards;
}

h2 {
  font-size: 2rem;
  font-weight: 400;
  color: #94a3b8;
  margin-bottom: 24px;
  filter: blur(3px);
  animation: unblurText 0.5s ease-in forwards;
}

p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #cbd5e1;
  max-width: 650px;
  margin: 0 auto 40px;
  filter: blur(3px);
  animation: unblurText 0.5s ease-in forwards;
}

@keyframes unblurText {
  to {
    filter: blur(0);
  }
}


@media (max-width: 768px) {
  h1 {
    font-size: 2.8rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  p {
    font-size: 1rem;
  }
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

@keyframes floatIn {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.card {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(30px);
  animation: floatIn 0.6s ease-out forwards;
  flex: 1 1 250px;
  background-color: rgba(73, 60, 133, 0.5);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(6px);
}

.card:nth-child(1) {animation-delay: 0.1s;}
.card:nth-child(2) {animation-delay: 0.2s;}
.card:nth-child(3) {animation-delay: 0.3s;}
.card:nth-child(4) {animation-delay: 0.4s;}

@keyframes unblurImages {
  to {
    filter: blur(0px);
  }
}

.card-image {
  filter: blur(5px);
  animation: unblurImages 1s ease-out forwards;
  width: 200px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 90%;
  background: #000000;
  box-shadow: 4px 5px 5px oklch(from #493c85 calc(l - 0.1) c h);
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-content {
  padding: 20px;
}

.card-title {
  font-size: 1.4rem;
  margin-bottom: 10px;
  margin-top: 10px;
  color: #ffffff;
}

.card-description {
  font-size: 1rem;
  line-height: 1.5;
  color: #cbd5e1;
}

@keyframes contactBtnFloatIn {
  to {
    opacity: 0.8;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes reveal {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}

.contact-button {
  position: relative;
  opacity: 0.8;
  /* transform: translateY(30px);
  filter: blur(10px); */
  display: inline-block;
  padding: 12px 20px;
  background: oklch(from #493c85 calc(l + 0.1) c h);
  backdrop-filter: blur(10px);
  margin-top: 50px;
  color: white;
  text-decoration: none;
  font-size: 24px;
  font-weight: 600;
  border-radius: 28px;
  transition: all 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  isolation: isolate;
}

.contact-button::before {
  content: "";
  position: absolute;
  display: block;
  inset: -1px;
  z-index: 0;
  background: oklch(from #493c85 calc(l - 0.1) c h);
  transform: translateX(0);
  transform: translateZ(0);
  animation: reveal 1s ease forwards;
}

.contact-button:hover {
  background: oklch(from #493c85 calc(l + 0.2) c calc(h - 10));
  transform: translateY(-2px);
  box-shadow: 
    6px 6px 6px rgba(0, 0, 0, 0.4);
}

.contact-button:focus {
  outline: 2px dashed #a5b4fc;
  outline-offset: 5px;
}

.socials-container {
  display: flex;
  position: fixed;
  bottom: clamp(12px, 2vh, 24px);
  right: clamp(12px, 3vw, 32px);
  gap: clamp(10px, 2vw, 20px);
}

.socials-container a {
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  filter: blur(3px);
  position: relative;
  padding: 0;
  border-radius: 50%;
  height: clamp(48px, 6vw, 64px);
  width: clamp(48px, 6vw, 64px);
  box-sizing: border-box;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
  transform: translateY(100px);
  animation: socialsJumpIn 1s ease forwards,
  socialsShake 0.5s ease-in-out 1.7s;
}

@keyframes socialsJumpIn {
  60% {
    transform: translateY(-15px);
  }

  100% {
    transform: translateY(0);
    filter: blur(0);
  }
  }

@keyframes socialsShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px) rotate(10deg); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px) rotate(0); }
}

@media (max-width: 480px) {
  .socials-container {
    bottom: 12px;
    right: 12px;
    gap: 10px;
  }

  .socials-container a {
    width: 36px;
    height: 36px;
  }
}

.socials-container a:nth-child(2) {
  animation:
    socialsJumpIn 1s ease-out forwards 0.1s,
    socialsShake 0.5s ease-in-out 1.7s;
}

.socials-container a svg{
  height: 60%;
  width: 60%;
  z-index: 2;
  display: block;
  transition: fill 0.4s ease;
}

.socials-container a::before {
  content: attr(data-social);
  position: absolute;
  background: linear-gradient(to right,oklch(from var(--social-accent-colour) calc(l + 0.2) c h), var(--social-accent-colour));
  color: white;
  text-decoration: none;
  padding: clamp(0.3em, 0.8vw, 0.5em) clamp(0.6em, 1.2vw, 1em);
  font-size: (0.7rem, 1.2vw, 0.9rem);
  border-radius: 100px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-30px) rotate(25deg);
  opacity: 0;
  transition: 200ms cubic-bezier(.48,-0.05,.28,1.4);
}


.socials-container a:hover::before {
  transform: translateY(-65px) rotate(0);
  opacity: 1;
}

.socials-container a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to right,oklch(from var(--social-accent-colour) calc(l + 0.2) c h), var(--social-accent-colour));
  border-radius: 50%;

  transform: scale(0);
  transform-origin: center;
  transition: transform 0.4s ease;
}

.socials-container a:hover::after {
  transform: scale(1);
}

.socials-container a:hover {
  fill: white;
}

@media (max-width: 600px) {
  .socials-container {
    bottom: 10px; /* pushes it above typical mobile CTA buttons */
  }
}

@media (max-width: 900px) and (min-width: 600px) {
  .socials-container a {
    width: 64px;
    height: 64px;
  }
}