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

html {
  scroll-behavior: smooth;
  overflow-x: hidden !important;
  max-width: 100%;
}
:target:before {
  content: '';
  display: block;
  height: 85px;
  margin: -85px 0 0;
}

body {
  @apply bg-gray-100 font-primary transition-colors contrast-more:bg-gray-50 dark:bg-gray-800 dark:contrast-more:bg-[rgb(18,15,13)];
}
a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}
:root {
  --tw-color-primary-50: 249 250 251;
  --tw-color-primary-100: 243 244 246;
  --tw-color-primary-200: 229 231 235;
  --tw-color-primary-300: 209 213 219;
  --tw-color-primary-400: 156 165 178;
  --tw-color-primary-500: 107 113 122;
  --tw-color-primary-600: 86 91 98;
  --tw-color-primary-700: 52 56 60;
  --tw-color-primary-800: 39 41 43;
  --tw-color-primary-900: 17 18 19;
  --color-primary-50: rgb(var(--tw-color-primary-50)); /* #f9fafb */
  --color-primary-100: rgb(var(--tw-color-primary-100)); /* #f3f4f6 */
  --color-primary-200: rgb(var(--tw-color-primary-200)); /* #e5e7eb */
  --color-primary-300: rgb(var(--tw-color-primary-300)); /* #d1d5db */
  --color-primary-400: rgb(var(--tw-color-primary-400)); /* #9ca5b2 */
  --color-primary-500: rgb(var(--tw-color-primary-500)); /* #6b717a */
  --color-primary-600: rgb(var(--tw-color-primary-600)); /* #565b62 */
  --color-primary-700: rgb(var(--tw-color-primary-700)); /* #34383c */
  --color-primary-800: rgb(var(--tw-color-primary-800)); /* #27292b */
  --color-primary-900: rgb(var(--tw-color-primary-900)); /* #111213 */

  --tw-color-gray-50: 249 250 251;
  --tw-color-gray-100: 243 244 246;
  --tw-color-gray-200: 229 231 235;
  --tw-color-gray-300: 209 213 219;
  --tw-color-gray-400: 156 165 178;
  --tw-color-gray-500: 107 113 122;
  --tw-color-gray-600: 86 91 98;
  --tw-color-gray-700: 52 56 60;
  --tw-color-gray-800: 39 41 43;
  --tw-color-gray-900: 17 18 19;
}

