/* ============================================================
   BUREAU OF MINOR SUFFERINGS — SPATIAL LAYER  (loads LAST)
   "You physically walked into the Bureau."
   One building, one material language: frosted glass, brushed
   brass, wood, aged paper, warm interior light.
   Built on the existing brand tokens (gold/paper/navy) + self-
   hosted Cinzel — NOT a re-skin. Additive, cascade-winning.
   Perf discipline: textures are CSS/inline-SVG only (zero image
   requests); real 3D + parallax is desktop-pointer only; every
   motion honors prefers-reduced-motion; certificate export
   (html2canvas) is never touched.
   ============================================================ */

:root{
  /* ── new MATERIAL accent tokens (additive; no wood existed before) ── */
  --wood:#4a3018;
  --wood-dark:#2e1c0d;
  --wood-light:#6a4a28;
  --wood-grain:repeating-linear-gradient(94deg,rgba(0,0,0,.10) 0 2px,rgba(255,255,255,.015) 2px 5px,transparent 5px 27px);
  --brass:#c9a033;
  --brass-deep:#8a6d1f;
  --brass-light:#f0d878;
  --brass-ramp:linear-gradient(180deg,#f0d878 0%,#c9a033 34%,#8a6d1f 68%,#5a4413 100%);
  --brass-edge:linear-gradient(90deg,#6d5522,#f3e3b4 38%,#c9a033 55%,#7E611F 82%,#513c14);
  --glass-frost:linear-gradient(155deg,rgba(34,57,86,.42),rgba(12,26,46,.6) 72%);
  --smoke:#6b675d;
  --warm-glow:rgba(243,227,180,.85);
  --desk-shadow:0 24px 44px -14px rgba(0,0,0,.62),0 6px 14px -6px rgba(0,0,0,.5);
}

/* ============================================================
   PHASE 1 — THE ENTRANCE  (the signature)
   The hero becomes a frosted-glass lobby you can look into.
   Every conversion element (counter, CTA, typewriter) stays —
   they are fused into the lobby, not deleted.
   ============================================================ */

/* The room BEHIND the glass — warm interior light + terrazzo floor.
   Stays still while the glass rig tilts (that contrast = the parallax). */
.hero .lobby-backdrop{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.hero .lobby-backdrop::before{
  /* interior light, as if the office is still open */
  content:'';position:absolute;left:50%;top:34%;width:900px;height:620px;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse 50% 50% at 50% 50%,var(--warm-glow),rgba(243,227,180,.10) 42%,transparent 70%);
  opacity:.16;mix-blend-mode:screen;
  animation:lobbyFlicker 7s ease-in-out infinite;
}
.hero .lobby-backdrop::after{
  /* terrazzo / marble floor suggestion at the base */
  content:'';position:absolute;left:0;right:0;bottom:0;height:200px;
  background:
    radial-gradient(120% 60% at 50% 130%,rgba(201,160,51,.06),transparent 60%),
    linear-gradient(180deg,transparent,rgba(5,10,20,.82));
}
@keyframes lobbyFlicker{
  0%,100%{opacity:.16;} 46%{opacity:.15;} 50%{opacity:.185;} 52%{opacity:.14;} 56%{opacity:.17;}
}

/* The glass PANEL the lobby content sits on. Pseudo of .hero-inner so it
   tilts WITH the content as one rig. Frosted, brass-framed, back-lit. */
.hero .hero-inner{position:relative;}
.hero .hero-inner::before{
  content:'';position:absolute;inset:-34px -28px;z-index:-1;border-radius:4px;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,rgba(255,255,255,.012) 1px 3px),
    var(--glass-frost);
  border:1px solid rgba(201,160,51,.34);
  box-shadow:
    0 40px 90px -22px rgba(0,0,0,.78),
    0 0 0 1px rgba(201,160,51,.18),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 0 70px rgba(4,10,20,.5);
}
/* brushed-brass door frame highlight along the top of the glass */
.hero .hero-inner::after{
  content:'';position:absolute;inset:-34px -28px auto;height:3px;z-index:-1;border-radius:4px 4px 0 0;
  background:var(--brass-edge);opacity:.6;
}
@supports ((-webkit-backdrop-filter:blur(3px)) or (backdrop-filter:blur(3px))){
  .hero .hero-inner::before{
    background:
      repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,rgba(255,255,255,.012) 1px 3px),
      linear-gradient(155deg,rgba(34,57,86,.28),rgba(12,26,46,.42) 72%);
    -webkit-backdrop-filter:blur(3px) saturate(1.05);backdrop-filter:blur(3px) saturate(1.05);
  }
}

