/* Home: photographs in the three doors, the five services and the Academy strip (inc/ext/pp.php, front-page.php). */
.door-photo { position: relative; width: 100%; max-width: 380px; aspect-ratio: 4 / 4.4; margin: 0 0 16px; border-radius: var(--arch); overflow: hidden; isolation: isolate; background: var(--noce); box-shadow: 0 0 0 1px var(--pietra), 0 34px 60px -44px rgba(20, 15, 12, .7); transform: translateZ(0); }
.door-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transform-origin: var(--focus, 50% 50%); scale: 1.03; transition: scale 1.8s cubic-bezier(.25, .6, .25, 1); }
.door:hover .door-photo img, .door:focus-within .door-photo img { scale: 1.1; }
.door-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31, 25, 21, 0) 55%, rgba(31, 25, 21, .45) 100%); pointer-events: none; }
.door-num { position: absolute; left: 50%; bottom: 18px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; translate: -50% 0; border-radius: 50%; background: rgba(31, 25, 21, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: 0 0 0 1px rgba(243, 227, 194, .55); font-size: 17px; line-height: 1; color: var(--cera-2); font-variant-numeric: lining-nums; }
.svc-photo { display: block; aspect-ratio: 3 / 2; margin: 0 0 6px; border-radius: 6px; overflow: hidden; background: var(--noce); transform: translateZ(0); }
.svc-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transform-origin: var(--focus, 50% 50%); scale: 1.02; transition: scale 1.6s cubic-bezier(.25, .6, .25, 1); }
.svc:hover .svc-photo img, .svc:focus-within .svc-photo img { scale: 1.08; }
.prod-cover { display: block; aspect-ratio: 4 / 5; margin: 0 0 8px; overflow: hidden; transform: translateZ(0); }
.prod-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 1.4s cubic-bezier(.25, .6, .25, 1); }
.prod:hover .prod-cover img, .prod:focus-within .prod-cover img { scale: 1.05; }
@media (max-width: 900px) { .door-photo { max-width: none; aspect-ratio: 16 / 11; } }
@media (prefers-reduced-motion: reduce) { .door-photo img, .svc-photo img, .prod-cover img { transition: none; } }