/* ============================================
   VIKING THEME ENHANCEMENTS
   Unique Nordic-inspired design elements
   ============================================ */

/* ===== Runic Alphabet Font Definition ===== */
@font-face {
    font-family: 'Elder Futhark';
    src: url('data:font/woff2;charset=utf-8;base64,') format('woff2');
}

/* ===== Norse Knotwork Border Pattern ===== */
.knotwork-border {
    position: relative;
}

.knotwork-border::before,
.knotwork-border::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0 10 Q12.5 0 25 10 T50 10 T75 10 T100 10' fill='none' stroke='%234a7c3f' stroke-width='2' opacity='0.6'/%3E%3Cpath d='M0 10 Q12.5 20 25 10 T50 10 T75 10 T100 10' fill='none' stroke='%234a7c3f' stroke-width='2' opacity='0.6'/%3E%3C/svg%3E");
    background-size: 100px 20px;
    background-repeat: repeat-x;
    opacity: 0.5;
}

.knotwork-border::before {
    top: 0;
}

.knotwork-border::after {
    bottom: 0;
    transform: rotate(180deg);
}

/* ===== Runic Divider ===== */
.rune-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 0;
    opacity: 0.7;
}

.rune-divider::before,
.rune-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}

.rune-divider .rune-symbol {
    font-size: 1.5rem;
    color: var(--color-accent);
    text-shadow: 0 0 10px var(--color-accent);
    animation: runeGlow 3s ease-in-out infinite;
}

@keyframes runeGlow {
    0%, 100% { opacity: 0.5; text-shadow: 0 0 5px var(--color-accent); }
    50% { opacity: 1; text-shadow: 0 0 20px var(--color-accent), 0 0 30px var(--color-accent); }
}

/* ===== Viking Shield Badge ===== */
.shield-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 90px;
    background: linear-gradient(180deg, var(--color-tertiary) 0%, var(--color-secondary) 100%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    border: none;
    text-align: center;
}

.shield-badge::before {
    content: '';
    position: absolute;
    inset: 3px;
    background: linear-gradient(180deg, var(--color-secondary) 0%, var(--color-primary) 100%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.shield-badge::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--color-accent);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--color-accent);
}

.shield-badge span {
    position: relative;
    z-index: 1;
    font-family: var(--font-heading);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 25px;
}

/* ===== Torch Flame Animation ===== */
.torch-container {
    position: relative;
    display: inline-block;
}