/* Seal — etched into the glass: a frosted disc + brass ring + inner glow */
.hero .agency-seal{
  border-radius:50%;
  background:radial-gradient(circle at 50% 42%,rgba(243,227,180,.14),rgba(10,22,40,.35) 66%);
  box-shadow:
    0 0 0 1px rgba(201,160,51,.4),
    0 0 0 6px rgba(10,22,40,.25),
    inset 0 0 24px rgba(4,10,20,.5),
    inset 0 1px 0 rgba(255,255,255,.08);
  padding:6px;
}
.hero .seal-svg{filter:drop-shadow(0 1px 0 rgba(255,255,255,.12)) drop-shadow(0 -1px 1px rgba(0,0,0,.5));}

/* Title — engraved on the glass (premium.css already foils it; add the cut) */
.hero .agency-title{
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.14)) drop-shadow(0 -1px 2px rgba(0,0,0,.55));
}

/* Stats → brushed-brass building-directory plaques (counter stays visible) */
.hero .stat{
  background:linear-gradient(180deg,rgba(14,26,46,.96),rgba(8,16,30,.96))!important;
  border:1px solid rgba(201,160,51,.28)!important;
  border-top:2px solid rgba(240,216,120,.45)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 10px 24px rgba(0,0,0,.45)!important;
  border-radius:2px;
}

/* Divider diamond chip sits on navy (theme-safe: force navy, not var) */
.hero .hero-divider::after{background:#0a1628;}

/* CTA → a beveled brass PUSH-PLATE you reach for */
.hero .hero-cta-btn{
  background:var(--brass-ramp)!important;
  background-size:100% 220%!important;background-position:50% 30%!important;
  color:#2a2008!important;border:1px solid rgba(240,216,120,.75)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.28)!important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 -3px 0 rgba(74,54,12,.5) inset,
    0 10px 26px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.4)!important;
}
.hero .hero-cta-btn:hover{background-position:50% 70%!important;}

/* Dust motes in the light (repurpose the existing gold particles) */
.hero .hero-particles::before,.hero .hero-particles::after{
  background:rgba(243,227,180,.5);
}

/* ── The real 3D rig: desktop pointers only, motion-safe ──────────── */
@media (pointer:fine) and (prefers-reduced-motion:no-preference){
  .hero{perspective:1500px;perspective-origin:50% 42%;}
  .hero .hero-inner{
    transform-style:preserve-3d;
    transition:transform .32s cubic-bezier(.22,.61,.36,1);
    will-change:transform;
  }
  /* depth separation so the tilt reveals genuine layering, not a flat image */
  .hero .hero-inner::before{transform:translateZ(-38px);}
  .hero .hero-inner::after{transform:translateZ(-36px);}
  .hero .agency-seal{transform:translateZ(34px);}
  .hero .agency-title{transform:translateZ(24px);}
  .hero .agency-subtitle,.hero .hero-divider{transform:translateZ(16px);}
  .hero .hero-typewriter,.hero .hero-stats{transform:translateZ(12px);}
  .hero .hero-cta-btn{transform:translateZ(44px);}
}

@media (prefers-reduced-motion:reduce){
  .hero .lobby-backdrop::before{animation:none;}
}

/* ============================================================
   PHASE 2 — THE INTAKE WINDOW  (the material layer)
   The filing form becomes a service partition: an aged-paper
   form resting on a brass-edged counter, sat slightly proud of
   the page like a real document at a window. Same materials as
   the lobby (brass, glass, paper) at lower intensity so the
   whole site reads as one building. Restyle-only — no JS hooks
   touched; beats main.min.css's 5 form layers by loading last.
   ============================================================ */

