/*
 * Rainmade Engineering — Global Styles
 *
 * All custom CSS lives here so styles persist across Turbo Drive navigation.
 * Design tokens are defined in app/assets/tailwind/application.css.
 */

/* ── Material Symbols ── */

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* ── Shared texture overlays ── */

.noise-overlay {
  position: relative;
}

.noise-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuAJnhc80dgHRr4q-QPTlRh23-hgKVSaE0K9El6-Mx2Jkw8KXykWnNAoB5RPAzkPT_P6GgPAl0J3n4X24Cysd4FegFNgYxfrxNNHihLcLXAyM5LdXO5P4Gmaahm_uJzTlX6hlgO08RVeb0n1xSnm9wBxirg9lb3UqF7joMr9d2DzY6GhRjW8wmqyoqGdm-Zl8fsLEjSrD45UGNe4bfqhfc_4H9cG-UciU1eUCyx8cStWDiXTpvi0SPU1y9Djo64fU8907eEx8YIlNQY);
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

.noise-overlay > * {
  position: relative;
  z-index: 1;
}

.grainy-overlay {
  position: absolute;
  inset: 0;
  background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuAJnhc80dgHRr4q-QPTlRh23-hgKVSaE0K9El6-Mx2Jkw8KXykWnNAoB5RPAzkPT_P6GgPAl0J3n4X24Cysd4FegFNgYxfrxNNHihLcLXAyM5LdXO5P4Gmaahm_uJzTlX6hlgO08RVeb0n1xSnm9wBxirg9lb3UqF7joMr9d2DzY6GhRjW8wmqyoqGdm-Zl8fsLEjSrD45UGNe4bfqhfc_4H9cG-UciU1eUCyx8cStWDiXTpvi0SPU1y9Djo64fU8907eEx8YIlNQY);
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

.noise-texture {
  position: relative;
}

.noise-texture::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.03;
  pointer-events: none;
  background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuDKItoIHv-VAXagWjp2ubhrO6-cqFbZnw_FYtSjM_tiPHlzmsUuLfeeN3qFDwN4HXOX_-rbyKKWMnuGTl46Iq5mjgo4W24CNBNy8SpbBdiRVD04mVZ1GwiTWn6igh1ZPOSKx8Ck2z_DQjGJyBrIy6v1GgDfof9mk21FA1YNG41F7-9l7ZEuyrdShLobHYmacjGYuU1fjqv8sHZvz5FOcP9gZ2czxPD9HoJgale_TU_lAG9cALfzAJhWoiGfpRHp5BcnYFtyHGKZZPs);
}

