:root { color-scheme: light; --paper:#fbf6ed; --blue:#0072c6; --rx:-7deg; --ry:-12deg; --ex:0px; --ey:0px; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:#17171b; font-family:Georgia,'Times New Roman',serif; }
main { overflow:clip; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:max(1.5rem,env(safe-area-inset-top)) 1.5rem max(1rem,env(safe-area-inset-bottom)); }
button { -webkit-tap-highlight-color:transparent; }
.scene { position:relative; display:block; border:0; padding:0; background:none; width:min(100%,25rem,max(15rem,calc((100svh - 10rem) / 1.22))); aspect-ratio:1/1.22; perspective:700px; cursor:grab; touch-action:pan-y; user-select:none; }
.scene:active { cursor:grabbing; }
.scene:focus-visible { outline:2px solid var(--blue); outline-offset:8px; border-radius:12px; }
.sculpture { display:block; position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(var(--rx)) rotateY(var(--ry)); }
.layer { display:block; position:absolute; width:145%; aspect-ratio:1095/1436; left:-22.5%; top:-6%; pointer-events:none; }
.layer img { display:block; width:100%; height:auto; }
.title { clip-path:inset(0 0 80% 0); transform:translateZ(40px); }
.edge { background:linear-gradient(125deg,#5099d5,#005693 75%); clip-path:polygon(48.5% 20.2%,55% 20.7%,60% 22.3%,64% 25%,66% 28.5%,66.5% 32.5%,65% 36.5%,62.5% 40%,58.5% 43%,68% 63%,29% 63%,39% 43%,35% 40%,32% 36%,31% 32%,31.5% 28%,34% 24.5%,38% 22%,43% 20.7%); transform:translateZ(var(--depth)); }
.frame { clip-path:polygon(48.5% 20.2%,55% 20.7%,60% 22.3%,64% 25%,66% 28.5%,66.5% 32.5%,65% 36.5%,62.5% 40%,58.5% 43%,68% 63%,29% 63%,39% 43%,35% 40%,32% 36%,31% 32%,31.5% 28%,34% 24.5%,38% 22%,43% 20.7%); mask-image:radial-gradient(ellipse 7% 5.5% at 48.5% 39.5%,transparent 98%,#000 100%); transform:translateZ(26px); filter:drop-shadow(0 7px 3px #204d7512); }
.eye { clip-path:ellipse(7.3% 5.8% at 48.5% 39.5%); transform:translate3d(var(--ex),var(--ey),27px); }
.eye img { transform-origin:48.5% 39.5%; }
.scene.wink .eye img { animation:blink .65s ease-in-out; }
.scene.wink .frame,.scene.wink .eye { animation:shimmer 1.3s ease-in-out; }
@keyframes blink { 0%,35%,100% { transform:scaleY(1); } 18% { transform:scaleY(.07); } }
@keyframes shimmer { 0%,100% { filter:hue-rotate(0deg); } 35% { filter:hue-rotate(120deg) saturate(1.4); } 65% { filter:hue-rotate(245deg); } }
.caption { text-align:center; position:relative; z-index:1; }
.ornament { position:relative; width:13rem; height:2rem; overflow:hidden; margin:0 auto .85rem; }
.ornament img { position:absolute; width:200%; height:auto; max-width:none; left:-50%; top:-26.6rem; }
.slogan { font-size:clamp(1.125rem,4.5vw,1.4rem); line-height:1.6; margin:0; }
@media (max-height:500px) and (min-width:600px) { main { flex-direction:row; gap:2rem; } .scene { width:min(35vw,16rem); } .caption { max-width:50%; } }
@media (prefers-reduced-motion:reduce) { .sculpture { transform:rotateX(-7deg) rotateY(-12deg)!important; } .scene.wink .eye img { animation:none; } .scene.wink .frame,.scene.wink .eye { animation:none; filter:hue-rotate(55deg); } }