/* =========================
   RESET
========================= */
*{
margin:0;
padding:0;
box-sizing:border-box;
}

/* =========================
   BASE
========================= */
body.intro-lock{
overflow:hidden;
height:100vh;
}

body{
font-family:"Inter",sans-serif;
background:#0E0E11; /* Cinematic background */
color:#EAEAEA; /* Soft storytelling text */
overflow-x:hidden;
}

/* =========================
   HEADER (CSS ONLY ANIMATION)
========================= */
.header{
position:fixed;
top:0;
left:50%;
transform:translateX(-50%) translateY(-120%);
width:90%;
max-width:3000px;
padding:25px 60px;
display:flex;
justify-content:space-between;
align-items:center;
z-index:1000;
opacity:0;
background:transparent;

animation: headerIntro 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: 2.4s;
transition:all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.header.scrolled{
top:30px;
left:50%;
transform:translateX(-50%);
width:90%;
max-width:1300px;
background: rgba(14, 14, 17, 0.55); /* matcher dit cinematic bg */
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
border-radius:40px;
border:1px solid rgba(255,255,255,0.06);
}


@keyframes headerIntro{
0%{
transform: translateX(-50%) translateY(-120%);
opacity:0;
}
100%{
transform: translateX(-50%) translateY(0);
opacity:1;
}
}

.logo{
color:#EAEAEA;
text-decoration:none;
font-weight:700;
font-size:22px;
}

.desktop-nav a{
color:#EAEAEA;
text-decoration:none;
margin-left:30px;
font-size:18px;
transition:.3s;
}

.desktop-nav a:hover{
transform:translateY(-2px);
}

/* =========================
   HERO
========================= */
.hero{
position:relative;
height:100vh;
overflow:hidden;
background:#000000;
}

.hero-video{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:100%;
height:100%;
object-fit:cover;

/* CINEMATIC FADE-IN (polish) */
opacity:0;
transition: opacity 1.8s ease;
}

.hero-video.is-visible{
opacity:1;
}


.hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(
to bottom,
rgba(14,14,17,0.2),
rgba(14,14,17,0.85)
);
}

.hero-text{
position:absolute;
inset:0;
display:flex;
align-items:flex-end;
justify-content:flex-start;
padding:0 8vw 12vh 8vw;
z-index:2;
}

.hero-text-inner{
opacity:0;
transform:translateY(30px);
animation:heroTextReveal 1.2s ease-out forwards;
animation-delay:1s;
}

@keyframes heroTextReveal{
to{
opacity:1;
transform:translateY(0);
}
}

.hero-title{
font-family:"Playfair Display",serif;
font-size:clamp(42px,6vw,110px);
line-height:1.05;
}

.hero-sub{
margin-top:16px;
font-size:clamp(18px,2vw,26px);
color:#E9C46A; /* Accent gold */
}

.hero-sub{
margin-top:18px;
font-size:clamp(16px,2vw,22px);
color:#E9C46A;
max-width:600px;
line-height:1.5;
letter-spacing:0.3px;
opacity:0.9;
font-weight:400;
}


/* =========================
   OM MIG (2/3 layout)
========================= */
.content-box{
display:flex;
gap:80px;
padding-left:8vw;
padding-right:8vw;
padding-top: 6vw;
align-items:center;
background:#16161D; /* Deep storytelling section */
}

.content-text{
flex:2;
}

.content-text h3{
font-family: "Playfair Display", serif;
font-size:46px;
margin-bottom:20px;
color:#E9C46A; /* Highlight gold */
}

.content-text p{
font-size:18px;
line-height:1.8;
}

.content-image{
flex:1;
height:100%;
display:flex;
align-items:stretch;
}

.content-image img{
width:100%;
height:100%; /* fylder hele sektionens højde */
object-fit:cover; /* cinematic crop */
border-radius:0; /* fjerner “kort-look” */
transition:.6s ease;
}

/* =========================
   PROJECTS
========================= */
.projects{
padding:140px 8vw;
background:#1C1C24; /* Match cinematic base */
color:#EAEAEA;
}

.section-title{
font-family: "Playfair Display", serif;
font-size:42px;
margin-bottom:60px;
color:#E9C46A;
}

.project-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
}

.project-card{
position:relative;
overflow:hidden;
border-radius:30px;
cursor:pointer;
max-height: 800px; /* Ensure consistent card height */
}

.project-card img{
width:100%;
min-height: 600px; /* Ensure images fill the card height */
object-fit:cover;
transition:.6s;
}

