/* Dotline Font Family - OFGH&D */
/* License: Free for personal and commercial use */

@font-face {
    font-family: 'Dotline';
    src: url('/Yayasan/resources/honeyanddeath_Dotline/Dotline-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dotline';
    src: url('/Yayasan/resources/honeyanddeath_Dotline/Dotline-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dotline';
    src: url('/Yayasan/resources/honeyanddeath_Dotline/Dotline-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dotline';
    src: url('/Yayasan/resources/honeyanddeath_Dotline/Dotline-Heavy.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Dotline Font Utility Classes */
.dotline-font {
    font-family: 'Dotline', 'Arial Black', sans-serif;
    letter-spacing: 2px;
}

.dotline-light {
    font-family: 'Dotline', 'Arial', sans-serif;
    font-weight: 300;
    letter-spacing: 2px;
}

.dotline-regular {
    font-family: 'Dotline', 'Arial', sans-serif;
    font-weight: 400;
    letter-spacing: 2px;
}

.dotline-bold {
    font-family: 'Dotline', 'Arial Black', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
}

.dotline-heavy {
    font-family: 'Dotline', 'Arial Black', sans-serif;
    font-weight: 900;
    letter-spacing: 3px;
}

/* Responsive Dotline Font Sizes */
.dotline-xl {
    font-size: 3.5rem;
    line-height: 1.2;
}

.dotline-lg {
    font-size: 2.5rem;
    line-height: 1.3;
}

.dotline-md {
    font-size: 1.8rem;
    line-height: 1.4;
}

.dotline-sm {
    font-size: 1.2rem;
    line-height: 1.5;
}

/* Dotline Color Variations */
.dotline-primary {
    color: #4285f4;
}

.dotline-secondary {
    color: #34a853;
}

.dotline-accent {
    color: #fbbc04;
}

.dotline-dark {
    color: #333;
}

.dotline-gradient {
    background: linear-gradient(45deg, #4285f4, #34a853);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .dotline-xl {
        font-size: 2.5rem;
    }

    .dotline-lg {
        font-size: 2rem;
    }

    .dotline-md {
        font-size: 1.5rem;
    }

    .dotline-sm {
        font-size: 1rem;
    }

    .dotline-font,
    .dotline-light,
    .dotline-regular,
    .dotline-bold,
    .dotline-heavy {
        letter-spacing: 1px;
    }
}

@media (max-width: 480px) {
    .dotline-xl {
        font-size: 2rem;
    }

    .dotline-lg {
        font-size: 1.5rem;
    }

    .dotline-heavy {
        letter-spacing: 2px;
    }
}

/* Dotline Animation Effects */
.dotline-fade-in {
    animation: dotlineFadeIn 1s ease-in-out;
}

@keyframes dotlineFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dotline-scale-in {
    animation: dotlineScaleIn 0.8s ease-out;
}

@keyframes dotlineScaleIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Dotline Text Effects */
.dotline-shadow {
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.3),
        0 0 10px rgba(66, 133, 244, 0.2);
}

.dotline-outlined {
    text-shadow:
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff;
}

/* Usage Guidelines for Dotline Font */
/*
RECOMMENDED USAGE:
✅ Large headings (H1, H2)
✅ Hero section titles
✅ Brand elements
✅ Call-to-action buttons
✅ Section dividers

AVOID FOR:
❌ Body text
❌ Form labels
❌ Small text under 18px
❌ Long paragraphs
❌ Navigation menus

ACCESSIBILITY NOTES:
- Always provide fallback fonts
- Ensure minimum 4.5:1 contrast ratio
- Test on various devices and screen sizes
- Consider providing alternative text for decorative usage
*/