/* === ARTISTIC MOTION BACKGROUNDS ===
   Each canvas is a self-contained looping background, sized to fill its container.
   Performance: all GPU-friendly transforms; no JS animation loops; pure CSS where possible.
*/

.bg-canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.bg-canvas > * {
  position: absolute;
  pointer-events: none;
}

/* Make hero content sit above canvas */
.hero, .page-head { position: relative; }
.hero > .wrap, .hero > .hero-grid, .hero > .hero-flourish,
.page-head > .wrap { position: relative; z-index: 2; }

/* ============================================
   1. HOME — Rotating wireframe armature + ascending embers.
   Designed to FRAME the hero, not crowd it. Elements live
   at the edges and corners, leaving the center clear for type.
   ============================================ */
.bg-home {
  perspective: 1800px;
  perspective-origin: 50% 50%;
}
.bg-home::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse at 15% 90%, rgba(38,100,234,0.05), transparent 45%),
    radial-gradient(ellipse at 85% 10%, rgba(200,85,61,0.04), transparent 45%);
  animation: bgDrift 40s ease-in-out infinite alternate;
}
@keyframes bgDrift {
  to { transform: translate(4%, -4%); }
}

/* --- 3D wireframe armature (anchored corner-right, slow rotation) --- */
.bg-home .armature {
  position: absolute;
  top: 50%;
  right: -120px;
  width: 520px;
  height: 520px;
  transform: translateY(-50%);
  perspective: 1400px;
  opacity: 0.55;
}
@media (max-width: 1100px) {
  .bg-home .armature { right: -260px; opacity: 0.35; }
}
@media (max-width: 700px) {
  .bg-home .armature { display: none; }
}
.bg-home .cube {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: cubeSpin 38s linear infinite;
}
@keyframes cubeSpin {
  from { transform: rotateX(-18deg) rotateY(0deg) rotateZ(2deg); }
  to   { transform: rotateX(-18deg) rotateY(360deg) rotateZ(2deg); }
}
.bg-home .face {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(22,19,16,0.22);
  background:
    linear-gradient(to right, rgba(22,19,16,0.06) 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(to bottom, rgba(22,19,16,0.06) 1px, transparent 1px) 0 0 / 52px 52px;
}
.bg-home .fx  { transform: translateZ( 260px); }
.bg-home .fx2 { transform: translateZ(-260px) rotateY(180deg); }
.bg-home .fy  { transform: translateY(-260px) rotateX(90deg); }
.bg-home .fy2 { transform: translateY( 260px) rotateX(-90deg); }
.bg-home .fz  { transform: translateX(-260px) rotateY(-90deg); border-color: rgba(38,100,234,0.35); }
.bg-home .fz2 { transform: translateX( 260px) rotateY(90deg);  border-color: rgba(200,85,61,0.30); }

/* --- Ascending starfield (tiny embers drifting up) --- */
.bg-home .starfield {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bg-home .starfield span {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--ember);
  opacity: 0;
  animation: ember 12s linear infinite;
}
.bg-home .starfield span:nth-child(1)  { left: 6%;  bottom: -10px; animation-delay:  0s;   animation-duration: 14s; }
.bg-home .starfield span:nth-child(2)  { left: 14%; bottom: -10px; animation-delay: -1.2s; animation-duration: 18s; }
.bg-home .starfield span:nth-child(3)  { left: 22%; bottom: -10px; animation-delay: -3.5s; animation-duration: 16s; }
.bg-home .starfield span:nth-child(4)  { left: 8%;  bottom: -10px; animation-delay: -5.0s; animation-duration: 20s; }
.bg-home .starfield span:nth-child(5)  { left: 18%; bottom: -10px; animation-delay: -7.0s; animation-duration: 15s; }
.bg-home .starfield span:nth-child(6)  { left: 4%;  bottom: -10px; animation-delay: -8.0s; animation-duration: 22s; }
.bg-home .starfield span:nth-child(7)  { left: 26%; bottom: -10px; animation-delay: -2.0s; animation-duration: 19s; }
.bg-home .starfield span:nth-child(8)  { left: 12%; bottom: -10px; animation-delay: -9.5s; animation-duration: 17s; }
.bg-home .starfield span:nth-child(9)  { left: 80%; bottom: -10px; animation-delay: -1.0s; animation-duration: 21s; }
.bg-home .starfield span:nth-child(10) { left: 86%; bottom: -10px; animation-delay: -4.0s; animation-duration: 18s; }
.bg-home .starfield span:nth-child(11) { left: 92%; bottom: -10px; animation-delay: -6.5s; animation-duration: 16s; }
.bg-home .starfield span:nth-child(12) { left: 76%; bottom: -10px; animation-delay: -8.5s; animation-duration: 20s; }
.bg-home .starfield span:nth-child(13) { left: 88%; bottom: -10px; animation-delay: -10.5s; animation-duration: 14s; }
.bg-home .starfield span:nth-child(14) { left: 82%; bottom: -10px; animation-delay: -2.5s; animation-duration: 23s; }
.bg-home .starfield span:nth-child(15) { left: 96%; bottom: -10px; animation-delay: -7.5s; animation-duration: 17s; }
.bg-home .starfield span:nth-child(16) { left: 30%; bottom: -10px; animation-delay: -3.0s; animation-duration: 19s; background: rgba(38,100,234,0.7); }
.bg-home .starfield span:nth-child(17) { left: 70%; bottom: -10px; animation-delay: -6.0s; animation-duration: 21s; background: rgba(38,100,234,0.7); }
.bg-home .starfield span:nth-child(18) { left: 50%; bottom: -10px; animation-delay: -11.0s; animation-duration: 24s; background: rgba(38,100,234,0.7); width: 3px; height: 3px; }
.bg-home .starfield span:nth-child(19) { left: 2%;  bottom: -10px; animation-delay: -4.5s; animation-duration: 18s; }
.bg-home .starfield span:nth-child(20) { left: 98%; bottom: -10px; animation-delay: -5.5s; animation-duration: 22s; }
.bg-home .starfield span:nth-child(21) { left: 20%; bottom: -10px; animation-delay: -10.0s; animation-duration: 16s; }
.bg-home .starfield span:nth-child(22) { left: 78%; bottom: -10px; animation-delay: -3.8s; animation-duration: 20s; }
.bg-home .starfield span:nth-child(23) { left: 10%; bottom: -10px; animation-delay: -9.0s; animation-duration: 25s; width: 3px; height: 3px; }
.bg-home .starfield span:nth-child(24) { left: 90%; bottom: -10px; animation-delay: -11.5s; animation-duration: 19s; }
@keyframes ember {
  0%   { opacity: 0; transform: translateY(0) translateX(0); }
  10%  { opacity: 0.85; }
  85%  { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(-110vh) translateX(20px); }
}

/* --- Breathing rule (anchored to bottom, never crosses text) --- */
.bg-home .breath-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ============================================
   2. WORK — Orbital Frames (blueprint planes in 3D)
   ============================================ */
.bg-work {
  perspective: 1800px;
  perspective-origin: 50% 50%;
}
.bg-work::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(38,100,234,0.05), transparent 60%);
}
.bg-work .frame {
  border: 1px solid rgba(22,19,16,0.18);
  background: rgba(245,241,234,0.3);
  transform-style: preserve-3d;
  will-change: transform;
}
.bg-work .frame::before {
  content: "";
  position: absolute;
  inset: 12px;
  background-image:
    linear-gradient(to right, rgba(22,19,16,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22,19,16,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}
.bg-work .frame::after {
  content: attr(data-meta);
  position: absolute;
  bottom: 8px; left: 12px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgba(22,19,16,0.4);
  text-transform: uppercase;
}
.bg-work .f1 { top: 8%; left: 6%; width: 280px; height: 180px; animation: orbit1 30s linear infinite; }
.bg-work .f2 { top: 12%; right: 10%; width: 220px; height: 280px; animation: orbit2 38s linear infinite; }
.bg-work .f3 { bottom: 8%; left: 18%; width: 320px; height: 200px; animation: orbit3 34s linear infinite; }
.bg-work .f4 { bottom: 14%; right: 22%; width: 180px; height: 240px; animation: orbit4 42s linear infinite; }
@keyframes orbit1 { to { transform: rotateY(360deg) translateZ(40px); } }
@keyframes orbit2 { from { transform: rotateY(20deg) rotateX(-8deg); } to { transform: rotateY(380deg) rotateX(-8deg) translateZ(60px); } }
@keyframes orbit3 { from { transform: rotateY(-15deg) rotateX(6deg); } to { transform: rotateY(345deg) rotateX(6deg) translateZ(40px); } }
@keyframes orbit4 { from { transform: rotateY(25deg) rotateX(-4deg); } to { transform: rotateY(385deg) rotateX(-4deg) translateZ(50px); } }

/* ============================================
   3. SERVICES — Flowing Grid Mesh (the bones)
   SVG path that warps continuously
   ============================================ */
.bg-services {
  background: var(--paper);
}
.bg-services svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.bg-services .mesh-line {
  fill: none;
  stroke: rgba(22,19,16,0.12);
  stroke-width: 1;
}
.bg-services .mesh-accent {
  fill: none;
  stroke: rgba(38,100,234,0.4);
  stroke-width: 1.2;
}
.bg-services .pulse-dot {
  fill: var(--accent);
  opacity: 0.7;
}

/* ============================================
   4. PRICING — Ascending Rules + Drifting Numerals
   ============================================ */
.bg-pricing::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(38,100,234,0.05), transparent 60%);
}
.bg-pricing .num-drift {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: clamp(120px, 18vw, 280px);
  color: rgba(22,19,16,0.05);
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: -0.04em;
  user-select: none;
  will-change: transform;
}
.bg-pricing .n1 { top: 8%; left: 6%; animation: numFloat1 28s ease-in-out infinite alternate; }
.bg-pricing .n2 { bottom: 12%; right: 8%; animation: numFloat2 32s ease-in-out infinite alternate; color: rgba(38,100,234,0.08); }
.bg-pricing .n3 { top: 50%; left: 50%; transform: translate(-50%, -50%); animation: numFloat3 36s ease-in-out infinite alternate; }
@keyframes numFloat1 { to { transform: translate(60px, -40px) rotate(-3deg); } }
@keyframes numFloat2 { to { transform: translate(-50px, 30px) rotate(2deg); } }
@keyframes numFloat3 { to { transform: translate(calc(-50% + 30px), calc(-50% + 20px)) rotate(1deg); } }