.project-card:hover img{
transform:scale(1.08);
}

.project-overlay{
position:absolute;
bottom:0;
left:0;
right:0;
padding:30px;
background:linear-gradient(transparent, rgba(14,14,17,0.95));
color:#EAEAEA;
}

/* =========================
   VIDEO SECTION
========================= */
.video-section{
padding:140px 8vw;
background:#0E0E11; /* Warm cinematic contrast */
}

/* Grid wrapper (du har allerede flex, men denne er mere stabil) */
.reel-grid{
display:flex;
gap:30px;
align-items:flex-start; /* vigtig: så captions ikke bliver strukket */
}

/* Hele kortet */
.reel-card{
flex:1;
display:flex;
flex-direction:column; /* VIDEO over, tekst under */
border-radius:30px;
background:transparent; /* renere look til portfolio */
overflow:visible; /* MEGET VIGTIG – så caption ikke klippes */
}

/* Selve video container look */
.reel-card video{
width:100%;
aspect-ratio:9/16; /* cinematic reel format */
height:auto;
object-fit:cover;
border-radius:30px;
background:#000;
cursor:pointer;
}

/* Caption under video */
.reel-caption{
margin-top:14px;
padding:0 6px;
max-width:95%;
}

/* Titel (valgfri men meget portfolio-stærk) */
.reel-caption h4{
font-family:"inter", sans-serif;
font-size:24px;
margin-bottom:6px;
color:#E9C46A; /* matcher din accent */
}

/* Beskrivende tekst */
.reel-caption p{
font-family:"Inter", sans-serif;
font-size:18px;
line-height:1.6;
opacity:0.75; /* rolig cinematic tone */
color:#EAEAEA;
}

/* Intro tekst over Video Reels – samme stil som "Om mig" */
.section-intro{
    max-width:1100px;          /* samme læsbarhed som storytelling tekst */
    margin-top:-20px;         /* tættere på overskrift (cinematic look) */
    margin-bottom:50px;       /* luft før videoerne */
    font-family:"Inter", sans-serif;
    font-size:18px;           /* præcis samme som .content-text p */
    line-height:1.8;          /* vigtig for samme rytme */
    color:#EAEAEA;
    opacity:0.9;
}


/* Hover (subtil premium feel) */
.reel-card:hover video{
transform:scale(1.01);
transition:transform 0.4s ease;
}

/* =========================
   BIG CINEMATIC FOOTER
========================= */
.footer{
background:#0B0B0F;
padding:180px 8vw 80px 8vw; /* større = mere premium */
border-top:1px solid rgba(255,255,255,0.08);
}

.footer-container{
display:flex;
justify-content:space-between;
gap:80px;
flex-wrap:wrap;
max-width:1400px;
margin:0 auto;
}

/* Brand / Quote */
.footer-brand h2{
font-size:42px;
margin-bottom:20px;
color:#E9C46A;
font-family:"Playfair Display", serif;
}

.footer-quote{
font-size:20px;
font-style:italic;
line-height:1.6;
max-width:400px;
opacity:0.9;
}

.footer-quote-author{
display:block;
margin-top:10px;
opacity:0.6;
font-size:14px;
}

/* Contact */
.footer-contact h3,
.footer-links h3{
font-size:24px;
margin-bottom:20px;
color:#E9C46A;
}

.footer-contact p{
margin-bottom:12px;
font-size:18px;
opacity:0.9;
}

.footer-contact a{
color:#EAEAEA;
text-decoration:none;
}

.footer-contact a:hover{
color:#E9C46A;
}

/* Links / Social */
.footer-links{
display:flex;
flex-direction:column;
gap:12px;
}

.footer-links a{
color:#EAEAEA;
text-decoration:none;
font-size:18px;
transition:0.3s ease;
}

.footer-links a:hover{
color:#E9C46A;
transform:translateX(5px);
}

/* CTA Button */
.footer-cta{
margin-top:20px;
padding:14px 28px;
background:#E9C46A;
color:#0E0E11;
border:none;
border-radius:30px;
font-weight:600;
cursor:pointer;
transition:0.3s ease;
}

.footer-cta:hover{
background:#F4A261;
transform:scale(1.05);
}

/* Bottom bar */
.footer-bottom{
margin-top:100px;
padding-top:30px;
border-top:1px solid rgba(255,255,255,0.08);
text-align:center;
opacity:0.6;
font-size:14px;
}

/* =========================
   REVEAL ANIMATIONS
========================= */
.reveal{
opacity:0;
transform:translateY(40px) scale(0.98);
transition:
opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform, opacity;
}

