/* Light (300) */
@font-face {
  font-family: "Manrope";
  src: url("../public/assets/fonts/Manrope-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Regular (400) */
@font-face {
  font-family: "Manrope";
  src: url("../public/assets/fonts/Manrope-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Medium (500) */
@font-face {
  font-family: "Manrope";
  src: url("../public/assets/fonts/Manrope-Regular.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* SemiBold (600) */
@font-face {
  font-family: "Manrope";
  src: url("../public/assets/fonts/Manrope-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Bold (700) */
@font-face {
  font-family: "Manrope";
  src: url("../public/assets/fonts/Manrope-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ExtraBold (800) */
@font-face {
  font-family: "Manrope";
  src: url("../public/assets/fonts/Manrope-Bold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Global usage */
body {
  font-family: "Manrope";
  background-color: #050F2C;
  color: white !important;
}





/* If you also have italic files, add similar blocks with font-style: italic; */

/* Set global usage */
:root {
  --font-sans: "Manrope"
}

html {
  font-family: var(--font-sans);
  margin-top:0px !important;
}


h1,
h2,
h3,
h4,
h5,
h6,
p,
div {
  font-family: Manrope;
}


.bg-white-8 {
  background-color: rgba(255, 255, 255, 0.8);
}

/* ===== Reveal on scroll ===== */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-come {
  from {
    opacity: 0;
    transform: translateY(0px);
  }

  to {
    opacity: 1;
    transform: translateY(18px);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Base hidden state */
.reveal,
.reveal-in {
  opacity: 0;
  will-change: opacity, transform;
}

/* Variants */
.reveal.is-visible {
  animation: fade-up 1000ms ease-out both;
}

@keyframes fade-in-text {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal-in.is-visible {
  animation: fade-in 1000ms ease-out both;
}

/* Stagger via CSS variable --d */
.reveal.is-visible,
.reveal-in.is-visible {
  animation-delay: var(--d, 0s);
}

@keyframes fade-down {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal-down {
  opacity: 0;
  transform: translateY(-12px);
  will-change: opacity, transform;
}

.reveal-down.is-visible {
  animation: fade-down 800ms ease-out both;
  animation-delay: var(--d, 0s);
  /* optional stagger */
}

/* optional accessibility */
@media (prefers-reduced-motion: reduce) {
  .reveal-down {
    opacity: 1 !important;
    transform: none !important;
  }

  .reveal-down.is-visible {
    animation: none !important;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

  .reveal,
  .reveal-in {
    opacity: 1 !important;
    transform: none !important;
  }

  .reveal.is-visible,
  .reveal-in.is-visible {
    animation: none !important;
  }
}

.spacer {
  height: 120vh;
  display: grid;
  place-items: center;
}

.spacer h1 {
  opacity: 0.7;
}

.bg-fancy {
  background: linear-gradient(90deg, #fda49e, #f4a6a0),
    /* horizontal instead of vertical */
    radial-gradient(78.45% 250% at 14.89% 150%, #f0b9ee 0%, #28ac8985 80.98%),
    radial-gradient(66.48% 185.23% at 0% 35.94%,
      #911a16 50.55%,
      rgba(253, 160, 154, 0) 100%);
  background-blend-mode: overlay, normal;
  transition: all 0.3s ease-in-out;
}

.bg-fancy:hover {
  /* box-shadow: 0px 10px 60px 0px rgba(255, 175, 175, 0.3); */
}

.text-fancy {
  background: linear-gradient(90deg, #fda49e, #f4a6a0),
    radial-gradient(78.45% 250% at 14.89% 150%, #f0b9ee 0%, #28ac8985 60.98%),
    radial-gradient(
      66.48% 185.23% at 0% 35.94%,
      #911a16 50.55%,
      rgba(253, 160, 154, 0) 100%);
  background-blend-mode: overlay, normal;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* for Firefox */
  color: transparent;
}

.text-fancy2 {
  background: linear-gradient(90deg, #fda49e, #f4a6a0),
    radial-gradient(78.45% 250% at 14.89% 150%, #deb1ccc3 0%, #229979 90.98%),
    radial-gradient(66.48% 185.23% at 0% 35.94%,
      #911a16 50.55%,
      rgba(253, 160, 154, 0) 100%);
  background-blend-mode: overlay, normal;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* for Firefox */
  color: transparent;
}
.fade-mask {
  mask-image: linear-gradient(to right, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);
  mask-mode: alpha;
  -webkit-mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.shadow-fancy {
  box-shadow: 0px 10px 60px 0px rgba(255, 175, 175, 0.5),
    10px 20px 80px 0px rgba(255, 197, 218, 0.3),
    -20px -10px 50px 0px rgba(19, 229, 213, 0.4),
    inset 0px 0px 20px 0px rgba(255, 255, 255, 0.5);
}

.shadow-fancy2 {
  box-shadow: 0px 10px 60px 0px rgba(255, 175, 175, 0.3);
  transition: box-shadow 0.3s ease-in-out;
}

.shadow-fancy2:hover {
  box-shadow: 0px 10px 60px 0px rgba(116, 105, 105, 0.3);
}

.bg-fancy-blur {
  position: absolute;
  width: 100%;
  height: 3615.33px;
  top: 525.03px;
  left: 625.88px;

  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0) 100%);

  backdrop-filter: blur(176.7px);
  opacity: 1;

  /* rotation */
  transform: rotate(136.29deg);

  /* fancy shadow */
  box-shadow: 0px 10px 60px rgba(255, 175, 175, 0.5),
    10px 20px 80px rgba(255, 197, 218, 0.3),
    -20px -10px 50px rgba(19, 229, 213, 0.4),
    inset 0px 0px 20px rgba(255, 255, 255, 0.5);
}

.bg-white-blur {
  background-color: rgba(255, 255, 255, 0.1);
}

.border-solid-white {
  border-width: 1px, 1px, 6px, 1px;

  border-style: solid;

  border-color: rgba(200, 211, 229, 1);
}

.border-solid-gray {
  border-width: 1px 1px 6px 1px;

  border-style: solid;

  border-color: rgba(200, 211, 229, 1);
}

.border-fancy {
  position: relative;
  border-radius: 20px;
  /* make the ring rounded (optional) */
}

/* show the ring (either default or on hover) */
.border-fancy::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  /* ring thickness */
  border-radius: inherit;
  box-sizing: border-box;
  /* keep the inner hole correct */

  background: radial-gradient(90% 140% at 90% 30%,
      rgba(40, 172, 137, 0.61) 0%,
      rgba(40, 172, 137, 0.614) 20%,
      rgba(40, 172, 137, 0.667) 30%,
      rgba(40, 172, 137, 0.625) 45%,
      rgba(40, 172, 137, 0.34) 60%,
      rgba(40, 172, 136, 0.25) 75%,
      rgba(40, 172, 136, 0) 80%),
    radial-gradient(100% 200% at 20% 40%,
      #aca597 0%,
      rgb(253, 160, 154) 30%,
      #ffffff 60%),
    radial-gradient(66.48% 185.23% at 0% 35.94%,
      rgba(253, 160, 154, 1) 10.55%,
      rgba(253, 160, 154, 0) 100%),
    linear-gradient(90deg,
      rgba(240, 185, 238, 1) 0%,
      rgba(40, 172, 137, 0.579) 40%,
      rgba(253, 160, 154, 1) 100%);

  background-repeat: no-repeat;

  /* mask so gradient only shows as a ring */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-repeat: no-repeat;

  pointer-events: none;
  opacity: 1;
  /* <-- make visible (set to 0 if using :hover) */
  transition: opacity 0.2s ease;
}

/* If you prefer it only on hover, keep opacity:0 above and use this: */
/* .border-fancy:hover::before { opacity: 1; } */

.border-fancy2 {
  position: relative;
  border-radius: 20px;
  /* make the ring rounded (optional) */
}

/* show the ring (either default or on hover) */
.border-fancy2::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  /* ring thickness */
  padding-bottom: 4px;
  border-radius: inherit;
  box-sizing: border-box;
  /* keep the inner hole correct */

  background: radial-gradient(90% 140% at 90% 30%,
      rgba(40, 172, 137, 0.522) 0%,
      rgba(40, 172, 137, 0.564) 20%,
      rgba(40, 172, 136, 0.9) 30%,
      rgba(40, 172, 136, 0.7) 45%,
      rgba(40, 172, 136, 0.5) 60%,
      rgba(40, 172, 136, 0.25) 75%,
      rgba(40, 172, 136, 0) 80%),
    radial-gradient(100% 200% at 20% 40%,
      #aca597 0%,
      rgb(253, 160, 154) 30%,
      #ffffff 60%),
    radial-gradient(66.48% 185.23% at 0% 35.94%,
      rgba(253, 160, 154, 1) 10.55%,
      rgba(253, 160, 154, 0) 100%),
    linear-gradient(90deg,
      rgba(240, 185, 238, 1) 0%,
      rgba(40, 172, 137, 0.645) 40%,
      rgba(253, 160, 154, 1) 100%);

  background-repeat: no-repeat;

  /* mask so gradient only shows as a ring */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-repeat: no-repeat;

  pointer-events: none;
  opacity: 1;
  /* <-- make visible (set to 0 if using :hover) */
  transition: opacity 0.2s ease;
}

.border-fancy4 {
  border-width: 2px, 2px, 4px, 2px;

  border-style: solid;

  border-image-source: linear-gradient(0deg, #ffb1ac, #ffb1ac),
    radial-gradient(78.45% 156.63% at 44.89% 100%, #f0b9ee 0%, #28ac88 80.98%)
    /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
    ,
    radial-gradient(66.48% 185.23% at 0% 35.94%,
      #fda09a 10.55%,
      rgba(253, 160, 154, 0) 100%)
    /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
  ;
}

/* this border use in roadmap section */
.border-roadmap {
  position: relative;
}

/* show the ring (either default or on hover) */
.border-roadmap::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 5px; /* ring thickness */
  border-radius: inherit;
  box-sizing: border-box; /* keep the inner hole correct */

  background: radial-gradient(
      90% 140% at 90% 30%,
      rgba(40, 172, 137, 0.61) 0%,
      rgba(40, 172, 137, 0.614) 20%,
      rgba(40, 172, 137, 0.667) 30%,
      rgba(40, 172, 137, 0.625) 45%,
      rgba(40, 172, 137, 0.34) 60%,
      rgba(40, 172, 136, 0.25) 75%,
      rgba(40, 172, 136, 0) 80%
    ),
    radial-gradient(
      100% 200% at 20% 40%,
      #aca597 0%,
      rgb(253, 160, 154) 30%,
      #ffffff 60%
    ),
    radial-gradient(
      66.48% 185.23% at 0% 35.94%,
      rgba(253, 160, 154, 1) 10.55%,
      rgba(253, 160, 154, 0) 100%
    ),
    linear-gradient(
      90deg,
      rgba(240, 185, 238, 1) 0%,
      rgba(40, 172, 137, 0.579) 40%,
      rgba(253, 160, 154, 1) 100%
    );

  background-repeat: no-repeat;

  /* mask so gradient only shows as a ring */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-repeat: no-repeat;

  pointer-events: none;
  opacity: 1; /* <-- make visible (set to 0 if using :hover) */
  transition: opacity 0.2s ease;
}

.bg-gradiant-white {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.1) 114.29%);
}

section#logo-section {
  min-height: 90vh;
  display: grid;
  place-items: center;
  background: radial-gradient(600px 400px at 50% 10%,
      rgba(0, 0, 0, 0.06),
      transparent);
}

/* 3D container */
#logo3d {
  width: min(500px, 92vw);
  height: min(60vh, 520px);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  /* box-shadow: 0 10px 30px rgba(0, 0, 0, .12); */
  background: transparent;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms ease, transform 500ms ease;
}

#logo3d.ready {
  opacity: 1;
  transform: translateY(0);
}

/* tiny overlay label */
#status {
  position: absolute;
  inset: auto 10px 10px auto;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  pointer-events: none;
  user-select: none;
}

.bg-soft-fade {
  position: relative;
}

.bg-soft-fade::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* behind content */
  pointer-events: none;

  /* your background */
  background: radial-gradient(85.24% 130.64% at 73.09% 54.69%,
      rgba(1, 168, 63, 0.08) 0%,
      rgba(246, 190, 79, 0.08) 70.19%,
      rgba(255, 255, 255, 0.08) 100%),
    linear-gradient(180deg,
      #ffffff 0%,
      rgba(255, 255, 255, 0) 49.52%,
      #ffffff 100%);

  /* fade edges — affects only this layer */
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0%,
      black 14%,
      black 86%,
      transparent 100%);
  mask-image: linear-gradient(to bottom,
      transparent 0%,
      black 14%,
      black 86%,
      transparent 100%);
}

.bg-soft-fade>* {
  position: relative;
  z-index: 1;
  /* content stays sharp */
}

.custom-hover {
  position: relative;
  border-radius: 16px;
  background: transparent; /* default fill */
  transition: background 0.2s ease;
}

/* Gradient ring */
.custom-hover::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2.3px;
  /* ring thickness */
  border-radius: inherit;

  background:
    /* TEAL fade from right */
    radial-gradient(90% 140% at 90% 30%,
      rgba(40, 172, 136, 0.6) 0%,
      rgba(40, 172, 136, 1) 20%,
      rgba(40, 172, 136, 0.9) 30%,
      rgba(40, 172, 136, 0.7) 45%,
      rgba(40, 172, 136, 0.5) 60%,
      rgba(40, 172, 136, 0.25) 75%,
      rgba(40, 172, 136, 0) 80%),
    /* left beige/pink */
    radial-gradient(100% 200% at 20% 40%,
      #aca597 0%,
      rgb(253, 160, 154) 30%,
      #ffffff 60%),
    /* pink glow */
    radial-gradient(66.48% 185.23% at 0% 35.94%,
      rgba(253, 160, 154, 1) 10.55%,
      rgba(253, 160, 154, 0) 100%),
    /* base linear blend */
    linear-gradient(90deg,
      rgba(240, 185, 238, 1) 0%,
      rgba(40, 172, 136, 1) 50%,
      rgba(253, 160, 154, 1) 100%);

  background-repeat: no-repeat;

  /* mask so gradient only shows in border ring */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* On hover: */
.custom-hover:hover {
  /* background gradient for the whole card body */
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.1) 114.29%);

  border-color: transparent !important;
  /* hide default border */
}

.custom-hover:hover::before {
  opacity: 1;
  /* show gradient border ring */
}

.custom-hover:hover {
  border-color: transparent !important;
  /* hide default border */
}

.custom-hover:hover::before {
  opacity: 1;
}

#siteHeader {
  transform: translateY(0);
  opacity: 1;
  /* background-color: transparent; top = transparent */
}

#siteHeader.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* Reappears while scrolling up */
#siteHeader.is-solid {
  background-color: white;
  backdrop-filter: saturate(140%) blur(6px);
}