/* Isolated StoryOne effects. The existing heading/grid/card geometry is inherited. */
.clib-heading { position: relative; isolation: isolate; font-kerning: none; }
.clib-base { display: block; }
.clib-word, .clib-char, .clib-mask-word, .clib-mask-char { display: inline-block; }
.clib-word, .clib-mask-word { white-space: nowrap; }
.clib-decorative { position: relative; z-index: 1; }
.clib-plain-word { position: relative; opacity: 1; transition: opacity .8s var(--consumer-ease); }
.clib-heading[data-library-effect='inflate'] .clib-plain-word { opacity: 0; }
.clib-glow { position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%) scale(1); z-index: -1; opacity: 0; pointer-events: none; transition: opacity .8s var(--consumer-ease), transform .8s var(--consumer-ease); }
.clib-glow canvas { display: block; width: 100%; height: auto; }
.clib-heading[data-library-effect='glow'] .clib-glow { opacity: 1; transform: translate(-50%, -50%) scale(1.35); }
/* The shorter Praxa word needs less expansion to retain its neighboring spaces. */
.clib-inflate { position: absolute; top: 50%; left: 50%; width: calc(100% + .7em); transform: translate(-50%, -50%); display: flex; align-items: flex-end; justify-content: center; z-index: 1; pointer-events: none; }
.clib-glyph { display: block; height: auto; flex: none; margin: 0 -.5%; transform: scale(0); transform-origin: 50% 50%; }
.clib-glyph-crop { position: relative; display: block; width: 100%; overflow: hidden; }
.clib-glyph-crop > img { position: absolute; display: block; max-width: none; height: auto; pointer-events: none; user-select: none; }
.clib-halftone { position: absolute; inset: 0 auto auto 0; width: 100%; z-index: 2; opacity: 0; pointer-events: none; isolation: isolate; transition: opacity .8s var(--consumer-ease); }
.clib-heading[data-library-effect='halftone'] .clib-halftone { opacity: 1; }
.clib-halftone-video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.clib-halftone-text { position: relative; display: block; padding-bottom: .1em; color: #000; background: #fafafa; mix-blend-mode: lighten; }
@media (prefers-reduced-motion: reduce) {
  .clib-plain-word, .clib-glow, .clib-halftone { transition: none; }
}