.reveal.show{
opacity:1;
transform:translateY(0) scale(1);
}


/* =========================
   MODAL SYSTEM
========================= */
.open-modal-btn{
margin-top:28px;
padding:18px 42px; /* større klikflade */
background:#E9C46A;
color:#0E0E11;
border:none;
border-radius:40px;
text-transform: none;
font-weight:700;
font-size:18px; /* større tekst */
letter-spacing:0.5px;
cursor:pointer;
transition:all 0.35s ease;
box-shadow: 0 8px 30px rgba(233,196,106,0.18); /* premium feel */
}

.open-modal-btn:hover{
transform:scale(1.06) translateY(-2px);
background:#F4A261;
box-shadow: 0 12px 40px rgba(233,196,106,0.28);
}

.modal{
position:fixed;
inset:0;
background:rgba(0,0,0,0.82);
display:flex;
justify-content:center;
align-items:center;
opacity:0;
pointer-events:none;

/* Smooth cinematic fade IN + OUT */
transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);

z-index:2000;
}

.modal-content{
background:#14141B; /* tættere på dit cinematic theme */
width:min(92vw, 1400px);
height:min(88vh, 900px);

border-radius:18px; /* mindre radius = mere premium */
display:grid;
grid-template-columns: 1.4fr 1.1fr; /* 50 / 50 fordeling */
align-items:stretch;
gap:0;
overflow:hidden;
position:relative;

/* Beholder din cinematic entrance animation */
transform: scale(0.96) translateY(40px);
opacity:0;
transition:
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* PROJECT CASE MODAL – 75% TEXT / 25% IMAGE */
#aarhusGuitarsModal .modal-content{
grid-template-columns: 2fr 1.6fr;
}

#project2Modal .modal-content{
grid-template-columns: 2fr 1.6fr;
}

.about-interactive h3{
font-size:22px;
margin-bottom:20px;
color:#E9C46A;
}

/* Images inside process dropdowns */
.about-panel img{
width:100%;
border-radius:14px;
margin-top:14px;
object-fit:cover;
}

.modal.active{
opacity:1;
pointer-events:auto;
}

.modal.active .modal-content{
transform: scale(1) translateY(0);
opacity:1;
}

.modal-text{
display:block;
padding:60px 56px;
overflow-y:auto;
max-width:720px;
height:100%;

/* SKJUL SCROLLBAR (men behold scroll funktion) */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}

.modal-text::-webkit-scrollbar{
display:none; /* Chrome, Safari, Edge */
}

.modal-text h2{
font-family: "Playfair Display", serif;
font-size:clamp(28px, 3vw, 40px);
margin-bottom:20px;
color:#E9C46A;
}

.modal-text p{
font-size:16px;
line-height:1.8;
opacity:0.9;
}

.modal-images{
position:relative;
height:100%;
overflow:hidden;
background:#0E0E11;
display:flex;
align-items:center;
justify-content:center;
}

.about-image[data-img="about-camp"]{
    object-position: top center;
}

.modal-close{
position:absolute;
top:24px;
right:24px;
width:48px;
height:48px;
border-radius:50%;
border:none;
background:rgba(16, 15, 15, 0.365);
color:#EAEAEA;
font-size:28px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition:
transform 0.3s ease,
background 0.3s ease,
color 0.3s ease;
z-index:10;
}

.modal-close:hover{
transform:rotate(90deg) scale(1.05);
background:#E9C46A;
color:#0E0E11;
}

.project-link{
color:#E9C46A;
text-decoration:none;
border-bottom:1px solid rgba(233,196,106,0.4);
transition:all 0.3s ease;
}

.project-link:hover{
color:#F4A261;
border-bottom:1px solid #F4A261;
}


/* Modal scroll lock (cinematic + stable) */
body.modal-open{
overflow: hidden;
height: 100vh;
}

/* =========================
   SKILLS / PROGRAM LOGOS (ABOUT MODAL)
========================= */
.skills-section{
margin-top:50px;
}

.skills-section h3{
font-size:22px;
margin-bottom:20px;
color:#E9C46A;
}

.skills-grid{
display:grid;
grid-template-columns: repeat(2, 1fr);
gap:14px;
}

.skill-item{
display:flex;
align-items:center;
gap:12px;
padding:10px 12px;
border-radius:12px;
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.06);
transition:all 0.3s ease;
}

.skill-item img{
width:42px;
height:42px;
object-fit:contain;
filter:brightness(0.95);
}

