/* HUAIDEV Sprachrad (language wheel) – Corporate Identity component, v1.0 (owner 2026-10-25).
   One source for huaidev.com, the Development Hub, Nova and The 4th Dimension. Spec: docs/brand/sprachrad.md
   Tokens: products may override the --hd-lang-* button tokens to sit in their own header; the dialog and the drum
   stay identical everywhere (that is the identity). */
:root{--hd-ink:#071641;--hd-night:6,14,28;--hd-mint:#52e3fa;--hd-mint-rgb:82,227,250;--hd-cyan:#16b6dd;--hd-cyan-rgb:22,182,221;--hd-blue-rgb:40,140,255;--hd-ice-rgb:190,245,255}

/* dialog: blurred night-blue backdrop over the product */
.hd-langgate{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;background:rgba(var(--hd-night),.5);-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);animation:hd-gateIn 1.1s ease-out both;transition:opacity .35s ease;overscroll-behavior:contain;touch-action:none;font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif}
.hd-langgate[hidden]{display:none}
.hd-langgate.leaving{opacity:0;pointer-events:none;background-color:rgba(var(--hd-night),0);-webkit-backdrop-filter:blur(0) saturate(1);backdrop-filter:blur(0) saturate(1);transition:opacity .9s ease .15s,background-color .9s ease,-webkit-backdrop-filter .9s ease,backdrop-filter .9s ease}
.hd-langgate-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,3vh,30px);box-sizing:border-box;width:100%;padding:24px max(18px,env(safe-area-inset-right)) 24px max(18px,env(safe-area-inset-left));text-align:center}
.hd-langgate.enter .hd-langgate-inner{animation:hd-wheelIn .9s cubic-bezier(.2,.8,.2,1) both}
.hd-gatelock,.hd-gatelock body{overflow:hidden;overscroll-behavior:none}
@keyframes hd-gateIn{from{opacity:0}to{opacity:1}}
@keyframes hd-wheelIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

/* the language of the middle flag, written out large in its own language and script */
.hd-wheel-name{margin:0;width:100%;height:1.2em;font-size:clamp(30px,8vw,56px);line-height:1.2;font-weight:780;letter-spacing:-.015em;text-align:center;white-space:nowrap;color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.4),0 0 26px rgba(var(--hd-mint-rgb),.35)}

