@import "tailwindcss";
/* This is often required in v4 to initialize */

@theme {
    --font-alika: "alika", serif;
}

/* Define the font so the browser knows what 'alika' is */
@font-face {
    font-family: 'alika';
    src: url('fonts/AlikaDEMO.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    background: black;
}

.font-alika {
    font-family: 'alika', serif;
}

.gold-text {
    background: linear-gradient(90deg,
            #b38d5d 0%,
            #8d6e3f 20%,
            #cca46d 48%,
            #b07d00 50%,
            #8d6e3f 52%,
            #cca46d 65%,
            #cca46d 80%,
            #8d6e3f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gold-line {
    background: linear-gradient(90deg,
            #b38d5d 0%,
            #8d6e3f 20%,
            #cca46d 48%,
            #b07d00 50%,
            #8d6e3f 52%,
            #cca46d 65%,
            #cca46d 80%,
            #8d6e3f 100%);
}

.gallery-grid {
    perspective: 1000px;
    /* Gives the rotation actual depth */
}

/* Keeps the info hidden until the container is large enough to show them properly */
.expand-container .z-10 {
    /* padding: 5vh 10vw; */
}

/* Optional: force hardware acceleration for smoother expansion */
.expand-container {
    will-change: width, height;
}



/* Loader */

/* Prevent scroll helper class */
.no-scroll {
    overflow: hidden;
    height: 100vh;
}

/* Loader container */
.loader {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #230d01;
    /* amber-950 equivalent */
}

/* Dark overlay */
.loader .overlay {
    position: absolute;
    inset: 0;
    /* background: rgba(0, 0, 0, 0.5); */
}

/* Logo wrapper */
.logo-wrapper {
    position: relative;
    z-index: 10;
}

/* Logo pulse animation */
.logo {
    width: 240px;
    animation: pulseOpacity 1.5s ease-in-out infinite;
}

/* Opacity pulse */
@keyframes pulseOpacity {
    0% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.4;
    }
}

/* Fade out state */
.loader.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}



/* @keyframes custom-pulse {
  0% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.15); }
  100% { transform: translateX(-50%) scale(1); }
}

.pulsing {
  animation: custom-pulse 2s infinite ease-in-out;
} */


/* The CSS Animation for the Vibrating Wave */
@keyframes vibrate-wave {
    to {
        stroke-dashoffset: 0;
    }
}

.straight-line, .wavy-line {
    transition: opacity 0.4s ease-in-out;
}

.is-playing .straight-line { opacity: 0; }
.is-playing .wavy-line { opacity: 1; }

.is-muted .straight-line { opacity: 1; }
.is-muted .wavy-line { opacity: 0; }