/* Transform/opacity motion avoids layout work; no framework or continuous JS loop. */
@view-transition { navigation: none; }
/* WebKit's renderer crashes during authenticated cross-document transitions.
   Its prefix provides a static compatibility gate; in-page motion stays active. */
@supports (view-transition-name: none) and (not (-webkit-backdrop-filter: none)) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root) { animation: kg-page-out 140ms ease-out both; }
::view-transition-new(root) { animation: kg-page-in 220ms cubic-bezier(.22,1,.36,1) both; }
@keyframes kg-page-out { to { opacity: 0; } }
@keyframes kg-page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.site-footer { flex-wrap: wrap; }
#cart-count { display: inline-block; }
.product-media,.hero-art { transition: transform 240ms cubic-bezier(.22,1,.36,1); transform-origin: center; }
.depth-active { transform: perspective(800px) rotateX(var(--depth-x,0deg)) rotateY(var(--depth-y,0deg)); }
.ambient-paused,.ambient-paused *, .ambient-paused::before,.ambient-paused::after { animation-play-state: paused !important; }
.button,.icon-button { transition: transform 180ms cubic-bezier(.22,1,.36,1),background-color 180ms,border-color 180ms,box-shadow 180ms; }
.button:active:not(:disabled),.icon-button:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.button[aria-busy=true] { position: relative; }
.button[aria-busy=true]::after { content: ''; display: inline-block; inline-size: 12px; block-size: 12px; margin-inline-start: 8px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: kg-busy 700ms linear infinite; vertical-align: middle; }
@keyframes kg-busy { to { transform: rotate(360deg); } }
dialog[open] { animation: kg-dialog 260ms cubic-bezier(.22,1,.36,1); }
dialog::backdrop { background: rgb(0 8 12 / .65); }
@keyframes kg-dialog { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
html.motion-paused .button::after { animation-play-state: paused; }
@media (hover: none), (pointer: coarse) { .depth-active { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation: none !important; }
  .button,.icon-button,.product-media,.hero-art { transition: none !important; }
  .button:active,.icon-button:active,.depth-active { transform: none !important; }
  dialog[open],.button[aria-busy=true]::after { animation: none !important; }
}
/* The glow is a small opacity layer; the readable version stays constant. */
.home-studio{transition:transform 350ms cubic-bezier(.22,1,.36,1);transform-origin:center}.home-studio.depth-active{transform:perspective(1000px) rotateX(var(--depth-x,0deg)) rotateY(var(--depth-y,0deg))}.field-label input:not([type=file]),.field-label select,.field-label textarea{transition:border-color .2s ease,box-shadow .2s ease}.field-label:focus-within{color:var(--accent)}.field-label input:focus,.field-label select:focus,.field-label textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)}.contact-status{transition:border-color .25s ease}.service-entry:focus-visible{border-color:var(--accent)}
@media(prefers-reduced-motion:reduce){.home-studio,.field-label input,.field-label select,.field-label textarea{transition:none!important}.home-studio.depth-active{transform:none}}

