/* ==========================================================================
   Layouts — lay-ui
   Default (1440x900) and Expanded (1440x~1780)
   Snappy transitions + spectrum two-phase animation
   ========================================================================== */

/* ---- Viewport ---- */
.layout {
  width: 1440px;
  min-width: 1440px;
  position: relative;
  overflow: hidden;
  background: var(--surface-bg);
  border: 4px solid var(--grey-80);
  border-bottom: none;
  height: 900px;
  transition: height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.layout--expanded {
  height: 1828px;
  overflow: visible;
}

/* ---- Pattern background ---- */
.layout__pattern {
  position: absolute;
  top: -500px;
  left: 50%;
  transform: translateX(calc(-50% + 90px)) rotate(15deg);
  width: 2400px;
  height: 2200px;
  background: url('../assets/pattern-star.svg') repeat;
  background-size: 80px 120px;
  pointer-events: none;
  z-index: 1;
}

/* ---- Content layer ---- */
.layout__content {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100%;
}


/* ============================================================
   Shared positioning
   ============================================================ */

.layout__section--hero,
.layout__section--projects,
.layout__section--about-short,
.layout__section--about-long,
.layout__section--spectrum,
.layout__section--contact {
  position: absolute;
  left: 50%;
  will-change: top, opacity, transform;
}

/* Hero: FIXED — never moves */
.layout__section--hero {
  top: 224px;
  transform: translateX(calc(-50% + 16px));
  z-index: 10;
}

/* Projects: transition */
.layout__section--projects {
  transition:
    top 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Expanding sections: snappy transitions */
.layout__section--about-short,
.layout__section--about-long,
.layout__section--contact {
  transition:
    top 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.25s ease,
    transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Spectrum: split timing — position fast, transform (rotate+shift) delayed */
.layout__section--spectrum {
  transition:
    top 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.25s ease,
    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* ============================================================
   Layout Default — collapsed state
   ============================================================ */

/* Projects: tucked under hero, ~4px peeking */
.layout--default .layout__section--projects {
  top: 460px;
  transform: translateX(calc(-50% + 16px));
  z-index: 5;
}

/* All expanding sections: behind hero, invisible */
.layout--default .layout__section--about-short {
  top: 224px;
  transform: translateX(calc(-50% + 16px)) scale(0.9);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.layout--default .layout__section--about-long {
  top: 224px;
  transform: translateX(calc(-50% + 12px)) scale(0.9);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

/* Spectrum starts STRAIGHT and CENTERED (like about-long), behind hero */
.layout--default .layout__section--spectrum {
  top: 224px;
  transform: translateX(calc(-50% + 12px)) scale(0.9);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}

.layout--default .layout__section--contact {
  top: 224px;
  transform: translateX(calc(-50% + 16px)) scale(0.9);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}

/* Collapse: no stagger — everything snaps back together */
.layout--default .layout__section--about-short,
.layout--default .layout__section--about-long,
.layout--default .layout__section--spectrum,
.layout--default .layout__section--contact {
  transition-delay: 0s;
}


/* ============================================================
   Layout Expanded — final positions
   ============================================================ */

.layout--expanded .layout__content {
  height: 1828px;
}

/* About Short: peeks above hero */
.layout--expanded .layout__section--about-short {
  top: 64px;
  transform: translateX(calc(-50% + 16px)) scale(1);
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
  transition-delay: 0.02s;
}

/* Projects: stays behind hero */
.layout--expanded .layout__section--projects {
  top: 460px;
  transform: translateX(calc(-50% + 16px));
  z-index: 5;
}

/* About Long: tucked behind hero */
.layout--expanded .layout__section--about-long {
  top: 431px;
  transform: translateX(calc(-50% + 12px)) scale(1);
  opacity: 1;
  pointer-events: auto;
  z-index: 3;
  transition-delay: 0.04s;
}

.layout--expanded .layout__section--about-long .about-card {
  padding-top: 104px;
}

/* Spectrum: below about-long (431+656+48=1135),
   then rotates + shifts right as a second phase */
.layout--expanded .layout__section--spectrum {
  top: 1135px;
  transform: translateX(calc(-50% + 267px)) scale(1) rotate(-2deg);
  opacity: 1;
  pointer-events: auto;
  z-index: 4;
  /* Position arrives fast, but transform (rotate+shift) starts later */
  transition:
    top 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.04s,
    opacity 0.25s ease 0.04s,
    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.22s;
}

/* Contact: below spectrum (1135+320+40 = 1495) */
.layout--expanded .layout__section--contact {
  top: 1495px;
  transform: translateX(calc(-50% + 16px)) scale(1);
  opacity: 1;
  pointer-events: auto;
  z-index: 4;
  transition-delay: 0.06s;
}


/* ============================================================
   Contact Card Morph — orchestrated open/close
   ============================================================ */

.contact-card__intro {
  transition: opacity 0.25s ease;
}

.contact-card__form-reveal {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---- Form-open: orchestrated sequence ---- */

/* 1. Intro dims */
.contact-card--form-open .contact-card__intro {
  opacity: 0.5;
}

/* 2. Action line extends from left */
.contact-card--form-open .contact-card__action-line {
  transform: scaleX(1);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
}

/* 3. Form reveal grows */
.contact-card--form-open .contact-card__form-reveal {
  max-height: 800px;
}

/* 4. Each field's line extends then content fades in — staggered */
.contact-card--form-open .contact-form__field .contact-form__line {
  transform: scaleX(1);
}

.contact-card--form-open .contact-form__field .contact-form__input-area {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger delays per field (line first, then content) */
.contact-card--form-open .contact-form__field[data-field-index="0"] .contact-form__line { transition-delay: 0.15s; }
.contact-card--form-open .contact-form__field[data-field-index="0"] .contact-form__input-area { transition-delay: 0.22s; }

.contact-card--form-open .contact-form__field[data-field-index="1"] .contact-form__line { transition-delay: 0.22s; }
.contact-card--form-open .contact-form__field[data-field-index="1"] .contact-form__input-area { transition-delay: 0.29s; }

.contact-card--form-open .contact-form__field[data-field-index="2"] .contact-form__line { transition-delay: 0.29s; }
.contact-card--form-open .contact-form__field[data-field-index="2"] .contact-form__input-area { transition-delay: 0.36s; }

.contact-card--form-open .contact-form__field[data-field-index="3"] .contact-form__line { transition-delay: 0.36s; }
.contact-card--form-open .contact-form__field[data-field-index="3"] .contact-form__input-area { transition-delay: 0.43s; }

.contact-card--form-open .contact-form__field[data-field-index="4"] .contact-form__line { transition-delay: 0.43s; }
.contact-card--form-open .contact-form__field[data-field-index="4"] .contact-form__input-area { transition-delay: 0.50s; }

/* 5. Footer line goes dashed */
.contact-card--form-open .contact-card__footer-line {
  border-top-style: dashed;
}

/* ---- Form-closing: reverse sequence ---- */
/* Fields fade out quickly (no stagger on close — snaps back) */
.contact-form__field .contact-form__line {
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.contact-form__field .contact-form__input-area {
  transition:
    opacity 0.15s ease,
    transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Action line retracts after fields disappear */
.contact-card__action-line {
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
}


/* ============================================================
   Tablet — 768px to 1023px
   ============================================================ */

@media (min-width: 768px) and (max-width: 1023px) {

  /* Full-bleed at tablet width */
  .layout {
    width: 100%;
    min-width: unset;
    border-left: none;
    border-right: none;
  }

  /* Spectrum expanded: reduce rightward shift to stay on-screen */
  .layout--expanded .layout__section--spectrum {
    transform: translateX(calc(-50% + 100px)) scale(1) rotate(-2deg);
    transition:
      top 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.04s,
      opacity 0.25s ease 0.04s,
      transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.22s;
  }
}


/* ============================================================
   Mobile — max-width: 767px
   ============================================================ */

@media (max-width: 767px) {

  /* ---- Layout container ---- */
  .layout {
    width: 100%;
    min-width: unset;
    height: 100svh;
    border: none;
  }

  .layout--expanded {
    height: 1748px;
  }

  .layout--expanded .layout__content {
    height: 1748px;
  }

  /* ---- Pattern: scale down for mobile canvas ---- */
  .layout__pattern {
    width: 800px;
    height: 1800px;
    top: -200px;
    transform: translateX(calc(-50% + 20px)) rotate(15deg);
  }

  /* ---- Section widths ---- */
  /* Hero and spectrum stay full bleed */
  .layout__section--hero,
  .layout__section--spectrum {
    width: calc(100% - 32px);
  }

  /* Expanding sheets: slightly narrower than hero (mirrors desktop proportions) */
  .layout__section--about-short,
  .layout__section--about-long,
  .layout__section--contact {
    width: calc(100% - 72px);
  }

  /* ---- Hero: repositioned for mobile (fixed, never moves) ---- */
  .layout__section--hero {
    top: 160px;
    transform: translateX(-50%);
  }

  /* ---- Default (collapsed) ---- */
  .layout--default .layout__section--projects {
    top: 396px;
    transform: translateX(-50%);
  }

  .layout--default .layout__section--about-short,
  .layout--default .layout__section--about-long,
  .layout--default .layout__section--spectrum,
  .layout--default .layout__section--contact {
    top: 160px;
    transform: translateX(-50%) scale(0.9);
  }

  /* ---- Expanded ---- */
  .layout--expanded .layout__section--about-short {
    top: 16px;
    transform: translateX(-50%) scale(1);
    transition-delay: 0.02s;
  }

  .layout--expanded .layout__section--projects {
    top: 396px;
    transform: translateX(-50%);
  }

  .layout--expanded .layout__section--about-long {
    top: 367px;
    transform: translateX(-50%) scale(1);
    transition-delay: 0.04s;
  }

  /* Spectrum: two-phase — position fast, rotate+shift delayed */
  .layout--expanded .layout__section--spectrum {
    top: 1080px;
    transform: translateX(calc(-50% + 48px)) scale(1) rotate(-2deg);
    opacity: 1;
    pointer-events: auto;
    z-index: 4;
    transition:
      top 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.04s,
      opacity 0.25s ease 0.04s,
      transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.22s;
  }

  .layout--expanded .layout__section--contact {
    top: 1428px;
    transform: translateX(-50%) scale(1);
    transition-delay: 0.06s;
  }
}


/* ============================================================
   Reduced Motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .layout {
    transition: none;
  }

  .layout__section--hero,
  .layout__section--projects,
  .layout__section--about-short,
  .layout__section--about-long,
  .layout__section--spectrum,
  .layout__section--contact {
    transition: none;
  }

  .contact-card__intro,
  .contact-card__form-reveal,
  .contact-card__action-line,
  .contact-form__field .contact-form__line,
  .contact-form__field .contact-form__input-area {
    transition: none;
  }
}


/* ============================================================
   Spectrum: straighten + center on scroll
   Placed last so it wins the cascade on all viewports.
   Class added by IntersectionObserver in about.js.
   ============================================================ */

.layout__section--spectrum.spectrum--aligned {
  transform: translateX(-50%);
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (prefers-reduced-motion: reduce) {
  .layout__section--spectrum.spectrum--aligned {
    transition: none;
  }
}