/* Core Layout */
html {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: #f4f4f4;
  color: #111111;
  overflow-x: hidden;
  
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: #f4f4f4;
  color: #111111;
  overflow: hidden;
}

/* Target all elements that are inherently "clickable" */
a, 
button, 
[role="button"],
input[type="submit"], 
input[type="button"], 
input[type="reset"], 
summary,
.clickable-class {
  /* Replace 'custom-hand.png' with your file path */
  /* The 'pointer' at the end is the fallback if the image fails */
  cursor: url('cursors/clickcursor.webp'), pointer;
}

#hero-container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center;
  background-color: #f4f4f4;
  /* Prevents text-selection cursor from appearing over the hero text */
  user-select: none;
  cursor: auto; /* This allows the JS to take over */
}

.hero-content *, 
#hero-container .lander-img,
#hero-container div {
  cursor: inherit !important;
}

#hero-container video {
    /* Ensures the video elements don't try to show their own 'pointer' */
    pointer-events: none; 
    cursor: inherit !important;
}

.hero-content {
  z-index: 2001;
  text-align: center;
  pointer-events: none;
  cursor: inherit !important;
}

#random-video, #random-video2, #random-video3, #random-video4, #random-image, #random-image2, #random-image3 {
  position: absolute;
  z-index: 20000;
  pointer-events: none;
}

#random-video, #random-video2, #random-video3, #random-video4 { width: 250px; height: auto; }
#random-image, #random-image2, #random-image3 { width: 150px; height: auto; }

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

.navigation {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px; 
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 50;
  gap: 3rem; 
}

.navigation a {
  text-decoration: none;
  color: #111111;
  font-size: 1.2rem;
  text-transform: lowercase;
  transition: all 0.2s ease;
  cursor: pointer !important;
  font-size: 0.95vw;
}

.navigation a:hover { font-style: italic; }

#work { position: relative; z-index: 5; }

h1, h2 { font-size: 0.8vw; margin: 0; }
h2 { line-height: 1; }
h3, p2 { font-size: 10pt; margin: 0; line-height: 2; font-style: italic; }
p { font-size: 0.65vw;}
p2 { color: #b4b4b4; font-size: 0.65vw;}
p3 { font-size: 10pt; margin: 0; line-height: 0; font-style: italic;}
a {font-size: 0.7vw;}

/* --- Project Logic --- */

.project {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-bottom: 7vh;
  min-height: 300px;
  text-align: center;
  overflow: visible;
}

.project-info {
  position: absolute;
  z-index: 1;
  width: auto; 
  pointer-events: auto;
  transition: none !important;
  box-shadow: 3px 2px 7px 4px rgba(0, 0, 0, 0.1);
  background-color: #f4f4f4; /* Standard background for text/standard images */
}

/* Specific Override for SOAF Photos to remove empty side space */
.custom-soaf-photo .project-info {
  width: fit-content !important;
  min-width: 0 !important;
  background-color: transparent !important; /* Removes box bleed around image */
  padding: 0 !important;
  line-height: 0; /* Removes bottom ghost gap */
}

.custom-soaf-photo img {
  width: 12vw !important; /* Controls the size of the scattered photos */
  height: auto !important;
  margin: 0 !important;
  display: block;
}

.project-info.hidden {
  display: none;
}

.project h2, .project .project-content {
  max-width: 20vw;
  margin: 0 auto;
  cursor: url('cursors/clickcursor.webp'), auto !important;
}

.project p {
  line-height: 1.5;
  font-size: 0.6vw;
  z-index: 1002;
}

.project img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.title-image-aspect-ratio-fix {
  width: 100% !important;      /* Take up the full width of the container */
  max-width: 600px !important;  /* But never get bigger than 600px */
  height: auto !important;     /* Let the height adjust... */
  aspect-ratio: 2 / 3 !important; /* ...OR keep the 600/900 ratio (which is 2:3) */
  object-fit: cover !important; 
  object-position: center !important; 
  display: block;
  margin: 0 auto;
}

/* --- Media Players --- */

.audio-player-position {
  width: 25vw;
 
}

audio {
  width: 25vw;
  height: 3vw;
}

.video-shown {
  width: 100%; 
  height: auto;
  display: block;
}

.custom-size-video { width: 280px; height: auto; }
.custom-size-video-instagram { width: 150px; height: auto; }

/* --- Text & Layout Elements --- */

.project-info-text { 
  max-width: 15vw; 
  height: auto; 
  padding: 10px; 
  background-color: #f4f4f4; /* Ensures text has a solid box for shadow */
  z-index: 1002;
}

.project-info-text p { 
  margin: 0; 
  padding: 0; 
}

/* Flexible Height Fix */
.project-image {
  width: 100%;
  max-width: 600px;
  /* Look for --img-height, otherwise use auto */
  height: var(--img-height, auto) !important; 
  object-fit: cover; /* This prevents the "stretch" and allows the "zoom" */
  cursor: pointer;
  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.1);
  display: block;
  margin: 0 auto;
}

