/* B&B Villa Vale Flores — base styles */
:root {
  --bg: #f4f1ea;
  --bg-warm: #ebe5d6;
  --bg-deep: #e3dcc8;
  --ink: #1a1f1a;
  --ink-soft: #3a3f38;
  --ink-mute: #6b6e63;
  --rule: #d4ccb8;
  --green: #2d3a2e;
  --green-deep: #1f2a20;
  --terra: #8b6f47;
  --terra-deep: #6b5435;
  --gold: #c9a876;
  --gold-deep: #b08c5a;
  --cream: #faf7ee;
  --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* Typography */
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--terra);
  display: inline-block;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.05; letter-spacing: -0.015em; color: var(--green-deep); }

.h-display { font-size: clamp(48px, 7vw, 104px); font-weight: 300; line-height: 0.98; }
.h-title { font-size: clamp(36px, 4.5vw, 68px); font-weight: 300; }
.h-section { font-size: clamp(28px, 3.5vw, 48px); }

.lede { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; color: var(--ink-soft); font-weight: 300; }

/* Layout helpers */
.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 80px); }
.container-narrow { max-width: 1100px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 80px); }

section { padding: clamp(80px, 12vw, 160px) 0; position: relative; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 16px 28px;
  border-radius: 0;
  transition: all .25s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary { background: var(--green-deep); color: var(--cream); }
.btn-primary:hover { background: var(--terra-deep); }
.btn-ghost { background: transparent; color: var(--cream); border: 1px solid rgba(250,247,238,.5); }
.btn-ghost:hover { background: var(--cream); color: var(--green-deep); border-color: var(--cream); }
.btn-outline { background: transparent; color: var(--green-deep); border: 1px solid var(--green-deep); }
.btn-outline:hover { background: var(--green-deep); color: var(--cream); }

.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--green-deep); border-bottom: 1px solid currentColor; padding-bottom: 6px; transition: gap .2s ease; }
.link-arrow:hover { gap: 16px; }

/* Image placeholders — full hi-fi but no real photos */
.imgph {
  position: relative;
  background: linear-gradient(135deg, var(--bg-deep) 0%, var(--bg-warm) 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--terra-deep);
}
.imgph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 18px,
    rgba(139,111,71,0.06) 18px,
    rgba(139,111,71,0.06) 19px
  );
}
.imgph__label {
  position: relative;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terra-deep);
  background: rgba(244,241,234,0.85);
  padding: 6px 10px;
  border: 1px solid rgba(139,111,71,0.25);
  z-index: 1;
}

