/* SoundWave — Playful Geometric Design System (HTML/Tailwind CDN version) */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@500;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

:root {
  --radius: 16px;
  --background: oklch(0.985 0.012 95);
  --foreground: oklch(0.27 0.04 260);
  --ink: oklch(0.27 0.04 260);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.27 0.04 260);
  --primary: oklch(0.62 0.23 295);
  --primary-foreground: oklch(1 0 0);
  --accent: oklch(0.62 0.23 295);
  --accent-foreground: oklch(1 0 0);
  --secondary: oklch(0.74 0.18 350);
  --secondary-foreground: oklch(0.27 0.04 260);
  --tertiary: oklch(0.84 0.16 85);
  --tertiary-foreground: oklch(0.27 0.04 260);
  --quaternary: oklch(0.78 0.16 165);
  --quaternary-foreground: oklch(0.27 0.04 260);
  --muted: oklch(0.96 0.01 250);
  --muted-foreground: oklch(0.55 0.03 257);
  --destructive: oklch(0.6 0.24 27);
  --border: oklch(0.27 0.04 260);
  --input: oklch(1 0 0);
  --ring: oklch(0.62 0.23 295);
}

* {
  border-color: var(--border);
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11";
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Outfit", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}

.font-display {
  font-family: "Outfit", system-ui, sans-serif;
}

/* Color utilities mapped to tokens */
.bg-background {
  background-color: var(--background);
}

.bg-foreground {
  background-color: var(--foreground);
}

.bg-card {
  background-color: var(--card);
}

.bg-muted {
  background-color: var(--muted);
}

.bg-primary {
  background-color: var(--primary);
}

.bg-accent {
  background-color: var(--accent);
}

.bg-secondary {
  background-color: var(--secondary);
}

.bg-tertiary {
  background-color: var(--tertiary);
}

.bg-quaternary {
  background-color: var(--quaternary);
}

.bg-destructive {
  background-color: var(--destructive);
}

.bg-input {
  background-color: var(--input);
}

.text-background {
  color: var(--background);
}

.text-foreground {
  color: var(--foreground);
}

.text-card-foreground {
  color: var(--card-foreground);
}

.text-muted-foreground {
  color: var(--muted-foreground);
}

.text-primary {
  color: var(--primary);
}

.text-accent {
  color: var(--accent);
}

.text-accent-foreground {
  color: var(--accent-foreground);
}

.text-secondary {
  color: var(--secondary);
}

.text-tertiary {
  color: var(--tertiary);
}

.text-quaternary {
  color: var(--quaternary);
}

.border-foreground {
  border-color: var(--foreground);
}

.border-background {
  border-color: var(--background);
}

.border-tertiary {
  border-color: var(--tertiary);
}

.fill-secondary {
  fill: var(--secondary);
}

/* Pop / hard shadow utilities */
.shadow-pop {
  box-shadow: 4px 4px 0 0 var(--ink);
}

.shadow-pop-lg {
  box-shadow: 8px 8px 0 0 var(--ink);
}

.shadow-pop-pink {
  box-shadow: 8px 8px 0 0 var(--secondary);
}

.shadow-pop-yellow {
  box-shadow: 8px 8px 0 0 var(--tertiary);
}

.shadow-pop-mint {
  box-shadow: 8px 8px 0 0 var(--quaternary);
}

.shadow-pop-violet {
  box-shadow: 8px 8px 0 0 var(--accent);
}

.hover\:shadow-pop-lg:hover {
  box-shadow: 8px 8px 0 0 var(--ink);
}

.hover\:shadow-pop-12:hover {
  box-shadow: 12px 12px 0 0 var(--ink);
}

/* Patterns */
.bg-dots {
  background-image: radial-gradient(var(--ink) 1.4px, transparent 1.4px);
  background-size: 18px 18px;
}

.bg-dots-light {
  background-image: radial-gradient(oklch(0.27 0.04 260 / 0.18) 1.2px, transparent 1.2px);
  background-size: 16px 16px;
}

.bg-grid {
  background-image:
    linear-gradient(to right, oklch(0.27 0.04 260 / 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(0.27 0.04 260 / 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
}

.bg-stripes {
  background-image: repeating-linear-gradient(45deg, var(--ink) 0 2px, transparent 2px 12px);
}

/* Radius */
.rounded-blob {
  border-radius: 70% 30% 60% 40% / 50% 60% 40% 50%;
}

.rounded-blob-2 {
  border-radius: 40% 60% 70% 30% / 50% 40% 60% 50%;
}

/* Bouncy easing */
.ease-bounce {
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Marquee */
@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  animation: marquee 30s linear infinite;
}

/* Wiggle */
@keyframes wiggle {

  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(3deg);
  }

  75% {
    transform: rotate(-3deg);
  }
}

.animate-wiggle {
  animation: wiggle 0.6s ease-in-out infinite;
}

.group:hover .group-hover\:animate-wiggle {
  animation: wiggle 0.6s ease-in-out infinite;
}

/* Pop in */
@keyframes pop-in {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }

  70% {
    transform: scale(1.05);
    opacity: 1;
  }

  100% {
    transform: scale(1);
  }
}

.animate-pop-in {
  animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Floating */
@keyframes float-y {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

.animate-float {
  animation: float-y 4s ease-in-out infinite;
}

/* Audio bars */
@keyframes audio-bar {

  0%,
  100% {
    transform: scaleY(0.3);
  }

  50% {
    transform: scaleY(1);
  }
}

.animate-audio-bar {
  animation: audio-bar 1s ease-in-out infinite;
}

/* Spin slow */
@keyframes spin-slow {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin-slow {
  animation: spin-slow 18s linear infinite;
}

/* Glow pulse */
@keyframes glow-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 60%, transparent);
  }

  50% {
    box-shadow: 0 0 0 14px color-mix(in oklab, var(--accent) 0%, transparent);
  }
}

.animate-glow {
  animation: glow-pulse 2.4s ease-in-out infinite;
}

/* Gradient sweep */
@keyframes gradient-sweep {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }
}

.animate-gradient {
  background-size: 200% auto;
  animation: gradient-sweep 4s linear infinite;
}

/* Underline draw */
@keyframes underline-draw {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.animate-underline {
  transform-origin: left;
  animation: underline-draw 0.8s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Scroll reveal */
@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes reveal-down {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes reveal-left {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes reveal-right {
  from {
    opacity: 0;
    transform: translateX(40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes reveal-zoom {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes reveal-flip {
  from {
    opacity: 0;
    transform: perspective(800px) rotateX(-25deg) translateY(20px);
  }

  to {
    opacity: 1;
    transform: perspective(800px) rotateX(0) translateY(0);
  }
}

[data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
}

[data-reveal].is-visible {
  animation-duration: 0.8s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-reveal="up"].is-visible {
  animation-name: reveal-up;
}

[data-reveal="down"].is-visible {
  animation-name: reveal-down;
}

[data-reveal="left"].is-visible {
  animation-name: reveal-left;
}

[data-reveal="right"].is-visible {
  animation-name: reveal-right;
}

[data-reveal="zoom"].is-visible {
  animation-name: reveal-zoom;
}

[data-reveal="flip"].is-visible {
  animation-name: reveal-flip;
}

/* Hover tilt */
.hover-tilt {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hover-tilt:hover {
  transform: rotate(-2deg) scale(1.03);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Component styles ---------- */

/* Candy Button */
.btn-candy {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  border: 2px solid var(--foreground);
  border-radius: 9999px;
  box-shadow: 4px 4px 0 0 var(--ink);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  text-decoration: none;
}

.btn-candy:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--ink);
}

.btn-candy:active {
  transform: translate(0, 0);
  box-shadow: 2px 2px 0 0 var(--ink);
}

.btn-candy--primary {
  background: var(--accent);
  color: var(--accent-foreground);
}

.btn-candy--secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
}

.btn-candy--tertiary {
  background: var(--tertiary);
  color: var(--tertiary-foreground);
}

.btn-candy--ghost {
  background: var(--background);
  color: var(--foreground);
}

/* Audio bars */
.audio-bars {
  display: inline-flex;
  align-items: end;
  gap: 3px;
  height: 18px;
}

.audio-bars span {
  display: block;
  width: 3px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: bottom;
  animation: audio-bar 1s ease-in-out infinite;
}

.audio-bars span:nth-child(1) {
  animation-delay: 0s;
}

.audio-bars span:nth-child(2) {
  animation-delay: 0.15s;
  height: 14px;
}

.audio-bars span:nth-child(3) {
  animation-delay: 0.3s;
  height: 18px;
}

.audio-bars span:nth-child(4) {
  animation-delay: 0.45s;
  height: 12px;
}

/* Preloader */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.preloader.hidden {
  opacity: 0;
  visibility: hidden;
}

.preloader .audio-bars {
  height: 60px;
}

.preloader .audio-bars span {
  width: 8px;
}

.preloader .audio-bars span:nth-child(1) {
  height: 40px;
}

.preloader .audio-bars span:nth-child(2) {
  height: 60px;
}

.preloader .audio-bars span:nth-child(3) {
  height: 30px;
}

.preloader .audio-bars span:nth-child(4) {
  height: 50px;
}

.preloader .audio-bars span:nth-child(5) {
  height: 35px;
}

/* Scroll-to-top */
.scroll-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 40;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--accent-foreground);
  border: 2px solid var(--foreground);
  box-shadow: 4px 4px 0 0 var(--ink);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.scroll-top.show {
  opacity: 1;
  visibility: visible;
}

.scroll-top:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--ink);
}

.footer-border {
  border-color: #818181 !important;
}

.next-show {
  border: 1px solid #818181;
}

#site-header.is-scrolled {
  background: color-mix(in oklab, var(--background) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--foreground);
}

[data-aos] {
  pointer-events: none;
}

[data-aos].aos-animate {
  pointer-events: auto;
}

body {
  overflow-x: hidden;
}

html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* custom modal & transitions */
.modal-transition {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-scale {
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

body.modal-open {
  overflow: hidden;
}

/* gallery item hover + cursor */
.gallery-item {
  cursor: pointer;
}

#modal-close {
  margin-top: 5%;
  margin-right: 25%;
}