/* The counter the form sits on — a brass-edged service ledge.
   Wraps the form via its own shadow + a brass lip along the top. */
.filing-form{
  position:relative;
  border:1px solid rgba(138,109,31,.5);
  border-top:none;                              /* the brass lip becomes the top edge */
  box-shadow:
    0 2px 0 rgba(255,255,255,.5) inset,          /* paper catch-light */
    0 0 0 1px rgba(138,109,31,.15),
    0 28px 60px -18px rgba(4,10,20,.6),          /* the form floats above the counter */
    0 10px 22px -12px rgba(4,10,20,.5);
}
/* brushed-brass counter lip across the top of the form */
.filing-form .form-top-border{
  position:relative;
  background:var(--brass-ramp);
  border:none;border-radius:2px 2px 0 0;
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 -2px 0 rgba(74,54,12,.4) inset,0 6px 14px -6px rgba(4,10,20,.5);
  padding:9px 0;margin:-1px -1px 0;             /* meet the form edges exactly */
}
.filing-form .form-top-border span{
  color:#2a2008;text-shadow:0 1px 0 rgba(255,255,255,.35);
  letter-spacing:3px;font-weight:700;
}

/* Queue line → a "NOW SERVING" brass plate at the window */
.filing-form .form-queue{
  display:block;text-align:center;
  margin:16px auto 4px;padding:7px 18px;max-width:max-content;
  background:linear-gradient(180deg,rgba(14,26,46,.96),rgba(8,16,30,.96));
  border:1px solid rgba(201,160,51,.4);border-top:2px solid rgba(240,216,120,.5);
  border-radius:2px;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 6px 16px -8px rgba(4,10,20,.6);
  color:rgba(245,240,232,.75);letter-spacing:1.5px;
}
.filing-form .form-queue .form-queue-num{
  color:var(--brass-light);font-weight:700;
  text-shadow:0 0 10px rgba(240,216,120,.25);
}

/* Inputs → recessed slots pressed into the counter (you write INTO the form) */
.filing-form input[type="text"],
.filing-form input[type="email"],
.filing-form textarea,
.filing-form select{
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.75))!important;
  box-shadow:
    0 2px 5px rgba(26,18,9,.14) inset,
    0 1px 0 rgba(255,255,255,.55);
  border:1px solid rgba(138,109,31,.28);
  border-radius:2px;
}
.filing-form input[type="text"]:focus,
.filing-form input[type="email"]:focus,
.filing-form textarea:focus,
.filing-form select:focus{
  background:rgba(255,255,255,.96)!important;
  box-shadow:
    0 0 0 3px rgba(201,160,51,.18),
    0 2px 5px rgba(26,18,9,.12) inset!important;
  border-color:var(--brass)!important;
}

/* Submit → a brass call-bell / stamp plate you strike to file.
   Extends premium.css's letterpress physics; adds brass body + bevel. */
.filing-form .submit-btn{
  background:var(--brass-ramp)!important;
  background-size:100% 220%!important;background-position:50% 28%!important;
  color:#2a2008!important;border:1px solid rgba(240,216,120,.7)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.3)!important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.42) inset,
    0 -3px 0 rgba(74,54,12,.5) inset,
    0 8px 20px -8px rgba(4,10,20,.55),0 2px 5px rgba(4,10,20,.4)!important;
}
.filing-form .submit-btn:not(:disabled):hover{background-position:50% 66%!important;}

/* Turnstile → the "human verification" window pane, frosted */
.turnstile-wrapper{
  /* match the box to the Cloudflare dark-theme widget (charcoal ~#232323)
     so the widget sits flush in its frame instead of on a navy panel */
  background:#232326!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 2px 8px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.04) inset;
}
.turnstile-wrapper .turnstile-label{
  color:rgba(233,231,225,.55)!important;
  border-bottom-color:rgba(255,255,255,.12)!important;
}

/* ── Nav → frosted office directory bar (deepen premium.css blur) ── */
.top-nav{
  border-bottom:1px solid rgba(201,160,51,.24);
  box-shadow:0 1px 0 rgba(240,216,120,.08) inset,0 6px 22px -12px rgba(4,10,20,.6);
}
@supports ((-webkit-backdrop-filter:blur(3px)) or (backdrop-filter:blur(3px))){
  .top-nav{-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);}
}

