/* ====== Island Blockchain Research Theme CSS ====== */

/* === Font Faces === */
@font-face {
    font-family: 'Chivo';
    src: url('fonts/Chivo-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('fonts/DMSans-9ptRegular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('fonts/Outfit-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('fonts/SpaceGrotesk-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Spline Sans';
    src: url('fonts/SplineSans-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Syne';
    src: url('fonts/Syne-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* === Color Palette Variables === */
:root {
  /* Daylight Theme */
  --day-palm: #2D6B4F;             /* Lush Canopy */
  --day-deep-ocean: #2D82A1;       /* Lagoon Ridge */
  --day-shallow-ocean: #78D2E6;    /* Glasswater Blue */
  --day-trunk: #D79F72;            /* Sunwarmed Bark */
  --day-sand: #FCE2B7;             /* Golden Dune */
  --day-orange: #FFA94D;           /* Citrus Radiance */
  --day-pink: #FF9EAC;             /* Petal Breeze */
  --day-purple: #C6A6F2;           /* Sky Orchid */

  /* Sunset Palette (Summary) */
  --sunset-green: #1F4E3D;         /* Jungle Depth */
  --sunset-deep-ocean: #24537E;    /* Midnight Surf */
  --sunset-shallow-ocean: #58A6B2; /* Coral Bay */
  --sunset-trunk: #B47458;         /* Copper Driftwood */
  --sunset-sand: #F0CDA6;          /* Blushed Dune */
  --sunset-accent: #F7B484;        /* Amber Mist */
  --sunset-orange: #FF843F;        /* Sunstone Glow */
  --sunset-pink: #F56492;          /* Mirage Blush */
  --sunset-purple: #8E63D2;        /* Dusk Bloom */
}

/* === Base Styles === */


/* === Header === */
header {
  padding: 2rem;
  text-align: center;
}

header img {
  width: 120px;
}

header h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.5rem;
  margin: 1rem 0 0;
  letter-spacing: 0.05em;
}

/* === Section Styling === */
section {
  padding: 3rem 2rem;
  text-align: center;
}

h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2rem;
  margin-bottom: 1rem;
}

p {
  font-size: 1.1rem;
}

/* === Buttons === */
button {
  background: var(--day-orange);
  border: none;
  padding: 1rem 2rem;
  font-family: 'DM Sans', sans-serif;
  color: white;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

button:hover {
  transform: scale(1.05);
}



/* === Effects === */

.ocean-background {
  background-size: 500px auto;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 300vh; /* to match scrolling */
  background: url('/assets/wave op 100.svg') repeat;
  animation: floatBackground 60s linear infinite;
  z-index: -1;
  opacity: 0.2;
}

@keyframes floatBackground {
  from { background-position: 0 0; }
  to { background-position: 1000px 0; }
}

.bubbles-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

/* General bubble style */
.bubble {
  position: absolute;
  width: 40px;
  height: 40px;
  animation: floatUp 10s ease-in infinite;
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
}

/* Variants for different SVGs */
.bubble.variant-1 {
  background-image: url('/assets/Bubble 1.svg');
}
.bubble.variant-2 {
  background-image: url('/assets/Bubble 2.svg');
}
.bubble.variant-3 {
  background-image: url('/assets/Bubble 3.svg');
}
.bubble.variant-4 {
  background-image: url('/assets/Bubble 4.svg');
}

@keyframes floatUp {
  0% {
    transform: translateY(100vh) scale(0.5);
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-100px) scale(1);
    opacity: 0;
  }
}