/* A dimensional study using the unchanged Niu Level ambigram. */
.identity-art{position:relative;isolation:isolate;min-width:0;height:440px;overflow:clip;--tilt-x:0deg;--tilt-y:0deg;--pointer-x:50%;--pointer-y:40%;--turn:0deg}
.art-surface{position:absolute;inset:0;overflow:hidden;background:var(--deep);clip-path:polygon(8% 0,100% 0,100% 100%,0 100%,0 8%)}
.art-light{position:absolute;inset:-20%;background:radial-gradient(ellipse at var(--pointer-x) var(--pointer-y),#58a985 0%,#58a985 18%,#3a7563 70%);opacity:.95}
.art-grain{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.5' filter='url(%23noise)'/%3E%3C/svg%3E")}
.art-echo{position:absolute;inset:auto;opacity:.25;color:#c0dbc9;pointer-events:none;transform:rotate(-22deg);width:95%}.art-echo svg{width:100%;height:auto;overflow:visible}.art-echo-one{left:5%;top:-12%}.art-echo-two{right:-38%;bottom:-6%;width:100%;opacity:.18}
.art-echoes{position:absolute;inset:0;overflow:hidden;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse at center,#000 45%,transparent 78%);mask-image:radial-gradient(ellipse at center,#000 45%,transparent 78%)}
.sculpture-float{position:absolute;inset:0;display:grid;place-items:center;perspective:1100px}
.sculpture-tilt{width:69%;aspect-ratio:2.62;transform:rotateX(calc(24deg + var(--tilt-x))) rotateY(calc(-24deg + var(--tilt-y))) rotateZ(-18deg);transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.75,.25,1)}
.sculpture-turn{width:100%;height:100%;transform-style:preserve-3d;transform:rotate(var(--turn));transition:transform 1.4s cubic-bezier(.7,0,.2,1)}
.logo-object{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.logo-depth,.logo-face{position:absolute;inset:0;-webkit-mask:url('assets/niu.svg') center/contain no-repeat;mask:url('assets/niu.svg') center/contain no-repeat;backface-visibility:visible}
.logo-depth{background:linear-gradient(145deg,#91c5ac,#3a7563 46%,#2c5c4c);transform:translate3d(calc(var(--depth) * -.3px),calc(var(--depth) * .35px),calc(var(--depth) * -1px))}
.logo-face{background:linear-gradient(130deg,#fffdf5 5%,#e9f1e8 75%,#c3dfcf);transform:translateZ(.4px)}
.sculpture-shadow{position:absolute;left:21%;right:10%;top:61%;height:10%;border-radius:50%;background:#173b2d;filter:blur(19px);opacity:.26;transform:rotate(-18deg)}
.is-ready .sculpture-float{animation:sculpture-hover 9s ease-in-out infinite}.is-ready .sculpture-shadow{animation:shadow-hover 9s ease-in-out infinite}
.identity-art:not(.is-ready) .art-controls{display:none}
.art-controls{position:absolute;right:14px;bottom:12px;z-index:6;display:flex;gap:5px}.art-controls button{width:44px;height:44px;border:1px solid #f5f4ef42;color:#f5f4ef;background:transparent;display:grid;place-items:center;padding:0;border-radius:50%;cursor:pointer;transition:background .2s,border-color .2s}.art-controls button:hover{background:#ffffff18;border-color:#f5f4ef99}.art-controls button:focus-visible{outline:2px solid #fff;outline-offset:4px}.play-symbol{display:none}.art-pause[aria-pressed=true] .pause-symbol{display:none}.art-pause[aria-pressed=true] .play-symbol{display:block}
.identity-art.is-paused .sculpture-float,.identity-art.is-paused .sculpture-shadow{animation-play-state:paused}
.identity-art.is-dragging .sculpture-turn{transition:none}.identity-art.is-dragging .art-surface{cursor:grabbing}
@media(hover:hover) and (pointer:fine){.art-surface{cursor:grab}}
@media(hover:hover){.art-controls{opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s}.identity-art:hover .art-controls,.identity-art:focus-within .art-controls{opacity:1;transform:none}}
.identity-art.is-hidden .sculpture-float,.identity-art.is-hidden .sculpture-shadow,.identity-art.is-offscreen .sculpture-float,.identity-art.is-offscreen .sculpture-shadow{animation-play-state:paused}
.art-open .art-surface{clip-path:none;background:transparent;overflow:visible}
.art-open .art-light{inset:0;background:radial-gradient(ellipse at var(--pointer-x) var(--pointer-y),#e0ebdf 0%,#e9eee3 30%,#f5f4ef00 69%)}
.art-open .art-echo{color:var(--deep);opacity:.13}
.art-open .art-echo-one{width:110%;top:-2%;left:-3%}
.art-open .art-echo-two{width:90%;right:-11%;bottom:0;opacity:.08}
.art-open .sculpture-tilt{width:69%}
.art-open .logo-face{background:linear-gradient(120deg,#68b492,#58a985 65%,#58a985)}
.art-open .logo-depth{background:linear-gradient(130deg,#58a985 5%,#3a7563 60%,#2b5848)}
.art-open .art-controls button{color:var(--deep);border-color:#3a756344}
.art-open .art-controls button:hover{background:#58a98515;border-color:var(--deep)}
.art-open .art-controls button:focus-visible{outline-color:var(--deep)}
.art-open .art-grain{display:none}
@keyframes sculpture-hover{0%,100%{transform:translate3d(0,5px,0)}50%{transform:translate3d(0,-9px,0)}}
@keyframes shadow-hover{0%,100%{opacity:.29;transform:rotate(-18deg) scale(1)}50%{opacity:.2;transform:rotate(-18deg) scale(.93)}}
@media(max-width:1050px){.identity-art{height:390px}.sculpture-tilt{width:73%}}
@media(max-width:700px){.identity-art{height:300px;margin-left:0}.sculpture-tilt{width:68%}.art-controls{right:8px;bottom:8px}.art-echo-one{top:-14%}.art-echo-two{right:-32%;bottom:-4%}}
@media(prefers-reduced-motion:reduce){.sculpture-float,.sculpture-shadow{animation:none}.sculpture-tilt,.sculpture-turn{transition:none}}
@media(prefers-reduced-motion:reduce){.art-pause{display:none!important}}

/* The interactive version has continuous front, back and side surfaces. */
.logo-canvas{display:none;position:absolute;inset:0;width:100%;height:100%;z-index:5;touch-action:pan-y;outline-offset:-8px}
.is-webgl .logo-canvas{display:block;cursor:grab}
.is-webgl.is-dragging .logo-canvas{cursor:grabbing}
.logo-canvas:focus-visible{outline:1px solid var(--deep)}
.is-webgl .sculpture-float{display:none}
.art-controls{left:14px;right:14px;bottom:0;align-items:center;justify-content:flex-end;gap:18px;opacity:1;transform:none}
.art-controls button{width:auto;min-height:44px;height:auto;border:0;border-radius:0;display:block;padding:8px 0;font:inherit;font-size:13px;font-weight:500;letter-spacing:.015em;line-height:1.4;position:relative;background:none!important}
.art-controls button::after{content:'';position:absolute;bottom:8px;left:0;right:0;height:1px;background:currentColor;opacity:.3;transition:opacity .2s}
.art-controls button:hover::after{opacity:1}
.art-hint{font-size:12px;letter-spacing:.02em;color:var(--deep);margin-right:auto}
.art-open .art-controls button{border:0}
.is-webgl .sculpture-shadow{pointer-events:none}
@media(max-width:700px){.art-controls{left:6px;right:6px;gap:16px}.art-hint{font-size:11px}.art-controls button{font-size:12px}}