/* Protein Interactive pop-up: polychrome word-play boxes, feature rows with static screenshots (shots/*.webp). */
.pp{--pf-np:#e0a92e;--pf-aro:#9a6fd0;--pf-pol:#22a393;--pf-pos:#2f74e0;--pf-neg:#e04a4a}
.pf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Polychrome box with shine (.pf-holo). popup.js sets --mx/--my (pointer, 0–100%) and --rx/--ry (tilt). */
@property --pf-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.pf-holo{--mx:50%;--my:50%;--rx:0deg;--ry:0deg;--loop:8s;
  --h1:#ffd1ec;--h2:#d3e4ff;--h3:#cff7e6;--h4:#fff1c2;--h5:#e6d4ff;--hink:#1b1d2a;--hglare:transparent;
  position:relative;isolation:isolate;margin:8px 0 34px;padding:28px 18px;border-radius:22px;text-align:center;cursor:default;user-select:none;
  border:2px solid transparent;
  background:
    linear-gradient(115deg,var(--h1),var(--h2) 22%,var(--h3) 42%,var(--h4) 62%,var(--h5) 82%,var(--h1)) padding-box,
    conic-gradient(from var(--pf-ang),#ff5fc8,#ffcf4d,#57e39a,#4cc3ff,#9b7bff,#ff5fc8) border-box;
  background-size:260% 260%,100% 100%;background-position:var(--mx) var(--my),0 0;
  transform:perspective(900px) rotateX(var(--ry)) rotateY(var(--rx));transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s;
  box-shadow:0 18px 40px -22px rgba(80,60,160,.55),0 0 0 1px rgba(255,255,255,.35) inset;
  animation:pfSpin 7s linear infinite,pfDrift 14s ease-in-out infinite alternate}
.pf-holo.alt{--h1:#d4fbff;--h2:#ffe0cf;--h3:#f1d6ff;--h4:#d6ffd9;--h5:#ffd7e4}
.pf-holo.hot{transition:transform .08s linear,box-shadow .4s;box-shadow:0 28px 60px -26px rgba(80,60,160,.7),0 0 0 1px rgba(255,255,255,.45) inset}
@keyframes pfSpin{to{--pf-ang:360deg}}
@keyframes pfDrift{0%{background-position:0% 30%,0 0}100%{background-position:100% 70%,0 0}}
.pf-holo.hot{animation:pfSpin 7s linear infinite}
/* holographic foil lines + pointer glare */
.pf-holo::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;mix-blend-mode:soft-light;opacity:.9;
  background:repeating-linear-gradient(-55deg,rgba(255,0,170,.35) 0 6px,rgba(255,220,0,.3) 6px 12px,rgba(0,230,140,.3) 12px 18px,rgba(0,170,255,.35) 18px 24px,rgba(150,90,255,.3) 24px 30px);
  background-size:200% 200%;background-position:calc(100% - var(--mx)) calc(100% - var(--my))}
.pf-holo::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at var(--mx) var(--my),var(--hglare),transparent 42%),
    linear-gradient(110deg,transparent 35%,rgba(255,255,255,.85) 48%,rgba(255,255,255,0) 60%) no-repeat;
  background-size:100% 100%,250% 100%;background-position:0 0,150% 0;mix-blend-mode:overlay;animation:pfShine 5s cubic-bezier(.5,0,.3,1) infinite}
@keyframes pfShine{0%,55%{background-position:0 0,150% 0}85%,100%{background-position:0 0,-60% 0}}
[data-theme=dark] .pf-holo{--h1:#3a1d4d;--h2:#162e5c;--h3:#0f3f3b;--h4:#463711;--h5:#2b1c5e;--hink:#f3f1ff;--hglare:transparent;
  box-shadow:0 18px 44px -20px rgba(120,80,255,.55),0 0 0 1px rgba(255,255,255,.12) inset}
