@import "tailwindcss";
@source not "../public/bespoke-hero.html";

@custom-variant reveal-false ([data-reveal="false"] &);

@custom-variant touch {
  @media ((any-hover: none) and (any-pointer: coarse)) {
    @slot;
  }
}

/* *:not(:has(border-none)) {
  border: 1px dotted red;
} */

html {
  scroll-behavior: smooth;
}

@theme inline {
  --animate-marquee: marquee 20s linear infinite;
  --animate-rotate: rotate-left-right 10s ease-in-out infinite;
  --animate-wordCycle: wordCycle 8s linear infinite;
  --breakpoint-xs: 30rem;
  --breakpoint-xxs: 24rem;
  --breakpoint-custom: 75.5rem;
  --font-switzer: var(--font-switzer);
  --color-gray-500: #828282;
  --color-gray-200: #dedede;
  --tw-border-style: 1px solid #fff;
  --animate-fade-in: fadeIn 0.4s ease forwards;
  /* To fix Safari font weight bug */
  --font-weight-semibold: 599;
}

:root {
  --gradient: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  --gradient-alt: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);

  --button-shadow:
    0px 2px 2px -1.5px rgba(0, 0, 0, 0.32), 0px 4.4px 4.4px -2.25px rgba(0, 0, 0, 0.3), 0px 9.8px 9.8px -3px rgba(0, 0, 0, 0.25),
    0px 25px 25px -3.75px rgba(0, 0, 0, 0.11), 0px -5px 5px -3.75px rgba(0, 0, 0, 0.11);
}
/* 
@keyframes customBounce {
  0%,
  25%,
  100% {
    transform: translateY(0px);
    background-color: #aaaaaa;
  }

  10% {
    transform: translateY(-2px);
    background-color: #000;
  }
  18% {
    transform: translateY(1px);
    background-color: #aaaaaa;
  }
} */

@keyframes fill-from-left {
  0%,
  100% {
    background-position: 100% 100%;
  }
  50% {
    background-position: 0% 0%;
  }
}

@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }

  .animate-click:not(:disabled) {
    animation: click 200ms ease-in-out;
    &:active {
      animation: none;
    }
  }

  @keyframes click {
    0%,
    100% {
      transform: scaleY(1) scaleX(1);
    }
    50% {
      transform: scaleY(0.8) scaleX(1.1);
      filter: saturate(2) brightness(1.2);
    }
  }

  .underline-hover {
    @apply relative hover:after:scale-x-100;
    &::after {
      @apply absolute bottom-0 left-0 h-0.5 w-full origin-left scale-x-0 bg-black opacity-50 transition-transform content-[''];
    }
    &:hover {
      @apply hover:after:scale-x-100;
    }
  }

  .inside-container-small {
    @apply xxs:px-5.5 mx-auto flex w-full max-w-6xl flex-col gap-12 px-2.5 py-12 md:px-11 md:py-16;
  }

  .inside-container {
    @apply xxs:px-5.5 mx-auto flex w-full max-w-6xl flex-col gap-12 px-2.5 py-12 md:gap-16 md:px-11 md:py-24 lg:py-32;
  }
  .inside-container-large {
    @apply xxs:px-5.5 mx-auto flex w-full max-w-6xl flex-col gap-12 px-2.5 pt-32 pb-12 md:gap-16 md:px-11 lg:pt-36 lg:pb-16;
  }

  body[data-mobile-menu="closed"] {
    .bounce > span {
      /* animation: customBounce 2s cubic-bezier(0.8, 0.5, 0.2, 1.4) infinite;
      animation-delay: var(--delay, 0s); */
      height: 0.375rem;
      width: 0.375rem;
      border-radius: 100px;
      background-color: var(--color-gray-500);
    }
    .mobile-menu-container {
      pointer-events: none;
      max-height: 0;
      opacity: 0;
    }
  }
  body[data-mobile-menu="open"] {
    .dot-menu-icon {
      :first-child {
        height: 0.125rem;
        width: 100%;
        rotate: calc(45deg);
        border-radius: 100px;
        background-color: black;
      }
      :nth-child(2) {
        opacity: 0;
      }
      :nth-child(3) {
        height: 0.125rem;
        width: 100%;
        rotate: calc(-45deg);
        border-radius: 100px;
        background-color: black;
      }
    }

    .mobile-menu-container {
      pointer-events: auto;
      max-height: 300px;
      opacity: 1;
      padding-bottom: 1rem;
    }
    .mobile-menu-item {
      transform: translateX(0);
      opacity: 1;
      /* Calculate delay based on index */
      transition-delay: calc(var(--index) * 0.1s + 0.2s);
    }
  }

  .mobile-menu-item {
    transform: translateX(-1.25rem);
    opacity: 0;
    transition-delay: 0s;
  }

  /* @media (min-width: 768px) {
    body[data-scrolled="up"] .desktop-menu-container {
      opacity: 0;
      max-width: 0;
    }
    body[data-scrolled="down"] {
      .desktop-menu-container {
        opacity: 1;
        max-width: 24rem;
      }
      .dot-menu-icon-container {
        opacity: 0;
        animation-delay: 400ms;
        pointer-events: none;
      }
    }
  } */

  .bubble-hover {
    @apply relative inline-block overflow-hidden rounded-full text-nowrap;
    &::before {
      @apply pointer-events-none absolute inset-0 z-[-1] -translate-x-full rounded-full opacity-0 blur-[1px] transition-all duration-300 will-change-transform content-[''];
      background-size: 200% 200%;
      background-position: 100% 100%;
      background-image: var(--gradient);
    }

    &:hover {
      &::before {
        @apply translate-x-0 opacity-30!;
        animation: fill-from-left 5s ease-out infinite;
      }
    }
    &.active {
      &::before {
        @apply translate-x-0 opacity-70;
        animation: fill-from-left 5s ease-out infinite;
      }
    }
  }

  .bubble-hover-cta {
    @apply relative inline-block overflow-hidden rounded-full text-nowrap;
    &::before {
      @apply pointer-events-none absolute inset-0 z-[-1] -translate-x-full rounded-full opacity-0 blur-[1px] transition-all duration-300 will-change-transform content-[''];
      background-size: 200% 200%;
      background-position: 100% 100%;
      background-image: var(--gradient-alt);
    }

    &:hover {
      &::before {
        @apply translate-x-0 opacity-30!;
        animation: fill-from-left 5s ease-out infinite;
      }
    }
    &.active {
      &::before {
        @apply translate-x-0 opacity-70;
        animation: fill-from-left 5s ease-out infinite;
      }
    }
  }

  blockquote::before {
    content: "“";
    color: oklch(55.4% 0.046 257.417);
    position: absolute;
    left: -60px;
    top: -30px;
    font-size: 300px;
    line-height: 200px;
    opacity: 0.3;
  }
  blockquote::after {
    content: "”";
    color: oklch(55.4% 0.046 257.417);
    position: absolute;
    right: -60px;
    bottom: -90px;
    font-size: 300px;
    line-height: 1px;
    opacity: 0.3;
  }
  @media (max-width: 1024px) {
    blockquote::before {
      content: "“";
      color: oklch(55.4% 0.046 257.417);
      position: absolute;
      left: 0px;
      top: -45px;
      font-size: 200px;
      line-height: 200px;
      opacity: 0.2;
    }
    blockquote::after {
      content: "”";
      color: oklch(55.4% 0.046 257.417);
      position: absolute;
      right: 0px;
      bottom: -55px;
      font-size: 200px;
      line-height: 1px;
      opacity: 0.2;
    }
  }
}

