/* =====================================================
   Recanto dos Moinhos — Design Enhancement Layer
   Animations, effects, and conversion-focused styles
   ===================================================== */

/* ── Keyframes ── */
@keyframes fadeInUp      { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInLeft    { from { opacity:0; transform:translateX(-40px); } to { opacity:1; transform:translateX(0); } }
@keyframes fadeInRight   { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }
@keyframes fadeIn        { from { opacity:0; } to { opacity:1; } }
@keyframes scaleIn       { from { opacity:0; transform:scale(0.9); } to { opacity:1; transform:scale(1); } }
@keyframes pulse-ring    { 0%,100% { box-shadow:0 0 0 0 rgba(122,88,31,.4); } 50% { box-shadow:0 0 0 16px rgba(122,88,31,0); } }
@keyframes float         { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes shimmer       { 0% { background-position:-400px 0; } 100% { background-position:400px 0; } }
@keyframes spin-slow     { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes bounce-y      { 0%,100% { transform:translateY(0); } 50% { transform:translateY(10px); } }
@keyframes slide-up      { from { transform:translateY(100%); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes slide-down    { from { transform:translateY(-100%); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes ticker        { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
@keyframes gradient-shift { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
@keyframes ping-dot      { 0%  { transform:scale(1);   opacity:1; }
                           75%,100% { transform:scale(2); opacity:0; } }

/* ── Scroll Reveal ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal].revealed {
  opacity: 1;
  transform: none;
}

/* ── Stagger helpers ── */
[data-delay="100"] { transition-delay: .1s; }
[data-delay="200"] { transition-delay: .2s; }
[data-delay="300"] { transition-delay: .3s; }
[data-delay="400"] { transition-delay: .4s; }
[data-delay="500"] { transition-delay: .5s; }
[data-delay="600"] { transition-delay: .6s; }

/* ── Nav scroll effect ── */
#site-nav { transition: padding .4s ease, backdrop-filter .4s; }
#site-nav.scrolled { padding-top:.75rem; padding-bottom:.75rem; }

/* ── Hero ── */
.hero-headline span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp .8s cubic-bezier(.16,1,.3,1) forwards;
}

.hero-scroll-indicator {
  animation: bounce-y 1.8s ease-in-out infinite;
}

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

/* ── Stats counter bar ── */
.stat-number {
  font-variant-numeric: tabular-nums;
  transition: all .3s;
}

/* ── CTA Button pulse ── */
.btn-pulse {
  animation: pulse-ring 2.4s ease-in-out infinite;
}

/* ── Image cards ── */
.img-zoom img {
  transition: transform 1.2s cubic-bezier(.16,1,.3,1);
}
.img-zoom:hover img { transform: scale(1.07); }

/* ── Room card hover ── */
.room-card-hover {
  transition: box-shadow .5s, transform .5s;
}
.room-card-hover:hover {
  box-shadow: 0 32px 80px rgba(60,0,7,.15);
  transform: translateY(-4px);
}

/* ── Parallax hero bg ── */
.parallax-bg {
  will-change: transform;
  transform: scale(1.1);
}

/* ── Gradient text ── */
.gradient-text {
  background: linear-gradient(135deg, #7a581f 0%, #c49a3c 50%, #7a581f 100%);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 4s ease infinite;
}

/* ── Urgency badge ── */
.urgency-pulse::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  animation: ping-dot 1.5s ease-out infinite;
  background: rgba(200,0,7,.3);
}

/* ── Social proof toast ── */
.sp-toast {
  animation: slide-up .5s cubic-bezier(.16,1,.3,1) forwards;
  pointer-events: none;
}
.sp-toast.hiding {
  animation: slide-down .4s ease-in forwards;
}

/* ── Countdown ── */
.countdown-digit {
  font-variant-numeric: tabular-nums;
  transition: all .15s;
}

/* ── Ticker tape ── */
.ticker-inner {
  display: flex;
  width: max-content;
  animation: ticker 20s linear infinite;
}

/* ── Trust badge ── */
.trust-badge {
  transition: filter .3s, transform .3s;
}
.trust-badge:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

/* ── Progress bar ── */
.funnel-bar-fill {
  transition: width 1s cubic-bezier(.16,1,.3,1);
}

/* ── Card flip on hover (extras) ── */
.extra-add-btn {
  transition: all .3s cubic-bezier(.16,1,.3,1);
  position: relative;
  overflow: hidden;
}
.extra-add-btn::after {
  content: '✓ Adicionado';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8d08b;
  color: #1c1c16;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.extra-add-btn.added::after { transform: translateY(0); }

/* ── Checkout input focus line ── */
.input-focus-line {
  position: relative;
}
.input-focus-line::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: #7a581f;
  transition: width .4s cubic-bezier(.16,1,.3,1);
}
.input-focus-line:focus-within::after { width: 100%; }

/* ── Section divider wave ── */
.wave-divider svg { display: block; }

/* ── Glassmorphism card ── */
.glass-card {
  background: rgba(253,249,239,.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.4);
}

/* ── Star rating fill ── */
.star-fill { color: #c49a3c; }

/* ── Form inputs (checkout / funnel) ── */
.input-heritage {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(28,28,22,.2);
  padding: .75rem 0;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: .9375rem;
  color: #1c1c16;
  outline: none;
  transition: border-color .3s;
}
.input-heritage:focus { border-color: #7a581f; }
.input-heritage::placeholder { color: rgba(28,28,22,.35); }
.input-heritage option { color: #1c1c16; }

.input-label {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: #7a581f;
  margin-bottom: .5rem;
}

/* ── Animate-skeleton shimmer ── */
.animate-skeleton {
  background: linear-gradient(90deg, #f3ede0 25%, #ece8de 50%, #f3ede0 75%);
  background-size: 400px 100%;
  animation: shimmer 1.4s infinite;
}

/* ── Social proof toasts container ── */
#sp-toasts {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  pointer-events: none;
}

/* ── Availability bar (scarcity) ── */
.availability-bar {
  height: 4px;
  background: #ece8de;
  border-radius: 2px;
  overflow: hidden;
}
.availability-fill {
  height: 100%;
  background: linear-gradient(90deg, #7a581f, #c49a3c);
  border-radius: 2px;
  transition: width 1.5s cubic-bezier(.16,1,.3,1);
}