/* Delta Automation brushed-metal finish.
   Sampled from the anodised-aluminium brand mark (assets/logo-delta-metal.jpeg).
   Each face is a brushed ramp: deep shadow → body → specular highlight → deep edge.
   Use for brand surfaces, hero panels and the mark itself — NEVER for status,
   data or controls, where flat semantic colour must stay unambiguous. */
:root{
  /* Red face */
  --metal-red-shadow:#4F0C0E;
  --metal-red-deep:#540C0E;
  --metal-red-body:#8E1F24;
  --metal-red-light:#C53E43;
  --metal-red-spec:#E77B88;

  /* Green face */
  --metal-green-shadow:#164A28;
  --metal-green-deep:#226238;
  --metal-green-body:#3B8052;
  --metal-green-light:#46945A;
  --metal-green-spec:#7FC98F;

  /* Blue face */
  --metal-blue-shadow:#10395C;
  --metal-blue-deep:#173F61;
  --metal-blue-body:#30648C;
  --metal-blue-light:#5B9BBF;
  --metal-blue-spec:#9AC9E2;

  /* Neutral machined aluminium — chrome, rails, bezels */
  --metal-steel-shadow:#5A646E;
  --metal-steel-body:#8A949E;
  --metal-steel-light:#C3CBD3;
  --metal-steel-spec:#EDF1F4;

  /* Brushed-face gradients (135deg matches the mark's light direction) */
  --metal-red:linear-gradient(135deg,var(--metal-red-deep) 0%,var(--metal-red-body) 38%,var(--metal-red-light) 58%,var(--metal-red-body) 74%,var(--metal-red-shadow) 100%);
  --metal-green:linear-gradient(135deg,var(--metal-green-deep) 0%,var(--metal-green-body) 38%,var(--metal-green-light) 58%,var(--metal-green-body) 74%,var(--metal-green-shadow) 100%);
  --metal-blue:linear-gradient(135deg,var(--metal-blue-deep) 0%,var(--metal-blue-body) 38%,var(--metal-blue-light) 58%,var(--metal-blue-body) 74%,var(--metal-blue-shadow) 100%);
  --metal-steel:linear-gradient(135deg,var(--metal-steel-shadow) 0%,var(--metal-steel-body) 38%,var(--metal-steel-light) 58%,var(--metal-steel-body) 74%,var(--metal-steel-shadow) 100%);

  /* Anodised brush grain — overlay on any metal face */
  --metal-grain:repeating-linear-gradient(135deg,rgba(255,255,255,.055) 0px,rgba(255,255,255,.055) 1px,rgba(0,0,0,.045) 1px,rgba(0,0,0,.045) 2px); /* @kind other */

  /* Machined bevel: bright top-left edge, dark bottom-right */
  --metal-bevel:inset 1px 1px 0 rgba(255,255,255,.35),inset -1px -1px 0 rgba(0,0,0,.35); /* @kind shadow */
  --metal-shadow:0 1px 2px rgba(15,23,42,.18),0 6px 18px rgba(15,23,42,.16);

  /* Shimmer sweep — a single specular band travelling across the face */
  --metal-sheen:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.42) 48%,rgba(255,255,255,.62) 52%,transparent 62%); /* @kind other */
  --metal-sheen-duration:2.6s; /* @kind other */
}

@keyframes metal-shimmer{0%{background-position:-180% 0}100%{background-position:180% 0}}

/* Brushed metal face. Compose: class + one --metal-* gradient. */
.metal-face{position:relative;background-image:var(--metal-grain),var(--metal-steel);background-blend-mode:overlay,normal;box-shadow:var(--metal-bevel),var(--metal-shadow);color:#fff;overflow:hidden;isolation:isolate}
.metal-face.red{background-image:var(--metal-grain),var(--metal-red)}
.metal-face.green{background-image:var(--metal-grain),var(--metal-green)}
.metal-face.blue{background-image:var(--metal-grain),var(--metal-blue)}

/* Shimmer sweep. `.once` on hover/enter, default loops slowly. */
.metal-face::after{content:'';position:absolute;inset:0;background:var(--metal-sheen);background-size:220% 100%;background-repeat:no-repeat;pointer-events:none;opacity:0}
.metal-shimmer::after{opacity:1;animation:metal-shimmer var(--metal-sheen-duration) var(--ease-enter) infinite}
.metal-face:hover::after{opacity:1;animation:metal-shimmer 900ms var(--ease-enter) 1}

/* Metallic text — brand wordmarks and hero numerals only. */
.metal-text{background-image:var(--metal-steel);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.metal-text.red{background-image:var(--metal-red)}
.metal-text.green{background-image:var(--metal-green)}
.metal-text.blue{background-image:var(--metal-blue)}

/* 1px machined rule — section dividers on brand surfaces. */
.metal-rule{width:100%;margin:0;height:1px;border:0;background:linear-gradient(90deg,transparent,var(--metal-steel-light),transparent)}

@media (prefers-reduced-motion:reduce){
  .metal-shimmer::after,.metal-face:hover::after{animation:none;opacity:.25}
}