/* ==========================================================================
   JHS Finnish word-morph — shared site-wide component
   --------------------------------------------------------------------------
   Two stacked spans cross-fade with a blur+lift, cycling Finnish -> English.
   An invisible sizer holds the wider of the two words so the line never
   reflows mid-cycle. Ported from the stage landing pages so the device reads
   the same everywhere on the site.
   ========================================================================== */

.jhs-morph{
  position:relative;
  display:inline-grid;
  vertical-align:baseline;
  text-align:center;
}
.jhs-morph > .jhs-morph__sizer{
  visibility:hidden;
  pointer-events:none;
  grid-area:1/1;
  white-space:nowrap;
  animation:none;
}
/* NOTE: keep this selector at `> span`, not `> span:not(.sizer)`. The :not()
   pushes specificity above the .jhs-morph__en rule below, and because this is
   the `animation` shorthand it would silently reset animation-delay to 0 —
   which lands both words on top of each other, in sync, blinking together. */
.jhs-morph > span{
  grid-area:1/1;
  white-space:nowrap;
  animation:jhsMorphCycle 7s cubic-bezier(.6,0,.25,1) infinite;
}
.jhs-morph > .jhs-morph__fi{ color:var(--jhs-fi, #e29400); }
.jhs-morph > .jhs-morph__en{ animation-delay:-3.5s; }

/* stagger so multiple morphs on one screen don't flip in unison */
.jhs-morph[data-delay="1"] > span{ animation-delay:-1.2s }
.jhs-morph[data-delay="1"] > .jhs-morph__en{ animation-delay:-4.7s }
.jhs-morph[data-delay="2"] > span{ animation-delay:-2.4s }
.jhs-morph[data-delay="2"] > .jhs-morph__en{ animation-delay:-5.9s }
.jhs-morph[data-delay="3"] > span{ animation-delay:-0.6s }
.jhs-morph[data-delay="3"] > .jhs-morph__en{ animation-delay:-4.1s }
.jhs-morph[data-delay] > .jhs-morph__sizer{ animation:none }

/* The two layers are offset by exactly half the cycle, so each one's "on" window
   must run to 50% and fade out past it — otherwise the two fades meet at zero and
   the word blinks out mid-sentence. Overlapping them is what makes it read as a
   morph rather than a flash. */
@keyframes jhsMorphCycle{
  0%       { opacity:0; filter:blur(6px); transform:translateY(.26em) scale(.97) }
  8%,50%   { opacity:1; filter:blur(0);   transform:none }
  58%,100% { opacity:0; filter:blur(6px); transform:translateY(-.26em) scale(.97) }
}

/* brighter gold where the morph sits on a dark photo / navy panel */
.th-hero-wrapper,
.hero-wf,
.breadcumb-wrapper,
.footer-wrapper,
.cta-area,
.jhs-mid-cta,
[class*="bg-theme"],
[class*="bg-dark"]{
  --jhs-fi:#ffd400;
}

/* quieter inline variant for body copy */
.jhs-fiword{
  color:var(--jhs-fi, #e29400);
  font-weight:800;
  border-bottom:2px dotted currentColor;
  text-underline-offset:3px;
  cursor:help;
}

/* Anyone who asked for less motion gets the English, held still. */
@media (prefers-reduced-motion:reduce){
  .jhs-morph > span{ animation:none }
  .jhs-morph > .jhs-morph__fi{ display:none }
  .jhs-morph > .jhs-morph__en{ opacity:1; filter:none; transform:none }
}