/*!
 * Copyright (c) 2025/2026 WADe Clarke - All Rights Reserved
 *
 * This script is copyrighted and may not be used without
 * permission outside of the Inteactive Media course in
 * the Interactive Media Design program at Durham College.
 * Copying and re-posting on another site or app without
 * licensing is strictly prohibited.
 *
 * Contact me if you would like to license this script or
 * if you are in need of a custom script at
 * wade.clarke@durhamcollege.ca
**/

/* DO NOT EDIT START ///////////////////////////////////////////////// */

/* Reset default margin and set background color for the entire page */
html,
body {
    margin: 0;
    background-color: #000000; /* Black background to enhance product visibility */
}

/* Center the main container absolutely in the viewport with fixed dimensions */
main {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1920px;
    height: 1080px;
    overflow: hidden; /* Prevent overflow content from being visible */
}

/* Container for image sequence, positioned absolutely at top-left */
#image-sequence  {
    position: absolute;
    top: 0;
    left: 0;
    display: flex; /* Align images horizontally */
}

/* Containers for stop points and highlights, positioned off-screen initially */
#stop-point-container, #highlight-container {
    position: absolute;
    top: 0;
    left: 1920px; /* Positioned just outside the main view */
    display: flex;
}

/* Hide highlight container initially */
#highlight-container {
    visibility: hidden;
}

/* Flex container inside highlight container for vertical stacking */
.inside-highlight-container {
    display: flex;
    flex-direction: column;
    width: 1920px;
}

/* Screen saver overlay positioned over entire viewport with high z-index */
#screen-saver {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000; /* High stacking order to overlay other elements */
}

/* Set fixed dimensions for all images and videos to match main container */
img,
video {
    width: 1920px;
    height: 1080px;
}

/* Position backpack name and brand logo absolutely with very high z-index */
#backpack-name, #brand-logo {
    position: absolute;
    z-index: 20000; /* Ensure these elements appear above most others */
}

/* Hot spots are interactive areas, hidden by default */
.hot-spot {
    position: absolute;
    z-index: 10000;
    display: none; /* Hidden until activated */
    cursor: pointer;
}

/* Highlight style for visible hot spots */
.hot-spot-show {
    background: rgba(255, 0, 212, 0.4); /* Semi-transparent bright magenta */
}

/* Navigation buttons container styling */
.nav-btns {
    position: absolute;
    top: 0;
    z-index: 21000; /* On top of most elements for easy interaction */
    opacity: 0.2; /* Slightly transparent by default */
    display: flex;
    align-items: center;
    width: 150px;
    height: 100%;
    cursor: pointer;
    transition: all 0.5s ease-in-out; /* Smooth opacity changes */
}

/* Style for chevron icons inside navigation buttons */
.nav-btns > span {
    display: inline-block;
    line-height: 1;
    transform: scale(0.5,1); /* Scale horizontally */
    font-weight: bold;
    font-size: 450px; /* Large size for visibility */
}

/* Hide navigation buttons by making them fully transparent and disabling pointer events */
.nav-btns-hide {
    opacity: 0;
    pointer-events: none;
}

/* Left navigation button positioning and background gradient */
#rotate-left {
    left: 0;
    justify-content: flex-start;
    background-image: linear-gradient(to right, rgba(255,255,255,0.5), rgba(255,255,255,0));
}

/* Left nav button chevron animation */
#rotate-left > span {
    animation: left-nav 3s 0.5s ease-in-out infinite;
}

/* Right navigation button positioning and background gradient */
#rotate-right {
    right: 0;
    justify-content: flex-end;
    background-image: linear-gradient(to left, rgba(255,255,255,0.5), rgba(255,255,255,0));
}

/* Right nav button chevron animation */
#rotate-right > span {
    animation: right-nav 3s 0.5s ease-in-out infinite;
}

/* Class to make navigation buttons fully visible */
.rotate-hover {
    opacity: 1;
}

