.i-am-centered {
    margin: auto;
    max-width: 80%;
}

.home {
    height: 15%;
    width: 100%;
    padding: 0%;
    margin: 0%;
    margin-top: -5px;
    /*background-color: #3b3b3d;
 */
}

.stretch {
    height: 100%;
    width: 100%;
    padding: 0%;
    margin: 0%;
}


.ArchiveText {
    font-size: 10vw;
    font-family: "Orbital";
    font-style: normal;
    letter-spacing: 0.4em;
    /* position: absolute; */
    top: 20%;
    left: 50%;
    /* transform: translate(-50%, -50%); */
    text-align: center;
    width: 100%;

}

.ArchiveText+p {

    /* position: absolute; */
    top: 30%;
    left: 50%;
    /* transform: translate(-50%, -50%); */
    text-align: center;
}
/* We're not translating because that would bread the body background cutout effect. */
.textBackdrop
{
    /* width: 300px; */
    position: absolute;

    /* --textbox-width: 700px; */
    /* width: var(--textbox-width); */
    /* left: calc(50% - var(--textbox-width)/2); */
    width: 100%;
    left: 0;
    top: 32%;
    animation: forwards 3s TextOpener;
    animation-delay: 1s;
    background-image: none;
    opacity: 0 ;
}
.ImageLogoBig {
    height: 10vh;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 70%;
    content: url("/assets/Logo/LogoDarkTheme.png")
}
@keyframes TextOpener {
    0%
    {
        opacity: 0;

    }
    90%
    {
        /* background-image: none; */
    }
    100%
    {
        opacity: 1;
        background-image: url(/assets/Images/Background_DarkTheme.png);
        background-size: 33px 33px;
        visibility: visible;
    }
}
@media (prefers-color-scheme: light) {

    .ImageLogoBig {
        content: url("/assets/Logo/LogoLightTheme.png")
    }

    @keyframes TextOpener {
        0%   { opacity: 0; }
        100% {
            opacity: 1;
            background-image: url(/assets/Images/Background_LightTheme.png);
            background-size: 33px 33px;
            visibility: visible;
        }
    }

    .object-video {
        display: none;
    }

    .nav-square-index {
        text-shadow: none;
        border-color: var(--accentColor);
        background: rgba(255, 255, 255, 0.55);
    }

    /* Triangle outline is white — invisible on light bg, swap to dark neutral */
    .drawing-triangle polygon {
        stroke: rgb(10, 10, 10); 
    }
    .triangle polygon {
        fill:rgb(10, 10, 10); 
    }
}

@media screen and (min-width: 1200px) {
    .ArchiveText {
        font-size: 4vw;
    }

    .ImageLogoBig {
        height: 10vh;
    }
}
.object-video {
  
  height: 10%;
  object-fit: cover;
  mix-blend-mode: screen;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: -1;
}

/* Split view Style and Animations */
/*
@media screen and (max-width: 768px) {

    .splitViewContainer{
      flex-direction: column;
      flex-wrap: wrap;
    }
}
body {
	margin: 0 !important;
	padding-bottom: 0  !important;
	padding-top: 0  !important;
  height: 100%;
  width: 100%;
}
.splitViewContainer {	
    display: flex;
    background-color: var(--dark);
    transform: translate(50%);
    height: 100%;
    width: 1%;
    margin-left: auto;
    margin-right: auto;
    animation: scale-in-ver-top cubic-bezier(0.250, 0.460, 0.450, 0.940) both,
    scale-up-hor-center cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
    animation-duration: 0.3s, 0.8s;
    animation-delay: 0ms, 0.4s; 
    animation-timing-function: ease-in, ease-out;
    animation-iteration-count: 1, 1;
}
*/
/*
 @-webkit-keyframes scale-in-ver-top {
    0% {
      -webkit-transform: scaleY(0);
              transform: scaleY(0);
      -webkit-transform-origin: 100% 0%;
              transform-origin: 100% 0%;
      opacity: 1;
    }

    100% {
      -webkit-transform: scaleY(1);
              transform: scaleY(1);
      -webkit-transform-origin: 100% 0%;
              transform-origin: 100% 0%;
      opacity: 1;
    }
  }
  @keyframes scale-in-ver-top {
    0% {
      -webkit-transform: scaleY(0);
              transform: scaleY(0);
      -webkit-transform-origin: 100% 0%;
              transform-origin: 100% 0%;
      opacity: 1;
    }
    100% {
      -webkit-transform: scaleY(1);
              transform: scaleY(1);
      -webkit-transform-origin: 100% 0%;
              transform-origin: 100% 0%;
      opacity: 1;
    }
  }
  
  

@-webkit-keyframes scale-up-hor-center {
    0% {
        transform: scaleX(1);
        width: 1%;
    }
    100% {
        transform: scaleX(1);
        width: 100%;
    }
  }
  @keyframes scale-up-hor-center {
    0% {
        transform: scaleX(1);
        width: 1%;
    }
    100% {
        transform: scaleX(1);
        width: 100%;
    }
  }
*/

