/*
css/style.css
Purpose: Styles for Ecosphere demo (pastel green theme, glassmorphism, animations).
How to run: Included by index.html. No additional steps required.
*/

:root{
  /* Pastel green palette */
  --bg-a: #d7f5d6;   /* light */
  --bg-b: #a4d6a1;   /* mid */
  --accent-1: #7fcf8d; /* green */
  --accent-2: #9be7b3; /* soft */
  --text: #0f2b1d;
  --muted: rgba(15,43,29,0.58);
  --glass-bg: rgba(255,255,255,0.55); /* light tint for glass */
  --glass-border: rgba(255,255,255,0.6);
  --card-radius: 14px;
  --shadow: 0 10px 30px rgba(6,20,12,0.12);
}

/* Reset */
*{box-sizing:border-box}
html,body,#app{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: linear-gradient(135deg, var(--bg-a), var(--bg-b));
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  display:block;
}

/* Full-screen views */
.view--full{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
  transition: opacity 420ms cubic-bezier(.2,.9,.2,1), transform 420ms cubic-bezier(.2,.9,.2,1);
  z-index:1;
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
}
.view--full.visible{
  opacity:1;
  pointer-events:auto;
  transform:none;
}

/* center wrapper */
.center-wrap{
  width:100%;
  max-width:980px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Glass card */
.glass-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.68), rgba(255,255,255,0.52));
  border-radius:var(--card-radius);
  padding:1.6rem;
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow);
  backdrop-filter: blur(12px) saturate(130%);
  color:var(--text);
}

/* Splash */
.splash-content{ text-align:center; padding:1rem 2rem; }
.brand-title{
  font-size: clamp(2.2rem, 6vw, 4rem);
  margin:0;
  letter-spacing:0.02em;
  font-weight:800;
  font-family: "Poppins", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.tagline{
  margin-top:0.6rem;
  font-size:1.05rem;
  color:var(--muted);
  opacity:0;
  transform:translateY(6px);
  transition: opacity 360ms ease, transform 360ms ease;
}

/* Brand letters */
.brand-letter{
  display:inline-block;
  opacity:0;
  transform: translateY(6px) scale(0.9);
  color: var(--accent-1);
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}

/* When JS adds letters-ready class */
.brand-title.letters-ready .brand-letter{
  animation: letterIn 340ms cubic-bezier(.2,.9,.3,1) forwards;
}

/* tagline visible */
.tagline.tagline-visible{ opacity:1; transform:none; }

/* Keyframes */
@keyframes letterIn{
  0%{ opacity:0; transform:translateY(8px) scale(0.88) }
  60%{ opacity:1; transform:translateY(-4px) scale(1.06) }
  100%{ opacity:1; transform:translateY(0) scale(1) }
}

/* Bio */
.bio-card{ width:100%; max-width:980px; }
.bio-card h2{ margin:0 0 0.5rem 0 }
.bio-text{ color:var(--muted); margin:0 0 1rem 0 }

/* Role grid */
.role-grid{
  margin:1rem 0;
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:1rem;
}
.role-card{
  padding:1rem;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.6));
  border:1px solid rgba(255,255,255,0.6);
  cursor:pointer;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  display:flex;
  gap:0.8rem;
  align-items:center;
  outline: none;
}
.role-card:hover{
  transform: translateY(-8px) scale(1.006);
  box-shadow: 0 22px 48px rgba(6,20,12,0.12);
  border-color: rgba(120,200,140,0.6);
}
.role-card:focus{
  box-shadow: 0 8px 30px rgba(127,207,141,0.12), 0 0 0 4px rgba(155,231,179,0.12);
  transform: translateY(-6px);
}
.role-icon{ width:44px; height:44px; color:var(--accent-1) }
.role-label{ font-weight:700; font-size:1.05rem }
.role-sub{ font-size:0.86rem; color:var(--muted) }

/* Buttons */
.btn{
  padding:0.6rem 0.9rem;
  border-radius:10px;
  border:0;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  font-weight:700;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.btn:active{ transform: scale(0.98) }
.btn.primary{
  background: linear-gradient(90deg,var(--accent-1),var(--accent-2));
  color: #053018;
  box-shadow: 0 8px 20px rgba(78,173,106,0.12);
}
.btn.subtle{
  background: rgba(255,255,255,0.58);
  border:1px solid rgba(255,255,255,0.6);
}
.btn.icon{ background:transparent; color:var(--muted) }

/* Seller specific */
.seller-header{ display:flex; justify-content:space-between; align-items:center; gap:1rem }
.seller-panel, .listings-panel{ margin-top:1rem }
.field{ display:flex; flex-direction:column; gap:0.35rem; margin-bottom:0.6rem }
.field input, .field select{ padding:0.6rem 0.8rem; border-radius:8px; border:1px solid rgba(0,0,0,0.06); background:rgba(255,255,255,0.95); color:var(--text) }

/* Listings */
.listings{ list-style:none; padding:0; margin:0 }
.listing-item{ padding:0.5rem; border-radius:8px; margin-bottom:0.45rem; background:rgba(10,30,14,0.03); border:1px dashed rgba(10,30,14,0.05); }

/* Buyer header */
.app-header{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.8rem 1rem;
  border-radius:0;
  position:fixed;
  top:1rem;
  left:50%;
  transform:translateX(-50%);
  max-width:1100px;
  z-index:20;
}
.brand{ display:flex; align-items:center; gap:0.6rem; }
.logo{ width:36px; height:36px; }
.brand-name{ font-weight:800 }

/* Main layout */
.buyer-main{ padding:90px 1rem 120px; width:100%; max-width:1100px; margin:0 auto }
.container{ display:grid; grid-template-columns:1fr; gap:1rem; align-items:start }
@media(min-width:820px){ .container{ grid-template-columns: 1fr 1fr; } }

.help-text{ font-size:0.85rem; color:var(--muted) }
.predict-actions{ display:flex; gap:0.6rem; margin-top:0.6rem }

/* Result */
.result-card{
  margin-top:0.9rem;
  padding:0.8rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.6));
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.6);
}
.result-line{ font-size:1.05rem; margin-bottom:0.2rem }

/* Dialog */
.dialog{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, rgba(10,20,10,0.15), rgba(10,20,10,0.22));
  z-index:50;
  padding:1rem;
  opacity:0;
  pointer-events:none;
  transition: opacity 220ms ease;
}
.dialog[aria-hidden="false"]{ opacity:1; pointer-events:auto }
.dialog-inner{ width:100%; max-width:420px }

/* Footer */
.app-footer{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:10px;
  display:flex;
  gap:1rem;
  align-items:center;
  padding:0.4rem 0.8rem;
  color:var(--text);
  font-size:0.9rem;
  z-index:60;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border-radius:999px;
  padding:0.4rem 0.9rem;
}

/* Small screens */
@media(max-width:600px){
  .role-grid{ grid-template-columns:1fr; }
  .brand-title{ font-size:2.4rem }
  .app-header{ left:0; transform:none; width:100%; padding:0.6rem 1rem }
  .buyer-main{ padding:82px 14px 110px }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .brand-title.letters-ready .brand-letter{ animation:none; opacity:1; transform:none !important }
  .tagline{ transition:none; opacity:1; transform:none }
  .view--full{ transition:none; transform:none }
  .role-card, .btn{ transition:none }
}