/* Noise Texture */
.bg-noise {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 50;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

body {
  cursor: none; /* Hide default cursor for custom one */
}

/* Typography Utilities */
.vertical-rl {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.15em;
}

/* Animation Utilities */
.hover-underline-animation {
  display: inline-block;
  position: relative;
}
.hover-underline-animation::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: currentColor;
  transform-origin: bottom right;
  transition: transform 0.4s ease-out;
}
.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Observer State Classes */
.observe-target {
    opacity: 0;
    will-change: opacity, transform;
}
.observe-target.is-visible {
    opacity: 1;
    transform: none;
}

/* Animation Delays */
.delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
.delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
.delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
.delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
.delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
.delay-600 { transition-delay: 600ms; animation-delay: 600ms; }
.delay-800 { transition-delay: 800ms; animation-delay: 800ms; }

/* Custom Animations mapped to Tailwind config but ensuring persistence */
.is-visible.fade-in {
    animation: fadeIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.is-visible.slide-up {
    animation: slideUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.is-visible.scale-reveal {
    animation: scaleReveal 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
@keyframes scaleReveal {
    from { transform: scale(1.2); filter: blur(10px); }
    to { transform: scale(1); filter: blur(0); }
}

.text-\[13px\].uppercase.border.border-white\/20.px-2.py-1.rounded-full.text-gray-300.mt-10 {
    width: 40%;
    text-align: center;
    margin-top: 30px;
}

@media screen and (max-width:500px){
    h1{
    font-size: 2rem!important;
    margin-top:-200px!important;
}
.h-full {
    height: 90%;
}
.h-screen {
    height: 90vh;
}
.flex.flex-col.md\:flex-row.justify-between.items-end.mb-24.border-b.border-gray-800.pb-8.observe-target.fade-in.is-visible {
    align-items: flex-start;
}
p.md\:block.text-gray-400.font-serif.text-sm.w-1\/3.leading-loose {
    width: 100%;
}
.flex.flex-col.md\:flex-row.justify-between.items-end.mb-24.border-b.border-gray-800.pb-8.observe-target.fade-in.is-visible {
    margin-bottom: 0;
}
section#service{
    padding: 7rem 0;
    margin-top: 10px;
}
section#company,section#contact,section#case{
    padding: 3rem 0;
}
.absolute.top-1\/2.right-0.md\:right-12.-translate-y-1\/2.w-\[60vw\].md\:w-\[35vw\].h-\[40vh\].md\:h-\[60vh\].z-10.overflow-hidden.shadow-2xl.observe-target.scale-reveal.delay-600.is-visible{
    width: 70vw;
    height: 30vh;
}
.text-\[13px\].uppercase.border.border-white\/20.px-2.py-1.rounded-full.text-gray-300.mt-10 {
    width: 40%;
    text-align: center;
    margin: 0 auto;
    margin-top: 30px;
}
.pt-32{
    padding-top: 15rem!important;
}
}