/* Gradient dots behind the paper (white) sections. CSS port of the 21st.dev "Gradient Dots" background:
   a hexagonal grid of tiny holes in a paper-coloured mask, with slow colour fields drifting underneath.
   Strykia version: the fields are brand blade yellow, tape red and rule blue (no rainbow hue cycling).
   Not applied to the long legal pages (.doc). Needs :has(); browsers without it keep the flat paper. */
.sec--paper:not(:has(.doc)){position:relative;isolation:isolate;overflow:clip}
.sec--paper:not(:has(.doc))::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;contain:paint;
  --gd-bg:var(--paper);--gd-dot:7px;--gd-s:10px;--gd-h:17.32px;
  background-color:var(--gd-bg);
  background-image:
    radial-gradient(circle at 50% 50%,transparent 1.6px,var(--gd-bg) 0 var(--gd-dot),transparent var(--gd-dot)),
    radial-gradient(circle at 50% 50%,transparent 1.6px,var(--gd-bg) 0 var(--gd-dot),transparent var(--gd-dot)),
    radial-gradient(circle at 50% 50%,var(--stud),transparent 60%),
    radial-gradient(circle at 50% 50%,var(--blade),transparent 60%),
    radial-gradient(circle at 50% 50%,var(--rule-strong),transparent 60%),
    radial-gradient(ellipse at 50% 50%,var(--blade),transparent 60%);
  background-size:var(--gd-s) var(--gd-h),var(--gd-s) var(--gd-h),200% 200%,200% 200%,200% 200%,200% var(--gd-h);
  background-position:0 0,5px 8.66px,800% 400%,1000% -400%,-1200% -600%,400% 17.32px;
  animation:gd-drift 40s linear infinite;
}
@keyframes gd-drift{
  to{background-position:0 0,5px 8.66px,0% 0%,0% 0%,0% 0%,0% 0%}
}
@media (prefers-reduced-motion:reduce){
  .sec--paper:not(:has(.doc))::before{animation:none;background-position:0 0,5px 8.66px,300% 150%,400% -150%,-500% -250%,150% 17.32px}
}