@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&display=swap');

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  background: radial-gradient(circle at top, #2a1c12, #120b07);
  color: #f5e6c8;
}

/* TOP BAR */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 28px;
  background: linear-gradient(180deg, #3b2616, #24150b);
  border-bottom: 2px solid #8b5a2b;
}

.logo {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
}

.admin-btn {
  background: linear-gradient(135deg,#c0843d,#8b5a2b);
  color: #fff3d6;
  padding: 10px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}

/* HERO */
.hero {
  text-align: center;
  padding: 60px 20px 40px;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.03),
    rgba(255,255,255,0.03) 10px,
    rgba(0,0,0,0.05) 10px,
    rgba(0,0,0,0.05) 20px
  );
  border-bottom: 2px solid #8b5a2b;
}

.hero h1 {
  font-size: 36px;
  margin-bottom: 8px;
}

.hero p {
  color: #e0c08d;
}

/* GRID */
.jobs-grid {
  max-width: 1300px;
  margin: 40px auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}

/* CARDS */
.card {
  background: linear-gradient(180deg,#3a2414,#1d120a);
  border: 2px solid #8b5a2b;
  border-radius: 14px;
  padding: 20px;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.4),
              0 12px 30px rgba(0,0,0,0.6);
}

.card.brass {
  background: linear-gradient(180deg,#c0843d,#8b5a2b);
  color: #1b0f06;
}

.card.steel {
  background: linear-gradient(180deg,#3a3a3a,#1a1a1a);
  border-color: #777;
}

.card.center {
  max-width: 420px;
  margin: auto;
}

.card.wide {
  grid-column: span 2;
}

.card h3, .card h2 {
  margin-top: 0;
  letter-spacing: 1px;
}

/* FORMS */
input, textarea {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  border-radius: 6px;
  border: 2px solid #8b5a2b;
  background: #1a1008;
  color: #f5e6c8;
}

textarea { resize: vertical; }

button {
  width: 100%;
  margin-top: 14px;
  padding: 12px;
  border-radius: 6px;
  border: 2px solid #c0843d;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 1px;
  background: linear-gradient(135deg,#c0843d,#8b5a2b);
  color: #1b0f06;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button.danger {
  background: linear-gradient(135deg,#8b2b2b,#5a1a1a);
  border-color: #8b2b2b;
  color: #fff;
}

/* MEMBERS */
.members {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.member {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.4);
  border: 1px solid #8b5a2b;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
}

.member img {
  width: 24px;
  height: 24px;
}

/* FOOTER */
.footer {
  text-align: center;
  padding: 20px;
  font-size: 14px;
  color: #c9a66b;
  border-top: 2px solid #8b5a2b;
}

/* ADMIN */
.admin-layout {
  max-width: 1400px;
  margin: auto;
  padding: 0 24px 60px;
}

.admin-panels {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 28px;
}

.hidden { display: none; }

/* ===== CREATE GEARS ANIMATION LAYER ===== */
/* Place subtle rotating gears behind content (pure CSS). */
:root{
  --gear-brass: rgba(192,132,61,0.18);
  --gear-brass2: rgba(224,192,141,0.12);
  --gear-steel: rgba(140,140,140,0.12);
}

/* background layer container (added via pseudo-elements) */
body::before,
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}

/* Large slow gears */
body::before{
  background:
    radial-gradient(circle at 18% 28%, transparent 0 78px, var(--gear-brass) 78px 92px, transparent 92px 120px, var(--gear-brass2) 120px 128px, transparent 128px),
    radial-gradient(circle at 72% 22%, transparent 0 52px, var(--gear-steel) 52px 62px, transparent 62px 88px, var(--gear-brass2) 88px 94px, transparent 94px),
    radial-gradient(circle at 82% 78%, transparent 0 70px, var(--gear-brass) 70px 82px, transparent 82px 108px, var(--gear-steel) 108px 114px, transparent 114px);
  filter: blur(0.2px);
  transform-origin: center;
  animation: gearsRotateSlow 42s linear infinite;
}

/* Smaller faster gears */
body::after{
  background:
    radial-gradient(circle at 30% 78%, transparent 0 34px, var(--gear-brass2) 34px 40px, transparent 40px 60px, var(--gear-steel) 60px 64px, transparent 64px),
    radial-gradient(circle at 58% 62%, transparent 0 26px, var(--gear-brass) 26px 32px, transparent 32px 48px, var(--gear-brass2) 48px 50px, transparent 50px),
    radial-gradient(circle at 12% 55%, transparent 0 22px, var(--gear-steel) 22px 26px, transparent 26px 38px, var(--gear-brass2) 38px 40px, transparent 40px),
    radial-gradient(circle at 90% 40%, transparent 0 28px, var(--gear-brass2) 28px 34px, transparent 34px 52px, var(--gear-steel) 52px 55px, transparent 55px);
  opacity: .9;
  transform-origin: center;
  animation: gearsRotateFast 18s linear infinite reverse;
}

@keyframes gearsRotateSlow{
  from{ transform: rotate(0deg) scale(1.02); }
  to{ transform: rotate(360deg) scale(1.02); }
}
@keyframes gearsRotateFast{
  from{ transform: rotate(0deg) scale(1.01); }
  to{ transform: rotate(360deg) scale(1.01); }
}

/* Ensure content is above the gear layer */
.topbar, .hero, .jobs-grid, .admin-layout, .footer {
  position: relative;
  z-index: 1;
}
.card { position: relative; z-index: 1; }

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  body::before, body::after{ animation: none; }
}

/* ===== CREATE CARD CLICK / HOVER EFFECT ===== */
.card{
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  pointer-events:none;
  box-shadow: inset 0 0 0 2px rgba(255,200,120,0.0);
  transition: box-shadow .15s ease;
}

.card:hover{
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,0.5),
    0 18px 36px rgba(0,0,0,0.7);
  filter: brightness(1.04);
}

.card:hover::after{
  box-shadow: inset 0 0 0 2px rgba(255,200,120,0.35);
}

/* micro cliquetis */
@keyframes cliquetis{
  0%{ transform: translateY(0); }
  30%{ transform: translateY(-1px); }
  60%{ transform: translateY(0); }
}

.card:active{
  animation: cliquetis .12s linear;
  transform: translateY(0);
}