/* ============================================================
   "Keep It Simple. Keep It Moving." — recurring brand motto motif
   Gold shimmer sweep + kinetic pop-on-scroll + gold sparks.
   Fail-safe: with no JS / reduced motion / a11y "stop animations"
   the motto is shown fully and statically.
   ============================================================ */

.kism-ribbon{
  position:relative;
  text-align:center;
  padding:clamp(2.4rem,6vw,4.2rem) 1.5rem;
  overflow:hidden;
  isolation:isolate;
}

/* soft gold bloom behind the words */
.kism-ribbon::before{
  content:"";
  position:absolute;z-index:-1;inset:0;margin:auto;
  width:min(640px,86%);height:min(220px,72%);
  background:radial-gradient(ellipse at center,rgba(197,160,89,.20),transparent 72%);
  opacity:0;transform:scale(.55);
  transition:opacity .9s ease,transform .9s ease;
  pointer-events:none;
}
.kism-ribbon.is-on::before{opacity:1;transform:scale(1)}

.kism{
  display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:0 .55em;
  font-family:'Frank Ruhl Libre','Cormorant Garamond',Georgia,serif;
  font-weight:800;font-style:italic;
  font-size:clamp(1.55rem,5.4vw,3rem);
  letter-spacing:.4px;line-height:1.12;
}

.kism .w{
  display:inline-block;
  background:linear-gradient(100deg,#8C6B2C 0%,#C5A059 26%,#FCEFC7 50%,#C5A059 74%,#8C6B2C 100%);
  background-size:240% 100%;background-position:50% 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

.kism .kism-arrow{
  font-style:normal;display:inline-block;
  color:#C5A059;-webkit-text-fill-color:#C5A059;
  margin-inline-start:.05em;
}

.kism-rule{
  display:block;height:2px;width:0;margin:.85rem auto 0;
  background:linear-gradient(90deg,transparent,#C5A059 35%,#FCEFC7 50%,#C5A059 65%,transparent);
  transition:width 1s cubic-bezier(.19,1,.22,1);
}
.kism-ribbon.is-on .kism-rule{width:min(280px,62%)}

/* sparks (injected by JS) */
.kism-spark{
  position:absolute;z-index:-1;
  width:7px;height:7px;border-radius:50%;
  left:var(--sx,50%);top:var(--sy,50%);
  background:#FCEFC7;box-shadow:0 0 9px 2px rgba(252,239,199,.85);
  opacity:0;pointer-events:none;
}

@media (prefers-reduced-motion:no-preference){
  .kism .w{animation:kismShimmer 5s linear infinite}

  /* pop-in is opt-in — JS adds .anim-ready only when motion is allowed */
  .kism-ribbon.anim-ready .w{
    opacity:0;transform:translateY(22px) scale(.9);
    transition:opacity .6s ease,transform .6s cubic-bezier(.2,.9,.3,1.55);
  }
  .kism-ribbon.anim-ready .w:nth-of-type(2){transition-delay:.13s}
  .kism-ribbon.anim-ready .kism-arrow{opacity:0;transition:opacity .4s .34s ease}
  .kism-ribbon.anim-ready.is-on .w{opacity:1;transform:none}
  .kism-ribbon.anim-ready.is-on .kism-arrow{opacity:1;animation:kismNudge 1.7s ease-in-out .8s infinite}
  .kism-ribbon.anim-ready.is-on .kism-spark{animation:kismSpark var(--sd,.95s) ease-out var(--sdl,0s)}
}

@keyframes kismShimmer{0%{background-position:120% 0}100%{background-position:-120% 0}}
@keyframes kismNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(.3em)}}
@keyframes kismSpark{
  0%{opacity:0;transform:scale(.2)}
  25%{opacity:1}
  100%{opacity:0;transform:scale(1) translate(var(--sdx,0),var(--sdy,-16px))}
}

/* a11y: "stop animations" toggle — show everything, no motion */
body.a11y-no-animation .kism .w,
body.a11y-no-animation .kism-arrow,
body.a11y-no-animation .kism-spark{animation:none!important}
body.a11y-no-animation .kism-ribbon .w{opacity:1!important;transform:none!important}
body.a11y-no-animation .kism-ribbon .kism-arrow{opacity:1!important}
body.a11y-no-animation .kism-ribbon .kism-rule{width:min(280px,62%)!important}
body.a11y-no-animation .kism-ribbon::before{opacity:1!important;transform:scale(1)!important}