/* =========================================================
   CUSTOM FONTS
   ========================================================= */

@font-face {
    font-family:"ES Allianz";
    src:url("fonts/ESAllianz-Regular.otf") format("opentype");
    font-weight:400;
    font-style:normal;
}

@font-face {
    font-family:"ES Allianz";
    src:url("fonts/ESAllianz-Bold.otf") format("opentype");
    font-weight:700;
    font-style:normal;
}

@font-face {
    font-family:"ES Allianz";
    src:url("fonts/ESAllianz-Italic.otf") format("opentype");
    font-weight:400;
    font-style:italic;
}

@font-face {
    font-family:"New Edge Rounded";
    src:url("fonts/NewEdge6...Rounded.otf") format("opentype");
    font-weight:400;
    font-style:normal;
}


/* =========================================================
   VARIABLES
   ========================================================= */

:root {
    --bg:#121212;
    --fg:#f1ede4;
    --muted:#cfc9bd;
    --blue:#5791ef;
    --page-pad:1rem;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}


/* =========================================================
   PAGE
   ========================================================= */

html,
body {
    width:100%;
    height:100%;
    background:var(--bg);
    color:var(--fg);
    font-family:"ES Allianz",sans-serif;
    overflow:hidden;
    overscroll-behavior:none;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    position:fixed;
    top:0;
    right:0;
    padding:var(--page-pad);
    z-index:100;
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:1.5rem;
    color:var(--fg);
}

.wordmark {
    font-family:"ES Allianz",sans-serif;
    font-size:1.4rem;
    font-weight:500;
    letter-spacing:.01em;
}

.site-nav {
    display:flex;
    gap:.5rem;
}

.nav-link {
    font-family:"ES Allianz",sans-serif;
    font-size:.85rem;
    color:var(--fg);
    text-decoration:none;
    position:relative;
    padding:.4rem .75rem;
    border:none;
    background:rgba(0,0,0,.85);
    border-radius:4px;
    cursor:pointer;
}

.nav-link::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:1px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .25s ease;
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
    transform:scaleX(1);
    transform-origin:left;
}

.nav-link:focus-visible {
    outline:1px solid currentColor;
    outline-offset:3px;
}


/* =========================================================
   SLIDESHOW
   ========================================================= */

.slideshow-wrapper {
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    overflow:hidden;
}

.slide-image {
    position:fixed;
    image-orientation:from-image;
    top:-25vh;
    left:-25vw;
    width:150vw;
    height:150vh;
    object-fit:cover;
    object-position:center center;
    opacity:1;
    transition:opacity .45s ease;
    color:transparent;
    display:block;
    cursor:pointer;
    z-index:1;
}

.slide-image.fade-out {
    opacity:0;
}

.slide-video {
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    object-fit:contain;
    object-position:center center;
    opacity:1;
    transition:opacity .45s ease;
    display:none;
    background:var(--bg);
    z-index:1;
}

.slide-video.fade-out {
    opacity:0;
}


/* =========================================================
   HOMEPAGE NAVIGATION ZONES
   ========================================================= */

.nav-zone {
    position:fixed;
    top:0;
    bottom:0;
    width:33.333%;
    z-index:5;
    background:transparent;
    border:none;
    cursor:pointer;
}

.nav-prev {
    left:0;
}

.nav-next {
    right:0;
}

.nav-zone:focus {
    outline:none;
}

.image-zone {
    position:fixed;
    top:0;
    left:33.333%;
    width:33.334%;
    height:100%;
    z-index:6;
    background:transparent;
    border:none;
    cursor:pointer;
}

.image-zone:focus {
    outline:none;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    padding:var(--page-pad);
    z-index:10;
    color:var(--fg);
}

.caption {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    max-width:480px;
}

