/* ==========================================================================
   RETAIL-DESKTOP.CSS
   Theme: High-End Retail, Project Status, Anticipation
   ========================================================================== */

.retail-hero {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.85)), url(/assets/heros/retail_hero_desktop.jpg);
  background-size: cover;
  background-position: center; 
  background-attachment: fixed;
  padding-top: 20rem;
}

/* --- INTRO SECTION --- */
.retail-intro {
  background-color: #000;
  padding: 8rem 0 4rem;
  text-align: center;
  margin: 0 auto;
}

.section-title {
  font-family: var(--ff-headers);
  font-size: 3.5rem;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

/* Icons */

.delivery-icon-wrapper {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
  /* 1. Add vertical padding so the bobbing ship has room to move up/down */
  padding: 2rem 0; 
  /* 2. Remove 'overflow: hidden' if it's clipping the boat's movement */
  overflow: visible; 
}

.icon-container {
  display: flex;
  /* 3. Increase the gap between the truck and the ship */
  gap: 8rem; 
  color: var(--signature-orange);
  font-size: 3.5rem;
}


.animated-truck {
  display: inline-block;
  /* Duration increased to 8s to make the round-trip feel natural */
  animation: deliveryLoop 8s ease-in-out infinite; 
  filter: drop-shadow(0 0 10px rgba(248, 194, 93, 0.4));
}

@keyframes deliveryLoop {
  0% {
    transform: translateX(-150%) scaleX(1); /* Start off-screen left, facing right */
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  40% {
    transform: translateX(100%) scaleX(1); /* Drive past center to the right */
  }
  45%, 55% {
    transform: translateX(100%) scaleX(-1); /* STOP and FLIP around */
  }
  85% {
    transform: translateX(-150%) scaleX(-1); /* Drive all the way back to the left */
  }
  90%, 100% {
    transform: translateX(-150%) scaleX(1); /* Fade out and flip back for next loop */
    opacity: 0;
  }
}

/* The Bobbing Ship Animation */

.animated-ship {
  display: inline-block;
  /* 1. Slowed down: Arrival takes 5s (once), Bobbing loops every 4s */
  /* Name the animations */
  animation-name: shipArrival, shipBob;
  
  /* Set the timings independently */
  animation-duration: 8s, 2s; /* Arrival is 8s, Bobbing is 4s */
  
  /* Define how they behave */
  animation-timing-function: ease-in, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: normal, alternate;
  animation-fill-mode: forwards, none;
}

/* 2. Arrival: Starts small (0.7) and grows to full size (1.3) then STAYS */
@keyframes shipArrival {
  0% { scale: 0.5; }
  100% { scale: 1.1; }
}

/* 3. The Sea: Bobs up/down and rotates clockwise/counter-clockwise */
@keyframes shipBob {
  0% { 
    translate: 0 2px;     /* Dips 2px below start */
    rotate: -4deg;        /* Tilts counter-clockwise */
  }
  100% { 
    translate: 0 -5px;   /* Bobs 10px up */
    rotate: 4deg;         /* Tilts clockwise */
  }
}

/* --- DASHBOARD SECTION (Stats + Badges) --- */
.dashboard-section {
  background: #050505;
  padding: 3rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
}

.ghost-stats-container {
  /* 1. Force Flex and Row even inside a Grid Container */
  display: flex !important;
  flex-direction: row !important;
  justify-content: center;
  align-items: center;
  gap: 8rem; 
  
  /* 2. Ensure it takes up the full width */
  width: 100%;
  max-width: 100rem; 
  margin: 4rem auto 6rem;
  padding: 0 2rem;
}

.ghost-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1; 
}

.stat-number {
  display: block;
  font-family: var(--ff-headers);
  font-size: 3.8rem; 
  font-weight: 900;
  color: #fff;
  line-height: 1;
  text-shadow: 0 0.5rem 2rem rgba(0,0,0,0.6);
  letter-spacing: 0.1rem; 
}

.stat-label {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--ff-main);
  text-transform: uppercase;
  letter-spacing: 0.3rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--signature-orange);
}

.ghost-divider {
  /* Force a VERTICAL line */
  width: 1px !important; 
  height: 8rem !important; 
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  flex-shrink: 0; 
  align-self: center;
  margin: 0; 
}

.minor-petition {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 3rem 0;
}


.radial-red {
 background: radial-gradient(
    circle at center, 
    rgba(213, 31, 31, 0.4) 0%, 
    rgba(0, 0, 0, 0.2) 60%,      
    transparent 100%             
)};

.cta-text {
  font-size: 3.5rem;
  max-width: 60%;
  line-height: 2;
}

.northern-logo-wrapper {
  margin-top: 6rem; /* Gives breathing room below the photo grid */
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers the logo and text horizontally */
  justify-content: center;
}

.beta-logo {
  /* 1. Force a perfect square first */
  width: 30rem; 
  height: 30rem; 
  
  /* 2. Make it a circle */
  border-radius: 50%; 
  
  /* 3. The Magic Crop: prevents the JPG from warping */
  object-fit: cover; 
  object-position: center; /* Ensures the middle of the JPG stays in the circle */
  
  /* 4. The Faint Gray Border */
  border: 2px solid rgba(255, 255, 255, 0.15); 
  
  /* Optional: Adds a subtle shadow so it pops off the dark background */
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.4); 
  margin-bottom: 1.5rem;
}