/* ============================================================
   PHASE 3 — THE DESK  (highest-value screen)
   The finished certificate no longer floats on the dark page —
   it rests on a wood-grain desk under a warm desk lamp, like a
   file a clerk just set down in front of you.
   CRITICAL: the desk is #certificate-output (the OUTER container).
   html2canvas captures #the-certificate only, and JS owns the
   inline transform on .cert-scale-wrapper (cursor tilt) and the
   scale() on .certificate — so the desk NEVER enters the export
   and NEVER fights the existing 3D tilt. We only add the desk
   surface + the shadow the certificate casts onto it.
   ============================================================ */

/* The desk surface — real wood grain, warm lamp pooled at top-center,
   darker toward the edges. Only visible once the cert is revealed. */
#certificate-output.visible{
  position:relative;
  margin:8px auto 28px;padding:46px 30px 40px!important;   /* beats the padding:0!important reset */
  border-radius:4px;
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(243,227,180,.16),transparent 55%),  /* desk-lamp pool */
    var(--wood-grain),
    linear-gradient(176deg,var(--wood-light) 0%,var(--wood) 42%,var(--wood-dark) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 -40px 60px -30px rgba(0,0,0,.5) inset,     /* edge falloff, room dims outward */
    0 30px 70px -26px rgba(0,0,0,.7);            /* the desk itself sits in the room */
  border:1px solid rgba(0,0,0,.35);
  border-top-color:rgba(122,90,40,.4);
}
/* worn desk edge highlight (front lip catching the lamp) */
#certificate-output.visible::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:14px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.28));
  border-radius:0 0 4px 4px;
}

/* The certificate now casts a real contact shadow onto the wood.
   premium.css put a drop-shadow on .cert-scale-wrapper; deepen &
   warm it so the paper reads as lying ON the desk, lifted at one edge
   by the existing cursor tilt. Transform stays owned by JS. */
#certificate-output.visible .cert-scale-wrapper{
  filter:
    drop-shadow(0 2px 3px rgba(0,0,0,.4))
    drop-shadow(0 26px 34px rgba(0,0,0,.55));
}

/* Mobile: the desk stays, padding tightens so the cert keeps room */
@media (max-width:600px){
  #certificate-output.visible{padding:22px 12px 26px!important;}
}

/* ============================================================
   THE BACK OFFICE — INTER-OFFICE ROUTING SLIP  (processing overlay)
   Replaces the "CLASSIFIED terminal" metaphor: your file is walked
   desk to desk through the Bureau's departments while it processes.
   Reuses the existing Mozart-synced JS unchanged — JS just toggles
   .active/.done on each #tstep-N; we restyle those into desks and
   let the manila file token hop to whichever desk is .active.
   ============================================================ */
.terminal-routing-sub{
  font-family:'Courier Prime',monospace;font-size:10px;letter-spacing:.5px;
  color:rgba(245,240,232,.42);text-align:center;font-style:italic;
  margin:-8px 0 16px;position:relative;z-index:2;
}
.routing-slip{position:relative;}

/* each step becomes a routing desk: [clerk] [dept/who/status] [file] [✓] */
.terminal-step.desk{
  display:flex;align-items:center;gap:12px;
  border-bottom:none!important;
  transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .5s ease,background .3s ease;
}
/* the zigzag: even desks step to the right, so the route staircases down.
   translateX (not margin) so it never fights main.min.css's active-state margins. */
.desk-r{transform:translateX(44px);}
@media (max-width:520px){ .desk-r{transform:translateX(16px);} .terminal-step.desk{gap:9px;} }

.desk-clerk{flex-shrink:0;width:40px;height:40px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));}
.desk-clerk .clerk-svg{width:100%;height:100%;display:block;}

