/* PSUNHM ambient background — shared layer rules (all options)
   Sits behind every page section (z-index:-1 on a body child), never takes clicks,
   flat colours only: no glow, gradient, glass, borders. */
.nhm-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
.nhm-bg canvas,.nhm-bg img{position:absolute;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none}
.nhm-bg .petals{inset:0;width:100%;height:100%}

/* ---------- A: live 3D Sritrang (user's tree.js), bottom-left ---------- */
.nhm-bg--a .tree3d,.nhm-bg--a .tree-still{left:calc(var(--tree-w) * -0.2);bottom:-2px;width:var(--tree-w);height:calc(var(--tree-w) * 0.653);opacity:.2}
.nhm-bg--a{--tree-w:clamp(460px,40vw,760px)}
.nhm-bg--a .tree-still{object-fit:contain;object-position:50% 100%}

/* ---------- C: flat brand illustration (baked from the same tree.js + dino.js) ---------- */
.nhm-bg--c{--tree-w:clamp(440px,38vw,720px);--p:0}
.nhm-bg--c .scene{position:absolute;left:calc(var(--tree-w) * -0.22);bottom:0;width:var(--tree-w);height:calc(var(--tree-w) * 0.653);
  transform:translate3d(0,calc(var(--p) * 18px),0);opacity:.16}
.nhm-bg--c .crown{position:absolute;inset:0;transform-origin:52% 100%;animation:nhm-sway 11s ease-in-out infinite alternate}
.nhm-bg--c .crown img{inset:0;width:100%;height:100%}
.nhm-bg--c .crown .b2{opacity:var(--bloom,0)}
/* dinos are canvases (dinos2d.js): 1.6× the dino's width so it can walk, height = the dino's width (--dw) */
.nhm-bg--c{--dw:calc(var(--tree-w) * .38)}
.nhm-bg--c .dino{width:calc(var(--dw) * 1.6);height:var(--dw);left:calc(var(--tree-w) * 0.6 - var(--dw) * .3);bottom:0;
  transform:translate3d(calc(var(--p) * -40px),0,0);opacity:var(--df,1)}   /* --df: edge fade set by dinos2d.js */
.nhm-bg--c .dino2{display:none}
@keyframes nhm-sway{0%{transform:rotate(-.55deg) skewX(.4deg)}100%{transform:rotate(.5deg) skewX(-.5deg)}}

/* C+B on home: content starts near the left edge, so the scene sits under menu text — keep it lighter */
.nhm-bg--c.is-home .scene{opacity:.1}
.nhm-bg--c.is-home .dino2{opacity:calc(.07 * var(--df,1))}
@media (max-width:760px){
  .nhm-bg--a{--tree-w:118vw}
  .nhm-bg--a .tree-still{left:-30vw;opacity:.14}
  .nhm-bg--c{--tree-w:112vw}
  .nhm-bg--c .scene{left:-34vw;opacity:.1}
  .nhm-bg--c.is-home .scene{opacity:.08}
  .nhm-bg--c{--dw:40vw}
  .nhm-bg--c .dino{left:calc(var(--tree-w) * 0.62 - var(--dw) * .3)}
}
@media (min-width:1500px){
  .nhm-bg--c .dino2{--dw2:clamp(260px,18vw,380px);display:block;position:absolute;right:calc(-3vw - var(--dw2) * .3);bottom:0;width:calc(var(--dw2) * 1.6);height:var(--dw2);opacity:calc(.1 * var(--df,1));
    transform:translate3d(calc(var(--p) * 30px),0,0)}   /* facing is drawn in the canvas; no mirror */
}
@media (prefers-reduced-motion:reduce){
  .nhm-bg--c .crown{animation:none}
  .nhm-bg--c .scene,.nhm-bg--c .dino,.nhm-bg--c .dino2{transform:none}
}
@media print{.nhm-bg{display:none}}