/**
 * base.css
 * ------------------------------------------------------------------
 * リセット・基本レイアウト・共通UIパーツのスタイル。
 * ナチュラル・温かみ・木目調を意識した余白の広い設計。
 * ------------------------------------------------------------------
 */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-base);
  font-size: var(--fs-md);
  -webkit-tap-highlight-color: transparent;
  /* iOSのバウンススクロールでの背景見切れ防止 */
  overscroll-behavior-y: none;
}

body {
  /* セーフエリア対応（iPhoneノッチ／ホームインジケータ） */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

img {
  max-width: 100%;
  display: block;
}

/* ===== ヘッダー ===== */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  height: var(--header-height);
  padding: 0 var(--space-md);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.app-header__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: calc(var(--space-sm) * -1);
  color: var(--primary-dark);
}

.app-header__title {
  flex: 1;
  font-size: var(--fs-lg);
  font-weight: 600;
  text-align: center;
  padding-right: 36px; /* 戻るボタン分のバランス調整 */
}

/* ===== メインコンテンツ ===== */
.app-main {
  flex: 1;
  width: 100%;
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: var(--space-md);
  padding-bottom: calc(var(--tabbar-height) + var(--space-lg));
}

/* ===== タブバー ===== */
.app-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  height: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.app-tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-size: var(--fs-xs);
  color: var(--sub-text);
  transition: color var(--duration-fast) var(--ease-standard);
}

.app-tabbar__item.is-active {
  color: var(--accent);
  font-weight: 600;
}

.app-tabbar__icon {
  font-size: 22px;
  line-height: 1;
}

/* ===== カード ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

/* ===== ボタン ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  height: 48px;
  padding: 0 var(--space-lg);
  border-radius: var(--radius-pill);
  font-size: var(--fs-md);
  font-weight: 600;
  transition: transform var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard);
}

.btn:active {
  transform: scale(0.97);
  opacity: 0.85;
}

.btn--primary {
  background: var(--primary);
  color: var(--surface);
}

.btn--ghost {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}

.btn--fab {
  position: fixed;
  right: var(--space-lg);
  bottom: calc(var(--tabbar-height) + var(--space-lg) + env(safe-area-inset-bottom));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--surface);
  font-size: var(--fs-xl);
  box-shadow: var(--shadow-lg);
  z-index: 9;
}

/* ===== 空状態 ===== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
  color: var(--sub-text);
}

.empty-state__icon {
  font-size: 40px;
  margin-bottom: var(--space-md);
  opacity: 0.6;
}

.empty-state__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-xs);
}

.empty-state__desc {
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* ===== 検索ボックス ===== */
.search-box {
  margin-bottom: var(--space-md);
}

.search-box__input {
  width: 100%;
  height: 44px;
  padding: 0 var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-md);
  color: var(--text);
}

.search-box__input::placeholder {
  color: var(--sub-text);
}

/* ===== 設定画面 ===== */
.settings-group {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--border);
}

.settings-row:last-child {
  border-bottom: none;
}

.settings-row__value {
  color: var(--sub-text);
  font-size: var(--fs-sm);
}

.settings-row--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-sm);
}

.settings-row__hint {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--sub-text);
  line-height: 1.5;
}

.settings-segmented {
  display: flex;
  background: var(--bg);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 3px;
}