@layer base {
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: optional;
    src: url('/fonts/inter-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
      U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 100 900;
    font-display: optional;
    src: url('/fonts/nunito-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
      U+2215, U+FEFF, U+FFFD;
  }
}
@layer components {
  .tap-highlight-none {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
  }
  .code-highlight {
    @apply whitespace-nowrap rounded border border-gray-400/30 bg-gray-500/5 px-0.5 font-mono;
  }
  .touch-opacity-0 {
    opacity: 1;
  }
  .focus-ring {
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-primary-600;
  }
  .contrast-ring {
    @apply outline-none ring-1 ring-primary-800 ring-offset-1 dark:ring-offset-primary-200;
  }
  .contrast-bg {
    @apply contrast-more:contrast-ring outline-none contrast-more:bg-amber-300 dark:contrast-more:!bg-amber-400 dark:contrast-more:text-black;
  }
  .contrast-text {
    @apply contrast-more:!text-primary-900 dark:contrast-more:!text-primary-900;
  }
  @media (hover) {
    .touch-opacity-0 {
      opacity: 0;
    }
  }
}
@layer utilities {
  .clickable {
    @apply border border-transparent hocus:border-gray-400/30 hocus:bg-gray-400/10 dark:hocus:border-gray-300/30 dark:hocus:bg-gray-500/10;
  }
  .material-shadow-xs {
    border: 1px solid rgba(var(--color-shadow-highlight-rgb), 0.2);
    box-shadow: -4px -4px 14px rgba(var(--color-shadow-highlight-rgb), 0.8),
      4px 4px 14px rgba(var(--color-shadow-shadow-rgb), 0.35);
  }

  .material-shadow-sm {
    border: 1px solid rgba(var(--color-shadow-highlight-rgb), 0.2);
    box-shadow: -6px -6px 16px rgba(var(--color-shadow-highlight-rgb), 0.75),
      6px 6px 16px rgba(var(--color-shadow-shadow-rgb), 0.5);
  }

  .material-shadow {
    border: 1px solid rgba(var(--color-shadow-highlight-rgb), 0.2);
    box-shadow: -9px -9px 20px rgba(var(--color-shadow-highlight-rgb), 0.6),
      9px 9px 20px rgba(var(--color-shadow-shadow-rgb), 0.65);
  }

  .material-shadow-md {
    border: 1px solid rgba(var(--color-shadow-highlight-rgb), 0.2);
    box-shadow: -12px -12px 30px rgba(var(--color-shadow-highlight-rgb), 0.55),
      12px 12px 30px rgba(var(--color-shadow-shadow-rgb), 0.75);
  }

  .material-shadow-lg {
    border: 1px solid rgba(var(--color-shadow-highlight-rgb), 0.2);
    box-shadow: -16px -16px 30px rgba(var(--color-shadow-highlight-rgb), 0.55),
      16px 16px 30px rgba(var(--color-shadow-shadow-rgb), 0.75);
  }

  .material-shadow-xl {
    background: var(--color-background);
    border: 1px solid rgba(var(--color-shadow-highlight-rgb), 0.2);
    box-shadow: -13px -13px 32px rgba(var(--color-shadow-highlight-rgb), 0.7),
      12px 12px 32px rgba(var(--color-shadow-shadow-rgb), 0.75);
  }

  .material-inset-xs {
    border: 1px solid rgba(var(--color-shadow-highlight-rgb), 0.2);
    box-shadow: inset -2px -2px 4px rgba(var(--color-shadow-highlight-rgb), 0.3),
      inset 4px 4px 4px rgba(0, 0, 0, 0.1);
  }

  .material-inset-sm {
    border: 1px solid rgba(var(--color-shadow-highlight-rgb), 0.2);
    box-shadow: inset -4px -4px 6px
        rgba(var(--color-shadow-highlight-rgb), 0.65),
      inset 4px 4px 4px rgba(0, 0, 0, 0.16);
  }

  .material-inset {
    background: var(--color-background);
    border: 1px solid rgba(var(--color-shadow-highlight-rgb), 0.2);
    box-shadow: inset -9px -9px 16px
        rgba(var(--color-shadow-highlight-rgb), 0.65),
      inset 9px 9px 16px rgba(0, 0, 0, 0.22);
  }

  .material-shadow-sm-inset {
    background: var(--color-background);
    border: 1px solid rgba(var(--color-shadow-highlight-rgb), 0.2);
    box-shadow: -6px -6px 16px rgba(var(--color-shadow-highlight-rgb), 0.65),
      6px 6px 16px rgba(var(--color-shadow-shadow-rgb), 0.7),
      inset 4.5px 4.5px 16px 8px rgba(var(--color-shadow-black), 0.05);
  }

  .material-shadow-inset {
    background: var(--color-background);
    border: 1px solid rgba(var(--color-shadow-highlight-rgb), 0.2);
    box-shadow: -9px -9px 24px rgba(var(--color-shadow-highlight-rgb), 0.5),
      9px 9px 24px rgba(var(--color-shadow-shadow-rgb), 0.7),
      inset 4.5px 4.5px 16px 8px rgba(var(--color-shadow-black), 0.05);
  }

  @media (prefers-color-scheme: dark) {
    .material-inset-sm {
      border: 1px solid rgba(var(--color-shadow-highlight-rgb), 0.2);
      box-shadow: inset -4px -4px 6px
          rgba(var(--color-shadow-highlight-rgb), 0.48),
        inset 4px 4px 4px rgba(0, 0, 0, 0.38);
    }

    .material-inset {
      border: 1px solid rgba(var(--color-shadow-highlight-rgb), 0.2);
      box-shadow: inset -9px -9px 16px
          rgba(var(--color-shadow-highlight-rgb), 0.35),
        inset 9px 9px 16px rgba(0, 0, 0, 0.48);
    }
  }
}

.layout {
  @apply mx-auto max-w-7xl px-4 md:px-6 lg:px-8 xl:px-12;
}
.card-title {
  @apply font-semibold text-primary-500 contrast:text-primary-800 dark:text-primary-400 dark:contrast:text-primary-300;
}
.card-padding {
  @apply p-4 md:p-6 lg:p-8;
}

.contrast-border {
  @apply contrast:border contrast:border-gray-700 dark:contrast:border-gray-200;
}

h1:not(:where([class~='component'] *)) {
  @apply -mb-4 bg-gradient-to-t from-stone-800 to-stone-600 bg-clip-text pb-4 text-3xl font-bold dark:from-stone-400 dark:to-stone-100 md:text-4xl lg:text-5xl;
  -webkit-text-fill-color: transparent;
}
h2:not(:where([class~='component'] *)) {
  @apply bg-gradient-to-t from-stone-700 to-stone-500 bg-clip-text dark:from-stone-300 dark:to-stone-50;
  -webkit-text-fill-color: transparent;
}
h3:not(:where([class~='component'] *)) {
  @apply bg-gradient-to-t from-stone-600 to-stone-500 bg-clip-text dark:from-stone-300 dark:to-stone-200;
  -webkit-text-fill-color: transparent;
}
p:not(:where([class~='component'] *)) {
  @apply font-primary text-gray-600 contrast-more:font-medium contrast-more:text-gray-800 dark:text-gray-200 dark:contrast-more:text-gray-50;
}

.glare-wrapper {
  @apply pointer-events-none;
}
.elegant-glare .glare-wrapper {
  @apply opacity-80 dark:opacity-10;
}
.glass-glare .glare-wrapper {
  @apply opacity-30 dark:opacity-10;
}
.card-wrap:active {
  @apply scale-[0.995];
}

.button-preset {
  @apply transition active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-60;
}
.primary-button {
  @apply button-preset rounded-md border border-transparent bg-primary-800 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-gray-800/90 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:bg-primary-50 dark:text-black dark:ring-offset-primary-600 dark:hover:bg-primary-200;
}
.brand-button {
  @apply button-preset rounded-md border border-[#67f0d9] bg-[#18f5d0] px-4 py-2 text-sm font-medium text-primary-800 shadow-sm hover:bg-[#42ffdf] focus:outline-none focus:ring-2 focus:ring-[#42ffdf] focus:ring-offset-2 dark:border-primary-700 dark:bg-primary-600 dark:text-primary-100 dark:ring-offset-primary-600 dark:hover:bg-primary-700;
}
.secondary-button {
  @apply button-preset rounded-md border border-primary-300 bg-white px-4 py-2 text-sm font-medium text-primary-700 shadow-sm hover:bg-primary-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:border-primary-700 dark:bg-primary-600 dark:text-primary-100 dark:ring-offset-primary-600 dark:hover:bg-primary-700;
}
.button-primary-light {
  @apply select-none bg-primary-900 text-primary-100 transition hover:bg-primary-800 hover:text-primary-50 focus:bg-primary-800 focus:text-primary-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-50 focus-visible:ring-offset-transparent active:bg-primary-700 contrast-more:border contrast-more:border-primary-50 contrast-more:hover:bg-primary-600 contrast-more:hover:text-primary-50 contrast-more:focus:bg-primary-600 dark:bg-primary-600 dark:text-primary-50 dark:hover:bg-primary-500 dark:hover:text-primary-50 dark:focus:bg-primary-500 dark:focus:text-primary-50 dark:focus-visible:ring-offset-primary-50 dark:contrast-more:border-primary-500 dark:contrast-more:bg-transparent dark:contrast-more:bg-primary-100 dark:contrast-more:font-bold dark:contrast-more:text-primary-900 dark:contrast-more:hover:bg-primary-800 dark:contrast-more:focus:bg-primary-800;
}
.button-primary-dark {
  @apply select-none bg-primary-50 text-primary-800 transition hover:bg-primary-100 hover:text-primary-900 focus:bg-primary-100 focus:text-primary-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-transparent active:bg-primary-200 contrast-more:border contrast-more:border-primary-800 contrast-more:bg-primary-50 contrast-more:text-primary-900 contrast-more:hover:bg-primary-50 contrast-more:hover:text-primary-900 contrast-more:focus:bg-primary-50 dark:bg-primary-900 dark:text-primary-100 dark:hover:bg-primary-900/50 dark:hover:text-primary-100 dark:focus:bg-primary-900/50 dark:focus:text-primary-100 dark:focus-visible:ring-offset-primary-600 dark:active:bg-primary-700 dark:contrast-more:border-primary-200 dark:contrast-more:bg-black dark:contrast-more:font-bold dark:contrast-more:text-primary-50 dark:contrast-more:hover:bg-primary-800 dark:contrast-more:hover:text-primary-50 dark:contrast-more:focus:bg-primary-800 dark:contrast-more:focus:text-primary-50;
}

pre .token-line {
  line-height: 1.35em;
  /* height: 1.35em; */
}

pre .table-row {
  display: table-row;
}

pre .line-no {
  display: table-cell;
  text-align: right;
  padding-right: 1em;
  user-select: none;
  opacity: 0.5;
}

pre .line {
  display: table-cell;
}

.code-block-wrap:hover .code-block-touch,
.code-block-wrap:focus-within .code-block-touch {
  @apply pointer-events-auto opacity-100;
}

.doc-nav-header {
  @apply hidden py-4 text-sm font-semibold text-gray-700 dark:text-gray-50 md:!block lg:text-base;
}
.doc-nav {
  @apply flex items-start py-1 text-gray-500 hover:text-gray-900 motion-safe:transition contrast-more:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 dark:contrast-more:text-gray-200;
}
.doc-nav.active-scroll-spy {
  @apply flex items-start py-1 font-medium text-gray-800 dark:text-gray-50;
}
.mobile-doc-nav .doc-nav,
.mobile-doc-nav .doc-nav-header {
  @apply pointer-events-none hidden;
}
.mobile-doc-nav .doc-nav.active-scroll-spy {
  @apply block contrast-more:font-bold;
}
.doc-nav-expand .doc-nav-wrap {
  @apply space-y-2 divide-y divide-gray-200/70 dark:divide-gray-700/50;
}
.doc-nav-expand .doc-nav-wrap .doc-nav {
  @apply pt-2.5;
}
.patch-wrap {
  @apply pt-12 pb-16 sm:pt-20;
}
.patch {
  @apply grid grid-flow-row grid-cols-1 sm:grid-cols-2 md:grid-cols-2;
}
.patch .img-wrap {
  @apply top-1/2 h-36 w-36 -translate-y-1/2 transform;
}
.patch .img {
  @apply translate-x-[43%] transform contrast-more:contrast-200 contrast-more:filter;
}

.grid-wrap .grid-title {
  @apply pointer-hover:pointer-events-none pointer-hover:opacity-0;
}
.grid-wrap:hover .grid-title,
.grid-wrap:focus-within .grid-title {
  @apply pointer-events-auto opacity-100;
}
a.skip-main {
  @apply pointer-events-none absolute left-[-999px] top-auto z-[-999] h-1 w-1 overflow-hidden;
}
a.skip-main:focus,
a.skip-main:active {
  @apply rounded-lg border-4 border-primary-700 bg-primary-100 font-semibold text-primary-800 shadow-lg shadow-primary-300/40 outline-none dark:border-primary-700 dark:bg-primary-200 dark:text-slate-700 dark:shadow-primary-800/30;
  @apply left-auto top-auto z-[999] m-[10px_35%] h-auto w-1/3 overflow-auto p-1 text-center text-lg;
}

/* App Segment Control */
.segment-wrap {
  @apply inline-table rounded-full contrast-more:border contrast-more:border-black dark:contrast-more:border-white;
}
.segment-wrap .segmenet-inner {
  @apply inline-flex space-x-4 rounded-full transition delay-100 duration-300 hover:delay-[0ms];
}
.segment-wrap .segmenet-inner .segment-button {
  @apply relative min-w-[4.5rem] transform rounded-full px-3 py-1.5 text-sm font-semibold text-gray-500 outline-none transition hover:opacity-80  focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-transparent active:scale-95 contrast-more:text-gray-700 dark:text-white/80 dark:text-gray-400 dark:focus:ring-gray-400 dark:contrast-more:text-gray-300;
}
.segment-wrap .segmenet-inner .segment-button.selected {
  @apply text-gray-800 shadow-lg hover:opacity-100 contrast-more:text-white dark:text-gray-200 dark:contrast-more:text-black;
}
.segment-wrap .segmenet-inner .active-button {
  @apply absolute inset-0 z-[1] rounded-full bg-white contrast-more:bg-black dark:bg-white/20 dark:contrast-more:bg-white;
}
/* Component Styles */
.card-bg {
  @apply bg-gray-50 shadow-gray-900/10 will-change-transform dark:bg-gray-800 dark:shadow-gray-900/30;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.example .list-detail-li {
  @apply px-4 py-1.5;
}

/* iOS BG */
.glass-button-wrap {
  background-image: -ms-linear-gradient(
    top,
    #3d709d 0%,
    #82b5c8 50%,
    #8494cf 75%,
    #2f53ad 100%
  );
  background-image: -moz-linear-gradient(
    top,
    #3d709d 0%,
    #82b5c8 50%,
    #8494cf 75%,
    #2f53ad 100%
  );
  background-image: -o-linear-gradient(
    top,
    #3d709d 0%,
    #82b5c8 50%,
    #8494cf 75%,
    #2f53ad 100%
  );
  background-image: -webkit-linear-gradient(
    top,
    #3d709d 0%,
    #82b5c8 50%,
    #8494cf 75%,
    #2f53ad 100%
  );
  background-image: linear-gradient(
    to bottom,
    #3d709d 0%,
    #82b5c8 50%,
    #8494cf 75%,
    #2f53ad 100%
  );
}
.glass-bg-circle {
  display: block;
  position: absolute;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
}
.glass-bg-one {
  width: max(60px, 3.5vw);
  height: max(60px, 3.5vw);
}
.glass-bg-two {
  width: max(85px, 6.5vw);
  height: max(85px, 6.5vw);
}
.glass-bg-three {
  width: max(45px, 7.5vw);
  height: max(45px, 7.5vw);
}
.glass-bg-four {
  width: max(75px, 9.5vw);
  height: max(75px, 9.5vw);
}
.glass-bg-five {
  width: max(60px, 10vw);
  height: max(60px, 10vw);
}
.glass-bg-six {
  width: max(80px, 12vw);
  height: max(80px, 12vw);
}
.glass-bg-seven {
  width: max(60px, 10vw);
  height: max(60px, 10vw);
}
/*color transparency*/
.white {
  background: #fff;
}
.azure {
  background: #3d709d;
}
.ciano {
  background: #9dd7ec;
}
.purple {
  background: #8494cf;
}
.blue {
  background: #2f53ad;
}
/*blur*/
.blur_one {
}
.blur_two {
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
}
.blur_three {
  -webkit-filter: blur(8px);
  -moz-filter: blur(8px);
  -o-filter: blur(8px);
  -ms-filter: blur(8px);
  filter: blur(8px);
}
.blur_four {
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
}
.blur_five {
  -webkit-filter: blur(16px);
  -moz-filter: blur(16px);
  -o-filter: blur(16px);
  -ms-filter: blur(16px);
  filter: blur(16px);
}
/*opacity*/
.op_one {
  opacity: 0.1;
}
.op_two {
  opacity: 0.2;
}
.op_three {
  opacity: 0.3;
}
.op_four {
  opacity: 0.4;
}
.op_five {
  opacity: 0.5;
}
.op_six {
  opacity: 0.6;
}
.op_seven {
  opacity: 0.7;
}

.glass-bg-one {
  animation: glass-bg-one 40s linear 0 infinite alternate;
  -webkit-animation: glass-bg-one 40s linear 0 infinite alternate;
}

/*animations*/
@-webkit-keyframes glass-bg-one {
  0% {
    -webkit-transform: translate(0px, 0px);
  }
  100% {
    -webkit-transform: translate(20px, 300px);
  }
}
@-moz-keyframes glass-bg-one {
  0% {
    -moz-transform: translate(0px, 0px);
  }
  100% {
    -moz-transform: translate(20px, 300px);
  }
}
@-o-keyframes glass-bg-one {
  0% {
    -o-transform: translate(0px, 0px);
  }
  100% {
    -o-transform: translate(20px, 300px);
  }
}
@keyframes glass-bg-one {
  0% {
    transform: translate(0px, 0px);
  }
  100% {
    transform: translate(20px, 300px);
  }
}

.glass-bg-two {
  animation: glass-bg-two 60s linear 5s infinite alternate;
  -webkit-animation: glass-bg-two 60s linear 5s infinite alternate;
}

/* Start Swiper customizations */

.project-slider .swiper-slide-shadow {
  @apply !hidden;
}
.project-slider.swiper {
  @apply !overflow-visible;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  @apply !bg-primary-400 dark:!bg-primary-500;
}

.swiper-navigation .swiper-button-next,
.swiper-navigation .swiper-button-prev {
  @apply !h-[22px] !w-[13.5px] !text-primary-500 hocus:text-primary-700 dark:hocus:text-primary-300;
}

.swiper-navigation .swiper-button-next::after,
.swiper-navigation .swiper-button-prev::after {
  @apply text-2xl;
}

/* End Swiper customizations */

/*animations*/
@-webkit-keyframes glass-bg-two {
  0% {
    -webkit-transform: translate(0px, 0px);
  }
  100% {
    -webkit-transform: translate(10px, 200px);
  }
}
@-moz-keyframes glass-bg-two {
  0% {
    -moz-transform: translate(0px, 0px);
  }
  100% {
    -moz-transform: translate(10px, 200px);
  }
}
@-o-keyframes glass-bg-two {
  0% {
    -o-transform: translate(0px, 0px);
  }
  100% {
    -o-transform: translate(10px, 200px);
  }
}
@keyframes glass-bg-two {
  0% {
    transform: translate(0px, 0px);
  }
  100% {
    transform: translate(10px, 200px);
  }
}