body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
background: radial-gradient(circle at center,#0f1f35,#02050a);
color:white;
text-align:center;
min-height:100vh;
position:relative;
}

body::after{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:url("images/stardust.png");
opacity:0.25;
pointer-events:none;
z-index:-1;
}

.hero{
padding:60px 20px;
position:relative;
}

.hero::before{
content:"";
position:absolute;
top:120px;
left:50%;
transform:translateX(-50%);
width:520px;
height:260px;
background:radial-gradient(circle, rgba(0,200,255,0.28) 0%, rgba(0,0,0,0) 70%);
filter:blur(45px);
z-index:-1;
}

.logo{
width:600px;
max-width:90%;
margin-bottom:30px;

filter:
drop-shadow(0 0 20px rgba(0,200,255,0.25))
drop-shadow(0 0 50px rgba(0,200,255,0.12));

animation:pulseGlow 6s ease-in-out infinite;
}

@keyframes pulseGlow{
0%{
filter:
drop-shadow(0 0 18px rgba(0,200,255,0.22))
drop-shadow(0 0 40px rgba(0,200,255,0.10));
}
50%{
filter:
drop-shadow(0 0 32px rgba(0,200,255,0.42))
drop-shadow(0 0 80px rgba(0,200,255,0.18));
}
100%{
filter:
drop-shadow(0 0 18px rgba(0,200,255,0.22))
drop-shadow(0 0 40px rgba(0,200,255,0.10));
}
}

.hero-name{
font-size:2.6rem;
}

.tagline{
opacity:0.8;
letter-spacing:2px;
margin-bottom:40px;
}

.navbar{
display:flex;
justify-content:center;
gap:40px;
margin-bottom:40px;
flex-wrap:wrap;
}

.nav-link{
cursor:pointer;
position:relative;
color:white;
text-decoration:none;
}

.nav-link::after{
content:"";
position:absolute;
bottom:-4px;
left:0;
width:0%;
height:2px;
background:#00c8ff;
transition:0.3s;
}

.nav-link:hover::after,
.nav-link.active::after{
width:100%;
}

.panel{
overflow:hidden;
max-height:0;
transition:max-height 0.5s ease;
}

.panel.open{
max-height:6000px;
}

.section-title{
margin-bottom:20px;
font-size:22px;
opacity:0.9;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:4px;
max-width:1100px;
margin:auto;
}

/* COMMERCIAL-LISTA */
.commercial-vertical-list {
display: flex;
flex-direction: column;
gap: 40px;
max-width: 700px;
margin: 0 auto;
padding: 20px 0;
}

.commercial-item {
width: 100%;
display: flex;
flex-direction: column;
}

.commercial-title {
order: 1;               
margin: 0 0 12px 0;    
font-size: 15px;
font-weight: normal;
letter-spacing: 1px;
text-align: center;
color: white;
}

.commercial-item .video-thumb {
order: 2;               
}

.commercial-item .video-thumb img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
border-radius: 8px;
transition: 0.3s;
display: block;
box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.commercial-item:hover .video-thumb img {
transform: scale(1.02);
}

.project img{
width:100%;
border-radius:6px;
transition:0.3s;
display:block;
}

.project img:hover{
transform:scale(1.05);
}

/* FEATURE FILM FIX */
#work-panel .project{
display:flex;
align-items:center;
justify-content:center;
}

#work-panel .project img{
height:260px;
object-fit:contain;
transform:translateZ(0);
will-change:transform;
transition:transform 0.25s ease-out;
}

#work-panel .project img:hover{
transform:scale(1.035);
}

.project p{
margin:6px 0 0 0;
font-size:14px;
color:white;
text-align:center;
}

.imdb-link{
margin-top:30px;
opacity:0.8;
font-size:15px;
}

.imdb-link a{
color:#00c8ff;
text-decoration:none;
}

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

/* AWARDS GRID */
.awards-grid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:20px;
max-width:1100px;
margin:auto;
}

.award-card{
position:relative;
overflow:hidden;
border-radius:6px;
}

.award-card img{
width:100%;
height:100%;
object-fit:cover;
transition:0.4s;
}

.award-card:hover img{
transform:scale(1.05);
}