/* One visual motion language across the entire site. */
body{isolation:isolate}
.kg-spatial-scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1;opacity:.65;contain:strict}
/* Quiet geometry, with no model downloads or rendering library. */
.kg-spatial-scene{opacity:.28}
.kg-abstract-anchor{position:absolute;left:-90px;top:24vh;width:290px;height:290px;perspective:1100px;transform:translate3d(var(--kg-scene-x,0px),var(--kg-scene-y,0px),0);transition:transform 700ms cubic-bezier(.16,1,.3,1)}
.kg-abstract-anchor:nth-child(2){left:auto;right:-100px;top:68vh;scale:.75;opacity:.65}
.kg-abstract-orbit{position:absolute;inset:40px;transform-style:preserve-3d;animation:kg-orbit-turn 36s linear infinite}
.kg-orbit-ring{position:absolute;inset:0;border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);border-radius:50%;transform-style:preserve-3d}
.kg-orbit-ring::before,.kg-orbit-ring::after{content:'';position:absolute;width:4px;height:4px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px color-mix(in srgb,var(--accent) 35%,transparent);left:calc(50% - 2px);top:-2px}.kg-orbit-ring::after{top:auto;bottom:-2px;width:2px;height:2px;opacity:.6}
.kg-orbit-ring.equator{transform:rotateX(65deg)}.kg-orbit-ring.meridian{transform:rotateY(68deg)}.kg-orbit-ring.crossing{transform:rotateX(-30deg) rotateY(-35deg);border-style:dashed;border-color:color-mix(in srgb,var(--accent) 24%,transparent)}.kg-orbit-ring.inner{inset:24px;transform:rotateX(20deg) rotateY(22deg);border-color:color-mix(in srgb,var(--accent) 20%,transparent)}
.kg-glass-core{position:absolute;inset:67px;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(30deg);animation:kg-core-turn 24s ease-in-out infinite alternate}
.kg-glass-core i{position:absolute;inset:0;border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 70%);backface-visibility:visible}
.kg-glass-core i::after{content:'';position:absolute;inset:8px;border:1px solid color-mix(in srgb,var(--accent) 12%,transparent)}
.kg-glass-core i:nth-child(1){transform:translateZ(38px)}.kg-glass-core i:nth-child(2){transform:rotateY(90deg) translateZ(38px)}.kg-glass-core i:nth-child(3){transform:rotateY(180deg) translateZ(38px)}.kg-glass-core i:nth-child(4){transform:rotateY(270deg) translateZ(38px)}.kg-glass-core i:nth-child(5){transform:rotateX(90deg) translateZ(38px)}.kg-glass-core i:nth-child(6){transform:rotateX(-90deg) translateZ(38px)}
.kg-orbit-halo{position:absolute;inset:17px;border:1px dashed color-mix(in srgb,var(--accent) 20%,transparent);border-radius:50%;transform:rotate(-18deg);mask-image:conic-gradient(#000,transparent 35%,#000 65%,transparent)}
.kg-orbit-halo::after{content:'';position:absolute;inset:13px;border:1px solid color-mix(in srgb,var(--accent) 10%,transparent);border-radius:50%}
.kg-orbit-cross{position:absolute;right:25px;top:26px;width:11px;height:11px;background:linear-gradient(var(--accent),var(--accent)) center/1px 100% no-repeat,linear-gradient(var(--accent),var(--accent)) center/100% 1px no-repeat;opacity:.5}
:root[data-theme=light] .kg-spatial-scene{opacity:.2}
@keyframes kg-orbit-turn{from{transform:translateY(0) rotateX(-16deg) rotateY(0deg) rotateZ(-12deg)}50%{transform:translateY(-9px) rotateX(-16deg) rotateY(180deg) rotateZ(-12deg)}to{transform:translateY(0) rotateX(-16deg) rotateY(360deg) rotateZ(-12deg)}}
@keyframes kg-core-turn{from{transform:rotateX(-20deg) rotateY(30deg)}to{transform:rotateX(20deg) rotateY(100deg)}}
.kg-intro-pending .kg-abstract-orbit,.kg-intro-pending .kg-glass-core,.motion-paused .kg-abstract-orbit,.motion-paused .kg-glass-core{animation-play-state:paused}
.kg-scroll-progress{position:fixed;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,var(--accent) 35%,var(--accent));pointer-events:none;z-index:100;transform:scaleX(0);transform-origin:right;opacity:.8}
html[dir=ltr] .kg-scroll-progress{transform-origin:left}
.kg-intro-pending .kg-scroll-progress{opacity:0}

.kg-kinetic-title{position:relative;transform-origin:50% 65%;transition:transform 550ms cubic-bezier(.16,1,.3,1)}
.kg-title-line{display:block;transform-origin:50% 100%;backface-visibility:hidden}
.kg-title-line em{animation:none!important}
.kg-kinetic-title.kg-title-visible::after{content:'';display:block;position:absolute;inset-inline-start:0;bottom:-6px;width:clamp(35px,24%,100px);height:1px;background:linear-gradient(90deg,transparent,var(--accent));transform-origin:right;animation:kg-heading-signal 9s ease-in-out infinite;pointer-events:none}
html[dir=ltr] .kg-kinetic-title::after{transform-origin:left}
@keyframes kg-heading-signal{0%,62%,100%{opacity:.12;transform:scaleX(.3)}20%,40%{opacity:.75;transform:scaleX(1)}}
.kg-kinetic-title.depth-active{transform:perspective(1200px) rotateX(var(--depth-x,0deg)) rotateY(var(--depth-y,0deg))}
.kg-spatial-surface{position:relative;isolation:isolate;transform-origin:center;transition:transform 550ms cubic-bezier(.16,1,.3,1),border-color 250ms ease,box-shadow 350ms ease}
.kg-spatial-surface.depth-active{transform:perspective(1100px) rotateX(var(--depth-x,0deg)) rotateY(var(--depth-y,0deg)) translateY(-3px);border-color:color-mix(in srgb,var(--accent) 50%,var(--line));box-shadow:0 18px 35px -20px #0007}
.kg-spatial-surface::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--kg-light-x,50%) var(--kg-light-y,30%),color-mix(in srgb,var(--accent) 11%,transparent),transparent 60%);opacity:0;transition:opacity 450ms ease;pointer-events:none;z-index:2}
.kg-spatial-surface.depth-active::after{opacity:1}
.kg-spatial-surface:focus-within{border-color:var(--accent)}
.hero-art,.home-studio{translate:0 var(--kg-scroll-y,0px)}
nav a{position:relative;transition:color 220ms ease,transform 300ms cubic-bezier(.16,1,.3,1)}
nav a::after{content:'';position:absolute;inset-inline:0;bottom:1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:center;transition:transform 350ms cubic-bezier(.16,1,.3,1);opacity:.75}
nav a[aria-current=page]::after,nav a:hover::after,nav a:focus-visible::after{transform:scaleX(1)}
nav a:hover{transform:translateY(-2px)}
.button,.icon-button,.copy-button,.save-contact{position:relative;overflow:clip}
.kg-touch-light{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at center,currentColor,transparent 70%);pointer-events:none;z-index:2}
.field-label{transition:color 220ms ease,background-color 250ms ease;border-radius:8px}
.field-label:focus-within{background:color-mix(in srgb,var(--accent) 3%,transparent)}
.tabs>.button{transition:transform 300ms ease,background-color 350ms ease,border-color 250ms ease}
.tabs>.button:focus-visible{transform:translateY(-2px)}
dialog[open]{animation:kg-spatial-dialog 450ms cubic-bezier(.16,1,.3,1);transform-origin:50% 65%}
@keyframes kg-spatial-dialog{from{opacity:0;transform:perspective(1200px) translate3d(0,28px,-30px) rotateX(8deg)}to{opacity:1;transform:none}}
html.motion-paused .kg-kinetic-title::after{animation-play-state:paused}
@media(max-width:700px){.kg-abstract-anchor{left:-130px;top:27vh;scale:.7}.kg-abstract-anchor:nth-child(2){display:none}.kg-spatial-scene{opacity:.2}}
@media(hover:none),(pointer:coarse){.kg-spatial-surface.depth-active,.kg-kinetic-title.depth-active{transform:none}.hero-art,.home-studio{translate:none}nav a:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.kg-abstract-anchor,.kg-spatial-surface,.kg-spatial-surface::after,.kg-kinetic-title,nav a,nav a::after,.field-label{transition:none!important}.kg-kinetic-title::after{animation:none!important;opacity:.25!important}.kg-spatial-surface.depth-active,.kg-kinetic-title.depth-active{transform:none}.kg-touch-light{display:none}.hero-art,.home-studio{translate:none}dialog[open]{animation:none!important}nav a:hover{transform:none}}

