/* SwanStack Hero scoped styles */
.swanstack-hero { position: relative; display:block; min-height: 1px; background: transparent !important;  }

.swanstack-hero .ssh-stage { background: var(--ssh-bg, #0b0e14); border-radius: var(--ssh-radius, 16px); overflow:hidden;
  position: relative;
  height: clamp(var(--ssh-min, 420px), var(--ssh-h, 72vh), var(--ssh-max, 880px));
  width: 100%;
  overflow: hidden;
 clip-path: inset(0 round var(--ssh-radius, 16px));}

.swanstack-hero .ssh-particles { position:absolute; inset:0; z-index:0; }

.swanstack-hero .ssh-tagcanvas {
  position:absolute; inset:0; z-index:1;
  display:block; width:100%; height:100%;
  background: transparent;
  pointer-events: none; /* set true via settings if you want clickable tags */
}

.swanstack-hero .ssh-crt {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  mix-blend-mode:soft-light; opacity:.12;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.15) 0 1px, rgba(0,0,0,0) 2px 3px);
}

/* Bottom-aligned hero text */
.swanstack-hero .ssh-hero {
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:.75rem; padding:2.25rem 1.25rem; text-align:center;
}

.swanstack-hero .ssh-title {
  display:flex; align-items:baseline; justify-content:center; gap:.18em;
  font-size:clamp(42px,8vw,100px); font-weight:900; letter-spacing:.02em; line-height:1;
  position:relative;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.6));
  white-space:nowrap; flex-wrap:nowrap;
  color:#e6edf3;
}

/* Rotator */
.swanstack-hero .ssh-rotator { position:relative; display:inline-block; vertical-align:baseline; margin-right:0.05em; }
.swanstack-hero .ssh-rotator .spacer { visibility:hidden; opacity:0; pointer-events:none; user-select:none; display:inline-block }
.swanstack-hero .ssh-rotator .word { position:absolute; left:0; top:0; opacity:0; white-space:nowrap }
.swanstack-hero .ssh-rotator .word.show { opacity:1 }

/* Static Stack */
.swanstack-hero .ssh-stack { display:inline-block; color:#e6edf3; }

/* VRAM-style glitch ONLY on the rotating word */
.swanstack-hero .ssh-glitch {
  position:relative; isolation:isolate;
  filter: url(#ssh-vram) saturate(105%);
  text-shadow: 2px 0 #8be9fd, -2px 0 #ff79c6;
}
.swanstack-hero .ssh-glitch::before,
.swanstack-hero .ssh-glitch::after { content: attr(data-text); position:absolute; inset:0; pointer-events:none }
.swanstack-hero .ssh-glitch::before { mix-blend-mode:screen; transform:translateX(1.6px); opacity:.95; color:#8be9fd }
.swanstack-hero .ssh-glitch::after  { mix-blend-mode:screen; transform:translateX(-1.6px); opacity:.95; color:#ff79c6 }

@keyframes ssh-jitter {
  0%{transform:translate(0,0)}10%{transform:translate(.2px,-.2px) skewX(.1deg)}
  20%{transform:translate(-.3px,.2px) skewX(-.1deg)}30%{transform:translate(.4px,.1px)}
  40%{transform:translate(-.2px,.3px)}50%{transform:translate(0,0)}
  60%{transform:translate(.3px,-.1px)}70%{transform:translate(-.2px,.1px)}
  80%{transform:translate(.2px,.2px)}90%{transform:translate(0,0)}100%{transform:translate(0,0)}
}
@keyframes ssh-flash {
  0%,96%,100%{filter:brightness(1)}97%{filter:brightness(1.4)}98%{filter:brightness(.85)}99%{filter:brightness(1.25)}
}
.swanstack-hero .ssh-glitch,
.swanstack-hero .ssh-glitch::before,
.swanstack-hero .ssh-glitch::after {
  animation: ssh-jitter 1.4s steps(12,end) infinite,
             ssh-flash 4s steps(30,end) infinite;
}

/* Strap */
.swanstack-hero .ssh-strap { margin-top:.25rem; font-size:clamp(14px,2.2vw,20px); opacity:.85; color:#e6edf3; }

/* Reduce Motion */
@media (prefers-reduced-motion: reduce){
  .swanstack-hero .ssh-glitch, .swanstack-hero .ssh-glitch::before, .swanstack-hero .ssh-glitch::after { animation:none !important }
}


/* Optional feathered edge fade (masked corners/edges) */
.swanstack-hero .ssh-stage.ssh-fade {
  -webkit-mask-image: radial-gradient(100% 100% at 50% 50%,
    #000 calc(100% - var(--ssh-fade, 8%)),
    transparent 100%);
  mask-image: radial-gradient(100% 100% at 50% 50%,
    #000 calc(100% - var(--ssh-fade, 8%)),
    transparent 100%);
}

/* Ensure canvases and overlay obey rounded corners */
.swanstack-hero .ssh-stage canvas,
.swanstack-hero .ssh-stage .ssh-crt {
  border-radius: inherit;
  display: block;
}