.desk-info{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;text-align:left;}
.desk-dept{font-family:'Cinzel',serif;font-size:11px;font-weight:700;letter-spacing:.4px;color:rgba(245,240,232,.92);line-height:1.25;}
.desk-dept .tstep-num{color:var(--brass,#c9a033);opacity:.75;margin-right:3px;font-size:10px;}
.desk-room{color:rgba(201,160,51,.5);font-weight:400;font-family:'Courier Prime',monospace;font-size:9px;letter-spacing:.4px;white-space:nowrap;}
.desk-who{font-family:'Courier Prime',monospace;font-size:8.5px;letter-spacing:1.2px;text-transform:uppercase;color:rgba(245,240,232,.38);}
.terminal-step.desk .tstep-text{font-family:'Courier Prime',monospace;font-size:12px;color:rgba(245,240,232,.5);letter-spacing:.2px;margin-top:2px;line-height:1.4;}

/* the traveling manila file — lands at whichever desk is currently handling it */
.desk-file{flex-shrink:0;opacity:0;transition:opacity .3s ease;}
.terminal-step.active .desk-file{opacity:1;animation:deskFileArrive .42s cubic-bezier(.34,1.3,.5,1) both;}
.terminal-step.done .desk-file{opacity:0;}
@keyframes deskFileArrive{
  0%{transform:translateX(-16px) translateY(-7px) rotate(-9deg);opacity:0;}
  100%{transform:translateX(0) translateY(0) rotate(0);opacity:1;}
}

/* the ✓ stamps in once a desk has finished with your file */
.terminal-step.desk .tstep-check{flex-shrink:0;color:var(--brass,#c9a033);font-weight:700;font-size:14px;opacity:0;transform:scale(.5) rotate(-12deg);transition:opacity .3s ease,transform .3s cubic-bezier(.34,1.3,.5,1);}
.terminal-step.done .tstep-check{opacity:.85;transform:scale(1) rotate(-6deg);}
.terminal-step.active .tstep-check{opacity:0;}

@media (prefers-reduced-motion:reduce){
  .terminal-step.desk,.desk-file{transition:none!important;}
  .terminal-step.active .desk-file{animation:none;}
}

/* ════════════════════════════════════════════════════════════
   DESKTOP POLISH — wide-viewport material walls (≥1100px only)
   Mobile fills its viewport so the flat body background never
   shows; at 1920px the ~900px column floats in dead black flanks.
   Turn the flanks into the Bureau's office wall: paneling, a warm
   light pool behind the column, ledger hairlines framing it, and
   a vignette so edges fade instead of flatlining. body::after is
   unclaimed (main.css owns body::before) — painted above it,
   both z-index:-1 so all content stays on top.
   ════════════════════════════════════════════════════════════ */
@media (min-width:1100px){
  body::after{
    content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:
      /* vignette — corners melt into shadow */
      radial-gradient(ellipse 130% 100% at 50% 38%, transparent 52%, rgba(0,0,0,.52) 100%),
      /* ledger hairlines framing the content column */
      linear-gradient(90deg,
        transparent calc(50% - 561px), rgba(201,160,51,.09) calc(50% - 561px),
        rgba(201,160,51,.09) calc(50% - 560px), transparent calc(50% - 560px)),
      linear-gradient(90deg,
        transparent calc(50% + 560px), rgba(201,160,51,.09) calc(50% + 560px),
        rgba(201,160,51,.09) calc(50% + 561px), transparent calc(50% + 561px)),
      /* warm light pool behind the column — the reading lamp */
      radial-gradient(ellipse 1000px 70% at 50% 10%, rgba(201,160,51,.045), transparent 68%),
      /* office-wall paneling: broad bays + seam shadows */
      repeating-linear-gradient(90deg,
        rgba(255,255,255,.014) 0 1px, transparent 1px 179px,
        rgba(0,0,0,.30) 179px 181px, transparent 181px 182px),
      /* wall wash — warmer at eye level, darker at the skirting */
      linear-gradient(180deg,#0e0b07 0%,#0b0905 45%,#080604 100%);
  }
  /* hero flanks: let the lobby edges melt into the room instead of
     ending on a hard flat navy */
  .hero{box-shadow:inset 0 0 180px rgba(0,0,0,.5), inset 0 -40px 80px -40px rgba(0,0,0,.55);}
}