.torch-flame {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 30px;
    background: linear-gradient(to top, #ff6b35, #ffa500, #ffdd00, transparent);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: flicker 0.5s ease-in-out infinite alternate;
    filter: blur(1px);
    opacity: 0.9;
}

.torch-flame::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 20px;
    background: linear-gradient(to top, #fff, #ffdd00, transparent);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: flicker 0.3s ease-in-out infinite alternate-reverse;
}

@keyframes flicker {
    0% {
        transform: translateX(-50%) scale(1) rotate(-2deg);
        opacity: 0.8;
    }
    100% {
        transform: translateX(-50%) scale(1.1) rotate(2deg);
        opacity: 1;
    }
}

/* ===== Viking Scroll/Parchment Quote Box ===== */
.viking-scroll {
    position: relative;
    background: linear-gradient(135deg, #2a2418 0%, #1e1a14 50%, #2a2418 100%);
    padding: 2.5rem 2rem;
    margin: 2rem 0;
    border-radius: 4px;
    border: 1px solid #3d3528;
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.5),
        0 10px 30px rgba(0, 0, 0, 0.3);
}

.viking-scroll::before {
    content: 'ᚠ';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    color: var(--color-accent);
    text-shadow: 0 0 20px var(--color-accent);
    background: var(--color-primary);
    padding: 0 1rem;
}

.viking-scroll blockquote {
    font-style: italic;
    font-size: 1.1rem;
    color: #c4b998;
    text-align: center;
    line-height: 1.8;
    margin: 0;
}

.viking-scroll cite {
    display: block;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--color-accent);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* ===== Carved Stone Header Effect ===== */
.carved-text {
    position: relative;
    color: #1a1a1a;
    text-shadow:
        1px 1px 1px rgba(255, 255, 255, 0.1),
        -1px -1px 1px rgba(0, 0, 0, 0.5),
        2px 2px 3px rgba(0, 0, 0, 0.3);
    background: linear-gradient(180deg, #2d2d2d 0%, #1a1a1a 50%, #2d2d2d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
}

/* ===== Viking Rope Divider ===== */
.rope-divider {
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20'%3E%3Cpath d='M0 10 C10 5, 20 15, 30 10 S50 5, 60 10' fill='none' stroke='%23654321' stroke-width='4'/%3E%3Cpath d='M0 10 C10 15, 20 5, 30 10 S50 15, 60 10' fill='none' stroke='%23543210' stroke-width='4'/%3E%3C/svg%3E");
    background-size: 60px 20px;
    background-repeat: repeat-x;
    opacity: 0.6;
    margin: 2rem 0;
}

/* ===== Glowing Rune Hover Effect ===== */
.rune-hover {
    position: relative;
    overflow: hidden;
}

.rune-hover::after {
    content: 'ᚱ';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 4rem;
    color: var(--color-accent);
    opacity: 0;
    transition: all 0.5s ease;
    pointer-events: none;
    text-shadow: 0 0 30px var(--color-accent);
}

.rune-hover:hover::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.3;
}

/* ===== Viking Compass/Vegvisir Background ===== */
.vegvisir-bg {
    position: relative;
}

.vegvisir-bg::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='95' fill='none' stroke='%234a7c3f' stroke-width='1' opacity='0.1'/%3E%3Ccircle cx='100' cy='100' r='70' fill='none' stroke='%234a7c3f' stroke-width='1' opacity='0.1'/%3E%3Cpath d='M100 5 L100 195 M5 100 L195 100 M25 25 L175 175 M175 25 L25 175' stroke='%234a7c3f' stroke-width='1' opacity='0.1'/%3E%3Cpath d='M100 30 L105 50 L100 45 L95 50 Z' fill='%234a7c3f' opacity='0.15'/%3E%3Cpath d='M100 170 L105 150 L100 155 L95 150 Z' fill='%234a7c3f' opacity='0.15'/%3E%3Cpath d='M30 100 L50 105 L45 100 L50 95 Z' fill='%234a7c3f' opacity='0.15'/%3E%3Cpath d='M170 100 L150 105 L155 100 L150 95 Z' fill='%234a7c3f' opacity='0.15'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.5;
    pointer-events: none;
    animation: rotateVegvisir 120s linear infinite;
}

@keyframes rotateVegvisir {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ===== Viking Axe Section Markers ===== */
.axe-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin: 3rem 0;
}

.axe-marker::before,
.axe-marker::after {
    content: '';
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M25 5 L30 20 L45 25 L30 30 L25 45 L20 30 L5 25 L20 20 Z' fill='%234a7c3f' opacity='0.6'/%3E%3C/svg%3E");
    background-size: contain;
    opacity: 0.6;
}

/* ===== Nordic Border Frame ===== */
.nordic-frame {
    position: relative;
    border: 2px solid var(--color-border);
    padding: 2rem;
}

.nordic-frame::before,
.nordic-frame::after,
.nordic-frame .corner-bl,
.nordic-frame .corner-br {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid var(--color-accent);
}

.nordic-frame::before {
    top: -5px;
    left: -5px;
    border-right: none;
    border-bottom: none;
}

.nordic-frame::after {
    top: -5px;
    right: -5px;
    border-left: none;
    border-bottom: none;
}

.nordic-frame .corner-bl {
    bottom: -5px;
    left: -5px;
    border-right: none;
    border-top: none;
}

.nordic-frame .corner-br {
    bottom: -5px;
    right: -5px;
    border-left: none;
    border-top: none;
}

/* ===== Animated Rune Trail (for buttons) ===== */
.rune-trail {
    position: relative;
    overflow: hidden;
}

.rune-trail::before {
    content: 'ᚠᚢᚦᚨᚱᚲ';
    position: absolute;
    top: 50%;
    left: -100%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--color-accent);
    opacity: 0;
    white-space: nowrap;
    transition: all 0.6s ease;
    letter-spacing: 5px;
}

.rune-trail:hover::before {
    left: 100%;
    opacity: 0.5;
}

/* ===== Viking Stats Counter Style ===== */
.viking-stat {
    position: relative;
    text-align: center;
    padding: 1.5rem;
}

