@font-face {
    font-family: "MyFont";
    src: url("../fonts/CATelecopy.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

body {
    margin: 0;
    height: 100vh;
    background: #000;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tv-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(0,0,0,0.7), #000 80%);
    z-index: 1;
}

.tv-frame {
    position: absolute;
    inset: 0;
    background: url('../img/tv-overlay.png') no-repeat center;
    background-size: cover;
    z-index: 4;
    pointer-events: none;
    filter: drop-shadow(0px 0px 30px rgba(26, 0, 37, 0.8));
}

.crt {
    position: absolute;
    inset: 0;
    background: #c8c8d0;
    z-index: 2;
    overflow: hidden;
    filter: brightness(0);
    opacity: 0;

    animation: tvPowerOn 1.8s ease-out forwards;
}


@keyframes tvPowerOn {
    0%   { opacity: 0; transform: scaleY(0); filter: brightness(0); }
    20%  { opacity: 1; transform: scaleY(0.07); filter: brightness(8); }
    40%  { transform: scaleY(0.25); filter: brightness(1.5); }
    80%  { transform: scaleY(1.02); filter: brightness(1); }
    100% { opacity: 1; transform: scaleY(1); filter: brightness(1); }
}

.crt::before {
    content: "";
    position: absolute;
    inset: 0;
    background: white;
    opacity: 0;
    animation: tvFlash 1.2s ease-out forwards;
}

@keyframes tvFlash {
    0% { opacity: 0; }
    10% { opacity: 1; }
    25% { opacity: 0.3; }
    50% { opacity: 0; }
    100% { opacity: 0; }
}

.crt-static {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.02) 0px,
        rgba(255,255,255,0.02) 1px,
        rgba(0,0,0,0.05) 2px,
        rgba(0,0,0,0.05) 3px
    );
    mix-blend-mode: overlay;
    animation: staticFlicker 0.1s infinite;
    pointer-events: none;
}

@keyframes staticFlicker {
    0% { opacity: 0.05; }
    50% { opacity: 0.09; }
    100% { opacity: 0.03; }
}

.crt-grid {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0,0,0,0.25) 0,
        rgba(0,0,0,0.25) 1px,
        transparent 1px,
        transparent 3px
    );
    opacity: 0.8;
    pointer-events: none;
}

.logo {
    margin-top: 17%;
    text-align: center;
    font-family: 'MyFont';
    font-size: 145px;
    letter-spacing: 10px;
    color: #000;
    filter: drop-shadow(6px 6px 0px #505050);

    animation:
        logoPop 1.1s ease-out forwards,
        logoGlow 3s ease-in-out infinite,
        logoFloat 6s ease-in-out infinite;
}

@keyframes logoPop {
    0% { opacity: 0; transform: scale(0.7) translateY(40px); filter: blur(8px); }
    70% { opacity: 1; transform: scale(1.07) translateY(0); filter: blur(0); }
    100% { transform: scale(1); }
}

@keyframes logoGlow {
    0% { filter: drop-shadow(6px 6px 0px #505050) brightness(1); }
    50% { filter: drop-shadow(6px 6px 3px #777) brightness(1.13); }
    100% { filter: drop-shadow(6px 6px 0px #505050) brightness(1); }
}

@keyframes logoFloat {
    0% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}

.press-start {
    position: absolute;
    font-family: 'MyFont';
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 38px;
    color: #000;
    cursor: pointer;

    opacity: 0;
    animation: pressFade 1.8s ease-out 1s forwards, pressBlink 1.25s infinite 2s;
}

@keyframes pressFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes pressBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

.copyright {
    position: absolute;
    bottom: 7%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'MyFont';
    font-size: 24px;
    opacity: 0;
    animation: fadeIn 2s ease 2.2s forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 0.6; }
}

@keyframes tvPowerOff {
    0% { transform: scaleY(1) scaleX(1); opacity: 1; filter: brightness(1); }
    30% { filter: brightness(0.7); }
    55% { transform: scaleY(0.25) scaleX(1); }
    75% { transform: scaleY(0.04) scaleX(0.55); filter: brightness(2); }
    84% { transform: scaleY(0.009) scaleX(0.2); opacity: 1; }
    93% { transform: scaleY(0.001) scaleX(0.07); opacity: 1; }
    100% { transform: scaleY(0) scaleX(0); opacity: 0; }
}

.crt-off {
    animation: tvPowerOff 1.3s ease-in forwards !important;
}