/* Praxoria Startseite – v539: sichtbarer, stabiler Stift-/Tinten-Gestus.
   Korrektur zu v538: Animierte Eigenschaften liegen nicht mehr auf den
   Textknoten selbst, sondern auf einem separaten ::before-Reveal. Dadurch
   bleibt die endgültige Zeilenaufteilung stabil und der Schreibeffekt wird
   wirklich sichtbar. Keine Textänderungen. */

html body.home.homeRefinedV538.homeRefinedV539 #studioPanel2 .studioTileQuote .answerWriteText{
  min-height: calc(2 * 1.42em) !important;
  line-height: 1.42 !important;
  color: var(--text) !important;
  letter-spacing: -.003em;
  --ink-color: color-mix(in oklab, var(--text) 94%, var(--accent2));
  --ink-soft: color-mix(in oklab, var(--accent2) 18%, transparent);
  --ink-warm: color-mix(in oklab, var(--accent3) 22%, transparent);
}

html body.home.homeRefinedV538.homeRefinedV539 #studioPanel2 .studioTileQuote .answerWriteText .premiumInkLive{
  display: inline !important;
  color: var(--text) !important;
}

html body.home.homeRefinedV538.homeRefinedV539 #studioPanel2 .studioTileQuote .answerWriteText .inkWord{
  position: relative !important;
  display: inline-block !important;
  vertical-align: baseline !important;
  overflow: visible !important;
  isolation: isolate !important;
  opacity: 1 !important;
  color: transparent !important;
  clip-path: none !important;
  filter: none !important;
  transform: none !important;
  text-shadow: none !important;
  will-change: auto !important;
}

html body.home.homeRefinedV538.homeRefinedV539 #studioPanel2 .studioTileQuote .answerWriteText .inkWord::before{
  content: attr(data-ink-word);
  position: absolute;
  z-index: 1;
  inset: 0;
  color: var(--ink-color);
  pointer-events: none;
  opacity: .98;
  clip-path: inset(-.22em 100% -.28em 0 round .06em);
  filter: blur(.24px) saturate(1.02);
  transform: translateY(.012em);
  text-shadow:
    0 .018em 0 color-mix(in oklab, var(--accent2) 6%, transparent),
    0 0 12px color-mix(in oklab, var(--accent2) 0%, transparent);
  will-change: clip-path, filter, transform, opacity;
}

html body.home.homeRefinedV538.homeRefinedV539 #studioPanel2 .studioTileQuote .answerWriteText .inkWord::after{
  content: "";
  position: absolute;
  z-index: 2;
  top: -.12em;
  bottom: -.18em;
  left: -.26em;
  width: clamp(18px, 54%, 48px);
  pointer-events: none;
  opacity: 0;
  border-radius: 999px;
  transform: translateX(-46%) rotate(-9deg) scaleY(.84);
  transform-origin: center;
  background:
    radial-gradient(closest-side at 76% 52%, color-mix(in oklab, white 38%, transparent), transparent 62%),
    linear-gradient(101deg,
      transparent 0%,
      color-mix(in oklab, var(--accent3) 0%, transparent) 20%,
      color-mix(in oklab, var(--accent2) 18%, transparent) 43%,
      color-mix(in oklab, var(--accent3) 26%, transparent) 50%,
      color-mix(in oklab, var(--accent2) 12%, transparent) 58%,
      transparent 78%);
  filter: blur(.24px);
  mix-blend-mode: multiply;
  box-shadow: 0 0 10px color-mix(in oklab, var(--accent2) 7%, transparent);
  will-change: transform, opacity;
}

html body.home.homeRefinedV538.homeRefinedV539 #studioPanel2 .studioTileQuote .answerWriteText .premiumInkLive.isActive .inkWord{
  animation: none !important;
}

html body.home.homeRefinedV538.homeRefinedV539 #studioPanel2 .studioTileQuote .answerWriteText .premiumInkLive.isActive .inkWord::before{
  animation: praxoriaV539InkReveal var(--ink-dur, 320ms) cubic-bezier(.17,.78,.18,1) var(--ink-delay, 0ms) forwards;
}

html body.home.homeRefinedV538.homeRefinedV539 #studioPanel2 .studioTileQuote .answerWriteText .premiumInkLive.isActive .inkWord::after{
  animation: praxoriaV539PenGesture var(--ink-dur, 320ms) cubic-bezier(.2,.75,.18,1) var(--ink-delay, 0ms) forwards !important;
}

html body.home.homeRefinedV538.homeRefinedV539 #studioPanel2 .studioTileQuote .answerWriteText.isComplete .inkWord{
  opacity: 1 !important;
  color: transparent !important;
  clip-path: none !important;
  filter: none !important;
  transform: none !important;
}

html body.home.homeRefinedV538.homeRefinedV539 #studioPanel2 .studioTileQuote .answerWriteText.isComplete .inkWord::before{
  animation: none !important;
  opacity: 1;
  clip-path: inset(-.22em 0 -.28em 0 round .06em);
  filter: none;
  transform: none;
}

html body.home.homeRefinedV538.homeRefinedV539 #studioPanel2 .studioTileQuote .answerWriteText.isComplete .inkWord::after{
  animation: none !important;
  opacity: 0 !important;
}

@keyframes praxoriaV539InkReveal{
  0%{
    opacity: .44;
    clip-path: inset(-.22em 100% -.28em 0 round .06em);
    filter: blur(.36px) saturate(1.02);
    transform: translateY(.018em);
  }
  34%{
    opacity: .92;
    filter: blur(.18px) saturate(1.08);
  }
  72%{
    clip-path: inset(-.22em 8% -.28em 0 round .06em);
    filter: blur(.08px) saturate(1.04);
    transform: translateY(.004em);
  }
  100%{
    opacity: 1;
    clip-path: inset(-.22em 0 -.28em 0 round .06em);
    filter: blur(0) saturate(1);
    transform: translateY(0);
  }
}

@keyframes praxoriaV539PenGesture{
  0%{
    opacity: 0;
    transform: translateX(-56%) rotate(-9deg) scaleY(.78);
  }
  16%{
    opacity: .68;
  }
  46%{
    opacity: .46;
  }
  76%{
    opacity: .24;
  }
  100%{
    opacity: 0;
    transform: translateX(118%) rotate(-9deg) scaleY(.9);
  }
}

@media (prefers-reduced-motion: reduce){
  html body.home.homeRefinedV538.homeRefinedV539 #studioPanel2 .studioTileQuote .answerWriteText .premiumInkLive.isActive .inkWord::before,
  html body.home.homeRefinedV538.homeRefinedV539 #studioPanel2 .studioTileQuote .answerWriteText .premiumInkLive.isActive .inkWord::after{
    animation: none !important;
  }
  html body.home.homeRefinedV538.homeRefinedV539 #studioPanel2 .studioTileQuote .answerWriteText .inkWord::before{
    opacity: 1 !important;
    clip-path: inset(-.22em 0 -.28em 0 round .06em) !important;
    filter: none !important;
    transform: none !important;
  }
  html body.home.homeRefinedV538.homeRefinedV539 #studioPanel2 .studioTileQuote .answerWriteText .inkWord::after{
    opacity: 0 !important;
  }
}