/* =============================================
   MOTION SCROLL EFFECT — Sistema de Animação
   ============================================= */

/* --- Base Reveal --- */
.reveal {
  opacity: ;
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
              transform .7s cubic-bezier(.16, 1, .3, 1),
              filter .7s cubic-bezier(.16, 1, .3, 1);
  will-change: transform, opacity;
}

.reveal.visible {
  opacity: 1;
  transform: translate(, ) scale(1) rotateX();
  filter: blur();
}

/* --- Tipos de Animação --- */

/* Fade Up (padrão) */
.reveal-fade-up {
  transform: translateY(40px);
}

.reveal-fade-up.visible {
  transform: translateY();
}

/* Fade Down */
.reveal-fade-down {
  transform: translateY(-40px);
}

.reveal-fade-down.visible {
  transform: translateY();
}

/* Fade Left */
.reveal-fade-left {
  transform: translateX(-50px);
}

.reveal-fade-left.visible {
  transform: translateX();
}

/* Fade Right */
.reveal-fade-right {
  transform: translateX(50px);
}

.reveal-fade-right.visible {
  transform: translateX();
}

/* Scale In */
.reveal-scale-in {
  transform: scale(.85);
}

.reveal-scale-in.visible {
  transform: scale(1);
}

/* Zoom In (com blur) */
.reveal-zoom-in {
  transform: scale(.7);
  filter: blur(4px);
}

.reveal-zoom-in.visible {
  transform: scale(1);
  filter: blur();
}

/* Flip Up (3D rotation) */
.reveal-flip-up {
  transform: perspective(800px) rotateX(12deg) translateY(30px);
  transform-origin: top center;
}

.reveal-flip-up.visible {
  transform: perspective(800px) rotateX() translateY();
}

/* Flip Left (3D) */
.reveal-flip-left {
  transform: perspective(800px) rotateY(15deg) translateX(-30px);
  transform-origin: left center;
}

.reveal-flip-left.visible {
  transform: perspective(800px) rotateY() translateX();
}

/* Bounce Up */
.reveal-bounce-up {
  transform: translateY(60px);
  transition-timing-function: cubic-bezier(.34, 1.56, .64, 1);
}

.reveal-bounce-up.visible {
  transform: translateY();
}

/* --- Variações de Velocidade --- */
.reveal-slow {
  transition-duration: 1s, 1s, 1s;
}

.reveal-fast {
  transition-duration: .4s, .4s, .4s;
}

/* --- Stagger (atraso progressivo para grids) --- */
.reveal-stagger-1 { transition-delay: .05s; }
.reveal-stagger-2 { transition-delay: .10s; }
.reveal-stagger-3 { transition-delay: .15s; }
.reveal-stagger-4 { transition-delay: .20s; }
.reveal-stagger-5 { transition-delay: .25s; }
.reveal-stagger-6 { transition-delay: .30s; }
.reveal-stagger-7 { transition-delay: .35s; }
.reveal-stagger-8 { transition-delay: .40s; }

/* --- Hero Parallax Container --- */
.parallax-hero {
  overflow: hidden;
}

.parallax-hero-bg {
  transform: translateZ();
  transition: transform .1s linear;
  will-change: transform;
}

/* --- Counter Animation --- */
.counter-value {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* --- Image Reveal (com máscara) --- */
.reveal-image {
  clip-path: inset(  100% );
  transition: clip-path .9s cubic-bezier(.16, 1, .3, 1);
}

.reveal-image.visible {
  clip-path: inset(   );
}

/* --- Shimmer / Glow Effect ao Revelar --- */
.reveal-shimmer {
  position: relative;
  overflow: hidden;
}

.reveal-shimmer::after {
  content: '';
  position: absolute;
  inset: ;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, .15),
    transparent
  );
  transform: translateX(-100%);
  transition: transform s;
}

.reveal-shimmer.visible::after {
  transform: translateX(100%);
  transition: transform .8s cubic-bezier(.16, 1, .3, 1) .3s;
}

/* --- Preservar Compatibilidade com reveal-on-scroll antigo --- */
.reveal-on-scroll {
  opacity: ;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
}

