/* =========================
   GLOBAL DESIGN
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Orbitron',sans-serif;
}

body{
background:radial-gradient(circle at top,#2a0d3a,#140020,#000);
color:#fff;
overflow-x:hidden;
}

/* NAVBAR */

nav{
background:linear-gradient(90deg,#2c0f3a,#140020);
border-bottom:2px solid #d4af37;
display:flex;
justify-content:center;
gap:30px;
padding:18px;
}

nav a{
color:#f5d97a;
text-decoration:none;
font-weight:600;
transition:0.3s;
}

nav a:hover{
color:#fff;
text-shadow:0 0 10px #d4af37;
}

/* =========================
   TICKET SYSTEM
========================= */

.ticket-wrapper{
display:flex;
justify-content:center;
align-items:center;
padding:80px 20px;
min-height:100vh;
}

/* Holzrahmen */

.ticket-frame{

width:1200px;
height:700px;

background:url('/images/ark-ticket-frame.png') center no-repeat;
background-size:contain;

position:relative;

}

/* Formular exakt im Brett */

.ticket-form{

position:absolute;

top:208px;     /* etwas tiefer */
left:238px;    /* minimal weiter links */

width:730px;   /* breiter */

display:flex;
flex-direction:column;

}

/* Inputs */

.ticket-form input,
.ticket-form textarea{

background:rgba(15,0,35,0.95);

border:4px solid #a000ff;
border-radius:12px;

padding:14px;        /* größer */
margin-bottom:18px;

color:#fff;
}

.ticket-form textarea{
height:90px;
margin-top:-5px;
resize:none;
}

/* Upload */

.file-input{
padding:10px;
margin-top:-8px;
}

/* Button */

.ticket-form button{

position:absolute;

bottom:-40px;
left:17%;

transform:translateX(-50%);

width:235px;
height:52px;

background:transparent;
border:6px solid gelb;
border-radius:12px;
color:transparent;

cursor:pointer;

}

.ticket-form button:hover{

box-shadow:0 0 15px #f5d97a;
transform:translateX(-50%) scale(1.05);

}

/* Meldung */

#ticketMsg{
position:absolute;
bottom:-45px;
left:60%;
transform:translateX(-50%);
font-size:16px;
font-weight:bold;
}

/* Mobile */

@media(max-width:1200px){

.ticket-frame{
transform:scale(0.8);
transform-origin:top center;
}

}

@media(max-width:800px){

.ticket-frame{
transform:scale(0.65);
}

}
/* =========================
   ARK TICKET POPUP
========================= */

.ticket-popup{

position:fixed;

top:43%;
left:38%;

transform:translate(-50%, -50%) scale(.85);

opacity:0;

pointer-events:none;

transition:transform .35s ease, opacity .35s ease;


width:380px;

background:linear-gradient(
180deg,
rgba(25,0,50,0.95),
rgba(10,0,25,0.95)
);

border:2px solid #a000ff;
border-radius:14px;

padding:28px;

text-align:center;

color:#00ffe7;

box-shadow:
0 0 25px rgba(160,0,255,.6),
0 0 80px rgba(0,255,231,.25);

opacity:0;

transition:all .35s ease;

z-index:999999;

pointer-events:auto;

}

.ticket-popup.show{

opacity:1;

transform:translate(-50%, -50%) scale(1);

pointer-events:auto;
}
/* =========================
   ARK TICKET GLOW
========================= */

@keyframes arkGlow{

0%{box-shadow:0 0 15px #a000ff;}
50%{box-shadow:0 0 35px #00ffe7;}
100%{box-shadow:0 0 15px #a000ff;}

}

.ticket-popup{

position:fixed;

top:50%;
left:50%;

transform:translate(-50%, -50%);

opacity:0;

z-index:999999;

transition:opacity .3s ease;
backdrop-filter: blur(6px);
}

.ticket-popup.show{
opacity:1;
}

@keyframes arkPulse{

0%{box-shadow:0 0 20px #a000ff;}
50%{box-shadow:0 0 50px #00ffe7;}
100%{box-shadow:0 0 20px #a000ff;}

}

.ticket-popup.show{
animation:arkPulse 2.5s infinite;
}

/* COPY BUTTON */

.ticket-copy{

margin-top:15px;

background:#00ffe7;
color:#000;

border:none;
padding:8px 20px;

border-radius:6px;

font-size:14px;

cursor:pointer;

transition:.2s;

}

.ticket-copy:hover{

transform:scale(1.1);
background:#00fff0;

}
/* ARK Ticket Scan Effekt */

.ticket-id-container{

position:relative;
display:inline-block;

font-weight:700;
letter-spacing:2px;

overflow:hidden;   /* wichtig */

max-width:100%;

}

.ticket-scan{

position:absolute;

top:0;
left:-60%;

width:60%;
height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(0,255,255,0.9),
transparent
);

animation:arkScan 1.8s ease forwards;

pointer-events:none;

}

@keyframes arkScan{

0%{left:-60%;}
100%{left:100%;}

}
/* ARK TEK Glow für Ticket ID */

#ticketTyped{

color:#00ffe7;

text-shadow:
0 0 5px #00ffe7,
0 0 10px #00ffe7,
0 0 20px #00ffe7,
0 0 40px rgba(0,255,231,0.6);

animation:arkTekGlow 2.5s infinite;

}
@keyframes arkTekGlow{

0%{
text-shadow:
0 0 5px #00ffe7,
0 0 10px #00ffe7,
0 0 20px #00ffe7;
}

50%{
text-shadow:
0 0 10px #00ffe7,
0 0 25px #00ffe7,
0 0 50px rgba(0,255,231,0.8);
}

100%{
text-shadow:
0 0 5px #00ffe7,
0 0 10px #00ffe7,
0 0 20px #00ffe7;
}

}
/* Hologram Scan Effekt */
.ticket-popup{

position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);

overflow:hidden;   /* wichtig */

}
.ticket-popup::before{

content:"";

position:absolute;

top:0;
left:-60%;

width:60%;
height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(0,255,255,0.35),
transparent
);

animation:arkPopupScan 1.2s ease;

pointer-events:none;

}

@keyframes arkPopupScan{

0%{left:-60%;}
100%{left:120%;}

}