/* JLCG — shared styles
   ──────────────────────────────────────────────────────────────────
   Two surfaces:
     1. Landing  (/index.html)  → full-bleed video, quiet login overlay
     2. Vault    (/vault.html)  → authenticated file explorer
*/

:root {
  --forest: #1f3a2e;
  --forest-soft: #2c4e3f;
  --moss: #4a6b50;
  --cream: #f7f3eb;
  --ink: #1a1a1a;
  --muted: #6b6b6b;
  --line: rgba(31, 58, 46, 0.12);
  --radius: 6px;
  --shadow-md: 0 8px 28px rgba(20, 30, 25, 0.10);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: #0b110d;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: var(--forest); text-decoration: none; }

/* ─────────────────────────────────────────────────────────────────
   Splash  —  green-on-cream JLCG wordmark that assembles itself,
              then fades to reveal the landing.
   ───────────────────────────────────────────────────────────────── */

.splash {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  animation: splash-fade 0.9s ease 2.5s forwards;
}

.splash svg {
  width: min(82vw, 520px);
  height: auto;
}

.splash .trunk-group,
.splash .tier,
.splash .ltrs {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: tree-grow 0.55s cubic-bezier(0.22, 0.85, 0.34, 1.02) forwards;
}

.splash .trunk-group { animation-delay: 0.10s; }
.splash .tier.t4     { animation-delay: 0.35s; }
.splash .tier.t3     { animation-delay: 0.60s; }
.splash .tier.t2     { animation-delay: 0.85s; }
.splash .tier.t1     { animation-delay: 1.10s; }
.splash .ltrs-jl     { animation-delay: 1.35s; }
.splash .ltrs-cg     { animation-delay: 1.55s; }

@keyframes tree-grow {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

@keyframes splash-fade {
  from { opacity: 1; visibility: visible; }
  to   { opacity: 0; visibility: hidden; }
}

/* Landing brand + login fade in beneath the splash as it dissolves. */
body.landing .landing-brand {
  opacity: 0;
  animation: subtle-in 1.0s ease 2.7s forwards;
}
body.landing .landing-login {
  opacity: 0;
  transform: translateY(10px);
  animation: subtle-in-up 1.0s ease 2.95s forwards;
}

@keyframes subtle-in       { to { opacity: 1; } }
@keyframes subtle-in-up    { to { opacity: 1; transform: translateY(0); } }

/* Returning visitors: splash already played this session — skip the fade-in
   delay on brand + login so they appear immediately. */
body.landing.no-splash .landing-brand,
body.landing.no-splash .landing-login {
  animation: none;
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .splash { display: none; }
  body.landing .landing-brand,
  body.landing .landing-login {
    animation: none; opacity: 1; transform: none;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Landing  —  full-bleed background + quiet login
   ───────────────────────────────────────────────────────────────── */

body.landing {
  min-height: 100vh;
  overflow: hidden;
  background: #0b110d;
}

.bg-video,
.bg-fallback {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.bg-video { background: #0b110d; }

/* Slowly drifting placeholder shown when no /assets/forest-drone.mp4 is present.
   Layered radial gradients suggest an aerial forest canopy; the @keyframes
   animation creates a subtle Ken-Burns drift so the page never feels static. */
.bg-fallback {
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(60, 95, 65, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 70%, rgba(40, 75, 50, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 60% 20%, rgba(80, 115, 80, 0.35) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 30% 85%, rgba(25, 50, 35, 0.6) 0%, transparent 60%),
    linear-gradient(160deg, #1c3528 0%, #14271d 50%, #0c1812 100%);
  animation: ken-burns 28s ease-in-out infinite alternate;
}

/* If the <video> element actually has loaded video, hide the fallback. */
.bg-video:not([style*="display: none"]) ~ .bg-fallback { opacity: 0; }

@keyframes ken-burns {
  0%   { transform: scale(1.05) translate(0, 0); }
  50%  { transform: scale(1.12) translate(-1.5%, -1%); }
  100% { transform: scale(1.08) translate(1.5%, 0.8%); }
}

/* Soft vignette + bottom gradient for legibility under the login card */
.bg-vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.0) 65%, rgba(0,0,0,0.45) 100%);
}

.landing-stage {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 36px 24px 56px 24px;
}

/* Landing brand: cream v8 wordmark inside a forest-green rounded rect —
   the inverse colorway of the splash, so the splash dissolves and this
   sits over the drone loop as the persistent brand mark. */
.landing-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  background: var(--forest);
  border-radius: var(--radius);
  border: 1px solid rgba(247, 243, 235, 0.14);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.landing-brand img {
  display: block;
  width: 120px;
  height: auto;
  pointer-events: none;
}
.landing-brand:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.landing-brand:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
}

/* Quiet glass login card, bottom-centered */
.landing-login {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 20px 22px;
  border-radius: 10px;
  background: rgba(15, 25, 18, 0.42);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(247, 243, 235, 0.15);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.landing-login input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--cream);
  background: rgba(247, 243, 235, 0.08);
  border: 1px solid rgba(247, 243, 235, 0.18);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.landing-login input::placeholder { color: rgba(247, 243, 235, 0.6); }
.landing-login input:focus {
  outline: none;
  border-color: rgba(247, 243, 235, 0.55);
  background: rgba(247, 243, 235, 0.12);
}

.landing-login button {
  margin-top: 4px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream);
  background: rgba(247, 243, 235, 0.14);
  border: 1px solid rgba(247, 243, 235, 0.35);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  font-family: inherit;
}
.landing-login button:hover:not(:disabled) {
  background: rgba(247, 243, 235, 0.22);
  border-color: rgba(247, 243, 235, 0.55);
}
.landing-login button:disabled { opacity: 0.6; cursor: default; }

.landing-alert {
  padding: 9px 12px;
  font-size: 13px;
  border-radius: var(--radius);
  background: rgba(160, 50, 50, 0.35);
  color: #ffe4e1;
  border: 1px solid rgba(255, 180, 170, 0.4);
}

@media (max-width: 500px) {
  .landing-stage { padding: 28px 18px 40px 18px; }
  .landing-login { max-width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────
   Vault  —  authenticated file explorer
   ───────────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 11px 22px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  font-family: inherit;
}
.btn-primary { background: var(--forest); color: var(--cream); border-color: var(--forest); }
.btn-primary:hover { background: var(--forest-soft); border-color: var(--forest-soft); }
.btn-outline { background: transparent; color: var(--forest); border-color: var(--forest); }
.btn-outline:hover { background: var(--forest); color: var(--cream); }

.alert {
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  margin-bottom: 16px;
}
.alert.error   { background: #fdecea; color: #8a1f1a; border: 1px solid #f4c7c3; }
.alert.success { background: #e8f3ec; color: #1f5a36; border: 1px solid #c4e0cd; }
.alert.info    { background: #eef2f7; color: #2c405a; border: 1px solid #c9d4e3; }

.vault-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto 1fr;
  background: var(--cream);
  color: var(--ink);
}

.vault-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 16px 24px 16px 18px; /* left matches sidebar padding so brand aligns with folder list */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vault-header .logo {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--forest);
  text-transform: uppercase;
}

/* Vault top-left brand: cream wordmark on a forest-green rect, sized to
   match the width of the folder buttons below so the column visually rhymes.
   Wordmark sits at the left, VAULT label pushed to the right. Both items
   bottom-aligned so their letter baselines sit on the same line. */
/* Compact JLCG home button — sizes to fit the logo only. */
.vault-brand {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: var(--forest);
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.vault-brand img {
  display: block;
  width: 92px;
  height: auto;
  pointer-events: none;
}
/* SVG label: same Georgia-bold + stroke treatment as the JLCG wordmark,
   with two pine-tier polygons crowning the T. Sized so the rendered cap
   height matches JLCG beside it (~15.6px), and the baseline lines up
   automatically because both SVGs share the same viewBox proportions. */
.vault-brand-label {
  display: block;
  width: 90px;
  height: auto;
  pointer-events: none;
}
.vault-brand:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(20, 30, 25, 0.18);
}
.vault-brand:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
}


.vault-user {
  display: flex; align-items: center; gap: 14px;
  font-size: 14px; color: var(--muted);
}

/* VAULT hero strip between the page header and the body grid. */
.vault-banner {
  background: var(--forest);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  line-height: 0;
}
.vault-banner svg {
  display: block;
  width: 100%;
  height: 70px;
}

@media (max-width: 800px) {
  .vault-banner svg { height: 48px; }
}

.vault-body {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 0;
}

.vault-sidebar {
  background: #fff;
  border-right: 1px solid var(--line);
  padding: 24px 18px;
  overflow-y: auto;
}

.vault-sidebar h3 {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px 0;
  font-weight: 600;
}

.folder-list { list-style: none; padding: 0; margin: 0; }
.folder-list li {
  padding: 9px 12px;
  font-size: 14px;
  color: var(--ink);
  border-radius: var(--radius);
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 2px;
}
.folder-list li:hover { background: var(--cream); }
.folder-list li.active {
  background: var(--forest); color: var(--cream); font-weight: 500;
}
.folder-list li.empty {
  color: var(--muted); font-style: italic; cursor: default;
}
.folder-list li.empty:hover { background: transparent; }

.vault-main { padding: 32px 36px; overflow-y: auto; }

.vault-main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}
.vault-main-header h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 26px;
  color: var(--forest);
  margin: 0;
}
.vault-main-header .crumbs {
  font-size: 13px; color: var(--muted); margin-bottom: 4px;
}

.file-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.file-table th, .file-table td {
  padding: 12px 16px;
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
}
.file-table th {
  background: var(--cream);
  font-weight: 600;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.file-table tr:last-child td { border-bottom: none; }
.file-table tr:hover td { background: var(--cream); }

.file-table .actions { text-align: right; }
.file-table .actions a,
.file-table .actions button {
  background: none;
  border: none;
  color: var(--forest);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  margin-left: 12px;
  padding: 0;
  font-family: inherit;
}
.file-table .actions button.danger { color: #a04040; }
.file-table .actions a:hover,
.file-table .actions button:hover { text-decoration: underline; }

.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--muted);
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.empty-state h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--forest);
  margin: 0 0 8px 0;
}

.upload-zone {
  margin-top: 24px;
  padding: 20px;
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.upload-zone input[type=file] { font-size: 13px; }

@media (max-width: 800px) {
  .vault-body { grid-template-columns: 1fr; }
  .vault-sidebar { border-right: none; border-bottom: 1px solid var(--line); }
  .vault-main { padding: 24px 20px; }
}

.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid var(--line);
  border-top-color: var(--forest);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }