body{
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0;
    min-height: 100vh;
    background: #000;
    color: white;
}

body::before{
    content:"";

    position:fixed;
    inset:0;

    background:
        rgba(0,0,0,0.28);

    pointer-events:none;

    z-index:1;
}

main,
section{
    position: relative;
    z-index: 1;
}

#matrix-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: #000;
}
/* ------------------------ HEADER ------------------------ */
header{
    flex: 0 0 100px;
    z-index: 50;
}

.construct-hero{
    width:100%;

    height:100px;

    display:flex;
    justify-content:center;
    align-items:center;

    padding-top: 20px;
}

.construct-heading{
    position: relative;

    width: 100%;
    max-width: 1200px;
    text-align:center;
}

.user-menu{
    position:absolute;
    top:10px;
    right:15px;
    z-index:100;
}

.user-menu-toggle{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    background:var(--bg-glass);
    border:1px solid var(--border-light);
    border-radius:50%;

    color:var(--accent-primary);

    font-size:1rem;
    cursor:pointer;

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    box-shadow:
        0 0 20px var(--shadow-main),
        inset 0 0 0 1px var(--border-subtle);

    transition:
        box-shadow .25s ease,
        transform .25s ease,
        border-color .25s ease;
}

.user-menu-toggle:hover{
    transform:translateY(-1px);
    border-color:var(--accent-primary);
    box-shadow:0 0 18px var(--glow-primary);
    color:var(--text-main);
}

.user-menu-toggle i{
    font-size:.9rem;
    line-height:1;
}

.user-menu-panel{
    display:flex;
    flex-direction:column;
    gap:10px;
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    z-index: 101;

    min-width:175px;
    padding:14px;

    background:rgba(0,0,0,.82);
    border:1px solid var(--border-light);
    border-radius:16px;

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    box-shadow:
        0 0 26px var(--shadow-main),
        inset 0 0 0 1px var(--border-subtle);

    text-align:left;

    opacity:0;
    pointer-events:none;
    transform:translateY(-6px);

    transition:
        opacity .2s ease,
        transform .2s ease;
}

.user-menu.open .user-menu-panel{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
}

.user-menu-panel p{
    margin:0 0 4px;

    color:var(--accent-primary);
    font-size:.85rem;
    font-weight:700;
    letter-spacing:.04em;
}

.user-menu-panel a{
    display: block;
    color:var(--text-muted);
    text-decoration:none;
    font-size:.88rem;
    letter-spacing:.04em;
    text-align: left;

    transition:
        color .25s ease,
        padding-left .25s ease;
}

.user-menu-panel a:hover{
    color:var(--accent-primary);
    padding-left:4px;
}

.user-menu-panel a.logout:hover{
    color: red;
}

.construct-menu{
    position:absolute;
    top:10px;
    left:15px;
    z-index:5;
}

.construct-menu-toggle{
    width:36px;
    height:36px;

    display:grid;
    place-items:center;

    background:var(--bg-glass);
    border:1px solid var(--border-light);
    border-radius:50%;

    color:var(--accent-primary);

    font-size:1rem;
    cursor:pointer;

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    box-shadow:
        0 0 20px var(--shadow-main),
        inset 0 0 0 1px var(--border-subtle);

    transition:
        box-shadow .25s ease,
        transform .25s ease,
        border-color .25s ease;
}

.construct-menu-toggle:hover{
    transform:translateY(-1px);

    border-color:var(--accent-primary);

    box-shadow:0 0 18px var(--glow-primary);
}

.construct-menu-panel{
    position:absolute;
    top:calc(100% + 10px);
    left:0;

    min-width:190px;
    padding:14px;

    display:flex;
    flex-direction:column;
    gap:10px;

    background:rgba(0,0,0,.82);
    border:1px solid var(--border-light);
    border-radius:16px;

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    box-shadow:
        0 0 26px var(--shadow-main),
        inset 0 0 0 1px var(--border-subtle);

    opacity:0;
    pointer-events:none;
    transform:translateY(-6px);

    transition:
        opacity .2s ease,
        transform .2s ease;
}

.construct-menu.open .construct-menu-panel{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0) scale(1);
}

