/* ============================================
   Ryobi "Swifty for Mayor" Microsite
   Phase 1: Holding Page
   ============================================ */

:root {
  --ryobi-yellow: #c8d200;
  --ryobi-yellow-light: #d4de00;
  --ryobi-yellow-dark: #b8c100;
  --ryobi-yellow-darker: #a8b000;
  --ryobi-black: #000;
  --ryobi-white: #fff;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---- Angular background ---- */
.holding-page {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--ryobi-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Geometric overlay triangles to match the PDF design */
.holding-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(
      160deg,
      var(--ryobi-yellow-light) 0%,
      var(--ryobi-yellow-light) 25%,
      transparent 25%
    );
  z-index: 1;
}

.holding-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(
      170deg,
      transparent 45%,
      var(--ryobi-yellow-dark) 45%,
      var(--ryobi-yellow-dark) 100%
    );
  z-index: 1;
}

/* Additional angular shape */
.angular-overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  background:
    linear-gradient(
      200deg,
      var(--ryobi-yellow-light) 0%,
      var(--ryobi-yellow-light) 40%,
      transparent 40%
    );
  z-index: 2;
}

.angular-overlay-2 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40%;
  height: 60%;
  background:
    linear-gradient(
      155deg,
      transparent 30%,
      var(--ryobi-yellow-darker) 30%
    );
  z-index: 2;
}

/* ---- Ryobi Logo ---- */
.logo-container {
  position: relative;
  z-index: 10;
}

.ryobi-logo {
  display: block;
  width: 220px;
  height: auto;
}

@media (min-width: 768px) {
  .ryobi-logo {
    width: 320px;
  }
}

@media (min-width: 1200px) {
  .ryobi-logo {
    width: 400px;
  }
}