@charset "utf-8";
@import url("../webfonts/PressStart2P_Regular/PressStart2P.css");
/* CSS Document */

/* GLITCH-STYLE:
01 RESET
02 ROOT
03 TYPHOGRAPHY
04 GLOBAL LAYOUT
05 HEADER
06 VIDEOSYSTEMS
07 VIDEO CONTROL CONTAINER A.K.A "2-COLUMNS 4:3 IMG+VIDEO"
08 GLITCH CONTAINER A.K.A " 3-COLUMNS IMG MED BAKGRUNDSBILD"
09 2-COLUMNS
10 1-COLUMS A.K.A DIVIDERS WITH IMG +TEXT (+ROWS)
11 DIVIDER WITH IMG-TAGG
12 FOOTER
13 MEDIA QUERIES a.k.a mobilregler
*/

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

/*==================================================
02 ROOT
==================================================*/
:root{

--header-height:clamp(60px,7vw,88px);

	/* Colors */

--color-black:#000;

--color-white:#fff;

--color-green:#1AFF00;

--color-pink:#FF00C6;

--color-gray:#DFDADA;

/* Layout */

--header-height:clamp(60px,7vw,88px);

--section-space:clamp(40px,8vw,120px);

--content-width:1600px;

/* Effects */
--nav-blur: 4px;
--shadow-glitch:2px 2px #FF00C6;
	
/* Type scale */
--text-xs:clamp(0.65rem, 0.8vw, 0.85rem);
--text-sm:clamp(0.75rem, 1vw, 1rem);
--text-md:clamp(0.9rem, 1.4vw, 1.25rem);
--text-lg:clamp(1.1rem, 2vw, 2rem);
--text-xl:clamp(1.4rem, 3vw, 3rem);
}


/*==================================================
03 TYPOGRAPHY 
==================================================*/

body::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: rgba(0, 0, 0, 0.5);
}
/* Add a thumb */
body::-webkit-scrollbar-thumb {
    background: rgba(250, 250, 250, 0.5);
}

body, html {
  height: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

body{
    font-family: "PressStart2P Regular", "Source Code Pro";
    background: #000;
    overflow-x: hidden;
}
/* Hero-video */
h1 {
font-size:var(--text-xl);
line-height:1.50;
    color: #1AFF00;
    font-family: "Press Start 2P";
    text-shadow: 2px 1px #FF00C6;
    font-weight: normal;
	text-align: center;
	text-transform: uppercase 
}
/* a.ka.Glitch-container + 2 columns rubrik*/
h2 {
    font-size: var(--text-lg);
    line-height: 1.50;
    color: #1AFF00;
	font-family: "Press Start 2P";
    font-style: italic;
    text-shadow: 2px 1px #FF00C6;
    font-weight: normal;
    text-align: center;
    
}
/* "divider-text" en vit rubrik */
h3 {
  font-size: var(--text-sm);
  font-style: normal;
    color: #F5F5F5;
    font-family: "Source Code Pro";
    text-shadow: 2px 1px 1px #000;
	line-height: 1.50;
	text-align: left;
	text-transform: normal;
}


/* "Swiper-fast-rubrik" + swiper caption rubrik*/
h4 {
    font-size: var(--text-sm);
	line-height:1.50;
	font-family: "Source Code Pro";
	font-style: normal;
    color: #1AFF00;
    text-shadow: 2px 1px #FF00C6;
    text-transform: uppercase;
	text-align: left;
}

/* en text för video-banners som ligger på botten i högerkant */
h5 {
    font-size: var(--text-xs);
	font-style: normal;
    color: #FFFFFF;
    font-family: "Source Code Pro";
    text-shadow: 2px 1px 4px #000;
	line-height: 1.10;
	text-align:right;
}

/* "divider-text" en svart rubrik, samma som h3 */
h6 {
  font-size: var(--text-sm);
  font-style: normal;
    color: #212121;
    font-family: "Source Code Pro";
    text-shadow: 2px 1px 1px #F5F5F5;
	line-height: 1.50;
	text-align: left;
	text-transform: normal;
}

/* Brödtext */
p {
    color: #FFFFFF;
    font-family: "Source Code Pro";
    font-style: normal;
    font-size:var(--text-base);
    line-height:1.50;
}

a{
color: #FFFFFF;
font-style: italic;	
text-decoration:none;
}

a hover{
 color: #99ffff;
 text-shadow: 3px 3px 1px #ffcc33;	

} 

strong{
text-decoration-style: solid; 
}

em{
text-decoration-style:wavy
}


/*==================================================
04 GLOBAL LAYOUT

här är alla regler som gäller överallt
(main)

==================================================*/
html{
    scroll-behavior:smooth;
}

section{

width:100%;

position:relative;

}


/* ==========================
05 HEADER
========================== */
	
.sticky-nav{

    position:fixed;
	
	top:0;
	left:0;
	
	width:100%;
	
	min-height: 60px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-inline:clamp(14px,3vw,40px);
	
	padding-top: env(safe-area-inset-top); /* just denna påverkar bara iphone*/

  	background:transparent; /* förslag: rgba(0,0,0,.18)*/

    backdrop-filter:blur(var(--nav-blur));

    z-index:9999;

    /* Själva den genomskinliga header-ytan fångar inte klick/swipe. */
    pointer-events:none;
 	
}


/* Endast länkarna/bilderna i headern är klickbara. */
.sticky-nav a{
    pointer-events:auto;
}


.logo img{

    display:block;
	
	height:clamp(32px,4vw,60px);

    width:auto;

}


.info-btn img{

    display:block;

    height:clamp(18px,2vw,24px);
	
	width:auto;

}

/*==================================================
06 VIDEOSYSTEMS:

A. Hero-video :  Cover

B. Standard-video: 16:9 1920x1080 Contain

C. DV-video: 4:3 1440x1080  Contain

D. Banner-video : 1920x540 Contain

E. Square-video: 1:1 1080x1080 Contain

==================================================*/

.video{

    position:relative;
    width:100%;
    overflow:hidden;

}

.video video{

    display:block;

    width:100%;

}

.video__overlay{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.0);

}

