/* ============================================
   FONT FACE
   ============================================ */
@font-face {
    font-family: 'Gregorian';
    src: url('./font/GregorianFLF.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ============================================
   CSS CUSTOM PROPERTIES - Desktop Defaults
   ============================================ */
:root {
    /* Layout */
    --max-container-width: 900px;
    --container-padding: 10px;
    --page-wrapper-display: flex;

    /* Typography */
    --nav-font-size: 18px;
    --sidebar-font-size: 14px;
    --cv-entry-font-size: inherit;

    /* Spacing */
    --nav-padding: 20px 10px;
    --nav-sep-margin: 0 15px;
    --nav-sep-height: 1em;
    --sidebar-padding: 20px 10px;
    --sidebar-gap: 0;
    --sidebar-width: 150px;

    /* Gallery */
    --gallery-gap: 177px;
    --gallery-padding-top: 47px;
    --gallery-padding-bottom: 66px;
    --gallery-img-max-height: 80vh;

    /* Line Heights */
    --line-height-paragraph: 2.68;
    --line-height-cv: 1.4;

    /* Index Page Specifics */
    --dragon-transform: translate(-136px, -330px);
    --dragon-margin-bottom: 0;
    --dragon-max-width: none;
    --castle-max-width: none;
    --welcome-title-br: none;

    /* Past Page Specifics */
    --bottom-gifs-width: 500px;
    --bottom-gifs-transform: scale(1.3);

    /* Gallery Page Specifics */
    --gallery-sidebar-position: fixed;
    --gallery-sidebar-left: calc(50% - 450px);
    --gallery-sidebar-top: 60px;
}

/* ============================================
   BASE STYLES
   ============================================ */
body {
    background: url(./fjorsk.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #000000;
    font-family: 'Times New Roman', Times, serif;
    margin: 0;
    cursor: url('./cursor-frames/frame_03.png'), auto;
    display: block;
    min-height: 100vh;
    min-width: 100vw;
    height: auto;
    overflow: auto;
    color: white;
}

body.cursor-alt {
    cursor: url('./cursor-frames/frame_05.png'), auto;
}

a {
    color: white;
    text-decoration: underline;
    cursor: url('./cursor-frames/frame_08.png'), pointer;
}

p {
    line-height: var(--line-height-paragraph);
}

/* ============================================
   NAVIGATION
   ============================================ */
nav {
    width: var(--max-container-width);
    margin: 0 auto;
    padding: var(--nav-padding);
    font-size: var(--nav-font-size);
    box-sizing: border-box;
    display: block;
    position: relative;
    z-index: 10;
}

nav a {
    color: white;
    text-decoration: none;
}

nav a:hover {
    text-decoration: underline;
}

.nav-sep {
    height: var(--nav-sep-height);
    width: auto;
    vertical-align: middle;
    margin: var(--nav-sep-margin);
}

/* ============================================
   CONTENT
   ============================================ */
.content {
    white-space: normal;
    display: block;
    width: 100%;
}

/* Container - base */
.container {
    background: transparent;
    font-family: 'Times New Roman', Times, serif;
    height: auto;
    overflow: visible;
    color: white;
    min-height: 100vh;
    position: relative;
    z-index: 0;
    box-sizing: border-box;
}

/* Page wrapper for sidebar layouts */
.page-wrapper {
    display: var(--page-wrapper-display);
    width: var(--max-container-width);
    margin: 0 auto;
    min-height: 100vh;
}

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar {
    width: var(--sidebar-width);
    padding: var(--sidebar-padding);
    position: sticky;
    top: 0;
    height: fit-content;
    font-size: var(--sidebar-font-size);
}

.sidebar-item {
    padding: 5px 0;
    cursor: pointer;
    color: #888;
}

.sidebar-item:hover {
    color: #ccc;
}

.sidebar-item.active {
    color: white;
}

.sidebar-item.indent {
    padding-left: 15px;
    font-size: 13px;
}

.sidebar-item.parent {
    color: #888;
}

/* ============================================
   SECTIONS
   ============================================ */
.section {
    display: none;
}

.section.active {
    display: block;
}

/* ============================================
   TRANSPARENT BACKGROUND LAYER
   ============================================ */
#transparent {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -1;
}

#transparent img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
}

#transparent img[src*="lightning"] {
    top: -150px;
    height: auto;
}

/* ============================================
   GIF CONTAINER
   ============================================ */
.gif-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

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

/* ============================================
   GALLERY GRID
   ============================================ */
.gallery-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gallery-gap);
    padding-top: var(--gallery-padding-top);
    padding-bottom: var(--gallery-padding-bottom);
}

.gallery-grid img {
    max-width: 100%;
    max-height: var(--gallery-img-max-height);
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ============================================
   INDEX PAGE SPECIFICS
   ============================================ */
#castle-image {
    max-width: var(--castle-max-width);
}