.construct-menu-panel a{
    color:var(--text-muted);
    text-decoration:none;
    font-size:.88rem;
    letter-spacing:.04em;
    text-align: left;

    transition:
        color .25s ease,
        padding-left .25s ease;
}

.construct-menu-panel a:hover{
    color:var(--accent-primary);
    padding-left:4px;
}

.construct-heading h1{
    margin:0;

    color:var(--text-main);

    font-size:2.4rem;
    font-weight:700;

    letter-spacing:0.12em;
    text-transform:uppercase;

    text-shadow:
        0 0 18px rgba(64,255,89,0.15);
}

.construct-heading p{
    display:inline-block;

    margin-top:6px;
    padding:4px 12px;

    color:var(--text-muted);
    background:rgba(0,0,0,0.35);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:999px;
    text-shadow:
        0 0 8px rgba(0,0,0,0.95),
        0 0 16px rgba(0,0,0,0.85),
        0 0 10px rgba(64,255,89,0.75);

    font-size:0.9rem;
    letter-spacing:0.18em;
    text-transform:uppercase;



    backdrop-filter:blur(6px);

    color:rgba(255,255,255,0.78);
}

.menu-label{
    margin:0 0 4px;

    color:var(--accent-primary);

    font-size:.7rem;
    font-weight:700;

    letter-spacing:.16em;
    text-transform:uppercase;
}



/* FORM STYLES */
.auth-page{
    width:calc(100% - 32px);
    min-height:calc(100vh - 160px);
    max-width:900px;
    margin:0 auto;

    display:flex;
    justify-content:center;
    align-items:center;
    padding:60px 0;
}

.auth-card{
    width:100%;
    max-width:420px;
    padding:32px;

    background:var(--bg-glass);
    border:1px solid var(--border-light);
    border-radius:22px;

    backdrop-filter:blur(12px);

    box-shadow:
        0 0 30px var(--shadow-main),
        inset 0 0 0 1px var(--border-subtle);

    text-align:center;
}

.auth-eyebrow{
    margin:0 0 8px;
    color:var(--accent-primary);
    font-size:0.8rem;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
}

.auth-card h1{
    margin:0 0 10px;
    color:var(--text-main);
    font-size:2rem;
}

.auth-subtext{
    margin:0 0 28px;
    color:var(--text-muted);
    line-height:1.5;
}

.auth-form{
    display:flex;
    flex-direction:column;
    gap:12px;
    text-align:left;
}

.auth-form label{
    color:var(--text-main);
    font-size:0.9rem;
    font-weight:600;
}

.auth-form input{
    height:46px;
    padding:0 14px;

    background:var(--bg-input);
    border:1px solid var(--border-light);
    border-radius:12px;

    color:var(--text-main);
    outline:none;
}

.auth-form input:focus{
    border-color:var(--accent-primary);
    box-shadow:0 0 10px var(--glow-primary);
}

.auth-form button{
    height:48px;
    margin-top:12px;

    border:1px solid var(--accent-primary);
    border-radius:14px;

    background:rgba(64,255,89,0.08);
    color:var(--text-main);

    font-size:1rem;
    font-weight:700;

    cursor:pointer;
    box-shadow:0 0 12px var(--glow-primary);
    transition:0.25s ease;
}

.auth-form button:hover{
    box-shadow:0 0 28px var(--glow-primary);
}

.auth-link{
    margin:22px 0 0;
    color:var(--text-muted);
}

.auth-link a{
    color:var(--accent-primary);
    text-decoration:none;
}

.auth-link a:hover{
    text-decoration:underline;
}

.password-field{
    position:relative;
}

.password-field input{
    width:100%;
    padding-right:82px;
}

.password-field{
    position:relative;
}

.password-field input{
    width:100%;
    padding-right:76px;
}

.password-field .toggle-password{
    position:absolute;
    top:50%;
    right:12px;
    transform:translateY(-100%);

    width:48px;
    height:26px;
    padding:0;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(64,255,89,0.45);
    border-radius:999px;

    background:rgba(64,255,89,0.08);
    box-shadow:none;

    color:var(--accent-primary);
    font-size:0.75rem;
    font-weight:700;
    line-height:1;

    cursor:pointer;
}

.password-field .toggle-password:hover{
    background:rgba(64,255,89,0.14);
    box-shadow:0 0 8px var(--glow-primary);
    text-decoration:none;
}