.caption-title {
    appearance:none;
    border:none;
    background:rgba(0,0,0,.85);
    padding:.4rem .75rem;
    margin:0;
    font-family:"ES Allianz",sans-serif;
    font-size:1.15rem;
    line-height:1.3;
    color:var(--fg);
    cursor:pointer;
    text-align:left;
    display:inline-block;
    width:fit-content;
    border-radius:4px;
    position:relative;
    transition:color .2s ease,background .2s ease;
}

.caption-title::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:1px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .25s ease;
}

.caption-title:hover::after,
.caption-title:focus-visible::after {
    transform:scaleX(1);
    transform-origin:left;
}

.caption-title:focus-visible {
    outline:1px solid currentColor;
    outline-offset:3px;
}

.caption-title:focus {
    outline:none;
}

.caption-description {
    display:none;
    margin-top:.5rem;
    max-width:480px;
    font-size:.85rem;
    line-height:1.3;
    cursor:default;
    background:rgba(0,0,0,.85);
    padding:.75rem 1rem;
    border-radius:4px;
}

.caption.is-open .caption-description {
    display:block;
}


/* =========================================================
   HOMEPAGE NAVIGATION CIRCLES
   ========================================================= */

.nav-circle {
    position:fixed;
    top:50%;
    transform:translateY(-50%);
    width:42px;
    height:42px;
    border:1px solid var(--fg);
    border-radius:50%;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--fg);
    font-size:1rem;
    pointer-events:none;
    opacity:.8;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        opacity .2s ease;
}

.nav-circle-left {
    left:1rem;
}

.nav-circle-center {
    left:50%;
    transform:translate(-50%,-50%);
    opacity:0;
    border-color:var(--blue);
    color:var(--blue);
}

.nav-circle-center.is-hovered {
    opacity:1;
    border-color:var(--blue);
    color:var(--blue);
}

.nav-circle-right {
    right:1rem;
}

.nav-circle.is-hovered {
    border-color:var(--blue);
    color:var(--blue);
}


/* =========================================================
   LIGHTBOX
   ========================================================= */

.image-lightbox {
    position:fixed;
    inset:0;
    z-index:1000;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(18,18,18,.45);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    cursor:pointer;
}

.image-lightbox.active {
    display:flex;
}


/* =========================================================
   LIGHTBOX CLOSE BUTTON
   ========================================================= */

.lightbox-close {
    position:fixed;
    top:var(--page-pad);
    right:var(--page-pad);
    z-index:1003;
    appearance:none;
    border:none;
    background:rgba(0,0,0,.85);
    color:var(--fg);
    font-family:"ES Allianz",sans-serif;
    font-size:.85rem;
    cursor:pointer;
    padding:.4rem .75rem;
    border-radius:4px;
    transition:color .2s ease;
}

.lightbox-close:hover {
    color:var(--blue);
}

.lightbox-close:focus-visible {
    outline:1px solid currentColor;
    outline-offset:3px;
}


/* =========================================================
   LIGHTBOX CONTENT
   ========================================================= */

.lightbox-content {
    position:relative;
    z-index:1001;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    max-width:100vw;
    max-height:100vh;
    pointer-events:none;
}

.image-lightbox img {
    max-width:100vw;
    max-height:100vh;
    width:auto;
    height:auto;
    object-fit:contain;
    display:block;
    cursor:pointer;
    pointer-events:auto;
}


/* =========================================================
   LIGHTBOX NAVIGATION
   ========================================================= */

.lightbox-nav {
    position:fixed;
    top:0;
    bottom:0;
    width:33.333%;
    z-index:1002;
    border:none;
    background:transparent;
    cursor:pointer;
}

.lightbox-prev {
    left:0;
}

.lightbox-next {
    right:0;
}

.lightbox-nav:focus {
    outline:none;
}

.lightbox-circle {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:42px;
    height:42px;
    border:1px solid var(--blue);
    border-radius:50%;
    opacity:0;
    transition:opacity .2s ease;
    pointer-events:none;
}

.lightbox-prev .lightbox-circle {
    left:1rem;
}

.lightbox-next .lightbox-circle {
    right:1rem;
}

