/* World crossings. Driven by js/theme.js; see DESIGN.md section 8.
   The overlay is fixed, pointer-events:none and animates only transform, opacity and clip-path. */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Overlay host ---- */
.theme-fx,
.theme-cover {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  pointer-events: none;
}

.theme-cover {
  z-index: 2147482990;
}

.theme-fx {
  view-transition-name: theme-fx;
}

.theme-fx .fx {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity, clip-path;
}

/* ---- Into dark ---- */
.fx-dim {
  inset: 0;
  background: #0b0703;
  opacity: 0;
}

.fx-ring {
  left: 50%;
  top: 50%;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.7));
}

.fx-crt {
  inset: 0;
  opacity: 0;
  clip-path: inset(49.8% 50% 49.8% 50%);
  background: radial-gradient(ellipse at center, #eaffee 0%, #7dff97 35%, #1c4a26 100%);
  box-shadow: 0 0 40px 6px #5cff7a;
}

.fx-scan {
  inset: 0;
  opacity: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 3px);
}

.fx-flicker {
  inset: 0;
  opacity: 0;
  background: #5cff7a;
}

/* ---- Into light ---- */
.fx-curtain {
  top: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-110%);
  /* Barber-pole stripes: oxblood, paper, navy. */
  background: repeating-linear-gradient(
    115deg,
    #8b1e1e 0 28px,
    #f8f0dc 28px 56px,
    #1d2b4a 56px 84px,
    #f8f0dc 84px 112px
  );
  box-shadow: 6px 0 18px rgba(43, 29, 18, 0.35);
}

.fx-lather {
  top: 0;
  bottom: 0;
  right: 100%;
  width: 3.5rem;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.92));
  filter: blur(2px);
}

.fx-razor {
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, #fff 0%, #cfd6df 45%, #fff 55%, #9aa4b2 100%);
  box-shadow: 0 0 8px 1px rgba(255, 255, 255, 0.9);
}

.fx-warm {
  inset: 0;
  opacity: 0;
  background: #fffdf6;
}

.fx-gilt {
  inset: 10px;
  opacity: 0;
}

.fx-gilt svg {
  display: block;
  filter: drop-shadow(0 1px 0 rgba(90, 20, 20, 0.5));
}

/* ---- View Transitions: we drive these pseudo-elements from JS ---- */
::view-transition-group(theme-fx),
::view-transition-image-pair(theme-fx),
::view-transition-old(theme-fx),
::view-transition-new(theme-fx) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(theme-fx) {
  display: none;
}

html[data-transition] {
  /* Stop the browser's default crossfade; the JS animations do the work. */
}

html[data-transition]::view-transition-group(root) {
  animation: none;
}

html[data-transition]::view-transition-old(root),
html[data-transition]::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

html[data-transition="entering-dark"]::view-transition-old(root) {
  z-index: 2;
}

html[data-transition="entering-dark"]::view-transition-new(root) {
  z-index: 1;
}

html[data-transition="entering-light"]::view-transition-old(root) {
  z-index: 1;
}

html[data-transition="entering-light"]::view-transition-new(root) {
  z-index: 2;
}

/* ---- Reduced motion: a short crossfade only ---- */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root) {
    animation-duration: 120ms;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 120ms;
  }

  .theme-fx,
  .theme-cover {
    display: none;
  }
}