/* -------------------------------------------------------------
 * ATLAS AUTOMOTIVE - VIEW LAYOUTS & STORIES
 * ------------------------------------------------------------- */

/* Page Fade Transition wrapper */
.view-wrapper {
  opacity: 0;
  transform: translateY(15px);
  animation: viewFadeIn 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

@keyframes viewFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -------------------------------------------------------------
 * HOME VIEW (CINEMATIC CHAPTERS)
 * ------------------------------------------------------------- */

.home-viewport {
  position: relative;
  background-color: var(--color-bg-graphite);
}

/* Base Chapter Layout */
.chapter {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-96) 0;
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}

/* Chapter 1: The Silence (Hero) */
.chapter-hero {
  height: 100vh;
  padding: 0;
  justify-content: flex-end;
  align-items: flex-start;
  position: relative;
  background-color: #050506;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/atlas_one_hero.png');
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  animation: cinematicDolly 25s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
  z-index: 1;
}

/* Shadows and gradients over hero to reveal form */
.hero-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 40%, rgba(11,12,13,0) 0%, rgba(11,12,13,0.7) 70%, rgba(11,12,13,0.95) 100%);
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 10;
  margin-bottom: 8%;
  max-width: 640px;
  transform: translateY(20px);
  opacity: 0;
  animation: heroReveal 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards 4s;
}

.hero-subtitle {
  font-size: 0.9rem;
  letter-spacing: 0.25em;
  margin-bottom: var(--space-16);
  color: var(--color-copper);
}

.hero-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.1;
  font-weight: 200;
  margin-bottom: var(--space-24);
  color: var(--color-titanium);
}

.hero-desc {
  font-size: 1.1rem;
  margin-bottom: var(--space-40);
  max-width: 480px;
}

.hero-ctas {
  display: flex;
  gap: var(--space-24);
  align-items: center;
}

/* Floating particles in light rays */
.particles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.4;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background-color: var(--color-titanium);
  border-radius: 50%;
  opacity: 0;
  animation: particleFloat 15s infinite linear;
}

/* Chapter 2: The Philosophy (Introduction) */
.intro-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-48);
  align-items: center;
}

.intro-text-block {
  grid-column: 2 / span 5;
}

.intro-image-block {
  grid-column: 8 / span 4;
  position: relative;
}

.intro-tag {
  color: var(--color-copper);
  font-size: 0.8rem;
  margin-bottom: var(--space-24);
}

.intro-heading {
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.3;
  margin-bottom: var(--space-32);
}

.intro-paragraph {
  font-size: 1.15rem;
  line-height: 1.8;
  margin-bottom: var(--space-24);
}

.museum-frame {
  border: 1px solid var(--color-border);
  padding: 12px;
  background-color: var(--color-bg-carbon);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.museum-frame img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(100%) contrast(1.1);
  transition: filter 0.8s ease;
  border-radius: calc(var(--radius-card) - 4px);
}

.museum-frame:hover img {
  filter: grayscale(0%) contrast(1);
}

/* Chapter 3: The Design Process (Timeline) */
.timeline-header {
  text-align: center;
  margin-bottom: var(--space-80);
}

.timeline-stages {
  display: flex;
  flex-direction: column;
  gap: var(--space-128);
  position: relative;
}

.timeline-stages::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, var(--color-border), rgba(234,234,234,0.02) 90%);
  transform: translateX(-50%);
}

.stage-card {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-48);
  align-items: center;
}

.stage-info {
  grid-column: 2 / span 4;
}

.stage-visual {
  grid-column: 7 / span 5;
}

.stage-card:nth-child(even) .stage-info {
  grid-column: 8 / span 4;
  grid-row: 1;
}

.stage-card:nth-child(even) .stage-visual {
  grid-column: 2 / span 5;
  grid-row: 1;
}

.stage-number {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--color-copper);
  margin-bottom: var(--space-16);
  display: block;
}

.stage-name {
  font-size: 1.75rem;
  margin-bottom: var(--space-24);
}

/* Chapter 4: Craftsmanship (Macro Material Showcases) */
.craft-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-48);
}

.craft-card {
  background-color: var(--color-bg-carbon);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s;
}

.craft-card:hover {
  transform: translateY(-8px);
  border-color: rgba(200, 125, 85, 0.3);
}

.craft-image {
  height: 380px;
  overflow: hidden;
}

.craft-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.craft-card:hover .craft-image img {
  transform: scale(1.05);
}

.craft-body {
  padding: var(--space-32);
}

.craft-title {
  font-size: 1.25rem;
  margin-bottom: var(--space-16);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.craft-material {
  font-size: 0.75rem;
  color: var(--color-copper);
  border: 1px solid var(--color-copper);
  padding: 2px 8px;
  border-radius: 4px;
}

/* -------------------------------------------------------------
 * VEHICLES VIEW (CURATED EXHIBITION)
 * ------------------------------------------------------------- */

.vehicles-viewport {
  padding: var(--space-160) 0;
}

.exhibition-title-block {
  margin-bottom: var(--space-96);
  max-width: 600px;
}

.vehicles-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-160);
}

