/* Angler — 25 · security. Also linked directly by pilot/index.html. Tokens only.
   One-shot scene off .is-in (homepage: js/00-engine.js's late reveal; pilot: its inline observer,
   which arms it with .env--armed). Before: Angler hovers in an open gap in the boundary's top edge.
   Then: it drops in, the gap seals, the label fades up, the tools lay down like sheets of paper.
   Reduced motion / no JS: no "before" state at all, so the settled frame shows. */

.sc .tm__head { margin-inline: auto; text-align: center; }

.env {
  position: relative; margin: 104px auto 0; max-width: 880px; padding: 64px 40px 44px;
  border: 1.5px solid var(--lake); border-radius: var(--r-card); text-align: center;
}
/* The reveal's own fade/rise would hide the "before" frame; the scene supplies the motion. */
.js-ready .env.reveal { opacity: 1; transform: none; }

.env__label {
  position: absolute; top: 16px; left: 20px;
  font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lake);
}
/* The gap: a page-coloured patch over the centre of the top edge, wider than the tile.
   Settled it is scaleX(0), so the edge is whole. */
.env__gap {
  position: absolute; top: -2px; left: 50%; width: 176px; height: 4px; margin-left: -88px;
  background: var(--paper); transform: scaleX(0);
}

.env__app {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px 12px 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-panel);
}
.env__app img { width: 44px; height: 44px; border-radius: 10px; }
.env__app b { font: 600 1.3rem var(--serif); letter-spacing: -.01em; color: var(--ink); }

.env__h { margin-top: 36px; font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.env__logos {
  list-style: none; margin-top: 20px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 34px; perspective: 700px;
}
.env__logos li { display: flex; align-items: center; gap: 10px; font: 500 16.5px var(--sans); color: var(--ink); transform-origin: 50% 100%; }
.env__logos img { flex: none; width: 26px; height: 26px; object-fit: contain; }

@media (prefers-reduced-motion: no-preference) {
  :is(.js-ready .env.reveal, .env--armed):not(.is-in) .env__app { transform: translateY(-118px); }
  :is(.js-ready .env.reveal, .env--armed):not(.is-in) .env__gap { transform: none; }
  :is(.js-ready .env.reveal, .env--armed):not(.is-in) :is(.env__label, .env__h) { opacity: 0; }
  :is(.js-ready .env.reveal, .env--armed):not(.is-in) .env__logos li { opacity: 0; transform: rotateX(-72deg) translateY(-6px); }

  /* 1 · Angler drops through the gap and settles. */
  .env.is-in .env__app { transition: transform .62s var(--ease-open); }
  /* 2 · The gap seals behind it, both sides closing toward the centre. */
  .env.is-in .env__gap { transition: transform .32s var(--ease-close) .5s; }
  /* 3 · The boundary is named, then the tools lay down around Angler. */
  .env.is-in :is(.env__label, .env__h) { transition: opacity .3s linear .78s; }
  .env.is-in .env__logos li {
    transition: transform .6s var(--ease-open), opacity .18s linear;
    transition-delay: calc(.9s + var(--i, 0) * 45ms);
  }
}

@media (max-width: 720px) {
  .env { margin-top: 88px; padding: 56px 20px 32px; }
  .env__label { left: 14px; }
  .env__logos { gap: 16px 22px; }
  .env__logos li { font-size: 15px; }
}