/*
CSS created by David Oldfield
Made By Mod / hello@madebymod.co.uk
*/ 
@font-face {
  font-family: 'AeonikMono';
  src: url('/fonts/AeonikMono-Medium.woff2') format('woff2'),
       url('/fonts/AeonikMono-Medium.otf') format('opentype');
  font-weight: nromal; /* You can adjust this according to the font weight */
  font-style: normal; /* Change to italic if the font is italic */
}

* {
  outline: none;
}
html, body {
  height: 100%;
}
html {
  font-size: 16px;
}
body {
  padding: 0px;
  margin: 0px;
  font-family: 'AeonikMono', Helvetica; /* Use the font in your styles */
  overflow: hidden;
    background-color: #000;color: #fff;
}
a {
  color: #fff;
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
p {
  line-height: 140%;
}
input, textarea, select, label, button {
  font-size: 1rem;
  font-family: Helvetica Neue, Helvetica;
  font-weight: 300;
}
select[disabled] {
  color: #555;
}
select:disabled {
  opacity: 0.6;
}
.bold, strong {
  font-weight: 700;
}
#overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999999999999999999;
    width: 100%;
    height: 100vh;
    background-color: #333;
}
.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  padding: 0px;
  margin: 0px;
  font-weight: 300;
}
.c_15 {
  width: 15%;
}
.c_20 {
  width: 20%;
}
.c_25 {
  width: 25%;
}
.c_30 {
  width: 30%;
}
.c_33 {
  width: 33.333333%;
}
.c_35 {
  width: 35%;
}
.c_40 {
  width: 40%;
}
.c_45 {
  width: 45%;
}
.c_50 {
  width: 50%;
}
.c_55 {
  width: 55%;
}
.c_60 {
  width: 60%;
}
.c_65 {
  width: 65%;
}
.c_66 {
  width: 66.666666%;
}
.c_70 {
  width: 70%;
}
.c_75 {
  width: 75%;
}
.c_80 {
  width: 80%;
}
.c_100 {
  width: 100%;
}
hr {
  border: 0;
  border-bottom: 1px dashed #555;
  background: #000;
}
#status {
  width: 350px;
  padding: 20px;
  background-color: #f58429;
  color: #fff;
  position: fixed;
  top: 50%;
  margin-left: -195px;
  left: 50%;
  margin-top: -60px;
  z-index: 999999999999;
  text-align: center;
  -moz-box-shadow: 0 0 5px #888;
  -webkit-box-shadow: 0 0 5px #888;
  box-shadow: 0 0 5px #888;
}
#status h4 {
  font-weight: 700;
  font-size: 1.238rem;
  text-transform: uppercase;
}
#wrapper {
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 100vh;
    position: relative;
    z-index: 5;
}
/* Set up the animation for the outline */
.cls-1 {
    fill: none; /* Initially no fill */
    stroke: white; /* Set stroke color to white */
    stroke-width: 2px;
    stroke-dasharray: 4000; /* Large enough to cover the length of the path */
    stroke-dashoffset: 4000; /* Initially hide the stroke */
    animation: draw 10s ease forwards; /* Chain animations */
    opacity: 1; /* Fully visible for stroke animation */
}
.cls-1.active {
    fill: white;
}

/* Animation for drawing the outline */
@keyframes draw {
    to {
        stroke-dashoffset: 0; /* Draw the outline */
    }
}

/* Animation for filling the shape */
@keyframes fillShape {
    0% {
        fill: none; /* Keep it transparent initially */
        opacity: 1;
    }
    100% {
        fill: white; /* Fill the shape with white after outline is drawn */
        opacity: 1; /* Ensure it's visible */
    }
}
#wrapper div {
    width: 45%;
}
.cursor {
  width: 100px; /* Adjust to your SVG size */
  height: 100px;
  border-radius: 100%;
  border: none;
  transition: all 200ms ease-out;
  position: fixed;
  pointer-events: none;
  left: 60px;
  top: 60px;
  z-index: 99;
}

.cursor2 {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  position: fixed;
  pointer-events: none;
  transition: width .3s, height .3s, opacity .3s;
  left: 60px;
  top: 60px;
  z-index: 99;
}
.cursor2:before {
    width: 60px;
  height: 60px;
    content: "";
    position: absolute;
    top: -0px;
    left: -0px;
    background-image: url('/images/circa-icon.svg'); /* Use your SVG here */
    background-size: cover;
    z-index: 1;
  opacity: 0;
    -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  /* Let's enforce some hardware acceleration */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}
.cursor2.active:before {
    opacity: 1;
}
/* Container to hold all the layers */
.background-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  animation: fadeZoom 40s infinite ease-in-out;
  opacity: 0;
  z-index: 1;
}

.layer1 {
  background-image: url('/images/circa-1.jpg'); /* First image */
  animation-delay: 0s;
}

.layer2 {
  background-image: url('/images/circa-2.jpg'); /* Second image */
  animation-delay: 10s; /* Starts after 15s */
}

.layer3 {
  background-image: url('/images/circa-1.jpg'); /* Third image */
  animation-delay: 20s; /* Starts after 30s */
}
.layer4 {
  background-image: url('/images/circa.jpg'); /* Fourth image */
  animation-delay: 30s;
}

/* Combined zoom and fade effect */
@keyframes fadeZoom {
  0%, 15%, 85%, 100% {
    opacity: 0;
    transform: scale(1); /* Start at normal size */
  }
  50% {
    opacity: 1;
    transform: scale(1.25); /* Zoom in slightly */
  }
}
a.btn {
    position: fixed;
    bottom: 60px;
    z-index: 99;
    text-transform: uppercase;
    display: none;
    padding-bottom: 10px;
}
a.btn:before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 1;
    -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  /* Let's enforce some hardware acceleration */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
    width: 0%;
    height: 1px;
    background-color: #fff;
}
a.btn:hover:before {
    width: 100%;
}
a.btn.social {
    left: 60px;
}
a.btn.contact {
    right: 60px;
}
@media only screen and (max-width:1024px) {}
/* Landscape ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}
/* Portrait ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}
@media only screen and (max-width:768px) {
    #wrapper div {
        width: 75%;
    }
    a.btn {
        bottom: 50px;
    }
    a.btn.social {
        left: 50px;
    }
    a.btn.contact {
        right: 50px;
    }
    .cursor {
          width: 60px; /* Adjust to your SVG size */
          height: 60px;
          border-radius: 100%;
          border: none;
          transition: none;
          position: fixed;
          pointer-events: none;
          left: 50px;
          top: 50px;
          z-index: 99999999999999999;
    }

    .cursor2 {
      width: 60px;
      height: 60px;
      border-radius: 100%;
      position: fixed;
      pointer-events: none;
      transition: none;
      left: 50px;
      top: 50px;
      z-index: 99999999999999999;
        display: none;
    }
    .cursor2:before {
        width: 60px;
      height: 60px;
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        background-image: url('/images/circa-icon.svg'); /* Use your SVG here */
        background-size: cover;
        z-index: 1;
    } 
    #wrapper div {
        margin-top: -40px;
    }
}