.story-stage::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: clamp(1.5rem, 3vw, 3rem);
  box-shadow: inset 0 0 120px var(--frame-shadow, rgba(0,0,0,.35));
  pointer-events:none;
  z-index:3;
  transition: box-shadow 420ms ease, opacity 420ms ease;
}

.portrait-frame::before,
.copy-frame::before{
  content:"";
  position:absolute;
  inset: calc(-1 * var(--frame-border-width));
  border-radius:inherit;
  padding: var(--frame-border-width);
  background: var(--frame-border-gradient);
  animation: frameOrbit var(--frame-orbit-base) linear infinite;
  pointer-events:none;
  mix-blend-mode:screen;
  mask: var(--frame-border-mask);
  mask-composite: exclude;
  -webkit-mask: var(--frame-border-mask);
  -webkit-mask-composite: xor;
  transition: background 420ms ease, opacity 420ms ease, filter 420ms ease;
}

.copy-frame::before{
  animation-duration: calc(var(--frame-orbit-base) * .75);
  opacity:.9;
}
.portrait-frame::before{ opacity:.65; }

.copy-frame .copy-stack{ position:relative; z-index:2; }

@keyframes frameOrbit{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

.story-stage[data-story-accent] .copy-frame{
  box-shadow: 0 40px 140px var(--frame-shadow, rgba(0,0,0,.55));
}

.story-stage[data-story-accent] .portrait-outline{
  filter: drop-shadow(0 12px 36px var(--frame-shadow, rgba(0,0,0,.55)));
}

.story-stage[data-story-accent] .portrait-frame::before,
.story-stage[data-story-accent] .copy-frame::before{
  opacity:.95;
}

.story-controls{
  position:absolute;
  bottom: clamp(1rem, 4vw, 2.5rem);
  left:50%;
  transform: translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.65rem;
  z-index:4;
  width:min(90%, 420px);
  text-align:center;
}

.story-controls__status{
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.7rem;
  opacity:.85;
  margin:0;
}

.story-controls__actions{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:center;
}

.story-controls .control-btn,
.story-controls .control-link{
  border:1px solid rgba(250,249,246,.35);
  background: rgba(5,5,5,.6);
  color: var(--bone);
  text-transform: uppercase;
  letter-spacing:.12em;
  padding:.9rem 1.65rem;
  border-radius:999px;
  min-width:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  text-decoration:none;
  transition: transform .18s ease, border-color .2s ease, background .2s ease;
  cursor:pointer;
}

.story-controls .control-btn.primary{
  background: linear-gradient(135deg, #6e2a0b, #c06632);
  border-color: rgba(192,102,50,.8);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
}

.story-controls .control-btn.secondary{
  background: rgba(5,5,5,.6);
}

.story-controls .control-btn[disabled]{
  opacity:.4;
  cursor:not-allowed;
}

.story-controls .control-btn:focus-visible,
.story-controls .control-link:focus-visible,
.site-hud .hud-actions button:focus-visible,
.btn:focus-visible{
  outline:2px solid var(--bone);
  outline-offset:3px;
}

.story-controls .control-btn:hover,
.story-controls .control-link:hover{
  border-color: var(--copper);
  transform: translateY(-1px) scale(1.01);
}

/* Paper grain overlay */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:url('../assets/grain.png');
  mix-blend-mode: soft-light; opacity:.05;
}

/* Cursor */
.cursor-dot{ position: fixed; top:0; left:0; width:8px; height:8px;
  border-radius:50%; background: var(--bone); pointer-events:none; z-index:9999; transform: translate(-50%,-50%); }
.cursor-glow{ position: fixed; top:0; left:0; width:24px; height:24px; border-radius:50%;
  background: radial-gradient(circle, rgba(250,249,246,.3), rgba(250,249,246,0) 70%);
  pointer-events:none; z-index:9998; transform: translate(-50%,-50%); }
a,button,.btn,.control-link{ transition: transform .18s ease; }
a:hover,button:hover,.btn:hover,.control-link:hover{ transform: translateY(-2px) scale(1.02); }

@media (prefers-reduced-motion: reduce){
  .portrait-frame::before,
  .copy-frame::before{
    animation:none;
  }
  .story-stage[data-story-accent] .portrait-frame::before,
  .story-stage[data-story-accent] .copy-frame::before{
    opacity:.75;
  }
}