/* Riverston Water Front Villa – Custom styles for beauty & polish */

:root {
  --brand-50:#f0fdf8; --brand-100:#ccfbf1; --brand-200:#99f6e4; --brand-300:#5eead4; --brand-400:#2dd4bf;
  --brand-500:#14b8a6; --brand-600:#0d9488; --brand-700:#0f766e; --brand-800:#115e59; --brand-900:#134e4a;
}

html { scroll-behavior: smooth; }

/* Glassy header */
[data-header] {
  backdrop-filter: blur(8px);
}

/* Header glass with subtle tint to avoid white-on-white */
.header-glass {
  position: relative;
  /* Windows 7 Aero-like tinted glass (more transparent) */
  background:
    linear-gradient(180deg, rgba(18,28,34,.45) 0%, rgba(10,18,24,.32) 55%, rgba(18,28,34,.45) 100%),
    radial-gradient(120% 180% at 0% 0%, rgba(102,252,241,.08), transparent 60%),
    radial-gradient(120% 180% at 100% 0%, rgba(59,130,246,.10), transparent 60%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 20px 60px -50px rgba(255,255,255,.45), inset 0 -20px 60px -50px rgba(255,255,255,.28), 0 24px 60px -30px rgba(2,6,23,.5);
}
.header-glass.is-sticky {
  /* Increase opacity when header sticks to top */
  background:
    linear-gradient(180deg, rgba(18,28,34,.68) 0%, rgba(10,18,24,.54) 55%, rgba(18,28,34,.68) 100%),
    radial-gradient(120% 180% at 0% 0%, rgba(102,252,241,.12), transparent 60%),
    radial-gradient(120% 180% at 100% 0%, rgba(59,130,246,.14), transparent 60%);
  box-shadow: inset 0 20px 60px -50px rgba(255,255,255,.6), inset 0 -20px 60px -50px rgba(255,255,255,.38), 0 28px 64px -32px rgba(2,6,23,.6);
}
.header-glass:before,
.header-glass:after {
  content: "";
  position: absolute; left:0; right:0; height:1px; pointer-events:none;
}
.header-glass:before { top:0; background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.32)); }
.header-glass:after { bottom:0; background: linear-gradient(90deg, rgba(255,255,255,.32), rgba(255,255,255,.18)); }
.header-glass.is-sticky:before { background: linear-gradient(90deg, rgba(255,255,255,.75), rgba(255,255,255,.45)); }
.header-glass.is-sticky:after { background: linear-gradient(90deg, rgba(255,255,255,.45), rgba(255,255,255,.28)); }

