/* =======================================================================
   STUDIO ALTO DA GLÓRIA — LOGO MOTION SYSTEM
   Shared between:
   - Motion Lab (body.motion-lab)
   - Homepage intro overlay (only the #logo-sag + phase classes)
======================================================================= */

/* -----------------------------------------------------------------------
   1. MOTION LAB LAYOUT (ONLY WHEN body.motion-lab)
----------------------------------------------------------------------- */

.motion-lab {
  margin: 0;
  min-height: 100vh;
  background: #000000;
  color: #ffffff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.motion-lab .lab-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 960px;
  padding: 2rem;
}

.motion-lab .logo-sag {
  width: min(420px, 80vw);
  display: block;
}

/* -----------------------------------------------------------------------
   2. HOMEPAGE INTRO OVERLAY
----------------------------------------------------------------------- */

.intro-logo-overlay {
  position: fixed;
  inset: 0;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.5s ease-out;
}

.intro-logo-wrapper {
  max-width: 520px;
  width: min(520px, 80vw);
}

.logo-sag {
  width: 100%;
  display: block;
}

/* Fade overlay out when intro completes */
body.logo-intro-complete .intro-logo-overlay {
  opacity: 0;
  pointer-events: none;
}

/* -----------------------------------------------------------------------
   3. BASE STATE — "NOTHING ON SCREEN"
   All blocks are invisible + offset
----------------------------------------------------------------------- */

#logo-sag path {
  opacity: 0;
  transition:
    opacity 0.4s ease-out,
    transform 0.4s ease-out,
    fill 0.22s ease-out;
}

/* HORIZONTALS — initial offsets */

/* Left "S" stack — fade in top → middle → bottom */

/* Top bar */
#h1 {
  transform: translateX(-220px);
  opacity: 0;
  transition:
    opacity 0.7s ease-out,
    transform 0.55s ease-out;
}

/* Middle bar */
#h2 {
  transform: translateX(-220px);
  opacity: 0;
  transition:
    opacity 0.7s ease-out,
    transform 0.55s ease-out;
}

/* Bottom bar */
#h3 {
  transform: translateX(-220px);
  opacity: 0;
  transition:
    opacity 0.7s ease-out,
    transform 0.55s ease-out;
}

/* "A" — top bar (h5) and crossbar (h4)
   Start off-screen vertically so they assemble from top and bottom. */

/* Top bar */
#h5 {
  opacity: 0;
  transform: translateY(-80px);
  transition:
    opacity 0.7s ease-out,
    transform 0.55s ease-out;
}

/* Crossbar */
#h4 {
  opacity: 0;
  transform: translateY(80px);
  transition:
    opacity 0.7s ease-out,
    transform 0.55s ease-out;
}

/* "G" — counter-motion:
   h6 from the right, h7 from the left */

/* Top G bar (h6) — off to the right */
#h6 {
  opacity: 0;
  transform: translateX(220px);
  transition:
    opacity 0.7s ease-out,
    transform 0.55s ease-out;
}

/* Bottom G bar (h7) — off to the left */
#h7 {
  opacity: 0;
  transform: translateX(-220px);
  transition:
    opacity 0.7s ease-out,
    transform 0.55s ease-out;
}

/* VERTICALS — start above, so they "drop" in */
#v1,
#v2,
#v3,
#v4,
#v5,
#v6,
#v7 {
  transform: translateY(-140px);
}

/* -----------------------------------------------------------------------
   4. PHASE 1 — BUILD HORIZONTALS (body.logo-phase-1)
----------------------------------------------------------------------- */

/* Horizontals fade + slide into their final grid positions */
.logo-phase-1 #h1,
.logo-phase-1 #h2,
.logo-phase-1 #h3,
.logo-phase-1 #h4,
.logo-phase-1 #h5,
.logo-phase-1 #h6,
.logo-phase-1 #h7 {
  opacity: 1;
  transform: translate(0, 0);
}

/* Verticals remain invisible in phase 1 */
.logo-phase-1 #v1,
.logo-phase-1 #v2,
.logo-phase-1 #v3,
.logo-phase-1 #v4,
.logo-phase-1 #v5,
.logo-phase-1 #v6,
.logo-phase-1 #v7 {
  opacity: 0;
}