.video__content{

    position:absolute;
    inset:0;

    display:flex;

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

    z-index:5;

}

.video__content-bottom{

    position:absolute;
	bottom: 0;
	right: 0;
  text-align: right;
padding: 0 10px 10px 0px;
    z-index:5;

}



.video__content > *{

    max-width:min(90%,65ch);

}
/* ---------------- HERO ---------------- */
.video--hero{
    position:relative;
    overflow:hidden;
height: 100vh;
height:100svh;
}

.video--hero video{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

}
/* ---------------- BANNER ---------------- */
.video--section{

aspect-ratio:1920/540;

}

.video--section video{

/* detta tas bort    width:100%; */

    height:100%;

    object-fit:cover;

}
/* ---------------- STANDARD 16:9 ---------------- */
.video--standard{

    aspect-ratio:16 / 9;
    max-width:1600px;
    margin-inline:auto;
}

.video--standard video{

 width:100%; 

    height:100%;

    object-fit:cover;

}

/* ---------------- 4:3 ---------------- */
.video--mini-dv{

    aspect-ratio:4 / 3;
    max-width:1600px;
    margin-inline:auto;
}

.video--mini-dv video{

 width:100%; 

    height:100%;

    object-fit:cover;

}



/*==================================================
07 VIDEO CONTROL CONTAINER A.K.A "2-COLUMNS 4:3 IMG+VIDEO"
==================================================*/

.video-control-container {
  box-sizing: border-box;

  /* Två kolumner som alltid ligger bredvid varandra */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  width: 100%;
  gap: clamp(2px, 0.5vw, 10px);
  padding: clamp(2px, 0.5vw, 10px);

  /* Bakgrunden fyller hela området jämnt */
  background-image: url(" ../img/glitch-container/glitch-cont-background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.video-control-col {
  position: relative;
  min-width: 0;

  /* Båda kolumnerna behåller 4:3 */
  aspect-ratio: 4 / 3;

  overflow: hidden;
}

/* Bilden och videon fyller identiska boxar */
.video-control-col img,
.video-control-col video {
  display: block;
  width: 100%;
  height: 100%;
}

/* Bilden fyller hela vänsterkolumnen */
.video-control-col img {
  object-fit: cover;
}

/* Hela videon ska alltid vara synlig */
.video-control-col video {
  object-fit: contain;
  background:#000000;
}

/* Rubriken positioneras enbart över vänsterbilden */
.video-control-title {
  position: absolute;
  inset: 0;
  z-index: 2;

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

  box-sizing: border-box;

  text-align: center;
  pointer-events: none;
}

.video-control-title h3,
.video-control-title h5 {
  margin: 0;
}

.video-control-title h3 {
  font-size: clamp(0.65rem, 2.4vw, 2.5rem);
  line-height: 1.05;
}

.video-control-title h5 {
  margin-top: 0.4em;
  font-size: clamp(0.5rem, 1.2vw, 1.1rem);
}

/* Extra kompakt på mycket smala skärmar */
@media (max-width: 200px) {
  .video-control-container {
    gap: 2px;
    padding: 2px;
  }

  .video-control-title {
    padding: 3px 3px 3px 20px;
  }
}


/*==================================================
08 GLITCH CONTAINER A.K.A 3-COLUMNS
==================================================*/
/* Huvudbehållaren med bakgrundsbilden */
.glitch-container{
position: relative; /* Gör att rubriken kan positioneras utifrån denna box */
    background-image:url("../img/glitch-container/glitch-cont-background.png");
    background-size:auto auto;
    background-repeat:repeat;

    display:flex;
    width:100%;

    gap:clamp(2px,0.5vw,10px);
    padding:clamp(2px,0.5vw,10px);
}


.glitch-title {	
	position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
	padding: 10px 10px 10px 10px; 

    z-index:10;
}

.glitch-col{
    flex:1 1 0;
    min-width:0;
}

.glitch-col img{
    display:block;
    width:100%;
    height:auto;
}


/*==================================================
09 2-COLUMNS [LIKE IN "VITTANGIGATAN..."]
==================================================*/

.two-column-section{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    width:100%;
}

.column{
    position: relative;
    overflow:hidden;
}

.column-content-image,
.column-content-video{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
}
/* ---------------- 4:3 ---------------- */
.column--video{
    background:#000;
    aspect-ratio:4 / 3;
    max-width:1600px;
    margin-inline:auto;
 width:100%; 

    height:100%;

    object-fit:contain;

}

.column--video .column-content-video{
    object-fit:contain;
}
.column-overlay{
    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;

    padding:clamp(20px,5vw,80px);
    z-index:5;

    pointer-events:none;
}

.column-overlay > *{

    max-width:65ch;

}
/*==================================================
10 1-COLUMNS A.K.A DIVIDER IMG's + TEXT (+ ROWS)
==================================================*/

/* Huvudbehållaren */
.divider-container {
    position: relative;        /* Krävs för att bilden och texten ska hållas inom denna box */
    display: flex;
    flex-direction: column;    /* Staplar textraderna vertikalt */
    justify-content: center;   /* Centrerar texten vertikalt */
    align-items: left;       /* Centrerar texten horisontellt */
    width: 100%;
    min-height: 65px;         /* Bestämmer minsta höjd på ditt bildblock (justera efter behov) */
    overflow: hidden;          /* Döljer bilddelar som eventuellt sticker ut */
    margin: 0;
    padding: 0px;
    border: 0;
}

/* Själva bild-taggen som tvingas ligga i bakgrunden */
.divider-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;         /* Gör att bilden fyller ut boxen snyggt utan att bli skev */
    z-index: 1;                /* Lägger bilden i det nedersta lagret */
}

