/* ============================================================
   Avo Derbalian - Design Tokens
   Forest green + ivory + brushed copper (niche estate palette)
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---- Forest palette (default) --------------------------- */
  --forest-900: #0E1F18;   /* deepest - hero, footer */
  --forest-800: #152A20;   /* cards on dark */
  --forest-700: #1E3A2C;   /* secondary dark */
  --forest-600: #2D5240;
  --forest-400: #6B8A7A;   /* muted on dark */
  --forest-300: #9CB3A6;

  --ivory-50:   #F7F3EA;   /* primary light bg */
  --ivory-100:  #F1ECE0;   /* alt section */
  --ivory-200:  #E8E0CF;   /* tint */
  --ivory-300:  #D8CEB8;

  --copper-700: #8A5A2B;
  --copper-600: #A46B30;   /* primary accent */
  --copper-500: #BE8142;   /* brighter */
  --copper-400: #D4A572;   /* soft */
  --copper-300: #E6C69A;

  --ink-900:    #121814;
  --ink-700:    #2E3832;
  --ink-500:    #5A6660;   /* muted text */
  --ink-300:    #8A948E;

  /* ---- Semantic ------------------------------------------- */
  --bg:           var(--ivory-50);
  --bg-alt:       var(--ivory-100);
  --bg-dark:      var(--forest-900);
  --bg-dark-alt:  var(--forest-800);
  --bg-tint:      var(--ivory-200);

  --fg:           var(--ink-900);
  --fg-muted:     var(--ink-500);
  --fg-on-dark:   var(--ivory-50);
  --fg-muted-dark: var(--forest-300);
  --accent:       var(--copper-600);
  --accent-warm:  var(--copper-400);

  --rule:         rgba(18, 24, 20, 0.14);
  --rule-strong:  rgba(18, 24, 20, 0.28);
  --rule-on-dark: rgba(247, 243, 234, 0.18);

  /* ---- Type ---------------------------------------------- */
  --font-display: "Fraunces", "Canela", Georgia, serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ---- Motion -------------------------------------------- */
  --ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:     200ms;
  --dur:          420ms;
  --dur-slow:     900ms;

  /* ---- Layout -------------------------------------------- */
  --maxw:         1440px;
  --pad-x:        clamp(20px, 5vw, 80px);
}

/* Palette: Midnight teal */
[data-palette="teal"] {
  --forest-900: #0A1E24;
  --forest-800: #112A32;
  --forest-700: #1A3C47;
  --forest-600: #2A5663;
  --forest-400: #5E8391;
  --forest-300: #8FAEB9;
  --ivory-50:   #F4EFE4;
  --ivory-100:  #ECE5D4;
  --ivory-200:  #DFD4BE;
  --copper-700: #A14B33;
  --copper-600: #B8573C;
  --copper-500: #CF6D52;
  --copper-400: #DE8A6E;
  --copper-300: #EAA98F;
}

/* Palette: Oxblood */
[data-palette="oxblood"] {
  --forest-900: #1A0D0E;
  --forest-800: #281213;
  --forest-700: #3B1A1C;
  --forest-600: #5A2527;
  --forest-400: #8A5E61;
  --forest-300: #AE8789;
  --ivory-50:   #F5EFE2;
  --ivory-100:  #EDE4D0;
  --ivory-200:  #E0D3B8;
  --copper-700: #8C6B2A;
  --copper-600: #A78332;
  --copper-500: #C09A46;
  --copper-400: #D4B572;
  --copper-300: #E6CE9A;
}

/* Dark mode - invert surfaces */
[data-mode="dark"] {
  --bg:           var(--forest-900);
  --bg-alt:       var(--forest-800);
  --bg-tint:      var(--forest-700);
  --bg-dark:      #050C09;
  --bg-dark-alt:  var(--forest-900);
  --fg:           var(--ivory-50);
  --fg-muted:     var(--forest-300);
  --fg-on-dark:   var(--ivory-50);
  --rule:         rgba(247, 243, 234, 0.16);
  --rule-strong:  rgba(247, 243, 234, 0.32);
}

