/* assets/css/bridge.css */

/* === Bridge Section === */
.bridge {
  position: relative;
  padding: var(--space-2xl) var(--content-padding);
  max-width: var(--content-max);
  margin: 0 auto;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* === Pendulum === */
.bridge__pendulum {
  position: absolute;
  left: var(--content-padding);
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.4;
}

.bridge__pendulum-svg {
  width: 20px;
  height: 200px;
}

/* === Content === */
.bridge__content {
  max-width: 720px;
  margin: 0 auto;
  padding-left: 60px;
}

/* === Phrases === */
.bridge__phrase {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--text-body);
  color: var(--abismo-soft);
  line-height: 1.75;
  margin-bottom: var(--space-xl);
}

.bridge__phrase--display {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: var(--text-h2);
  color: var(--text-primary);
  line-height: 1.3;
}

/* === Golden Line === */
.bridge__golden-line {
  height: 1px;
  background: linear-gradient(90deg, var(--dourado), var(--dourado-light));
  margin-top: var(--space-xl);
  width: 0%;
  transition: width 1.2s ease-out;
}

.bridge__golden-line.visible {
  width: 100%;
}

/* === Responsive: tablet/mobile === */
@media (max-width: 767px) {
  .bridge__pendulum {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-lg);
  }

  .bridge__pendulum-svg {
    width: 16px;
    height: 120px;
  }

  .bridge__content {
    padding-left: 0;
  }
}

/* === Responsive: very small screens === */
@media (max-width: 374px) {
  .bridge__pendulum {
    display: none;
  }
}