/* ═══════════════════════════════════════════════
   Thracian Suites — Main Stylesheet
   ═══════════════════════════════════════════════ */

/* Hero glass panels */
.hero-glass {
  background: rgba(10, 34, 51, 0.35);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(217, 237, 245, 0.08);
  box-shadow: 0 8px 40px -12px rgba(10, 34, 51, 0.45);
}

/* (hero-stats removed — stats moved to standalone section) */

/* SVG noise filter for grain texture */
.grain-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

/* Smooth scroll — only when the user has not requested reduced motion */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Scroll indicator: a single 28px hairline that fades through itself,
   replacing the dated bouncing-dot. Respects reduced-motion. */
.scroll-hairline {
  position: relative;
  width: 1px;
  height: 36px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0.05)
  );
  overflow: hidden;
}
.scroll-hairline::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0.85),
    transparent
  );
  transform: translateY(-100%);
  animation: scroll-hairline-flow 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hairline::after {
    animation: none;
  }
}
@keyframes scroll-hairline-flow {
  0% {
    transform: translateY(-100%);
  }
  60%,
  100% {
    transform: translateY(100%);
  }
}

/* Hero parallax */
.hero-parallax {
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
@media (max-width: 768px) {
  .hero-parallax {
    background-attachment: scroll;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0a2233;
}
::-webkit-scrollbar-thumb {
  background: #3ea3ca;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #1e7fa8;
}

/* Animated underline */
.link-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.link-underline:hover {
  background-size: 100% 1px;
}

/* Gallery image hover */
.gallery-card {
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow:
    0 24px 60px -12px rgba(10, 34, 51, 0.35),
    0 8px 20px -6px rgba(30, 127, 168, 0.15);
}

/* Reveal on scroll — a quiet settle: a short rise plus a whisper of
   scale, on a deep ease-out so elements arrive and stop. No slide,
   no bounce. Transform + opacity only. */
.reveal {
  opacity: 0;
  transform: translateY(20px) scale(0.992);
  will-change: opacity, transform;
  transition:
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Staggered children — eyebrow, then headline, then intro (and card
   rows the same way), each following the last by a soft beat. */
.reveal-children > * {
  opacity: 0;
  transform: translateY(16px) scale(0.992);
  will-change: opacity, transform;
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-children.visible > * {
  opacity: 1;
  transform: none;
  will-change: auto;
}
.reveal-children.visible > *:nth-child(1) {
  transition-delay: 0.05s;
}
.reveal-children.visible > *:nth-child(2) {
  transition-delay: 0.17s;
}
.reveal-children.visible > *:nth-child(3) {
  transition-delay: 0.29s;
}
.reveal-children.visible > *:nth-child(4) {
  transition-delay: 0.41s;
}
.reveal-children.visible > *:nth-child(5) {
  transition-delay: 0.53s;
}
.reveal-children.visible > *:nth-child(6) {
  transition-delay: 0.65s;
}

/* Accessibility: honour reduced-motion — reveal everything at rest. */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-children > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Nav link underline effect */
.nav-link {
  position: relative;
  padding: 4px 0;
}
.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #3ea3ca, #7cc2de);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-link:hover::after {
  width: 100%;
}

/* Image overlay treatment */
.img-treatment {
  position: relative;
}
.img-treatment::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(14, 63, 106, 0.06),
    rgba(212, 151, 72, 0.04)
  );
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Button glow */
.btn-glow {
  box-shadow:
    0 4px 16px -4px rgba(30, 127, 168, 0.4),
    0 2px 6px -2px rgba(30, 127, 168, 0.2);
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.3s ease;
}
.btn-glow:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 30px -6px rgba(30, 127, 168, 0.55),
    0 4px 12px -4px rgba(30, 127, 168, 0.3);
}
.btn-glow:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px -2px rgba(30, 127, 168, 0.4);
}

