/* =========================================================
   Open Voyage — site.css (clean, Tailwind-friendly)

   Parallax-enabled (requires /assets/site.js)
   site.js sets:
     --parallaxBg  on :root   (global subtle drift)
     --pillarPan   on .pageBg (pillar.webp pan)

   Home: Light “jungle top / ocean bottom” split background
   Tours: Lighter, calmer alternate background via body[data-page="tours"]
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --text: #0b1f1e;

  /* Base page tone (fallback if pseudo-element fails) */
  --base: #fbf7ef;
  --footer: #f3ecdf;

  /* Home split tones */
  --homeJungle: rgba(36, 124, 92, .18);
  --homeJungleSoft: rgba(36, 124, 92, .10);
  --homeOcean: rgba(22, 109, 140, .16);
  --homeOceanSoft: rgba(22, 109, 140, .10);
  --homeGlow1: rgba(255,255,255,.60);
  --homeGlow2: rgba(255,255,255,.35);

  /* Tours tones */
  --toursTop: #f8f9f7;
  --toursBottom: #f2f4f2;

  /* Parallax input (set by site.js) */
  --parallaxBg: 0px;

  /* Pillar framing: lower = show more TOP, higher = show more BOTTOM */
  --pillarBasePos: 82%;
}

/* ---------- Base ---------- */
*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Default background fallback (real visual is body::before) */
  background: var(--base);

  /* Keep our fixed background behind reliably */
  position: relative;
  isolation: isolate;
}

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

a{ color: inherit; text-decoration: none; }
a:hover{ opacity: .94; }

:focus-visible{
  outline: 2px solid rgba(0,168,150,.55);
  outline-offset: 3px;
  border-radius: 12px;
}

/* Cursor hygiene */
a,
button,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"],
label,
select{ cursor: pointer; }
input,
textarea{ cursor: text; }

/* =========================================================
   GLOBAL BACKGROUND LAYER
   - Home default renders here
   - Tours overrides via body[data-page="tours"]::before
   ========================================================= */

body::before{
  content: "";
  position: fixed;
  inset: -18%;
  z-index: -1;
  pointer-events: none;

  /* HOME: top jungle / bottom ocean */
  background:
    radial-gradient(900px 520px at 14% 10%, var(--homeGlow1), transparent 60%),
    radial-gradient(900px 520px at 86% 18%, var(--homeGlow2), transparent 62%),

    /* TOP = jungle */
    linear-gradient(
      to bottom,
      var(--homeJungle) 0%,
      var(--homeJungleSoft) 34%,
      transparent 52%
    ),

    /* BOTTOM = ocean */
    linear-gradient(
      to bottom,
      transparent 48%,
      var(--homeOceanSoft) 62%,
      var(--homeOcean) 100%
    ),

    /* base sand wash */
    linear-gradient(180deg, rgba(251,247,239,.92), rgba(251,247,239,.98));

  transform: translate3d(0, calc(var(--parallaxBg) * -1), 0) scale(1.08);
  will-change: transform;
  backface-visibility: hidden;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  body::before{ transform: translate3d(0,0,0) scale(1.08) !important; }
}

/* =========================================================
   TOURS PAGE BACKGROUND OVERRIDES
   Requires: body[data-page="tours"]
   ========================================================= */

body[data-page="tours"]{
  background: var(--toursTop); /* fallback */
}

body[data-page="tours"]::before{
  background:
    radial-gradient(1000px 560px at 18% 6%, rgba(22, 109, 140, .10), transparent 62%),
    radial-gradient(900px 520px at 82% 12%, rgba(36, 124, 92, .08), transparent 64%),
    linear-gradient(180deg, var(--toursTop) 0%, var(--toursBottom) 100%);
}

/* =========================================================
   HOME “PILLAR” SECTION BACKGROUND + PARALLAX
   (This is only for the Home page section that uses .pageBg)
   ========================================================= */

.pageBg{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --pillarPan: 0px;
}

/* Moving photo layer */
.pageBg::before{
  content: "";
  position: absolute;
  inset: -26vh 0;
  z-index: 0;
  pointer-events: none;

  background: url("/assets/pillar.webp") center var(--pillarBasePos) / cover no-repeat;

  transform: translate3d(0, var(--pillarPan), 0);
  will-change: transform;
  backface-visibility: hidden;
}

/* Overlay layer (for readability over pillar image) */
.pageBg__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background:
    linear-gradient(to bottom,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.18) 14%,
      rgba(0,0,0,0.48) 58%,
      rgba(0,0,0,0.72) 100%
    );
}

/* Content above everything */
.pageBg__content{
  position: relative;
  z-index: 2;
}

/* Mobile tuning */
@media (max-width: 1023px){
  .pageBg::before{
    inset: -18vh 0;
    background-position: center 88%;
  }
}

/* Reduced motion: disable parallax pan */
@media (prefers-reduced-motion: reduce){
  .pageBg::before{ transform: none !important; }
}

/* =========================================================
   READABILITY + “GLASS” FEEL INSIDE PILLAR SECTION (HOME)
   ========================================================= */

.pageBg .text-gray-900{ color: rgba(255,255,255,.94) !important; }
.pageBg .text-gray-700{ color: rgba(255,255,255,.80) !important; }
.pageBg .text-gray-600{ color: rgba(255,255,255,.68) !important; }
.pageBg .text-gray-500{ color: rgba(255,255,255,.58) !important; }

.pageBg .bg-white{
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.18) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.pageBg .bg-gray-50{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.16) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.pageBg .border,
.pageBg .border-gray-200{
  border-color: rgba(255,255,255,.18) !important;
}
.pageBg .shadow-sm{
  box-shadow: 0 18px 60px rgba(0,0,0,.25) !important;
}

.pageBg input,
.pageBg select,
.pageBg textarea{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.92) !important;
}
.pageBg input::placeholder,
.pageBg textarea::placeholder{
  color: rgba(255,255,255,.60) !important;
}

/* =========================================================
   FOOTER
   ========================================================= */

footer{
  background: var(--footer);
}