.lightbox-nav:hover .lightbox-circle,
.lightbox-nav:focus-visible .lightbox-circle {
    opacity:1;
}


/* =========================================================
   INFORMATION OVERLAY
   ========================================================= */

.information-overlay {
    position:fixed;
    inset:0;
    z-index:2000;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transition:opacity .45s ease,visibility .45s ease;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:none;
}

.information-overlay.is-open {
    visibility:visible;
    opacity:1;
    pointer-events:auto;
}

.information-background {
    position:fixed;
    inset:-50px;
    background-image:none;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    filter:blur(30px);
    transform:scale(1.08);
    z-index:0;
}

.information-overlay-shade {
    position:fixed;
    inset:0;
    background:rgba(18,18,18,.55);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    z-index:1;
}

.information-header {
    position:absolute;
    top:0;
    right:0;
    padding:var(--page-pad);
    z-index:3;
}

.information-close {
    appearance:none;
    border:none;
    background:rgba(0,0,0,.85);
    color:var(--fg);
    font-family:"ES Allianz",sans-serif;
    font-size:.85rem;
    cursor:pointer;
    padding:.4rem .75rem;
    border-radius:4px;
    position:relative;
}

.information-close::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:1px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .25s ease;
}

.information-close:hover::after,
.information-close:focus-visible::after {
    transform:scaleX(1);
    transform-origin:left;
}

.information-close:focus-visible {
    outline:1px solid currentColor;
    outline-offset:3px;
}

.information-content {
    position:relative;
    z-index:2;
    width:100%;
    min-height:100%;
    padding:3rem var(--page-pad) 4rem var(--page-pad);
    display:flex;
    align-items:flex-start;
}

.information-left {
    width:100%;
}

.information-left h1 {
    font-family:"ES Allianz",sans-serif;
    font-size:1.15rem;
    font-weight:400;
    line-height:1.3;
    margin-bottom:2rem;
}

.information-text {
    font-size:.95rem;
    line-height:1.3;
}

.information-text p {
    margin-bottom:1rem;
}

.information-details {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:.15rem;
    margin-top:3rem;
    font-size:.85rem;
    line-height:1.3;
}

.information-link {
    color:var(--fg);
    text-decoration:none;
    position:relative;
}

.information-link::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:1px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .25s ease;
}

.information-link:hover::after {
    transform:scaleX(1);
    transform-origin:left;
}

body.information-open {
    overflow:hidden;
}


/* =========================================================
   INDEX OVERLAY
   ========================================================= */

.index-overlay {
    position:fixed;
    inset:0;
    z-index:2000;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    background:var(--bg);
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:none;
    transition:opacity .45s ease,visibility .45s ease;
}

.index-overlay.is-open {
    visibility:visible;
    opacity:1;
    pointer-events:auto;
}


/* =========================================================
   INDEX BACKGROUND
   IMPORTANT:
   This now behaves exactly like the Information background.
   It stays fixed to the viewport while the Index content
   scrolls above it.
   ========================================================= */

.index-background {
    position:fixed;
    inset:-50px;
    background-image:none;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    filter:blur(30px);
    transform:scale(1.08);
    z-index:0;
}

.index-overlay-shade {
    position:fixed;
    inset:0;
    background:rgba(18,18,18,.7);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    z-index:1;
}

.index-header {
    position:sticky;
    top:0;
    z-index:3;
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    padding:var(--page-pad);
    background:transparent;
}

.index-title {
    font-family:"ES Allianz",sans-serif;
    font-size:.95rem;
    color:var(--fg);
}

.index-close {
    appearance:none;
    border:none;
    background:rgba(0,0,0,.85);
    color:var(--fg);
    font-family:"ES Allianz",sans-serif;
    font-size:.85rem;
    cursor:pointer;
    padding:.4rem .75rem;
    border-radius:4px;
    position:relative;
}

.index-close::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:1px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .25s ease;
}

