/* ═══════════════════════════════════════════════════════════
   SNARE RHINO — interactive intro
   Pull the snare → snares swarm in → form the rhino → veld fades in
   ═══════════════════════════════════════════════════════════ */
.sri{position:relative;height:100vh;min-height:600px;background:#040504;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.sri-stage{position:absolute;inset:0;box-shadow:inset 0 0 240px 70px rgba(0,0,0,0.92)}

/* revealed background (the veld) */
.sri-bg{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:auto;
  transform:scale(1.12);transition:opacity 2.2s ease,transform 6s ease-out;z-index:0;filter:brightness(0.72)}
.sri-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(4,5,4,0.88),rgba(4,5,4,0.3) 45%,rgba(4,5,4,0.6))}
.sri.revealed .sri-bg{opacity:1;transform:scale(1.02);filter:brightness(0.86)}

/* assembled rhino cutout */
.sri-rhino{position:absolute;left:50%;top:47%;width:min(1040px,92vw);
  transform:translate(-50%,-50%) scale(0.88);opacity:0;z-index:3;pointer-events:none;
  transition:opacity 1.4s ease,transform 1.7s cubic-bezier(0.16,1,0.3,1);
  filter:drop-shadow(0 30px 70px rgba(0,0,0,0.7))}
.sri.assembling .sri-rhino{opacity:0;transform:translate(-50%,-50%) scale(1)}

/* particle layer */
.sri-particles{position:absolute;inset:0;z-index:2;pointer-events:none}
.sri-particle{position:absolute;top:0;left:0;opacity:0;transition:opacity 0.5s ease}
.sri-particle.flying{will-change:transform,opacity}

/* the hanging snare you pull */
.sri-hang{position:absolute;left:50%;top:0;transform:translateX(-50%);z-index:6;
  display:flex;flex-direction:column;align-items:center;touch-action:none;cursor:grab}
.sri-hang.grabbing{cursor:grabbing}
.sri-line{width:2px;background:linear-gradient(to bottom,rgba(150,150,150,0),rgba(190,190,190,0.9));height:48px;transition:height 0.05s linear}
.sri-snare{width:clamp(250px,33vw,420px);user-select:none;-webkit-user-drag:none;display:block;
  filter:drop-shadow(0 14px 34px rgba(0,0,0,0.6));transition:filter 0.3s ease}
.sri-hang.taut .sri-snare{filter:drop-shadow(0 0 26px rgba(186,222,158,0.65))}
.sri-hang.fired{opacity:0;transition:opacity 0.4s ease}

/* instruction */
.sri-hint{position:absolute;left:50%;bottom:13%;transform:translateX(-50%);z-index:7;text-align:center;
  font-family:var(--font-sub);font-size:0.78rem;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(255,255,255,0.72);transition:opacity 0.4s ease;pointer-events:none;max-width:80vw}
.sri-hint b{color:var(--lime)}
.sri-hint .arrow{display:block;margin:0.7rem auto 0;width:16px;height:16px;border-right:2px solid var(--lime);
  border-bottom:2px solid var(--lime);transform:rotate(45deg);animation:sriBob 1.5s ease-in-out infinite}
@keyframes sriBob{0%,100%{transform:rotate(45deg) translate(0,0);opacity:0.4}50%{transform:rotate(45deg) translate(3px,3px);opacity:1}}
.sri.fired .sri-hint{opacity:0}

/* title after reveal */
.sri-title{position:absolute;left:0;right:0;bottom:8.5%;z-index:7;text-align:center;padding:0 1.5rem;pointer-events:none;
  opacity:0;transform:translateY(24px);transition:opacity 1.2s ease 0.4s,transform 1.2s cubic-bezier(0.16,1,0.3,1) 0.4s}
