/* fun mode wipe + photo toggle dock */
.site-header {
  z-index: 40;
}

.fun-switch-dock {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 60;
  width: min(38vw, 168px);
  height: 240px;
  pointer-events: none;
  background: transparent;
}

.fun-toggle {
  pointer-events: auto;
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transform: none !important;
}

.fun-toggle:hover,
.fun-toggle:active,
.fun-toggle[aria-pressed="true"] {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.fun-toggle:disabled {
  cursor: wait;
}

.fun-toggle:focus-visible {
  outline: 2px solid #c13433;
  outline-offset: -6px;
}

.fun-toggle__img {
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 148px;
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  background: transparent;
}

.fun-toggle__img.is-on {
  opacity: 0;
}

html[data-fun] .fun-toggle__img.is-off,
.fun-toggle[aria-pressed="true"] .fun-toggle__img.is-off {
  opacity: 0;
}

html[data-fun] .fun-toggle__img.is-on,
.fun-toggle[aria-pressed="true"] .fun-toggle__img.is-on {
  opacity: 1;
}

/* ===== wipe shutter ===== */
.mode-wipe {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
}

.mode-wipe.is-closing,
.mode-wipe.is-holding,
.mode-wipe.is-opening {
  pointer-events: auto;
}

.mode-wipe__top,
.mode-wipe__bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  transform: scaleY(0);
  transition: transform 0.52s cubic-bezier(0.77, 0, 0.18, 1);
}

.mode-wipe__top {
  top: 0;
  transform-origin: top center;
  background: #18191b;
}

.mode-wipe__bottom {
  bottom: 0;
  transform-origin: bottom center;
  background: #c13433;
}

.mode-wipe.is-closing .mode-wipe__top,
.mode-wipe.is-closing .mode-wipe__bottom,
.mode-wipe.is-holding .mode-wipe__top,
.mode-wipe.is-holding .mode-wipe__bottom {
  transform: scaleY(1);
}

.mode-wipe.is-holding .mode-wipe__top,
.mode-wipe.is-holding .mode-wipe__bottom {
  transition: none;
}

.mode-wipe.is-opening .mode-wipe__top,
.mode-wipe.is-opening .mode-wipe__bottom {
  transform: scaleY(0);
  transition-duration: 0.56s;
}

.mode-wipe__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  margin: 0;
  padding: 14px 22px;
  border: 3px solid #140c0e;
  border-radius: 4px;
  background: #fff;
  color: #140c0e !important;
  font-size: clamp(16px, 3.6vw, 26px);
  font-weight: 800;
  letter-spacing: 0.05em;
  white-space: nowrap;
  box-shadow: 8px 8px 0 #140c0e;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-3deg) scale(0.88);
  pointer-events: none;
}

.mode-wipe.is-closing .mode-wipe__mark {
  animation: wipe-mark-in 0.28s ease-out 0.28s forwards;
}

.mode-wipe.is-holding .mode-wipe__mark {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-3deg) scale(1);
  animation: none;
}

.mode-wipe.is-opening .mode-wipe__mark {
  animation: wipe-mark-out 0.2s ease-in forwards;
}

@keyframes wipe-mark-in {
  to {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-3deg) scale(1);
  }
}

@keyframes wipe-mark-out {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-3deg) scale(0.92);
  }
}

@media (max-width: 860px) {
  .fun-switch-dock {
    width: min(42vw, 130px);
    height: 200px;
  }

  .fun-toggle {
    min-height: 200px;
  }

  .fun-toggle__img {
    width: 118px;
    right: -16px;
    bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mode-wipe__top,
  .mode-wipe__bottom,
  .mode-wipe__mark {
    transition: none !important;
    animation: none !important;
  }
}