.skill-info{
display:flex;
flex-direction:column;
gap:6px;
width:100%;
font-family:"Inter", sans-serif;
}

.skill-info span{
font-size:16px;
color:#EAEAEA;
}

/* Level bars (1-5 cinematic) */
.skill-level{
display:flex;
gap:6px;
}

.skill-level::before,
.skill-level::after{
content:"";
}

.skill-level{
--bars: 5;
}

.skill-level div{
height:6px;
flex:1;
border-radius:4px;
background:rgba(255,255,255,0.08);
}


/* =========================
   ABOUT INTERACTIVE TABS (CINEMATIC)
========================= */
.about-interactive{
margin-top:40px;
display:flex;
flex-direction:column;
gap:14px;
}

.about-tab{
width:100%;
text-align:left;
padding:16px 20px;
border-radius:14px;
border:1px solid rgba(255,255,255,0.08);
background:rgba(255,255,255,0.03);
color:#EAEAEA;
font-family:"Inter", sans-serif;
font-size:16px;
cursor:pointer;

transition:all 0.35s ease;
}

.about-tab:hover{
background:rgba(233,196,106,0.08);
border-color:rgba(233,196,106,0.4);
transform:translateY(-2px);
}

.about-panel{
max-height:0;
overflow:hidden;
opacity:0;
padding:0 10px;
font-size:16px;
line-height:1.7;
color:#EAEAEA;

transition:
max-height 0.5s ease,
opacity 0.4s ease,
padding 0.4s ease;
}

.about-panel.active{
max-height:2000px; /* giver plads til alt dit indhold */
opacity:0.95;
padding:14px 10px 24px 10px;
}

.about-image{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover; /* KEY: fylder fladen og cropper dynamisk */
object-position:center; /* altid centreret crop */

opacity:0;
transition: opacity 0.7s ease;
}

.about-image.active{
opacity:1;
transform:scale(1);
}


/* =========================
   BURGER MENU (MOBILE) – CINEMATIC VERSION
========================= */

.burger{
display:none;
flex-direction:column;
gap:5px;
cursor:pointer;
z-index:1100;
}

.burger span{
width:26px;
height:3px;
background:#EAEAEA;
border-radius:2px;
transition:0.3s ease;
}

/* FULLSCREEN CINEMATIC MENU */
.mobile-menu{
position:fixed;
inset:0;
height:100vh;
width:100%;

/* Cinematic dark overlay (matcher dit site) */
background: rgba(14, 14, 17, 0.97);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);

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

transform:translateX(100%);
opacity:0;
pointer-events:none;

transition:
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.5s ease;

z-index:1050;
}

/* Når menu åbner (styres allerede af din JS) */
.mobile-menu.open{
transform:translateX(0);
opacity:1;
pointer-events:auto;
}

/* Navigation wrapper */
.mobile-nav{
display:flex;
flex-direction:column;
align-items:center;
gap:32px;
}

/* LINKS – SAMME FONT SOM DESKTOP (Inter) */
.mobile-nav a{
font-family:"Inter", sans-serif; /* matcher desktop */
font-size:clamp(26px, 6vw, 40px);
font-weight:500;
letter-spacing:0.5px;
color:#EAEAEA;
text-decoration:none;
opacity:0.85;

transition:
transform 0.4s ease,
opacity 0.3s ease,
color 0.3s ease;
}

.mobile-nav a:hover{
transform:translateY(-4px);
opacity:1;
color:#E9C46A; /* din gold accent */
}

/* CINEMATIC LINK FADE-IN */
.mobile-menu.open .mobile-nav a{
animation: menuFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes menuFadeUp{
from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
transform:translateY(0);
}
}

/* CLOSE (X) BUTTON */
.mobile-close{
position:absolute;
top:28px;
right:28px;
width:48px;
height:48px;
border-radius:50%;
border:none;
background:rgba(255,255,255,0.06);
color:#EAEAEA;
font-size:28px;
cursor:pointer;

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

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

transition:
transform 0.3s ease,
background 0.3s ease,
color 0.3s ease;
}