.vehicle-panel {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-64);
  align-items: center;
}

.vehicle-panel:nth-child(even) {
  grid-template-columns: 5fr 7fr;
}

.vehicle-panel:nth-child(even) .vehicle-visual {
  grid-column: 2;
  grid-row: 1;
}

.vehicle-panel:nth-child(even) .vehicle-details {
  grid-column: 1;
  grid-row: 1;
}

.vehicle-visual {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: var(--color-bg-carbon);
  border: 1px solid var(--color-border);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.vehicle-visual img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), filter 0.8s;
}

.vehicle-panel:hover .vehicle-visual img {
  transform: scale(1.03);
}

.vehicle-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vehicle-model {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 200;
  margin-bottom: var(--space-16);
  color: var(--color-titanium);
}

.vehicle-tagline {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-style: italic;
  margin-bottom: var(--space-24);
  color: var(--color-copper);
}

.vehicle-summary {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: var(--space-32);
}

.vehicle-specs-brief {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
  margin-bottom: var(--space-48);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-24) 0;
}

.spec-item {
  display: flex;
  flex-direction: column;
}

.spec-val {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  color: var(--color-titanium);
  font-weight: 400;
}

.spec-lbl {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  text-transform: uppercase;
}

/* -------------------------------------------------------------
 * ATLAS JOURNAL (MAGAZINE EDITORIAL)
 * ------------------------------------------------------------- */

.journal-viewport {
  padding: var(--space-160) 0;
}

.journal-featured {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-64);
  margin-bottom: var(--space-96);
  align-items: center;
}

.featured-visual {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border);
  height: 480px;
}

.featured-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-content {
  padding: var(--space-16) 0;
}

.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-48) var(--space-32);
}

.journal-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-carbon);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.journal-card:hover {
  transform: translateY(-6px);
  border-color: rgba(234, 234, 234, 0.15);
}

.journal-card-image {
  height: 240px;
  overflow: hidden;
}

.journal-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.journal-card:hover .journal-card-image img {
  transform: scale(1.04);
}

.journal-card-body {
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.journal-card-title {
  font-size: 1.15rem;
  margin: var(--space-12) 0;
  line-height: 1.4;
  color: var(--color-titanium);
}

.journal-card-desc {
  font-size: 0.9rem;
  margin-bottom: var(--space-24);
  flex: 1;
}

/* -------------------------------------------------------------
 * KEY ANIMATIONS
 * ------------------------------------------------------------- */

@keyframes cinematicDolly {
  to {
    transform: scale(1.00);
  }
}

@keyframes heroReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes particleFloat {
  0% {
    transform: translateY(100vh) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-20vh) translateX(50px);
    opacity: 0;
  }
}
/* -------------------------------------------------------------
 * OWNERSHIP VIEW
 * ------------------------------------------------------------- */

.ownership-viewport {
  padding: var(--space-160) 0;
}

.ownership-intro {
  max-width: 600px;
  margin-bottom: var(--space-96);
}

.ownership-title {
  font-size: 3.5rem;
  margin-top: 16px;
  font-weight: 200;
}

.ownership-desc {
  margin-top: 16px;
}

.ownership-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-48);
  margin-bottom: var(--space-96);
}

.ownership-pillar {
  border-left: 1px solid var(--color-copper);
  padding-left: var(--space-24);
}

.ownership-pillar-title {
  font-size: 1.1rem;
  margin-bottom: var(--space-16);
  color: var(--color-titanium);
}

.ownership-garage-card {
  display: flex;
  gap: var(--space-48);
  align-items: center;
  padding: var(--space-48);
}

.ownership-garage-text {
  flex: 1;
}

.ownership-garage-heading {
  font-size: 2.25rem;
  margin-top: 16px;
  margin-bottom: 24px;
  color: var(--color-titanium);
}

.ownership-garage-desc {
  margin-bottom: 32px;
}

.ownership-garage-visual {
  flex: 1;
}

.ownership-garage-visual img {
  width: 100%;
  border-radius: var(--radius-card);
}

/* -------------------------------------------------------------
 * STUDIOS VIEW
 * ------------------------------------------------------------- */

.studios-viewport {
  padding: var(--space-160) 0;
}

.studios-intro {
  max-width: 600px;
  margin-bottom: var(--space-96);
}

.studios-title {
  font-size: 3.5rem;
  margin-top: 16px;
  font-weight: 200;
}

.studios-desc {
  margin-top: 16px;
}

.studios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-32);
}

.studio-card {
  padding: 16px;
}

.studio-card-img {
  border-radius: var(--radius-card);
  margin-bottom: 24px;
  width: 100%;
  height: auto;
  display: block;
}

.studio-card-name {
  font-size: 1.2rem;
  margin-top: 8px;
  margin-bottom: 12px;
  color: var(--color-titanium);
}

/* -------------------------------------------------------------
 * CAREERS VIEW
 * ------------------------------------------------------------- */

.careers-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.career-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-24) var(--space-40);
}

.career-title {
  color: var(--color-titanium);
  margin-bottom: 8px;
}