#dragon-image {
    transform: var(--dragon-transform);
    margin-bottom: var(--dragon-margin-bottom);
    max-width: var(--dragon-max-width);
}

.welcome-title br {
    display: var(--welcome-title-br);
}

.artist-name {
    font-family: 'Gregorian', 'Times New Roman', serif;
}

/* ============================================
   PAST PAGE SPECIFICS
   ============================================ */
.cv-entry {
    line-height: var(--line-height-cv);
    margin-bottom: 0.68em;
    font-size: var(--cv-entry-font-size);
}

.bottom-gifs {
    margin-top: 2em;
}

.bottom-gifs img {
    transform: var(--bottom-gifs-transform);
    transform-origin: left top;
    display: block;
    width: var(--bottom-gifs-width);
}

.bottom-gifs img:last-child {
    margin-top: -10px;
}

/* ============================================
   GALLERY PAGE SPECIFICS
   ============================================ */
.gallery-page .sidebar {
    position: var(--gallery-sidebar-position);
    left: var(--gallery-sidebar-left);
    top: var(--gallery-sidebar-top);
    z-index: 5;
    background: transparent;
}

.gallery-page .container {
    width: 100%;
    padding: 0 30px;
}

.gallery-page .page-wrapper {
    display: block;
    width: 100%;
}

/* ============================================
   TOUCH DEVICE - Disable Custom Cursors
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    body, body.cursor-alt, a {
        cursor: auto;
    }
}

/* ============================================
   RESPONSIVE: Master Mobile Selector (1024px)
   ============================================ */
@media (max-width: 1024px) {
    :root {
        /* Layout - Full width */
        --max-container-width: 100%;
        --container-padding: 4vw;
        --page-wrapper-display: block;

        /* Typography - clamp() for fluid scaling */
        --nav-font-size: clamp(1rem, 4vw, 1.5rem);
        --sidebar-font-size: clamp(0.75rem, 3vw, 1rem);
        --cv-entry-font-size: clamp(0.875rem, 3.5vw, 1rem);

        /* Spacing - viewport relative */
        --nav-padding: 2.5vh 4vw;
        --nav-sep-margin: 0 2.5vw;
        --nav-sep-height: 1.2em;
        --sidebar-padding: 2vh 2vw;
        --sidebar-gap: 3vw;
        --sidebar-width: 100%;

        /* Gallery - viewport relative */
        --gallery-gap: clamp(4rem, 18vh, 14rem);
        --gallery-padding-top: 6vh;
        --gallery-padding-bottom: 12vh;
        --gallery-img-max-height: 70vh;

        /* Line Heights */
        --line-height-paragraph: 2.4;

        /* Index Page - viewport relative */
        --dragon-transform: translate(-15vw, -35vh);
        --dragon-margin-bottom: -35vh;
        --dragon-max-width: 35%;
        --castle-max-width: 55%;
        --welcome-title-br: block;

        /* Past Page - viewport relative */
        --bottom-gifs-width: min(80vw, 500px);

        /* Gallery Page - horizontal sidebar */
        --gallery-sidebar-position: relative;
        --gallery-sidebar-left: auto;
        --gallery-sidebar-top: auto;
    }

    /* Apply layout changes */
    nav, .container, .page-wrapper {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .page-wrapper {
        flex-direction: column;
    }

    .sidebar {
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--sidebar-gap);
    }

    nav {
        text-align: center;
    }

    .container {
        padding: var(--container-padding);
    }

    #transparent img[src*="starry_night"] {
        width: auto;
        height: 100%;
        min-width: 100vw;
        object-fit: cover;
    }

    .sidebar-item {
        padding: 5px 10px;
    }

    .sidebar-item.indent {
        padding-left: 10px;
    }

    #transparent img[src*="lightning"] {
        top: -50px;
    }

    /* Gallery page container padding override */
    .gallery-page .container {
        padding: var(--container-padding);
    }
}

/* ============================================
   RESPONSIVE: iPad Pro 11" / Large Tablets (834px)
   ============================================ */
@media (max-width: 834px) {
    :root {
        --gallery-gap: clamp(3.5rem, 15vh, 12rem);
        --gallery-img-max-height: 68vh;
    }
}

/* ============================================
   RESPONSIVE: iPad / Standard Tablets (768px)
   ============================================ */
@media (max-width: 768px) {
    :root {
        /* Typography scales up slightly for tablets */
        --nav-font-size: clamp(1.1rem, 4.5vw, 1.5rem);

        /* Gallery reduces */
        --gallery-gap: clamp(3rem, 12vh, 10rem);
        --gallery-padding-bottom: 10vh;
        --gallery-img-max-height: 60vh;

        /* Line height tightens */
        --line-height-paragraph: 2.2;

        /* CV entries */
        --cv-entry-font-size: clamp(0.8rem, 3vw, 0.95rem);
    }

    .sidebar {
        border-bottom: 1px solid #333;
    }
}

