.slider-shell {
  position: relative;
  width: 100%;
  height: clamp(360px, 70vh, 820px);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 80px 6px rgba(0, 0, 0, 0.8);
  background: #000;
}

/* Slides */

.slider-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-position: center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Heebo", system-ui, sans-serif;
  font-weight: 800;
  font-size: 60px;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: scale(1);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.slide--active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

/* Buttons */

.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid #8a9a9a;
  background: transparent;
  color: #9d9d9d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 40px 3px rgba(0, 0, 0, 0.8);
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
  z-index: 20;
}

.slider-nav:hover {
  background-color: #fff;
  color: #333;
  transform: translateY(-50%) scale(1.03);
}

.slider-nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.slider-nav--left { left: 10px; }
.slider-nav--right { right: 10px; }

.slider-nav span {
  font-size: 18px;
  line-height: 1;
  transform: translateY(-1px);
}

/* Ring SVGs */

.rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.rings--left { left: 0; }
.rings--right { right: 0; }

.rings svg {
  width: 100%;
  height: 100%;
  position: absolute;
}

.ring {
  fill: none;
  stroke: #ffffff;
  stroke-opacity: 0.18;
  stroke-width: 0;
  transition: stroke-width 0.6s ease, stroke-opacity 0.6s ease;
}

/* Narration card transitions */
.narr-card { position: relative; transition: transform .35s ease, opacity .35s ease; background: linear-gradient(135deg, #140e54 0%, #615b9d 60%, #918bcb 100%);} 
.narr-active { opacity: 1; transform: translateX(0) translateY(0); z-index: 10; }
.narr-hidden { opacity: 0; transform: translateY(8px); z-index: 0; position: absolute; inset: 0; }
.narr-out    { opacity: 0; transform: translateX(120%); z-index: 10; position: absolute; inset: 0; }

/* Utility: hard center (both axes) for titles when card is underlay */
.center-middle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; }

/* Ensure TitleB sits center-middle when B is the under card */
#narrB.narr-hidden #titleB { position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); width:100%; text-align:center; }
#narrB.narr-active #titleB { position: static; transform:none; }
#narrB.narr-hidden #textB  { opacity: 0; }

/* left / right anim directions */
.slider-shell--blast-left .rings--left .ring { stroke-width: 80px; stroke-opacity: 0.45; }
.slider-shell--blast-right .rings--right .ring { stroke-width: 80px; stroke-opacity: 0.45; }

/* slight stagger for each ring */
.ring--1 { transition-delay: 0.03s; }
.ring--2 { transition-delay: 0.07s; }
.ring--3 { transition-delay: 0.11s; }
.ring--4 { transition-delay: 0.15s; }
.ring--5 { transition-delay: 0.19s; }
.ring--6 { transition-delay: 0.23s; }

/* small-screen tweak */
@media (max-width: 740px) {
  .slider-shell { width: 100%; height: 62vh; }
  .slide { font-size: 34px; padding: 0 10px; }
}

/* Tour: force slider to 80vh when inside #tour */
#tour .slider-shell { height: 70vh; }

/* Plain narration split-text animation */
.split-text { font-size: 1.25rem; font-weight: 700; overflow: hidden; white-space: nowrap; }
.split-text .part { display: inline-block; opacity: 0; }
.split-text .part.left  { animation: slide-in-left 1s ease-out forwards; }
.split-text .part.right { animation: slide-in-right 1s ease-out forwards; animation-delay: 0.15s; }
.split-text .part.no-anim { animation: none !important; opacity: 0; }

@keyframes slide-in-left {
  0% { transform: translateX(-100vw); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

/* Demo: Verified by DTraceOne badge (no network) */
.demo-verify-badge { position: relative; display: inline-block; }
.demo-pill {
  font-family: ui-sans-serif, system-ui, -apple-system;
  font-size: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #dbd8ce; border-radius: 9999px;
  padding: 6px 10px; background: #fff; color: #140e54;
  box-shadow: 0 8px 24px rgba(54,49,102,0.12);
}
.demo-dot { display:inline-block; width:8px; height:8px; border-radius:9999px; background:#615b9d; }
.demo-pop {
  position: fixed; z-index: 9999; display: none; min-width: 260px;
  background: #fff; border: 1px solid #dbd8ce; border-radius: 10px; padding: 10px;
  box-shadow: 0 18px 50px -15px rgba(54,49,102,0.35);
}
.demo-pop.is-visible { display: block; }
.demo-link { font-size:12px; color:#615b9d; text-decoration: underline; }
.demo-link:hover { color:#363166; }
/* Smooth scale for the Verified widget card */
#verifiedWidgetCard { transition: transform 220ms ease, filter 220ms ease; will-change: transform; }
@keyframes slide-in-right {
  0% { transform: translateX(100vw); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

/* Page gradient background layers (index only via [data-gradient]) */
body[data-gradient]::before,
body[data-gradient]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Base gradient (layer A) */
body[data-gradient]::before {
  background: var(--page-gradient-a, linear-gradient(135deg, #f6f7fb 0%, #dbd8ce 100%));
}

/* Crossfade overlay (layer B) */
body[data-gradient]::after {
  background: var(--page-gradient-b, linear-gradient(135deg, #f6f7fb 0%, #dbd8ce 100%));
  opacity: var(--pgb-alpha, 0);
  transition: opacity 800ms ease;
  will-change: opacity;
}

/* Lazy fade-in utility for images/blocks */
.lazy-fade { opacity: 0; transform: translateY(10px); transition: opacity 900ms ease, transform 900ms ease; }
.lazy-fade.is-visible { opacity: 1; transform: translateY(0); }

/* Full-bleed helper: make child span full viewport width inside centered container */
.full-bleed {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}

/* Fallbacks to ensure header hide-on-scroll works even if Tailwind utilities are purged */
#siteHeader { position: sticky; top: 0; z-index: 50; transition: transform 300ms ease; will-change: transform; }
.-translate-y-full { transform: translateY(-100%); }

/* Knight scan text effect for the main title */
.knight-text { position: relative; display: inline-block; color: #ffffff; }
.knight-text::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 30%,
    #615b9d 50%, /* moving highlight */
    transparent 70%,
    transparent 100%
  );
  background-size: 300% 100%;
  background-position: -100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: knight-scan 5.5s linear infinite;
}

@keyframes knight-scan {
  0%   { background-position: -100% 0; }
  25%  { background-position:   0% 0; }
  50%  { background-position: 100% 0; }
  75%  { background-position:   0% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .knight-text::before { animation: none; }
}