/* ============================================================
   THE LAST STOP — Global Design System & Layout
   css/style.css
   ============================================================ */

/* ---- CSS Custom Properties / Design Tokens ---- */
:root {
  --serif: "Instrument Serif", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, sans-serif;
  --maxw:  1200px;
  --r-lg:  26px;
  --r-md:  16px;
  --r-sm:  10px;
  --ease:  cubic-bezier(.16,1,.3,1);
}

/* ---- LIGHT theme: Forest / Nature / Auroville ---- */
html[data-theme="light"] {
  --bg:        #F3EDDF;
  --bg-2:      #EAE1CD;
  --surface:   #FBF8F0;
  --surface-2: #F4EDDC;
  --border:    #DCD0B6;
  --text:      #232A1D;
  --text-2:    #5B5A47;
  --text-3:    #8A856F;
  --primary:   #3C6E47;
  --primary-2: #2B5034;
  --on-primary:#FBF8F0;
  --accent:    #B06B3F;
  --accent-2:  #C79A55;
  --sage:      #8FA786;
  --glow:      rgba(60,110,71,.20);
  --nav-glass: rgba(251,248,240,.72);
  --shadow:    0 24px 60px -28px rgba(40,50,30,.45);
  --shadow-sm: 0 10px 30px -16px rgba(40,50,30,.40);
  --ph-1:      #E7DEC8;
  --ph-2:      #DBCFB1;
  color-scheme: light;
}

/* ---- DARK theme: Anime / Neon / Skydeck ---- */
html[data-theme="dark"] {
  --bg:        #08070F;
  --bg-2:      #0E0B1B;
  --surface:   rgba(22,18,42,.55);
  --surface-2: #15112A;
  --border:    rgba(150,120,255,.18);
  --text:      #ECEAFB;
  --text-2:    #A6A0CE;
  --text-3:    #726C9B;
  --primary:   #36E6EC;
  --primary-2: #28C2E8;
  --on-primary:#06121A;
  --accent:    #FF5FB4;
  --accent-2:  #FFB15A;
  --sage:      #9B6BFF;
  --glow:      rgba(54,230,236,.30);
  --nav-glass: rgba(12,10,24,.55);
  --shadow:    0 28px 70px -30px rgba(0,0,0,.75);
  --shadow-sm: 0 12px 36px -20px rgba(0,0,0,.7);
  --ph-1:      #181333;
  --ph-2:      #221a44;
  color-scheme: dark;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background .6s var(--ease), color .6s var(--ease);
}
img  { max-width: 100%; display: block; }
a    { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--primary); color: var(--on-primary); }

/* ---- Typography ---- */
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
.eyebrow {
  font-size: 12.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--primary); display: inline-flex; align-items: center; gap: 10px;
}
html[data-theme="dark"] .eyebrow { text-shadow: 0 0 18px var(--glow); }
.eyebrow::before { content:""; width: 26px; height: 1.5px; background: currentColor; opacity: .7; }
h1,h2,h3 { line-height: 1.02; letter-spacing: -.02em; }
.display  { font-family: var(--serif); font-weight: 400; line-height: .98; letter-spacing: -.02em; }
.muted-em { color: var(--text-3); font-style: italic; }
html[data-theme="dark"] .muted-em { color: var(--accent); }

/* ---- Layout ---- */
.container   { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.section     { padding: clamp(60px, 9vw, 130px) 0; position: relative; }
.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head h2 { font-size: clamp(2rem, 4.8vw, 3.8rem); margin-top: 16px; }
.section-head p  { color: var(--text-2); font-size: clamp(.95rem, 1.5vw, 1.15rem); margin-top: 16px; max-width: 600px; }
.bg-alt { background: var(--bg-2); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px;
  padding: 14px 26px; border-radius: 999px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s;
  white-space: nowrap; line-height: 1;
}
.btn .ic { font-size: 15px; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 32px -10px var(--glow), 0 0 0 1px var(--primary); }
html[data-theme="dark"] .btn-primary { box-shadow: 0 0 22px -2px var(--glow); }
html[data-theme="dark"] .btn-primary:hover { box-shadow: 0 0 38px -2px var(--glow), 0 0 0 1px var(--primary); }
.btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--border); }
.btn-ghost:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--primary); color: var(--primary); }
.btn-wa { background: #25D366; color: #06280F; }
html[data-theme="dark"] .btn-wa { box-shadow: 0 0 20px -4px rgba(37,211,102,.55); }
.btn-wa:hover { transform: translateY(-2px) scale(1.03); }

/* ---- Glassmorphism ---- */
.glass {
  background: var(--nav-glass);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--border);
}

/* ---- Reveal on scroll ---- */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .reveal.in:not(.done) { animation: revealRise .85s var(--ease) backwards; }
}
.reveal.done { animation: none; }
@keyframes revealRise { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }

/* ---- Photo / Placeholder ---- */
.ph {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  background: repeating-linear-gradient(45deg, var(--ph-1) 0 14px, var(--ph-2) 14px 28px);
  display: block;
}
.ph img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; transition: transform .55s var(--ease);
}
.ph::after {
  content: attr(data-label);
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-2); background: var(--surface);
  padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border);
  position: absolute; bottom: 10px; left: 10px; z-index: 2;
}
.ph[data-label=""]::after { display: none; }
html[data-theme="dark"] .ph::after { box-shadow: 0 0 14px -4px var(--glow); }

/* ---- Scrollbar ---- */
::-webkit-scrollbar       { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 99px; border: 3px solid var(--bg-2); }

/* ---- Root & Splash ---- */
#root { min-height: 100vh; }
#splash {
  position: fixed; inset: 0; z-index: 9999; display: flex;
  align-items: center; justify-content: center;
  background: var(--bg); transition: opacity .6s ease, visibility .6s ease;
}
#splash.gone { opacity: 0; visibility: hidden; }
#splash .mark { font-family: var(--serif); font-size: 1.9rem; color: var(--text); display: flex; flex-direction: column; align-items: center; gap: 14px; }
#splash .ring { width: 28px; height: 28px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 99px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Global Mobile Responsiveness ---- */
@media (max-width: 768px) {
  .container { padding: 0 18px; }
  .section   { padding: clamp(48px, 8vw, 80px) 0; }
  .btn       { padding: 12px 20px; font-size: 14px; gap: 8px; }
}
@media (max-width: 480px) {
  .container { padding: 0 14px; }
}