/* ============ DESIGNBOOTH — assets.css ============
   ALL visual assets are managed in this file.

   HOW TO SWAP IN REAL PHOTOGRAPHY:
   Replace any slot's background with one line, e.g.:
     .ph--1 { background: url("assets/img/villa-living.jpg") center/cover no-repeat; }
   Then delete that slot's ::before/::after rules if present.
   Put all image files in assets/img/ (use WebP/AVIF, ~200KB max each).
   ================================================== */

/* ---------- LOGO ---------- */
/* Files: assets/logo.svg (dark, for light nav)
          assets/logo-light.svg (light, for dark footer)
   Fallback text wordmark shows automatically if files are missing. */
.nav__logo-img { height: 40px; width: auto; display: block; }
.nav__logo.logo-fallback .nav__logo-img { display: none; }
.nav__logo.logo-fallback .nav__logo-text { display: inline; }
.footer__logo { height: 42px; width: auto; margin-bottom: .4rem; }
.footer__logo.logo-fallback { display: none; }

/* ---------- AMBIENT BLOBS (hero + contact) ---------- */
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: drift 16s ease-in-out infinite alternate; }
.blob--1 { width: 34rem; height: 34rem; right: -8rem; top: -6rem; background: radial-gradient(circle, #c8d9ef, transparent 70%); }
.blob--2 { width: 26rem; height: 26rem; left: -8rem; bottom: 4rem; background: radial-gradient(circle, #d4e2ee, transparent 70%); animation-delay: -5s; }
.blob--3 { width: 20rem; height: 20rem; right: 22%; bottom: -6rem; background: radial-gradient(circle, #b9cde6, transparent 70%); animation-delay: -9s; }
.dark-blobs span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .2; animation: drift 18s ease-in-out infinite alternate; }
.dark-blobs span:first-child { width: 30rem; height: 30rem; right: -6rem; top: -8rem; background: radial-gradient(circle, #3a6db3, transparent 70%); }
.dark-blobs span:last-child { width: 22rem; height: 22rem; left: -6rem; bottom: -6rem; background: radial-gradient(circle, #c8a45e, transparent 70%); animation-delay: -7s; }
@keyframes drift { from { transform: translate(0,0) scale(1); } to { transform: translate(3rem,-2.5rem) scale(1.12); } }

/* ---------- HERO ART COLLAGE ---------- */
/* Swap: .art--arch { background: url("assets/img/hero-1.jpg") center/cover; }
   (also remove its ::before/::after) */
.art--arch { grid-row: span 2; min-height: 350px; background: linear-gradient(180deg, #e6edf5, #c9d7e7); }
.art--arch::before { content: ""; position: absolute; inset: 14% 20% 0; background: linear-gradient(180deg, #6d8db4, #3c5f8d); border-radius: 50% 50% 0 0 / 42% 42% 0 0; }
.art--arch::after { content: ""; position: absolute; inset: 46% 34% 0; background: linear-gradient(180deg, #eef3f9, #d5e0ec); border-radius: 50% 50% 0 0 / 55% 55% 0 0; }
.art--sun { background: linear-gradient(180deg, #eaf0f7, #d3dfec); }
.art--sun::before { content: ""; position: absolute; width: 58%; aspect-ratio: 1/1; left: 21%; top: 14%; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #dfc48c, #b98f4d); box-shadow: 0 14px 30px -12px rgba(23,64,111,.45); }
.art--sun::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: linear-gradient(180deg, #55749a, #3d5a7f); }
.art--weave { background: repeating-linear-gradient(45deg, #dfe7f0 0 14px, #c9d6e4 14px 28px), #dfe7f0; }
.art--weave::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(255,255,255,.3) 14px 28px); }

/* ---------- STUDIO ART ---------- */
.art--rooms { min-height: 320px; background: linear-gradient(160deg, #e7edf4, #ccd9e8); }
.art--rooms::before { content: ""; position: absolute; inset: 12% 46% 12% 10%; background: linear-gradient(180deg, #7a97ba, #4a6b93); border-radius: 14px; }
.art--rooms::after { content: ""; position: absolute; inset: 30% 12% 12% 60%; background: linear-gradient(180deg, #eff4f9, #d8e2ee); border-radius: 60% 60% 14px 14px / 40% 40% 14px 14px; }

/* ---------- COST CHART ART ---------- */
.art--chart { min-height: 220px; margin-top: 1.6rem; background:
  linear-gradient(0deg, rgba(31,78,140,.3) 0 22%, transparent 22%) 6% 100% / 10% 40% no-repeat,
  linear-gradient(0deg, rgba(31,78,140,.42) 0 22%, transparent 22%) 24% 100% / 10% 62% no-repeat,
  linear-gradient(0deg, rgba(31,78,140,.54) 0 22%, transparent 22%) 42% 100% / 10% 48% no-repeat,
  linear-gradient(0deg, rgba(31,78,140,.66) 0 22%, transparent 22%) 60% 100% / 10% 78% no-repeat,
  linear-gradient(0deg, rgba(31,78,140,.82) 0 22%, transparent 22%) 78% 100% / 10% 92% no-repeat,
  linear-gradient(180deg, #f0f4f9, #dbe4ef); }

/* ---------- FULL-BLEED IMAGE BREAKS ---------- */
/* Swap: .break--dawn .break__layer { background: url("assets/img/break-1.jpg") center/cover; } */
.break--dawn .break__layer { background:
  radial-gradient(60rem 30rem at 70% 30%, rgba(223,196,140,.5), transparent 60%),
  linear-gradient(180deg, #e9eff6, #b7c9dd); }
.break--dawn .break__layer::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(180deg, rgba(23,64,111,.25), rgba(13,27,46,.5)); }
.break--dusk .break__layer { background:
  repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 90px),
  linear-gradient(160deg, #1b3454, #0d1b2e); }
.break--noon .break__layer { background:
  radial-gradient(40rem 40rem at 20% 80%, rgba(200,217,239,.75), transparent 65%),
  linear-gradient(180deg, #eff3f8, #ccd9e8); }

/* ---------- SERVICE & DETAIL CARD ART ---------- */
/* Swap: .sv--kitchen { background: url("assets/img/svc-kitchen.jpg") center/cover; } */
.sv--home { background: linear-gradient(150deg, #e2eaf3, #a9c0da); }
.sv--kitchen { background: linear-gradient(150deg, #dbe6e4, #93b0ad); }
.sv--wardrobe { background: repeating-linear-gradient(90deg, #dfe7f0 0 26px, #c3d2e3 26px 30px); }
.sv--living { background: radial-gradient(14rem 8rem at 30% 100%, #dfc48c, transparent 70%), linear-gradient(150deg, #eaf0f7, #c6d5e6); }
.sv--bedroom { background: linear-gradient(180deg, #e9eff6 55%, #91aac9 55%); }
.sv--turnkey { background: conic-gradient(from 210deg at 60% 40%, #dde6f0, #9db8d6, #dde6f0); }

/* ---------- MATERIAL SWATCHES ---------- */
/* These represent real finishes — swap with photos of actual samples:
   .sw--oak { background: url("assets/img/mat-bwp.jpg") center/cover; } */
.sw--oak { background: repeating-linear-gradient(95deg, #d8b98c 0 9px, #cba872 9px 18px); }
.sw--walnut { background: repeating-linear-gradient(93deg, #7a5a3c 0 11px, #66492f 11px 20px); }
.sw--stone { background: radial-gradient(8rem 5rem at 30% 30%, #dbe0e6, transparent 60%), #c2c9d2; }
.sw--linen { background: repeating-linear-gradient(0deg, #e9e2d3 0 3px, #ded4c0 3px 6px), repeating-linear-gradient(90deg, transparent 0 3px, rgba(255,255,255,.25) 3px 6px); }
.sw--sage { background: linear-gradient(160deg, #a9bccb, #7e97ab); }
.sw--brass { background: linear-gradient(140deg, #d9b877, #a9803f 60%, #c8a45e); }
.sw--terra { background: linear-gradient(150deg, #cf9270, #b06e4a); }

/* ---------- PROJECT GALLERY TILES ---------- */
/* Swap: .ph--1 { background: url("assets/img/project-1.jpg") center/cover; }
   Also remove the placeholder <span> text in index.html for that tile. */
.ph--1 { background: radial-gradient(16rem 20rem at 70% 20%, #dfc48c, transparent 65%), linear-gradient(170deg, #dfe7f0, #9fb6d0); }
.ph--2 { background: linear-gradient(150deg, #e6ecf3, #b9c9db); }
.ph--3 { background: linear-gradient(180deg, #dbe6e4 60%, #8aa6a2 60%); }
.ph--4 { background: repeating-linear-gradient(0deg, #e6edf5 0 34px, #cddbe9 34px 38px); }
.ph--5 { background: radial-gradient(12rem 12rem at 30% 75%, #b98f4d, transparent 60%), linear-gradient(160deg, #ecf1f7, #c3d2e3); }
.ph--6 { background: conic-gradient(from 160deg at 50% 40%, #e2eaf3, #a9c0da, #e2eaf3); }