/* Role decoration follows the server role; it grants no permission. */
.kg-role-badge{--role-color:var(--muted);display:inline-flex;position:relative;isolation:isolate;align-items:center;gap:7px;max-width:100%;padding:3px 11px;border:1px solid var(--line);border-radius:999px;background:var(--panel2);color:var(--role-color);font-size:11px;font-weight:650;line-height:1.8;overflow:hidden;vertical-align:middle}
.kg-role-badge svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.kg-role-badge span,.kg-role-badge svg{position:relative;z-index:1}
.kg-role-badge[data-role=master]{--role-color:#f1d393;border-color:#cfaa5a70;background:#362e1b;color:var(--role-color);box-shadow:0 0 14px #d9b6681c}.kg-role-badge[data-role=admin]{--role-color:#7be3d1;border-color:#65d8c470;background:#132f31;box-shadow:0 0 12px #65d8c41a}
.kg-role-badge[data-role=master]::after,.kg-role-badge[data-role=admin]::after{content:'';position:absolute;inset:-10px 0;width:35%;background:linear-gradient(105deg,transparent,color-mix(in srgb,var(--role-color) 30%,transparent),transparent);transform:translateX(-180%) skewX(-18deg);animation:kg-role-shine 6.5s ease-in-out infinite;pointer-events:none}
.kg-role-badge[data-role=admin]::after{animation-duration:8s}.kg-role-badge[data-role=master] svg{filter:drop-shadow(0 0 3px #e8c77966)}
:root[data-theme=light] .kg-role-badge[data-role=master]{--role-color:#76500b;background:#fff4d5;border-color:#ad801a66}:root[data-theme=light] .kg-role-badge[data-role=admin]{--role-color:#09695c;background:#e2f7ef;border-color:#148c7366}
@keyframes kg-role-shine{0%,58%{transform:translateX(-180%) skewX(-18deg);opacity:0}65%{opacity:1}85%,100%{transform:translateX(450%) skewX(-18deg);opacity:0}}
.motion-paused .kg-role-badge::after,.kg-intro-pending .kg-role-badge::after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.kg-role-badge::after{animation:none!important;display:none}}



@media(prefers-reduced-motion:reduce){.kg-abstract-orbit,.kg-glass-core{animation:none!important}.kg-abstract-orbit{transform:rotateX(-16deg) rotateY(24deg) rotateZ(-12deg)}}