/* Teni Gardens City — base styles
   Palette and type per the client brief §2. Tailwind (CDN) handles
   layout utilities; this file carries tokens and bespoke details. */

:root {
  --tg-ink:        #0C0B09;   /* primary dark background */
  --tg-ink-2:      #14120E;   /* section-alt / card background */
  --tg-ink-3:      #1C1913;   /* raised surfaces */
  --tg-gold:       #C9A24B;   /* accent — rules, icons, links, primary CTA */
  --tg-gold-soft:  #E4C988;   /* eyebrows, italic taglines, hover */
  --tg-cream:      #F3EDE0;   /* body text + headings on dark */
  --tg-cream-dim:  rgba(243, 237, 224, 0.68);
  --tg-cream-faint:rgba(243, 237, 224, 0.42);
  --tg-line:       rgba(201, 162, 75, 0.35); /* gold at 35% */
}

html { scroll-behavior: smooth; }

body {
  background: var(--tg-ink);
  color: var(--tg-cream);
  font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
}

.font-display {
  font-family: 'Cormorant Garamond', ui-serif, Georgia, serif;
}

/* Eyebrow labels: small caps, letter-spaced (brief §2) */
.tg-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tg-gold-soft);
}

/* Dark gradient behind text sitting on photography — never a flat colour.
   Written as plain CSS (not Tailwind utilities) so the section's height,
   positioning, and overlay never depend on an external CDN script having
   loaded and run before the page paints. */
.tg-photo-section {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.tg-photo-section--sm { min-height: 60vh; }
.tg-photo-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.tg-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(12, 11, 9, 0.96) 0%,
      rgba(12, 11, 9, 0.82) 45%,
      rgba(12, 11, 9, 0.45) 100%);
}
/* Guarantees the text sits above the photo layer even if Tailwind's own
   .relative utility hasn't loaded yet — stacking-critical, not cosmetic. */
.tg-photo-content { position: relative; }
/* Plain static cover image behind the overlay — no parallax, no transform. */
.tg-photo-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* ── Scroll reveal ─────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .7s ease, transform .7s ease;
}

/* Visible keyboard focus */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--tg-gold);
  outline-offset: 3px;
}

textarea { resize: vertical; }

/* ── Hero motion (home only) ───────────────────────────────────────── */
@keyframes tg-hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tg-hero-in { opacity: 0; animation: tg-hero-in .7s ease-out forwards; }

.tg-cursor {
  display: inline-block;
  color: var(--tg-gold);
  animation: tg-cursor-blink .9s step-end infinite;
}
@keyframes tg-cursor-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ── Hero illustration + sun (home only) ───────────────────────────── */
.tg-illustration { color: var(--tg-gold); }

/* Gentle continuous float */
@keyframes tg-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-24px); }
}
.tg-float { animation: tg-float 2.8s ease-in-out infinite; }

/* Car: drives left to right along the ground line, looping */
@keyframes tg-car-drive {
  from { transform: translateX(-70px); }
  to   { transform: translateX(550px); }
}
.tg-car { animation: tg-car-drive 8s linear infinite; }

/* Sun: halo, rays and disc fade on and off together on one timing */
#tg-sun-halo { animation: tg-sun-halo 1.8s ease-in-out infinite; }
#tg-sun-rays { animation: tg-sun-rays 1.8s ease-in-out infinite; }
#tg-sun      { animation: tg-sun-body 1.8s ease-in-out infinite; }

@keyframes tg-sun-halo {
  0%, 100% { opacity: 0.1; }
  50%      { opacity: 0.9; }
}
@keyframes tg-sun-rays {
  0%, 100% { opacity: 0.12; }
  50%      { opacity: 1; }
}
@keyframes tg-sun-body {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}

/* Scattered flashing dots */
@keyframes tg-flash {
  0%, 100% { opacity: 0; }
  50%      { opacity: .8; }
}
.tg-flash-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: var(--tg-gold-soft);
  opacity: 0;
  animation-name: tg-flash;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* ── WhatsApp floating button ──────────────────────────────────────── */
.tg-whatsapp {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 9999px;
  background: #25D366;
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .7);
  transition: transform .2s ease;
}
.tg-whatsapp:hover, .tg-whatsapp:active { transform: scale(1.06); }

/* ── Cookie consent ────────────────────────────────────────────────── */
#tg-cookie {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 70;
  max-width: 34rem;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .tg-hero-in { opacity: 1; animation: none; }
  .tg-cursor { display: none; }
  .tg-whatsapp { transition: none; }
  .tg-float { animation: none; }
  .tg-car { animation: none; transform: translateX(200px); }
  #tg-sun-halo { animation: none; opacity: .5; }
  #tg-sun-rays { animation: none; opacity: .85; }
  #tg-sun { animation: none; opacity: 1; }
  .tg-flash-dot { display: none; }
}

/* ── Testimonials slider ───────────────────────────────────────────── */
.tg-slider-outer {
  overflow: hidden;
}
.tg-slider-track {
  display: flex;
  gap: 24px;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
/* Slide widths: 3 on desktop, 2 on tablet, 1 on mobile */
.tg-slide {
  flex: 0 0 calc((100% - 48px) / 3);
}
@media (max-width: 1023px) {
  .tg-slide {
    flex: 0 0 calc((100% - 24px) / 2);
  }
}
@media (max-width: 639px) {
  .tg-slide {
    flex: 0 0 100%;
  }
}

/* Controls row: arrows left, dots right */
.tg-slider-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tg-slider-arrows {
  display: flex;
  gap: 10px;
}
.tg-slider-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--tg-line);
  background: transparent;
  color: var(--tg-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 2px;
  transition: border-color 0.2s, color 0.2s;
  flex-shrink: 0;
}
.tg-slider-btn:hover {
  border-color: var(--tg-gold);
  color: var(--tg-gold);
}
.tg-slider-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.tg-slider-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tg-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tg-line, rgba(201,162,75,.22));
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.tg-slider-dot.active {
  background: var(--tg-gold);
  transform: scale(1.25);
}

/* ── Gallery sliders ────────────────────────────────────────────────── */
/* Gallery shows 4 on desktop, 3 on tablet, 1 on mobile */
.tg-gal-slide {
  flex: 0 0 calc((100% - 72px) / 4); /* 4 visible, 3 gaps of 24px */
  aspect-ratio: 4 / 3;
}
@media (max-width: 1023px) {
  .tg-gal-slide {
    flex: 0 0 calc((100% - 48px) / 3); /* 3 visible, 2 gaps */
  }
}
@media (max-width: 639px) {
  .tg-gal-slide {
    flex: 0 0 100%; /* 1 visible */
  }
}