/* the drum: flags on a cylinder, a breathing selection window, circuit rails with running light */
@property --hdA{syntax:"<angle>";inherits:false;initial-value:0deg}
.hd-wheel{--hd-wheel-item:100px;position:relative;flex:0 0 auto;width:150px;height:min(440px,52vh);perspective:520px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 17%,#000 83%,transparent);mask-image:linear-gradient(transparent,#000 17%,#000 83%,transparent);touch-action:none;cursor:grab;outline:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:radial-gradient(ellipse 70% 45% at 50% 50%,rgba(var(--hd-blue-rgb),.16),rgba(var(--hd-blue-rgb),0) 70%)}
.hd-wheel:active{cursor:grabbing}
.hd-wheel::before,.hd-wheel::after{content:"";position:absolute;top:0;bottom:0;width:2px;pointer-events:none;z-index:2;background-image:linear-gradient(180deg,rgba(var(--hd-ice-rgb),0),rgba(var(--hd-ice-rgb),.95) 50%,rgba(var(--hd-ice-rgb),0)),linear-gradient(rgba(var(--hd-blue-rgb),.32),rgba(var(--hd-blue-rgb),.32));background-size:100% 96px,100% 100%;background-repeat:no-repeat;animation:hd-rail 3.8s linear infinite}
.hd-wheel::before{left:7px;filter:drop-shadow(0 0 4px rgba(var(--hd-mint-rgb),.9))}
.hd-wheel::after{right:7px;animation-duration:5.2s;animation-direction:reverse;animation-delay:-1.7s;filter:drop-shadow(0 0 4px rgba(var(--hd-blue-rgb),.95))}
.hd-wheel-band{position:absolute;left:0;right:0;top:50%;z-index:1;height:calc(var(--hd-wheel-item) + 10px);transform:translateY(-50%);border-radius:14px;background:rgba(var(--hd-mint-rgb),.07);border:1px solid rgba(var(--hd-mint-rgb),.6);box-shadow:0 0 26px rgba(var(--hd-cyan-rgb),.35),inset 0 0 18px rgba(var(--hd-mint-rgb),.12);pointer-events:none;animation:hd-band 2.6s ease-in-out infinite}
.hd-wheel:focus-visible .hd-wheel-band{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.85),0 0 26px rgba(var(--hd-cyan-rgb),.5)}
.hd-wheel-band::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;background:conic-gradient(from var(--hdA),rgba(200,245,255,0) 0 66%,rgba(var(--hd-mint-rgb),.9) 78%,#fff 82%,rgba(var(--hd-blue-rgb),.8) 86%,rgba(200,245,255,0) 94%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:hd-orbit 4.4s linear infinite}
.hd-wheel-band::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 8px 50%,#e6fbff 0 2.5px,rgba(var(--hd-mint-rgb),.75) 3.5px,rgba(var(--hd-mint-rgb),0) 9px),radial-gradient(circle at calc(100% - 8px) 50%,#e6fbff 0 2.5px,rgba(var(--hd-blue-rgb),.8) 3.5px,rgba(var(--hd-blue-rgb),0) 9px);animation:hd-node 1.3s ease-in-out infinite alternate}
.hd-wheel-band.tick{animation:hd-tick .5s ease-out,hd-band 2.6s ease-in-out .5s infinite}
.hd-wheel-drum{position:absolute;left:0;right:0;top:50%;height:0;transform-style:preserve-3d}
.hd-wheel-item{position:absolute;left:50%;top:0;width:112px;height:var(--hd-wheel-item);margin:calc(var(--hd-wheel-item) / -2) 0 0 -56px;display:grid;place-items:center;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.hd-wheel-item img{display:block;width:104px;height:78px;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.18);pointer-events:none}
.hd-langgate .hd-wheel-item.chosen img{animation:hd-flagOut .95s ease forwards}
@keyframes hd-rail{from{background-position:0 -96px,0 0}to{background-position:0 560px,0 0}}
@keyframes hd-band{0%,100%{border-color:rgba(var(--hd-mint-rgb),.55);box-shadow:0 0 18px rgba(var(--hd-cyan-rgb),.3),inset 0 0 14px rgba(var(--hd-mint-rgb),.1)}50%{border-color:rgba(150,238,255,.95);box-shadow:0 0 34px rgba(var(--hd-mint-rgb),.55),0 0 70px rgba(var(--hd-blue-rgb),.25),inset 0 0 22px rgba(var(--hd-mint-rgb),.2)}}
@keyframes hd-orbit{to{--hdA:360deg}}
@keyframes hd-node{from{opacity:.45}to{opacity:1}}
@keyframes hd-tick{0%{background-color:rgba(130,235,255,.32);box-shadow:0 0 46px rgba(var(--hd-mint-rgb),.8),inset 0 0 26px rgba(160,240,255,.4)}100%{background-color:rgba(var(--hd-mint-rgb),.07)}}
@keyframes hd-flagOut{0%{opacity:1;transform:scale(1);filter:blur(0)}100%{opacity:0;transform:scale(1.35);filter:blur(14px)}}
@keyframes hd-fadeOut{to{opacity:0}}

/* the button in the chosen language */
.hd-wheel-go{min-width:200px;min-height:0;margin:0;border:0;border-radius:999px;padding:13px 22px;background:var(--hd-cyan);color:#fff;font:750 16px/1.2 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;box-shadow:0 10px 30px rgba(var(--hd-cyan-rgb),.35);animation:hd-go 2.6s ease-in-out infinite}
.hd-wheel-go:focus-visible{outline:3px solid #fff;outline-offset:3px}
@keyframes hd-go{0%,100%{box-shadow:0 10px 30px rgba(var(--hd-cyan-rgb),.35),0 0 0 0 rgba(var(--hd-mint-rgb),.45)}50%{box-shadow:0 10px 34px rgba(var(--hd-cyan-rgb),.5),0 0 0 7px rgba(var(--hd-mint-rgb),0)}}
.hd-langgate.leaving .hd-wheel-name,.hd-langgate.leaving .hd-wheel-go,.hd-langgate.leaving .hd-wheel-band{animation:hd-fadeOut .35s ease forwards}

@media (max-width:420px){.hd-wheel{--hd-wheel-item:78px;width:112px;perspective:400px}.hd-wheel-item{width:84px;margin-left:-42px}.hd-wheel-item img{width:76px;height:57px}}

/* the flag button that opens the dialog (flag + two-letter code). Dark glass by default; products set the tokens
   (e.g. .hd-lang{--hd-lang-bg:…}) or add .hd-lang-light on light headers. */
.hd-lang{--hd-lang-bg:rgba(7,22,65,.55);--hd-lang-fg:#eaf6ff;--hd-lang-border:rgba(var(--hd-mint-rgb),.45);--hd-lang-hover:var(--hd-mint);
  display:inline-flex;align-items:center;justify-content:center;gap:7px;box-sizing:border-box;height:34px;min-height:0;min-width:0;margin:0;padding:0 11px;border-radius:999px;border:1px solid var(--hd-lang-border);background:var(--hd-lang-bg);color:var(--hd-lang-fg);font:750 12px/1 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.08em;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-tap-highlight-color:transparent}
.hd-lang img{display:block;width:24px;height:18px;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.28)}
.hd-lang:hover,.hd-lang:focus-visible{border-color:var(--hd-lang-hover)}
.hd-lang:focus-visible{outline:2px solid var(--hd-lang-hover);outline-offset:3px}
.hd-lang.hd-lang-light{--hd-lang-bg:#f2f7fa;--hd-lang-fg:#0b1f4d;--hd-lang-border:#c9d8e2;--hd-lang-hover:var(--hd-cyan)}

@media (prefers-reduced-motion:reduce){
  .hd-langgate,.hd-langgate.enter .hd-langgate-inner,.hd-langgate .hd-wheel-item.chosen img,.hd-langgate.leaving .hd-wheel-name,.hd-langgate.leaving .hd-wheel-go,.hd-langgate.leaving .hd-wheel-band,
  .hd-wheel::before,.hd-wheel::after,.hd-wheel-band,.hd-wheel-band::after,.hd-wheel-band::before,.hd-wheel-band.tick,.hd-wheel-go{animation:none}
  .hd-langgate,.hd-langgate.leaving{transition:none}}
@media print{.hd-langgate,.hd-lang{display:none}}