/* =========================================================
   ABOUT — page-specific styles
   ========================================================= */

/* Scroll & snap behavior */
html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
}

body {
  --brand-color: #e3e3e3;
  --brand-size: 120px;
  --nav-color: #e3e3e3;

  background-color: #726e75;
  overscroll-behavior-y: none;
}

/* =========================================================
   Layout
   ========================================================= */

.about-panel {
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

.about-header {
  margin-bottom: 28px;
}

.about-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.about-block-title {
  margin: 0;
  font-size: clamp(26px, 6vw, 40px);
  letter-spacing: 0.01em;
  line-height: 1.2;
  max-width: 22ch;
}

.about-block-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  max-width: 70ch;
}

/* =========================================================
   Desktop layout (alternating columns)
   ========================================================= */

@media (min-width: 768px) {
  .about-block {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 28px;
  }

  .about-block-title {
    grid-column: 1;
    grid-row: 1;
  }

  .about-block-text {
    grid-column: 2;
    grid-row: 1;
  }

  .about-block--reverse .about-block-title {
    grid-column: 2;
  }

  .about-block--reverse .about-block-text {
    grid-column: 1;
  }

  .about-s3 .cta--about {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }
}

/* =========================================================
   Scroll snap rules
   ========================================================= */

.about-snap .snap-section {
  min-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding-top: var(--header-h);
}

.about-snap .snap-section--auto {
  min-height: auto;
  padding-top: 0;
}

/* =========================================================
   Section backgrounds & text colors
   ========================================================= */

.about-s1 {
  background: #726e75;
}

.about-s2 {
  background: #e3e3e3;
}

.about-s3 {
  background: #121113;
}

.about-s1 .about-block-title,
.about-s1 .about-block-text,
.about-s1 .kicker {
  color: #e3e3e3;
}

.about-s2 .about-block-title,
.about-s2 .about-block-text,
.about-s2 .kicker {
  color: #121113;
}

.about-s3 .about-block-title,
.about-s3 .about-block-text,
.about-s3 .kicker {
  color: #e3e3e3;
}

/* =========================================================
   Microinteractions — About (play once per section)
   ========================================================= */

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

/* Default state */
.about-snap .about-s1 .kicker,
.about-snap .about-s1 .about-block-title,
.about-snap .about-s1 .about-block-text,
.about-snap .about-s2 .about-block-title,
.about-snap .about-s2 .about-block-text,
.about-snap .about-s3 .kicker,
.about-snap .about-s3 .about-block-title,
.about-snap .about-s3 .about-block-text {
  opacity: 1;
  transform: none;
}

/* Section 1 */
body.about-s1-active .about-s1 .kicker,
body.about-s1-active .about-s1 .about-block-title,
body.about-s1-active .about-s1 .about-block-text {
  opacity: 0;
  transform: translateY(8px);
  animation: aboutEnter 1200ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

body.about-s1-active .about-s1 .kicker {
  animation-delay: 120ms;
}
body.about-s1-active .about-s1 .about-block-title {
  animation-delay: 320ms;
}
body.about-s1-active .about-s1 .about-block-text {
  animation-delay: 520ms;
}

/* Section 2 */
body.about-s2-active .about-s2 .about-block-title,
body.about-s2-active .about-s2 .about-block-text {
  opacity: 0;
  transform: translateY(8px);
  animation: aboutEnter 1200ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

body.about-s2-active .about-s2 .about-block-title {
  animation-delay: 140ms;
}
body.about-s2-active .about-s2 .about-block-text {
  animation-delay: 340ms;
}

/* Section 3 */
body.about-s3-active .about-s3 .kicker,
body.about-s3-active .about-s3 .about-block-title,
body.about-s3-active .about-s3 .about-block-text,
body.about-s3-active .about-s3 .cta--about {
  opacity: 0;
  transform: translateY(8px);
  animation: aboutEnter 1200ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

body.about-s3-active .about-s3 .kicker {
  animation-delay: 120ms;
}
body.about-s3-active .about-s3 .about-block-title {
  animation-delay: 320ms;
}
body.about-s3-active .about-s3 .about-block-text {
  animation-delay: 520ms;
}
body.about-s3-active .about-s3 .cta--about {
  animation-delay: 720ms;
}

/* Prevent flash before IO triggers (mobile) */
@media (max-width: 767px) {
  body:not(.about-s1-active) .about-s1 .kicker,
  body:not(.about-s1-active) .about-s1 .about-block-title,
  body:not(.about-s1-active) .about-s1 .about-block-text,
  body:not(.about-s2-active) .about-s2 .about-block-title,
  body:not(.about-s2-active) .about-s2 .about-block-text,
  body:not(.about-s3-active) .about-s3 .kicker,
  body:not(.about-s3-active) .about-s3 .about-block-title,
  body:not(.about-s3-active) .about-s3 .cta--about {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.about-s1-active .about-s1 .kicker,
  body.about-s1-active .about-s1 .about-block-title,
  body.about-s1-active .about-s1 .about-block-text,
  body.about-s2-active .about-s2 .about-block-title,
  body.about-s2-active .about-s2 .about-block-text,
  body.about-s3-active .about-s3 .kicker,
  body.about-s3-active .about-s3 .about-block-title,
  body.about-s3-active .about-s3 .about-block-text,
  body.about-s3-active .about-s3 .cta--about {
    animation: none;
    opacity: 1;
    transform: none;
  }

  @media (max-width: 767px) {
    body:not(.about-s1-active) .about-s1 .kicker,
    body:not(.about-s1-active) .about-s1 .about-block-title,
    body:not(.about-s1-active) .about-s1 .about-block-text,
    body:not(.about-s2-active) .about-s2 .about-block-title,
    body:not(.about-s2-active) .about-s2 .about-block-text,
    body:not(.about-s3-active) .about-s3 .kicker,
    body:not(.about-s3-active) .about-s3 .about-block-title,
    body:not(.about-s3-active) .about-s3 .about-block-text,
    body:not(.about-s3-active) .about-s3 .cta--about {
      opacity: 1;
      transform: none;
    }
  }
}

/* =========================================================
   Section 3 CTA
   ========================================================= */

.cta--about {
  margin-top: 22px;
  background: #c6a15b;
  color: #121113;
  letter-spacing: 0.08em;
}

@media (hover: hover) and (pointer: fine) {
  .cta--about:hover {
    background: #e2360e;
    color: #e3e3e3;
    border-color: #e2360e;
  }
}

.cta--about:active,
.cta--about:focus-visible {
  background: #e3e3e3;
  color: #e2360e;
  border-color: #e2360e;
}