.divider__overlay{			/* Använder eg inte... */

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.0);
	z-index:10;

}

/* Text som kan göras i rader */
.divider-text {
    position: relative;        /* Gör att z-index fungerar på texten */
    z-index: 2;        /* Tvingar upp texten så den landar ovanpå bilden */
	padding: 3px 3px 3px 20px;
    text-align: left;
	
    margin: 5px 0;				 /* Ger lite luft mellan rad 1 och rad 2 */
               
}


  
/*==================================================
11 DIVIDER WITH IMG-TAGG
==================================================*/

.project-image,
.divider-image{
    display:block;
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    border:0;
}


/* ==========================
12 FOOTER
========================== */
footer{
    position:relative;
    z-index:20;

    width:100%;
    min-height:80px;

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

    padding:20px var(--page-padding);

    font-family:"Press Start 2P";
    text-align:center;

    background-image:url(../img/glitchanim.gif);
    background-repeat:repeat;

    color:#000000;
    text-shadow:2px 2px 6px #FFF;

    margin-top:0px;
}

footer p{
    margin:0;
    padding:0;

    font-family:"Press Start 2P";
    font-size:x-small;
    text-align:center;

    color:#000000;
    text-shadow:2px 1px 1px #FFF;
    text-transform:uppercase;
    line-height:1.50;
}

footer a{
    color:#aaa;
    text-decoration:none;
}

footer a:hover{
    text-decoration:none;
    color:#aaa;
}



/*==================================================
13 MEDIA QUERIES a.k.a mobilregler
==================================================*/

/* Responsivt: Stapla kolumnerna på höjden på mindre skärmar (t.ex. mobiler) */
@media (max-width:768px){

    .two-column-section{
        grid-template-columns:1fr;
    }

}	

	
.video__content{
padding:6vw;
text-align:left;
}

/*==================================================
HEADER RESPONSIVE FIX
==================================================*/

/*
Logolänken får krympa.
reserverar samtidigt plats åt INFO-knappen.
*/

.logo {
    min-width: 0;
    max-width: calc(100% - 70px);
}


/*
Bilden får aldrig bli bredare än sin länk/container.
*/

.logo img {
    max-width: 100%;
    height: auto;
}


/*
INFO får aldrig tryckas ihop av loggan.
*/

.info-btn {
    flex: 0 0 auto;
}


/* ==================================================
TABLET / DESKTOP
================================================== */

@media (min-width: 601px) {

    .logo img {
        height: clamp(32px, 4vw, 60px);
        width: auto;

        /*
        extra säkerhet på smalare desktop/tablet
        */
        max-width: min(75vw, 669px);
    }

}


/* ==================================================
PHONE
600px och smalare
================================================== */

@media (max-width: 600px) {

    .sticky-nav {
        gap: 12px;
    }


    /*
    Reserverar plats åt INFO till höger.
    */

    .logo {
        max-width: calc(100% - 62px);
    }


    /*
    På mobil styr bredden loggan,
    inte den gamla min-height på 32px.
    */

    .logo img {
        width: 100%;
        height: auto;
    }


    /*
    INFO behåller läsbar storlek.
    */

    .info-btn img {
        height: clamp(18px, 5vw, 24px);
        width: auto;
    }

}