.section {
    opacity: 0%;
    display: flex;
    flex: 1;
    height: 100%;
    align-items: center;
    justify-content: center;
    transition: all 0.9s ease-in-out;
    animation: opacity forwards;
    animation-duration: 0.8s;
    animation-delay: 0.8s;
    color: var(--textColor) !important;
    text-align: center;
}

.section>h1 {
    background-color: rgba(var(--darkForOpacity), 0.4);
    width: 100%;



}

@keyframes opacity {
    0% {
        opacity: 0%;
    }

    100% {
        opacity: 100%;
    }
}

.section-2:hover {
    flex: 3;
    cursor: pointer;

}

.section-1:hover {
    flex: 3;
    cursor: pointer;
}

.section-1 {
    background-image:
        url("../assets/Images/Gallery/Uncompressed/environments/2020-10-28_Spooky_04.jpg");
    background-size: cover;
    background-position: center;
}

.section-2 {
    background-image: url("../assets/Images/Home/projects.jpg");
    background-size: cover;
    background-position: center;

}


/* 2026 Animation */

/* ── Responsive layout driver ──
   The home screen fans the nav buttons out on an arc below a central triangle.
   Everything below scales from one radius variable so the layout adapts to the
   viewport instead of relying on fixed pixel offsets, this keeps the triangle
   and every button on screen on tablets and small windows with no overflow.

   The fan radius is the largest value that still keeps the outer buttons inside
   the viewport width and the lower buttons inside the viewport height, capped at
   420px so large desktops render exactly as before. */
:root {
    --nav-w: clamp(150px, 15vw, 200px);
    --nav-h: clamp(48px, 8vh, 64px);

    /* Fan radius, sized so the whole fanout bounding box fits the viewport.
       Measured from the fan centre the box is:
         width  = 1.732·r + button width   (outer buttons at r·sin60, plus half
                  a button each side)
         height = 1.274·r + half a button   (triangle base 0.334·r above centre,
                  lower buttons 0.94·r below, plus half a button)
       Solving width <= 100vw and height <= 100vh, with a 16px margin all round
       and the largest button size (200x64) as the worst case, gives the two
       budgets below. Capped at 420px so large screens look unchanged.
       Kept as a plain min() of two lengths, no var()/calc() nested inside min(),
       that pattern is unreliable in some engines and collapsed the radius. */
    --fan-r: clamp(
        180px,
        min((100vw - 232px) / 1.732, (100vh - 64px) / 1.274),
        420px
    );

    /* Vertical centre of the fanout. Placing the centre here puts the whole
       bounding box in the middle of the viewport instead of pinned near the top,
       so portrait tablets no longer leave a large empty band at the bottom.
       Offset = half the box's own vertical imbalance below centre. */
    --cy: calc(50vh - var(--fan-r) * 0.303 - var(--nav-h) / 4);

    /* Triangle size tracks the fan radius so the two stay in proportion,
       1.43 reproduces the old 600px filled triangle at the 420px radius cap,
       the outline sits slightly larger to keep its halo around the fill. */
    --tri-size: calc(var(--fan-r) * 1.43);
    --tri-size-outline: calc(var(--fan-r) * 1.668);
}

