kozmos-web/app/globals.css

@import "tailwindcss";

@theme {
  --color-sand: #FFF8EE;
  --color-sandy: #F5E6CC;
  --color-coral: #FF5A36;
  --color-coral-light: #FF7A5A;
  --color-amber: #FFA827;
  --color-gold: #FFD166;
  --color-aqua: #00BFA5;
  --color-cyan: #00E5FF;
  --color-midnight: #080D18;
  --color-deep: #0E1B30;
  --color-navy: #1A2F4A;

  /* backward compat */
  --color-cream: #FFF8EE;
  --color-beige: #F5E6CC;
  --color-turquoise: #00BFA5;
  --color-forest: #0E1B30;
  --color-dark-brown: #080D18;
  --color-charcoal: #111827;

  --font-heading: var(--font-marcellus);
  --font-body: var(--font-marcellus);
}

@layer base {
  body {
    @apply bg-sand text-midnight font-body antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-heading;
  }
}

html {
  scroll-behavior: smooth;
}

html[data-scroll-behavior="smooth"] {
  scroll-behavior: smooth;
}

/* ── CSS custom property for animated border ──── */
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ── Animated conic border classes ─────────────── */
.border-spin-cyan {
  background:
    linear-gradient(#0E1B30, #0E1B30) padding-box,
    conic-gradient(from var(--border-angle), #00E5FF 0deg, transparent 70deg, transparent 290deg, #00E5FF 360deg) border-box;
  border: 1px solid transparent;
  animation: border-rotate 3s linear infinite;
}

.border-spin-coral {
  background:
    linear-gradient(#0E1B30, #0E1B30) padding-box,
    conic-gradient(from var(--border-angle), #FF5A36 0deg, transparent 70deg, transparent 290deg, #FF5A36 360deg) border-box;
  border: 1px solid transparent;
  animation: border-rotate 4s linear infinite;
}

.border-spin-amber {
  background:
    linear-gradient(#0E1B30, #0E1B30) padding-box,
    conic-gradient(from var(--border-angle), #FFA827 0deg, transparent 70deg, transparent 290deg, #FFA827 360deg) border-box;
  border: 1px solid transparent;
  animation: border-rotate 5s linear infinite;
}

/* ── Keyframes ─────────────────────────────────── */

@keyframes shimmer {
  0%   { background-position: -400% center; }
  100% { background-position:  400% center; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-16px); }
}

@keyframes border-rotate {
  to { --border-angle: 360deg; }
}

@keyframes eq-bar {
  0%, 100% { transform: scaleY(0.3); }
  50%       { transform: scaleY(1);   }
}

@keyframes grain {
  0%, 100% { transform: translate(0,    0   ); }
  10%       { transform: translate(-5%,  -5% ); }
  20%       { transform: translate(-10%,  5% ); }
  30%       { transform: translate(5%,  -10%); }
  40%       { transform: translate(-5%,  15%); }
  50%       { transform: translate(-10%,  5%); }
  60%       { transform: translate(15%,   0% ); }
  70%       { transform: translate(0%,   10%); }
  80%       { transform: translate(-15%,  0% ); }
  90%       { transform: translate(10%,   5%); }
}

/* ── Utility classes ───────────────────────────── */

.shimmer-text {
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #ffffff 35%,
    #FFD166 45%,
    #FF5A36 50%,
    #FFD166 55%,
    #ffffff 65%,
    #ffffff 100%
  );
  background-size: 400% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

.gradient-text {
  background: linear-gradient(135deg, #FF5A36, #FFA827, #00BFA5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-warm {
  background: linear-gradient(135deg, #FF5A36, #FFA827);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #00E5FF, #00BFA5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.grain-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}