.reveal-on-scroll.visible {
  opacity: 1;
  transform: translateY();
}

/* Line clamp utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}/*
 * Litoral Sul Pré-Moldados - Stylesheet Compilado (CSS3)
 * Design System Tokens & Motion Graphics
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Montserrat:wght@600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');

:root {
  --font-primary: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Montserrat', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --color-primary: #0D1729;
  --color-primary-glow: #1A2A4A;
  --color-accent: #EA580C;
  --color-accent-hover: #C2410C;
  --color-accent-red: #E52E2E;
  --color-accent-glow: #FF8A00;
  --color-success: #16A34A;
  --color-success-hover: #15803D;

  --color-background: #F8FAFC;
  --color-card: #FFFFFF;
  --color-secondary: #F1F5F9;
  --color-muted: #64748B;
  --color-border: #E2E8F0;

  --color-text: #0F172A;
  --color-text-muted: #475569;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  background-color: var(--color-background);
  color: var(--color-text);
  margin: 0;
  padding: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  margin: 0;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #0F172A;
}
::-webkit-scrollbar-thumb {
  background: #1E293B;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #EA580C;
}

/* ──────────────────────────────────────────────
   ANIMATIONS & KEYFRAMES
   ────────────────────────────────────────────── */
@keyframes float {
  %, 100% { transform: translateY(); }
  50% { transform: translateY(-6px); }
}

@keyframes pulseGlow {
  %, 100% { opacity: .4; }
  50% { opacity: .8; }
}

@keyframes bounceSlow {
  %, 100% { transform: translateY(); }
  50% { transform: translateY(-8px); }
}

@keyframes shimmer {
  % { background-position: -200% ; }
  100% { background-position: 200% ; }
}