@keyframes TriangleRotation {
    0%   { transform: translate(-50%, -50%) rotate(0deg)   scale(0); }
    100% { transform: translate(-50%, -50%) rotate(180deg) scale(1); }
}
.triangle {
    position: absolute;
    left: 50%;
    top: var(--cy);
    width: var(--tri-size);
    height: var(--tri-size);
    transform: translate(-50%, -50%) rotate(180deg);
    animation: forwards 1s TriangleRotation;
}

.drawing-triangle {
    position: absolute;
    left: 50%;
    top: var(--cy);
    width: var(--tri-size-outline);
    height: var(--tri-size-outline);
    transform: translate(-50%, -50%) rotate(180deg);

    /* The dasharray should be at least the length of the perimeter */
    stroke-dasharray: 416;
    stroke-dashoffset: 416;
    animation: draw 2s ease-in-out forwards;
    animation-delay: 1s;
    z-index: 0;
}

/* The SVGs keep their square viewBox, so they fill the sized box and scale
   cleanly with it instead of being blown up with a transform. */
.triangle svg,
.drawing-triangle svg {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes draw {
    100% {
        stroke-dashoffset: 0;
    }
}

  .transparent-video
  {
    opacity: 0;
    animation: forwards 3s video-anim-fadein;
    animation-delay: 1s;
  }
  @keyframes video-anim-fadein {
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
  }

/* Arc layout, the buttons fan out on a 120deg arc below the triangle centre at
   the shared anchor --cy. Each button sits at offset (bx, by) from that centre,
   derived from the responsive fan radius so the spread grows or shrinks with the
   available space rather than landing on fixed pixel coordinates. Outer buttons
   at ±60deg, inner buttons at ±20deg, x = r·sin(angle), y = r·cos(angle). */
.GalleryIcon   { --bx: calc(var(--fan-r) * -0.866); --by: calc(var(--fan-r) * 0.5);  }
.ProjectsIcon  { --bx: calc(var(--fan-r) * -0.342); --by: calc(var(--fan-r) * 0.94); }
.BlogIcon      { --bx: calc(var(--fan-r) *  0.342); --by: calc(var(--fan-r) * 0.94); }
.AboutIcon     { --bx: calc(var(--fan-r) *  0.866); --by: calc(var(--fan-r) * 0.5);  }
.CommanderIcon { --bx: 0px;                          --by: calc(var(--fan-r) * 0.5);  }

/* The fan out positions and entrance animation are driven by js/index_fan.js,
   which measures the real viewport and button sizes so the whole bounding box
   is guaranteed on screen, then animates the buttons out with inline transitions.
   The left/top calc below is a no-script fallback, the buttons still land on the
   arc (without animation) if JavaScript is disabled. When JS is present the
   .fanjs guard hides the buttons until the script positions them, avoiding a
   flash at the final spot before the entrance plays. */
  .fanjs .nav-square-index { opacity: 0; }

  .nav-square-index {

    pointer-events: all;
    position: absolute;
    left: calc(50vw + var(--bx, 0px));
    top: calc(var(--cy) + var(--by, 0px));
    transform: translate(-50%,-50%);
    opacity: 1;
    width: var(--nav-w);
    height: var(--nav-h);
    background: var(--bg-dark);
    border: 1px solid var(--glow);
    border-radius: 8px ;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10005;
    /* transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); */
    /* box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8), 
                inset 0 0 0 1px rgba(255, 255, 255, 0.05); */
    text-shadow: none;
    /* transform: skew(5px 0px); */

  }
  .nav-square-index a
  {
    width: 100%;
    height: 100%;
    text-align: center;
    font-family: 'Orbital';
    font-size: clamp(11px, 1vw, 14px);
    letter-spacing: clamp(2px, 0.4vw, 6px);
  }
  .nav-square-index a:hover
  {
    text-decoration: none;
  }
    .nav-square-index a div
  {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
  .nav-square-index:hover {
    z-index: 15000;
    width: calc(var(--nav-w) + 10px);
    height: calc(var(--nav-h) + 8px);
}

  /* --- TOOLTIPS --- */
/* .nav-square-index::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 115%;
    background: #000;
    color: var(--accentColor);
    border: 1px solid var(--accentTransparent);
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-10px);
    transition: 0.3s ease;
    pointer-events: none;
    z-index: 20000 !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  }
  
  .nav-square-index:hover::after {
    opacity: 1;
    transform: translateX(0);
  } */


/* --- MOBILE KEYFRAMES --- */

@keyframes TriangleRotationMobile {
  0%   { transform: translate(-50%, -50%) rotate(0deg)   scale(0); }
  100% { transform: translate(-50%, -50%) rotate(180deg) scale(1); }
}

@keyframes DrawMobile {
  0%   { transform: translate(-50%, -50%) rotate(180deg) scale(1); stroke-dashoffset: 416; }
  100% { transform: translate(-50%, -50%) rotate(180deg) scale(1); stroke-dashoffset: 0;   }
}

/* Each nav button slides down slightly from behind the triangle tip */
@keyframes NavButtonIn {
  0%   { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0);     }
}


/* --- MOBILE --- */
@media (max-width: 767px) {

  body { padding-bottom: 0 !important; }

  .transparent-video { display: none; }

  /* Smaller text */
  .ArchiveText { font-size: 7vw; }

  /* Triangle: in upper third, pure rotate+scale */
  .triangle {
    top: 33%;
    animation: TriangleRotationMobile forwards 1s;
  }

  .drawing-triangle {
    top: 33%;
    transform: translate(-50%, -50%) rotate(180deg) scale(1);
    animation: DrawMobile 2s ease-in-out both;
    animation-delay: 1s;
  }

  /* Text sits on the triangle */
  .textBackdrop { top: 30%; }

  /* Nav: fixed so top% resolves against viewport (same reference as .triangle).
     Triangle center is at 33%_vh, its rotated tip is ~120px below center, so
     we start the buttons ~150px below 33% to clear the tip with a small gap. */
  ul.index-nav {
    position: fixed;
    top: calc(33% + 150px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 10000;
    gap: 14px;
    align-items: center;
  }

  /* Reset position + override icon class animations with the slide-in */
  .nav-square-index {
    position: relative !important;
    left: unset !important;
    top: unset !important;
    bottom: unset !important;
    right: unset !important;
    width: 220px !important;
    height: 44px !important;
    border-radius: 8px !important;
    pointer-events: all !important;
    background: var(--bg-dark);
    animation: NavButtonIn 0.25s ease-out both !important;
  }

  /* Staggered: each button appears just after the previous */
  ul.index-nav li:nth-child(1) { animation-delay: 1.0s !important; }
  ul.index-nav li:nth-child(2) { animation-delay: 1.2s !important; }
  ul.index-nav li:nth-child(3) { animation-delay: 1.4s !important; }
  ul.index-nav li:nth-child(4) { animation-delay: 1.6s !important; }
  ul.index-nav li:nth-child(5) { animation-delay: 1.8s !important; }

  .nav-square-index:hover { background: var(--accentVeryTransparent) !important; }

  .nav-square-index a {
    font-size: 11px;
    letter-spacing: 3pt;
    padding: 0 16px;
  }
}

/* Intro replay guard, the header script adds .intro-skip on repeat visits
   within a session. Every one-shot animation jumps to its final state,
   only the infinite wordmark pulse keeps running. Kept at the end of the
   file so it outranks the !important nav button delays above. */
html.intro-skip body *:not(.glowing-accent) {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
}