/* ---- Base defaults ---------------------------------------- */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  color: inherit;
  margin: 0;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: -0.02em;
  line-height: 1.04;
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

/* Eyebrow */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--fg-muted);
}

.eyebrow--copper { color: var(--accent); }

/* Hairline rule */
.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  width: 100%;
  margin: 0;
}

/* Buttons - flat editorial */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 18px 28px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { background: var(--accent); color: var(--ivory-50); }
.btn .arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--rule-strong);
}
.btn--ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.btn--copper { background: #B6534A !important; color: #fff !important; border-color: #B6534A !important; }
.btn--copper:hover { background: #99423A !important; border-color: #99423A !important; }

/* Global CTA color override - all primary buttons use brand red */
.btn--primary,
button.btn:not(.btn--ghost):not(.btn--outline) {
  background: #B6534A !important;
  color: #fff !important;
  border-color: #B6534A !important;
}
.btn--primary:hover,
button.btn:not(.btn--ghost):not(.btn--outline):hover {
  background: #99423A !important;
  border-color: #99423A !important;
}

/* Input */
.input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  padding: 14px 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: inherit;
  outline: none;
  transition: border-color var(--dur) var(--ease);
}
.input:focus { border-color: var(--accent); }
.input::placeholder { color: var(--fg-muted); }

/* Vertical rotated label */
.vert {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--fg-muted);
}

/* Container */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* Scroll-reveal base */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

.stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
.stagger.in > * { opacity: 1; transform: translateY(0); }
.stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.stagger.in > *:nth-child(2) { transition-delay: 80ms; }
.stagger.in > *:nth-child(3) { transition-delay: 160ms; }
.stagger.in > *:nth-child(4) { transition-delay: 240ms; }
.stagger.in > *:nth-child(5) { transition-delay: 320ms; }
.stagger.in > *:nth-child(6) { transition-delay: 400ms; }
.stagger.in > *:nth-child(7) { transition-delay: 480ms; }
.stagger.in > *:nth-child(8) { transition-delay: 560ms; }

/* Word-by-word reveal */
.words .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40%);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.words.in .word {
  opacity: 1;
  transform: translateY(0);
}

/* Placeholder imagery surfaces */
.photo {
  position: relative;
  background: var(--bg-tint);
  overflow: hidden;
}
.photo[data-kind="portrait"] {
  background:
    radial-gradient(80% 60% at 50% 30%, rgba(164, 107, 48, 0.18), transparent 70%),
    linear-gradient(180deg, var(--forest-700) 0%, var(--forest-900) 100%);
  color: var(--ivory-50);
}
.photo[data-kind="town"] {
  background:
    linear-gradient(180deg, rgba(14, 31, 24, 0.0) 40%, rgba(14, 31, 24, 0.55) 100%),
    linear-gradient(135deg, var(--forest-600), var(--forest-800));
}
.photo[data-kind="interior"] {
  background:
    linear-gradient(140deg, var(--ivory-200) 0%, var(--ivory-100) 40%, var(--copper-300) 100%);
}
.photo[data-kind="estate"] {
  background:
    radial-gradient(60% 80% at 30% 70%, rgba(164, 107, 48, 0.22), transparent 60%),
    linear-gradient(160deg, var(--forest-800), #0A1812 80%);
}
.photo .photo-label {
  position: absolute;
  bottom: 14px;
  left: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247, 243, 234, 0.72);
  mix-blend-mode: normal;
}
.photo[data-kind="interior"] .photo-label { color: rgba(18, 24, 20, 0.52); }

/* Marquee */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Ken Burns subtle zoom */
@keyframes kenburns {
  from { transform: scale(1.06); }
  to { transform: scale(1.14); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

[data-reduced-motion="true"] *, [data-reduced-motion="true"] *::before, [data-reduced-motion="true"] *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}

/* RTL - basic for Arabic preview */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}
[dir="rtl"] .btn .arrow { transform: scaleX(-1); }