/**
 * Electric Border
 * Copyright (c) 2025 Cubiq's draftier drafts (https://codepen.io/Cubiq-ish/pen/xbwjEEJ)
 * Fork of an original work Electric Border (https://codepen.io/BalintFerenczy/pen/KwdoyEN)
 * Licensed under MIT (https://opensource.org/licenses/MIT)
 */

/* Electric Border - Ported Style with Hue Effect */

/* Exact Hue Effect Logic from Reference */
.electric-frame {
    /* Color from site scheme (Monochrome/Silver) instead of DodgerBlue */
    --electric-border-color: #ffffff; 
    --electric-light-color: #e2e8f0; /* Slate 200 from style.css */
    
    /* Complex Gradient Logic from Reference */
    --gradient-color: oklch(
      from var(--electric-border-color) 0.3 calc(c / 2) h / 0.4
    );

    position: relative;
    padding: 2px;
    border-radius: 1.5em;
    
    /* Background: User's Black Scheme + Reference's Electric Gradient */
    background: linear-gradient(
      -30deg,
      var(--gradient-color) 0%,
      transparent 20%,
      transparent 80%,
      var(--gradient-color) 100%
    ),
    linear-gradient(
      to bottom,
      #000000, /* Keeping User's Background */
      #000000
    );
    
    /* Reference Hue Filter */
    --f: url(#electric-flow);
    
    /* Layout */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.inner-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.border-outer {
    /* Reference: border: 2px solid oklch(from var(--electric-border-color) l c h / 0.5); */
    border: 2px solid oklch(from var(--electric-border-color) l c h / 0.5);
    border-radius: 1.5em;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    
    /* Reference Offset Logic */
    padding-right: .15em;
    padding-bottom: .15em;
}

.main-card {
    width: 100%;
    height: 100%;
    border-radius: 1.5em;
    border: 2px solid var(--electric-border-color);
    /* Смещение для эффекта наслоения, как в исходнике */
    margin-top: -4px;
    margin-left: -4px;
    /* Применяем анимацию искажения */
    filter: var(--f);
    /* Фон прозрачный, так как основной фон на контейнере */
    background: transparent; 
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .main-card {
        /* На мобильных отключаем тяжелый SVG-фильтр искажения */
        filter: none;
        /* Убираем смещение, которое создает "странное наложение" линий */
        margin: 0;
        /* Делаем рамку тоньше и аккуратнее */
        border: 1px solid var(--electric-border-color);
        /* Простое статичное свечение */
        box-shadow: 0 0 10px var(--electric-border-color);
    }

    .border-outer {
        /* Скрываем внешнюю смещенную рамку, оставляем только одну */
        border: none;
        padding: 0;
    }
    
    .electric-frame {
        /* Упрощаем фон */
        background: #000;
        padding: 4px; /* Немного отступа */
    }
    
    /* Отключаем тяжелые слои эффектов для чистоты */
    .overlay-1, .overlay-2 {
        display: none;
    }
    
    .glow-layer-1, .glow-layer-2 {
        display: none;
    }
}

.glow-layer-1 {
    /* Reference: border: 2px solid oklch(from var(--electric-border-color) l c h / 0.6); */
    border: 2px solid oklch(from var(--electric-border-color) l c h / 0.6);
    border-radius: 24px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    filter: blur(1px);
    box-sizing: border-box;
}

.glow-layer-2 {
    border: 2px solid var(--electric-light-color);
    border-radius: 24px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    filter: blur(4px);
    box-sizing: border-box;
}


.overlay-1 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 24px;
    opacity: 0.5; /* Reduced from 1 to 0.5 (-50%) */
    mix-blend-mode: overlay;
    transform: scale(1.1);
    filter: blur(16px);
    /* Свечение заходит НА фрейм за счет z-index */
    z-index: 20; 
    background: linear-gradient(
        -30deg,
        white 10%,  /* Увеличили область белого в углу */
        transparent 40%,
        transparent 60%,
        white 90%   /* Увеличили область белого в углу */
    );
    pointer-events: none;
}

.overlay-2 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 24px;
    opacity: 0.3; /* Reduced from 0.6 to 0.3 (-50%) */
    mix-blend-mode: overlay;
    transform: scale(1.1);
    filter: blur(16px);
    /* Свечение заходит НА фрейм за счет z-index */
    z-index: 20;
    background: linear-gradient(
        -30deg,
        white 10%,
        transparent 40%,
        transparent 60%,
        white 90%
    );
    pointer-events: none;
}

.background-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 24px;
    filter: blur(32px);
    transform: scale(1.1);
    opacity: 0.3;
    z-index: -1;
    background: linear-gradient(
        -30deg,
        var(--electric-light-color),
        transparent,
        var(--electric-border-color)
    );
    pointer-events: none;
}

.content-container {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1.5em;
    overflow: hidden;
}