/* Stagger the "S": h1 → h2 → h3 */
.logo-phase-1 #h1 {
  transition-delay: 0s;
}
.logo-phase-1 #h2 {
  transition-delay: 0.18s;
}
.logo-phase-1 #h3 {
  transition-delay: 0.36s;
}

/* Build the "A": top bar (h5) then crossbar (h4) */
.logo-phase-1 #h5 {
  transition-delay: 0.48s;
}
.logo-phase-1 #h4 {
  transition-delay: 0.66s;
}

/* Build the "G": h6 from the right, h7 from the left */
.logo-phase-1 #h6 {
  transition-delay: 0.84s;
}
.logo-phase-1 #h7 {
  transition-delay: 1.02s;
}

/* -----------------------------------------------------------------------
   5. PHASE 2 — BUILD VERTICALS (body.logo-phase-2)
----------------------------------------------------------------------- */

/* Verticals drop into place + fade in */
.logo-phase-2 #v1,
.logo-phase-2 #v2,
.logo-phase-2 #v3,
.logo-phase-2 #v4,
.logo-phase-2 #v5,
.logo-phase-2 #v6,
.logo-phase-2 #v7 {
  opacity: 1;
  transform: translate(0, 0);
}

/* Horizontals stay put and fully visible */
.logo-phase-2 #h1,
.logo-phase-2 #h2,
.logo-phase-2 #h3,
.logo-phase-2 #h4,
.logo-phase-2 #h5,
.logo-phase-2 #h6,
.logo-phase-2 #h7 {
  opacity: 1;
  transform: translate(0, 0);
}

/* -----------------------------------------------------------------------
   6. PHASE 2b — IDENTITY COLOR SURGE (body.logo-phase-2b)
----------------------------------------------------------------------- */

.logo-phase-2b #v1 { fill: var(--accent-cyan,   #32bced); }
.logo-phase-2b #v2 { fill: var(--accent-magenta,#e12661); }
.logo-phase-2b #v3 { fill: var(--accent-green,  #82c341); }
.logo-phase-2b #v4 { fill: var(--accent-orange, #f48921); }
.logo-phase-2b #v5 { fill: var(--accent-cyan,   #32bced); }
.logo-phase-2b #v6 { fill: var(--accent-magenta,#e12661); }
.logo-phase-2b #v7 { fill: var(--accent-orange, #f48921); }

/* -----------------------------------------------------------------------
   7. PHASE 3 — DECONSTRUCT TO REDUCED LOGO (body.logo-phase-3)
----------------------------------------------------------------------- */

/* Verticals retract back up and fade out */
.logo-phase-3 #v1,
.logo-phase-3 #v2,
.logo-phase-3 #v3,
.logo-phase-3 #v4,
.logo-phase-3 #v5,
.logo-phase-3 #v6,
.logo-phase-3 #v7 {
  opacity: 0;
  transform: translateY(-140px);
}

/* Reset verticals to white so colors don’t persist in future states */
.logo-phase-3 #verticals path {
  fill: #ffffff;
}

/* Horizontals remain as the final reduced SAG mark */
.logo-phase-3 #h1,
.logo-phase-3 #h2,
.logo-phase-3 #h3,
.logo-phase-3 #h4,
.logo-phase-3 #h5,
.logo-phase-3 #h6,
.logo-phase-3 #h7 {
  opacity: 1;
  transform: translate(0, 0);
}

/* ============================================================
   COLOR WAVE — RESTORE STAGGERED COLOR TRANSITIONS
   (Overrides default color-phase behavior)
=============================================================== */

.logo-phase-2b #v1 { transition-delay: 0s; }
.logo-phase-2b #v2 { transition-delay: 0.06s; }
.logo-phase-2b #v3 { transition-delay: 0.12s; }
.logo-phase-2b #v4 { transition-delay: 0.18s; }
.logo-phase-2b #v5 { transition-delay: 0.24s; }
.logo-phase-2b #v6 { transition-delay: 0.30s; }
.logo-phase-2b #v7 { transition-delay: 0.36s; }