.settings-segmented__item {
  flex: 1;
  padding: var(--space-sm) 0;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  color: var(--sub-text);
  text-align: center;
  transition: background var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.settings-segmented__item.is-selected {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.settings-note {
  margin-top: var(--space-md);
  font-size: var(--fs-xs);
  color: var(--sub-text);
  text-align: center;
}

/* ===== モーダル ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--overlay-scrim);
  animation: fade-in var(--duration-base) var(--ease-standard);
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal {
  width: 100%;
  max-width: var(--max-content-width);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-lg);
  padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-lg);
  animation: slide-up var(--duration-base) var(--ease-standard);
}

@keyframes slide-up {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal__header {
  margin-bottom: var(--space-md);
}

.modal__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: 0;
}

.modal__body {
  margin-bottom: var(--space-lg);
}

.modal__message {
  color: var(--sub-text);
  line-height: 1.6;
  margin: 0;
}

.modal__footer {
  display: flex;
  gap: var(--space-sm);
}

.modal__footer .btn {
  flex: 1;
}

.modal__field {
  margin-bottom: var(--space-md);
}

.modal__label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--sub-text);
  margin-bottom: var(--space-xs);
}

.modal__input {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-md);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  color: var(--text);
}

.modal__delete-btn {
  width: 100%;
  color: var(--danger);
  margin-top: var(--space-sm);
}

/* ===== アイコンピッカー ===== */
.icon-picker {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-sm);
}

.icon-picker__item {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  font-size: 24px;
  background: var(--bg);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.icon-picker__item.is-selected {
  border-color: var(--accent);
  background: var(--surface-hover);
}

/* ===== アルバムカード ===== */
.album-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-sm);
  text-align: center;
}

.album-card__icon {
  font-size: 36px;
  line-height: 1;
}

.album-card__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  /* 長い名前は省略する */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.album-card__sub {
  font-size: var(--fs-xs);
  color: var(--sub-text);
}

.album-card__edit {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--sub-text);
  font-size: var(--fs-sm);
}

.album-card__edit:active {
  background: var(--surface-hover);
}

/* ===== 種類ピッカー（アイコン+ラベル） ===== */
.type-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.type-picker__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm);
  font-size: var(--fs-xs);
  color: var(--sub-text);
  background: var(--bg);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.type-picker__item-icon {
  font-size: 22px;
}

.type-picker__item.is-selected {
  border-color: var(--accent);
  background: var(--surface-hover);
  color: var(--text);
  font-weight: 600;
}

/* ===== 収納写真エリア ===== */
.storage-photo {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  /* 写真の縦横比に応じて高さが決まるが、極端な縦長/横長を避ける */
  max-height: 70vh;
}

/* 開閉演出中は、マーカーの拡大・影が写真の外側にはみ出して見えるようにする */
.storage-photo.is-animating-open {
  overflow: visible;
}

.storage-photo__img {
  width: 100%;
  height: auto;
  display: block;
}

.storage-photo__change-btn {
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  background: var(--overlay-scrim);
  color: #fff;
  font-size: var(--fs-sm);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(4px);
}

.storage-photo__add-btn {
  display: flex;
  margin: 0 auto;
}

.storage-photo__edit-hint {
  margin-top: var(--space-sm);
  font-size: var(--fs-xs);
  color: var(--sub-text);
  text-align: center;
}

/* ===== ホットスポットマーカー（閲覧モード・読み取り専用） ===== */
.spot-marker {
  position: absolute;
  box-sizing: border-box;
  z-index: 3; /* spot-interior（奥の層）より手前に表示する */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 252, 248, 0.85);
  background: rgba(75, 58, 47, 0.12);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(1px);
  transition: background var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard),
    filter var(--duration-fast) var(--ease-standard);
}

.spot-marker:active {
  background: rgba(75, 58, 47, 0.24);
}