/* Lightbox */
.lightbox {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.lightbox.active {
  opacity: 1;
  pointer-events: all;
}
.lightbox-figure {
  transform: scale(0.96);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.lightbox.active .lightbox-figure {
  transform: scale(1);
}

/* Caption overlay sits on the image itself, fades from transparent
   at the top to a near-black gradient at the bottom so the text
   reads on any photo. */
.lightbox-caption {
  background: linear-gradient(
    to top,
    rgba(10, 34, 51, 0.85) 0%,
    rgba(10, 34, 51, 0.55) 40%,
    rgba(10, 34, 51, 0) 100%
  );
}

/* Feature card */
.feature-icon {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.feature-card:hover .feature-icon {
  transform: scale(1.08) rotate(-2deg);
}
.feature-card .card-overlay {
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.feature-card:hover .card-overlay {
  opacity: 0;
}

/* Navbar scroll state */
.navbar-scrolled {
  background: rgba(17, 59, 90, 0.92) !important;
  backdrop-filter: blur(16px);
  box-shadow: 0 4px 30px -8px rgba(10, 34, 51, 0.45);
}

/* Mobile menu */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-menu.open {
  transform: translateX(0);
}

/* ═══════════════════════════════════════════════
   Navbar
   ═══════════════════════════════════════════════ */
/* Anchor jumps must clear the 80px fixed navbar (plus breathing room)
   so section headings aren't hidden under it. */
section[id],
[id="flatmanager"] {
  scroll-margin-top: 96px;
}

#navbar {
  background: rgb(3 73 122 / 90%);
  backdrop-filter: blur(12px);
  /* spring-style ease so reveal feels lively, not linear */
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.5s ease, box-shadow 0.5s ease,
    backdrop-filter 0.5s ease;
  will-change: transform;
}

/* Auto-hide: slid fully out of view when scrolling down */
#navbar.nav-hidden {
  transform: translateY(-100%);
}

/* Subtle elevation once the page has scrolled past the top */
#navbar.nav-elevated {
  box-shadow: 0 10px 30px -12px rgba(3, 30, 50, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  #navbar {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }
  #navbar.nav-hidden {
    transform: none;
  }
}

.nav-bar-links {
  gap: clamp(0.25rem, 0.7vw, 0.9rem);
}

.nav-link,
.nav-btn {
  font-size: clamp(0.75rem, 1.2vw, 0.875rem);
}
/* Tighten link tracking so the widest language (BG/RO) sits
   comfortably without crowding the logo lockup or the CTA. */
.nav-link {
  letter-spacing: -0.01em;
}

.logo-text {
  font-size: clamp(0.875rem, 1.5vw, 1.125rem);
}

.logo-sub {
  font-size: clamp(8px, 1vw, 10px);
  display: none;
}
/* Show the logo subtitle only where there is real room for it:
   below the desktop nav (lockup alone) and again on wide viewports
   where the full 7-link nav + switcher + CTA still leaves space.
   Between 1024–1279px the desktop nav is densest, so the subtitle
   stays hidden there to keep the header uncramped in every language. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .logo-sub {
    display: block;
  }
}
@media (min-width: 1280px) {
  .logo-sub {
    display: block;
  }
}

/* ═══════════════════════════════════════════════
   Typography — fluid sizes
   ═══════════════════════════════════════════════ */
.text-hero {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  letter-spacing: -0.03em;
}

.text-section-tagline {
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  letter-spacing: -0.03em;
}

/* Cliffside quote. Two deliberate lines: line 1 holds both first
   sentences, line 2 holds the whole closing sentence on its own.
   Width is capped in ch so line 1 never wraps mid-phrase on its own
   — the line break is structural (separate spans), not reflow.
   On phones each span is a centred block with balanced wrapping so
   a long sentence never leaves an ugly orphan word. */
.text-quote {
  font-size: clamp(1.75rem, 5.5vw, 3.5rem);
  letter-spacing: -0.025em;
  line-height: 1.18;
  text-align: center;
}
.text-quote .quote-l1,
.text-quote .quote-l2 {
  display: block;
  margin-inline: auto;
  text-wrap: balance;
}
/* Line 1 is the longest — cap its width just past its natural
   length so it never wraps on its own on desktop. */
.text-quote .quote-l1 {
  max-width: 36ch;
}
.text-quote .quote-l2 {
  max-width: 28ch;
  color: rgba(255, 255, 255, 0.82);
}
@media (max-width: 640px) {
  .text-quote {
    font-size: clamp(1.6rem, 8vw, 2.25rem);
    line-height: 1.22;
  }
  /* On narrow screens let each sentence use the full column and
     balance its own wrapping rather than forcing the desktop ch cap,
     which would create lopsided short lines. */
  .text-quote .quote-l1 {
    max-width: 18ch;
  }
  .text-quote .quote-l2 {
    max-width: 100%;
  }
}

/* Body sizes are floored at 18px on mobile — the audience skews
   to ages where presbyopia is common, and most traffic arrives
   on phone in suboptimal light. */
.text-body-lg {
  font-size: clamp(1.125rem, 1.6vw, 1.25rem);
  line-height: 1.7;
}

.text-body-sm {
  font-size: clamp(1.0625rem, 1.3vw, 1.0625rem);
  line-height: 1.7;
}

.lh-relaxed {
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════
   Background decorations
   ═══════════════════════════════════════════════ */
.bg-hero-transparent {
  background: transparent;
}
.bg-hero-vignette {
  background: radial-gradient(
    ellipse at 30% 80%,
    rgba(10, 34, 51, 0.8),
    transparent 70%
  );
}

/* Section atmosphere — six clearly distinct dark tones forming a
   deliberate journey down the page. Each section shifts BOTH
   lightness AND hue (deep navy → petrol/teal → near-black blue →
   slate → warm-shadowed → amber-petrol → deepest blue). Hue shift
   on a dark ground reads stronger than lightness alone, so sections
   read as clearly different without going light or "busy". The glow
   is a single dominant hue per section at a visible (not loud)
   opacity. Variant C, dialled up for clear separation. */

.bg-glow-resort {
  background:
    linear-gradient(180deg, #0a2336 0%, #0c2c44 100%),
    radial-gradient(
      ellipse 95% 75% at 18% 18%,
      rgba(30, 127, 168, 0.30),
      transparent 60%
    );
}

.bg-glow-apartment {
  background:
    linear-gradient(180deg, #0c2c44 0%, #123a47 50%, #0e3140 100%),
    radial-gradient(
      ellipse 90% 80% at 78% 26%,
      rgba(221, 173, 106, 0.24),
      transparent 58%
    );
}

.bg-glow-gallery {
  background:
    linear-gradient(180deg, #071a29 0%, #0a2334 55%, #071a29 100%),
    radial-gradient(
      ellipse 100% 65% at 50% 0%,
      rgba(62, 163, 202, 0.32),
      transparent 58%
    );
}

.bg-glow-amenities {
  background:
    linear-gradient(180deg, #0d3043 0%, #15414e 50%, #0d3043 100%),
    radial-gradient(
      ellipse 85% 75% at 25% 58%,
      rgba(30, 127, 168, 0.26),
      transparent 58%
    );
}

.bg-glow-flatmanager {
  background:
    linear-gradient(180deg, #0e2c3e 0%, #143845 50%, #0f2e3c 100%),
    radial-gradient(
      ellipse 90% 78% at 72% 42%,
      rgba(221, 173, 106, 0.30),
      transparent 58%
    );
}

/* Deep navy so the calendar cards (which sit at ~ocean-900) lift
   clearly off the section instead of blending in. Much darker than
   neighbours on purpose — this is the section that needs contrast
   between background and the embedded booking widget. */
.bg-glow-booking {
  background:
    linear-gradient(180deg, #061320 0%, #08192a 50%, #05101c 100%),
    radial-gradient(
      ellipse 95% 82% at 28% 46%,
      rgba(221, 173, 106, 0.14),
      transparent 62%
    );
}

.bg-glow-contact {
  background:
    linear-gradient(180deg, #0a2235 0%, #06141f 100%),
    radial-gradient(
      ellipse 110% 70% at 50% 100%,
      rgba(20, 79, 110, 0.45),
      transparent 56%
    );
}

/* ═══════════════════════════════════════════════
   Carousel scrollbar
   ═══════════════════════════════════════════════ */
.carousel-scroll {
  scrollbar-width: thin;
  scrollbar-color: #144f6e #0f334a;
}

/* ═══════════════════════════════════════════════
   Map iframe
   ═══════════════════════════════════════════════ */
.map-iframe {
  border: 0;
  filter: saturate(0.7) brightness(0.85) contrast(1.1);
}

/* =============================================
   Guests dropdown — give the native <select> a
   subtle chevron and remove the default arrow so
   it matches the rest of the booking sidebar.
   ============================================= */
#guestsSelect {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%237cc2de' stroke-width='1.5' stroke-linecap='round' d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 10px 6px;
  padding-right: 16px;
}

/* ═══════════════════════════════════════════════
   Reduced motion — global guard
   Honors the user's OS-level motion preference. All
   transitions, animations, and scroll-driven reveals
   collapse to an instant, static state. Reveal content
   stays visible (no hidden-by-animation trap).
   ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* The IntersectionObserver reveal pattern starts at
     opacity:0 / translateY. Without motion we must show
     content immediately rather than leave it hidden. */
  .reveal,
  .reveal-children > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-parallax {
    background-attachment: scroll !important;
  }
}

/* Language switcher — active states */
.lang-opt[aria-current="true"] { color: #fff; }
.lang-opt[aria-current="true"] .lang-check { display: inline; }
.lang-seg[aria-current="true"] { color: #b3dbed; border-bottom: 2px solid #3ea3ca; }