.bg-pricing .ascend-rule {
  width: 70%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--accent) 50%, transparent);
  opacity: 0.3;
  left: 15%;
}
.bg-pricing .ar1 { bottom: 10%; animation: ascend 8s ease-out infinite; }
.bg-pricing .ar2 { bottom: 10%; animation: ascend 8s ease-out infinite; animation-delay: -2.6s; }
.bg-pricing .ar3 { bottom: 10%; animation: ascend 8s ease-out infinite; animation-delay: -5.3s; }
@keyframes ascend {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 0.4; }
  100% { transform: translateY(-100vh); opacity: 0; }
}

/* ============================================
   5. CONTACT — Wandering Ink Line (signature)
   ============================================ */
.bg-contact {
  background: var(--paper);
}
.bg-contact svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.bg-contact .ink-stroke {
  fill: none;
  stroke: rgba(38,100,234,0.4);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation: ink 14s ease-in-out infinite;
}
.bg-contact .ink-secondary {
  stroke: rgba(22,19,16,0.15);
  stroke-width: 1;
  animation-delay: -3s;
  animation-duration: 18s;
}
@keyframes ink {
  0%   { stroke-dashoffset: 3000; }
  45%  { stroke-dashoffset: 0; }
  55%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -3000; }
}
.bg-contact .ink-dot {
  fill: var(--accent);
  opacity: 0;
  animation: inkDot 14s ease-in-out infinite;
}
@keyframes inkDot {
  0%, 40% { opacity: 0; }
  45% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bg-canvas *, .bg-canvas *::before, .bg-canvas *::after {
    animation: none !important;
    transition: none !important;
  }
}