/* ========================================================
   PREMIUM ENHANCEMENTS — B-SERIES (B3 -> B8)
   ======================================================== */

/* B3: Cursor Sparkle */
.sparkle-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #FFD87A;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 0 10px #FFD87A, 0 0 20px #FFD87A;
    animation: sparkleAnim 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes sparkleAnim {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, calc(-50% - 40px)) scale(0); opacity: 0; }
}

/* B4: Text Gradient Animation */
.text-gradient-animated {
    background: linear-gradient(to right, #ffffff, #FFD87A, #ffffff);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: textGradientPan 3s linear infinite;
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
@keyframes textGradientPan {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* B6: Magnetic Buttons */
.magnetic-btn {
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* B7: Card Tilt 3D */
.why-card {
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s ease, border-color 0.2s ease;
    will-change: transform;
}

/* B8: Skeleton Loading */
.skeleton-overlay {
    position: absolute;
    inset: 0;
    background: var(--cream);
    z-index: 999;
    display: none;
    pointer-events: none;
}
.page.is-loading .skeleton-overlay {
    display: block;
    animation: skeletonFadeOut 0.4s ease-out 0.4s forwards;
}
.skeleton-content {
    width: 100%;
    height: 100vh;
    background: var(--cream);
    position: relative;
    overflow: hidden;
}
.skeleton-content::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(200,25,43,0.04), transparent);
    transform: translateX(-100%);
    animation: skeletonShimmer 1.5s infinite;
}
@keyframes skeletonShimmer {
    100% { transform: translateX(100%); }
}
@keyframes skeletonFadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; display: none; }
}

/* B10: Dark Mode Toggle */
body.dark-theme {
  --cream: #1A1311;
  --cream2: #241A18;
  --text: #FDF5EE;
  --muted: #A88B8B;
  --border: #3A2522;
  --dot-bg: #1A1311;
}

body.dark-theme .why-card,
body.dark-theme .cv-card,
body.dark-theme .faq-item,
body.dark-theme .contact-card,
body.dark-theme .tl-card,
body.dark-theme .register-box {
  background: var(--cream2);
  border-color: var(--border);
}

body.dark-theme .tl-wrap .tl-items li {
  color: #CCC;
}
body.dark-theme .tl-wrap .tl-items li b {
  color: #FFF;
}

#dark-mode-toggle {
    background: transparent;
    border: none;
    color: var(--text);
    cursor: pointer;
    padding: 8px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}
#dark-mode-toggle:hover {
    transform: scale(1.1);
}
#dark-mode-toggle svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}
body.dark-theme #dark-mode-toggle .sun-icon { display: none !important; }
body.dark-theme #dark-mode-toggle .moon-icon { display: block !important; }