/* ==========================================
   Brand Name Animation
   ========================================== */

/* Exit (collapse right-to-left): last char fires first */
.brand-char--hidden {
  transition: margin-left 0.25s ease-in, opacity 0.3s ease-in;
}

/* Enter (expand left-to-right): first char fires first */
.site-brand:hover .brand-char--hidden,
.site-brand:focus-visible .brand-char--hidden {
  transition: margin-left 0.25s ease-out, opacity 0.3s ease-out;
}

/* Exit delays — "oppe" collapses first, then "enjamin" */
.site-brand-name .brand-char--hidden:nth-child(14) { transition-delay: 0.00s; }
.site-brand-name .brand-char--hidden:nth-child(13) { transition-delay: 0.01s; }
.site-brand-name .brand-char--hidden:nth-child(12) { transition-delay: 0.02s; }
.site-brand-name .brand-char--hidden:nth-child(11) { transition-delay: 0.03s; }
.site-brand-name .brand-char--hidden:nth-child(9) { transition-delay: 0.08s; }
.site-brand-name .brand-char--hidden:nth-child(8) { transition-delay: 0.09s; }
.site-brand-name .brand-char--hidden:nth-child(7) { transition-delay: 0.10s; }
.site-brand-name .brand-char--hidden:nth-child(6) { transition-delay: 0.11s; }
.site-brand-name .brand-char--hidden:nth-child(5) { transition-delay: 0.12s; }
.site-brand-name .brand-char--hidden:nth-child(4) { transition-delay: 0.13s; }
.site-brand-name .brand-char--hidden:nth-child(3) { transition-delay: 0.14s; }
.site-brand-name .brand-char--hidden:nth-child(2) { transition-delay: 0.15s; }

/* Enter delays — "enjamin" expands first, then "oppe" */
.site-brand:hover .site-brand-name .brand-char--hidden:nth-child(2),
.site-brand:focus-visible .site-brand-name .brand-char--hidden:nth-child(2) { transition-delay: 0.00s; }
.site-brand:hover .site-brand-name .brand-char--hidden:nth-child(3),
.site-brand:focus-visible .site-brand-name .brand-char--hidden:nth-child(3) { transition-delay: 0.01s; }
.site-brand:hover .site-brand-name .brand-char--hidden:nth-child(4),
.site-brand:focus-visible .site-brand-name .brand-char--hidden:nth-child(4) { transition-delay: 0.02s; }
.site-brand:hover .site-brand-name .brand-char--hidden:nth-child(5),
.site-brand:focus-visible .site-brand-name .brand-char--hidden:nth-child(5) { transition-delay: 0.03s; }
.site-brand:hover .site-brand-name .brand-char--hidden:nth-child(6),
.site-brand:focus-visible .site-brand-name .brand-char--hidden:nth-child(6) { transition-delay: 0.04s; }
.site-brand:hover .site-brand-name .brand-char--hidden:nth-child(7),
.site-brand:focus-visible .site-brand-name .brand-char--hidden:nth-child(7) { transition-delay: 0.05s; }
.site-brand:hover .site-brand-name .brand-char--hidden:nth-child(8),
.site-brand:focus-visible .site-brand-name .brand-char--hidden:nth-child(8) { transition-delay: 0.06s; }
.site-brand:hover .site-brand-name .brand-char--hidden:nth-child(9),
.site-brand:focus-visible .site-brand-name .brand-char--hidden:nth-child(9) { transition-delay: 0.07s; }
.site-brand:hover .site-brand-name .brand-char--hidden:nth-child(11),
.site-brand:focus-visible .site-brand-name .brand-char--hidden:nth-child(11) { transition-delay: 0.12s; }
.site-brand:hover .site-brand-name .brand-char--hidden:nth-child(12),
.site-brand:focus-visible .site-brand-name .brand-char--hidden:nth-child(12) { transition-delay: 0.13s; }
.site-brand:hover .site-brand-name .brand-char--hidden:nth-child(13),
.site-brand:focus-visible .site-brand-name .brand-char--hidden:nth-child(13) { transition-delay: 0.14s; }
.site-brand:hover .site-brand-name .brand-char--hidden:nth-child(14),
.site-brand:focus-visible .site-brand-name .brand-char--hidden:nth-child(14) { transition-delay: 0.15s; }

