/* Hextech blueprint R&D section (rnd-blueprint.js). Site fonts and tokens from style.css; blueprint colours here. */
.bp-root {
  --paper: #0b2643; --paper-deep: #061629; --chalk: #dceaff; --chalk-dim: rgba(220, 234, 255, 0.55);
  --brass: #d1a85c; --hex: var(--cyan); --seal: #ff6b7a;
  position: relative; color: var(--chalk); border-radius: 12px; padding: 30px 30px 40px; overflow: hidden;
  background:
    linear-gradient(rgba(220, 234, 255, 0.07) 1px, transparent 1px) 0 0 / 100px 100px,
    linear-gradient(90deg, rgba(220, 234, 255, 0.07) 1px, transparent 1px) 0 0 / 100px 100px,
    linear-gradient(rgba(220, 234, 255, 0.035) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(220, 234, 255, 0.035) 1px, transparent 1px) 0 0 / 20px 20px,
    radial-gradient(ellipse at 30% 0%, #10345a, var(--paper) 55%, var(--paper-deep));
  box-shadow: inset 0 0 0 1px rgba(209, 168, 92, 0.25), inset 0 0 80px rgba(0, 0, 0, 0.45);
}
.bp-root [hidden] { display: none !important; }

/* on the site: the blueprint fills the R&D panel edge to edge */
.panel.bp-panel { padding: 0; background: var(--paper-deep, #061629); }
.panel.bp-panel .close { z-index: 6; color: var(--chalk, #dceaff); }
.bp-in-panel.bp-root { min-height: 100%; border-radius: 0; padding: 92px 36px 48px; box-shadow: inset 1px 0 0 rgba(209, 168, 92, 0.3); }
@media (max-width: 640px) { .bp-in-panel.bp-root { padding: 80px 14px 32px; } }

/* header: small, so play comes first */
.bp-kicker { color: var(--hex); }
.bp-head h2 { font-size: 34px; letter-spacing: -0.02em; margin: 6px 0 8px; color: var(--chalk); }
/* SOLVE IT!! (the owner's lettering): it charges up, then breathes, and a crystal glint sweeps across it */
.bp-title { position: relative; width: min(520px, 92%); margin: 10px 0 4px -8px; }
.bp-title img { display: block; width: 100%; height: auto;
  animation: bp-charge 1.3s cubic-bezier(.2, .7, .2, 1) both, bp-breathe 4.2s ease-in-out 1.3s infinite; }
.bp-title::after {   /* the glint: a bright band, cut to the letters' shape by the image itself */
  content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 42%, rgba(220, 252, 255, 0.95) 50%, transparent 58%) 160% 0 / 260% 100% no-repeat;
  -webkit-mask: url('assets/rnd/ui/solve-it.webp') center / 100% 100% no-repeat; mask: url('assets/rnd/ui/solve-it.webp') center / 100% 100% no-repeat;
  animation: bp-glint 5.5s ease-in-out 1.5s infinite;
}
@keyframes bp-charge {
  0% { opacity: 0; filter: brightness(3.2) saturate(0) blur(6px); transform: scale(.985); }
  35% { opacity: 1; filter: brightness(2.2) saturate(.6) blur(1.5px) drop-shadow(0 0 18px rgba(70, 243, 255, .9)); }
  100% { opacity: 1; filter: brightness(1) saturate(1) blur(0) drop-shadow(0 0 4px rgba(70, 243, 255, .35)); transform: none; }
}
@keyframes bp-breathe { 50% { filter: brightness(1.12) drop-shadow(0 0 12px rgba(70, 243, 255, .6)); } }
@keyframes bp-glint { 0%, 55% { background-position: 160% 0; } 85%, 100% { background-position: -60% 0; } }
.bp-lede { margin: 14px 0 22px; font-size: 16px; color: var(--chalk); }
.bp-skip { color: var(--hex); text-decoration: underline; text-underline-offset: 3px; }
.bp-sig { font: 11px var(--mono); color: var(--chalk-dim); margin-bottom: 22px; }

/* the Hextech lock */
.bp-lock { overflow: visible; }
.bp-lock .frame polygon { fill: rgba(6, 22, 41, 0.85); stroke: var(--brass); stroke-width: 4; }
.bp-lock .frame .frame-in { fill: none; stroke: rgba(209, 168, 92, 0.55); stroke-width: 1.5; }
.bp-lock .shard { fill: var(--hex); fill-opacity: var(--o); stroke: #b8fbff; stroke-width: .8; stroke-opacity: .7;
  transform-box: fill-box; transform-origin: center; transition: transform .85s cubic-bezier(.2, .7, .2, 1), opacity .7s .15s; }
.bp-lock .crystal { filter: drop-shadow(0 0 6px rgba(70, 243, 255, 0.85)); animation: bp-pulse 2.6s ease-in-out infinite; }
.bp-lock .keyhole { fill: #061629; transition: opacity .3s; }
.bp-lock .frame { transform-box: fill-box; transform-origin: center; transition: transform .6s .3s, opacity .6s .3s; }
.bp-lock .flash { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; }
.bp-lock.crack .shard { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; }
.bp-lock.crack .keyhole { opacity: 0; }
.bp-lock.crack .frame { transform: scale(1.35); opacity: 0; }
.bp-lock.crack .flash { animation: bp-flash .7s ease-out forwards; }
@keyframes bp-pulse { 50% { filter: drop-shadow(0 0 14px rgba(70, 243, 255, 1)); } }
@keyframes bp-flash { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(7); } }

/* ---- layout 1: cards pinned to the workbench */
.bpc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.bpc {
  position: relative; display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px 14px 16px;
  background: rgba(6, 22, 41, 0.55); border: 1px solid rgba(220, 234, 255, 0.28); border-radius: 4px; color: var(--chalk);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.bpc::before, .bpc::after { content: ''; position: absolute; top: -6px; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f3d49a, var(--brass) 55%, #6b4d1e); box-shadow: 0 2px 3px rgba(0, 0, 0, .5); }
.bpc::before { left: 16px; } .bpc::after { right: 16px; }
.bpc:hover { transform: translateY(-3px) rotate(-.3deg); border-color: var(--hex); box-shadow: 0 8px 28px rgba(70, 243, 255, 0.12); }
.bpc-no { font: 600 10px var(--mono); letter-spacing: .16em; color: var(--brass); }
.bpc-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(220, 234, 255, 0.2); margin: 6px 0 8px; }
.bpc-img img { width: 100%; height: 100%; object-fit: cover; transition: filter .6s;
  filter: grayscale(1) sepia(1) hue-rotate(170deg) saturate(2.4) brightness(.72) contrast(1.15); }   /* cyanotype until opened */
.bpc-lock { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(6, 22, 41, 0.35); transition: opacity .4s; }
.bpc-lock .bp-lock { width: 84px; height: 84px; }
.bpc b { font-size: 19px; font-weight: 500; }
.bpc small { font-size: 13px; color: var(--chalk-dim); line-height: 1.4; }
.bpc-state { position: absolute; right: 14px; top: 13px; font: 600 10px var(--mono); letter-spacing: .14em; font-style: normal; color: var(--seal); }
.bpc.open .bpc-img img { filter: none; }
.bpc.open .bpc-lock { opacity: 0; }
.bpc.open .bpc-state { color: var(--hex); }

/* ---- layout 2: the machine */
.bpm-stage { transition: transform .65s cubic-bezier(.6, 0, .3, 1), opacity .65s; }
.bpm-stage.zoom { transform: scale(2.6); opacity: .15; }
.bpm { display: block; width: 100%; height: auto; overflow: visible; }
.bpm-marks { fill: none; stroke: rgba(220, 234, 255, 0.28); stroke-width: 1; }
.pipe { fill: none; stroke: rgba(220, 234, 255, 0.45); stroke-width: 2; stroke-dasharray: 6 6; }
.pipe-on { fill: none; stroke: var(--hex); stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0;
  filter: drop-shadow(0 0 6px rgba(70, 243, 255, 0.9)); }
.pipe-on.on { opacity: 1; stroke-dashoffset: 0; }
.pipe-on.fresh { transition: stroke-dashoffset 1.2s ease-in-out .3s; }
.core .bloom-halo, .core .bloom-stone { mix-blend-mode: screen; pointer-events: none; transform-box: fill-box; transform-origin: center; }
.core .bloom-halo { opacity: calc(0.18 + var(--level, 0) * 0.75); transform: scale(calc(0.55 + var(--level, 0) * 0.75));
  transition: opacity 1s, transform 1s; animation: bp-bloom 3.2s ease-in-out infinite; }
.core .bloom-stone { opacity: calc(0.35 + var(--level, 0) * 0.65); transition: opacity 1s; animation: bp-bloom 3.2s ease-in-out infinite reverse; }
.core-img { filter: drop-shadow(0 0 calc(2px + var(--level, 0) * 10px) rgba(70, 243, 255, 0.6)); transition: filter 1s; }
.core.online { animation: bp-core 2.4s ease-in-out infinite; }
@keyframes bp-bloom { 50% { opacity: calc(0.28 + var(--level, 0) * 0.72); } }
@keyframes bp-core { 50% { filter: brightness(1.35); } }
.mod { cursor: pointer; outline: none; }
.mod-frame { fill: rgba(6, 22, 41, 0.7); stroke: rgba(220, 234, 255, 0.55); stroke-width: 1.5; transition: stroke .25s; }
.mod-frame2 { fill: none; stroke: rgba(209, 168, 92, 0.45); stroke-width: 1; }
.mod:hover .mod-frame, .mod:focus-visible .mod-frame { stroke: var(--hex); }
.mod-img { filter: grayscale(1) sepia(1) hue-rotate(170deg) saturate(2.4) brightness(.7) contrast(1.15); transition: filter .6s; }
/* brass nameplates: the project names, engraved */
.plate-body { fill: url(#brass); stroke: #5b4219; stroke-width: 1; }
.plate-bevel { fill: none; stroke: rgba(255, 240, 200, 0.45); stroke-width: 1; }
.rivet { fill: #6b4d1e; stroke: rgba(255, 236, 190, 0.6); stroke-width: .8; }
.plate-no { font: 600 8.5px var(--mono); letter-spacing: .22em; fill: #4a3412; }
.plate-name { font: 700 18px var(--sans); letter-spacing: .01em; fill: #2a1c08; }
.plate-shine { fill: rgba(255, 244, 214, 0.65); }   /* a 1px highlight under the letters: reads as engraved */
.mod.open .plate-body { filter: drop-shadow(0 0 6px rgba(209, 168, 92, 0.55)); }

/* hover / focus: the module lifts (the explanation lives on the project page) */
.mod { transition: transform .25s; transform-box: fill-box; transform-origin: center; }
.mod:hover, .mod:focus-visible { transform: translateY(-4px); }
.mod:not(.open):hover .mod-lock, .mod:not(.open):focus-visible .mod-lock { opacity: .3; }
.mod-state { font: 600 10px var(--mono); letter-spacing: .14em; fill: var(--seal); }
.mod.open .mod-img { filter: none; }
.mod.open .mod-lock { opacity: 0; }
.mod.open .mod-state { fill: var(--hex); }
.mod.open .mod-frame { stroke: rgba(70, 243, 255, 0.7); }
.mod-lock { transition: opacity .4s; }

/* ---- the workbench */
.bp-bench { position: relative; }
.bpw-top { display: flex; align-items: center; justify-content: space-between; }
.bpw-back { font: 12px var(--mono); color: var(--hex); }
.bp-root.in-project .bp-head { display: none; }   /* project pages: the project's name is the hero */
/* the project title: glowing Hextech letters inside a technical drawing of their own size */
.bpw-head { text-align: center; }
.bpw-title { position: relative; display: inline-block; margin: 30px auto 10px; padding: 26px 46px 10px; }
.bpw-name { position: relative; z-index: 1; display: inline-block; white-space: nowrap; font: 700 clamp(34px, 6vw, 54px)/1.05 var(--sans); letter-spacing: .015em; color: #e6fbff;
  text-shadow: 0 0 10px rgba(70, 243, 255, 0.75), 0 0 28px rgba(70, 243, 255, 0.35); }
.bpw-title.arrive .bpw-name { animation: bpw-glow 1.4s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes bpw-glow {
  0% { opacity: 0; filter: blur(5px) brightness(2.6); }
  45% { opacity: 1; filter: blur(1px) brightness(1.8); }
  100% { opacity: 1; filter: none; }
}
.bpw-marks { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.bpw-marks .dw-line { stroke: var(--hex); stroke-width: 1.2; opacity: .85; }
.bpw-marks.play .dw-line { animation: dw-draw .5s ease-out forwards; animation-delay: var(--d); }
.bpw-marks.play .dw-text { animation: dw-fade .4s ease-out forwards; animation-delay: var(--d); }
.bpw-marks.done .dw-line { stroke-dashoffset: 0; }
.bpw-marks.done .dw-text { opacity: 1; }
.bpw-title .bpw-name { animation: bpw-breathe 3.6s ease-in-out infinite; }
.bpw-title.arrive .bpw-name { animation: bpw-glow 1.4s cubic-bezier(.2, .7, .2, 1) both, bpw-breathe 3.6s ease-in-out 1.4s infinite; }
@keyframes bpw-breathe { 50% { text-shadow: 0 0 14px rgba(70, 243, 255, 0.95), 0 0 40px rgba(70, 243, 255, 0.5); } }
.bpw-cross { animation: bpw-spin 9s linear infinite; }
@keyframes bpw-spin { to { transform: rotate(360deg); } }
.bpw-run { fill: none; stroke: #e9feff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: .07 1; stroke-dashoffset: .07;
  filter: drop-shadow(0 0 4px rgba(70, 243, 255, 1)); animation: bpw-run 3.4s ease-in-out 1.6s infinite; opacity: 0; }
.bpw-run2 { animation-delay: 3.3s; }
@keyframes bpw-run { 0% { stroke-dashoffset: .07; opacity: 1; } 60% { stroke-dashoffset: -1; opacity: 1; } 61%, 100% { opacity: 0; } }
.bpw-dim { font: 600 10px var(--mono); letter-spacing: .2em; fill: var(--brass); }
.bpw-dimbg { fill: #0a2440; }
.bpw-skip { margin-left: auto; font: 12px var(--mono); letter-spacing: 0; text-transform: none; }
.bpw-line { font-size: 17px; color: var(--chalk); margin: 0 auto 14px; max-width: 62ch; line-height: 1.5; text-align: center; }
.bpw-sealed { display: flex; align-items: center; gap: 10px; font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--seal); margin-bottom: 14px; }
.bpw-sealed-lock .bp-lock { width: 30px; height: 30px; display: block; }
.bpw-lockfx { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(6, 22, 41, 0.72); z-index: 5;
  animation: bp-in .25s ease-out; }
.bpw-lockfx .bp-lock { width: min(260px, 50%); height: auto; }
@keyframes bp-in { from { opacity: 0; } }
/* the puzzle keeps its own styles; tint its panels to the blueprint */
.bp-root .bp-pre, .bp-root .bp-graph, .bp-root .bp-screen { background-color: rgba(4, 12, 24, 0.85); border-color: rgba(220, 234, 255, 0.22); }
.bp-root .bp-intro, .bp-root .bp-verdict { color: var(--chalk-dim); }

/* the dossier: drawing, then video, then optional notes */
.bpd-tools { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 18px; }
.bpd-tools li { font: 11px var(--mono); color: var(--brass); border: 1px solid rgba(209, 168, 92, 0.45); border-radius: 2px; padding: 2px 7px; }
.bpd-drawing { margin: 6px 0 18px; }
.bp-drawing { display: block; width: 100%; height: auto; overflow: visible; }
.dw-line { fill: none; stroke: var(--chalk); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; }
.dw-box { stroke-width: 1.8; }
.dw-leader, .dw-tb { stroke: var(--brass); stroke-width: 1.2; }
.dw-text { opacity: 0; }
.dw-arrow { fill: none; stroke: var(--chalk); stroke-width: 1.6; }
.dw-name { font: 600 14px var(--mono); letter-spacing: .06em; fill: var(--chalk); }
.dw-sub { font: 12px var(--mono); fill: var(--hex); }
.dw-idx { font: 10px var(--mono); fill: var(--chalk-dim); }
.dw-note { font: italic 15px var(--sans); fill: var(--brass); }
.dw-tbt { font: 600 11px var(--mono); letter-spacing: .12em; fill: var(--chalk-dim); }
/* 3D scenes: wireframe, gizmos, rays, the patch a camera sees; Electric Sheep's doors and wave; SplatIm's Gaussians */
.dw-cam-thin { stroke-width: 1.3; }
.dw-active { stroke: var(--hex); stroke-width: 2.2; fill: none; filter: drop-shadow(0 0 5px rgba(70, 243, 255, 0.9)); }
.dw-wave { stroke: var(--hex); stroke-width: 2; filter: drop-shadow(0 0 4px rgba(70, 243, 255, 0.7)); }
.dw-beat { stroke: none; fill: var(--c, #46f3ff); fill-opacity: 0; }
.dw-beat0, .dw-beat2 { --c: #8a4dff; } .dw-beat1, .dw-beat3 { --c: #46f3ff; }
.bp-root .bp-drawing.done .dw-beat, .bp-root .bp-scene.play .dw-beat { animation: dw-beat .53s ease-out infinite; animation-delay: calc(var(--d) + var(--o, 0s)); }
.dw-beat1 { --o: .13s; } .dw-beat2 { --o: .26s; } .dw-beat3 { --o: .4s; }
@keyframes dw-beat { 0% { fill-opacity: .42; } 100% { fill-opacity: .08; } }
.dw-you { stroke: #e9d2c2; stroke-width: 4.5; stroke-linecap: round; }
.dw-floaters { stroke: #1fd18a; stroke-width: 4; stroke-linecap: round; opacity: .75; }
.bp-root .bp-drawing.done .dw-floaters, .bp-root .bp-scene.play .dw-floaters { animation: dw-draw .55s ease-out forwards var(--d), dw-vote 6s ease-in-out infinite calc(var(--d) + 1.5s); }
@keyframes dw-vote { 0%, 30% { opacity: .75; } 50%, 82% { opacity: 0; } 100% { opacity: .75; } }
.dw-wire { stroke: rgba(220, 234, 255, 0.42); stroke-width: 1.1; }
.dw-cam { stroke: var(--chalk); stroke-width: 2; stroke-linejoin: round; }
.dw-up { stroke: var(--chalk); stroke-width: 1.5; fill: rgba(220, 234, 255, 0); transition: fill .5s; }
.dw-ray { stroke: var(--brass); stroke-width: 1.2; opacity: .85; }
.dw-patch { stroke: var(--hex); stroke-width: 2.2; fill: rgba(70, 243, 255, 0); filter: drop-shadow(0 0 6px rgba(70, 243, 255, 0.7)); transition: fill .6s; }
.bp-drawing.done .dw-up, .bp-scene.play .dw-up { fill: rgba(220, 234, 255, 0.85); }
.bp-drawing.done .dw-patch { fill: rgba(70, 243, 255, 0.16); }
.bp-root .bp-scene.play .dw-patch { animation: dw-draw .55s ease-out forwards var(--d), dw-patchfill .6s ease-out forwards calc(var(--d) + .5s); }
@keyframes dw-patchfill { to { fill: rgba(70, 243, 255, 0.16); } }
.bp-scene .dw-note { font-size: 15px; }
.dw-dot { fill: var(--brass); }
.bp-drawing.play .dw-line { animation: dw-draw .55s ease-out forwards; animation-delay: var(--d); }
.bp-drawing.play .dw-text { animation: dw-fade .4s ease-out forwards; animation-delay: var(--d); }
.bp-drawing.done .dw-line { stroke-dashoffset: 0; }
.bp-drawing.done .dw-text { opacity: 1; }
@keyframes dw-draw { to { stroke-dashoffset: 0; } }
@keyframes dw-fade { to { opacity: 1; } }

.bpd-media { border: 1px solid rgba(220, 234, 255, 0.25); border-radius: 4px; overflow: hidden; background: #000;
  opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .7s, transform .7s; }
.bpd-media.show { opacity: 1; transform: none; }
.bpd-media video { display: block; width: 100%; max-height: 62vh; }
.bpd-more { margin-top: 16px; font: 12px var(--mono); color: var(--hex); border: 1px solid rgba(70, 243, 255, 0.4); border-radius: 999px; padding: 6px 13px; }
.bpd-more:hover { background: rgba(70, 243, 255, 0.08); }
.bpd-notes { margin-top: 18px; max-width: 72ch; }
.bpd-notes p { color: var(--chalk-dim); line-height: 1.6; font-size: 15px; margin-bottom: 10px; }
.bpd-notes b { color: var(--chalk); font-weight: 500; }
.bpd-notes h4 { font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--chalk-dim); margin: 22px 0 10px; }
.bpd-links { display: flex; gap: 18px; margin-top: 16px; font: 13px var(--mono); }
.bpd-links a { color: var(--hex); }

@media (max-width: 640px) {
  .bp-root { padding: 22px 14px 30px; border-radius: 0; }
  .bpw-title { margin: 26px auto 8px; padding: 24px 30px 8px; }
  .bpc-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .dw-note { font-size: 20px; }   /* the drawing scales down; keep the notes readable */
}
@media (prefers-reduced-motion: reduce) {
  .bpw-title .bpw-name, .bpw-cross, .bpw-run, .bp-lock .crystal, .core.online, .core .bloom-halo, .core .bloom-stone, .bp-title img, .bp-title::after { animation: none; }
}