/* ==========================================================
   Known Media — living backgrounds
   Patterns adapted (vanilla CSS/JS) from MIT-licensed open source:
   Magic UI (dot pattern) and
   ibelick/background-snippets (grid + radial mask backgrounds).
   ========================================================== */

/* the page itself becomes a slow, warm aurora */
html { background: var(--bg); }
html body { background: transparent; }
.aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; will-change: transform; }
.aurora i:nth-child(1) { width: 52vmax; height: 52vmax; left: -14vmax; top: -18vmax; background: radial-gradient(circle, rgba(232, 160, 110, .55), transparent 65%); animation: auA 28s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 46vmax; height: 46vmax; right: -16vmax; top: 22vh; background: radial-gradient(circle, rgba(184, 50, 42, .28), transparent 65%); animation: auB 34s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { width: 40vmax; height: 40vmax; left: 20vw; bottom: -22vmax; background: radial-gradient(circle, rgba(222, 196, 160, .6), transparent 65%); animation: auC 40s ease-in-out infinite alternate; }
@keyframes auA { to { transform: translate(18vw, 14vh) scale(1.15); } }
@keyframes auB { to { transform: translate(-22vw, 18vh) scale(.9); } }
@keyframes auC { to { transform: translate(14vw, -16vh) scale(1.2); } }

/* shared layer that every section gets */
.bgfx { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
#hero, #reel, #problem, #work, #pricing, #team { position: relative; isolation: isolate; }
#problem, #pricing { overflow: hidden; }
.alt { background: rgba(239, 233, 225, .62) !important; }
.alt::after { display: none !important; }        /* replaces the old fade from enhance.css */
.hero::after { display: none !important; }       /* replaced by the soft dot texture */

/* ---------- REEL: dot pattern + spotlight ---------- */
.bgfx-dots { background-image: radial-gradient(rgba(122, 31, 28, .32) 1.2px, transparent 1.4px); background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(45% 65% at 72% 50%, #000 0%, transparent 75%); mask-image: radial-gradient(45% 65% at 72% 50%, #000 0%, transparent 75%); }
.bgfx-dots::after { content: ""; position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; transform: translate(-6%, -50%);
  background: radial-gradient(circle 420px at 50% 50%, rgba(255, 246, 236, .9), transparent 70%); mix-blend-mode: soft-light; }

/* ---------- PROBLEM: architectural grid with a warm glow ---------- */
.bgfx-grid { background-image: linear-gradient(to right, rgba(122, 31, 28, .075) 1px, transparent 1px), linear-gradient(to bottom, rgba(122, 31, 28, .075) 1px, transparent 1px);
  background-size: 6rem 4rem;
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 40%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 85% 70% at 50% 40%, #000 55%, transparent 100%); }
.bgfx-grid::before, .bgfx-grid::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); }
.bgfx-grid::before { width: 520px; height: 520px; left: -140px; top: 10%; background: rgba(184, 50, 42, .14); }
.bgfx-grid::after { width: 460px; height: 460px; right: -120px; bottom: 0; background: rgba(232, 160, 110, .22); }

/* ---------- PRICING: stage spotlight from above + fine dots ---------- */
.bgfx-spot { background-image: radial-gradient(rgba(20, 16, 16, .14) 1px, transparent 1.2px); background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 60%, #000 30%, transparent 85%); mask-image: radial-gradient(ellipse 60% 55% at 50% 60%, #000 30%, transparent 85%); }
.bgfx-spot::before { content: ""; position: absolute; left: 50%; top: -10%; width: min(1100px, 120vw); height: 120%; transform: translateX(-50%);
  background: conic-gradient(from 180deg at 50% 0%, transparent 155deg, rgba(255, 250, 244, .95) 172deg, rgba(255, 250, 244, .95) 188deg, transparent 205deg);
  filter: blur(26px); opacity: .9; animation: spotSway 9s ease-in-out infinite alternate; }
@keyframes spotSway { from { transform: translateX(-50%) rotate(-4deg); } to { transform: translateX(-50%) rotate(4deg); } }

/* ---------- phones & motion preferences ---------- */
@media (max-width: 1300px) { @media (max-width: 760px) {
    .aurora i { filter: blur(60px); }
}
@media (prefers-reduced-motion: reduce) {
  .aurora i, }

/* ---------- polish: no hard section edges, calmer details ---------- */
.alt { background: linear-gradient(to bottom, rgba(239, 233, 225, 0), rgba(239, 233, 225, .7) 140px, rgba(239, 233, 225, .7) calc(100% - 140px), rgba(239, 233, 225, 0)) !important; }
.hero::before { -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); }
.bgfx-spot::before { background: conic-gradient(from 180deg at 50% 0%, transparent 156deg, rgba(232, 160, 110, .28) 172deg, rgba(255, 236, 214, .5) 180deg, rgba(232, 160, 110, .28) 188deg, transparent 204deg); filter: blur(22px); }
  background:
    repeating-linear-gradient(to bottom, transparent 0 7px, rgba(246, 242, 236, .9) 7px 15px, transparent 15px 22px) 6px 0 / 6px 100% no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 7px, rgba(246, 242, 236, .9) 7px 15px, transparent 15px 22px) 18px 0 / 6px 100% no-repeat,
    linear-gradient(#2a1f1d, #2a1f1d);
  -webkit-mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent); }
/* let the aurora show through sections that had a solid cream fill */
.reel { background: transparent !important; border-top: 0 !important; }
.bgfx-dots::after { display: none; }
#reel::before { -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); }


/* ==========================================================
   v13 — calmer: keep only soft, quiet textures
   ========================================================== */
.aurora i { opacity: .4; }
.bgfx-herodots { background-image: radial-gradient(rgba(122, 31, 28, .22) 1px, transparent 1.3px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(48% 62% at 74% 46%, #000 0%, transparent 72%); mask-image: radial-gradient(48% 62% at 74% 46%, #000 0%, transparent 72%); }
.bgfx-dots { background-image: radial-gradient(rgba(122, 31, 28, .2) 1px, transparent 1.3px); background-size: 22px 22px; }
.bgfx-grid { background-image: linear-gradient(to right, rgba(122, 31, 28, .05) 1px, transparent 1px), linear-gradient(to bottom, rgba(122, 31, 28, .05) 1px, transparent 1px); }
.bgfx-spot::before { opacity: .6; animation: none; }
.grain { opacity: .05; }
#work::before, #team::before { -webkit-text-stroke-color: rgba(122, 31, 28, .07); }

/* ---------- v16: 3D silk surface (silk.js) replaces the aurora when WebGL is available ---------- */
.silk { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -3; pointer-events: none; display: block; }
.has-silk .aurora { display: none; }
.has-silk .alt { background: linear-gradient(to bottom, rgba(239, 233, 225, 0), rgba(239, 233, 225, .38) 160px, rgba(239, 233, 225, .38) calc(100% - 160px), rgba(239, 233, 225, 0)) !important; }
.has-silk .hero::before { opacity: .55; }