body { background-color: #ffffff; color: #000000; overflow-x: hidden; }
.hero-photo { position: relative; width: 100%; height: 100%; overflow: visible; }
.hero-photo__frame { width: 100%; height: 100%; border-radius: 1.5rem; overflow: hidden; position: relative; z-index: 1; }
.hero-photo__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-sticker {
	position: absolute;
	width: clamp(56px, 12vw, 120px);
	height: auto;
	display: block;
	filter: drop-shadow(0 8px 18px rgba(0,0,0,0.25));
	transform: translateZ(0);
	user-select: none;
	pointer-events: none;
	z-index: 2;
	opacity: 0;
	animation: heroStickerIn 700ms ease-out forwards;
}
.hero-sticker--alien { top: 10%; left: -10%; transform: translateY(12px) scale(0.92) rotate(-12deg); animation-delay: 120ms; }
.hero-sticker--boom { bottom: -2%; right: 6%; width: clamp(64px, 14vw, 140px); transform: translateY(12px) scale(0.92) rotate(10deg); animation-delay: 260ms; }

@keyframes heroStickerIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
.bento-card { transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); }
.bento-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1); }
.details-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.details-open .details-content { max-height: 500px; }
.plus-icon { transition: transform 0.3s ease; }
.details-open .plus-icon { transform: rotate(45deg); }
.project-card-title { text-shadow: 0 8px 20px rgba(0,0,0,0.45); }
.project-card-meta { text-shadow: 0 6px 14px rgba(0,0,0,0.35); }