.career-apply-btn {
  padding: 10px 20px;
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* =============================================================
 * RESPONSIVE VIEW OVERRIDES
 * ============================================================= */

/* Tablet / Medium */
@media (max-width: 1200px) {
  .intro-container {
    grid-template-columns: 1fr;
    gap: var(--space-48);
  }

  .intro-text-block, .intro-image-block {
    grid-column: 1 / -1;
  }

  .stage-card {
    grid-template-columns: 1fr;
    gap: var(--space-24);
  }

  .stage-info, .stage-visual {
    grid-column: 1 / -1;
  }

  .stage-card:nth-child(even) .stage-info,
  .stage-card:nth-child(even) .stage-visual {
    grid-column: 1 / -1;
  }

  .craft-grid {
    grid-template-columns: 1fr;
  }

  .vehicle-panel, .vehicle-panel:nth-child(even) {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .vehicle-panel:nth-child(even) .vehicle-visual,
  .vehicle-panel:nth-child(even) .vehicle-details {
    grid-column: 1;
  }

  .journal-featured {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .journal-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .timeline-stages::before {
    display: none;
  }

  .vehicles-viewport {
    padding: var(--space-96) 0;
  }

  .vehicles-grid {
    gap: var(--space-96);
  }

  .journal-viewport {
    padding: var(--space-96) 0;
  }

  .ownership-viewport {
    padding: var(--space-96) 0;
  }

  .ownership-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ownership-garage-card {
    flex-direction: column;
  }

  .studios-viewport {
    padding: var(--space-96) 0;
  }

  .studios-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .chapter {
    min-height: auto;
    padding: var(--space-64) 0;
  }

  .chapter-hero {
    height: 100svh;
    min-height: 560px;
  }

  .hero-content {
    margin-bottom: 15%;
    max-width: 100%;
    padding: 0 var(--space-8);
  }

  .hero-subtitle {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
  }

  .hero-title {
    font-size: clamp(1.8rem, 8vw, 3rem);
    line-height: 1.15;
  }

  .hero-desc {
    font-size: 0.95rem;
    max-width: 100%;
  }

  .hero-ctas {
    flex-direction: column;
    gap: var(--space-16);
    align-items: stretch;
  }

  .hero-ctas .btn {
    text-align: center;
    justify-content: center;
  }

  .intro-heading {
    font-size: 1.5rem;
  }

  .intro-paragraph {
    font-size: 1rem;
  }

  .stage-name {
    font-size: 1.35rem;
  }

  .timeline-stages {
    gap: var(--space-64);
  }

  .timeline-stages::before {
    display: none;
  }

  .craft-image {
    height: 240px;
  }

  .craft-body {
    padding: var(--space-24);
  }

  .craft-title {
    font-size: 1.1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
  }

  .vehicles-viewport {
    padding: var(--space-80) 0;
  }

  .exhibition-title-block {
    margin-bottom: var(--space-48);
  }

  .vehicles-grid {
    gap: var(--space-80);
  }

  .vehicle-model {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }

  .vehicle-tagline {
    font-size: 1.1rem;
  }

  .vehicle-summary {
    font-size: 0.95rem;
  }

  .vehicle-specs-brief {
    gap: var(--space-16);
  }

  .spec-val {
    font-size: 1rem;
  }

  .journal-grid {
    grid-template-columns: 1fr;
  }

  .journal-viewport {
    padding: var(--space-80) 0;
  }

  .featured-visual {
    height: 280px;
  }

  .journal-card-image {
    height: 200px;
  }

  .museum-frame {
    padding: 8px;
  }

  .ownership-viewport {
    padding: var(--space-80) 0;
  }

  .ownership-title {
    font-size: 2.5rem;
  }

  .ownership-intro {
    margin-bottom: var(--space-48);
  }

  .ownership-pillars-grid {
    grid-template-columns: 1fr;
    gap: var(--space-32);
    margin-bottom: var(--space-48);
  }

  .ownership-garage-card {
    flex-direction: column;
    padding: var(--space-24);
    gap: var(--space-24);
  }

  .ownership-garage-heading {
    font-size: 1.75rem;
  }

  .studios-viewport {
    padding: var(--space-80) 0;
  }

  .studios-title {
    font-size: 2.5rem;
  }

  .studios-intro {
    margin-bottom: var(--space-48);
  }

  .studios-grid {
    grid-template-columns: 1fr;
    gap: var(--space-24);
  }

  .studio-card-img {
    margin-bottom: 16px;
  }

  .career-card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
    padding: var(--space-24);
  }

  .career-apply-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .booking-form-row {
    grid-template-columns: 1fr;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .chapter-hero {
    min-height: 500px;
  }

  .hero-title {
    font-size: 1.6rem;
  }

  .hero-desc {
    font-size: 0.85rem;
  }

  .hero-subtitle {
    font-size: 0.65rem;
  }

  .vehicle-specs-brief {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .spec-item {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .craft-image {
    height: 180px;
  }

  .featured-visual {
    height: 200px;
  }

  .journal-card-image {
    height: 160px;
  }
}