@layer utilities {
  .footer-link {
    @apply flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 p-1 transition-all duration-200 *:duration-200 hover:-translate-y-0.5 hover:bg-white hover:*:scale-105;
  }
  .bottom-shadow {
    box-shadow:
      0 0.6px 0.6px -0.9px #00000012,
      0 1.8px 1.8px -1.8px #00000012,
      0 4.8px 4.8px -2.8px #0000000f,
      0 15px 15px -3.7px #00000008;
  }
  .custom-shadow {
    box-shadow:
      0.89px 0.41px 0.98px -0.46px #00000012,
      2.1px 0.99px 2.3px -0.93px #00000012,
      3.84px 1.81px 4.25px -1.4px #00000012,
      6.4px 3px 7.1px -1.9px #00000012,
      10.3px 4.9px 11.4px -2.35px #00000012,
      16.9px 7.98px 18.7px -2.8px #0000000f,
      29.1px 13.7px 32.2px -3.3px #0000000d,
      53px 25px 58.6px -3.75px #00000008;
  }
  .button-shadow {
    box-shadow: var(--button-shadow);
    transition: all 0.3s ease-in-out;
  }
  .button-shadow:hover:active {
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0);
  }

  .list {
    z-index: 1;
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 40px;
    min-width: calc(var(--width) * var(--quantity));
  }

  .item {
    width: var(--width, 100%);
    height: var(--height);
    animation: autoRun var(--speed) linear infinite;
    transition: filter 0.5s;
    animation-delay: calc((var(--speed) / var(--quantity)) * (var(--position) - 1) - var(--speed)) !important;
    left: 100%;
    position: absolute;
    will-change: transform;
  }

  @keyframes autoRun {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(var(--width) * var(--quantity) * -1.2));
    }
  }

  .slider[reverse="true"] .item {
    animation: reversePlay 10s linear infinite;
  }

  @keyframes reversePlay {
    from {
      left: calc(var(--width) * -1);
    }
    to {
      left: 100%;
    }
  }
  /* LogoMarquee End */

  @keyframes rotate-left-right {
    0%,
    100% {
      transform: rotate(-5deg);
    }
    50% {
      transform: rotate(5deg);
    }
  }

  .large-brand-text {
    font-size: clamp(90px, 20vw, 240px);
    line-height: 1.1;
  }
  @media (max-width: 768px) {
    .large-brand-text {
      font-size: clamp(80px, 20vw, 160px);
      line-height: 1.4;
    }
  }
  @media (max-width: 540px) {
    .large-brand-text {
      font-size: clamp(70px, 20vw, 120px);
      line-height: 220%;
    }
  }
}

@keyframes wordCycle {
  0%,
  10% {
    filter: blur(5px);
    opacity: 0;
    transform: translateY(var(--word-height, 40px));
  }
  11% {
    filter: blur(1px);
    opacity: 0.5;
  }
  13% {
    filter: blur(2px);
    opacity: 0.7;
  }

  15%,
  35% {
    filter: blur(0px);
    opacity: 1;
    transform: translateY(0%);
  }

  45%,
  100% {
    filter: blur(5px);
    opacity: 0;

    transform: translateY(calc(-1 * var(--word-height, 40px)));
  }
}

.word-container {
  height: var(--word-height, 40px);
}
@media (max-width: 768px) {
  .word-container {
    height: var(--word-height-mobile);
  }
}
.word {
  height: var(--word-height, 40px);
  position: absolute;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .word {
    height: var(--word-height-mobile, 30px);
  }
}
.word:nth-child(1) {
  animation: wordCycle 8s infinite;
  animation-delay: 0s;
}
.word:nth-child(2) {
  animation: wordCycle 8s infinite;
  animation-delay: 2s;
  opacity: 0;
}
.word:nth-child(3) {
  animation: wordCycle 8s infinite;
  animation-delay: 4s;
  opacity: 0;
}
.word:nth-child(4) {
  animation: wordCycle 8s infinite;
  animation-delay: 6s;
  opacity: 0;
}

/* leaving snapshot: wipe upward + darken */
::view-transition-old(root) {
  animation: 0.5s cubic-bezier(0.83, 0, 0.17, 1) oldUp forwards;
  will-change: filter;
}
/* entering snapshot: reveal from bottom */
::view-transition-new(root) {
  animation: 0.5s cubic-bezier(0.83, 0, 0.17, 1) newReveal forwards;
  will-change: clip-path;
}

@keyframes oldUp {
  from {
    filter: blur(0px) brightness(1);
    transform: translateY(0px);
  }
  to {
    filter: blur(10px) brightness(0.5);
    transform: translateY(-400px);
  }
}
@keyframes newReveal {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(var(--tx, 40px));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
