/* Component-owned bevels, transient material blocks and a shared-gutter link. */
@property --edge-top-depth { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --edge-top { syntax: '<color>'; inherits: false; initial-value: #c8a48b; }
@property --edge-right-depth { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --edge-right { syntax: '<color>'; inherits: false; initial-value: #c8a48b; }
@property --edge-bottom-depth { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --edge-bottom { syntax: '<color>'; inherits: false; initial-value: #c8a48b; }
@property --edge-left-depth { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --edge-left { syntax: '<color>'; inherits: false; initial-value: #c8a48b; }

/* Small pieces of the existing material lift, then vanish flush into its plane.
   The isolated negative layer stays below real content and cannot catch input. */
@property --relief-time { syntax: '<number>'; inherits: true; initial-value: 0; }
[data-material-response-root] .material-relief {
  display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;
  overflow:hidden;border-radius:inherit;contain:layout paint;
  --relief-time:0;
}
[data-material-response-root] .material-block {
  --block-lift:clamp(0,min(calc((var(--relief-time) - var(--block-arrival))/80),calc((var(--block-arrival) + 280 - var(--relief-time))/180)),1);
  display:block;position:absolute;pointer-events:none;box-sizing:border-box;
  border-radius:1.5px;opacity:var(--block-lift);
  transform:translate3d(0,calc(var(--block-lift)*-2.5px),0);
  /* Static bevel + drop shadow at representative lift. The rise and fade are
     carried entirely by the composited transform/opacity above, so these
     shadow layers are rasterized once per tile and never repainted per frame
     (the element's own opacity fades them with it). Offsets/color are fixed:
     no calc(--block-lift) and no per-frame color-mix in an animated property. */
  box-shadow:inset .6px .7px .5px #fff8,inset -.5px -.7px .5px #66584720,
    0 2px 1.5px color-mix(in srgb,var(--block-tone) 36%,#797466),
    0 4px 5px #50463733;
}
[data-material-response-root] .material-block::after {
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg,color-mix(in srgb,var(--block-tone) 7%,transparent),transparent 80%);
}
@media (prefers-reduced-motion:reduce) { [data-material-response-root] .material-relief { display:none; } }