.project-content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.spnr-text-position { top: 35%; left: 125%; text-align: left; }
.playlist-link-position { top: 55%; left: 125%;}
.spnr-video-position { top: 49%; left: -39%;}

.concept-line {
  border: none;
  border-top: 1px solid #7a7a7a;
  width: 100%;
  margin-bottom: 3rem;
}

/* --- Info & Canvas Section --- */

#info {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

.info-content { z-index: 15; width: 30vw; font-size: 10pt; cursor: inherit !important;}

info-content p {
  font-size: 0.65vw;
}

#p5-canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-top: 1px solid #7a7a7a;
  border-bottom: 1px solid #7a7a7a;
}

.info-image { width: 11rem; height: auto; margin-bottom: 2rem; cursor: inherit !important;}

footer {
  text-align: right;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  padding: 1rem 2rem;
  pointer-events: none; 
  z-index: 40;
  font-size: 0.6rem;
}

footer p, footer a { pointer-events: auto; font-size: 0.55vw;}

.hidden { display: none !important;}


/* Ensure the SoundCloud player fits nicely in your project boxes */
.project-info iframe {
  border: none;
  display: block;
  box-shadow: 3px 2px 7px 4px rgba(0, 0, 0, 0.1);
}

/* --- YouTube Link Box Customization --- */

.yt-link-wrapper {
  display: block;
  text-decoration: none;
  position: relative;
  overflow: hidden; /* Keeps everything inside the box */
  background-color: #000; /* Backdrop for the image */
}

/* The Thumbnail Image */
.yt-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: none; 
  transition: transform 0.1s ease, filter 0.1s ease;
}

/* The Dark Overlay + Play Button Container */
.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.1s ease;
}

/* The "▶" Icon */
.play-icon {
  color: #f4f4f4; /* Using your site's light gray */
  font-size: 50px;
  opacity: 0.9;
  transition: all 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy feel */
  user-select: none;
}

/* --- Hover States --- */

.yt-link-wrapper:hover .yt-thumb {
  transform: scale(1.01); /* Slight zoom in */

}

.yt-link-wrapper:hover .play-overlay {
  background: rgba(0, 0, 0, 0.1); /* Brighten the whole box */
}

.yt-link-wrapper:hover .play-icon {
  transform: scale(1.03); /* Make the play button grow */
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
  filter: blur(2px);
}

/* Ensure the scatter logic doesn't add weird gaps */
.project-info:has(.yt-link-wrapper) {
  padding: 0 !important;
  line-height: 0;
}

/* Container must be relative so the text can be absolute to it */
.video-container {
  position: relative;
  overflow: hidden;
}

/* 1. Style the text position and initial state */
.video-container p {
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Precise centering trick */
  
  width: 90%; /* Keep text from hitting the edges */
  margin: 0;
  z-index: 10; /* Ensure it stays above the play icon */
  
  /* Styling to make it readable over an image */
  color: #f4f4f4; 
  font-size: 14pt;
  font-weight: bold;
  text-align: center;
  
  /* Hidden state */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* Allows clicks to pass through to the link */
}

.carousel-container {
  background-color: #f4f4f4;

  user-select: none;
  position: absolute;
}

.carousel-slides img {
  width: 100%;
  height: auto;
  display: none; /* Hidden by default */
}

.carousel-slides img.active {
  display: block; /* Only show the active one */
}




/* BREYTA Í SPECIAL CAROUSEL CURSOR */


/* Custom cursor for the small carousel on the page */
.carousel-container img {
  cursor: url('cursors/carouselcursor.webp'), w-resize !important;
}

/* Keep the expand button as a pointer */
.fullscreen-btn {
  cursor: pointer !important;
}

.fullscreen-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(244, 244, 244, 0.8);
  color: #111;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
  z-index: 1010;
  font-size: 16px;
  transition: background 0.2s;
  border: 1px solid rgba(0,0,0,0.1);
}

.fullscreen-btn:hover {
  background: #fff;
  transform: scale(1.1);
}

/* 1. Style the text initial state */
.yt-link-wrapper p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  margin: 0;
  z-index: 10;
  text-align: center;
  /* BARELY VISIBLE STATE */
  opacity: 0.15; /* 15% visibility - tweak this as needed */
  transition: opacity 0.1s ease; /* Longer duration for a smoother 'ease' */
  pointer-events: none; 
}

/* 2. Full opacity on hover */
.yt-link-wrapper:hover p {
  opacity: 1; /* Pops into 100% visibility */
}

#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;   /* 100% of Viewport Width */
  height: 100vh;  /* 100% of Viewport Height */
  background: #f4f4f4; /* Make sure this isn't transparent! */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  cursor: none; /* Hides the real mouse arrow */
  transition: opacity 0.8s ease;
}