/* ============================================
   RESPONSIVE: iPad Mini 6th Gen (744px)
   ============================================ */
@media (max-width: 744px) {
    :root {
        --container-padding: 4.5vw;
        --gallery-gap: clamp(2.5rem, 11vh, 9rem);
    }
}

/* ============================================
   RESPONSIVE: Large Phones / Phablets (540px)
   ============================================ */
@media (max-width: 540px) {
    :root {
        --container-padding: 5vw;

        /* Gallery continues to shrink */
        --gallery-gap: clamp(2rem, 9vh, 7rem);
        --gallery-img-max-height: 55vh;

        /* Dragon/castle adjustments */
        --dragon-transform: translate(-12vw, -28vh);
        --dragon-margin-bottom: -28vh;
        --dragon-max-width: 40%;
        --castle-max-width: 58%;

        /* Bottom GIFs */
        --bottom-gifs-width: 85vw;
    }
}

/* ============================================
   RESPONSIVE: iPhone 15 Pro Max / Large iPhones (430px)
   ============================================ */
@media (max-width: 430px) {
    :root {
        --nav-font-size: clamp(0.95rem, 5vw, 1.25rem);
        --nav-sep-margin: 0 2vw;

        --gallery-gap: clamp(1.75rem, 8vh, 6rem);
        --gallery-img-max-height: 50vh;

        --line-height-paragraph: 2.0;
    }
}

/* ============================================
   RESPONSIVE: iPhone 11 Pro Max / XS Max / 8 Plus (414px)
   ============================================ */
@media (max-width: 414px) {
    :root {
        --gallery-gap: clamp(1.5rem, 7.5vh, 5.5rem);
        --dragon-transform: translate(-10vw, -25vh);
        --dragon-margin-bottom: -25vh;
    }
}

/* ============================================
   RESPONSIVE: iPhone 15 Pro / 14 Pro (393px)
   ============================================ */
@media (max-width: 393px) {
    :root {
        --container-padding: 4vw;
        --gallery-gap: clamp(1.4rem, 7vh, 5rem);
    }
}

/* ============================================
   RESPONSIVE: iPhone 14 / 13 / 12 / 12 Pro (390px)
   ============================================ */
@media (max-width: 390px) {
    :root {
        --sidebar-font-size: clamp(0.7rem, 2.8vw, 0.9rem);
        --cv-entry-font-size: clamp(0.75rem, 2.8vw, 0.875rem);
    }
}

/* ============================================
   RESPONSIVE: iPhone SE (2nd/3rd) / 13 mini / 12 mini / 8 / 7 (375px)
   ============================================ */
@media (max-width: 375px) {
    :root {
        --nav-font-size: clamp(0.85rem, 5.5vw, 1.1rem);
        --sidebar-font-size: clamp(0.65rem, 2.5vw, 0.85rem);

        --gallery-gap: clamp(1.25rem, 6.5vh, 4.5rem);
        --gallery-img-max-height: 45vh;

        --dragon-max-width: 45%;
        --castle-max-width: 55%;
    }
}

/* ============================================
   RESPONSIVE: iPhone SE 1st Gen (320px) - Minimum Supported
   ============================================ */
@media (max-width: 320px) {
    :root {
        --nav-font-size: clamp(0.75rem, 6vw, 1rem);
        --container-padding: 3vw;
        --nav-sep-margin: 0 1.5vw;

        --sidebar-font-size: clamp(0.6rem, 2.2vw, 0.8rem);

        --gallery-gap: clamp(1rem, 6vh, 4rem);
        --gallery-img-max-height: 40vh;

        --bottom-gifs-width: 90vw;

        --dragon-transform: translate(-8vw, -20vh);
        --dragon-margin-bottom: -20vh;
        --dragon-max-width: 50%;
        --castle-max-width: 50%;
    }
}

/* ============================================
   RESPONSIVE: Phone Landscape (Short Height)
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    :root {
        /* Vertical space is premium */
        --gallery-gap: 8vh;
        --gallery-padding-top: 3vh;
        --gallery-padding-bottom: 5vh;
        --gallery-img-max-height: 55vh;

        /* Navigation compact */
        --nav-padding: 1.5vh 4vw;

        /* Dragon uses less vertical offset */
        --dragon-transform: translate(-12vw, -18vh);
        --dragon-margin-bottom: -18vh;
    }
}

/* ============================================
   RESPONSIVE: Tablet Landscape (iPad Landscape)
   ============================================ */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    :root {
        /* More horizontal room, keep gallery sidebar on side */
        --gallery-sidebar-position: fixed;
        --gallery-sidebar-left: 2vw;
        --gallery-sidebar-top: 60px;

        --gallery-img-max-height: 65vh;
        --gallery-gap: clamp(2rem, 8vh, 6rem);
    }
}