.index-close:hover::after,
.index-close:focus-visible::after {
    transform:scaleX(1);
    transform-origin:left;
}

.index-close:focus-visible {
    outline:1px solid currentColor;
    outline-offset:3px;
}

.index-grid {
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    align-items:start;
    gap:2rem 1.25rem;
    padding:1rem var(--page-pad) 3rem var(--page-pad);
}

.index-item {
    appearance:none;
    border:none;
    background:none;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
    cursor:pointer;
    color:var(--fg);
    min-width:0;
}

.index-item-image {
    display:block;
    width:100%;
    height:220px;
    object-fit:contain;
    object-position:center bottom;
    background:transparent;
    margin-bottom:.5rem;
    transition:opacity .2s ease;
}

.index-item:hover .index-item-image {
    opacity:.75;
}

.index-item-caption {
    display:flex;
    gap:.5rem;
    font-size:.8rem;
    line-height:1.3;
    width:100%;
}

.index-item-title {
    color:var(--fg);
    position:relative;
    text-decoration:none !important;
}

.index-item-title::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:1px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .25s ease;
}

.index-item:hover .index-item-title::after {
    transform:scaleX(1);
    transform-origin:left;
}

.index-item:hover .index-item-title {
    color:var(--fg);
}


/* =========================================================
   GENERAL RESET
   ========================================================= */

a,
button {
    color:inherit;
    -webkit-tap-highlight-color:transparent;
}

a:link,
a:visited,
a:hover,
a:active {
    color:inherit;
}

button {
    font:inherit;
}

.index-item-title,
#captionTitle,
#informationOpen,
#indexOpen,
#emailOpen {
    text-decoration:none !important;
    cursor:pointer;
}

#informationOpen,
#indexOpen,
#emailOpen {
    position:relative;
}

#informationOpen::after,
#indexOpen::after,
#emailOpen::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:1px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .25s ease;
}

#informationOpen:hover::after,
#indexOpen:hover::after,
#emailOpen:hover::after {
    transform:scaleX(1);
    transform-origin:left;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:600px) {

    :root {
        --page-pad:1.25rem;
    }

    .site-nav {
        gap:.2rem;
    }

    .nav-link {
        font-size:.8rem;
    }

    .caption-title {
        font-size:1rem;
    }

    .caption-description {
        max-width:calc(100vw - 2.5rem);
        font-size:.8rem;
    }

    .nav-circle {
        width:36px;
        height:36px;
    }

    .nav-circle-left {
        left:.75rem;
    }

    .nav-circle-right {
        right:.75rem;
    }

    .lightbox-circle {
        width:36px;
        height:36px;
    }

    .lightbox-prev .lightbox-circle {
        left:.75rem;
    }

    .lightbox-next .lightbox-circle {
        right:.75rem;
    }

    .information-overlay,
    .index-overlay {
        touch-action:pan-y;
    }

    .index-grid {
        grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
        align-items:start;
        gap:1.5rem .75rem;
    }

    .information-content {
        position:relative;
        z-index:2;
        width:100%;
        min-height:100%;
        padding:var(--page-pad);
        display:flex;
        align-items:flex-start;
    }

    .information-left {
        width:100%;
    }

    .information-left h1 {
        font-family:"ES Allianz",sans-serif;
        font-size:.85rem;
        font-weight:400;
        line-height:1.3;
        margin-bottom:2rem;
    }

    .information-text {
        font-size:.9rem;
    }

    .index-item-image {
        height:150px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce) {

    .slide-image,
    .slide-video {
        transition:none;
    }

    .nav-link::after,
    .information-close::after,
    .information-link::after,
    .index-close::after,
    .index-item-title::after,
    #informationOpen::after,
    #indexOpen::after,
    #emailOpen::after {
        transition:none;
    }

    .caption-title,
    .caption-title::after {
        transition:none;
    }

    .nav-circle,
    .lightbox-circle {
        transition:none;
    }

    .information-overlay,
    .index-overlay {
        transition:none;
    }
}