/* Interactive Dynamics Realty — Theme stylesheet
   Design tokens + utilities mirroring the React reference.
   Layout uses Tailwind (loaded separately). This file adds fonts,
   custom tokens, reveal animations, nav chrome, and mobile drawer. */

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

:root {
  --paper: #F6F5F1;
  --linen: #ECEAE3;
  --stone: #D9D7D0;
  --mist:  #B7B6B0;
  --slate: #6C6E74;
  --graphite: #3A3C42;
  --ink:   #24262B;
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
}
body.no-scroll { overflow: hidden; }

h1,h2,h3,h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.font-display { font-family: var(--font-display); }
.font-sans { font-family: var(--font-sans); }
.num { font-feature-settings: "tnum"; letter-spacing: 0.02em; }

.rule { height: 1px; background: rgba(36,38,43,0.14); width: 100%; }

/* Nav chrome */
#idr-nav {
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  background: rgba(246,245,241,0.72);
  -webkit-backdrop-filter: saturate(1.15) blur(12px);
  backdrop-filter: saturate(1.15) blur(12px);
}
#idr-nav.is-scrolled {
  background: rgba(246,245,241,0.94);
  border-bottom: 1px solid rgba(36,38,43,0.08);
}

/* Hamburger lines */
.idr-burger { position: relative; display: inline-block; height: 14px; width: 20px; }
.idr-burger span {
  position: absolute; left: 0; height: 1px; width: 20px;
  background: currentColor;
  transition: transform .3s ease, opacity .2s ease;
}
.idr-burger span:nth-child(1) { top: 0; }
.idr-burger span:nth-child(2) { top: 7px; }
.idr-burger span:nth-child(3) { top: 14px; }
.idr-nav-toggle[aria-expanded="true"] .idr-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.idr-nav-toggle[aria-expanded="true"] .idr-burger span:nth-child(2) { opacity: 0; }
.idr-nav-toggle[aria-expanded="true"] .idr-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu drawer */
#idr-mobile-menu {
  position: fixed; inset: 0; z-index: 70;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
#idr-mobile-menu.is-open { opacity: 1; pointer-events: auto; }
#idr-mobile-menu .idr-scrim {
  position: absolute; inset: 0;
  background: rgba(36,38,43,0.4);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
#idr-mobile-menu .idr-panel {
  position: absolute; right: 0; top: 0; height: 100%;
  width: 100%; max-width: 24rem;
  background: var(--paper);
  border-left: 1px solid rgba(36,38,43,0.10);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  transform: translateX(100%);
  transition: transform .3s ease-out;
  display: flex; flex-direction: column;
}
#idr-mobile-menu.is-open .idr-panel { transform: translateX(0); }
#idr-mobile-menu a.menu-link {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.875rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color .2s;
}
#idr-mobile-menu a.menu-link:hover { color: var(--slate); }

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.reveal-in { opacity: 1; transform: translateY(0); }

@keyframes idr-rise { from { opacity:0; transform: translateY(24px);} to {opacity:1; transform:none;} }
@keyframes idr-fade { from {opacity:0} to {opacity:1} }
.animate-rise { animation: idr-rise 1s cubic-bezier(0.2,0.7,0.2,1) both; }
.animate-fade { animation: idr-fade 1.2s ease-out both; }

/* Selection */
::selection { background: var(--ink); color: var(--paper); }

/* Small helpers */
.idr-eyebrow {
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--slate);
}