[data-theme=dark] .pf-holo.alt{--h1:#0f3b47;--h2:#4a2416;--h3:#3a1752;--h4:#163f1d;--h5:#4b1730}
[data-theme=dark] .pf-holo::before{opacity:.28}

/* the four verbs */
.pf-row{position:relative;z-index:1;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:end;
  font-family:var(--f-head);font-weight:700;letter-spacing:-.025em;line-height:1.05;font-size:clamp(26px,3.9vw,46px)}
.pf-w{display:flex;flex-direction:column;align-items:center;gap:2px;white-space:nowrap;cursor:pointer;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.pf-w:hover{transform:translateY(-4px) scale(1.06)}
.pf-v{position:relative;display:inline-block;color:var(--c);text-shadow:0 1px 0 rgba(255,255,255,.55),0 6px 16px color-mix(in srgb,var(--c) 35%,transparent)}
[data-theme=dark] .pf-v{text-shadow:0 0 18px color-mix(in srgb,var(--c) 55%,transparent)}
.pf-v>span{display:inline-block;transform-origin:50% 100%}
.pf-it{font-size:.42em;letter-spacing:.06em;color:var(--hink);opacity:.62;font-weight:600}
.pf-w.build{--c:color-mix(in srgb,var(--pf-np) 82%,#000)}
.pf-w.pull{--c:color-mix(in srgb,var(--pf-pol) 85%,#000)}
.pf-w.grab{--c:var(--pf-pos)}
.pf-w.fold{--c:color-mix(in srgb,var(--pf-aro) 88%,#000)}
.pf-w.stretch{--c:color-mix(in srgb,var(--pf-pol) 85%,#000)}
.pf-w.bend{--c:var(--pf-pos)}
.pf-w.load{--c:color-mix(in srgb,var(--pf-np) 82%,#000)}
.pf-w.misfold{--c:var(--pf-neg)}
[data-theme=dark] .pf-w.build,[data-theme=dark] .pf-w.load{--c:#ffcf5c}
[data-theme=dark] .pf-w.pull,[data-theme=dark] .pf-w.stretch{--c:#4fe3c6}
[data-theme=dark] .pf-w.grab,[data-theme=dark] .pf-w.bend{--c:#7fb2ff}
[data-theme=dark] .pf-w.fold{--c:#c6a6ff}
[data-theme=dark] .pf-w.misfold{--c:#ff7a7a}

/* Each verb acts itself out in turn over one 8 s loop (hover a word, or click the box, to replay — popup.js). */
/* Build: letters drop in and stack */
.pf-w.build .pf-v>span{animation:pfBuild var(--loop) calc(var(--i)*70ms) infinite both}
@keyframes pfBuild{0%{transform:translateY(-1.1em);opacity:0}5%{transform:translateY(.06em) scaleY(.85);opacity:1}7%{transform:translateY(-.05em)}9%,94%{transform:none;opacity:1}98%,100%{transform:translateY(-1.1em);opacity:0}}
/* Pull: letters spread apart, then snap back */
.pf-w.pull .pf-v>span{animation:pfPull var(--loop) 1s infinite both}
@keyframes pfPull{0%{transform:none}6%{transform:translateX(calc((var(--i) - 1.5)*.2em))}8.5%{transform:translateX(calc((var(--i) - 1.5)*-.04em))}10.5%{transform:translateX(calc((var(--i) - 1.5)*.015em))}12%,100%{transform:none}}
/* Grab: squeezed, lifted, shaken */
.pf-w.grab .pf-v{transform-origin:50% 60%;animation:pfGrab var(--loop) 2s infinite both}
@keyframes pfGrab{0%{transform:none}3%{transform:scale(.82,.9)}7%{transform:translateY(-.18em) scale(1.08) rotate(-5deg)}9%{transform:translateY(-.14em) rotate(4deg)}11%{transform:translateY(-.1em) rotate(-2deg)}15%,100%{transform:none}}
/* Fold: letters flip over like hinges */
.pf-w.fold .pf-v>span{transform-origin:50% 55%;animation:pfFold var(--loop) calc(3s + var(--i)*90ms) infinite both}
@keyframes pfFold{0%{transform:perspective(320px) rotateX(0)}5%{transform:perspective(320px) rotateX(-180deg)}10%,100%{transform:perspective(320px) rotateX(-360deg)}}
/* Stretch: pulls long */
.pf-w.stretch .pf-v>span{animation:pfStretch var(--loop) 4s infinite both}
@keyframes pfStretch{0%{transform:none}5%{transform:translateX(calc((var(--i) - 3)*.1em)) scaleX(1.22)}8%{transform:translateX(calc((var(--i) - 3)*-.02em)) scaleX(.95)}11%,100%{transform:none}}
/* Bend: a wave runs through */
.pf-w.bend .pf-v>span{animation:pfBend var(--loop) calc(5s + var(--i)*80ms) infinite both}
@keyframes pfBend{0%{transform:none}3%{transform:translateY(-.34em) rotate(-9deg)}6%{transform:translateY(.08em) rotate(4deg)}8%,100%{transform:none}}
/* Load: letters arrive one by one while a bar fills */
.pf-w.load .pf-v>span{animation:pfLoad var(--loop) calc(5.8s + var(--i)*120ms) infinite both}
@keyframes pfLoad{0%{transform:none;opacity:1}.6%{transform:translateX(-.35em);opacity:.12}3.4%{transform:translateX(.04em);opacity:1}5%,100%{transform:none;opacity:1}}
.pf-w.load .pf-v::after{content:"";position:absolute;left:0;bottom:-.08em;height:.09em;width:100%;border-radius:9px;background:var(--c);transform-origin:0 50%;animation:pfBar var(--loop) 5.8s infinite both}
@keyframes pfBar{0%{transform:scaleX(0);opacity:1}7%{transform:scaleX(1);opacity:1}12%,100%{transform:scaleX(1);opacity:0}}
/* Misfold: letters tumble into the wrong shapes and stay crooked a while */
.pf-w.misfold .pf-v>span{animation:pfMis var(--loop) calc(6.6s + var(--i)*40ms) infinite both}
.pf-w.misfold .pf-v>span:nth-child(1){--r:-14deg;--y:.05em}
.pf-w.misfold .pf-v>span:nth-child(2){--r:18deg;--y:-.12em}
.pf-w.misfold .pf-v>span:nth-child(3){--r:-25deg;--y:.1em}
.pf-w.misfold .pf-v>span:nth-child(4){--r:150deg;--y:-.04em}
.pf-w.misfold .pf-v>span:nth-child(5){--r:-9deg;--y:.14em}
.pf-w.misfold .pf-v>span:nth-child(6){--r:28deg;--y:-.1em}
.pf-w.misfold .pf-v>span:nth-child(7){--r:-170deg;--y:.06em}
@keyframes pfMis{0%{transform:none}5%,19%{transform:translateY(var(--y)) rotate(var(--r))}24%,100%{transform:none}}
@media (prefers-reduced-motion:reduce){.pf-holo,.pf-holo *,.pf-holo::after{animation:none!important;transition:none!important}.pf-holo{transform:none!important}}

/* ---- Feature rows */
.pf-feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:26px;align-items:center;margin:0 0 34px}
.pf-feat.flip{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
.pf-feat.flip.narrow{grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:34px}
.pf-feat.flip .pf-txt{order:2}
.pf-feat.stack{grid-template-columns:1fr;gap:14px}
.pp-body .pf-txt h3{margin-top:0}
.pf-txt p{color:var(--pp-mut)}
.pf-txt .pp-tags{margin-top:4px}
.pf-n{display:block;margin-bottom:6px;font:700 12px/1 var(--f-head);letter-spacing:.14em;color:var(--pp-acc)}
.pf-small{font-size:13.5px}
.pf-small a{color:var(--pp-acc)}
.pf-shot{margin:0;position:relative}
.pf-shot img{display:block;width:100%;height:auto;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--pp-line),0 18px 40px -26px rgba(0,0,0,.55)}
.pf-shot figcaption{margin-top:8px;font-size:12.5px;color:var(--pp-mut);line-height:1.45}
.pp-grid.pf-grid3{grid-template-columns:repeat(3,minmax(0,1fr))}

@media (max-width:700px){
  .pf-feat,.pf-feat.flip,.pf-feat.flip.narrow{grid-template-columns:1fr;gap:14px}
  .pf-feat.flip .pf-txt{order:0}
  .pf-feat.narrow .pf-shot{max-width:340px;margin:0 auto}
  .pf-holo{padding:20px 10px}
  .pf-row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px;font-size:32px}
  .pp-grid.pf-grid3{grid-template-columns:1fr}
}

/* ---- Four boxes (2026-10-04): each verb is its own polychrome box. The wrapper (.pf-holo) only lays them out.
   On hover: the verb pulses, then "it." pulses (popup.js). When the row scrolls into view the boxes drop in one
   after another (1 s apart) and each pulses as it lands. */
.pf-holo{background:none;border:0;box-shadow:none;padding:0;border-radius:0;animation:none;transform:none;margin:8px 0 34px}
.pf-holo::before,.pf-holo::after{content:none}
.pf-holo.hot{box-shadow:none;animation:none;transform:none}
.pf-holo .pf-row{gap:14px;align-items:stretch}
.pf-holo .pf-w{--mx:50%;--my:50%;--rx:0deg;--ry:0deg;position:relative;isolation:isolate;justify-content:center;gap:4px;
  padding:24px 8px;border-radius:18px;border:2px solid transparent;cursor:default;
  background:
    linear-gradient(115deg,var(--h1),var(--h2) 22%,var(--h3) 42%,var(--h4) 62%,var(--h5) 82%,var(--h1)) padding-box,
    conic-gradient(from var(--pf-ang),#ff5fc8,#ffcf4d,#57e39a,#4cc3ff,#9b7bff,#ff5fc8) border-box;
  background-size:260% 260%,100% 100%;background-position:var(--mx) var(--my),0 0;
  box-shadow:0 16px 34px -20px rgba(80,60,160,.55),0 0 0 1px rgba(255,255,255,.35) inset;
  transform:perspective(700px) rotateX(var(--ry)) rotateY(var(--rx));
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s;
  animation:pfSpin 7s linear infinite,pfDrift 14s ease-in-out infinite alternate}
.pf-holo .pf-w:nth-child(2){animation-delay:-1.7s,-3.5s}.pf-holo .pf-w:nth-child(3){animation-delay:-3.4s,-7s}.pf-holo .pf-w:nth-child(4){animation-delay:-5.1s,-10.5s}
.pf-holo .pf-w:hover{transform:perspective(700px) rotateX(var(--ry)) rotateY(var(--rx))}
.pf-holo .pf-w.hot{transition:transform .08s linear,box-shadow .4s;
  box-shadow:0 24px 50px -24px rgba(80,60,160,.7),0 0 0 1px rgba(255,255,255,.45) inset}
.pf-holo .pf-w::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;mix-blend-mode:soft-light;opacity:.9;
  background:repeating-linear-gradient(-55deg,rgba(255,0,170,.35) 0 6px,rgba(255,220,0,.3) 6px 12px,rgba(0,230,140,.3) 12px 18px,rgba(0,170,255,.35) 18px 24px,rgba(150,90,255,.3) 24px 30px);
  background-size:200% 200%;background-position:calc(100% - var(--mx)) calc(100% - var(--my))}
.pf-holo .pf-w::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.85) 48%,rgba(255,255,255,0) 60%) no-repeat;
  background-size:250% 100%;background-position:150% 0;mix-blend-mode:overlay;animation:pfShine 5s cubic-bezier(.5,0,.3,1) infinite}
.pf-holo .pf-w:nth-child(2)::after{animation-delay:-1.2s}.pf-holo .pf-w:nth-child(3)::after{animation-delay:-2.4s}.pf-holo .pf-w:nth-child(4)::after{animation-delay:-3.6s}
[data-theme=dark] .pf-holo .pf-w{box-shadow:0 16px 38px -18px rgba(120,80,255,.55),0 0 0 1px rgba(255,255,255,.12) inset}
[data-theme=dark] .pf-holo .pf-w::before{opacity:.28}
/* even space above and below: trim the text boxes to the letters (the line boxes leave extra room under the small "it.") */
.pf-holo .pf-v,.pf-holo .pf-it{line-height:1}
@supports (text-box:trim-both cap alphabetic){.pf-holo .pf-v,.pf-holo .pf-it{text-box:trim-both cap alphabetic}.pf-holo .pf-w{gap:.32em;padding:26px 8px}}
@supports not (text-box:trim-both cap alphabetic){.pf-holo .pf-w{padding:24px 8px 19px}}
/* drop-in: hidden until popup.js sees the row (data-pf-drop), then each box gets .pf-in */
.pf-holo[data-pf-drop] .pf-w{opacity:0;translate:0 -46px}
.pf-holo[data-pf-drop] .pf-w.pf-in{opacity:1;translate:0 0}
@media (max-width:700px){.pf-holo .pf-row{grid-template-columns:1fr 1fr;gap:10px}}
@media (prefers-reduced-motion:reduce){.pf-holo .pf-w,.pf-holo .pf-w::after{animation:none!important}}