.beta-text {
  font-family: var(--ff-main);
  font-size: 1.2rem;
  color: var(--fc-muted, #888); /* Uses your muted gray variable if available */
  font-style: italic;
  letter-spacing: 0.2rem;
}

/* 2. Status Badges */
.status-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 120rem; 
  margin: 0 auto;  
  padding-top: 5rem;   
}

.status-badge {
  display: flex;
  flex: 1;
  min-width: 25rem;
  max-width: 35rem; 
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
  
  background-color: rgba(255, 255, 255, 0.03);
  border-left: 0.4rem solid #555;
  border-radius: var(--radius-subtle);
  
  font-family: var(--ff-main);
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  color: #ccc;
  
  transition: transform 0.3s ease;
}

.status-badge:hover {
  transform: translateY(-0.3rem);
  background-color: rgba(255, 255, 255, 0.05);
}

/* Status Colors */
.status-ready {
  border-left-color: #4caf50;
  background: linear-gradient(90deg, rgba(76, 175, 80, 0.1) 0%, transparent 100%);
  color: #e8f5e9;
}
.status-ready i { color: #4caf50; font-size: 1.4rem; }

.status-warning {
  border-left-color: var(--fc-accent-red);
  background: linear-gradient(90deg, rgba(234, 84, 85, 0.1) 0%, transparent 100%);
  color: #ffebee;
}
.status-warning i { color: var(--fc-accent-red); font-size: 1.4rem; }


/* --- GALLERY SECTION --- */
.legacy-gallery {
  padding: 8rem 0 4rem;
  background-color: #000;
}

.gallery-header {
  text-align: center;
  font-family: var(--ff-headers);
  font-size: 3.5rem;
  color: var(--fc-muted);
  text-transform: uppercase;
  letter-spacing: 0.5rem;
  margin-bottom: 4rem;
  opacity: 0.6;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  max-width: 120rem;
  margin: 0 auto;
}

.gallery-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-subtle);
  overflow: hidden;
  transition: all 0.3s ease;
}

.gallery-card:hover {
  border-color: var(--signature-orange);
  transform: translateY(-0.5rem);
  box-shadow: 0 1rem 3rem rgba(0,0,0,0.5);
}

.gallery-img {
  width: 100%;
  height: 35rem; 
  object-fit: cover;
  display: block;
  filter: saturate(0.8);
  transition: filter 0.3s ease;
}

.gallery-card:hover .gallery-img {
  filter: saturate(1.1);
}

.gallery-label {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem;
  background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, transparent 100%);
  color: #fff;
  font-family: var(--ff-headers);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  text-align: center;
}


/* --- MONOLITH CTA STYLES --- */
.petition-wrapper {
  padding: 10rem 0;
  background: radial-gradient(circle at top, #111 0%, #000 100%);
  border-top: 1px solid rgba(248, 194, 93, 0.2);
}

.petition-intro {
  margin-bottom: 5rem;
}

.petition-header {
  font-family: var(--ff-headers);
  font-size: 5rem;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  margin-bottom: 2rem;
}

.petition-card-monolith {
  width: 100%;
  max-width: 80rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--signature-orange);
  border-radius: var(--radius-large);
  overflow: hidden;
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.6);
  margin-bottom: 6rem;
  margin-left: auto; 
  margin-right: auto;
}

.petition-card-monolith .card-header {
  background: var(--signature-orange);
  padding: 1.5rem;
}

.petition-card-monolith .card-header h3 {
  color: #000;
  font-family: var(--ff-headers);
  font-size: 1.8rem;
  margin: 0;
  letter-spacing: 2px;
}

.petition-card-monolith .card-body {
  padding: 5rem 4rem;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
}

.petition-card-monolith .progress-bar {
  width: 100%;
  height: 1.5rem;
  background: #222;
  border-radius: 5rem;
  margin-bottom: 3rem;
  border: 1px solid rgba(255,255,255,0.1);
}

.petition-card-monolith .progress-fill {
  background: linear-gradient(90deg, var(--signature-orange), var(--fc-accent-red));
  box-shadow: 0 0 15px var(--fc-accent-red);
  height: 100%;
  border-radius: 5rem;
}

.petition-card-monolith .sub-text {
  font-size: 1.4rem;
  color: var(--fc-muted);
  margin-bottom: 4rem;
}

/* Button Styles */
.btn-petition {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 2rem 3rem;
  font-family: var(--ff-headers);
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1.2;
  color: #000;
  background-color: var(--signature-orange);
  border-radius: 5rem;
  transition: all 0.3s ease;
  box-shadow: 0 0.4rem 1.5rem rgba(248, 194, 93, 0.3);
}

.btn-petition:hover {
  transform: translateY(-0.3rem);
  background-color: #fff;
  box-shadow: 0 0.8rem 2.5rem rgba(255, 255, 255, 0.2);
}

.btn-large {
  padding: 1.5rem 4rem;
  font-size: 1.6rem;
  letter-spacing: 0.2rem;
}

.btn-petition i {
  transition: transform 0.3s ease;
}

.btn-petition:hover i {
  transform: rotate(-15deg) scale(1.1);
}