.form-message{
    margin:0 0 20px;
    padding:12px 14px;

    border-radius:12px;

    font-size:0.9rem;
    line-height:1.5;
    text-align:center;
}

.form-message.error{
    background:rgba(255,70,70,0.08);
    border:1px solid rgba(255,70,70,0.25);
    color:#ff9c9c;
    text-align:left;
    line-height:1.7;
}

.form-message.success{
    background:rgba(64,255,89,0.08);
    border:1px solid rgba(64,255,89,0.25);
    color:#9cffb0;
}

.auth-card form{
    width:100%;
    max-width:340px;
    margin:24px auto 0;
}

.form-group{
    margin-bottom:18px;
    text-align:left;
}

.form-group label{
    display:block;
    margin-bottom:8px;

    color:var(--accent-primary);
    font-size:0.8rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
}

.form-group input{
    width:100%;
    padding:13px 14px;

    color:var(--text-main);
    background:rgba(0,0,0,0.55);

    border:1px solid rgba(64,255,89,0.28);
    border-radius:12px;

    outline:none;

    box-shadow:
        inset 0 0 14px rgba(0,0,0,0.6),
        0 0 0 rgba(64,255,89,0);

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.form-group input:focus{
    border-color:var(--accent-primary);

    box-shadow:
        inset 0 0 14px rgba(0,0,0,0.6),
        0 0 18px rgba(64,255,89,0.28);
}

.submit-btn{
    width:100%;
    margin-top:4px;
    padding:13px 18px;

    color:#061008;
    background:var(--accent-primary);

    border:1px solid var(--accent-primary);
    border-radius:999px;

    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;

    cursor:pointer;

    box-shadow:0 0 18px rgba(64,255,89,0.28);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.submit-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 0 26px rgba(64,255,89,0.45);
}

.form-links{
    margin-top:18px;
    text-align:center;
}

.forgot-password-link{
    color:var(--accent-primary);
    font-size:0.9rem;
    text-decoration:none;
}

.forgot-password-link:hover{
    text-shadow:0 0 12px rgba(64,255,89,0.8);
}

.auth-subtext{
    max-width:360px;
    margin:14px auto 0;

    color:var(--text-muted);
    line-height:1.6;
}

/* USER MENU NOTIFICATION PREVIEW */
.user-menu-toggle{
    position:relative;
}

.user-notification-count{
    position:absolute;
    top:-5px;
    right:-5px;

    min-width:18px;
    height:18px;
    padding:0 5px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#050805;
    background:var(--accent-primary);

    border-radius:999px;

    font-size:0.7rem;
    font-weight:800;
    line-height:1;

    box-shadow:0 0 12px var(--glow-primary);
}

.user-notification-preview{
    padding:10px 0;
    margin:2px 0;

    border-top:1px solid rgba(255,255,255,0.08);
    border-bottom:1px solid rgba(255,255,255,0.08);
}

.user-notification-preview .menu-label{
    margin:0 0 6px;

    color:var(--accent-primary);

    font-size:.7rem;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.user-notification-item{
    padding:7px 0;

    color:var(--text-muted);
    font-size:0.78rem;
    line-height:1.35;
}

.user-notification-item.unread{
    color:var(--accent-primary);
    text-shadow:0 0 8px var(--glow-primary);
}

.user-notification-empty{
    padding:4px 0 2px;

    color:var(--text-muted);
    font-size:0.78rem;
    line-height:1.35;
}

.view-notifications-link{
    margin-top:6px;

    color:var(--accent-primary) !important;
    font-size:0.78rem !important;
}

/* ------------------------ CONTENT ------------------------ */
#content{
    position: relative;
    flex: 1 0 auto;
    z-index: 2;
}

/* digital transition */
.digital-loading {
    position: relative;
    overflow: hidden;
}

.digital-loading::before {
    content: "SYNCING RELEASE DATA...";
    position: absolute;
    inset: 0;
    z-index: 10;

    display: grid;
    place-items: center;

    background: rgba(0,0,0,0.72);
    color: var(--accent-primary);

    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;

    backdrop-filter: blur(8px);

    animation: digitalFlicker 0.9s infinite steps(2);
}

@keyframes digitalFlicker {
    0%, 100% {
        opacity: 1;
        text-shadow: 0 0 8px var(--glow-primary);
    }

    45% {
        opacity: 0.65;
        transform: translateX(-1px);
    }

    55% {
        opacity: 0.9;
        transform: translateX(1px);
    }
}

/* digital transition part 2 */
.movie-detail-card {
    animation: detailFadeIn 0.22s ease;
}

@keyframes detailFadeIn {

    0% {
        opacity: 0;
        transform: translateY(6px) scale(0.985);
        filter: blur(3px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.movie-detail-card.glitch-transition {
    animation: detailGlitch 0.22s ease;
}

@keyframes detailGlitch {

    0% {
        opacity: 0.4;
        transform: translateX(-2px);
        filter: hue-rotate(20deg);
    }

    20% {
        opacity: 0.75;
        transform: translateX(2px);
    }

    40% {
        opacity: 0.55;
        transform: translateX(-1px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        filter: none;
    }
}

/* digital transition part 3 */
.digital-loader{
    grid-column:1 / -1;
    width:100%;
    max-width:none;
    min-height:260px;

    display:flex;
    justify-content:center;
    align-items:center;

    border:1px solid var(--border-light);
    border-radius:20px;

    background:var(--bg-glass);
    backdrop-filter:blur(12px);

    box-shadow:
        0 0 30px var(--shadow-main),
        inset 0 0 0 1px var(--border-subtle);

    color:var(--accent-primary);
    font-size:1.1rem;
    font-weight:600;
    text-shadow:0 0 12px var(--glow-primary);

    position:relative;
    overflow:hidden;
}

.digital-loader::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(64,255,89,0.08),
            transparent
        );

    transform:translateX(-100%);
    animation:digitalSweep 1.5s linear infinite;
}

@keyframes digitalSweep{

    100%{
        transform:translateX(100%);
    }

}

#movieResults.loading-full{
    grid-column:1 / -1;
    max-width:none;
}

#movieResults.loading-full .digital-loader{
    width:100%;
    min-height:260px;
}

/* RT Icon */
.movie-title-row{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:14px;
}

.movie-title-row h2{
    margin:0;
}

.movie-meta{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;

    font-size:0.78rem;
    font-weight:700;
    color:var(--text-main);
}

.rt-score{
    display:inline-flex;
    align-items:center;
    gap:2px;
}

.rt-score img{
    width:32px;
    height:32px;
    object-fit:contain;
    display:block;
}

/* more cast */
.toggle-cast{
    display:inline-flex;
    align-items:center;

    margin-left:6px;
    padding:0;

    border:none;
    background:transparent;

    color:var(--accent-primary);
    font:inherit;
    font-size:0.9em;
    font-weight:700;

    cursor:pointer;
    text-transform:lowercase;

    text-shadow:0 0 8px var(--glow-primary);
}

.toggle-cast:hover{
    color:var(--text-main);
    text-shadow:0 0 12px var(--glow-primary);
}

@media(max-width:950px){
    .movie-title-row{
        flex-direction:column;
        gap:6px;
        text-align:center;
    }

    .movie-meta{
        justify-content:center;
        flex-wrap:wrap;
    }
}

.poster-wrap{
    position:relative;
    width:fit-content;
    height:fit-content;
    margin:0 auto 7px;
}

.poster-wrap img,
.poster-wrap .poster-link,
.poster-wrap .no-poster{
    display:block;
}

.favorite-movie{
    position:absolute;
    left:4px;
    bottom:-28px;

    border:none;
    background:none;

    color:#000;

    font-size:1.6rem;
    line-height:1;

    cursor:pointer;

    -webkit-text-stroke:1px rgba(64,255,89,0.45);

    text-shadow:
        0 0 3px rgba(255,255,255,0.15),
        0 0 10px rgba(0,0,0,0.7);

    transition:0.25s ease;
}

.favorite-movie:hover{
    transform:scale(1.12);
}

.favorite-movie.active{
    color:var(--accent-primary);

    text-shadow:
        0 0 8px var(--glow-primary),
        0 0 18px var(--glow-primary);
}

.favorite-movie:not(.active):not(:hover){
    animation:heartIdlePulse 1.8s ease-in-out infinite;
}

.poster-link:hover{
    cursor: pointer;
}

@keyframes heartIdlePulse{

    0%, 100%{
        transform:scale(1);

        -webkit-text-stroke:1px rgba(64,255,89,0.35);

        text-shadow:
            0 0 4px rgba(64,255,89,0.12),
            0 0 10px rgba(0,0,0,0.7);
    }

    50%{
        transform:scale(1.14);

        -webkit-text-stroke:1px rgba(64,255,89,0.8);

        text-shadow:
            0 0 8px rgba(64,255,89,0.45),
            0 0 18px rgba(64,255,89,0.25);
    }

}

/* login for favorites modal */
.auth-modal{
    position:fixed;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:24px;

    background:rgba(0,0,0,0.72);
    backdrop-filter:blur(8px);

    z-index:9999;
}

.auth-modal-card{
    width:100%;
    max-width:420px;

    padding:32px 28px;

    background:var(--bg-glass);

    border:1px solid var(--border-light);
    border-radius:24px;

    text-align:center;

    backdrop-filter:blur(14px);

    box-shadow:
        0 0 40px var(--shadow-main),
        inset 0 0 0 1px var(--border-subtle);
}

.auth-modal-card h3{
    margin:0 0 14px;

    color:var(--text-main);
    font-size:1.5rem;
}

.auth-modal-card p{
    margin:0 0 24px;

    color:var(--text-muted);
    line-height:1.6;
}

.auth-modal-actions{
    display:flex;
    gap:12px;

    margin-bottom:18px;
}

.auth-btn{
    flex:1;

    padding:12px 16px;

    border:1px solid var(--border-light);
    border-radius:14px;

    background:var(--bg-input);
    color:var(--text-main);

    text-decoration:none;
    font-weight:600;

    transition:0.25s ease;
}

.auth-btn:hover{
    border-color:var(--accent-primary);
    box-shadow:0 0 12px var(--glow-primary);
}

.auth-btn.primary{
    background:rgba(64,255,89,0.08);
    border-color:var(--accent-primary);
}

.close-auth-modal{
    border:none;
    background:none;

    color:var(--text-muted);

    cursor:pointer;

    transition:0.25s ease;
}

.close-auth-modal:hover{
    color:var(--text-main);
}

.auth-modal[hidden]{
    display:none !important;
}
/* ------------------------ FOOTER ------------------------ */
footer{
    position: relative;
    flex-shrink: 0;
    flex-basis: 50px;
    padding: 15px;
    box-sizing: border-box;
    text-align: center;
    z-index: 2;
}

.trailer-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: grid;
    place-items: center;

    padding: 20px;
}