.mobile-close:hover{
transform:rotate(90deg) scale(1.05);
background:#E9C46A;
color:#0E0E11;
}
/* =========================
   MOBILE – COMPLETE CINEMATIC FIX
========================= */
@media (max-width:768px){

/* =========================
   HEADER
========================= */
.header{
padding:16px 20px;
width:95%;
}

.header.scrolled{
width:94%;
top:12px;
border-radius:24px;
}

.logo{
font-size:18px;
}

.desktop-nav{
display:none;
}

.burger{
display:flex;
}

/* =========================
   HERO – CINEMATIC MOBILE
========================= */
.hero{
height:100svh;
min-height:100svh;
}

.hero-text{
padding:0 24px 8vh 24px;
align-items:flex-end;
}

.hero-title{
font-size:32px;
line-height:1.15;
}

.hero-sub{
font-size:16px;
margin-top:12px;
}

/* =========================
   OM MIG – IMAGE FIRST (MOBIL)
========================= */
.content-box{
flex-direction:column;
gap:30px;
padding:60px 24px 70px 24px;
}

/* Byt plads: billede først */
.content-image{
order:1;
width:100%;
height:420px;
border-radius:18px;
overflow:hidden;
}

.content-text{
order:2;
flex:none;
}

.content-text h3{
font-size:34px;
}

.content-text p{
font-size:16px;
line-height:1.7;
}

.content-image img{
width:100%;
height:100%;
object-fit:cover;
border-radius:18px;
}

/* BUTTON */
.open-modal-btn{
width:100%;
text-align:center;
font-size:16px;
padding:16px 24px;
border-radius:30px;
}

/* =========================
   PROJECTS
========================= */
.projects{
padding:90px 24px;
}

.section-title{
font-size:30px;
margin-bottom:40px;
}

.project-grid{
grid-template-columns:1fr;
gap:24px;
}

.project-card{
border-radius:22px;
}

.project-card img{
min-height:0;
height:260px;
object-fit:cover;
}

/* =========================
   VIDEO SECTION – BETTER MOBILE UX
========================= */
.video-section{
padding:90px 24px;
}

.reel-grid{
flex-direction:column;
gap:28px;
}

.reel-card{
width:100%;
display:flex;
flex-direction:column;
overflow:visible; /* sikrer caption vises */
}

.reel-card video{
width:100%;
aspect-ratio:9/16;
height:auto;
border-radius:20px; /* matcher dit mobile design */
}

/* Caption mobile */
.reel-caption{
margin-top:12px;
padding:0 2px;
}

.reel-caption h4{
font-size:20px;
}

.reel-caption p{
font-family:"Inter", sans-serif;
font-size:18px;
line-height:1.8;          /* matcher Om Mig */
color:#EAEAEA;
opacity:0.9;              /* samme rolige tekstvægt */
max-width:600px;          /* samme læsbarhed som storytelling tekst */
}


/* =========================
   MODALS – ENS MED ABOUT (MEGET VIGTIG)
========================= */
.modal-content{
display:flex;              /* ændret fra grid */
flex-direction:column;     /* naturligt flow */
width:94vw;
height:90vh;
border-radius:18px;
overflow:hidden;
}

/* BILLEDE ØVERST – SOM ABOUT MODAL */
.modal-images{
order:1;
width:100%;
height:240px;
min-height:240px;
flex-shrink:0;
}

/* BILLEDET SKAL FYLDE PÆNT */
.modal-images img{
width:100%;
height:100%;
object-fit:cover;
}

/* TEKST UNDER BILLEDET */
.modal-text{
order:2;
padding:28px 22px;
max-width:none;
height:100%;
overflow-y:auto; /* smooth scroll inde i modal */
}

/* TITEL */
.modal-text h2{
font-size:24px;
line-height:1.3;
margin-bottom:16px;
}

/* BRØDTEKST */
.modal-text p{
font-size:15px;
line-height:1.7;
}

/* TABS – ENS MED ABOUT MODAL */
.about-interactive{
margin-top:28px;
gap:14px;
}

.about-tab{
font-size:15px;
padding:14px 16px;
border-radius:12px;
}

.about-panel{
font-size:15px;
line-height:1.7;
}

/* DROPDOWN BILLEDER */
.about-panel img{
width:100%;
border-radius:12px;
margin-top:12px;
}

/* =========================
   SKILLS GRID
========================= */
.skills-grid{
grid-template-columns:1fr;
gap:12px;
}

.skill-item{
padding:12px 14px;
}

/* =========================
   FOOTER
========================= */
.footer{
padding:90px 24px 50px 24px;
}

.footer-container{
flex-direction:column;
gap:40px;
}

.footer-brand h2{
font-size:28px;
}

.footer-quote{
font-size:16px;
}

.footer-contact p{
font-size:16px;
}

.footer-links a{
font-size:16px;
}

.footer-bottom{
margin-top:60px;
font-size:13px;
}
}