/* SHAHAZ.COM ZIP-320 — Premium 3D Notification Box. Additive only; scoped entirely
 * under .shahaz-3dbox / .shahaz-3dbox-root — never touches any other component's
 * styling, and introduces no global focus-ring override (Section 16). */

.shahaz-3dbox-root { perspective: 1400px; }

/* Waiting state (Phase 1): positioned off-screen above, not affecting layout — the
 * outer root is already position:fixed/overlay via the engine's own popup CSS; this
 * only offsets the panel itself so it visually starts outside the header area. */
.shahaz-3dbox { background: transparent !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important; }
.shahaz-3dbox__scene {
	position: relative;
	transform-style: preserve-3d;
	transform: translateY(-160%) rotateX(-25deg);
	opacity: 0;
	transition: transform 1.1s cubic-bezier(.16,.84,.32,1), opacity .6s ease;
	width: min(360px, 88vw);
	margin: 0 auto;
}

/* Phase 2/3 — arrival + settle */
.shahaz-3dbox__scene.is-arriving { opacity: 1; transform: translateY(0) rotateX(0deg); }
.shahaz-3dbox__scene.is-settled { transform: translateY(0) rotateX(0deg) scale(1); }

.shahaz-3dbox__box {
	position: relative;
	width: 100%;
	height: 190px;
	transform-style: preserve-3d;
	transform: rotateX(8deg);
}

.shahaz-3dbox__face {
	position: absolute;
	inset: 0;
	border-radius: 14px;
	background: linear-gradient(160deg, #2a0a1f 0%, #6b0040 60%, #2a0a1f 100%);
	box-shadow: 0 24px 48px rgba(0,0,0,.35);
	backface-visibility: hidden;
}
.shahaz-3dbox__face--back { transform: translateZ(-40px); filter: brightness(.7); }
.shahaz-3dbox__face--left { width: 40px; left: -20px; transform: rotateY(90deg); filter: brightness(.85); }
.shahaz-3dbox__face--right { width: 40px; right: -20px; left: auto; transform: rotateY(-90deg); filter: brightness(.85); }
.shahaz-3dbox__face--bottom { height: 40px; top: auto; bottom: -20px; transform: rotateX(-90deg); filter: brightness(.6); }

/* Phase 4 — lid, physically hinged at the back edge */
.shahaz-3dbox__lid {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 46px;
	border-radius: 14px 14px 0 0;
	background: linear-gradient(160deg, #ff087f 0%, #b8005c 100%);
	transform-origin: top center;
	transform: rotateX(0deg) translateZ(1px);
	transition: transform .9s cubic-bezier(.34,1.2,.4,1);
	box-shadow: 0 -1px 0 rgba(255,255,255,.25) inset;
}
.shahaz-3dbox__scene.is-open .shahaz-3dbox__lid { transform: rotateX(-125deg) translateZ(1px); }

/* Phase 5 — light/focus beam emerging from the opening */
.shahaz-3dbox__focus-beam {
	position: absolute;
	top: -10px; left: 50%;
	width: 10px; height: 10px;
	transform: translateX(-50%) translateZ(2px);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,216,77,.55) 40%, transparent 72%);
	opacity: 0;
	transition: opacity .5s ease, width .6s ease, height .6s ease;
	pointer-events: none;
}
.shahaz-3dbox__scene.is-lit .shahaz-3dbox__focus-beam { opacity: 1; width: 220px; height: 220px; top: -80px; }

/* Shine sweep across the box faces */
.shahaz-3dbox__shine {
	position: absolute; inset: 0; border-radius: 14px; overflow: hidden; pointer-events: none;
}
.shahaz-3dbox__shine::after {
	content: ""; position: absolute; inset: -30% 0; width: 40%;
	background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 48%, transparent 61%);
	transform: translateX(-160%);
}
.shahaz-3dbox__scene.is-settled .shahaz-3dbox__shine::after {
	animation: shahaz3dboxShine 1.6s ease-in-out .2s 1;
}
@keyframes shahaz3dboxShine { to { transform: translateX(320%); } }

/* Phase 6 — message emerges from inside the box, deep in Z-space, travels forward */
.shahaz-3dbox__message {
	position: absolute;
	left: 8%; right: 8%; top: 54px;
	transform: translateZ(-120px) translateY(20px) scale(.7);
	opacity: 0;
	transition: transform 1s cubic-bezier(.2,.9,.25,1), opacity .8s ease;
	text-align: center;
	color: #fff9fc;
	background: rgba(15,4,12,.55);
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 12px;
	padding: 14px 16px;
	backdrop-filter: blur(2px);
}
.shahaz-3dbox__scene.is-message-visible .shahaz-3dbox__message {
	transform: translateZ(30px) translateY(0) scale(1);
	opacity: 1;
}
.shahaz-3dbox__message .shahaz-promotion-template__title { display: block; font-size: 1.05em; margin-bottom: 4px; color: #ffd84d; }
.shahaz-3dbox__message .shahaz-promotion-template__actions { margin-top: 10px; }

/* Section 16 — scoped focus handling only, no global override */
.shahaz-3dbox .shahaz-promotion-presentation__cta,
.shahaz-3dbox .shahaz-promotion-presentation__secondary {
	-webkit-tap-highlight-color: transparent;
}
.shahaz-3dbox .shahaz-promotion-presentation__cta:focus-visible,
.shahaz-3dbox .shahaz-promotion-presentation__secondary:focus-visible {
	outline: 2px solid #ffd84d;
	outline-offset: 2px;
	box-shadow: none;
}
.shahaz-3dbox .shahaz-promotion-presentation__cta:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* Section 18 — reduced motion: simplified, still fully usable, no 3D movement */
@media (prefers-reduced-motion: reduce) {
	.shahaz-3dbox__scene { transition: opacity .3s ease; transform: none; }
	.shahaz-3dbox__scene.is-settled,
	.shahaz-3dbox__scene.is-open,
	.shahaz-3dbox__scene.is-message-visible { opacity: 1; }
	.shahaz-3dbox__box, .shahaz-3dbox__lid, .shahaz-3dbox__message, .shahaz-3dbox__focus-beam { transition: none !important; animation: none !important; }
	.shahaz-3dbox__scene.is-open .shahaz-3dbox__lid { transform: rotateX(-125deg) translateZ(1px); }
	.shahaz-3dbox__scene.is-message-visible .shahaz-3dbox__message { transform: none; opacity: 1; }
	.shahaz-3dbox__scene.is-lit .shahaz-3dbox__focus-beam { opacity: .6; }
}

/* Section 15 — mobile/tablet: keep 3D coherent, no overflow, readable, reachable close/CTA */
@media (max-width: 480px) {
	.shahaz-3dbox__scene { width: min(300px, 92vw); perspective-origin: center; }
	.shahaz-3dbox__box { height: 160px; }
	.shahaz-3dbox__message { top: 44px; padding: 10px 12px; font-size: .92em; }
}