/* iPhone notch safe areas */
/* Older iOS (constant) declared first, then modern (env) overrides */
body {
	padding-top: constant(safe-area-inset-top);
	padding-right: constant(safe-area-inset-right);
	padding-bottom: constant(safe-area-inset-bottom);
	padding-left: constant(safe-area-inset-left);
	padding-top: env(safe-area-inset-top);
	padding-right: env(safe-area-inset-right);
	padding-bottom: env(safe-area-inset-bottom);
	padding-left: env(safe-area-inset-left);
}

/* When using fixed elements, ensure they respect safe areas */
.fixed-top {
	padding-top: constant(safe-area-inset-top);
	padding-top: env(safe-area-inset-top);
}

.fixed-bottom,
.sticky-bottom {
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

.offcanvas {
	padding-right: constant(safe-area-inset-right);
	padding-right: env(safe-area-inset-right);
	padding-left: constant(safe-area-inset-left);
	padding-left: env(safe-area-inset-left);
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

/* Utility if you want to wrap specific sections */
.safe-area {
	padding-top: env(safe-area-inset-top);
	padding-right: env(safe-area-inset-right);
	padding-bottom: env(safe-area-inset-bottom);
	padding-left: env(safe-area-inset-left);
}


.rainbow-text {
    background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
    background-size: 400% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow-shift 8s linear infinite;
}

@keyframes rainbow-shift {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}