* {box-sizing: border-box; padding: 0; margin: 0; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}

@font-face{font-family:'Narnia';src:url('assets/Narnia.otf') format('opentype');font-display:swap;}
@font-face{font-family:'OPTIMA';src:url('assets/OPTIMA.TTF') format('truetype');font-display:swap;}

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  /*background: linear-gradient(135deg, #111 0%, #333000 100%);*/
  position: relative;
  overflow: hidden;
  z-index: -1;
}

#grid-bg { position: fixed;top: 0;left: 0;width: 100%;height: 100vh; /*inset: 0;*/ z-index: 0; pointer-events: none; }

.intro {
  position: fixed;
  inset: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.intro-title {
  /*
  font-family: 'OPTIMA';
  font-size: 4rem;
  letter-spacing: 0px;
  color: #000;
  */
  width: 10%;
  height: auto;
  opacity: 0;
}

.intro-title img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 1000px) {.intro-title{width: 33%;}}

.hb {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10%; height: auto; z-index: 4; /*mix-blend-mode: screen;*/ filter: drop-shadow(0px 0px 2px #fff);}
@media (max-width: 1000px) {.hb{width: 33%;}}

.hb {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  /*animation: logoReveal 1.5s cubic-bezier(.19,1,.22,1) forwards;*/
  animation-delay: 4s;
}
/*
@keyframes logoReveal {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.4);
    filter: blur(20px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0px);
  }
}
*/
.wrapper {
  position: absolute; top: 0%; left: 50%; transform: translate(-50%, 0%);
  width: 50%;
  height: fit-content;
  z-index: 2;
  /*mix-blend-mode: difference;*/
}

.wave-trigger {
  font-family: 'Narnia';
  font-size: 2rem;
  /*letter-spacing: 8px;*/
  color: #fff;
  position: relative;
  overflow: hidden;
  text-align: center;
  display: flex;flex-direction: column;align-items: center;justify-content: space-evenly;
  height: 200px;
}

/* TEXT */
.wave-trigger span {
  position: relative;
  display: inline-block;

  /* 🔥 animated gradient flow 
  background: linear-gradient(
    45deg,
    #ffffff 0%,
    #ffffff 24.5%,
    #000 25%,
    #000 26%,
    #ffffff 26.5%,
    #ffffff 50%,
    #ffffff 74.5%,
    #000 75%,
    #000 76%,
    #ffffff 76.5%,
    #ffffff 100%
  );
  */
  font-family: 'OPTIMA', "Narnia", sans-serif;
  font-weight: bolder;

  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: white;

  /*animation: textFlow 4s linear infinite;*/
  animation: hbChaosStroke 1.8s infinite steps(2, end);
}

@keyframes hbChaosStroke {
  0% {
    filter:
      drop-shadow(2px -1px 0 rgba(0,0,0,0.9))
      drop-shadow(-1px 2px 0 rgba(0,0,0,0.8))
      drop-shadow(3px 1px 6px rgba(0,0,0,0.4));
      transform: translate(0px, 0px) scale(1);
  }

  25% {
    filter:
      drop-shadow(-3px 2px 0 rgba(0,0,0,1))
      drop-shadow(2px -2px 0 rgba(0,0,0,0.7))
      drop-shadow(-6px 3px 10px rgba(0,0,0,0.35));
      transform: translate(3px, -3px) scale(1.01);
  }

  50% {
    filter:
      drop-shadow(4px 3px 0 rgba(0,0,0,0.95))
      drop-shadow(-2px -3px 0 rgba(0,0,0,0.85))
      drop-shadow(0 8px 20px rgba(0,0,0,0.5));
      transform: translate(-3px, 2px) scale(0.99);
  }

  75% {
    filter:
      drop-shadow(-4px -1px 0 rgba(0,0,0,1))
      drop-shadow(3px 4px 0 rgba(0,0,0,0.8))
      drop-shadow(6px -6px 15px rgba(0,0,0,0.3));
      transform: translate(2px, -1px) scale(1.02);
  }

  100% {
    filter:
      drop-shadow(1px 1px 0 rgba(0,0,0,0.9))
      drop-shadow(-2px 2px 0 rgba(0,0,0,0.8))
      drop-shadow(2px 10px 25px rgba(0,0,0,0.45));
      transform: translate(0px, 0px) scale(1);
  }
}

/* =========================
   INNER FADE RINGS
   ========================= */
.rings {
  position: relative;
  /*top: 10%; left: 50%;*/
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* multiple rings */
.rings::before,
.rings::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;

  border: 1px solid #fff;
  /*filter: blur(0.5px);*/

  animation: ringPulse 3s linear infinite;
}

.rings::after {
  animation-delay: 1.5s;
  border-color: #fff;
}

/* animations */
@keyframes textFlow {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

@keyframes ringPulse {
  0% {
    transform: scale(0.3);
    opacity: 0.8;
  }
  100% {
    transform: scale(6);
    opacity: 0;
  }
}

@keyframes corePulse {
  0% {
    box-shadow:
      0 0 0 0 rgba(255, 209, 0, 0.4),
      0 0 0 20px rgba(255, 209, 0, 0.15),
      0 0 0 40px rgba(255, 209, 0, 0.05);
  }
  100% {
    box-shadow:
      0 0 0 80px rgba(255, 209, 0, 0),
      0 0 0 120px rgba(255, 209, 0, 0),
      0 0 0 160px rgba(255, 209, 0, 0);
  }
}

@media (max-width: 1000px) {.wrapper{width: 100vw;} .wave-trigger { font-size: 2rem;}}

/* =========================
   VINTAGE FRAME (IMAGES + VIDEOS)
   ========================= */

.img-container,
.video-container {
  position: absolute;
  width: 700px;
  height: 500px;
  pointer-events: none;

  /* 🔥 asymmetric frame thickness */
  padding: 5px 5px 40px 5px; /* bottom is bigger */

  background: #fff;
  border: 2px solid #000;
  /*box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.6), 0 15px 40px rgba(0, 0, 0, 0.5); */
}

.img-container img,
.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 2px solid #000;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-title {
  position: absolute;
  bottom: 5px;
  left: 5%;
  /*transform: translateX(-50%);*/

  font-family: 'OPTIMA', "Narnia", sans-serif;
  font-size: 22px;
  letter-spacing: 2px;

  color: #000;
  text-transform: initial;
  text-align: left;
  pointer-events: none;
}

@media (max-width: 1000px) {.img-container,.video-container {width: 350px;height: 250px;} .media-title{font-size: 18px;}}

.cursor {
  position: absolute;
  width: 100px;
  height: 100px;
  background: #f1f1f1;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  z-index: 5;
  pointer-events: none;
}

.cursor-img {
  transition: opacity 0.3s;
  border-radius: 100%;
}

.cursor-img.hidden {
  opacity: 0;
}

@media (max-width: 1000px) {.cursor{display: none;}}

.team-copy1{position: absolute; bottom: 0%; display:flex; align-items: center; white-space:nowrap; overflow:hidden; z-index: 1; /*mix-blend-mode:color-dodge;*/ background-color: #fff;} 
.team-copy1-wrap{font-family: 'Narnia'; display: flex; align-items: center;}
.team-copy1-wrap{animation:subLoop1 15s linear infinite;}
@keyframes subLoop1{from{transform: translateX(0);}to{transform: translateX(-100%);}}
.t-stroke-black{font-size: 5rem; line-height:1.5; color: #000; letter-spacing: 5px; text-transform: uppercase; /*text-shadow: 0 0 0.05em #fff;*/ /*text-shadow: -5px -3px 0 black, 3px -3px 0 black, -3px  3px 0 black, 3px  3px 0 black;*/} 

@media screen and (max-device-width: 1000px) {
  .t-stroke-black{font-size:3rem;line-height:1.5;}
  .team-copy1-wrap{animation:subLoop1 30s linear infinite;}
}

/* CSS from other files 
.loading{display:flex;align-items:center;justify-content:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#ffd100;opacity:0;transition:0.5s;}
.before-load .loading{opacity:1;}
@keyframes loading-spin{100%{transform:rotate(360deg);}}
@keyframes loading-circle-ani{0%{stroke-dashoffset:157;}75%{stroke-dashoffset:-147;}100%{stroke-dashoffset:-157;}}
.loading-circle{width:100px;height:100px;animation:loading-spin 2s infinite;}
.loading-circle img{width:100px;height:100px;}
.loading-circle circle{stroke:#171010;stroke-width:4;stroke-dasharray:157,157;stroke-dashoffset:0;fill:transparent;animation:loading-circle-ani 1s infinite;}
*/