/* Shared interactive materials: forest glass and brushed silver.
   Pointer position (--mx, --my) and the rim's light angle (--rim) are eased in materials.js,
   so highlights drift after the cursor rather than snapping to it. */

/* Nord (Jeremy Schneider) — the Dunes lettering. Subset to basic Latin letters, figures and punctuation. */
@font-face{font-family:'Nord';src:url('fonts/nord-dunes.woff') format('woff');font-display:swap}
.dunes-type{font-family:'Nord','Albert Sans',Arial,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.05em}

.glass{
  --radius:999px;
  --mx:8%;--my:-10%;--rim:200deg;--glow:0;
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;gap:14px;
  border:0;border-radius:var(--radius);
  color:var(--snow,#EDF1EF);text-decoration:none;
  /* The body: nearly clear, a green tint deepening toward the lower edge, soft light from the upper left. */
  background:
    radial-gradient(ellipse at 5% 0%,rgba(224,239,229,.085),transparent 55%),
    linear-gradient(135deg,rgba(164,196,176,.055),rgba(16,41,31,.12) 55%,rgba(190,200,205,.05));
  -webkit-backdrop-filter:blur(2px) saturate(115%);
  backdrop-filter:blur(2px) saturate(115%);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.12),
    inset 0 -1px 1px rgba(216,235,223,.1),
    inset 14px 16px 38px rgba(224,239,229,.025),
    0 24px 65px rgba(0,0,0,.18);
  -webkit-tap-highlight-color:transparent;
}
/* --lit: a surface being hovered or focused glows from within; eased so it breathes in and out. */
@property --lit{syntax:'<number>';inherits:true;initial-value:0}
.glass{--lit:0;transition:--lit .7s ease}

/* Silver rim: a quiet edge all the way round, brightening on the side that faces the light. */
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:-1;
  background:conic-gradient(from var(--rim),
    rgba(240,248,243,calc(.5 + .3 * var(--glow) + .2 * var(--lit))),rgba(220,234,225,calc(.3 + .15 * var(--lit))) 16%,rgba(220,234,225,.2) 34%,
    rgba(220,234,225,.24) 50%,rgba(220,234,225,.2) 66%,rgba(220,234,225,calc(.32 + .15 * var(--lit))) 84%,rgba(240,248,243,calc(.5 + .3 * var(--glow) + .2 * var(--lit))));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
/* Specular bloom where the light falls on the surface. */
.glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(clamp(140px,40%,420px) circle at var(--mx) var(--my),rgba(236,246,240,calc(.03 + .09 * var(--glow) + .16 * var(--lit))),transparent 70%);
}
:is(a,button).glass{font:inherit;cursor:pointer;transition:transform .55s cubic-bezier(.34,1.56,.64,1),box-shadow .5s ease}
:is(a,button).glass:hover{box-shadow:
    inset 0 2px 1px rgba(255,255,255,.16),
    inset 0 -1px 1px rgba(216,235,223,.12),
    inset 14px 16px 38px rgba(224,239,229,.04),
    0 28px 70px rgba(0,0,0,.24)}
:is(a,button).glass:active{transform:scale(.965);transition-duration:.12s}
.glass:focus-visible{outline:2px solid var(--snow,#EDF1EF);outline-offset:5px}

.glass.btn-glass{padding:17px 28px 17px 30px;font-size:15px;font-weight:500;letter-spacing:.04em}
.btn-glass .mark{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .7s cubic-bezier(.34,1.56,.64,1);opacity:.85}
.btn-glass[aria-expanded="true"] .mark{transform:rotate(-135deg) translate(-2px,-2px)}

/* Brushed silver: real metal gradient with fine grain; the reflection slides with the light. */
.silver{
  --mx:30%;
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:14px;border:0;border-radius:2px;cursor:pointer;
  color:#15241D;font:inherit;font-weight:500;letter-spacing:.03em;text-decoration:none;
  background:linear-gradient(116deg,#59666B 0%,#A7B3B9 18%,#ECF0F2 30%,#909FA6 43%,#D1DADF 57%,#F2F5F5 65%,#87969B 83%,#B8C3C8 100%);
  background-size:180% 100%;background-position:calc(var(--mx) * .6) 0;
  box-shadow:inset 0 1px 0 #fffa,inset 0 -1px 0 #0007,0 14px 30px -16px rgba(0,0,0,.8);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.silver::after{content:"";position:absolute;inset:0;opacity:.2;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 1px,#fff8 1px 2px)}
.silver:active{transform:scale(.97);transition-duration:.12s}
.silver:focus-visible{outline:2px solid var(--snow,#EDF1EF);outline-offset:4px}

@media(prefers-reduced-motion:reduce){.glass,.silver,.btn-glass .mark{transition:none}:is(a,button).glass:active,.silver:active{transform:none}}
@media(forced-colors:active){.glass,.silver{border:1px solid ButtonText;background:ButtonFace;color:ButtonText}.glass::before,.glass::after,.silver::after{display:none}}