/* ── Noor e Ilam — Custom CSS Utilities ─────────────────────────────────────── */

/* Fonts */
body { font-family: 'Manrope', sans-serif; }
.font-noto-serif, .font-serif { font-family: 'Noto Serif', serif; }

/* Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    user-select: none;
}

/* Glassmorphism Nav */
.glass-nav {
    background: rgba(231, 255, 242, 0.70);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Tonal Gradient */
.tonal-transition {
    background: linear-gradient(180deg, rgba(231,255,242,0) 0%, rgba(201,248,226,0.5) 100%);
}

/* Islamic Pattern -- subtle dot matrix */
.islamic-pattern-bg {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l2.5 7.5L40 10l-7.5 2.5L30 20l-2.5-7.5L20 10l7.5-2.5L30 0z' fill='%2300261a' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* Islamic mask overlay */
.islamic-pattern-mask {
    mask-image: url('https://www.transparenttextures.com/patterns/islamic-art.png');
    mask-size: 400px;
}
.islamic-pattern-overlay {
    mask-image: url('https://www.transparenttextures.com/patterns/islamic-art.png');
    mask-size: 200px;
    opacity: 0.03;
}

/* Spiritual gradient (student dashboard hero) */
.spiritual-gradient {
    background: radial-gradient(circle at top left, #00261a, #0f3d2e);
}

/* Quranic progress bar gradient */
.quranic-progress {
    background: linear-gradient(to right, #fed65b, #beedd7);
}

/* Asymmetric pattern mask */
.asymmetric-pattern {
    mask-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l2.5 12.5L45 15l-12.5 2.5L30 30l-2.5-12.5L15 15l12.5-2.5z' fill='%23000' fill-opacity='1'/%3E%3C/svg%3E");
    mask-size: 40px;
}

/* Serif numbers */
.serif-numbers { font-family: 'Noto Serif', serif; }

/* No scrollbar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Smooth hover transitions */
a, button { transition: all 0.2s ease; }

/* Contact form focus glow */
input:focus, textarea:focus, select:focus {
    outline: none;
    ring: 2px solid rgba(0,38,26,0.2);
}

/* Admin sidebar */
.admin-sidebar {
    background: #00261a;
}

/* Animate ping (live dot) */
@keyframes ping {
    75%, 100% { transform: scale(2); opacity: 0; }
}
.animate-ping { animation: ping 1s cubic-bezier(0,0,0.2,1) infinite; }

/* Animate bounce */
@keyframes bounce {
    0%,100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
    50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1); }
}
.animate-bounce { animation: bounce 1s infinite; }

/* ── Hero & Interaction Animations ─────────────────────────────────────────── */

@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}
.animate-float { animation: float 6s ease-in-out infinite; }

@keyframes float-slow {
    0% { transform: translateY(0px) translateX(0px); }
    50% { transform: translateY(-10px) translateX(10px); }
    100% { transform: translateY(0px) translateX(0px); }
}
.animate-float-slow { animation: float-slow 8s ease-in-out infinite; }

@keyframes slow-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.animate-slow-rotate { animation: slow-rotate 60s linear infinite; }

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.animate-shimmer {
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
    background-size: 200% 100%;
    animation: shimmer 3s infinite;
}

@keyframes drift {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -20px) scale(1.1); }
    100% { transform: translate(0, 0) scale(1); }
}
.animate-drift { animation: drift 15s ease-in-out infinite; }

/* Hero Image Specifics */
.hero-image-container {
    perspective: 1000px;
}
.hero-image-content {
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
}
.hero-image-container:hover .hero-image-content {
    transform: rotateY(-10deg) rotateX(5deg);
}

/* ── Excellence Widget Upgrades ────────────────────────────────────────────── */

.widget-card-perspective {
    perspective: 1515px;
}
.widget-card-content {
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
}
.widget-card-perspective:hover .widget-card-content {
    transform: rotateX(8deg) rotateY(-8deg) translateY(-10px);
}
.icon-glow-container {
    position: relative;
    transition: all 0.4s ease;
}
.icon-glow-container::after {
    content: '';
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, var(--md-sys-color-secondary-container) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
    border-radius: 50%;
}
.widget-card-perspective:hover .icon-glow-container::after {
    opacity: 0.6;
    animation: ping 1.5s infinite;
}
.card-shimmer-wrapper {
    position: relative;
    overflow: hidden;
}
.card-shimmer-wrapper::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transform: rotate(-45deg);
    transition: all 0.6s;
    opacity: 0;
    pointer-events: none;
}
.widget-card-perspective:hover .card-shimmer-wrapper::before {
    left: 100%;
    top: 100%;
    opacity: 1;
}