.spot-marker__icon {
  font-size: 18px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

/* タップされたスポット以外を減光し、「開いているのは1つだけ」を強調する */
.spot-marker.is-dimmed {
  opacity: 0.32;
  filter: grayscale(35%);
  pointer-events: none;
}

/* ===== 開閉演出アニメーション ===== */
/*
 * 実際の写真は平面（2D）のため、扉の立体的な開閉は再現できない。
 * そこで以下の3つを組み合わせて「実際に開けた」感覚を演出する：
 *   1. spot-interior … マーカーの背後に一時的に挿入する「中身」の暗い層
 *   2. spot-marker（前面）が種類ごとのモーションで手前に迫り出し、脇へ離れる
 *   3. box-shadowを同時にアニメーションさせ、浮き上がる「奥行き」を表現する
 * durationは--spot-anim-durationでJSから注入する。
 */
.spot-marker {
  animation-duration: var(--spot-anim-duration, 260ms);
  animation-timing-function: var(--ease-standard);
  animation-fill-mode: forwards;
}

/* マーカーの背後に一時挿入される「中身が覗いている」暗い層 */
.spot-interior {
  position: absolute;
  box-sizing: border-box;
  z-index: 2;
  border-radius: var(--radius-sm);
  background: linear-gradient(150deg, rgba(75, 58, 47, 0.45), rgba(75, 58, 47, 0.65));
  box-shadow: inset 0 6px 14px rgba(0, 0, 0, 0.35);
  opacity: 0;
  animation: spot-interior-reveal var(--spot-anim-duration, 260ms) var(--ease-standard) forwards;
}
@keyframes spot-interior-reveal {
  0% { opacity: 0; }
  45% { opacity: 1; }
  100% { opacity: 1; }
}

.spot-anim--drawer {
  animation-name: spot-anim-drawer;
}
@keyframes spot-anim-drawer {
  0% { transform: scale(1) translateY(0); opacity: 1; box-shadow: 0 0 0 rgba(75, 58, 47, 0); }
  50% { transform: scale(1.2) translateY(9%); opacity: 1; box-shadow: 0 10px 18px rgba(75, 58, 47, 0.3); }
  100% { transform: scale(1.32) translateY(15%); opacity: 0; box-shadow: 0 14px 22px rgba(75, 58, 47, 0.2); }
}

.spot-anim--door-left {
  transform-origin: 100% 50%;
  animation-name: spot-anim-door-left;
}
@keyframes spot-anim-door-left {
  0% { transform: scaleX(1) skewY(0deg); opacity: 1; box-shadow: 0 0 0 rgba(75, 58, 47, 0); }
  50% { transform: scaleX(0.55) skewY(-7deg); opacity: 1; box-shadow: -10px 6px 16px rgba(75, 58, 47, 0.28); }
  100% { transform: scaleX(0.2) skewY(-13deg); opacity: 0; box-shadow: -14px 8px 18px rgba(75, 58, 47, 0.18); }
}

.spot-anim--door-right {
  transform-origin: 0% 50%;
  animation-name: spot-anim-door-right;
}
@keyframes spot-anim-door-right {
  0% { transform: scaleX(1) skewY(0deg); opacity: 1; box-shadow: 0 0 0 rgba(75, 58, 47, 0); }
  50% { transform: scaleX(0.55) skewY(7deg); opacity: 1; box-shadow: 10px 6px 16px rgba(75, 58, 47, 0.28); }
  100% { transform: scaleX(0.2) skewY(13deg); opacity: 0; box-shadow: 14px 8px 18px rgba(75, 58, 47, 0.18); }
}

.spot-anim--door-up {
  transform-origin: 50% 100%;
  animation-name: spot-anim-door-up;
}
@keyframes spot-anim-door-up {
  0% { transform: scaleY(1) skewX(0deg); opacity: 1; box-shadow: 0 0 0 rgba(75, 58, 47, 0); }
  50% { transform: scaleY(0.55) skewX(-7deg); opacity: 1; box-shadow: 0 -10px 16px rgba(75, 58, 47, 0.28); }
  100% { transform: scaleY(0.2) skewX(-13deg); opacity: 0; box-shadow: 0 -14px 18px rgba(75, 58, 47, 0.18); }
}

.spot-anim--slide {
  animation-name: spot-anim-slide;
}
@keyframes spot-anim-slide {
  0% { transform: translateX(0); opacity: 1; box-shadow: 0 0 0 rgba(75, 58, 47, 0); }
  50% { transform: translateX(30%); opacity: 1; box-shadow: 6px 8px 16px rgba(75, 58, 47, 0.26); }
  100% { transform: translateX(65%); opacity: 0; box-shadow: 8px 10px 18px rgba(75, 58, 47, 0.16); }
}

.spot-anim--button {
  animation-name: spot-anim-button;
}
@keyframes spot-anim-button {
  0% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 rgba(75, 58, 47, 0); }
  35% { transform: scale(0.8); opacity: 1; box-shadow: inset 0 4px 8px rgba(75, 58, 47, 0.3); }
  70% { transform: scale(1.1); opacity: 1; box-shadow: 0 8px 14px rgba(75, 58, 47, 0.25); }
  100% { transform: scale(1.18); opacity: 0; box-shadow: 0 10px 16px rgba(75, 58, 47, 0.15); }
}

