/* ══════════════════════════════════════════════
   Fonts
══════════════════════════════════════════════ */
@font-face {
    font-family: 'Thmanyah Serif Display';
    src: url('../assets/fonts/thmanyahserifdisplay-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Thmanyah Serif Display';
    src: url('../assets/fonts/thmanyahserifdisplay-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Thmanyah Serif Display';
    src: url('../assets/fonts/thmanyahserifdisplay-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Thmanyah Serif Display';
    src: url('../assets/fonts/thmanyahserifdisplay-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Thmanyah Serif Display';
    src: url('../assets/fonts/thmanyahserifdisplay-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ══════════════════════════════════════════════
   Design Tokens
══════════════════════════════════════════════ */
:root {
    --green-dark:   #0D4F3C;
    --green-mid:    #166649;
    --green-light:  #1E8A60;
    --green-pale:   #E8F5F0;
    --gold:         #C9973A;
    --gold-light:   #E8B84B;
    --gold-pale:    #FFF8E7;
    --text:         #1A2B22;
    --text-muted:   #5A7066;
    --white:        #FFFFFF;
    --bg:           #F7FAF8;
    --radius:       16px;
    --radius-lg:    28px;
    --shadow:       0 8px 32px rgba(13, 79, 60, .12);
    --shadow-lg:    0 20px 60px rgba(13, 79, 60, .18);
    --font:         'Thmanyah Serif Display', system-ui, serif;
    --transition:   0.3s cubic-bezier(.4, 0, .2, 1);
}

/* ══════════════════════════════════════════════
   Reset & Base
══════════════════════════════════════════════ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    direction: rtl;
    overflow-x: hidden;
    line-height: 1.7;
    width: 100%;
}

.container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ══════════════════════════════════════════════
   Global Animations
══════════════════════════════════════════════ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes floatBook {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-14px); }
}

@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(100% / 2)); } /* Moves right since RTL */
}

@keyframes pulseGlow {
    0%   { box-shadow: 0 0 0 0 rgba(201, 151, 58, 0.4); }
    70%  { box-shadow: 0 0 0 15px rgba(201, 151, 58, 0); }
    100% { box-shadow: 0 0 0 0 rgba(201, 151, 58, 0); }
}

@keyframes float3D {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%       { transform: translateY(-8px) rotate(2deg); }
}

@keyframes shineEffect {
    0%   { left: -100%; }
    30%  { left: 200%; }
    100% { left: 200%; }
}

@keyframes iconTextShine {
    0%   { background-position: 100% center; }
    100% { background-position: 0% center; }
}

/* ══════════════════════════════════════════════
   Shared Icon Style
══════════════════════════════════════════════ */
.prof-icon {
    font-size: 64px;
    color: var(--green-mid);
    filter: drop-shadow(0 15px 15px rgba(22, 102, 73, 0.15));
    animation: float3D 6s ease-in-out infinite;
    display: inline-block;
}

.prof-icon.danger { color: #166649; }
.prof-icon.gold   { color: #C9973A; }

/* Icon Shine Effect — triggered by JS adding .shining class */
.prof-icon.shining {
    background: linear-gradient(
        120deg,
        currentColor 0%,
        currentColor 40%,
        color-mix(in srgb, currentColor 50%, white) 50%,
        currentColor 60%,
        currentColor 100%
    );
    background-size: 300% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: iconTextShine 1s ease-out forwards;
}