/* Themed placeholders by hue */
.imgph[data-tone="green"] { background: linear-gradient(135deg, #5a6e58 0%, #3e4f3f 100%); }
.imgph[data-tone="green"] .imgph__label { background: rgba(255,255,255,.85); color: var(--green-deep); border-color: rgba(0,0,0,.1); }
.imgph[data-tone="terra"] { background: linear-gradient(135deg, #b08568 0%, #8b6346 100%); }
.imgph[data-tone="terra"] .imgph__label { background: rgba(255,255,255,.9); color: var(--terra-deep); border-color: rgba(0,0,0,.1); }
.imgph[data-tone="gold"] { background: linear-gradient(135deg, #d9bd8f 0%, #b89665 100%); }
.imgph[data-tone="sky"] { background: linear-gradient(135deg, #8aa7b8 0%, #5d7a8c 100%); }
.imgph[data-tone="sky"] .imgph__label { background: rgba(255,255,255,.9); color: #2a4254; border-color: rgba(0,0,0,.1); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .9s ease, transform .9s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: .1s; opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: .2s; opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: .3s; opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: .4s; opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: .5s; opacity: 1; transform: none; }

/* Selection */
::selection { background: var(--green-deep); color: var(--cream); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-warm); }
::-webkit-scrollbar-thumb { background: var(--terra); }

/* Form controls */
input, select, textarea {
  font-family: var(--sans);
  font-size: 15px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  background: var(--cream);
  color: var(--ink);
  border-radius: 0;
  width: 100%;
  outline: none;
  transition: border-color .2s ease;
}
input:focus, select:focus, textarea:focus { border-color: var(--green-deep); }

label.field { display: flex; flex-direction: column; gap: 6px; }
label.field > .field-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; }

/* Mono caption */
.caption { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }

/* ============ Animations & polish ============ */

/* Smooth-scroll for anchor nav */
html { scroll-behavior: smooth; }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Keyframes */
@keyframes vvf-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes vvf-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vvf-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes vvf-pulse-soft {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}
@keyframes vvf-petal-fall {
  0% { transform: translateY(-10vh) rotate(0deg); opacity: 0; }
  10% { opacity: .7; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}

/* Hero — static image, no animation */
.hero__bg .photo {
  transform: none;
}

/* Hero scroll indicator */
.hero__scroll { animation: vvf-pulse-soft 2.4s ease-in-out infinite; }
.hero__scroll-line {
  display: block;
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, currentColor 0%, transparent 100%);
  margin-top: 8px;
  animation: vvf-scroll-line 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes vvf-scroll-line {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

/* Reveal — directional variants */
.reveal-left  { opacity: 0; transform: translateX(-32px); transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal-right { opacity: 0; transform: translateX(32px);  transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal-scale { opacity: 0; transform: scale(.96);         transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal-left.visible, .reveal-right.visible, .reveal-scale.visible { opacity: 1; transform: none; }

/* Image hover — gentle zoom inside any .photo wrapped by .photo-frame */
.photo-frame { overflow: hidden; }
.photo-frame .photo { transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .8s ease; }
.photo-frame:hover .photo { transform: scale(1.05); }

/* Room card — richer hover */
.room-card { transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease; }
.room-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -30px rgba(40,30,20,0.35); }
.room-card__media .photo { transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.room-card:hover .room-card__media .photo { transform: scale(1.06); }
.room-card__num { transition: transform .5s ease, color .3s ease; }
.room-card:hover .room-card__num { transform: translateY(-2px); }

/* Button micro-interaction */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  background-size: 220% 100%;
  background-position: 200% 0;
  pointer-events: none;
  transition: background-position .9s ease;
}
.btn:hover::after { background-position: -50% 0; }

/* Link arrow — subtle bounce on hover */
.link-arrow svg { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.link-arrow:hover svg { transform: translateX(6px); }

/* Stat numbers — fade-up when visible */
.intro__stat { transition: transform .5s ease; }
.intro__stat:hover { transform: translateY(-3px); }

/* Floating petal layer (purely decorative) */
.petal-layer {
  position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden;
}
.petal-layer .petal {
  position: absolute; top: -40px; width: 14px; height: 14px;
  background: radial-gradient(circle at 30% 30%, #f4d4c8 0%, #d8a89a 60%, transparent 75%);
  border-radius: 70% 30% 60% 40% / 50% 50% 50% 50%;
  opacity: .55;
  filter: blur(.3px);
  animation: vvf-petal-fall linear infinite;
}

/* Soft glow on scoring number */
.reviews__score-num {
  background: linear-gradient(120deg, var(--green-deep) 0%, #3a5a3a 50%, var(--green-deep) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: vvf-shimmer 6s linear infinite;
}

/* Section dividers — subtle ornament */
.section-ornament {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0 auto; max-width: 200px; padding: 32px 0;
  color: var(--ink-mute);
}
.section-ornament::before,
.section-ornament::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, var(--rule), transparent);
}
.section-ornament svg { width: 16px; height: 16px; opacity: .6; }

/* Image-frame fade on edges */
.photo-vignette { position: relative; }
.photo-vignette::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(20,18,16,0.18) 100%);
  pointer-events: none;
}

/* ============ Journal section ============ */
.journal { padding: 120px 0; background: var(--bg-warm); }
.journal__head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  align-items: end; margin-bottom: 60px;
}
.journal__title { margin-top: 16px; }
.journal__sub { max-width: 480px; }
@media (max-width: 768px) {
  .journal__head { grid-template-columns: 1fr; gap: 24px; }
}

.journal__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  margin-bottom: 40px;
}
@media (max-width: 980px) { .journal__grid { grid-template-columns: 1fr; } }

.journal-card {
  background: var(--cream);
  border: 1px solid var(--rule);
  display: flex; flex-direction: column;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
}
.journal-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -30px rgba(40,30,20,0.3); }

.journal-card__media {
  position: relative; display: block;
  aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--ink-mute);
}
.journal-card__media .photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.journal-card:hover .journal-card__media .photo { transform: scale(1.06); }

.journal-card__cat {
  position: absolute; top: 16px; left: 16px;
  background: var(--cream); padding: 6px 12px;
  letter-spacing: .12em;
}

.journal-card__body { padding: 28px; display: flex; flex-direction: column; flex: 1; gap: 12px; }
.journal-card__meta { display: flex; align-items: center; gap: 8px; color: var(--ink-mute); }
.journal-card__sep { opacity: .5; }
.journal-card__title { font-size: 22px; line-height: 1.3; margin: 4px 0 8px; }
.journal-card__title a { color: inherit; text-decoration: none; }
.journal-card__title a:hover { color: var(--green-deep); }
.journal-card__excerpt { color: var(--ink-soft); line-height: 1.6; font-size: 15px; flex: 1; margin-bottom: 12px; }

.journal__foot { text-align: center; margin-top: 8px; padding-top: 32px; border-top: 1px solid var(--rule); }