.award-overlay{
position:absolute;
bottom:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(to top,rgba(0,0,0,0.85),rgba(0,0,0,0.2));
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:20px;
opacity:0;
transition:0.3s;
}

.award-card:hover .award-overlay{
opacity:1;
}

.award-card,
.award-card:visited,
.award-card:hover,
.award-card:active{
color:inherit;
text-decoration:none;
}

.award-overlay h3,
.award-overlay p{
color:white;
}

.award-card:nth-child(1){grid-column:1/span 3;}
.award-card:nth-child(2){grid-column:4/span 3;}
.award-card:nth-child(3){grid-column:1/span 2;}
.award-card:nth-child(4){grid-column:3/span 2;}
.award-card:nth-child(5){grid-column:5/span 2;}

.contact-panel{
font-size:18px;
}

.video-trigger{
cursor:pointer;
}

.video-thumb{
position:relative;
}

.play-icon{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
font-size:40px;
color:white;
background:rgba(0,0,0,0.6);
border-radius:50%;
width:70px;
height:70px;
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
transition:0.3s;
}

.video-thumb:hover .play-icon{
transform:translate(-50%, -50%) scale(1.1);
}

.video-modal{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,0.85);
z-index:9999;
align-items:center;
justify-content:center;
padding:20px;
}

.video-modal.open{
display:flex;
}

.video-modal-content{
position:relative;
width:min(1000px, 95vw);
}

.video-modal video{
width:100%;
max-height:85vh;
display:block;
border-radius:8px;
background:black;
}

.video-close{
position:absolute;
top:-45px;
right:0;
background:none;
border:none;
color:white;
font-size:38px;
cursor:pointer;
line-height:1;
}

footer{
margin-top:60px;
opacity:0.6;
}

.contact-box{
display:flex;
align-items:center;
gap:30px;
justify-content:center;
flex-wrap:wrap;
text-align:left;
}

.contact-image{
width:180px;
height:180px;
object-fit:cover;
object-position:50% 30%;
border-radius:50%;
box-shadow:0 0 20px rgba(0,200,255,0.3);
transform:scale(0.9);
}

.contact-info {
line-height: 2;
font-size: 16px;
letter-spacing: 0.5px;
opacity: 0.95;
}

.contact-info p {
margin: 8px 0;
}

.contact-info strong {
font-weight: 500;
color: #00c8ff;
margin-right: 4px;
}
.contact-info strong::after {
content: ":";
}


/* ==========================================================================
   MOBILANPASSNING (Under 768px bredd)
   ========================================================================== */
@media (max-width: 768px) {
    .hero {
        padding: 40px 15px; 
    }

    .hero-name {
        font-size: 1.8rem; 
    }

    .tagline {
        font-size: 13px; 
        letter-spacing: 1px;
        margin-bottom: 30px;
    }

    .navbar {
        gap: 20px 15px; 
        margin-bottom: 30px;
    }

    .nav-link {
        font-size: 14px;
    }

    .grid {
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 8px; 
        padding: 0 5px;
    }

    #work-panel .project img {
        height: auto;
        width: 100%;
    }

    .awards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
        padding: 0 5px;
    }

    .award-card:nth-child(1),
    .award-card:nth-child(2),
    .award-card:nth-child(3),
    .award-card:nth-child(4),
    .award-card:nth-child(5) {
        grid-column: auto !important;
    }

    /* FIX: Gör texten alltid synlig på mobilen istället för att kräva hovring/klick */
    .award-overlay {
        opacity: 1 !important; 
        padding: 10px; 
        /* En lite mer solid toning i botten så texten poppar mot bilderna */
        background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 60%, rgba(0,0,0,0) 100%) !important;
    }

    .award-overlay h3 {
        font-size: 12px;
        margin: 0 0 4px 0;
    }

    .award-overlay p {
        font-size: 10px;
        line-height: 1.3;
    }

    .commercial-vertical-list {
        padding: 10px 10px;
        gap: 30px;
    }
    
    .commercial-title {
        font-size: 14px;
        margin: 0 0 8px 0;
    }

    .contact-box {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .contact-image {
        width: 140px;
        height: 140px;
    }

    .contact-info {
        font-size: 15px;
    }
}