/*
 * Cresyn Brand Animation — styles
 * "Grow Together": CRESCENDO (growth) + SYNERGY (togetherness) -> CRESYN
 *
 * Brand palette sourced from the Cresyn website design tokens
 * (website_Cresyn/cresyn-app/src/app/globals.css):
 *   Dark Navy #0d1b2a · Navy #1b263b · Slate Blue #415a77
 *   Steel Blue #778da9 · Off White #e0e1dd · Cool Gray #9aa4b2 · Gold #C9A96E
 */

.cresyn-anim {
  --cresyn-gold: #c9a96e;
  --cresyn-navy-900: #0d1b2a;
  --cresyn-navy-800: #1b263b;
  --cresyn-slate-500: #415a77;
  --cresyn-steel-400: #778da9;
  --cresyn-offwhite-100: #e0e1dd;
  --cresyn-coolgray-300: #9aa4b2;

  /* dark theme (default) */
  --bg: var(--cresyn-navy-900);
  --bg-soft: #0a1521;
  --fg: var(--cresyn-offwhite-100);
  --muted: var(--cresyn-steel-400);
  --muted-2: var(--cresyn-slate-500);
  --sub: var(--cresyn-coolgray-300);
  --accent: var(--cresyn-gold);

  position: relative;
  width: 100%;
  font-family: "Geist", "Geist Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  color: var(--fg);
  background: var(--bg);
  isolation: isolate;
}

.cresyn-anim--light {
  --bg: #ffffff;
  --bg-soft: #f6f7f8;
  --fg: var(--cresyn-navy-900);
  --muted: var(--cresyn-slate-500);
  --muted-2: var(--cresyn-steel-400);
  --sub: var(--cresyn-slate-500);
  --accent: var(--cresyn-gold);
}

/* theme: "auto" — follow the visitor's OS/browser preference */
@media (prefers-color-scheme: light) {
  .cresyn-anim--auto {
    --bg: #ffffff;
    --bg-soft: #f6f7f8;
    --fg: var(--cresyn-navy-900);
    --muted: var(--cresyn-slate-500);
    --muted-2: var(--cresyn-steel-400);
    --sub: var(--cresyn-slate-500);
    --accent: var(--cresyn-gold);
  }
}

.cresyn-anim,
.cresyn-anim *,
.cresyn-anim *::before,
.cresyn-anim *::after {
  box-sizing: border-box;
}

.cresyn-anim__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 3cqi, 1.75rem);
  width: 100%;
  min-height: min(82vh, 42rem);
  padding: clamp(1.5rem, 6cqi, 4rem) clamp(1rem, 5cqi, 3rem);
  overflow: hidden;
  container-type: inline-size;
  container-name: cresyn-stage;
  background:
    radial-gradient(120% 90% at 50% 15%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%),
    var(--bg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cresyn-anim__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- shared letter/word primitives ---------- */

.cresyn-word {
  position: relative;
  display: flex;
  align-items: baseline;
  will-change: transform;
}

.cresyn-letter {
  position: relative;
  display: inline-block;
  line-height: 1;
  white-space: pre;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

.cresyn-thread {
  position: absolute;
  left: 50%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transform: translateX(-50%) scaleX(0);
  transform-origin: 50% 50%;
  pointer-events: none;
}

/* ---------- Scene 1 + 2: CRESCENDO / SYNERGY duo ---------- */

.cresyn-anim__duo {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(1.25rem, 5cqi, 3rem);
}

/*
 * Each word's "dictionary entry" card: headword + underline thread, then
 * part-of-speech/pronunciation and the typed-out definition beneath it.
 * A fixed width is reserved as soon as the card is active so the
 * definition can type/wrap in place without ever reflowing its sibling.
 */
.cresyn-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: clamp(15rem, 44cqi, 21rem);
  gap: clamp(0.55rem, 2.2cqi, 0.9rem);
}

.cresyn-entry--synergy {
  display: none;
}

.cresyn-entry--synergy.is-active {
  display: flex;
}

.cresyn-word--crescendo .cresyn-letter,
.cresyn-word--synergy .cresyn-letter {
  font-weight: 560;
  font-variation-settings: "wght" 560;
  letter-spacing: 0.01em;
  color: var(--fg);
}

.cresyn-word--crescendo,
.cresyn-word--synergy {
  font-size: clamp(1.05rem, 4.4cqi, 2.15rem);
}

.cresyn-word--synergy .cresyn-letter--syn {
  color: var(--accent);
  font-weight: 640;
  font-variation-settings: "wght" 640;
}

.cresyn-word--synergy .cresyn-letter--ergy {
  color: var(--muted);
}

.cresyn-thread--crescendo,
.cresyn-thread--synergy {
  bottom: -0.35em;
  width: 100%;
}

/* dictionary-style meta line (part of speech + pronunciation) */
.cresyn-word__meta {
  display: none;
  font-size: clamp(0.7rem, 1.9cqi, 0.85rem);
  font-style: italic;
  letter-spacing: 0.05em;
  color: var(--muted);
  opacity: 0;
}

/* the typed-out definition */
.cresyn-word__definition {
  display: none;
  font-size: clamp(0.92rem, 2.4cqi, 1.15rem);
  line-height: 1.55;
  color: var(--sub);
  min-height: 1.55em;
  opacity: 1;
}

.cresyn-caret {
  display: inline-block;
  width: 0.1em;
  height: 1em;
  margin-left: 0.06em;
  background: var(--accent);
  vertical-align: -0.12em;
  animation: cresyn-blink 0.9s steps(1) infinite;
}

@keyframes cresyn-blink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

/* ---------- Scene 3: convergence overlay ---------- */

.cresyn-anim__converge-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cresyn-clone {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  line-height: 1;
  white-space: pre;
  will-change: transform, opacity, color;
}

/* ---------- Scene 4 + 5: CRESYN wordmark + tagline ---------- */

/*
 * Absolutely positioned overlay covering the stage, independent of the
 * CRESCENDO/SYNERGY duo's own flex flow. This keeps the (invisible, but
 * measurable-for-FLIP) hero wordmark and tagline from reserving flow space
 * next to the duo — which would otherwise push the duo off true center
 * during Scenes 1-2 — while still resolving to a perfectly centered,
 * responsive layout once they fade in.
 */
.cresyn-anim__resolved {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.7rem, 3cqi, 1.25rem);
  pointer-events: none;
}

