/* ── Phatt Music Co. — About Us page ────────────────────────────────────── */

/* ── Shared keyframes ────────────────────────────────────────────────────── */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-150px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(150px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero ────────────────────────────────────────────────────────────────────
   Two-column grid: large heading left, product image right.
   Image column hides below the 1200px breakpoint.                            */
.about-hero {
  display:               grid;
  grid-template-columns: 55% 45%;
  align-items:           flex-start;
  gap:                   0;
  margin-bottom:         80px;
  position:              relative;
}

.about-hero-text {
  padding-right: 32px;
}

.about-title {
  font-size:      clamp(56px, 7vw, 96px);
  font-weight:    700;
  color:          #fff;
  line-height:    0.95;
  letter-spacing: -0.03em;
  margin:         0 0 40px;

  opacity:   0;
  transform: translateX(-150px);
  animation: slideInLeft 0.4s cubic-bezier(0.2, 0, 0, 1.1) 0.05s forwards;
}

.about-intro {
  font-size:   clamp(15px, 1.5vw, 20px);
  font-weight: 400;
  color:       rgba(255, 255, 255, 0.75);
  line-height: 1.65;
  max-width:   440px;

  opacity:   0;
  transform: translateX(-150px);
  animation: slideInLeft 0.4s cubic-bezier(0.2, 0, 0, 1.1) 0.12s forwards;
}

.about-hero-image-wrap {
  opacity:   0;
  transform: translateX(150px);
  animation: slideInRight 0.4s cubic-bezier(0.2, 0, 0, 1.1) 0.08s forwards;
}

.about-hero-img {
  width:         100%;
  border-radius: 12px;
  display:       block;
}

/* Hide image on tablet/mobile — it has no safe position below 1200px */
@media (max-width: 1199.98px) {
  .about-hero {
    grid-template-columns: 1fr;
  }
  .about-hero-image-wrap { display: none; }
  .about-hero-text { padding-right: 0; }
}

/* ── "The Hinged Advantage" section ─────────────────────────────────────── */
.about-section {
  margin-bottom:   80px;
  opacity:         0;
  transform:       translateY(32px);
  animation:       fadeUp 0.4s cubic-bezier(0.2, 0, 0, 1.1) 0.2s forwards;
}

.about-section-title {
  font-size:      clamp(28px, 3vw, 42px);
  font-weight:    700;
  color:          #fff;
  letter-spacing: -0.01em;
  margin:         0 0 32px;
}

.about-features {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:                   32px;
}

.about-feature-item {}

.about-feature-title {
  font-size:   clamp(15px, 1.5vw, 18px);
  font-weight: 700;
  color:       #fff;
  margin:      0 0 8px;
}

.about-feature-body {
  font-size:   clamp(14px, 1.4vw, 17px);
  font-weight: 400;
  color:       rgba(255, 255, 255, 0.65);
  line-height: 1.6;
  margin:      0;
}

/* ── "Made in Melbourne" section ─────────────────────────────────────────── */
.about-origin {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   64px;
  align-items:           center;
  margin-bottom:         80px;
  opacity:               0;
  transform:             translateY(32px);
  animation:             fadeUp 0.4s cubic-bezier(0.2, 0, 0, 1.1) 0.28s forwards;
}

.about-origin-title {
  font-size:      clamp(28px, 3vw, 42px);
  font-weight:    700;
  color:          #fff;
  letter-spacing: -0.01em;
  margin:         0 0 24px;
}

.about-origin-sub {
  font-size:   clamp(15px, 1.5vw, 18px);
  font-weight: 700;
  color:       #fff;
  margin:      0 0 16px;
}

.about-origin-body {
  font-size:   clamp(14px, 1.4vw, 17px);
  font-weight: 400;
  color:       rgba(255, 255, 255, 0.65);
  line-height: 1.65;
  margin:      0 0 16px;
}
.about-origin-body:last-child { margin-bottom: 0; }

.about-origin-img {
  width:         100%;
  border-radius: 12px;
  display:       block;
  aspect-ratio:  4 / 5;
  object-fit:    cover;
}

@media (max-width: 900px) {
  .about-origin {
    grid-template-columns: 1fr;
  }
  .about-origin-image-wrap { order: -1; }
  .about-origin-img { aspect-ratio: 16 / 9; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .about-title,
  .about-intro,
  .about-hero-image-wrap,
  .about-section,
  .about-origin {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}