/* Keyframes for left navigation chevron padding animation */
@keyframes left-nav {
    0%, 100% {
        padding-left: 0;
    }
    20% {
        padding-left: 50px; /* Move chevron right */
    }
    40% {
        padding-left: 0;
    }
}

/* Keyframes for right navigation chevron padding animation */
@keyframes right-nav {
    0%, 100% {
        padding-right: 0;
    }
    20% {
        padding-right: 50px; /* Move chevron left */
    }
    40% {
        padding-right: 0;
    }
}

/* Pack bar container at bottom with flex layout and transition for sliding in/out */
.pack-bar {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 100px;
    padding: 10px;
    box-sizing: border-box;

    position: absolute;
    left: 0;
    right: 0;
    bottom: -100px; /* Initially hidden below viewport */
    width: 100%;
    z-index: 11000; /* Above most elements but below nav buttons */
    transition: all 0.5s ease-in-out;
}

/* Images inside pack bar sized proportionally */
.pack-bar img {
    height: 100%;
    width: auto;
}

/* Show pack bar by sliding it up */
.pack-bar-show {
    bottom: 50px;
}

/* Close highlight overlay covering entire viewport, hidden by default */
#close-highlight {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 12000; /* Above pack bar but below nav buttons */
    top: 0;
    left: 0;
    display: none;
    cursor: pointer;
}

/* Class to force display of close highlight overlay */
.show-close-highlight {
    display: block !important;
}

/* Idle timer overlay centered with high z-index and hidden initially */
#idle-timer {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1920px;
    height: 1080px;
    z-index: 9900; /* Below screen saver */
    visibility: hidden;
}

/* Content box inside idle timer with shadow and centered text */
.idle-timer-content {
    display: inline-block;
    text-align: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

/* Remove top margin from h2 inside idle timer */
.idle-timer-content h2 {
    margin-top: 0;
}

/* Remove bottom margin from h3 inside idle timer */
.idle-timer-content h3 {
    margin-bottom: 0;
}

/* DO NOT EDIT END ///////////////////////////////////////////////// */


/* EDITABLE CSS START ///////////////////////////////////////////////// */

/* Position and size for backpack name element */
#backpack-name {
    top: 50px;
    left: 50px;
    height: 120px;
    width: auto; /* Width adjusts automatically to maintain aspect ratio */
}

/* Position and size for brand logo element */
#brand-logo {
    top: 50px;
    right: 50px;
    height: 120px;
    width: auto; /* Width adjusts automatically to maintain aspect ratio */
}

/* Color customization for navigation chevron icons */
.nav-btns > span {
    color: #ab2d6e; /* White color for good contrast */
}

/* Background color for the sequence indicator bar */
.pack-bar {
    background-color: #ab2d6e; /* White background for clarity */
}

/* filter colour generator */
/* https://codepen.io/sosuke/pen/Pjoqqp */

/* Visual filter to generate a light color effect on pack bar images */
/* Uses CSS filter properties for hue and brightness adjustments */
.pack-bar img {
   /* light colour */
   filter: invert(96%) sepia(7%) saturate(230%) hue-rotate(306deg) brightness(65%) contrast(88%);
}

/* Filter for pack stop points to create a midtone color */
/* Uses !important to override other styles */
.pack-stop-point {
   /* midtone colour */
   /* requires !important */
   filter: invert(96%) sepia(7%) saturate(230%) hue-rotate(306deg) brightness(109%) contrast(88%) !important;
}

/* Filter for pack highlights to create a darker color */
/* Uses !important to ensure visual priority */
.pack-highlight {
    /* dark colour */
   /* requires !important */
    filter: invert(46%) sepia(25%) saturate(636%) hue-rotate(46deg) brightness(158%) contrast(116%) !important;
}

/* Styling for idle timer warning box */
/* Sets font, color, size, background and padding for readability */
.idle-timer-content {
    font-family: "Sofia Sans", sans-serif;
    color: #FFF;
    font-size: 1.5em;
    background-color: #ab2d6e; /* Muted blue background */
    padding: 40px;
    border-radius: 5px;
}

/* EDITABLE CSS END ///////////////////////////////////////////////// */