.section-atmosphere {
  background-image: radial-gradient(at 50% 0%, #d1e8dd 0, transparent 70%), radial-gradient(at 0% 100%, #cbe6fa 0, transparent 50%);
}

/* ── Gradient transitions ── */

.fog-gradient {
  background: linear-gradient(to bottom, transparent, #fff8f4);
}

.fog-transition-in {
  background: linear-gradient(to bottom, transparent, #fff8f4);
  height: 160px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  transform: rotate(180deg);
}

.fog-transition-out {
  background: linear-gradient(to bottom, transparent, #fff8f4);
  height: 160px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
}

/* ── Home page ── */

.sunrise-btn {
  background: linear-gradient(135deg, #482100 0%, #693300 100%);
  box-shadow: 0 20px 40px rgba(72, 33, 0, 0.08);
}

/* ── Portfolio page ── */

.cascadia-mist {
  background: linear-gradient(135deg, #faf2ed 0%, #e9e1dc 100%);
}

.editorial-shadow {
  box-shadow: 0 20px 40px rgba(72, 33, 0, 0.05);
}

/* ── Services page ── */

.grainy-gradient {
  background: linear-gradient(135deg, rgba(72, 33, 0, 0.02) 0%, rgba(28, 48, 40, 0.02) 100%);
  position: relative;
}

.grainy-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.02;
  pointer-events: none;
  background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuCD83O6cqQauvgwNe2Xf-HZti94tqHjPMDTkp8cEMbPDwQ1pZlWDZoGw31ftweLz7Onq7I5cP9BLsUiqmQZw6mwcnCqRmQZuRunpoStyOeuf_QlnQM--ZcHDwg5D292v060A5c7BEfGqmn1IhDmnS1omVe5iHCW9FUmOoH2bdW42_dU8MOOYRB1wFH5Z96CP7ENIeZ3ChIAV1cpPLk1IhWHpq2MempIc6cXqXDofBYLFuD5rbXbBz_PrTvymUMtLuQEjtZLNhQckys);
}

.topo-grid {
  background-image: radial-gradient(circle at 2px 2px, #c2c8c2 1px, transparent 0);
  background-size: 60px 60px;
  opacity: 0.1;
}

/* ── About page ── */

.hero-mesh {
  background-color: #fff8f4;
  background-image: radial-gradient(at 0% 0%, #d1e8dd 0, transparent 50%), radial-gradient(at 100% 0%, #cbe6fa 0, transparent 50%), radial-gradient(at 100% 100%, #ffdcc5 0, transparent 50%), radial-gradient(at 0% 100%, #faf2ed 0, transparent 50%);
}

/* ── Blog post ── */

.newsreader-body {
  font-family: "Newsreader", serif;
}

.custom-list-marker li {
  position: relative;
  padding-left: 2rem;
}

.custom-list-marker li::before {
  content: "eco";
  font-family: "Material Symbols Outlined";
  position: absolute;
  left: 0;
  top: 0.1em;
  font-size: 1.25rem;
  color: #1c3028;
  font-variation-settings: "FILL" 1;
}

/* ── Admin styles ── */

.mist-gradient {
  background: radial-gradient(circle at 50% 50%, #faf2ed 0%, #fff8f4 100%);
}

.grain-overlay {
  position: relative;
}

.grain-overlay::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0.03;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.mist-overlay {
  background: linear-gradient(180deg, rgba(255,248,244,0) 0%, rgba(255,248,244,1) 100%);
}

/* ── TipTap editor styles (Cascadia Mist) ── */

.prose-cascadia {
  font-family: "Newsreader", serif;
  font-size: 1.25rem;
  line-height: 1.625;
  color: #424844;
}

.prose-cascadia > * + * {
  margin-top: 1.5rem;
}

.prose-cascadia p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: #c2c8c2;
  pointer-events: none;
  height: 0;
}

.prose-cascadia h2 {
  font-family: "Newsreader", serif;
  font-size: 1.875rem;
  color: #1c3028;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.prose-cascadia h3 {
  font-family: "Newsreader", serif;
  font-size: 1.5rem;
  color: #1c3028;
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 400;
}

.prose-cascadia blockquote {
  border-left: 4px solid #482100;
  padding-left: 1.5rem;
  font-style: italic;
  color: #482100;
  font-size: 1.5rem;
  margin: 2rem 0;
}

.prose-cascadia ul {
  list-style: disc;
  padding-left: 2rem;
  font-style: italic;
  color: #1e1b18;
}

.prose-cascadia ul li + li {
  margin-top: 0.75rem;
}

.prose-cascadia ol {
  list-style: decimal;
  padding-left: 2rem;
  color: #1e1b18;
}

.prose-cascadia ol li + li {
  margin-top: 0.75rem;
}

.prose-cascadia pre {
  background: #1a2421;
  border: 1px solid #2d3a35;
  border-radius: 0.75rem;
  padding: 1.5rem;
  overflow-x: auto;
  margin: 2rem 0;
}

.prose-cascadia pre code {
  font-family: ui-monospace, monospace;
  font-size: 0.875rem;
  line-height: 1.625;
  color: #b5ccc1;
  background: none;
  padding: 0;
}

.prose-cascadia code {
  font-family: ui-monospace, monospace;
  background: #efe7e2;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  color: #482100;
}

.prose-cascadia img {
  width: 100%;
  border-radius: 0.75rem;
  margin: 2.5rem 0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.prose-cascadia a {
  color: #482100;
  font-weight: 700;
  border-bottom: 2px solid rgba(72, 33, 0, 0.1);
  text-decoration: none;
}

.prose-cascadia a:hover {
  border-bottom-color: #482100;
}

.prose-cascadia strong {
  font-weight: 700;
  color: #1e1b18;
}

.prose-cascadia hr {
  border: none;
  border-top: 1px solid rgba(194, 200, 194, 0.2);
  margin: 3rem 0;
}