/* ==========================================================================
   Moli Development Group — shared stylesheet
   Palette: deep emerald + aubergine purple + antique brass + ivory
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;800;900&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --c-green:      #0E2F28; /* deep emerald base */
  --c-green-deep: #08201B; /* darker emerald, gradients */
  --c-purple:     #2A1B3A; /* aubergine */
  --c-purple-deep:#1B1228; /* darker aubergine, gradients */
  --c-brass:      #C9A24B; /* primary accent */
  --c-brass-light:#E4C879; /* hover / highlight */
  --c-ivory:      #F4EFE3; /* primary text on dark */
  --c-sage:       #9FB6A9; /* muted secondary text */
  --c-line:       rgba(244,239,227,0.12); /* hairline borders */
}

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body{
  color-scheme: dark;
  background-color: var(--c-green-deep);
  background-image:
    radial-gradient(ellipse 80% 60% at 85% -10%, rgba(201,162,75,0.10), transparent 60%),
    radial-gradient(ellipse 70% 60% at 0% 10%, rgba(42,27,58,0.65), transparent 55%),
    linear-gradient(155deg, var(--c-green-deep) 0%, var(--c-green) 38%, var(--c-purple) 78%, var(--c-purple-deep) 100%);
  color: var(--c-ivory);
  font-family: 'Vazirmatn', 'Manrope', sans-serif;
}
html[dir="ltr"] body{ font-family: 'Manrope', 'Vazirmatn', sans-serif; }

/* faint grain overlay for texture, very low opacity */
.grain{
  position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.font-display{ font-family: 'Fraunces', 'Vazirmatn', serif; }
html[dir="rtl"] .font-display{ font-family: 'Vazirmatn', serif; font-weight: 800; }

.eyebrow{
  font-family: 'Fraunces', 'Manrope', sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-brass);
  font-weight: 500;
  font-size: 0.72rem;
}

.text-brass{ color: var(--c-brass); }
.bg-brass{ background-color: var(--c-brass); }
.border-line{ border-color: var(--c-line); }
.bg-line{ background-color: var(--c-line); }

/* hairline divider with a brass tick */
.tick-divider{ position: relative; height: 1px; background: var(--c-line); }
.tick-divider::before{
  content: ''; position: absolute; top: -3px; right: 0; width: 18px; height: 7px;
  background: var(--c-brass); opacity: 0.85;
}
html[dir="ltr"] .tick-divider::before{ right: auto; left: 0; }

/* glass card */
.glass{
  background: linear-gradient(165deg, rgba(244,239,227,0.06), rgba(244,239,227,0.02));
  border: 1px solid var(--c-line);
  backdrop-filter: blur(6px);
}
.glass:hover{ border-color: rgba(201,162,75,0.45); }

/* primary CTA button */
.btn-brass{
  background: linear-gradient(135deg, var(--c-brass-light), var(--c-brass));
  color: #1B1207;
  font-weight: 600;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  box-shadow: 0 8px 28px -8px rgba(201,162,75,0.55);
}
.btn-brass:hover{ transform: translateY(-2px); filter: brightness(1.06); }
.btn-brass:focus-visible{ outline: 2px solid var(--c-ivory); outline-offset: 3px; }

.btn-ghost{
  border: 1px solid var(--c-line);
  color: var(--c-ivory);
  transition: border-color .25s ease, background-color .25s ease;
}
.btn-ghost:hover{ border-color: rgba(201,162,75,0.55); background: rgba(244,239,227,0.04); }
.btn-ghost:focus-visible{ outline: 2px solid var(--c-brass); outline-offset: 3px; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--c-brass); outline-offset: 2px; border-radius: 4px;
}

/* scroll reveal */
.reveal{ opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ---- signature orbit graphic ---- */
.orbit-wrap{ aspect-ratio: 1/1; }
.orbit-ring{ transform-origin: 50% 50%; }
.orbit-ring--1{ animation: spin-cw 70s linear infinite; }
.orbit-ring--2{ animation: spin-ccw 95s linear infinite; }
.orbit-ring--3{ animation: spin-cw 130s linear infinite; }
@keyframes spin-cw{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
@keyframes spin-ccw{ from{ transform: rotate(0deg); } to{ transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce){
  .orbit-ring--1, .orbit-ring--2, .orbit-ring--3{ animation: none; }
}

/* form elements */
.field-input{
  background: rgba(244,239,227,0.05);
  border: 1px solid var(--c-line);
  color: var(--c-ivory);
}
.field-input::placeholder{ color: rgba(244,239,227,0.4); }
.field-input:focus{ border-color: var(--c-brass); background: rgba(244,239,227,0.08); }

select.field-input{
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23C9A24B' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1rem center;
}
html[dir="ltr"] select.field-input{ background-position: right 1rem center; }

/* mobile nav */
#mobile-nav{ transition: max-height .35s ease, opacity .35s ease; max-height: 0; opacity: 0; overflow: hidden; }
#mobile-nav.open{ max-height: 480px; opacity: 1; }

/* header solid-on-scroll */
#site-header{ transition: background-color .3s ease, border-color .3s ease; }
#site-header.scrolled{ background-color: rgba(8,32,27,0.86); border-color: var(--c-line); backdrop-filter: blur(10px); }