/* =====================================================
   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: 2.0s;    /* el / an / ev merge (KEEP at 3s) */
  --gapAfterMerge: 0.7s;
  --p2: 2s;          /* straplines total 1 x 2.0*/
  --p3: 2.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);
}

/* =====================================================
   INTRO STAGE (standalone)
   ===================================================== */

.intro-stage{
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 0;
}

.intro-logo{
  position: fixed;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: var(--logo-width);
  transform: translate(-50%, -50%);
  opacity: 0;
  animation:
    fadeIn 2s ease-in var(--t-logo-fade) forwards,
    moveIntroLogo 0.8s ease-out var(--t-logo-move) forwards;
}

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

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

.logo{
  position: absolute;
  z-index: 2; 
  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 */
}
/* MOBILE intro replacement (default hidden) */
.logo-mobile{
  display: none;
  position: absolute;
  z-index: 2;
  top: calc(50% + 26.5px);
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;

  font-family: var(--font-brand);
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  line-height: 1.0;
}

.logo-mobile .k{ color: rgba(255,255,255,0.95); }
.logo-mobile .d{ color: rgba(255,255,255,0.45); }

.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) )
             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; }
}

/* =====================================================
   MOBILE (Option 2): 3-line sentence, highlight el/an/ev
   ===================================================== */
@media (max-width: 640px){

  /* Optional: remove merge delay on mobile (instant “replace”) */
  :root{
    --mergeDur: 0s;
  }
  .logo-main{
    font-size: clamp(2.6rem, 6vw, 3.8rem);
  }

  .intro-logo{
    top: calc(50% + 1rem);   /* DOWN: increase */
    left: calc(50% + 1rem);  /* RIGHT: increase */
  }
  /* Show the 3-line mobile intro, then fade it out when "elanev" appears */
  .logo-mobile{
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    letter-spacing: 0.05em;
    line-height: 1;

    left: calc(50% + 1.5px);                 /* MATCH .logo */
    top:  calc(50% + 26.5px - 0.5em);        /* SHIFT up half a line so “analytics” hits the centre row */
    transform: translate(-50%, -50%);        /* STOP using the transform fudge */

    display: block;
    opacity: 1;
    animation: fadeOut 0.25s ease-out var(--t-merge) forwards;
  }

  /*.logo-mobile-text > div{
    transition: transform 300ms ease-out;
  }*/
  .logo-mobile-text > div:nth-child(1){
      transform: translateX(-1.75ch);
  }
  .logo-mobile-text > div:nth-child(2){
    transform: translateX(0);
  }
  .logo-mobile-text > div:nth-child(3){
    transform: translateX(2.5ch);
  }

  /* Tighten gap between elanev text and strapline on mobile */
  .logo-sub{
    margin-top: 1rem;
  }

  /* DESKTOP phrase1 OFF on mobile (but keep phrase3 + strapline!) */
  .logo-desktop .phrase2-primary{
    display: none !important;
  }

  /* We don't want el/an/ev letters on mobile */
  .logo-desktop .word{
    display: none !important;
  }

  /* Reuse phrase3 timing, but render the word "elanev" instead */
  .logo-desktop .phrase3{
    opacity: 0;                 /* keep your existing fadeIn/fadeOut animation */
    text-align: center;
    letter-spacing: 0.05em;
  }

  .logo-desktop .phrase3::before{
    content: "elanev";
    display: inline-block;
  }

}






/*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*/