/* PhuketPrime — Tropical Wallpaper (premium, Phuket island mood)
   IMPORTANT: connect AFTER base <style is:global> in BaseLayout.astro.
   This file is ORIGINAL artwork + styling (inspired by classic tropical hotel wallpapers).
*/

/* ===== Variables ===== */
:root{
  --lotus-paper: #efe4d1;            /* linen base */
  --lotus-ink: rgba(26, 22, 18, .86);
  --lotus-muted: rgba(26, 22, 18, .60);

  --lotus-teal: #007f91;
  --lotus-teal-deep: #005f6a;

  --lotus-card: rgba(255,255,255,.80);
  --lotus-card-border: rgba(0,0,0,.10);

  /* Wallpaper */
  --lotus-tile-size: 560px;
  --lotus-tile-opacity: .34;         /* motifs visibility */
  --lotus-grain-opacity: .22;        /* paper grain */
  --lotus-vignette: .20;

  /* Parallax (set by JS) */
  --lotus-x1: 0px; --lotus-y1: 0px;
  --lotus-x2: 0px; --lotus-y2: 0px;
  --lotus-x3: 0px; --lotus-y3: 0px;
  --lotus-hxL: 0px; --lotus-hyL: 0px;
  --lotus-hxR: 0px; --lotus-hyR: 0px;

  /* Light sweep */
  --lotus-sweep-opacity: .12;
}

/* ===== Full-bleed wallpaper background on <html> ===== */
html{
  background: var(--lotus-paper);
  color: var(--lotus-ink);
}

/* Layer 1 — paper grain / linen */
html::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 0;

  background:
    /* faint seams (like wallpaper rolls) */
    linear-gradient(90deg,
      rgba(0,0,0,.06) 0,
      rgba(0,0,0,.02) 1px,
      transparent 18px,
      transparent calc(var(--lotus-tile-size) - 18px),
      rgba(255,255,255,.10) calc(var(--lotus-tile-size) - 1px),
      rgba(255,255,255,.06) var(--lotus-tile-size)
    ),
    url('/assets/patterns/lotus-paper-grain.svg');
  background-repeat: repeat, repeat;
  background-size: var(--lotus-tile-size) var(--lotus-tile-size), 520px 520px;
  background-position:
    var(--lotus-x1) var(--lotus-y1),
    var(--lotus-x1) var(--lotus-y1);
  opacity: var(--lotus-grain-opacity);
  mix-blend-mode: multiply;
  filter: saturate(.92) contrast(.98);
}

/* Layer 2 — watercolor motifs (leaves / fruits / fauna), tile */
html::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 0;

  background-image: url('/assets/patterns/lotus-tropical-tile.svg');
  background-repeat: repeat;
  background-size: var(--lotus-tile-size) var(--lotus-tile-size);
  background-position: var(--lotus-x2) var(--lotus-y2);
  opacity: var(--lotus-tile-opacity);
  filter: saturate(.92) contrast(1.02);
}

/* Layer 3 — soft light sweep + vignette (adds “cinematic” depth) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 0;

  background:
    radial-gradient(1200px 520px at 18% 12%, rgba(255,255,255,.22), transparent 55%),
    radial-gradient(900px 460px at 78% 18%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(1100px 560px at 50% 92%, rgba(0,0,0,.10), transparent 60%),
    linear-gradient(115deg, transparent 0%, rgba(255,255,255,.18) 45%, transparent 62%);

  opacity: var(--lotus-sweep-opacity);
  transform: translate3d(var(--lotus-x3), var(--lotus-y3), 0);
}

/* Vignette (subtle) */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 0;
  background:
    radial-gradient(1600px 900px at 50% 35%,
      rgba(0,0,0,0) 55%,
      rgba(0,0,0,var(--lotus-vignette)) 100%
    );
  opacity: .28;
}

/* Ensure actual content is above background layers */
body, .header, main, footer, .stickyBar{
  position: relative;
  z-index: 1;
}

/* ===== Typography adjustments for “title-card” vibe ===== */
body{
  background: transparent;
  color: var(--lotus-ink);
}

h1,h2,h3{
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", Times, serif !important;
  letter-spacing: .012em;
}

.kicker{
  letter-spacing: .12em !important;
  color: rgba(0,95,106,.88) !important;
}

/* ===== Cards / glass-on-paper effect ===== */
.card,
.form,
.hero__wrap{
  background: var(--lotus-card) !important;
  border: 1px solid var(--lotus-card-border) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 48px rgba(0,0,0,.10) !important;
}

/* Header like “paper strip” */
.header{
  background: rgba(239,228,209,.72) !important;
  border-bottom: 1px solid rgba(0,0,0,.10) !important;
}

/* ===== Hero: reduce “empty sides” by adding corner art (full-bleed) ===== */
.hero{ position: relative; overflow: hidden;
  position: relative;
  isolation: isolate;
}

/* Corner motifs (non-tiled, large) */
.hero::before,
.hero::after{
  content:"";
  position: absolute;
  top: -46px;
  width: min(48vw, 560px);
  height: min(48vw, 560px);
  pointer-events:none;
  z-index: -1;
  opacity: .88;
  background-repeat: no-repeat;
  background-size: contain;
  filter: saturate(.95) contrast(1.02);
}

.hero::before{
  left: -70px;
  background-image: url('/assets/patterns/lotus-corner-left.svg');
  transform: translate3d(var(--lotus-hxL), var(--lotus-hyL), 0);
}

.hero::after{
  right: -70px;
  background-image: url('/assets/patterns/lotus-corner-right.svg');
  transform: translate3d(var(--lotus-hxR), var(--lotus-hyR), 0);
}

/* Hero media frame (optional, if you keep it) */
.hero__media{
  background: rgba(255,255,255,.60) !important;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  html::before, html::after, body::before{transform:none !important;}
  .hero::before, .hero::after{transform:none !important;}
}