/*
 * Brandmark, revealed above the wordmark the moment CRESYN resolves.
 * Two variants are always in the DOM; only the one matching the current
 * theme is displayed (mirrors the --bg/--fg token pattern above), so an
 * "auto" theme instance keeps showing the right mark if the visitor's OS
 * theme changes live.
 */
.cresyn-anim__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.cresyn-anim__logo {
  display: block;
  height: clamp(2.5rem, 13.5cqi, 6.75rem);
  width: auto;
}

.cresyn-anim__logo--black {
  display: none;
}

.cresyn-anim--light .cresyn-anim__logo--white {
  display: none;
}
.cresyn-anim--light .cresyn-anim__logo--black {
  display: block;
}

@media (prefers-color-scheme: light) {
  .cresyn-anim--auto .cresyn-anim__logo--white {
    display: none;
  }
  .cresyn-anim--auto .cresyn-anim__logo--black {
    display: block;
  }
}

.cresyn-anim__hero {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-size: clamp(2.75rem, 15cqi, 7.5rem);
  opacity: 0;
}

.cresyn-anim__hero .cresyn-letter {
  font-weight: 680;
  font-variation-settings: "wght" 680;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.cresyn-thread--hero {
  bottom: -0.22em;
  width: 46%;
  height: 3px;
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

.cresyn-anim__tagline {
  font-size: clamp(0.95rem, 3.4cqi, 1.6rem);
  font-weight: 420;
  font-variation-settings: "wght" 420;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub);
  opacity: 0;
}

/* ---------- responsive: stack vertically on narrow viewports ---------- */

@container cresyn-stage (max-width: 38rem) {
  .cresyn-anim__duo {
    flex-direction: column;
    align-items: center;
    gap: clamp(1rem, 5cqi, 1.75rem);
  }
  .cresyn-entry {
    width: min(92cqi, 24rem);
  }
}

@supports not (container-type: inline-size) {
  .cresyn-word--crescendo,
  .cresyn-word--synergy {
    font-size: clamp(1.05rem, 4.4vw, 2.15rem);
  }
  .cresyn-entry {
    width: clamp(15rem, 44vw, 21rem);
  }
  .cresyn-word__meta {
    font-size: clamp(0.7rem, 1.9vw, 0.85rem);
  }
  .cresyn-word__definition {
    font-size: clamp(0.92rem, 2.4vw, 1.15rem);
  }
  .cresyn-anim__hero {
    font-size: clamp(2.75rem, 15vw, 7.5rem);
  }
  .cresyn-anim__logo {
    height: clamp(2.5rem, 13.5vw, 6.75rem);
  }
  .cresyn-anim__tagline {
    font-size: clamp(0.95rem, 3.4vw, 1.6rem);
  }
  @media (max-width: 608px) {
    .cresyn-anim__duo {
      flex-direction: column;
      align-items: center;
    }
    .cresyn-entry {
      width: min(92vw, 24rem);
    }
  }
}

/* ---------- reduced motion: static final state only ---------- */

.cresyn-anim--static .cresyn-anim__duo,
.cresyn-anim--static .cresyn-anim__converge-layer {
  display: none;
}

.cresyn-anim--static .cresyn-anim__hero,
.cresyn-anim--static .cresyn-anim__tagline,
.cresyn-anim--static .cresyn-anim__logo-wrap,
.cresyn-anim--static .cresyn-thread--hero {
  opacity: 1;
  transform: none;
}

.cresyn-anim--static .cresyn-anim__stage {
  cursor: default;
}