/* ==================== FONTS ==================== */
@font-face{font-family:'Gotham Pro';src:url('../fonts/GothaProReg.otf') format('opentype');font-weight:300;font-display:swap}
@font-face{font-family:'Gotham Pro';src:url('../fonts/GothaProReg.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Gotham Pro';src:url('../fonts/GothaProReg.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'Gotham Pro';src:url('../fonts/GothaProReg.otf') format('opentype');font-weight:700;font-display:swap}
/* ==================== VARIABLES ==================== */
:root{--bg:#0d1117;--card:#161b22;--text:#c5c5c5;--btn:rgba(33,38,45,0.7);--border:rgba(48,54,61,0.8);--shadow:0 4px 10px rgba(0,0,0,0.3);--red:#ff4d4d;--cyan:#00ffff;--beam:rgba(255,255,255,0.4)}
/* ==================== BASE ==================== */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Gotham Pro',sans-serif;background:var(--bg);display:flex;justify-content:center;align-items:center;min-height:100vh;padding:10px;overflow-x:hidden;perspective:1000px}
/* ==================== MAIN CARD ==================== */
.card{background:var(--card);width:100%;max-width:340px;padding:35px 25px 30px;border-radius:20px;text-align:center;border:1px solid var(--border);box-shadow:0 20px 50px rgba(0,0,0,0.6),0 0 25px rgba(153,153,153,0.1);position:relative;backdrop-filter:blur(10px);opacity:0;transform:translate3d(0,30px,0) scale(0.95);overflow:visible!important;will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d}
.card.visible-active{animation:appear 2s cubic-bezier(0.2,0.8,0.2,1) forwards,float 6s ease-in-out infinite 2.5s}
/* ==================== BEAM EFFECT ==================== */
.card-beam{position:absolute;inset:-1px;border-radius:20px;padding:1px;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;z-index:1}
.card-beam::before{content:'';position:absolute;width:100px;height:100px;top:-50px;left:-50px;background:radial-gradient(circle,var(--beam)0%,transparent 70%);animation:beam 8s linear infinite;offset-path:rect(0% 100% 100% 0% round 20px)}
@keyframes beam{0%{offset-distance:0}100%{offset-distance:100%}}
/* ==================== AVATAR (INSIDE CARD) ==================== */
.avatar-box{width:120px;height:120px;background:#161b22;border:2px solid var(--border);border-radius:50%;margin:-100px auto 20px;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer;box-shadow:0 0 15px rgba(255,255,255,0.25),0 0 30px rgba(255,255,255,0.1);opacity:0;transform:scale(0.5);transition:opacity 0.8s,transform 0.8s cubic-bezier(0.2,0.8,0.2,1.2);z-index:5}
.avatar-box.visible{opacity:1;transform:scale(1)}
.avatar-box img{width:88%;height:88%;object-fit:contain;content:url('../img/avatar.png');z-index:2}
.avatar-box:not(.glitching) img{animation:breathe 6s infinite}
.avatar-box.glitching{animation:glitchMove 0.3s forwards!important}
.avatar-box.glitching::before,.avatar-box.glitching::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid transparent;z-index:-1}
.avatar-box.glitching::before{border-color:#ff00c1;animation:glitchRed 0.1s infinite linear}
.avatar-box.glitching::after{border-color:#00fff3;animation:glitchBlue 0.1s infinite linear}
/* ==================== TYPOGRAPHY (НАСТРОЙКИ ТЕКСТА) ==================== */
h1 {
    font-weight: 700;
    font-size: 24px;
    color: #cecece;
    text-transform: uppercase;
    letter-spacing: .85px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 10px rgba(255,255,255,0.23);
    display: block;
    width: 260px;
    /* Уменьшаем до 6px, чтобы компенсировать внутренний отступ шрифта */
    margin: 0 auto 6px auto; 
    text-align: center;
    line-height: 1.1; /* Немного прижали строку для кучности */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    white-space: nowrap !important;
    opacity: 1; /* Установите 1, чтобы видеть текст сразу, или 0 для анимации */
    transform: translateY(0);
}

.subtitle {
    font-weight: 500;
    font-size: 11px;
    color: #b1b1b1;
    text-transform: uppercase;
    width: 260px;
    margin: 0 auto 25px auto;
    padding-top: 10px; /* Расстояние от линии до подзаголовка */
    position: relative;
    display: flex !important;
    /* ИСПРАВЛЕНО: теперь текст будет строго по центру */
    justify-content: center; 
    text-align: center;
    letter-spacing: 0.3px;
    text-indent: 1.5px;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 5px rgba(255,255,255,0.17);
    opacity: 1;
    transform: translateY(0);
}

/* ЛИНИЯ — ТЕПЕРЬ ТОНКАЯ И ЧЕТКАЯ */
.subtitle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Уменьшено до 1px для четкости */
    height: 1px; 
    background: linear-gradient(90deg, transparent 0%, rgba(190,190,190,0.7) 50%, transparent 100%);
    /* Уменьшено свечение, чтобы линия не казалась «жирной» */
    box-shadow: 0 0 4px rgba(255,255,255,0.15);
}.card.visible-active h1{animation:fadeUp 1.2s forwards 0.5s}
.card.visible-active .subtitle{animation:fadeUp 1.2s forwards 0.8s}
/* ==================== BUTTONS ==================== */
.btn-stack{display:flex;flex-direction:column;gap:13px;max-width:260px;margin:0 auto}
.btn{display:flex;align-items:center;justify-content:center;height:46px;padding:0 20px;border-radius:16px;text-decoration:none;color:#e0e0e0!important;background:var(--btn);border:1px solid var(--border);box-shadow:var(--shadow);cursor:pointer;width:100%;transition:transform 0.3s,filter 0.3s,box-shadow 0.3s,border-color 0.3s;font-size:15px;font-weight:500;position:relative;overflow:hidden;text-shadow:0 1px 2px rgba(0,0,0,0.8);opacity:0;transform:translateY(15px)}
.card.visible-active .btn{animation:slideIn 0.8s forwards}
.card.visible-active .btn:nth-child(1){animation-delay:1.0s}
.card.visible-active .btn:nth-child(2){animation-delay:1.15s}
.card.visible-active .btn:nth-child(3){animation-delay:1.3s}
.card.visible-active .btn:nth-child(4){animation-delay:1.45s}
.card.visible-active .btn:nth-child(5){animation-delay:1.6s}
.card.visible-active .btn:nth-child(6){animation-delay:1.75s}
.btn:hover,.btn:active{filter:brightness(1.2);transform:translateY(-3px) scale(1.04)!important;box-shadow:0 10px 20px rgba(0,0,0,0.4);border-color:rgba(255,255,255,0.2)}
.btn::after{content:'';position:absolute;inset:1px;border-radius:15px;background:linear-gradient(180deg,rgba(255,255,255,0.05)0%,rgba(0,0,0,0.1)100%);pointer-events:none}
.btn-shimmer::before{content:"";position:absolute;top:0;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.09)50%,transparent 100%);z-index:1;pointer-events:none;animation-duration:6s!important;animation-iteration-count:infinite}
.shimmer-start::before{left:-100%;animation-name:shimmer}
.shimmer-end::before{left:-100%;animation-name:shimmer;animation-delay:3s!important}
@keyframes shimmer{0%{transform:translateX(0)}50%{transform:translateX(200%)}100%{transform:translateX(200%)}}
.btn i{margin-right:12px;font-size:18px;width:20px;text-align:center;color:#e0e0e0;text-shadow:0 1px 2px rgba(0,0,0,0.5)}
.fa-telegram{color:#3390ec!important}
.fa-vk{color:#0076fe!important}
.fa-phone{color:#00b956!important}
.avito-logo{width:18px;height:auto;margin-right:12px;filter:drop-shadow(0 1px 1px rgba(0,0,0,0.5));vertical-align:middle}
.gold-star{color:#fc0!important}
.mc-logo{width:42px;height:auto;margin-right:10px;border-radius:4px;filter:drop-shadow(0 1px 1px rgba(0,0,0,0.5))}
/* ==================== LOCATION ==================== */
.location{margin:30px auto 0;width:fit-content;color:#9d9d9d;font-size:14px;font-weight:500;display:flex;align-items:flex-end;gap:11px;text-decoration:none;user-select:none;opacity:0;transform:translateY(20px);text-shadow:0 1px 2px rgba(0,0,0,0.8)}
.card.visible-active .location{animation:fadeUp 0.8s forwards 2.0s}
.location:active{filter:brightness(1.3)!important;transform:scale(0.95)!important}
.location i{animation:jump 4s infinite;position:relative;color:#9d9d9d;top:-3px;filter:drop-shadow(0 2px 2px rgba(0,0,0,0.1))}
/* ==================== BUILD INFO ==================== */
.build-info{position:absolute;bottom:12px;right:20px;font-family:'Courier New',monospace;font-size:9px;color:var(--text);letter-spacing:1px;opacity:0;transition:opacity 0.4s;cursor:pointer}
/* ==================== START SCREEN ==================== */
.start-screen{position:fixed;inset:0;background:var(--bg);display:flex;justify-content:center;align-items:center;z-index:9999;transition:opacity 0.5s;-webkit-tap-highlight-color:transparent}
.avatar-start{width:120px;height:120px;border-radius:50%;border:2px solid var(--border);display:flex;justify-content:center;align-items:center;box-shadow:0 0 25px rgba(255,255,255,0.25);animation:smoothLife 6s infinite}
.avatar-start-inner{width:100%;height:100%;display:flex;justify-content:center;align-items:center;position:relative;animation:shakeSync 6s infinite;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.avatar-start-inner::before,.avatar-start-inner::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid transparent;opacity:0;z-index:-1}
.avatar-start-inner::before{border-color:#ff00c1;animation:rgbRedSync 6s infinite linear}
.avatar-start-inner::after{border-color:#00fff3;animation:rgbBlueSync 6s infinite linear}
.avatar-start img{width:88%;height:88%;object-fit:contain;content:url('../img/avatar.png');-webkit-transform:translateZ(0);transform:translateZ(0);position:relative;z-index:2}
/* ==================== VOLUME CONTROL ==================== */
.wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:100vh}
.volume-control-outer{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;max-width:160px;margin:25px auto 0;padding:5px;opacity:0;transform:translateY(10px);transition:opacity 0.8s ease 2.5s,transform 0.8s ease 2.5s;flex-shrink:0}
.card.visible-active+.volume-control-outer{opacity:0.5;transform:translateY(0)}
.volume-control-outer:hover{opacity:1}
.volume-icon{color:#fff;font-size:14px;cursor:pointer;display:flex;align-items:center;width:20px;justify-content:center;transition:transform 0.2s}
.volume-icon:active{transform:scale(0.8)}
#bg-volume-slider{-webkit-appearance:none;width:100%;height:2px;background:rgba(255,255,255,0.15);border-radius:2px;outline:none;cursor:pointer}
#bg-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;background:#fff;border-radius:50%;box-shadow:0 0 10px rgba(255,255,255,0.4);transition:transform 0.2s}
#bg-volume-slider::-webkit-slider-thumb:active{transform:scale(1.4)}
#bg-volume-slider::-moz-range-thumb{width:10px;height:10px;background:#fff;border:none;border-radius:50%;cursor:pointer}
/* ==================== MATRIX CANVAS ==================== */
#matrixCanvas{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99999;display:none;background:#000;pointer-events:none}
/* ==================== ANIMATIONS  ==================== */
@keyframes appear{to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}
@keyframes fadeUp{to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes slideIn{to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes glitchMove{0%{transform:translate(0)}15%{transform:translate(-4px,2px) scale(1.05);filter:brightness(1.3)}30%{transform:translate(4px,-2px) scale(0.97)}45%{transform:translate(-2px,-3px) scale(1.02)}100%{transform:translate(0) scale(1)}}
@keyframes glitchRed{0%,100%{transform:translate(0);opacity:1}25%{transform:translate(-10px,4px);opacity:0.8}50%{transform:translate(-5px,-2px);opacity:0.9}75%{transform:translate(-8px,2px);opacity:0.8}}
@keyframes glitchBlue{0%,100%{transform:translate(0);opacity:1}25%{transform:translate(10px,-4px);opacity:0.8}50%{transform:translate(5px,2px);opacity:0.9}75%{transform:translate(8px,-2px);opacity:0.8}}
@keyframes smoothLife{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-12px,0)}}
@keyframes shakeSync{0%,97%{transform:translate(0)}97.5%{transform:translate(-4px,2px);filter:brightness(1.3)}98.5%{transform:translate(4px,-2px)}99.5%{transform:translate(-2px,1px)}100%{transform:translate(0)}}
@keyframes rgbRedSync{0%,97%{opacity:0}97.5%{opacity:1;transform:translate(-10px,4px)}98.5%{opacity:1;transform:translate(-5px,-2px)}99.5%{opacity:1;transform:translate(-8px,2px)}100%{opacity:0;transform:translate(0)}}
@keyframes rgbBlueSync{0%,97%{opacity:0}97.5%{opacity:1;transform:translate(10px,-4px)}98.5%{opacity:1;transform:translate(5px,2px)}99.5%{opacity:1;transform:translate(8px,-2px)}100%{opacity:0;transform:translate(0)}}
@keyframes textSlice{0%,100%{transform:translate(0)}25%{transform:translate(-3px,1px);color:var(--red);text-shadow:2px 0 var(--cyan)}75%{transform:translate(3px,-1px);color:var(--cyan);text-shadow:-2px 0 var(--red)}}
.text-glitch-active span{display:inline-block;animation:textSlice 0.15s infinite!important}
/* ==================== HOVER EFFECTS ==================== */
.btn,.location,.avatar-box,.avatar-start{transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1),filter 0.3s,box-shadow 0.4s,border-color 0.3s!important;will-change:transform,filter;transform:translate3d(0,0,0) scale(1)}
.btn:hover,.location:hover,.avatar-box:hover,.avatar-start:hover{filter:brightness(1.15) drop-shadow(0 0 10px rgba(255,255,255,0.15))!important}
.btn:hover,.location:hover{transform:translate3d(0,0,0) scale(1.06)!important;box-shadow:0 0 25px rgba(0,0,0,0.4),0 10px 20px rgba(0,0,0,0.3)!important;border-color:rgba(255,255,255,0.35)!important}