/* CSS Variables and General Setup */
:root {
  --font-serif: "Cormorant Garamond", serif;
  --font-sans: "Inter", sans-serif;
  --font-script: "WindSong", cursive;
}

body {
  max-width: 100vw;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 
 * Sand Texture for UI Elements
 * Creates a beach sand effect using an SVG noise overlay and warm gradient
 */
.sand-texture {
  background: 
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.12'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #f7f1e3 0%, #ecdcca 100%);
}

/*
 * Hero Title - Fluid scale
 * "O Seu Refúgio" (13 chars) requires a smaller VW scaling to fit on one line.
 * ~13 chars * 0.55 width ratio * 12.5vw = ~90vw
 * clamp(min, preferred, max): 
 *   min  = 44px
 *   pref = 12.5vw 
 *   max  = 120px 
 */
.hero-title {
  font-size: clamp(44px, 12.5vw, 120px);
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.45),
    0 8px 32px rgba(0, 0, 0, 0.25);
}

/* Ensure the bold weight is applied to the specific font */
.hero-title span span {
  font-weight: 700;
}

/* 
 * The No-Line Philosophy:
 * We use deep diffused shadows instead of hard borders.
 */
.shadow-ambient {
  box-shadow: 0 40px 80px -12px rgba(26, 28, 27, 0.08);
}

/* 
 * Bento Grid Magic
 * Breaking away from standard tailwind cols
 */
.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
}

@media (min-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 420px;
  }
  
  .bento-master {
    grid-column: span 8;
    grid-row: span 2;
  }
  
  .bento-item-1 {
    grid-column: span 4;
    grid-row: span 1;
  }
  
  .bento-item-2 {
    grid-column: span 7;
    grid-row: span 1;
  }
  
  .bento-item-3 {
    grid-column: span 5;
    grid-row: span 1;
  }
}

/* 
 * Custom Cursor Active States 
 */
#custom-cursor.active {
  transform: translate(-50%, -50%) scale(3);
  background-color: rgba(232, 106, 51, 0.4); /* CTA color at 40% */
  mix-blend-mode: multiply;
  border: 1px solid rgba(232, 106, 51, 0.8);
}
#custom-cursor.hide {
  opacity: 0;
}

/* 
 * Atmosphere Carousel Styles
 */
.atmosphere-slide {
  transition: opacity 1.5s ease-in-out, transform 2s ease-out;
  transform: scale(1.05);
}
.atmosphere-slide.active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}
.atmosphere-dot.active {
  background-color: white;
  width: 24px;
}

/* 
 * Card Carousel Styles
 */
.card-slide {
  transition: opacity 1s ease-in-out;
}
.card-slide.active {
  opacity: 1;
  z-index: 1;
}
.card-dot.active {
  background-color: white;
  transform: scale(1.2);
}

/* 
 * Marquee Animation natively
 * Fallback to CSS animation if GSAP isn't needed, but we will use GSAP.
 * Here we just ensure flex constraints.
 */
.marquee-container {
  display: flex;
  width: max-content;
}

/*
 * Text Reveals Initial States
 */
.reveal-text, .reveal-title {
  display: block;
}

/* Fix for overlapping cards in Experience section */
@media (min-width: 1024px) {
  .bento-grid {
    grid-auto-rows: 420px;
  }
}

/* Selection Color Override */
::selection {
  background-color: #0A3641;
  color: #FCFCF9;
}