/* ============================================================================
   MOTTO — typography and six word-entrance treatments.
   Base state of every word is VISIBLE. Each treatment animates from a hidden
   state to that visible base with fill-mode:backwards, and the script removes
   the animation class the moment the stream settles. Nothing can be stranded
   at opacity 0, even if the tab is backgrounded mid-animation.
   ========================================================================= */
#motto{
  font-size:clamp(30px,3.15vw,48px);
  line-height:1.14;
  /* a fixed box keeps the gold rule perfectly still; the type centres in it */
  height:clamp(150px,20vh,190px);
  display:flex;
  /* the statement sits on the lower edge of its box, so the gold rule reads
     as an underline rather than floating a line below short quotes */
  align-items:flex-end;
  padding-bottom:6px;
  text-wrap:balance;
  transition:opacity .42s var(--ease-out),filter .42s var(--ease-out);
}
#motto.out{opacity:0;filter:blur(3px)}

/* extended statements get a smaller measure so they stay inside the box */
#motto.long{
  font-size:clamp(22px,2.25vw,32px);
  line-height:1.2;
  text-wrap:pretty;
}

.motto-text{display:block;width:100%}
.motto-text .mw{
  display:inline-block;
  opacity:1;transform:none;filter:none;
  will-change:transform,opacity,filter;
}
.motto-text .mw em{
  display:inline-block;
  font-style:italic;
  color:#D9C285;
  background:none;
  -webkit-text-fill-color:#D9C285;
  text-shadow:0 0 40px rgba(198,164,81,.22);
  animation:none;
}

/* a champagne caret while the line is still being written */
.motto-text.streaming::after{
  content:"";display:inline-block;
  width:2px;height:.82em;margin-left:.1em;
  vertical-align:-.06em;
  background:#C6A451;box-shadow:0 0 11px rgba(198,164,81,.65);
  animation:mottoCaret .9s steps(1,end) infinite;
}
@keyframes mottoCaret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* once settled: every animation is gone and the last word breathes gold */
.motto-text.settled .mw{
  animation:none!important;opacity:1!important;transform:none!important;
  filter:none!important;clip-path:none!important;text-shadow:none!important;
}
.motto-text.settled .mw em{
  animation:goldBreath 6s var(--ease-in-out, ease-in-out) infinite;
}
@keyframes goldBreath{
  0%,100%{text-shadow:0 0 26px rgba(198,164,81,.16)}
  50%{text-shadow:0 0 46px rgba(198,164,81,.42)}
}

/* ----------------------------------------------------------------------------
   1 · RISE — the exact reference stream: lift out of a soft blur
   -------------------------------------------------------------------------- */
.fx-rise .mw{animation:mwRise .62s var(--ease-out) backwards}
@keyframes mwRise{
  from{opacity:0;transform:translateY(.28em);filter:blur(5px)}
  to{opacity:1;transform:none;filter:none}
}

/* 2 · DRIFT — the line gathers from the left, tracking settles as it lands */
.fx-drift .mw{animation:mwDrift .68s var(--ease-out) backwards}
@keyframes mwDrift{
  from{opacity:0;transform:translateX(-.18em);filter:blur(7px);letter-spacing:.055em}
  to{opacity:1;transform:none;filter:none;letter-spacing:normal}
}

/* 3 · VEIL — each word is uncovered upward, like type behind a moving mask */
.fx-veil .mw{animation:mwVeil .66s var(--ease-out) backwards}
@keyframes mwVeil{
  from{opacity:0;clip-path:inset(0 0 92% 0);transform:translateY(.2em);filter:blur(4px)}
  to{opacity:1;clip-path:inset(0 0 0 0);transform:none;filter:none}
}

/* 4 · GILD — arrives warm, then cools into the primary white */
.fx-gild .mw{animation:mwGild .72s var(--ease-out) backwards}
@keyframes mwGild{
  from{opacity:0;color:#EAD7A6;text-shadow:0 0 26px rgba(198,164,81,.85);filter:blur(6px)}
  to{opacity:1;filter:none;text-shadow:none}
}

/* 5 · FLOAT — a shallow 3D tilt that levels out, with a gentler blur */
.fx-float .mw{animation:mwFloat .7s var(--ease-out) backwards;transform-origin:50% 100%}
@keyframes mwFloat{
  from{opacity:0;transform:perspective(420px) rotateX(-24deg) translateY(.34em) scale(.94);filter:blur(6px)}
  to{opacity:1;transform:none;filter:none}
}

/* 6 · SHEAR — a fine calligraphic lean that straightens as it sharpens */
.fx-shear .mw{animation:mwShear .64s var(--ease-out) backwards}
@keyframes mwShear{
  from{opacity:0;transform:translateY(.16em) skewX(-7deg);filter:blur(8px)}
  to{opacity:1;transform:none;filter:none}
}

/* ------------------------------------------------------------- responsive -- */
@media (max-height:820px){
  #motto{height:clamp(138px,19vh,170px);font-size:clamp(28px,3vw,44px)}
  #motto.long{font-size:clamp(20px,2.05vw,28px)}
}
@media (max-height:660px){
  #motto{height:clamp(112px,17vh,140px);font-size:clamp(24px,2.6vw,34px)}
  #motto.long{font-size:clamp(17px,1.8vw,23px);line-height:1.16}
}
@media (max-width:900px){
  #motto{font-size:clamp(26px,4.6vw,34px);height:auto;min-height:0}
  #motto.long{font-size:clamp(20px,3.4vw,26px)}
}
@media (prefers-reduced-motion:reduce){
  .motto-text .mw,
  .motto-text.settled .mw em{animation:none!important;opacity:1!important;
    transform:none!important;filter:none!important;clip-path:none!important}
  .motto-text.streaming::after{display:none}
  #motto{height:auto;min-height:0}
}