/* Atsus film: one continuous 3D world. The camera moves the world; objects live
   in it and feed into each other. Shares type and scrap styles with scenes.css. */
.fl { position: absolute; inset: 0; overflow: hidden; font-family: "Inter", system-ui, sans-serif; color: #ecf0f6; -webkit-font-smoothing: antialiased; }
.fl * { box-sizing: border-box; }
.fl .cam { position: absolute; inset: 0; perspective: 1600px; perspective-origin: 50% 48%; }
.fl .rig { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-style: preserve-3d; transform-origin: 960px 540px; }
.fl .world { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-style: preserve-3d; transform-origin: 960px 540px; }
.fl .o { position: absolute; }
.fl .flat { position: absolute; inset: 0; pointer-events: none; }

/* the job card: a two-sided object (front = job sheet, back = invoice) */
.fl .jc { position: absolute; transform-style: preserve-3d; transform-origin: 50% 50%; }
.fl .face { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 30px; background: #ffffff; color: #0e1218;
  box-shadow: 0 22px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05); }
.fl .face.back { transform: rotateY(180deg) translateZ(1px); }
.fl .face.front { transform: translateZ(1px); }
.fl .lbl { position: absolute; font-family: "JetBrains Mono", monospace; font-size: 15px; font-weight: 700; letter-spacing: .14em; color: #8a93a6; }
.fl .skel { position: absolute; border-radius: 10px; background: #eef0f5; }
.fl .dash { position: absolute; border: 2px dashed #d6dae3; border-radius: 16px; }
.fl .av { position: absolute; width: 56px; height: 56px; border-radius: 50%; color: #fff; font-size: 20px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.fl .pillx { position: absolute; border-radius: 999px; font-weight: 800; white-space: nowrap; text-align: center; }
.fl .row { position: absolute; display: flex; justify-content: space-between; align-items: center; font-size: 22px; font-weight: 500; }
.fl .row em { font-style: normal; color: #6b7487; font-size: 18px; }
.fl .ph { position: absolute; border-radius: 16px; overflow: hidden; background: #dfe3ea; }
.fl .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl .ph span { position: absolute; left: 10px; bottom: 10px; background: rgba(10,12,17,.72); color: #fff; font-size: 15px; font-weight: 700; border-radius: 8px; padding: 3px 9px; }

/* things that fly between objects */
.fl .chip { position: absolute; display: flex; align-items: center; gap: 10px; background: #ffffff; color: #0e1218; border-radius: 999px; padding: 0 22px; height: 52px; font-size: 22px; font-weight: 800;
  white-space: nowrap; box-shadow: 0 0 0 3px #ffd11a, 0 0 40px rgba(255,209,26,.55), 0 20px 50px rgba(0,0,0,.5); }
.fl .fly { position: absolute; white-space: nowrap; }
.fl .ring { position: absolute; border-radius: 50%; border: 3px solid rgba(255,209,26,.9); box-shadow: 0 0 24px rgba(255,209,26,.6); }

/* invoice */
.fl .inv-row { position: absolute; left: 40px; right: 40px; height: 58px; display: flex; align-items: center; border-top: 1.5px solid #eef0f5; font-size: 21px; }
.fl .inv-row .w1 { flex: 1; font-weight: 600; }
.fl .inv-row .w2 { width: 70px; color: #6b7487; font-size: 18px; }
.fl .inv-row .w3 { width: 130px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* light */
.fl .spot { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,209,26,.30), rgba(255,209,26,.08) 55%, rgba(255,209,26,0)); }
.fl .cap { position: absolute; font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 22px; letter-spacing: .16em; white-space: nowrap; color: #ecf0f6; }
.fl .cap b { color: #ffd11a; margin-right: 18px; }

/* the pipeline */
.fl .pcard { background: #ffffff; color: #0e1218; border-radius: 24px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.fl .pmi { background: #ffffff; color: #0e1218; border-radius: 30px; box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 3px #ffd11a, 0 0 60px rgba(255,209,26,.35); }

/* phones: no filters inside the 3D world (they force huge offscreen layers) */
.fl .frag { filter: none; }
.fl .frag > div { box-shadow: 0 16px 30px rgba(0,0,0,.45); }
.fl .pcard { box-shadow: 0 18px 40px rgba(0,0,0,.45); }
/* keep the job card rastered once while the camera moves around it (stops phones re-rastering it every frame) */
.fl .jc { will-change: transform; }
/* things that change every frame get their own small layer, so the card around them is not repainted each frame */
.fl .fc-hours, .fl .fc-sig, .fl .fl-ptimer, .fl .fl-mamt { will-change: transform; }