/* Braventon - depth layer: CSS 3D scene, iso tower, cubes, extruded type, tilt. No dependencies. */
@layer pages {
  /* ---------- extruded display type ---------- */
  .bv-hero h1 em {
    text-shadow:
      1px 1px 0 var(--color-cone-deep), 2px 2px 0 var(--color-cone-deep), 3px 3px 0 var(--color-cone-deep), 4px 4px 0 var(--color-cone-deep),
      5px 5px 0 var(--color-ink), 6px 6px 0 var(--color-ink), 7px 7px 0 var(--color-ink), 8px 8px 0 var(--color-ink), 14px 18px 22px rgb(23 26 29 / .35);
  }
  .bv-process__n, .bv-order__n {
    color: var(--color-tape); -webkit-text-stroke: 0;
    text-shadow: 1px 1px 0 var(--color-ink), 2px 2px 0 var(--color-ink), 3px 3px 0 var(--color-ink), 4px 4px 0 var(--color-ink), 5px 5px 0 var(--color-ink), 6px 6px 0 var(--color-ink), 10px 12px 14px rgb(23 26 29 / .3);
  }
  .bv-pagehead h1, .bv-cta h2 { text-shadow: 3px 3px 0 rgb(23 26 29 / .14); }
  .bv-cta h2 { text-shadow: 2px 2px 0 var(--color-cone-deep), 4px 4px 0 var(--color-ink); }

  /* ---------- hero stage ---------- */
  .bv-stage { position: relative; perspective: 1500px; min-height: clamp(380px, 50vw, 600px); --srx: 0deg; --sry: 0deg; }
  .bv-stage__in { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--srx)) rotateY(var(--sry)); transition: transform .5s var(--ease); }
  .bv-stage.is-moving .bv-stage__in { transition: transform .08s linear; }
  .bv-plate { position: absolute; right: 0; top: 2%; width: 80%; aspect-ratio: 4 / 5; transform-style: preserve-3d; transform: rotateY(-16deg) rotateX(5deg); animation: bv-float 9s ease-in-out infinite; }
  .bv-plate__img { position: absolute; inset: 0; border: var(--bw) solid var(--color-ink); background: var(--color-concrete); overflow: hidden; box-shadow: 0 40px 60px -20px rgb(23 26 29 / .55); }
  .bv-plate__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform .8s var(--ease); }
  .bv-stage:hover .bv-plate__img img { transform: scale(1.04); }
  .bv-plate::before, .bv-plate::after { content: ""; position: absolute; inset: 0; border: var(--bw) solid var(--color-ink); pointer-events: none; }
  .bv-plate::before { background: var(--color-cone); transform: translateZ(-50px) translate(26px, 26px); }
  .bv-plate::after { background: var(--color-tape); transform: translateZ(-100px) translate(52px, 52px); }
  .bv-plate__cap { position: absolute; right: -14px; bottom: 18px; z-index: 2; transform: translateZ(60px); background: var(--color-bone); border: var(--bw) solid var(--color-ink); padding: .6rem .9rem; box-shadow: 8px 8px 0 var(--color-ink); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
  .bv-plate__cap b { display: block; font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; letter-spacing: .03em; }
  @keyframes bv-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

  /* ---------- iso tower: floors drop in, then it turns slowly ---------- */
  .bv-tower { position: absolute; left: 2%; bottom: 4%; width: 150px; height: 330px; transform-style: preserve-3d; transform: translateZ(120px) rotateX(-22deg) rotateY(-34deg); transform-origin: 50% 70%; animation: bv-turn 18s ease-in-out infinite alternate; }
  @keyframes bv-turn { from { transform: translateZ(120px) rotateX(-22deg) rotateY(-34deg); } to { transform: translateZ(120px) rotateX(-22deg) rotateY(24deg); } }
  .bv-floor { position: absolute; left: 0; width: 150px; height: 42px; bottom: calc(var(--n) * 42px); transform-style: preserve-3d; animation: bv-drop .8s var(--ease) backwards; animation-delay: calc(var(--n) * .16s + .3s); }
  .bv-floor i { position: absolute; display: block; border: 2px solid var(--color-ink); backface-visibility: hidden; }
  .bv-floor .f, .bv-floor .b, .bv-floor .r, .bv-floor .l { width: 150px; height: 42px; left: 0; top: 0; }
  .bv-floor .f { transform: translateZ(75px); background: var(--color-rebar) repeating-linear-gradient(90deg, transparent 0 12px, rgb(242 183 5 / .85) 12px 22px) 6px 11px / 100% 20px no-repeat; }
  .bv-floor .b { transform: rotateY(180deg) translateZ(75px); background: var(--color-rebar); }
  .bv-floor .r { transform: rotateY(90deg) translateZ(75px); background: var(--color-steel) repeating-linear-gradient(90deg, transparent 0 14px, rgb(238 234 224 / .75) 14px 24px) 8px 11px / 100% 20px no-repeat; }
  .bv-floor .l { transform: rotateY(-90deg) translateZ(75px); background: var(--color-steel); }
  .bv-floor .t { width: 150px; height: 150px; left: 0; top: -54px; transform: rotateX(90deg) translateZ(21px); background: var(--color-concrete); }
  .bv-floor:nth-child(odd) .t { background: var(--color-cone); }
  .bv-floor:last-of-type .t { background: var(--color-tape); }
  @keyframes bv-drop { from { transform: translateY(-260px); } to { transform: translateY(0); } }
  .bv-shadow-pad { position: absolute; left: -40px; bottom: -115px; width: 230px; height: 230px; transform: rotateX(90deg) translateZ(-1px); background: radial-gradient(closest-side, rgb(23 26 29 / .42), transparent); }

  /* ---------- floating cubes (decor) ---------- */
  .bv-cube { --s: 56px; position: absolute; width: var(--s); height: var(--s); transform-style: preserve-3d; animation: bv-tumble 14s linear infinite; pointer-events: none; }
  .bv-cube i { position: absolute; inset: 0; border: 2px solid var(--color-ink); display: block; }
  .bv-cube i:nth-child(1) { transform: translateZ(calc(var(--s) / 2)); background: var(--color-cone); }
  .bv-cube i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); background: var(--color-cone-deep); }
  .bv-cube i:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); background: var(--color-tape); }
  .bv-cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); background: var(--color-concrete); }
  .bv-cube i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); background: var(--color-bone); }
  .bv-cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); background: var(--color-ink); }
  @keyframes bv-tumble { from { transform: rotateX(-20deg) rotateY(0deg); } to { transform: rotateX(340deg) rotateY(360deg); } }
  .bv-cubes { position: absolute; inset: 0; perspective: 900px; pointer-events: none; overflow: hidden; }
  .bv-cube { translate: 0 var(--py, 0px); }
  .bv-cubes--stage { overflow: visible; perspective: none; transform-style: preserve-3d; }
  .bv-cubes--stage .bv-cube { --s: 64px; right: 4%; top: 6%; translate: 0 0 150px; animation-duration: 16s; }
  .bv-pagehead .bv-cubes, .bv-cta .bv-cubes { z-index: 0; }
  .bv-pagehead__in { position: relative; z-index: 1; }
  .bv-pagehead { overflow: hidden; }
  .bv-pagehead .bv-cubes .bv-cube:nth-child(1) { --s: 64px; right: 30%; top: 12%; }
  .bv-pagehead .bv-cubes .bv-cube:nth-child(2) { --s: 36px; right: 5%; top: 10%; animation-duration: 20s; animation-direction: reverse; }
  .bv-cta .bv-cubes .bv-cube:nth-child(1) { --s: 90px; right: 16%; top: 16%; }
  .bv-cta .bv-cubes .bv-cube:nth-child(2) { --s: 46px; right: 34%; bottom: 12%; animation-duration: 22s; }
  .bv-cta .bv-cubes .bv-cube:nth-child(3) { --s: 30px; right: 6%; bottom: 20%; animation-duration: 11s; animation-direction: reverse; }
  .bv-cta__in { position: relative; z-index: 1; }
  .bv-cta .bv-cubes .bv-cube i:nth-child(1) { background: var(--color-ink); }
  .bv-cta .bv-cubes .bv-cube i:nth-child(2) { background: var(--color-rebar-2); }
  .bv-cta .bv-cubes .bv-cube i { border-color: var(--color-ink); }

  /* ---------- tilt cards (non-preserve-3d elements) ---------- */
  [data-tilt] { --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 0%; position: relative; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .35s var(--ease), box-shadow .35s var(--ease); will-change: transform; }
  [data-tilt].is-tilting { transition: transform .06s linear, box-shadow .2s; }
  [data-tilt]::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; background: radial-gradient(360px circle at var(--gx) var(--gy), rgb(255 255 255 / .28), transparent 60%); mix-blend-mode: soft-light; }
  [data-tilt].is-tilting::after { opacity: 1; }
  .bv-note-card[data-tilt], .bv-svcgrid button[data-tilt] { transform-style: preserve-3d; }
  .bv-note-card[data-tilt] > h3, .bv-note-card[data-tilt] > .bv-icon { transform: translateZ(26px); }
  .bv-svcgrid button[data-tilt] > h3, .bv-svcgrid button[data-tilt] > .bv-icon { transform: translateZ(22px); }
  .bv-svcgrid button[data-tilt]:hover { z-index: 2; }
  .bv-bento__tile { box-shadow: 0 8px 0 -3px rgb(23 26 29 / .16), 0 22px 34px -18px rgb(23 26 29 / .45); }
  .bv-bento__tile:hover { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); box-shadow: 0 14px 0 -4px rgb(23 26 29 / .2), 0 40px 50px -20px rgb(23 26 29 / .6); }
  .bv-bento__tile .bv-icon { transition: transform .4s var(--ease); }
  .bv-bento__tile:hover .bv-icon { transform: scale(1.25) rotate(-8deg); }
  .bv-bento__ghost { text-shadow: 3px 3px 0 currentColor; translate: 0 var(--py, 0px); }
  .bv-note-card { box-shadow: 0 8px 0 -3px rgb(23 26 29 / .14), 0 22px 34px -18px rgb(23 26 29 / .4); }
  .bv-note-card > .bv-icon { width: 38px; height: 38px; margin-bottom: .8rem; color: var(--color-cone); }
  .bv-process li { transition: background .2s; }
  .bv-process li:hover { background: var(--color-cone-soft); }

  @media (max-width: 639.98px) { .bv-pagehead .bv-cubes { display: none; } }
  @media (max-width: 1023.98px) { .bv-head .bv-quote { display: none; } }

  /* WebGL viewers (progressive enhancement: CSS tower stays until .has-gl) */
  .bv-stage__gl { position: absolute; inset: -4% -6% -2% -10%; z-index: 2; opacity: 0; transition: opacity .8s var(--ease); pointer-events: none; display: none; }
  .bv-stage__gl canvas { width: 100%; height: 100%; display: block; }
  .bv-hat { position: absolute; right: 7%; top: 4%; width: 220px; height: 210px; display: none; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .8s var(--ease); }
  .bv-hat canvas { width: 100%; height: 100%; display: block; }
  .bv-hat.is-live { opacity: 1; }
  @media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .bv-stage__gl, .bv-hat { display: block; }
    .bv-pagehead--hat .bv-cubes .bv-cube:nth-child(1) { display: none; }
  }
  .bv-stage.has-gl .bv-stage__gl { opacity: 1; }
  .bv-stage.has-gl .bv-plate__cap { right: auto; left: -14px; bottom: auto; top: 22px; }
  .bv-stage.has-gl .bv-tower, .bv-stage.has-gl .bv-cubes--stage { visibility: hidden; animation: none; }

  /* iso hint under the hero tag on small screens */
  @media (max-width: 959.98px) {
    .bv-stage { min-height: 420px; margin-bottom: 1.5rem; }
    .bv-plate { width: 86%; }
    .bv-tower { scale: .7; transform-origin: 0 100%; left: 20%; }
    .bv-cubes--stage { display: none; }
    .bv-plate__cap { right: -6px; bottom: auto; top: 16px; }
  }
  @media (max-width: 599.98px) {
    .bv-stage { min-height: 360px; }
    .bv-tower { left: 28%; }
  }

  @media (prefers-reduced-motion: reduce) {
    .bv-plate, .bv-tower, .bv-cube, .bv-floor { animation: none !important; }
    .bv-floor { opacity: 1; }
    [data-tilt], .bv-tile, .bv-cube { transform: none !important; }
    .bv-stage__in { transform: none !important; }
  }
  @media (hover: none) {
    [data-tilt], .bv-tile { transform: none; }
    .bv-stage__in { transform: none; }
  }
}