.aph-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 340px 340px; gap: 14px; }
@media (max-width: 760px) { .aph-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 360px 260px; } }
.aph-p {
  position: relative; overflow: hidden; padding: 0; cursor: pointer;
  border: 4px solid #0A0A0A; outline: 2px solid #E9E4D8; outline-offset: -8px; background: #E9E4D8;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.aph-p:hover { transform: rotate(-.4deg) scale(1.006); }
.aph-p0 { grid-column: span 2; grid-row: span 2; }
@media (max-width: 760px) { .aph-p0 { grid-row: span 1; } }
.aph-grid.focus .aph-p { opacity: .28; }
.aph-grid.focus .aph-p.on { opacity: 1; }
/* появление: панели «штампуются» по очереди */
html.js .aph-p { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); animation: stamp .9s var(--ease) forwards; }
html.js .aph-p1 { animation-delay: .18s; }
html.js .aph-p2 { animation-delay: .32s; }
@keyframes stamp { to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }

.aph-p i { position: absolute; display: block; pointer-events: none; }
.aph-rays {
  left: 52%; top: 44%; width: 300%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  background: repeating-conic-gradient(from 0deg, #E9E4D8 0deg 3deg, #141414 3deg 3.6deg, #E9E4D8 3.6deg 7deg, #141414 7deg 7.4deg);
}
.aph-eye { left: 52%; top: 44%; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #E9E4D8; }
.aph-pupil {
  left: 52%; top: 44%; width: 15%; aspect-ratio: 1; border-radius: 50%; background: #111;
  box-shadow: 0 0 0 10px #E9E4D8, 0 0 0 14px #111;
  transform: translate(calc(-50% + var(--lx, 0px)), calc(-50% + var(--ly, 0px)));
  transition: transform .25s ease-out;
}
.aph-tone { inset: -20px; background-color: #E9E4D8; background-image: radial-gradient(circle, #111 38%, transparent 40%); background-size: var(--dot, 9px) var(--dot, 9px); transition: background-size .4s var(--ease); }
.aph-lines { inset: -46px 0 0 0; background: repeating-linear-gradient(0deg, #E9E4D8 0 9px, #111 9px 11px, #E9E4D8 11px 22px, #111 22px 23px); animation: fall 1.4s linear infinite; }
.aph-p2:hover .aph-lines { animation-duration: .35s; }
@keyframes fall { to { transform: translateY(46px); } }

.aph-w { position: absolute; font-family: "Permanent Marker", cursive; color: #111; line-height: .9; }
/* надпись проявляется «кистью» слева направо */
html.js .aph-w { clip-path: inset(-20% 100% -20% -5%); animation: brush .8s cubic-bezier(.6, 0, .2, 1) forwards; animation-delay: .7s; }
html.js .aph-w1 { clip-path: inset(-5% -20% 100% -20%); animation-name: brush-v; animation-delay: .9s; }
html.js .aph-w2 { animation-delay: 1.05s; }
@keyframes brush { to { clip-path: inset(-20% -5% -20% -5%); } }
@keyframes brush-v { to { clip-path: inset(-5% -20% -5% -20%); } }
.aph-w0 { left: 6%; bottom: 6%; font-size: clamp(64px, 10vw, 150px); transform: rotate(-5deg); }
.aph-w1 { right: 10%; top: 8%; writing-mode: vertical-rl; font-size: clamp(32px, 3.4vw, 46px); background: #E9E4D8; padding: 10px 4px; }
.aph-w2 { left: 8%; bottom: 12%; font-size: clamp(36px, 4vw, 56px); background: #E9E4D8; padding: 2px 12px; transform: rotate(3deg); }
.aph-h1 { font-family: "Permanent Marker", cursive; font-weight: 400; }