@tailwind base;
@tailwind components;
@tailwind utilities;

.fade-image {
    mask-image: radial-gradient(circle at 150%, rgba(0, 0, 0, 1.0) 0%, transparent 80%);
}

@media (prefers-color-scheme: dark) {
    html {
      color-scheme: dark;
      @apply bg-dark-950
    }
}

@media (prefers-color-scheme: light) {
  html {
    color-scheme: dark;
    @apply bg-dark-950
  }
}


@layer components {
  .info-section {
    @apply grid grid-rows-2 lg:grid-cols-4 grid-cols-1 rounded overflow-hidden
  }

  .info-section div:first-child {
    @apply drop-shadow-xl my-6 mr-3 rounded overflow-hidden col-span-1 font-bold text-5xl pb-6 lg:pb-0
  }

  .info-section div {
    @apply flex justify-center items-center p-6
  }

  .info-section div:first-child::after {
    height: 100%;
    width: 1px;
    background: white;
    right: 0;
    top: 0;
  }

  .info-section div:last-child {
    @apply text-lg col-span-3
  }

  .j-section {
    @apply border-b border-b-dark-900 py-6 my-6 m-auto font-display;
  }

  .j-section .title-section {
    @apply flex flex-col justify-center items-center mb-6;
  }

  .j-section .title-section h2 {
    @apply text-4xl
  }

  .j-section .title-section p {
    @apply text-center text-dark-300 text-sm
  }

  .tile {
    @apply cursor-pointer transition-colors bg-dark-900 bg-opacity-25 p-6 rounded-xl flex justify-center items-center flex-col;
  }

  .tile i {
    @apply order-1 text-4xl;
  }

  .tile span {
    @apply font-display text-xl uppercase order-2 mt-3 font-light;
  }


  select, option {
    @apply px-6;
    text-indent: 1rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  .j-input {
    @apply flex flex-col relative;
  }

  .j-input textarea, .j-input input, .j-input textarea, .j-input select  {
    @apply transition-all lg:rounded-md sm:rounded p-3 bg-transparent hover:bg-dark-600 border-b-dark-600 border-b-2 border-dark-600 placeholder-dark-400 active:border-b-juju-600;
    outline: none;
  }

  .j-input input:focus, .j-input textarea:focus, .j-input select:focus {
    @apply border-b-juju-600;
    outline: none !important;
  }
  
  .j-input select {
    @apply p-0;
    /* height: 48px; */
  }
  
  .j-dropdown .j-option {
    @apply rounded-md w-full flex justify-start items-center py-3 px-1.5 hover:bg-juju-600 hover:text-white transition-all;
  }

  .links a:not(:last-child) {
    @apply mr-6;
  }

  .service-list .service .title {
    @apply my-3 px-3 py-1.5 bg-juju-600 inline-block rounded-3xl;
  }

  .rise {
    animation: rise-up .5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  }

  .rise .rise-delayed {
    animation-delay: 0.5s;
  }

  .work-section {
    @apply flex pb-3;
  }

  .work-section .desc {
    @apply flex gap-x-3;
  }

  .work-section .desc .date {
    @apply sm:block lg:hidden;
  }

  .work-section .side {
    @apply lg:flex sm:hidden flex-col justify-center items-center w-[72px];
  }

  .work-section .side img {
    @apply w-[72px] h-[72px] rounded overflow-hidden drop-shadow-md bg-white;
  }

  .work-section .body {
    @apply lg:ml-3 sm:ml-0 lg:my-10 sm:my-0 flex flex-col justify-center items-start bg-dark-900 p-3 bg-opacity-10 rounded w-full;
  }

  .work-section .body p.job-title {
    @apply bg-juju-500 bg-opacity-25 backdrop-blur-md rounded px-1.5 py-0.5;
  }

  .work-section h3 {
    @apply text-2xl
  }
}

.rtl {
  direction: rtl;
}

@keyframes rise-up {
  0% {
    transform: translateY(400px);
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}