/*Decentralized*/

/* Centralized-Decentralized Section */
#centralized-decentralized {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Crypto and Fiat Worlds */
.crypto-world, .fiat-world {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none; /* Prevent accidental overlay blocking */
}

.crypto-world {
  background: #000;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.fiat-world {
  background: #000; 
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  background-size: cover;
  background-position: center;
}

.fiat-world::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.25);
  z-index: 1;
}

/* Matrix Rain Effect */
#matrix-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
}

/* Headers */
.centralized-header, .decentralized-header {
  z-index: 2;
  text-align: center;
  position: absolute;
  width: 60vw;
  max-width: 420px;
  min-width: 220px;
  background: none;
  border-radius: 18px;
  box-shadow: none;
  padding: 18px 12px;
  pointer-events: auto;
  cursor: pointer;
  transition: box-shadow 0.2s;
}

.decentralized-header {
  top: 75%;
  left: 25%;
  transform: translate(-50%, -50%);
  color: #FF6666;
  text-shadow: 0 0 25px rgba(255, 102, 102, 0.7);
}

.decentralized-header .de {
  font-size: 5.5em;
  display: block;
  font-weight: 800;
  letter-spacing: -2px;
}

.centralized-header {
  top: 25%;
  right: 35%;
  transform: translate(50%, -50%);
  color: #FFF;
  text-shadow: 0 0 25px rgba(255, 255, 255, 0.7);
}

.centralized-header .centralized {
  font-size: 2.8em;
  display: block;
  text-transform: lowercase;
  font-weight: 600;
}

/* Flower of Life */
.flower-of-life {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 280px; height: 280px;
  z-index: 3;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  filter: drop-shadow(0 0 20px rgba(255, 102, 102, 0.6));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flower-of-life .button {
  position: absolute !important;
  top: 42% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10 !important;
}

.flower-of-life:hover {
  transform: translate(-50%, -50%) scale(1.15);
  filter: drop-shadow(0 0 35px rgba(255, 102, 102, 0.8));
}

.flower-of-life svg {
  width: 100%;
  height: 100%;
  animation: rotate 25s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Responsive adjustments */
@media (min-width: 1025px) {
  /* Desktop-only: keep "centralized" fully inside the fiat triangle and away from the diagonal */
  .centralized-header {
    top: 15%;
    right: 45%;
  }
}

@media (max-width: 1024px) {
  .decentralized-header .de {
    font-size: 4.5em;
  }
  .centralized-header .centralized {
    font-size: 2.3em;
  }
  .flower-of-life {
    width: 200px;
    height: 200px;
  }
}

@media (max-width: 768px) {
  #centralized-decentralized {
    min-height: 600px;
  }
  .decentralized-header, .centralized-header {
    width: 80vw;
    max-width: 320px;
    padding: 12px 6px;
  }
  .decentralized-header .de {
    font-size: 3.2em;
  }
  .centralized-header .centralized {
    font-size: 1.6em;
  }
  .flower-of-life {
    width: 140px;
    height: 140px;
  }

  /* Mobile: move the Hack button up further (override !important base rule) */
  .flower-of-life .button {
    transform: translate(-50%, -50%) translateY(24%) !important;
    font-size: 0.63em;
    padding: 7px 17px;
    border-width: 1px;
    margin-top: 0;
  }
}

@media (max-width: 480px) {
  #centralized-decentralized {
    min-height: 420px;
  }
  .decentralized-header {
    top: 70%;
    left: 30%;
    min-width: 120px;
    max-width: 90vw;
    padding: 8px 2px;
  }
  .decentralized-header .de {
    font-size: 2em;
  }
  .centralized-header {
    top: 30%;
    right: 30%;
    min-width: 120px;
    max-width: 90vw;
    padding: 8px 2px;
  }
  .centralized-header .centralized {
    font-size: 1.1em;
  }
  .flower-of-life {
    width: 90px;
    height: 90px;
  }
}

@media (max-width: 360px) {
  .centralized-header {
    /* Move inward (towards center) and up */
    right: calc(30% + 12px);
    top: calc(30% - 40px);
  }
  .centralized-header .centralized {
    font-size: 0.94em; /* ~15% smaller than 1.1em */
    position: relative;
    top: -2px;
  }
}