/* ========================= GENEREL BODY-OPSÆTNING ========================= */ body { /* background-color: Sætter farven på hele din baggrund. #000000 er HEX-koden for helt sort. */ background-color: #000000; /* display: flex: Aktiverer "Flexbox". Det er et værktøj, der gør det meget nemt at styre, hvordan dine sektioner placeres i forhold til hinanden. */ display: flex; /* flex-direction: column: Fortæller flexboxen, at dine elementer skal stables ovenpå hinanden (som en søjle) i stedet for at stå ved siden af hinanden. */ flex-direction: column; /* justify-content: center: Centrerer alt dit indhold lodret på siden, hvis der er ekstra plads i højden. */ justify-content: center; /* align-items: center: Centrerer alt dit indhold vandret. Det sørger for, at dine videoer og tekstbokse altid rammer midten af skærmen. */ align-items: center; /* margin: 0: Fjerner det standard-mellemrum (luft), som browseren normalt lægger rundt om kanten af siden. */ margin: 0; /* text-transform: uppercase: En smart genvej, der automatisk gør alle dine bogstaver på hele siden til STORE BOGSTAVER. */ text-transform: uppercase; /* overflow-x: hidden: Dette er "sikkerhedsnettet". Det skjuler alt det indhold, der ligger ude på siderne (f.eks. dine sektioner før de glider ind), så man ikke kan scrolle vandret ved en fejl. */ overflow-x: hidden; } h1{ font-family: "pacaembu", sans-serif; letter-spacing: 5px; /* Gør overskriften mere luftig og "dyr" at se på */ color: #fff; /* Et blødt hvidt skær kombineret med en orange glød fra maskinrummet */ text-shadow: 0 0 20px rgb(255, 158, 103), 0 0 20px rgba(255, 158, 103, 0.2); } /* ========================= SEKTIONER ========================= */ section { /* font-family: Fortæller browseren, hvilken skrifttype der skal bruges. Her vælges "pacaembu", og 'sans-serif' er reserven, hvis fonten ikke kan findes. */ font-family: "pacaembu", sans-serif; /* font-size: Bestemmer størrelsen på teksten indeni sektionen (30 pixels). */ font-size: 35px; /* font-style: bold: Gør teksten fed (selvom man normalt bruger font-weight: bold). */ font-style: bold; /* width: 100%: Sørger for, at hver sektion strækker sig over hele skærmens bredde. */ width: 100%; /* min-height: 100vh: Sørger for, at sektionen altid fylder mindst 100% af skærmens højde (vh = viewport height). Det giver den "full-screen" effekt. */ min-height: 100vh; /* display: flex: Gør sektionen til en flex-beholder, så vi kan centrere indholdet (tekst/video) indeni den. */ display: flex; /* align-items: center: Centrerer indholdet lodret inde i sektionen. */ align-items: center; /* justify-content: center: Centrerer indholdet vandret inde i sektionen. */ justify-content: center; /* margin: 0: Fjerner al udvendig afstand, så sektionerne ligger helt tæt. */ margin: 0; /* border-radius: 10px: Giver sektionen bløde, afrundede hjørner på 10 pixels. */ border-radius: 10px; /* overflow: hidden: Sikrer, at hvis indholdet (f.eks. en video) stikker udenfor sektionens rammer, så bliver det skjult og ikke vist. */ overflow: hidden; /* color: Sætter standardfarven for teksten til hvid (#ffffff). */ color: #ffffff; /* text-align: center: Sørger for, at tekstlinjerne er centreret midt i sektionen. */ text-align: center; /* transform: translateX(400%): Skubber hele sektionen 400% (af skærmbredden) ud til højre. Det er her, den "gemmer" sig, før du scroller. */ transform: translateX(400%); /* transition: Styrer hastigheden af bevægelsen. Den siger, at ændringer i 'transform' og 'opacity' skal tage 0.8 sekunder og slutte blødt (ease-out). */ transition: transform 0.8s ease-out, opacity 0.8s ease-out; } /* ========================= ANIMATION FRA HØJRE/VENSTRE ========================= */ /* ========================= ANIMATION FRA VENSTRE ========================= */ /* nth-of-type(even): Vælger alle de 'lige' sektioner (nr. 2, 4, 6 osv.). */ section:nth-of-type(even) { /* transform: translateX(-100%): Skubber disse sektioner helt ud til venstre side af skærmen som deres start-position. */ transform: translateX(-100%); } /* section.show: Dette er den vigtigste regel. Når dit JavaScript opdager, at sektionen er synlig, tilføjer det klassen "show". */ section.show { /* transform: translateX(0): Flytter sektionen tilbage til dens naturlige midterposition (0), så den glider ind på skærmen. */ transform: translateX(0); } /* ========================= INDHOLDETS EFFEKTER (.content) ========================= */ .content { /* opacity: 0: Gør indholdet helt usynligt (gennemsigtigt) til at starte med. */ opacity: 0; /* filter: blur(10px): Gør indholdet meget sløret (10 pixels sløring). */ filter: blur(10px); /* transform: translateY(100px): Skubber indholdet 100 pixels nedad, så det kan "stige op", når det bliver vist. */ transform: translateY(100px); /* transition: all 0.8s: Sørger for at alle ændringer (slør, gennemsigtighed og flytning) sker glidende over 0.8 sekunder. */ transition: all 0.8s ease-out; } /* .content.show: Når indholdet skal gøres synligt. */ .content.show { /* opacity: 1: Gør indholdet helt synligt. */ opacity: 1; /* filter: blur(0): Fjerner sløringen helt, så det står skarpt. */ filter: blur(0); /* transform: translateY(0): Flytter indholdet op på sin rette plads. */ transform: translateY(0); } /* ========================= TEKSTBOKSE SPECIFIKT ========================= */ /* section.text-box: Rammer kun de sektioner, der har klassen "text-box". */ section.text-box { /* transform: translateX(-100%): Tvinger alle tekstbokse til at starte ude til venstre, uanset om de er lige eller ulige sektioner. */ transform: translateX(-100%); } /* Når tekstboksen bliver synlig */ section.text-box.show { /* transform: translateX(0): Glider teksten ind fra venstre mod midten. */ transform: translateX(0); } /* ========================= BILLEDER OG VIDEO KOMMER IND FRA VENSTRE ========================= */ /* section:not(.text-box): Denne vælger (selector) rammer alle sektioner, som IKKE har klassen ".text-box". Det vil typisk sige dine billeder og videoer. */ section:not(.text-box) { /* transform: translateX(100%): Skubber disse sektioner 100% ud til HØJRE side af skærmen som deres start-position. */ transform: translateX(100%); } /* section:not(.text-box).show: Her vælges de samme sektioner (billeder/video), men kun når JavaScript har tilføjet klassen ".show". */ section:not(.text-box).show { /* transform: translateX(0): Flytter sektionen tilbage til midten (0), så den glider ind fra højre mod venstre og lander præcis på skærmen. */ transform: translateX(0); } /* ========================= BILLEDER OG VIDEO ========================= */ /* ========================= BILLEDER OG VIDEO ========================= */ /* section img, section video: Rammer alle billeder og videoer, der ligger indeni en sektion. */ section img, section video { /* width: 100% + height: 100%: Tvinger mediet til at fylde hele sektionens bredde og højde. */ width: 100%; height: 100%; /* object-fit: cover: Dette er den vigtigste regel her. Den sørger for, at billedet/videoen fylder hele arealet ud uden at blive strakt skævt. Den klipper hellere lidt af kanterne for at bevare proportionerne (ligesom et tapet). */ object-fit: cover; /* display: block: Fjerner et lille standard-mellemrum, som browsere nogle gange lægger under billeder, så alt flugter perfekt. */ display: block; } /* ========================= TEKSTBOKSE ========================= */ /* .text-box: Rammer selve containeren, der holder din tekst. */ .text-box { /* display: flex + flex-direction: column: Gør det muligt at stable overskrift (h2) og tekst (p) lodret oven på hinanden. */ display: flex; flex-direction: column; /* align-items: center: Centrerer overskriften og teksten vandret inde i boksen. */ align-items: center; /* max-width: 90%: Sørger for, at teksten aldrig rammer helt ud til kanten af skærmen, hvilket giver luft og gør det pænere at se på. */ max-width: 90%; /* padding: 10px: Indvendig afstand fra kanten af boksen ind til teksten. */ padding: 10px; /* min-height: 100vh: Sikrer at tekstboksen altid fylder mindst hele skærmens højde. */ min-height: 100vh; } /* .text-box p: Rammer specifikt brødteksten (paragraffen) inde i tekstboksen. */ .text-box p { /* font-size: 20px: Sætter størrelsen på din brødtekst. */ font-size: 25px; /* max-width: 80%: Gør tekstlinjerne lidt kortere, så de er behagelige for øjet at læse. */ max-width: 80%; /* line-height: 1.5: Sætter afstanden mellem linjerne. 1.5 giver god luft, så teksten ikke ser mast ud. */ line-height: 1.5; /* text-transform: none: Fortæller browseren, at her skal den IKKE bruge store bogstaver, selvom vi bad 'body' om at gøre det tidligere. Det gør længere tekster nemmere at læse. */ text-transform: none; /* color: #ff9e67: Sætter din specifikke orange/fersken farve på teksten. */ color: #ff9e67; font-family: "pacaembu", sans-serif; font-weight: normal; /* font-style: italic: Gør teksten kursiv for at give den et mere elegant og kunstnerisk look. */ font-style: italic; text-shadow: 0 0 40px rgb(255, 158, 103), 0 0 20px rgba(255, 158, 103, 0.2); } /* ========================= SCROLL ANIMATION ========================= */ /* ========================= INDHOLDETS START-TILSTAND ========================= */ .content { /* opacity: 0: Gør indholdet 100% gennemsigtigt (usynligt), så det ikke kan ses, før vi er klar til at vise det. */ opacity: 0; /* filter: blur(10px): Tilføjer en kraftig sløring på 10 pixels. Det giver en drømmende effekt, før indholdet bliver skarpt. */ filter: blur(10px); /* transform: translateY(100px): Skubber indholdet 100 pixels ned ad Y-aksen (lodret). Det betyder, at det starter "under" sin normale plads. */ transform: translateY(100px); /* transition: all 0.8s: Fortæller browseren, at alle ændringer (opacity, blur og flytning) skal ske glidende over 0.8 sekunder. ease-out: Gør at bevægelsen starter hurtigt og lander blødt. */ transition: all 0.8s ease-out; transition: transform 1s ease-out, opacity 2s ease-out; } /* ========================= INDHOLDETS SLUT-TILSTAND (Når det vises) ========================= */ /* .content.show: Denne regel træder i kraft, når JavaScript tilføjer "show"-klassen. */ .content.show { /* opacity: 1: Gør indholdet 100% synligt. */ opacity: 1; /* filter: blur(0): Fjerner al sløring, så teksten eller billedet står helt skarpt. */ filter: blur(0); /* transform: translateY(0): Flytter indholdet tilbage til sin oprindelige "0"-position (glider op nedefra). */ transform: translateY(0); } /* ========================= SPECIFIK VIDEO (#maling) ========================= */ /* #maling: Dette er en ID-selector. Den rammer kun ét specifikt element i din HTML, som har id="maling". */ #maling { /* width: 90%: Fortæller videoen, at den skal fylde 90% af skærmens bredde. Dette er super vigtigt på mobilen, så videoen ikke ryger ud over kanten. */ width: 90%; /* max-width: 700px: Dette er "loftet". Selvom skærmen er meget bred (f.eks. på en computer), må videoen aldrig blive bredere end 700 pixels. Det holder den elegant. */ max-width: 700px; /* height: auto: Sørger for, at videoens højde automatisk følger med bredden, så billedet ikke bliver mast eller trukket skævt. */ height: auto; /* transition: opacity 4s ease: Her skaber du en meget langsom og drømmende effekt. Når videoen bliver synlig, tager det hele 4 sekunder at fade helt ind. */ transition: opacity 8s ease; /* display: block: Gør videoen til et "blok-element", hvilket er nødvendigt for at kunne bruge 'margin: 0 auto' til at centrere den. */ display: block; /* margin: 0 auto: Dette er standard-måden at centrere et element vandret. 0 betyder ingen afstand i top/bund, og 'auto' fordeler pladsen ligeligt på siderne. */ margin: 0 auto; /* background-size: cover: Selvom det er en video, sikrer denne regel, at baggrundsbilledet (hvis du har sat et 'poster'-image) dækker hele arealet. */ background-size: cover; } /* ========================= FADE VIDEO (En roligere animation) ========================= */ .fade-video { /* transform: none: Her fjerner vi "translateX" eller "translateY". Det betyder, at videoen ikke bevæger sig ind fra siden, men bliver liggende stille. */ transform: none; /* opacity: 0: Videoen starter med at være helt usynlig. */ opacity: 0; /* transition: opacity 0.8s ease: Fortæller browseren, at det kun er synligheden (opacity), der skal animeres glidende over 0.8 sekunder. */ transition: opacity 0.8s ease; } /* .fade-video.show: Når videoen er klar til at blive set (via JavaScript). */ .fade-video.show { /* opacity: 1: Gør videoen 100% synlig. */ opacity: 1; } /* ========================= FARVEVIDEO (#farver) ========================= */ #farver { /* width: 100% + height: 100%: Sørger for, at videoen med farver strækker sig helt ud til kanterne af sin sektion. */ width: 100%; height: 100%; /* object-fit: cover: Beskærer videoen så den fylder hele rammen uden at blive strukket skævt. */ object-fit: cover; /* gap: 0: Fjerner eventuelle små mellemrum omkring videoen (bruges mest hvis videoen lå i et flex-grid). */ gap: 0; } /* ========================= TEKST ANIMATION (h2 og p) ========================= */ /* .text-box h2, .text-box p: Rammer både overskrifter (h2) og brødtekst (p) inde i dine tekstbokse. */ .text-box h2, .text-box p { /* opacity: 0: Gør teksten helt usynlig til at starte med. */ opacity: 0; /* transform: translateY(60px) scale(0.95): Her sker to ting: 1. translateY(60px): Teksten starter 60 pixels længere nede. 2. scale(0.95): Teksten er 5% mindre end sin normale størrelse. Det giver en effekt af, at den "vokser" frem mod dig. */ transform: translateY(60px) scale(0.95); /* filter: blur(8px): Gør teksten sløret, så den ser "drømmende" ud før den falder på plads. */ filter: blur(8px); /* transition: all 0.8s ease: Sørger for, at overgangen fra usynlig/sløret til skarp og klar tager 0.8 sekunder. */ transition: all 0.8s ease; } /* .text-box.show h2: Når tekstboksen bliver vist, rammer vi overskriften. */ .text-box.show h2 { /* opacity: 1: Gør overskriften synlig. */ opacity: 1; /* transform: translateY(0) scale(1): Flytter h2 op på sin plads (0) og gør den til fuld størrelse (scale 1). */ transform: translateY(0) scale(1); /* filter: blur(0): Fjerner sløringen helt. */ filter: blur(0); } /* .text-box.show p: Her rammer vi brødteksten i den viste boks. */ .text-box.show p { /* De samme regler som for h2, så den også bliver skarp og synlig. */ opacity: 1; transform: translateY(0) scale(1); filter: blur(0); /* transition-delay: 0.3s: Dette er "guldet"! Det betyder, at teksten venter 0.3 sekunder med at starte sin animation. Det gør, at overskriften kommer først, og teksten følger lige efter. */ transition-delay: 0.5s; } /* ========================= NYT: MOBIL-OPTIMERINGS FILTER (Media Query) ========================= */ /* @media (max-width: 768px): Dette er en "betingelse". Den siger: "Kør kun koden herunder, HVIS skærmen er 768 pixels bred eller mindre" (hvilket dækker de fleste tablets og alle mobiler). */ @media (max-width: 768px) { /* section: Her justerer vi indstillingerne for dine sektioner på mobilen. */ section { /* font-size: 22px: Vi skruer ned fra 30px til 22px, så teksten ikke bliver for voldsom på den lille skærm. */ font-size: 22px; /* transform: translateX(100%): På computeren startede vi ved 400%. På mobil er 100% rigeligt, da skærmen er smal. Det gør også, at telefonen ikke skal "regne" så meget, hvilket giver et bedre flow. */ transform: translateX(100%); } /* .text-box p: Justeringer af brødteksten på mobilen. */ .text-box p { /* font-size: 16px: Vi gør teksten lidt mindre (fra 20px til 16px) for at sikre, at man ikke skal scrolle alt for længe for at læse en sætning. */ font-size: 16px; /* max-width: 95%: På computeren brugte vi 80%, men på mobil har vi brug for at bruge næsten hele skærmens bredde (95%) for at få plads. */ max-width: 95%; } /* section:nth-of-type(even), section.text-box: Her samler vi to regler i én (dem der skal starte ude til venstre). */ section:nth-of-type(even), section.text-box { /* transform: translateX(-100%): Sørger for at hver anden sektion OG alle tekstbokse starter præcis 1 skærmbredde ude til venstre. */ transform: translateX(-100%); } }