.viking-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}

.viking-stat::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}

.viking-stat .stat-number {
    font-size: 3rem;
    font-family: var(--font-heading);
    color: var(--color-accent);
    text-shadow: 0 0 20px rgba(74, 124, 63, 0.5);
}

/* ===== Longship Silhouette Decoration ===== */
.longship-divider {
    height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60'%3E%3Cpath d='M20 45 Q100 20 180 45 L170 50 Q100 30 30 50 Z' fill='%234a7c3f' opacity='0.2'/%3E%3Cpath d='M100 15 L100 45 M95 20 L100 15 L105 20' stroke='%234a7c3f' stroke-width='2' fill='none' opacity='0.3'/%3E%3Cpath d='M85 25 L115 25 L115 45 L85 45 Z' fill='%234a7c3f' opacity='0.15'/%3E%3C/svg%3E");
    background-size: 200px 60px;
    background-repeat: no-repeat;
    background-position: center;
    margin: 2rem 0;
}

/* ===== Mjolnir (Thor's Hammer) Accent ===== */
.mjolnir-accent {
    position: relative;
}

.mjolnir-accent::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 40'%3E%3Crect x='12' y='0' width='6' height='15' fill='%234a7c3f'/%3E%3Crect x='5' y='15' width='20' height='12' rx='2' fill='%234a7c3f'/%3E%3Crect x='8' y='27' width='14' height='8' rx='1' fill='%234a7c3f'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.3;
}

/* ===== Pulsing Glow Effect ===== */
.glow-pulse {
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 5px var(--color-accent), 0 0 10px var(--color-accent);
    }
    50% {
        box-shadow: 0 0 20px var(--color-accent), 0 0 30px var(--color-accent), 0 0 40px var(--color-accent);
    }
}

/* ===== Runic Loading Animation ===== */
.rune-loader {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.rune-loader span {
    font-size: 1.5rem;
    color: var(--color-accent);
    animation: runeLoad 1.5s ease-in-out infinite;
}

.rune-loader span:nth-child(2) { animation-delay: 0.2s; }
.rune-loader span:nth-child(3) { animation-delay: 0.4s; }
.rune-loader span:nth-child(4) { animation-delay: 0.6s; }
.rune-loader span:nth-child(5) { animation-delay: 0.8s; }
.rune-loader span:nth-child(6) { animation-delay: 1.0s; }

@keyframes runeLoad {
    0%, 100% { opacity: 0.2; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-10px); text-shadow: 0 0 20px var(--color-accent); }
}

/* ===== Viking Testimonial Shield Cards ===== */
.shield-card {
    position: relative;
    background: var(--color-secondary);
    padding: 2rem;
    clip-path: polygon(
        0% 10%,
        10% 0%,
        90% 0%,
        100% 10%,
        100% 90%,
        90% 100%,
        10% 100%,
        0% 90%
    );
    transition: all 0.3s ease;
}

.shield-card::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px solid var(--color-accent);
    opacity: 0.3;
    clip-path: polygon(
        0% 8%,
        8% 0%,
        92% 0%,
        100% 8%,
        100% 92%,
        92% 100%,
        8% 100%,
        0% 92%
    );
}

.shield-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(74, 124, 63, 0.2);
}

/* ===== Animated Nordic Border ===== */
.animated-border {
    position: relative;
}

.animated-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid transparent;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light), var(--color-accent)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    animation: borderGlow 3s linear infinite;
}

@keyframes borderGlow {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    100% { opacity: 0.3; }
}

/* ===== Hero Parallax Enhancement ===== */
.hero-parallax {
    background-attachment: fixed;
}

@media (max-width: 768px) {
    .hero-parallax {
        background-attachment: scroll;
    }
}

/* ===== Custom Scrollbar (Viking Wood Theme) ===== */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--color-primary);
    border-left: 1px solid var(--color-border);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #3d3528 0%, #2a2418 50%, #3d3528 100%);
    border-radius: 6px;
    border: 2px solid var(--color-primary);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--color-accent) 0%, #3d5a32 50%, var(--color-accent) 100%);
}

/* ===== Print Styles ===== */
@media print {
    .torch-flame,
    .vegvisir-bg::before,
    .rune-divider,
    .animated-border::before {
        display: none;
    }
}