/* Brand banner above the header */
.top-brand { position: fixed; top:0; left:0; right:0; z-index:60; height:150px; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.brand-name { pointer-events:auto; font-family: 'Yesteryear', 'Lobster', 'Mea Culpa', 'Great Vibes', cursive; font-size: clamp(34px, 7vw, 72px); line-height: 1; color: #ffffff; text-shadow: 0 3px 12px rgba(0,0,0,.35), 0 1px 0 rgba(0,0,0,.2); }
/* Smaller brand for mobile header */
.brand-name-mobile { font-family: 'Yesteryear', 'Lobster', 'Mea Culpa', 'Great Vibes', cursive; font-size: clamp(24px, 6vw, 34px); line-height: 1; color: #ffffff; text-shadow: 0 3px 12px rgba(0,0,0,.35), 0 1px 0 rgba(0,0,0,.2); }
.header-offset { top: 150px; }
@media (max-width:639px){ .top-brand { height:150px; } .header-offset { top:150px; } }

/* Mobile: hide top banner and pin header to very top */
@media (max-width: 767px){
  .top-brand{ display:none !important; height:0 !important; opacity:0 !important; }
}

/* Brand hide-on-scroll behavior */
.top-brand { transition: height .35s ease, opacity .35s ease, transform .35s ease; }
.top-brand.is-hidden { height:0 !important; opacity:0; transform: translateY(-24px); }

/* Gradient text utility */
.gradient-text {
  background: linear-gradient(90deg, var(--brand-400), var(--brand-700));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Elegant font helpers to mirror reference */
.font-decor { font-family: 'Cinzel Decorative', 'Playfair Display', serif; }
.font-elegant { font-family: 'Cormorant Garamond', 'Times New Roman', serif; }
.font-script { font-family: 'Great Vibes', cursive; }

/* Dark translucent nav like resort reference */
.nav-dark {
  background: linear-gradient(180deg, rgba(18,28,34,.42), rgba(12,22,28,.42));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px rgba(255,255,255,.55), inset 0 -1px rgba(255,255,255,.25), 0 10px 30px -12px rgba(2,6,23,.5);
}
.nav-link { color: rgba(255,255,255,.85); }
.nav-link:hover { color: #fff; }

/* Monogram badge */
.monogram { width: 44px; height: 44px; border-radius: 9999px; display: grid; place-items: center; border:1px solid rgba(255,255,255,.25); color:#fff; font-size:14px; letter-spacing:.12em; }
.monogram span { transform: translateY(1px); }

/* Buttons */
.btn-gradient {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-400));
  color: #fff; box-shadow: 0 10px 25px -10px rgba(20,184,166,.7);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-gradient:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 32px -10px rgba(20,184,166,.8); }

/* Elevated cards */
.card-elevated { box-shadow: 0 10px 30px -12px rgba(2,6,23,.25); transition: transform .25s ease, box-shadow .25s ease; }
.card-elevated:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -14px rgba(2,6,23,.35); }

/* Orbs / blobs for subtle background flair */
.orb { position: absolute; filter: blur(40px); opacity: .5; pointer-events: none; }
.orb--brand { background: radial-gradient( circle at 30% 30%, var(--brand-400), transparent 60% ); }
.orb--emerald { background: radial-gradient( circle at 30% 30%, #34d399, transparent 60% ); }

/* Waves (section separators) */
.wave-bottom { position: relative; }
.wave-bottom:after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:80px; background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 80" preserveAspectRatio="none"><path fill="%23f8fafc" d="M0,32L48,32C96,32,192,32,288,42.7C384,53,480,75,576,74.7C672,75,768,53,864,58.7C960,64,1056,96,1152,106.7C1248,117,1344,107,1392,101.3L1440,96L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"/></svg>') center/cover no-repeat; }

/* Noise overlay for subtle texture */
.noise:before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.035; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity=".35"/></svg>'); }

/* Masonry gallery using CSS columns */
.masonry { column-gap: 1rem; }
@media (min-width:640px){ .masonry { columns: 2; } }
@media (min-width:1024px){ .masonry { columns: 3; } }
.masonry-item { break-inside: avoid; margin-bottom: 1rem; border-radius: 1rem; overflow: hidden; }
.masonry-item img { transition: transform .4s ease; }
.masonry-item:hover img { transform: scale(1.05); }

/* Uniform grid gallery with filled thumbnails */
.gallery-grid { display:grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery-card { border-radius: 1rem; overflow: hidden; background: rgba(255,255,255,.5); box-shadow: 0 10px 30px -12px rgba(2,6,23,.15); }
.gallery-thumb { width: 100%; aspect-ratio: 4/3; background: #e2e8f0; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; display:block; }
.gallery-card:hover .gallery-thumb img { transform: scale(1.05); }

/* Booking bar */
.booking-bar { backdrop-filter: blur(12px); background: rgba(12,18,16,.55); color:#fff; box-shadow: 0 20px 40px -20px rgba(2,6,23,.55); }
.booking-pill { border:1px solid rgba(255,255,255,.15); border-radius: 5px; }
.booking-label { color: rgba(255,255,255,.78); font-size:.75rem; }
.booking-input { background: rgba(255,255,255,.95); color:#0f172a; height: 48px; padding: 0 12px; border:1px solid rgba(255,255,255,.3); border-radius: 5px; box-shadow: 0 1px 2px rgba(2,6,23,.2) inset, 0 6px 18px -10px rgba(2,6,23,.35); appearance: none; }

/* Unified form fields */
.form-control { height: 48px; padding: 0 14px; border: 1px solid #cbd5e1; border-radius: 0.75rem; background: #ffffff; color:#0f172a; box-shadow: 0 1px 2px rgba(2,6,23,.06); transition: box-shadow .2s ease, border-color .2s ease; }
.form-control:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(20,184,166,.15), 0 1px 2px rgba(2,6,23,.10); }
.textarea-control { min-height: 120px; padding: 12px 14px; border: 1px solid #cbd5e1; border-radius: 0.75rem; background: #ffffff; color:#0f172a; box-shadow: 0 1px 2px rgba(2,6,23,.06); transition: box-shadow .2s ease, border-color .2s ease; }
.textarea-control:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(20,184,166,.15), 0 1px 2px rgba(2,6,23,.10); }

/* Animations */
@keyframes floaty { 0%{transform:translateY(0)} 50%{transform:translateY(-6px)} 100%{transform:translateY(0)} }
.floaty { animation: floaty 6s ease-in-out infinite; }

/* Parallax attribute helper */
[data-parallax] { will-change: transform; }