/* ============================================================================
   NextGen Summit — who's coming
   One credential, hanging from the hero, carrying one registered person at a time.
   The ribbon is filled geometry with a woven pattern and lit edges rather than two
   drawn lines, so it folds and catches light like fabric. Composition only: every
   colour and face comes from site.css.
   ========================================================================= */

/* only shown on a local preview, where sample names stand in for real ones */
.nm-demo{display:inline-block;margin-left:10px;padding:3px 7px;border-radius:4px;background:var(--paper-2);color:var(--ink-3);font:700 9.5px/1.3 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;vertical-align:.1em}
.nm-demo[hidden]{display:none}
.nm-view[hidden]{display:none}

/* ---------- the hanging credential ---------- */
.lan{position:relative;width:min(300px,78vw);margin-inline:auto}
.lan[hidden]{display:none}
.nb__stage{position:relative;display:flex;justify-content:center;padding-top:clamp(104px,18vh,230px)}
.nb__hang{position:relative;width:100%;transform-origin:50% calc(-1 * clamp(104px,18vh,230px));animation:nb-sway 9s var(--ease) infinite alternate}

/* the ribbon: a photographed lanyard, hung from the paper's top edge so no part of it
   reaches the hero. Height drives it; the width follows the photograph. */
.nb__strap{position:absolute;left:50%;bottom:100%;height:clamp(104px,18vh,230px);width:auto;transform:translateX(-50%);
  filter:drop-shadow(3px 8px 10px rgba(10,18,22,.3)) drop-shadow(0 2px 2px rgba(10,18,22,.18))}

/* the card: real thickness at the edge, a punched slot, and a printed face */
.nb__badge{position:relative;border-radius:14px;background:linear-gradient(168deg,#FFFFFF 0%,#F7F7F4 62%,#EFEFEB 100%);color:var(--ink);overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(11,11,15,.09),
    0 2px 0 rgba(11,11,15,.1),
    0 1px 1px rgba(255,255,255,.9) inset,
    0 30px 50px -22px rgba(8,30,29,.5)}
.nb__slot{position:absolute;left:50%;top:13px;z-index:2;width:52px;height:9px;margin-left:-26px;border-radius:999px;
  background:#E4E4DF;box-shadow:inset 0 2px 3px rgba(11,11,15,.4),0 1px 0 rgba(255,255,255,.85)}
/* the sheen of a laminated card, held to one corner */
.nb__badge::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(126deg,rgba(255,255,255,.5) 0 18%,rgba(255,255,255,0) 42%)}

.nb__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:34px 20px 15px;background:var(--ink);color:#fff}
.nb__mark{display:inline-flex;align-items:baseline;gap:.5em}
.nb__mark .wm{font-size:26px;line-height:1}
.nb__mark span:last-child{font:700 7.5px/1 var(--f-sans);letter-spacing:.4em;text-transform:uppercase}
.nb__date{white-space:nowrap;font:800 9px/1 var(--f-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}

.nb__body{position:relative;padding:20px 20px 17px}
.nb__hello{font:800 9.5px/1 var(--f-sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}

/* the name, written on by hand. One line, always: a long name is set smaller, never wrapped. */
.nb__names{position:relative;height:1.22em;margin-top:9px;font-size:clamp(34px,8.6vw,46px)}
.nb__name{position:absolute;left:0;bottom:0;white-space:nowrap;font-family:"Caveat",var(--f-display),cursive;font-weight:700;line-height:1.1;color:var(--ink);
  /* the stroke is revealed left to right, as if being written */
  -webkit-mask-image:linear-gradient(90deg,#000 0 var(--ink-to,0%),transparent var(--ink-to,0%));
  mask-image:linear-gradient(90deg,#000 0 var(--ink-to,0%),transparent var(--ink-to,0%))}
.nb__name.is-writing{transition:none}
.nb__name.is-out{opacity:0;transition:opacity .34s var(--ease)}

/* the rule the name is written on */
.nb__names::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--rule-strong,rgba(11,11,15,.22))}

.nb__ready{margin-top:14px;font:800 10px/1.3 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink)}
.nb__foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:16px;padding-top:11px;border-top:1px solid var(--rule);
  font:700 8px/1.3 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.nb__tag{padding:3px 6px 2px;border-radius:3px;background:var(--accent);color:var(--ink)}
.nb__demo{margin-top:14px;text-align:center}

/* the cast shadow on the paper, soft and offset, moving with the card */
.nb__shadow{position:absolute;left:8%;right:8%;bottom:-24px;height:26px;border-radius:50%;
  background:radial-gradient(60% 100% at 50% 0,rgba(8,30,29,.3),rgba(8,30,29,0) 72%);filter:blur(5px)}

@keyframes nb-sway{
  from{transform:rotate(-1.1deg)}
  to{transform:rotate(1.1deg)}
}

@media (max-width:820px){
  .lan{width:min(158px,38vw)}
  .nb__stage{padding-top:clamp(84px,13vh,140px)}
  .nb__hang{transform-origin:50% calc(-1 * clamp(84px,13vh,140px));animation-duration:10s}
  .nb__strap{height:clamp(84px,13vh,140px)}
  .nb__head{padding:30px 14px 13px;gap:7px}
  .nb__mark .wm{font-size:21px}
  .nb__mark span:last-child,.nb__yr,.nb__where{display:none}
  .nb__date{font-size:7px;letter-spacing:.12em}
  .nb__body{padding:17px 16px 15px}
  .nb__names{font-size:clamp(26px,7.4vw,34px);height:1.24em}
  .nb__hello{font-size:8.5px;letter-spacing:.2em}
  .nb__ready{margin-top:11px;font-size:8.5px;letter-spacing:.16em}
  .nb__foot{margin-top:12px;padding-top:9px;font-size:7px;letter-spacing:.1em}
  .nb__date{font-size:7.5px;letter-spacing:.12em}
  .nb__slot{width:40px;height:7px;margin-left:-20px;top:11px}
  .nb__shadow{bottom:-18px;height:18px}
}
@media (max-width:420px){
  .lan{width:min(138px,38vw)}
  .nb__mark .wm{font-size:17px}
  .nb__head{padding:24px 10px 10px;gap:6px}
  .nb__date{font-size:6.5px;letter-spacing:.1em}
  .nb__body{padding:13px 10px 12px}
  .nb__names{font-size:clamp(22px,6.2vw,27px)}
  .nb__hello{font-size:7.5px;letter-spacing:.16em}
  .nb__ready{margin-top:9px;font-size:7.5px;letter-spacing:.08em}
  .nb__foot{margin-top:10px;padding-top:8px;font-size:6.5px;letter-spacing:.06em;gap:5px}
  .nb__tag{padding:2px 4px 1px}
}

@media (prefers-reduced-motion:reduce){
  .nb__hang{animation:none}
  .nb__name{-webkit-mask-image:none;mask-image:none}
}