@keyframes gradientBorder {
  % { border-image-source: linear-gradient(135deg, #EA580C, #F59EB, #EA580C); }
  50% { border-image-source: linear-gradient(135deg, #F59EB, #EA580C, #F59EB); }
  100% { border-image-source: linear-gradient(135deg, #EA580C, #F59EB, #EA580C); }
}

@keyframes countUp {
  from { opacity: ; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(); }
}

@keyframes gradientShift {
  % { background-position: % 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: % 50%; }
}

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

@keyframes pingSoft {
  % { transform: scale(1); opacity: .6; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: .6; }
}

.animate-bounce-slow {
  animation: bounceSlow 2s infinite ease-in-out;
}

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

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

.animate-shimmer {
  background: linear-gradient(90deg, transparent %, rgba(255,255,255,.08) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 2.5s infinite linear;
}

.animate-gradient-shift {
  background-size: 200% 200%;
  animation: gradientShift 6s ease infinite;
}

.animate-ping-soft {
  animation: pingSoft 2s ease-in-out infinite;
}

/* ──────────────────────────────────────────────
   MODAL & DRAWER TRANSITIONS
   ────────────────────────────────────────────── */
.modal-backdrop {
  background: rgba(13, 23, 41, .75);
  backdrop-filter: blur(8px);
  transition: opacity .3s ease;
}

.modal-content {
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
}

/* No Scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ──────────────────────────────────────────────
   CUSTOM RANGE INPUT
   ────────────────────────────────────────────── */
input[type="range"].custom-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: #CBD5E1;
  border-radius: 4px;
  outline: none;
}
input[type="range"].custom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #EA580C;
  cursor: pointer;
  box-shadow:  2px 6px rgba(234, 88, 12, .4);
  transition: transform .15s ease;
}
input[type="range"].custom-range::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

/* ──────────────────────────────────────────────
   🎬 MOTION SCROLL EFFECT — REVEAL ANIMATIONS
   ────────────────────────────────────────────── */

/* Base state: all animated elements start hidden */
.reveal,
.reveal-on-scroll {
  opacity: ;
  transition: all .85s cubic-bezier(.16, 1, .3, 1);
  will-change: transform, opacity;
}

/* Active state */
.reveal.visible,
.reveal-on-scroll.visible {
  opacity: 1;
  transform: translate(, ) scale(1) rotateX();
}

/* ── Animation Variants ── */

/* 1. FADE UP (default) — slide up + fade */
.reveal-fade-up {
  transform: translateY(40px);
}

/* 2. FADE DOWN — slide down + fade (for elements above viewport) */
.reveal-fade-down {
  transform: translateY(-40px);
}

/* 3. FADE LEFT — slide from left */
.reveal-fade-left {
  transform: translateX(-60px);
}

/* 4. FADE RIGHT — slide from right */
.reveal-fade-right {
  transform: translateX(60px);
}

/* 5. SCALE IN — subtle scale + fade */
.reveal-scale-in {
  transform: scale(.85);
}

/* 6. ZOOM IN — dramatic zoom + fade */
.reveal-zoom-in {
  transform: scale(.3);
  transition-duration: 1s;
}

/* 7. FLIP UP — 3D rotate + fade */
.reveal-flip-up {
  transform: perspective(800px) rotateX(15deg) translateY(30px);
  transform-origin: bottom center;
}

/* 8. REVEAL NONE — just fade (no transform) */
.reveal-none {
  transform: none;
}

/* ── Speed Variants ── */
.reveal-slow {
  transition-duration: 1.2s;
}
.reveal-fast {
  transition-duration: .5s;
}

/* ── Delay Modifiers (used by JS stagger) ── */
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }
.reveal-delay-5 { transition-delay: .5s; }
.reveal-delay-6 { transition-delay: .6s; }
.reveal-delay-7 { transition-delay: .7s; }
.reveal-delay-8 { transition-delay: .8s; }

/* ── Distance Modifiers ── */
.reveal-distance-sm.reveal-fade-up { transform: translateY(20px); }
.reveal-distance-sm.reveal-fade-left { transform: translateX(-30px); }
.reveal-distance-sm.reveal-fade-right { transform: translateX(30px); }
.reveal-distance-lg.reveal-fade-up { transform: translateY(80px); }
.reveal-distance-lg.reveal-fade-left { transform: translateX(-120px); }
.reveal-distance-lg.reveal-fade-right { transform: translateX(120px); }

/* ── Card Hover Enhancement ── */
.reveal-card {
  transition: all .5s cubic-bezier(.16, 1, .3, 1);
}
.reveal-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow:  20px 40px rgba(234, 88, 12, .15);
}

/* ── Counter Animation ── */
.counter-visible .counter-value {
  animation: countUp .6s ease forwards;
}

/* ── Parallax Wrapper ── */
.parallax-container {
  overflow: hidden;
  position: relative;
}
.parallax-bg {
  position: absolute;
  top: -20%;
  left: ;
  width: 100%;
  height: 140%;
  object-fit: cover;
  will-change: transform;
  transition: transform .1s linear;
}

/* ── Section Divider with Gradient ── */
.section-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, #EA580C, #F59EB, #EA580C, transparent);
  opacity: .3;
  animation: shimmer 3s infinite linear;
  background-size: 200% 100%;
}

/* ── Glow Reveal for Hero Highlights ── */
.reveal-glow {
  position: relative;
}
.reveal-glow::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #EA580C, #F59EB, #EA580C);
  opacity: ;
  z-index: -1;
  filter: blur(12px);
  transition: opacity .8s ease;
}
.reveal-glow.visible::after {
  opacity: .5;
}

/* ── Progress Bar Animation ── */
.progress-bar {
  width: ;
  transition: width 1.5s cubic-bezier(.16, 1, .3, 1);
}
.progress-bar.visible {
  /* width set via inline style or data attribute */
}

/* ── Image Reveal (Clip) ── */
.reveal-image {
  clip-path: inset(  100% );
  transition: clip-path 1s cubic-bezier(.16, 1, .3, 1);
}
.reveal-image.visible {
  clip-path: inset(   );
}

/* ── Border Glow Reveal ── */
.border-glow {
  border: 1px solid transparent;
  transition: border-color .6s ease, box-shadow .6s ease;
}
.border-glow.visible {
  border-color: rgba(234, 88, 12, .3);
  box-shadow:   30px rgba(234, 88, 12, .1);
}

/* ── Line clamp ── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Gradient text animation ── */
.gradient-text {
  background: linear-gradient(135deg, #EA580C, #F59EB, #D97706, #EA580C);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
}