.sri.revealed .sri-title{opacity:1;transform:none}
/* once revealed, let the snare-rhino background image be reframed (double-click) */
.sri.revealed .sri-hang{pointer-events:none;opacity:0}
.sri.revealed .sri-rhino{pointer-events:none;opacity:0 !important;transition:opacity 1.2s ease}
.sri.revealed .sri-particles{opacity:0 !important;transition:opacity 1.2s ease}
.sri-bg .reframe-hint,.sri-bg [part="image"]{pointer-events:auto}
/* resizable transparent cutout */
.sri-rhino.editing{outline:2px dashed var(--lime);outline-offset:8px;cursor:move;pointer-events:auto !important;z-index:8}
.sri-rh-handle{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;background:var(--lime);border:2px solid #06080a;border-radius:50%;z-index:9;display:none;cursor:nwse-resize;box-shadow:0 4px 12px rgba(0,0,0,0.5)}
.sri.editing-rhino .sri-rh-handle{display:block}
/* keep the hanging line present for the pull mechanic, but invisible (no visible string) */
.sri-line{opacity:0 !important}
/* visible Edit-image affordance, bottom-left, clear of the snare */
.sri-edit{position:absolute;left:clamp(1rem,4vw,2.4rem);bottom:clamp(1rem,4vh,2.2rem);z-index:13;
  display:inline-flex;align-items:center;gap:0.45rem;cursor:pointer;
  font-family:var(--font-sub);font-size:0.7rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
  color:#06080a;background:var(--lime);border:none;border-radius:999px;padding:0.6rem 1.1rem;
  box-shadow:0 8px 24px rgba(0,0,0,0.45);opacity:0;pointer-events:none;transition:opacity 0.5s ease,transform 0.2s ease}
.sri.revealed .sri-edit{opacity:1;pointer-events:auto}
.sri-edit:hover{transform:translateY(-2px)}
.sri-edit.editing{background:var(--alert);color:#fff}
/* snare-move edit mode: keep the snares visible & draggable even after reveal */
.sri.editing-snares .sri-particles{opacity:1 !important;pointer-events:auto;z-index:8}
.sri.editing-snares .sri-particle{opacity:0.95 !important;pointer-events:auto;cursor:grab;
  outline:1px solid rgba(186,222,158,0.6);outline-offset:2px}
.sri.editing-snares .sri-particle:active{cursor:grabbing}
.sri.editing-snares .sri-bg{filter:brightness(0.5)}
/* second affordance, stacked above the first */
.sri-edit-2{bottom:calc(clamp(1rem,4vh,2.2rem) + 48px)}
/* draw-area mask */
.sri-mask{position:absolute;inset:0;z-index:12;display:none;cursor:crosshair;touch-action:none}
.sri.drawing-mask .sri-mask{display:block}
.sri.drawing-mask .sri-particles{opacity:1 !important;z-index:8}
.sri.drawing-mask .sri-particle{opacity:0.95 !important}
.sri.drawing-mask .sri-bg{filter:brightness(0.42)}
.sri-title .k{font-family:var(--font-sub);font-size:0.74rem;font-weight:700;letter-spacing:0.32em;text-transform:uppercase;
  color:var(--lime);display:block;margin-bottom:1rem}
.sri-title h2{font-family:var(--font-head);font-weight:800;font-size:clamp(2.6rem,7vw,6rem);line-height:0.86;
  text-transform:uppercase;color:#fff;letter-spacing:-0.025em;margin:0;text-shadow:0 8px 50px rgba(0,0,0,0.6)}
.sri-title h2 .red{color:var(--alert)}
.sri-title .sri-scroll{display:inline-block;margin-top:1.4rem;font-family:var(--font-sub);font-size:0.66rem;font-weight:700;
  letter-spacing:0.3em;text-transform:uppercase;color:rgba(255,255,255,0.55);font-style:normal}

@media(prefers-reduced-motion:reduce){
  .sri-bg{transition:opacity 0.4s ease}.sri-hint .arrow{animation:none}
}