/* Strata logo motion — v1.0
   Entrance "Hard" (beds shoot in flush, snap into the step, letters burst out) + hover "Gold deposit"
   (gold rises bottom bed → top bed → letters). Pure CSS; the only JS needed is optional (replay).
   Requires the markup in strata-logo-motion.html. Colors from strata-brand.css. */

.strata-lockup,
.strata-lockup:hover {
  display: inline-flex;
  align-items: center;
  gap: .19em;                  /* scales with font-size */
  color: var(--strata-paper, #f4f1ea);
  line-height: 1;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.strata-lockup--on-light,
.strata-lockup--on-light:hover { color: var(--strata-ink, #08080a); }

.strata-lockup svg {
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
  overflow: visible;           /* beds travel outside the box during the entrance */
}

.strata-wordmark {
  font-family: var(--strata-font-wordmark, 'Host Grotesk', sans-serif);
  font-weight: 600;
  font-size: .875em;
  letter-spacing: -0.03em;
  line-height: 1;
  overflow: hidden;            /* letters emerge from behind the symbol */
  padding-left: .03em;
  margin-left: -.03em;
}
.strata-wordmark span { display: inline-block; }
.strata-wordmark span:nth-child(1) { --i: 0; }
.strata-wordmark span:nth-child(2) { --i: 1; }
.strata-wordmark span:nth-child(3) { --i: 2; }
.strata-wordmark span:nth-child(4) { --i: 3; }
.strata-wordmark span:nth-child(5) { --i: 4; }
.strata-wordmark span:nth-child(6) { --i: 5; }

/* ---- Hover: Gold deposit ------------------------------------------------ */
.strata-lockup rect { transition: fill .3s; }
.strata-wordmark span { transition: color .25s; }
.strata-lockup:hover .b3 { fill: var(--strata-gold, #d4a44a); transition-delay: 0s; }
.strata-lockup:hover .b2 { fill: var(--strata-gold, #d4a44a); transition-delay: .08s; }
.strata-lockup:hover .b1 { fill: var(--strata-gold, #d4a44a); transition-delay: .16s; }
.strata-lockup:hover .strata-wordmark span {
  color: var(--strata-gold, #d4a44a);
  transition-delay: calc(.24s + var(--i, 0) * .04s);
}
/* Gold hover is for dark (Ink) backgrounds only. On light backgrounds keep the mark Ink. */
.strata-lockup--on-light:hover .b1,
.strata-lockup--on-light:hover .b2,
.strata-lockup--on-light:hover .b3 { fill: currentColor; transition-delay: 0s; }
.strata-lockup--on-light:hover .strata-wordmark span { color: inherit; transition-delay: 0s; }

/* ---- Entrance: Hard (0.75s) --------------------------------------------- */
/* Plays when .strata-lockup--enter is present. Remove/re-add the class to replay.
   --strata-tempo scales the whole sequence (1 = as designed, .8 = faster). */
.strata-lockup--enter .b1 { animation: strata-hard-l calc(.75s * var(--strata-tempo, 1)) cubic-bezier(.16, 1, .3, 1) both; }
.strata-lockup--enter .b2 { animation: strata-hard-m calc(.75s * var(--strata-tempo, 1)) cubic-bezier(.16, 1, .3, 1) both; }
.strata-lockup--enter .b3 { animation: strata-hard-r calc(.75s * var(--strata-tempo, 1)) cubic-bezier(.16, 1, .3, 1) both; }
.strata-lockup--enter .strata-wordmark span {
  animation: strata-burst calc(.4s * var(--strata-tempo, 1)) cubic-bezier(.16, 1, .3, 1)
             calc((.38s + var(--i, 0) * .025s) * var(--strata-tempo, 1)) both;
}

/* Translate values are SVG user units (viewBox 0 0 32 32), so they scale with the icon. */
@keyframes strata-hard-l {
  0%   { opacity: 0; transform: translateX(-22px); }
  30%  { opacity: 1; transform: translateX(-2px); }   /* flush with the middle bed */
  52%  { transform: translateX(-2px); }               /* hold */
  78%  { transform: translateX(.9px); }               /* snap past the step */
  100% { opacity: 1; transform: none; }               /* settle */
}
@keyframes strata-hard-m {
  0%        { opacity: 0; transform: translateX(-22px); }
  30%, 100% { opacity: 1; transform: none; }
}
@keyframes strata-hard-r {
  0%   { opacity: 0; transform: translateX(-22px); }
  30%  { opacity: 1; transform: translateX(2px); }
  52%  { transform: translateX(2px); }
  78%  { transform: translateX(-.9px); }
  100% { opacity: 1; transform: none; }
}
@keyframes strata-burst {
  0%   { opacity: 0; transform: translateX(-.7em); }
  60%  { opacity: 1; transform: translateX(.05em); }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .strata-lockup rect,
  .strata-wordmark span { transition: none !important; animation: none !important; }
}

/* ─── site adapter ────────────────────────────────────────────────────────
   The pack reads --strata-* tokens with literal fallbacks. Mapping them to
   the site's own tokens keeps the mark matching the text beside it (our
   "mark tracks the host surface" rule) without editing a single rule above —
   geometry, timings and keyframes stay byte-identical to the handoff. */
:root{
  --strata-paper:var(--w);
  --strata-ink:var(--ltt);
  --strata-gold:var(--c);
  --strata-font-wordmark:'Host Grotesk',var(--f);
}
/* nav.light already drives the light-section swap; carry it to the lockup.
   Higher specificity than the pack's `.strata-lockup` so it wins. */
nav.light .strata-lockup,
nav.light .strata-lockup:hover{color:var(--ltt)}
nav.light .strata-lockup:hover .b1,
nav.light .strata-lockup:hover .b2,
nav.light .strata-lockup:hover .b3{fill:currentColor;transition-delay:0s}
nav.light .strata-lockup:hover .strata-wordmark span{color:inherit;transition-delay:0s}

/* Footer lockup: same mark, no entrance (it sits below the fold) and no
   hover gold — a 54px block flashing gold on hover is a different thing
   from a 26px header cue. */
footer .strata-lockup{font-size:54px}
footer .strata-lockup:hover .b1,
footer .strata-lockup:hover .b2,
footer .strata-lockup:hover .b3{fill:currentColor;transition-delay:0s}
footer .strata-lockup:hover .strata-wordmark span{color:inherit;transition-delay:0s}

nav .strata-lockup{font-size:26px}
@media(max-width:768px){
  /* Keep the wordmark on phones. The bare symbol sits opposite the hamburger
     and reads as a second menu button; the word is what disambiguates them. */
  nav .strata-lockup{font-size:26px;margin-right:auto}
}