/* Motion never supplies conditional visibility. Without JavaScript all of the
   original interface remains visible and usable. */
:is(.planner-page, .account-page, .auth-page) {
  --dd-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

.planner-tabs[data-motion-marker="ready"] { position: relative; }
.planner-tabs[data-motion-marker="ready"] button.active { border-bottom-color: transparent; }
.planner-tabs[data-motion-marker="ready"]::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: var(--dd-tab-width, 0px);
  background: var(--ink);
  transform: translateX(var(--dd-tab-x, 0px));
  transition: transform .46s var(--dd-motion-ease), width .4s var(--dd-motion-ease);
  pointer-events: none;
}

:is(.planner-page, .account-page, .auth-page) .button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background .25s, color .25s, border-color .25s,
    box-shadow .35s var(--dd-motion-ease), translate .35s var(--dd-motion-ease);
}
:is(.planner-page, .account-page, .auth-page) .button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--dd-press-x, 75%) var(--dd-press-y, 25%),
    #ffffff23, transparent 66%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
:is(.planner-page, .account-page, .auth-page) .button:active::before { opacity: 1; }
:is(.planner-page, .account-page) :is(.room-choice, .furniture-catalog button, .style-choice, .account-nav) {
  transition: background .22s, border-color .22s, color .22s,
    box-shadow .35s var(--dd-motion-ease), translate .35s var(--dd-motion-ease);
}
.planner-page .room-choice.active { box-shadow: inset 3px 0 0 #62734f; }
.planner-page .room-choice > i {
  transition: box-shadow .3s, scale .35s var(--dd-motion-ease);
}
.planner-page .room-choice.active > i {
  box-shadow: 0 0 0 1px #a7b393, 0 0 0 4px #84976b17;
  scale: 1.08;
}
.planner-page .catalog-filters button,
.planner-page .scene-view-toggle button,
.planner-page .editing-toolbar > button {
  transition: background .22s, color .22s, border-color .22s, box-shadow .25s;
}
.planner-page .planner-mode-label { transition: color .3s; }
.planner-page .planner-mode-label .status-dot {
  transition: background-color .3s, box-shadow .4s;
}
.planner-page .planner-mode-label[data-save-state="dirty"] .status-dot {
  background: #b58e52;
  box-shadow: 0 0 0 4px #b58e5217;
}
.planner-page .planner-mode-label[data-save-state="saved"] .status-dot {
  background: #67844d;
  box-shadow: 0 0 0 4px #67844d18;
}
.account-page .saved-project {
  transition: border-color .3s, box-shadow .4s var(--dd-motion-ease),
    translate .4s var(--dd-motion-ease);
}
.account-page .saved-project-image img {
  transition: scale .9s var(--dd-motion-ease), filter .6s;
}
.account-page .saved-open-link,
.account-page .document-row a {
  transition: color .2s, border-color .25s;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(.planner-page, .account-page, .auth-page) .button:not(:disabled):hover {
    translate: 0 -2px;
    box-shadow: 0 6px 16px #23332216;
  }
  :is(.planner-page, .account-page, .auth-page) .button:hover::before { opacity: 1; }
  .planner-page .furniture-catalog button:hover {
    translate: 0 -2px;
    border-color: #aebd9e;
    box-shadow: 0 5px 12px #3146250b;
  }
  .planner-page .style-choice:hover { border-color: #9dac8c; }
  .planner-page .room-choice:hover > i { scale: 1.13; }
  .account-page .saved-project:hover {
    translate: 0 -4px;
    border-color: #b6c4a8;
    box-shadow: 0 15px 28px #283d2510;
  }
  .account-page .saved-project:hover .saved-project-image img { scale: 1.04; filter: saturate(.85); }
  .account-page .saved-open-link:hover { color: #697c4e; border-color: #697c4e; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.planner-page, .account-page, .auth-page),
  :is(.planner-page, .account-page, .auth-page) *,
  :is(.planner-page, .account-page, .auth-page) *::before,
  :is(.planner-page, .account-page, .auth-page) *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}