/* ===== ホットスポット編集画面 ===== */
.hotspot-editor__hint {
  font-size: var(--fs-xs);
  color: var(--sub-text);
  text-align: center;
  margin: 0 0 var(--space-sm);
}

.hotspot-editor__photo-wrap {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  /* ドラッグ操作中にページ自体がスクロールしないようにする */
  touch-action: none;
  user-select: none;
}

.hotspot-editor__img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none; /* タップ判定はphoto-wrap側で行う */
}

/* ===== ホットスポットボックス ===== */
.hotspot-box {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid rgba(200, 159, 106, 0.85); /* primaryを半透明に */
  background: rgba(200, 159, 106, 0.18);
  border-radius: var(--radius-sm);
  touch-action: none;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hotspot-box.is-selected {
  border-color: var(--accent);
  background: rgba(122, 155, 118, 0.22);
  box-shadow: 0 0 0 2px rgba(122, 155, 118, 0.35);
}

.hotspot-box__label {
  font-size: 18px;
  pointer-events: none;
}

.hotspot-box__handle {
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
  box-shadow: var(--shadow-sm);
  display: none; /* 選択中のみ表示 */
  touch-action: none;
  cursor: nwse-resize;
}

.hotspot-box.is-selected .hotspot-box__handle {
  display: block;
}

/* ===== ホットスポット操作パネル ===== */
.hotspot-editor__panel {
  margin-top: var(--space-md);
}

.hotspot-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.hotspot-panel__type-picker {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-md);
}

.hotspot-panel__actions {
  display: flex;
  gap: var(--space-sm);
}

.hotspot-panel__actions .btn {
  flex: 1;
}

.hotspot-panel__delete-btn {
  color: var(--danger);
}

/* ===== アイテム一覧 ===== */
.item-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.item-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: left;
}

.item-row__thumb {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.item-row__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-row__thumb-icon {
  font-size: 20px;
  opacity: 0.6;
}

.item-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.item-row__name {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-row__memo {
  font-size: var(--fs-xs);
  color: var(--sub-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-row__chevron {
  flex-shrink: 0;
  color: var(--border);
  font-size: var(--fs-lg);
}

/* ===== アイテム詳細画面 ===== */
.item-detail__photo-wrap {
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.item-detail__photo {
  width: 100%;
  height: auto;
  max-height: 40vh;
  object-fit: cover;
  display: block;
}

.item-detail__photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  font-size: 40px;
  background: var(--surface);
  border: 1px dashed var(--border);
  opacity: 0.7;
}

.item-detail__photo-btn {
  width: 100%;
  margin-bottom: var(--space-lg);
}

.item-detail__textarea {
  height: 80px;
  padding-top: var(--space-sm);
  resize: vertical;
  font-family: inherit;
}

.item-detail__save-btn {
  width: 100%;
  margin-top: var(--space-sm);
}

.item-detail__delete-btn {
  width: 100%;
  color: var(--danger);
  margin-top: var(--space-sm);
}

.item-detail__saved-toast {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--accent);
  margin-top: var(--space-sm);
  animation: fade-in var(--duration-fast) var(--ease-standard);
}

/* ===== 検索結果 ===== */
.search-result-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.search-result-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: left;
}

.search-result-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search-result-row__name {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-row__path {
  font-size: var(--fs-xs);
  color: var(--sub-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-row__chevron {
  flex-shrink: 0;
  color: var(--border);
  font-size: var(--fs-lg);
}

/* ===== ユーティリティ ===== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* キーボードフォーカスの可視化（アクセシビリティ） */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* モーション低減設定の尊重 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}