/* A short RELAI handover into an actual, navigable local example. */
html.example-transition-entering::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2200;
  background: #e6d1af;
  pointer-events: none;
}

.example-transition {
  --transition-star-size: 112px;
  position: fixed;
  inset: 0;
  z-index: 2250;
  overflow: hidden;
  contain: layout paint style;
  pointer-events: auto;
}

body.example-transition-active .logo-world { opacity: 0 !important; }

.example-transition__shade,
.example-transition__wash,
.example-transition__route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.example-transition__shade {
  background: #08080a;
  opacity: 0;
}

.example-transition__wash {
  background: radial-gradient(ellipse at 50% 48%, #f6e5c5, #e6d1af 72%);
  opacity: 0;
}

.example-transition__route path {
  fill: none;
  stroke: #f3d7a3;
  stroke-width: 1.8;
  stroke-opacity: .8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.example-transition__burst {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.example-transition__star {
  position: absolute;
  left: calc(var(--transition-star-size) * -.5);
  top: calc(var(--transition-star-size) * -.5);
  width: var(--transition-star-size);
  height: var(--transition-star-size);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  pointer-events: none;
}

.example-transition__star img {
  display: block;
  width: 100%;
  height: 100%;
  filter: brightness(1.18) drop-shadow(0 0 9px #ffd98a80);
}

.example-transition__star::before {
  content: "";
  position: absolute;
  inset: -34px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff0bb8c, #f3cf8638 42%, transparent 72%);
}

.example-transition__star--trail {
  left: -24px;
  top: -24px;
  width: 48px;
  height: 48px;
  opacity: 0;
}

.example-transition__star--trail::before { display: none; }

.example-transition__caption {
  position: absolute;
  inset: auto 24px 30px;
  margin: 0;
  text-align: center;
  font: 500 .9375rem/1.5 Inter, "Segoe UI", Arial, sans-serif;
  color: #f6e8cc;
  text-shadow: 0 2px 12px #000;
  letter-spacing: -.012em;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 700px) {
  .example-transition { --transition-star-size: 96px; }
  .example-transition__star--trail { left: -20px; top: -20px; width: 40px; height: 40px; }
  .example-transition__caption { inset-inline: 18px; bottom: 22px; font-size: .875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .example-transition { display: none; }
  html.example-transition-entering::before { display: none; }
}