/* Beta 0.3.4 — tactile press / long-press motion layer. */

*{
  -webkit-tap-highlight-color:transparent;
}

button,
.menu-item,
.sheet-item,
.soft-btn,
.primary-soft,
.fab,
.icon-btn,
.media-picker-card,
.starter-card,
.block{
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* Selection stays internal. No blue rectangle around the selected Rich Block. */
.block.selected:after{
  display:none!important;
  content:none!important;
  box-shadow:none!important;
}
.block.selected{
  outline:0!important;
}

/* The old three-dots control is removed from the visual editor completely. */
.block-tools,
.block .mini-btn{
  display:none!important;
}

/* Long-press block menu is intentionally tiny: move up, move down, delete. */
.block-quick-menu{
  width:210px!important;
  min-width:210px!important;
  max-width:min(210px,calc(100vw - 20px))!important;
  max-height:220px!important;
  padding:6px!important;
}
.block-quick-menu .menu-list{
  display:grid;
  gap:3px;
}
.block-quick-menu .menu-item{
  min-height:45px!important;
  padding:8px 10px!important;
  border-radius:13px!important;
}
.block-quick-menu .menu-icon{
  width:30px!important;
  font-size:19px!important;
}
.block-quick-menu .menu-copy strong{
  font-size:14px!important;
}
.block-quick-menu .menu-item.danger{
  color:var(--danger)!important;
}

.press-surface{
  position:relative;
  isolation:isolate;
  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    filter .18s ease,
    background-color .18s ease,
    box-shadow .18s ease,
    opacity .18s ease;
  will-change:transform;
}

button.press-surface.is-pressed,
.fab.press-surface.is-pressed,
.icon-btn.press-surface.is-pressed{
  transform:scale(.90) translateZ(0)!important;
  filter:brightness(.94);
}

.menu-item.press-surface.is-pressed,
.sheet-item.press-surface.is-pressed,
.soft-btn.press-surface.is-pressed,
.primary-soft.press-surface.is-pressed,
.media-picker-card.press-surface.is-pressed,
.starter-card.press-surface.is-pressed{
  transform:scale(.975) translateY(1px) translateZ(0)!important;
  filter:brightness(.95);
}

.block.press-surface.is-pressed{
  transform:scale(.992) translateY(1px) translateZ(0)!important;
  filter:brightness(.96);
}

.press-surface.press-release{
  animation:pressRelease .34s cubic-bezier(.2,1.35,.25,1);
}

@keyframes pressRelease{
  0%{transform:scale(.97) translateZ(0)}
  48%{transform:scale(1.018) translateZ(0)}
  100%{transform:scale(1) translateZ(0)}
}

button.press-surface.press-release,
.fab.press-surface.press-release,
.icon-btn.press-surface.press-release{
  animation-name:controlRelease;
}
@keyframes controlRelease{
  0%{transform:scale(.91) translateZ(0)}
  52%{transform:scale(1.075) translateZ(0)}
  100%{transform:scale(1) translateZ(0)}
}

.press-surface.long-pressing{
  transition-duration:.42s;
}

button.press-surface.long-pressing,
.fab.press-surface.long-pressing,
.icon-btn.press-surface.long-pressing{
  transform:scale(.86) translateZ(0)!important;
}

.menu-item.press-surface.long-pressing,
.sheet-item.press-surface.long-pressing,
.soft-btn.press-surface.long-pressing,
.primary-soft.press-surface.long-pressing,
.media-picker-card.press-surface.long-pressing,
.starter-card.press-surface.long-pressing{
  transform:scale(.955) translateY(2px) translateZ(0)!important;
}

.block.press-surface.long-pressing{
  transform:scale(.985) translateY(2px) translateZ(0)!important;
  filter:brightness(.93) saturate(1.08);
}

.press-surface.long-pressed{
  animation:longPressPulse .46s cubic-bezier(.18,.9,.24,1);
}

@keyframes longPressPulse{
  0%{filter:brightness(.92) saturate(1.08)}
  42%{filter:brightness(1.12) saturate(1.16)}
  100%{filter:none}
}

.press-ripple{
  position:absolute;
  z-index:-1;
  width:18px;
  height:18px;
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.1);
  background:radial-gradient(circle,rgba(255,255,255,.24) 0%,rgba(255,255,255,.10) 42%,transparent 72%);
  animation:liquidRipple .56s ease-out forwards;
}

@keyframes liquidRipple{
  0%{opacity:.9;transform:translate(-50%,-50%) scale(.1)}
  72%{opacity:.32}
  100%{opacity:0;transform:translate(-50%,-50%) scale(9)}
}

.popup-menu:not(.hidden){
  animation:glassMenuIn .18s cubic-bezier(.18,.92,.24,1);
  transform-origin:top center;
}
.sheet:not(.hidden){
  animation:glassSheetIn .26s cubic-bezier(.16,.86,.24,1);
}
@keyframes glassMenuIn{
  from{opacity:0;transform:translateY(6px) scale(.965)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes glassSheetIn{
  from{opacity:0;transform:translateY(20px) scale(.988)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

button:focus-visible,
.menu-item:focus-visible,
.sheet-item:focus-visible,
.soft-btn:focus-visible,
.primary-soft:focus-visible{
  outline:2px solid color-mix(in srgb,var(--accent) 65%,transparent);
  outline-offset:2px;
}

html.mobile-performance .press-surface{
  transition:transform .11s ease,opacity .11s ease!important;
  will-change:auto;
}
html.mobile-performance button.press-surface.is-pressed,
html.mobile-performance .fab.press-surface.is-pressed,
html.mobile-performance .icon-btn.press-surface.is-pressed{
  transform:scale(.94) translateZ(0)!important;
  filter:none!important;
}
html.mobile-performance .menu-item.press-surface.is-pressed,
html.mobile-performance .sheet-item.press-surface.is-pressed,
html.mobile-performance .soft-btn.press-surface.is-pressed,
html.mobile-performance .primary-soft.press-surface.is-pressed,
html.mobile-performance .media-picker-card.press-surface.is-pressed,
html.mobile-performance .starter-card.press-surface.is-pressed{
  transform:scale(.985) translateZ(0)!important;
  filter:none!important;
}
html.mobile-performance .block.press-surface.is-pressed,
html.mobile-performance .block.press-surface.long-pressing{
  transform:scale(.994) translateZ(0)!important;
  filter:none!important;
}
html.mobile-performance .press-ripple{display:none!important}
html.mobile-performance .press-surface.press-release{
  animation:mobilePressRelease .18s ease-out!important;
}
html.mobile-performance .press-surface.long-pressed{
  animation:mobileLongPress .22s ease-out!important;
}
html.mobile-performance .popup-menu:not(.hidden){
  animation:mobileMenuIn .14s ease-out!important;
}
html.mobile-performance .sheet:not(.hidden){
  animation:mobileSheetIn .18s ease-out!important;
}
@keyframes mobilePressRelease{
  from{transform:scale(.97) translateZ(0)}
  to{transform:scale(1) translateZ(0)}
}
@keyframes mobileLongPress{
  from{transform:scale(.985) translateZ(0);opacity:.9}
  to{transform:scale(1) translateZ(0);opacity:1}
}
@keyframes mobileMenuIn{
  from{opacity:0;transform:translateY(4px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes mobileSheetIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

@media(prefers-reduced-motion:reduce){
  .press-surface{
    transition:none!important;
  }
  .press-surface.press-release,
  .press-surface.long-pressed,
  .popup-menu:not(.hidden),
  .sheet:not(.hidden),
  .press-ripple{
    animation:none!important;
  }
}
