@tailwind base;
@tailwind components;
@tailwind utilities;

/* ========================================
   CASALED MAIS — DESIGN SYSTEM CORE
   ======================================== */

:root {
  --cl-orange: #f8aa2a;
  --cl-orange-dark: #e59a1f;
  --cl-blue: #1587c0;
  --cl-blue-dark: #1270a0;
  --cl-dark: #39373b;
  --cl-offwhite: #eff0eb;
  --cl-white: #ffffff;
  --cl-border: #d9dad5;
  --cl-muted: #6b6970;
  --cl-orange-tint: rgba(248, 170, 42, 0.12);
  --cl-blue-tint: rgba(21, 135, 192, 0.12);
  --cl-dark-overlay: rgba(57, 55, 59, 0.82);
  --mouse-x: 50%;
  --mouse-y: 50%;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Manrope', sans-serif;
  background: var(--cl-offwhite);
  color: var(--cl-dark);
  overflow-x: hidden;
  /* Retiramos o opacity: 0 padrão do design_system.html para o Astro renderizar imediatamente */
}

::selection {
  background: var(--cl-orange);
  color: white;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cl-offwhite); }
::-webkit-scrollbar-thumb { background: var(--cl-orange); border-radius: 3px; }

/* ========================================
   PRELOADER
   ======================================== */
.loader {
  position: fixed; inset: 0; background: var(--cl-dark);
  z-index: 10000; display: flex; justify-content: center;
  align-items: center; flex-direction: column; gap: 24px;
}
.loader-logo { height: 48px; width: auto; }
.loader-bar-track {
  width: 200px; height: 3px; background: rgba(255,255,255,0.1);
  border-radius: 3px; overflow: hidden;
}
.loader-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--cl-orange), var(--cl-blue));
  border-radius: 3px;
}

/* ========================================
   NOISE OVERLAY
   ======================================== */
.noise-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 9000; opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ========================================
   CHAR REVEAL (animation-clean)
   ======================================== */
.char {
  display: inline-block; opacity: 0;
  transform: translateY(100%);
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.char.revealed {
  opacity: 1; transform: translateY(0);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* ========================================
   SCROLL ANIMATIONS (animation-clean)
   ======================================== */
.animate-on-scroll {
  opacity: 0.01; filter: blur(8px); transform: translateY(30px);
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.animate-on-scroll.in-view {
  opacity: 1; filter: blur(0); transform: translateY(0);
}

/* ========================================
   WORD REVEAL (parallax-clean)
   ======================================== */
.word-wrap {
  display: inline-block; overflow: hidden;
  vertical-align: top; padding-bottom: 0.1em;
}
.word-inner {
  display: inline-block; transform: translateY(110%);
}

/* ========================================
   MARQUEE (animation-clean)
   ======================================== */
@keyframes scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-content { animation: scroll-left 30s linear infinite; }
.marquee-mask {
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* ========================================
   BORDER BEAM BUTTON (animation-clean)
   ======================================== */
.btn-beam-container {
  overflow: hidden;
  padding: 2px;
  border-radius: 10px;
}
.beam-border {
  position: absolute; inset: -100%; border-radius: inherit;
  pointer-events: none; z-index: 0; opacity: 0;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, var(--cl-orange) 60deg, transparent 120deg);
  animation: rotate-beam 2s linear infinite;
  transition: opacity 0.3s;
}
.btn-beam-container:hover .beam-border { opacity: 1; }
@keyframes rotate-beam {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ========================================
   BACKGROUND CLIP COLUMNS (animation-clean)
   ======================================== */
.bg-column {
  transition: clip-path 1.5s cubic-bezier(0.65, 0, 0.35, 1);
  clip-path: inset(100% 0 0 0);
}
.bg-column.active { clip-path: inset(0 0 0 0); }

/* ========================================
   FLASHLIGHT EFFECT (animation-clean)
   ======================================== */
.flashlight-card {
  position: relative;
  background-color: rgba(57, 55, 59, 0.05);
  border: 1px solid var(--cl-border);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}