/* ==========================================
   Header / Contact Link Roll Animation
   ========================================== */

.navigation-link-line {
  transition: transform var(--transition-smooth);
}

.navigation-link.is-roll-hover .navigation-link-line,
.navigation-link:focus-visible .navigation-link-line {
  transform: translateY(100%);
}

.navigation-link.is-roll-leave .navigation-link-line {
  transform: translateY(200%);
}

.navigation-link.no-roll-transition .navigation-link-line {
  transition: none;
}

/* ==========================================
   Letter Intro + Signature Draw Animation
   ========================================== */

.letter {
  transform: rotate(var(--letter-rotation)) translateY(72px) scale(0.95);
  opacity: 0;
  transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 1100ms ease;
}

body.is-ready .letter {
  transform: rotate(var(--letter-rotation)) translateY(0) scale(1);
  opacity: 1;
}

.signature-draw {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}

body.is-signature-ready .signature-draw {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition:
    clip-path 2000ms cubic-bezier(0.19, 1, 0.22, 1) var(--signature-delay-ms, 150ms),
    opacity 420ms ease var(--signature-delay-ms, 150ms);
}

/* ==========================================
   Email Copy Animation
   ========================================== */

.email-copy {
  transition: opacity var(--transition-smooth);
}

.email-copy-line {
  transition: transform var(--transition-smooth);
}

.email-copy[data-email-roll="hover"] .email-copy-line {
  transform: translateY(100%);
}

.email-copy[data-email-roll="leave"] .email-copy-line {
  transform: translateY(200%);
}

.email-copy[data-email-roll="copied"] .email-copy-line {
  transform: translateY(300%);
}

.email-copy[data-email-roll="exit"] .email-copy-line {
  transform: translateY(400%);
}

.email-copy.no-email-roll-transition .email-copy-line {
  transition: none;
}

.email-copy:hover,
.email-copy:focus-visible {
  opacity: 0.6;
}

.email-copy[data-email-roll="copied"] .email-copy-line,
.email-copy[data-email-roll="exit"] .email-copy-line {
  color: var(--primary);
}

.email-copy[data-email-roll="copied"],
.email-copy[data-email-roll="copied"]:hover,
.email-copy[data-email-roll="copied"]:focus-visible,
.email-copy[data-email-roll="exit"],
.email-copy[data-email-roll="exit"]:hover,
.email-copy[data-email-roll="exit"]:focus-visible {
  opacity: 1;
}

.email-copy.suppress-hover:hover {
  opacity: 1;
}

/* ==========================================
   Social Link Roll Animation
   ========================================== */

.contact-link-line {
  transition: transform var(--transition-smooth);
}

.contact-grid a.is-roll-hover .contact-link-line,
.contact-grid a:focus-visible .contact-link-line {
  transform: translateY(100%);
}

.contact-grid a.is-roll-leave .contact-link-line {
  transform: translateY(200%);
}

.contact-grid a.no-roll-transition .contact-link-line {
  transition: none;
}

/* ==========================================
   Time Glyph Roll Animation
   ========================================== */

.clock-glyph {
  transition: transform var(--clock-roll-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

.clock-cell.is-rolling .clock-glyph--current,
.clock-cell.is-rolling .clock-glyph--next {
  transform: translateY(100%);
}

/* ==========================================
   Mobile Animation Overrides
   ========================================== */

@media (max-width: 768px) {
  .navigation-link:hover .navigation-link-line,
  .navigation-link:focus-visible .navigation-link-line,
  .navigation-link.is-roll-hover .navigation-link-line,
  .navigation-link.is-roll-leave .navigation-link-line {
    transform: none;
  }

  .email-copy:hover,
  .email-copy:focus-visible,
  .email-copy:active {
    opacity: 1;
  }

  .email-copy-line--hover {
    color: var(--primary);
  }

  .contact-grid a:hover .contact-link-line,
  .contact-grid a:focus-visible .contact-link-line,
  .contact-grid a.is-roll-hover .contact-link-line,
  .contact-grid a.is-roll-leave .contact-link-line {
    transform: none;
  }
}