#moving-loader-gif {
  position: fixed; /* This is key! It lets the GIF move anywhere */
  z-index: 100001; /* Must be higher than the white background */
  pointer-events: none; /* Allows you to click "through" the GIF */
  
  /* This ensures the CENTER of the GIF is on your mouse tip */
  transform: translate(-50%, -50%); 
  
  /* Initial position off-screen so it doesn't flash in the middle */
  top: -100px;
  left: -100px;
  
  width: 80px; /* Adjust your size here */
  height: auto;
}

/* Ensure the content inside doesn't override the cursor */
#loading-screen * {
  cursor: url('cursors/loading\ cursor1.gif'), wait;
}

.hidden-loader {
  opacity: 0;
  pointer-events: none;
}

#overlay-instructions {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px); /* This creates the frost */
    -webkit-backdrop-filter: blur(15px);
    transition: opacity 0.8s ease, visibility 0.8s;

}

.glass-card {
    background-color: #f4f4f400;
    padding: 40px;
    text-align: center;
  
    max-width: 400px;
}

.instruction-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin: 30px 0;
}

.step span { font-size: 24px; display: block; margin-bottom: 10px; }
.step p { font-size: 11px; letter-spacing: 1px; }

.start-btn {
    margin-top: 20px;
    padding: 15px 40px !important;
    font-weight: bold;
    letter-spacing: 2px;
    background: #000 !important; /* Make it solid black to stand out */
    color: #f4f4f4 !important;
}

.start-btn:hover {
    background: #333 !important;
    transform: scale(1.05); /* Small pop effect */
}

.timer-text { font-size: 10px; color: #888; margin-top: 15px; }

/* Class to hide it */
.hide-overlay {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.control-btn.active {
    background: #000;
    color: #f4f4f4;
    border-color: #000;
}

/* This flips 0 to 255 and 255 to 0 instantly */
.inverted-canvas {
    filter: invert(100%) hue-rotate(180deg);
}

/* Ensure the UI doesn't get inverted along with the canvas */
#lab-controls, #overlay-instructions {
    filter: none !important;
}

/* Optional: Add a small hover effect so users know it's a link */
.back-link:hover {
    opacity: 0.7;
}

#lab-portal {
    position: fixed !important;
    top: 20% !important;
    left: 90% !important;
    z-index: 999999999 !important;
    
    /* Variables for JS magic */
    --mx: 0px;
    --my: 0px;
    --rotX: 0deg;
    --rotY: 0deg;

    /* Base state: Hidden and centered */
    transform: translate(-50%, -50%) scale(0.001);
    opacity: 0;
    pointer-events: none;

    transform-style: preserve-3d;
    
    /* This handles the 'weight' of the mouse movement */
    transition: opacity 0.5s ease;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

#lab-portal img {
    width: 280px;
    height: auto;
    display: block;
    border: 1px solid rgba(255,255,255,0.2);

    will-change: transform, filter;
    
    /* This forces the GPU to treat it as a 3D layer even when it's not moving */
    transform: translateZ(0); 
    
    /* Smoother rendering for transparent edges */
    backface-visibility: hidden;
}

/* THE TRIGGER CLASS */
/* Must match portal.classList.add('float-3d') in your JS */
/* THE ANIMATION */
@keyframes magicSwoop {
    0% {
        /* Start with opacity 0.01 instead of 0 */
        opacity: 0.01; 
        transform: translate(1500px, -800px) translateZ(-2000px) rotateY(-180deg) scale(0.01);
    }
    1% {
        /* Force it to full opacity almost instantly */
        opacity: 1;
        /* Stay at the start position for just a tiny fraction of time */
        transform: translate(1500px, -800px) translateZ(-2000px) rotateY(-180deg) scale(0.01);
    }
    100% {
        opacity: 1;
        transform: translate(calc(-50% + var(--mx)), calc(-50% + var(--my))) 
                   rotateX(var(--rotX)) 
                   rotateY(var(--rotY)) 
                   scale(1);
    }
}

.float-3d {
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: none;
    animation: magicSwoop 3.5s cubic-bezier(0.19, 1, 0.22, 1) both;
}

/* --- EXIT --- */
.exit-portal {
    pointer-events: none !important;
    transition: none !important;
    /* We fly away faster (2s) than we arrived */
    animation: magicExit 2s cubic-bezier(0.47, 0, 0.74, 0.71) forwards !important;
}

@keyframes magicExit {
    0% {
        opacity: 1;
        transform: translate(calc(-50% + var(--mx)), calc(-50% + var(--my))) rotateX(var(--rotX)) rotateY(var(--rotY)) scale(1);
    }
    100% {
        opacity: 0;
        /* Fly away to the opposite side (Left and Down) */
        transform: translate(1500px, -800px) translateZ(-2000px) rotateY(180deg) scale(0.01);
    }
}

video {
    background: #f4f4f4; /* Match your page background */
    transition: opacity 0.5s ease;
    opacity: 0;
}

video.loaded {
    opacity: 1;
}