/* TrinityX backdrop — reusable background drawn like a survey sheet of the Gotthard: hairline contour lines
   (index contours heavier, crisp at any size), a fine graticule with register crosses, edge scales, paper grain,
   a slow bronze light moving across the relief and survey coordinates. Markup: src/components/Backdrop.astro.
   Fills a positioned container, or the page with .is-fixed. Variants: .is-dark (ink sections), .is-quiet (dense content). */
.tnx-backdrop{--bd-lines:.55;--bd-lit:.85;--bd-grid:1;--bd-glow-a:#dac8a466;--bd-glow-b:#cdb68e4d;--bd-light:#a67a3c;--bd-text:#6d522ca6;--bd-tick:#7a5b3338;--mx:0;--my:0;position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;contain:strict;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,#b9a27b26 100%)}
.tnx-backdrop.is-fixed{position:fixed}
.tnx-backdrop.is-dark{--bd-lines:.35;--bd-lit:.6;--bd-glow-a:#9a774733;--bd-glow-b:#6d522c40;--bd-light:#e6c894;--bd-text:#f7f3ea80;--bd-tick:#f7f3ea24;background:radial-gradient(120% 90% at 50% 45%,transparent 50%,#0006 100%)}
.tnx-backdrop.is-quiet{--bd-lines:.3;--bd-lit:.4;--bd-grid:.55}
.tnx-backdrop>span{position:absolute}
.bd-glow{inset:-20%;background:radial-gradient(38% 42% at 28% 30%,var(--bd-glow-a),transparent 70%),radial-gradient(34% 40% at 74% 72%,var(--bd-glow-b),transparent 70%);filter:blur(40px);translate:calc(var(--mx)*-10px) calc(var(--my)*-10px);animation:bd-glow 34s ease-in-out infinite alternate}
/* graticule: hairlines every 160 px with a register cross at each intersection */
.bd-grid{inset:-80px;opacity:var(--bd-grid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M0 80.5H160M80.5 0V160' stroke='%237a5b33' stroke-opacity='.085'/%3E%3Cpath d='M73 80.5H88M80.5 73V88' stroke='%237a5b33' stroke-opacity='.45'/%3E%3C/svg%3E");background-size:160px 160px;-webkit-mask:radial-gradient(ellipse 75% 70% at 50% 50%,#000 35%,transparent 100%);mask:radial-gradient(ellipse 75% 70% at 50% 50%,#000 35%,transparent 100%);translate:calc(var(--mx)*6px) calc(var(--my)*6px)}
.is-dark .bd-grid{filter:invert(1) brightness(1.6)}
.bd-lines{inset:-4%;opacity:var(--bd-lines);background:url(/assets/alps/contours-fine.svg) center/cover no-repeat;translate:calc(var(--mx)*16px) calc(var(--my)*16px);animation:bd-drift 90s ease-in-out infinite alternate}
.is-dark .bd-lines{filter:invert(1) sepia(.5) brightness(1.4)}
.bd-lines.is-lit{opacity:var(--bd-lit);background:radial-gradient(closest-side,var(--bd-light),transparent) no-repeat;background-size:55vmax 55vmax;-webkit-mask:url(/assets/alps/contours-fine.svg) center/cover no-repeat;mask:url(/assets/alps/contours-fine.svg) center/cover no-repeat;animation:bd-drift 90s ease-in-out infinite alternate,bd-sweep 28s ease-in-out infinite}
.is-dark .bd-lines.is-lit{filter:none}
.bd-grain{inset:0;opacity:.5;mix-blend-mode:multiply;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .16 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
.is-dark .bd-grain{mix-blend-mode:screen;opacity:.25}
/* edge scales, as on the margin of a map sheet */
.bd-scale{opacity:.9}
.bd-scale.is-left{left:0;top:0;bottom:0;width:14px;background-image:repeating-linear-gradient(180deg,var(--bd-tick) 0 1px,transparent 1px 80px),repeating-linear-gradient(180deg,var(--bd-tick) 0 1px,transparent 1px 16px);background-size:14px 100%,6px 100%;background-repeat:no-repeat}
.bd-scale.is-bottom{left:0;right:0;bottom:0;height:14px;background-image:repeating-linear-gradient(90deg,var(--bd-tick) 0 1px,transparent 1px 80px),repeating-linear-gradient(90deg,var(--bd-tick) 0 1px,transparent 1px 16px);background-size:100% 14px,100% 6px;background-position:0 100%,0 100%;background-repeat:no-repeat}
.bd-coord{display:flex;align-items:center;gap:12px;font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.2em;font-variant-numeric:tabular-nums;text-transform:uppercase;color:var(--bd-text);white-space:nowrap}
.bd-coord.is-top{top:26px;left:34px}
.bd-coord.is-bottom{bottom:26px;right:34px}
.bd-coord::before{content:"";width:9px;height:9px;background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;opacity:.8}
@media (max-width:560px){.bd-coord.is-bottom,.bd-scale{display:none}.bd-coord{font-size:7.5px}.bd-coord.is-top{top:14px;left:16px}.bd-grid{background-size:120px 120px}}
@keyframes bd-glow{to{transform:translate(3%,-2%) scale(1.06)}}
@keyframes bd-drift{from{transform:scale(1) rotate(0)}to{transform:scale(1.05) rotate(-1.2deg)}}
@keyframes bd-sweep{0%,100%{background-position:-30% 20%}50%{background-position:125% 70%}}
@media (prefers-reduced-motion:reduce){.tnx-backdrop *{animation:none!important}}

/* TNX crest (src/components/Crest.astro) */
.tnx-crest{--crest:184px;--crest-ink:#6d522c;position:relative;display:grid;place-items:center;width:var(--crest);aspect-ratio:1;margin:0 auto;border-radius:50%;isolation:isolate}
.tnx-crest.is-lg{--crest:clamp(170px,min(26vw,25vh),240px)}
.tnx-crest.is-dark{--crest-ink:#d2b37d}
.tnx-crest::before{content:"";position:absolute;inset:-4%;border-radius:50%;background:radial-gradient(circle,#fffdf8f2 0,#fbf7eecc 42%,#f4eee2a6 70%,#f4eee200 74%);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);-webkit-mask:radial-gradient(circle,#000 66%,transparent 72%);mask:radial-gradient(circle,#000 66%,transparent 72%);z-index:-1;animation:crest-in 1.2s cubic-bezier(.2,.7,.1,1) both}
.tnx-crest.is-dark::before{background:radial-gradient(circle,#f7f3ea14,transparent 70%)}
.crest-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.crest-track{fill:none;stroke:var(--crest-ink);stroke-opacity:.28;stroke-width:.6;stroke-dasharray:610;stroke-dashoffset:610;animation:crest-draw 1.8s .2s cubic-bezier(.6,0,.2,1) forwards}
.crest-ticks{fill:none;stroke:var(--crest-ink);stroke-opacity:.35;stroke-width:3;stroke-dasharray:.6 5.33;opacity:0;animation:crest-fade 1s .9s ease forwards}
.crest-turn{transform-origin:100px 100px;animation:crest-spin 48s linear infinite,crest-fade 1.2s .6s ease both}
.crest-turn text{font-family:var(--brand);font-size:8.6px;letter-spacing:.12em;text-transform:uppercase;fill:var(--crest-ink);fill-opacity:.8}
.crest-mark{position:relative;width:58%;animation:crest-mark 1.3s .35s cubic-bezier(.2,.7,.1,1) both}
.crest-mark img{display:block;width:100%;height:auto}
.crest-shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,#d2b37d 48%,#fff6e0 50%,#d2b37d 52%,transparent 65%) no-repeat;background-size:300% 100%;background-position:130% 0;-webkit-mask:url(/assets/tnx-640.webp) center/100% 100% no-repeat;mask:url(/assets/tnx-640.webp) center/100% 100% no-repeat;animation:crest-shine 7s 1.6s ease-in-out infinite}
.tnx-crest:hover .crest-turn{animation-duration:12s,1.2s}
.tnx-crest:focus-visible{outline:2px solid var(--crest-ink);outline-offset:6px}
@keyframes crest-in{from{opacity:0;transform:scale(.6)}}
@keyframes crest-draw{to{stroke-dashoffset:0}}
@keyframes crest-fade{from{opacity:0}to{opacity:1}}
@keyframes crest-spin{to{rotate:360deg}}
@keyframes crest-mark{from{opacity:0;filter:blur(10px);transform:scale(1.25);clip-path:inset(0 100% 0 0)}to{opacity:1;filter:blur(0);transform:none;clip-path:inset(0 0 0 0)}}
@keyframes crest-shine{0%{background-position:130% 0}35%,100%{background-position:-30% 0}}
@media (prefers-reduced-motion:reduce){.tnx-crest *,.tnx-crest::before{animation:none!important}.crest-track{stroke-dashoffset:0}.crest-ticks{opacity:1}}