/* =====================================================
   HOME ANIMATION — CORRECTED PHASE MODEL
   Tune ONLY the variables in the first block
   ===================================================== */
.skip-intro{
  position: fixed;
  right: 1.5rem;
  bottom: 1.25rem;
  z-index: 3000;

  font-family: var(--font-brand);
  font-size: 0.75rem;
  letter-spacing: 0.04em;

  text-decoration: none;
  color: rgba(255,255,255,0.45);
  opacity: 0.6;
}
.skip-intro:hover,
.skip-intro:focus-visible{
  opacity: 1;
}

:root{
  /* ===== EDIT THESE ===== */
  --p1: 2.0s;          /* “elevating analytics, evidenced” */
  --mergeDur: 3.0s;    /* el / an / ev merge (KEEP at 3s) */
  --gapAfterMerge: 0.7s;
  --p2: 4.0s;          /* straplines total */
  --p3: 3.0s;          /* logo transition + settle */

  /* ===== DERIVED (DO NOT EDIT) ===== */
  --t-phrase: 0s;

  /* merge starts slightly before phrase ends (original behaviour) */
  --t-merge: calc(var(--t-phrase) + var(--p1) - 0.225s);
  --t-merge-end: calc(var(--t-merge) + var(--mergeDur));

  /* straplines start AFTER merge completes */
  --t-sub1: calc(var(--t-merge-end) + var(--gapAfterMerge));
  --t-sub2: calc(var(--t-sub1) + calc(var(--p2) / 2));

  /* text exit */
  --t-text-out: calc(var(--t-sub1) + var(--p2));

  /* logo + menu */
  --t-logo-fade: var(--t-text-out);
  --t-logo-move: calc(var(--t-logo-fade) + 1.2s);
  --t-menu-in: calc(var(--t-logo-move) + var(--p3));
}

/* =====================================================
   FONT LOCK
   ===================================================== */

.home .logo{
  font-family: var(--font-brand);
}

/* =====================================================
   MENU
   ===================================================== */

.home .top-menu{
  opacity: 0;
  animation: fadeIn 0.6s ease-in var(--t-menu-in) forwards;
}

/* =====================================================
   LOGO IMAGE
   ===================================================== */

.home .site-logo{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: moveSiteLogo 1.8s ease-out var(--t-logo-move) forwards;
}

.home .site-logo img{
  opacity: 0;
  width: var(--logo-width);
  display: block;
  animation: fadeIn 2s ease-in var(--t-logo-fade) forwards;
}

@keyframes moveSiteLogo{
  to{
    top: var(--my);
    left: var(--mx);
    transform: none;
  }
}

/* =====================================================
   TEXT STAGE POSITION
   ===================================================== */

.logo{
  position: absolute;
  top: calc(50% + 26.5px);
  left: calc(50% + 1.5px);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  text-transform: lowercase;
}

/* =====================================================
   MAIN WORD MARK
   ===================================================== */

.logo-main{
  position: relative;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  letter-spacing: 0.05em;

  /* lock width to prevent horizontal jump */
  text-align: left;       /* adjust 26–32ch if needed */
}

.phrase{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
 justify-content: center; /* stop re-centering */
  opacity: 0;
}

/* =====================================================
   PHRASE 1
   ===================================================== */

.phrase2-primary{
  animation: fadeHold var(--p1)
             ease-in-out var(--t-phrase) forwards;
}

.keep{ display: inline-block; }

.drop{
  display: inline-block;
  animation: fadeExtra 1s ease-out
             calc(var(--t-phrase) + var(--p1) - 0.8s) forwards;
}

/* =====================================================
   MERGE (el / an / ev)
   ===================================================== */

.phrase3{
  animation:
    fadeIn 0.3s ease-out var(--t-merge) forwards,
    fadeOut 0.6s ease-out var(--t-text-out) forwards;
}

.word{ display: inline-block; }

.word-el{ transform: translateX(-11.67ch); }
.word-an{ transform: translateX(-3.8ch); }
.word-ev{ transform: translateX(3.8ch); }

.word-el,
.word-an,
.word-ev{
  animation: mergeToCenter var(--mergeDur)
             ease-in-out var(--t-merge) forwards;
}

@keyframes mergeToCenter{
  to{ transform: translateX(0); }
}

/* =====================================================
   STRAPLINES (AFTER MERGE)
   ===================================================== */

.logo-sub{
  position: relative;
  margin-top: 2.4rem;
  min-height: 1.4em;
  font-size: clamp(0.9rem, 1.8vw, 1.2rem);
  letter-spacing: 0.05em;
  animation: fadeOut 0.6s ease-out var(--t-text-out) forwards;
}

.sub{
  position: absolute;
  opacity: 0;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.sub4{
  animation: fadeHold calc(var(--p2) / 2)
             ease-in-out var(--t-sub1) forwards;
}

.sub5{
  animation: fadeHold calc(var(--p2) / 2)
             ease-in-out var(--t-sub2) forwards;
}

/* =====================================================
   KEYFRAMES
   ===================================================== */

@keyframes fadeHold{
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

@keyframes fadeOut{
  to{ opacity: 0; }
}

@keyframes fadeExtra{
  to{ opacity: 0; }
}
/*Derived timeline

1️ Phrase (“elevating…”)

Starts: 0.0s

Ends: 2.0s

2 Merge (el / an / ev)

Starts: 2.0 − 0.225 = 1.775s

Ends: 1.775 + 3.0 = 4.775s

3️Straplines

Start: 4.775 + 0.7 = 5.475s

End: 5.475 + 4.0 = 9.475s

4️ Text fade-out

Ends at: 9.475s

5️Logo fade-in

Starts: 9.475s

Duration: 2.0s

Ends: 11.475s

6 Logo move

Starts: 9.475 + 1.2 = 10.675s

Duration: 1.8s

Ends: 12.475s

7️Menu fade-in (last animation)

Starts: 12.475 + 3.0 = 15.475s

Duration: 0.6s

Ends: ≈ 16.1 seconds*/