/* ============================================
   MULI — SELF-HOSTED FONT
   ============================================ */
@font-face {
  font-family: "Muli";
  src: url("muli/Muli-Regular.woff2") format("woff2"),
       url("muli/Muli-Regular.woff")  format("woff"),
       url("muli/Muli-Regular.ttf")   format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Muli";
  src: url("muli/Muli-Bold.woff2") format("woff2"),
       url("muli/Muli-Bold.woff")  format("woff"),
       url("muli/Muli-Bold.ttf")   format("truetype");
  font-weight: 700;
  font-style: normal;
}

/* ============================================
   BASE
   ============================================ */
body {
  margin: 0;
  font-family: "Muli", sans-serif;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

[data-barba="container"] {
  height: 100vh;
  width: 100vw;
  position: relative;
}

/* ============================================
   TRANSITION CIRCLE — FIXED Z-INDEX
   ============================================ */
.transition-circle {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 0vmax;
  height: 0vmax;
  background: white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;          /* Prevent covering logo permanently */
  pointer-events: none;
}

/* ============================================
   INTRO PAGE
   ============================================ */
body[data-barba-namespace="intro"] {
  background: linear-gradient(to bottom,#c9e4f9,#d7e9f4,#f8ebe3);
}

.intro-container {
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(40vw,40vh);
  height: min(40vw,40vh);
  display:flex;
  align-items:center;
  justify-content:center;
  animation: fadeOutIntro 1s ease forwards;
  animation-delay: 2.4s;
}

.loader-ring {
  position:absolute;
  inset:0;
  border-radius:50%;
  border:3px solid rgba(255,255,255,0.5);
  border-top-color:rgba(255,255,255,1);
  animation: spin 2.4s linear forwards;
}

.text-inside {
  position:absolute;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:1.5rem;
  color:#333;
  font-weight: 600;
  font-family: "Muli", sans-serif;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeOutIntro { to { opacity:0; } }

/* ============================================
   BACKGROUND
   ============================================ */
#vanta-bg {
  position: fixed;
  inset: 0;
  z-index: -3 !important;   /* stays behind everything */
}

.cloud-overlay {
  position: fixed;
  top:0; 
  left:0;
  width:100%;
  height:48vh;
  background:url('home-clouds.png') center/cover no-repeat;
  opacity:0.9;
  z-index:-2 !important;
}

/* ============================================
   LOGO — RESTORED VISIBILITY
   ============================================ */
.sky-logo {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;

  z-index: 50;            /* Always above all layers */
  pointer-events: none;   /* Prevent animation conflict */
}

/* ============================================
   HOME CONTENT (MULI HEADLINE)
   ============================================ */
.home-content {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  width:90%;
  max-width:900px;
  z-index:5;
  transition:opacity .6s;

  font-family: "Muli", sans-serif;
}

.home-content.hidden {
  opacity:0;
  pointer-events:none;
}

.seq-type {
  font-size:2.2rem;
  font-weight:600;
  opacity:0;
  font-family: "Muli", sans-serif;
}

.fade-in { animation: fadeIn .8s forwards; }
.fade-out { animation: fadeOut .8s forwards; }

@keyframes fadeIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}

@keyframes fadeOut {
  from { opacity:1; }
  to   { opacity:0; }
}

/* ============================================
   FINAL DIALOGUE — MULI VERSION (FIXED)
   ============================================ */
.final-dialogue {
  display:none;
  position:absolute;
  top:50%; 
  left:50%;
  transform:translate(-50%, -50%);
  text-align:center;
  z-index:30;

  font-family: "Muli", sans-serif;
}

.final-dialogue.show {
  display:block;
  overflow: hidden;
  animation: dialogIn 0.9s forwards ease;
}

.final-dialogue h2,
.final-dialogue p {
  font-family: "Muli", sans-serif;
  font-weight: 600;

  letter-spacing: 0.2px;
  line-height: 1.28;

  opacity: 0;
  transform: translateY(16px) scale(0.985);
  filter: blur(4px);

  animation: muliReveal 1.05s ease forwards;
}

.final-dialogue h2:nth-of-type(1) { animation-delay: 0.35s; }
.final-dialogue h2:nth-of-type(2) { animation-delay: 0.65s; }
.final-dialogue p { animation-delay: 0.9s; }

@keyframes muliReveal {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
    filter: blur(4px);
  }
  50% {
    opacity: 1;
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes dialogIn {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}