.trailer-modal[hidden] {
    display: none;
}

.trailer-modal-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(0,0,0,0.82);
    backdrop-filter: blur(10px);
}

.trailer-modal-content {
    position: relative;
    z-index: 1;

    width: min(100%, 900px);
    aspect-ratio: 16 / 9;

    background: #000;
    border: 1px solid var(--border-light);
    border-radius: 18px;

    box-shadow:
        0 0 40px var(--shadow-main),
        0 0 18px var(--glow-primary);

    overflow: hidden;
}

.trailer-modal-content iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.trailer-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;

    width: 36px;
    height: 36px;

    border: none;
    border-radius: 50%;

    background: rgba(0,0,0,0.6);
    color: var(--accent-primary);

    font-size: 1.6rem;
    line-height: 1;

    cursor: pointer;
    backdrop-filter: blur(6px);
}

.trailer-modal-close:hover {
    box-shadow: 0 0 12px var(--glow-primary);
}


/* ------------------------ !!!!!!!!SMALL SCREEN!!!!!!!! ------------------------ */
@media only screen and (max-width: 750px) {
  /* ------------------------ HEADER ------------------------ */
    header{
        flex: 0 0 50px;
        /* border: 1px solid red; */
    }
    .construct-hero{
        height:50px;
    }

    .construct-heading h1{
        font-size:1.30rem;
        letter-spacing:0.1em;
    }

    .construct-heading p{
    font-size:0.6rem;
    }

    .user-menu-toggle{
        width:36px;
        height:36px;
        font-size:.9rem;
    }

    .user-menu-panel{
        min-width:150px;
    }
}