/* V213: restrained tactile depth; transforms stay on individual components so
   fixed navigation, dialogs, and overlays keep their existing positioning. */
:root{--wk-ui-perspective:1200px;--wk-ui-lift:15px;--wk-ui-shadow:0 18px 38px rgba(0,0,0,.46),0 5px 12px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.12)}
@media(max-width:1024px){:root{--wk-ui-perspective:800px;--wk-ui-lift:8px}}

/* Public site cards and the Echoes terminal use the existing art and surfaces. */
.card,.product,.media-note,.wk-fan-console,.wk-fan-form,.wk-echoes-console,
.wk-echo-card,.wk-comment-card,.wk-fan-comment,.wk-fan-emoji-panel,
.wk-fan-gif-panel,.wk-fan-avatar-panel{
  box-shadow:var(--wk-ui-shadow);
  transform-style:preserve-3d;
  backface-visibility:hidden;
}
.wk-fan-message-editor,.wk-fan-form input:not([type=hidden]),
.wk-fan-form select,.wk-fan-form textarea{
  box-shadow:inset 0 3px 8px rgba(0,0,0,.56),inset 0 1px 0 rgba(255,255,255,.1),0 4px 12px rgba(0,0,0,.28);
}
.wk-fan-emoji img,.wk-fan-avatar-preview img,.wk-avatar-preview img,
.wk-fan-avatar-option img{filter:drop-shadow(0 2px 3px rgba(0,0,0,.58)) drop-shadow(0 0 2px rgba(255,226,185,.22))}
@media(hover:hover) and (pointer:fine){
  .card:hover,.product:hover,.media-note:hover,.wk-echo-card:hover,
  .wk-comment-card:hover,.wk-fan-comment:hover{
    transform:perspective(var(--wk-ui-perspective)) translateZ(var(--wk-ui-lift)) rotateX(1deg);
    transition:transform 350ms cubic-bezier(.25,.8,.25,1),box-shadow 350ms cubic-bezier(.25,.8,.25,1);
    box-shadow:0 24px 46px rgba(0,0,0,.52),0 8px 16px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.16);
  }
}

/* Echo controls and admin modules keep their geometry while gaining layered depth. */
.wk-fan-emoji-toggle,.wk-fan-gif-toggle,.wk-fan-emoji-category,
.wk-fan-emoji,.wk-fan-gif-result,.wk-fan-avatar-option,
.wk-fan-form button,.wk-echo-form button,.dash-nav a,.quick-card,
.panel,.security-stat,.holiday-schedule,.maint-card{
  box-shadow:var(--wk-ui-shadow);
  transition:transform 350ms cubic-bezier(.25,.8,.25,1),box-shadow 350ms cubic-bezier(.25,.8,.25,1),filter 180ms ease;
}
@media(hover:hover) and (pointer:fine){
  .wk-fan-form button:hover,.wk-echo-form button:hover,.dash-nav a:hover,
  .quick-card:hover,.maint-card:hover,.wk-fan-emoji-toggle:hover,
  .wk-fan-gif-toggle:hover,.wk-fan-emoji-category:hover,.wk-fan-emoji:hover,
  .wk-fan-gif-result:hover,.wk-fan-avatar-option:hover{
    transform:perspective(var(--wk-ui-perspective)) translateZ(var(--wk-ui-lift)) rotateX(1deg);
  }
  .security-stat:hover,.holiday-schedule:hover{
    transform:perspective(var(--wk-ui-perspective)) translateZ(var(--wk-ui-lift)) rotateX(1deg);
  }
}

/* Targets named here already exist in the picker; minimums apply only to controls. */
.wk-fan-emoji-toggle,.wk-fan-gif-toggle,.wk-fan-emoji-category,
.wk-fan-emoji,.wk-fan-gif-result,.wk-fan-avatar-option,
.wk-fan-form button,.wk-echo-form button,.dash-nav a{min-height:44px;touch-action:manipulation}
.wk-fan-emoji-toggle,.wk-fan-gif-toggle,.wk-fan-emoji,.wk-fan-gif-result,
.wk-fan-avatar-option{min-width:44px}
.wk-tactile-pressed,.wk-fan-form button:active,.wk-echo-form button:active,
.dash-nav a:active,.quick-card:active,.wk-fan-emoji:active,.wk-fan-emoji-category:active,
.wk-fan-gif-result:active,.wk-fan-avatar-option:active{
  transform:perspective(var(--wk-ui-perspective)) scale(.96) translateY(2px) translateZ(-5px)!important;
  filter:brightness(.94);
  box-shadow:inset 0 3px 8px rgba(0,0,0,.54),0 2px 5px rgba(0,0,0,.34)!important;
}
@media(max-width:1024px){
  .wk-fan-emoji-panel,.wk-fan-gif-panel{width:min(100%,34rem);max-width:100%;}
  button,[role="button"],.btn,.dash-nav a{min-height:44px}
}

/* A local accent wave appears only after a confirmed successful form response. */
.wk-tactile-burst-host{position:relative;isolation:isolate}
.wk-tactile-burst{position:absolute;z-index:6;left:var(--wk-burst-x,50%);top:var(--wk-burst-y,50%);width:clamp(2.75rem,8vw,5.5rem);aspect-ratio:1;border:2px solid rgba(255,221,170,.94);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) scale(.18);opacity:0;box-shadow:0 0 12px rgba(255,190,105,.58),inset 0 0 12px rgba(255,235,190,.28);animation:wk-tactile-wave 650ms cubic-bezier(.18,.72,.2,1) forwards}
.wk-tactile-burst:after{content:"";position:absolute;inset:18%;border:1px solid rgba(255,75,87,.82);border-radius:50%;box-shadow:0 0 10px rgba(255,23,40,.45)}
@keyframes wk-tactile-wave{0%{transform:translate(-50%,-50%) scale(.18);opacity:.95}100%{transform:translate(-50%,-50%) scale(1.65);opacity:0}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .card:hover,.product:hover,.media-note:hover,.wk-echo-card:hover,.wk-comment-card:hover,.wk-fan-comment:hover,
  .wk-fan-form button:hover,.wk-echo-form button:hover,.dash-nav a:hover,.quick-card:hover,.maint-card:hover,
  .wk-fan-emoji-toggle:hover,.wk-fan-gif-toggle:hover,.wk-fan-emoji-category:hover,.wk-fan-emoji:hover,.wk-fan-gif-result:hover,.wk-fan-avatar-option:hover{transform:none}
}
