/* ==========================================================================
   HERO — חלל כתיבה | נוצה שכותבת את הכותרת (חשיפה RTL) — נטען אחרי fx.css
   טקסט אמיתי וסמנטי · אנימציית חשיפה בוניל JS · גיבוי סטטי מלא
   ========================================================================== */

/* --- שכבת "אור-נייר" רכה מאחורי הכותרת --- */
.hero-write{position:relative;overflow:hidden}
.hero-write .paper-light{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-write .pl-glow{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);
  width:min(120vw,1080px);height:min(86vh,760px);
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(255,255,255,.92) 0%, rgba(248,242,250,.55) 40%,
    rgba(243,200,221,.16) 64%, transparent 78%);
  filter:blur(4px)}
.hero-write .pl-mist{position:absolute;inset:-12%;
  background:
    radial-gradient(28% 22% at 32% 40%, rgba(200,182,240,.14), transparent 70%),
    radial-gradient(24% 20% at 68% 56%, rgba(243,200,221,.14), transparent 70%),
    radial-gradient(20% 16% at 52% 30%, rgba(200,217,246,.10), transparent 72%);
  filter:blur(22px);animation:mistDrift 28s ease-in-out infinite alternate}
@keyframes mistDrift{from{transform:translate3d(-1.4%,0,0) scale(1)}to{transform:translate3d(2%,-1.4%,0) scale(1.05)}}

/* --- במה: הכותרת + הנוצה --- */
.hero-write .container{position:relative;z-index:1}
.write-stage{position:relative;display:inline-block;margin-inline:auto}
.hero-write .hero-h1{position:relative;display:inline-block;margin:0;white-space:nowrap;
  font-size:clamp(1.7rem,8.4vw,4.3rem);line-height:1.14}

/* מצב אנימציה (רק כשיש JS): הכותרת מתחילה מוסתרת, נחשפת מימין לשמאל */
html.js .hero-write .hero-h1{clip-path:inset(-14% -6% -14% 100%)}
html.js .hero-write.done .hero-h1{clip-path:inset(-14% -6% -14% 0)}

/* הנוצה */
.quill{position:absolute;top:0;left:0;width:clamp(50px,7.5vw,82px);opacity:0;z-index:3;
  pointer-events:none;transform-origin:30% 94%;
  transform:translate(-30%,-94%) rotate(8deg);will-change:transform,opacity,left,top}
.quill svg{width:100%;height:auto;display:block;filter:drop-shadow(0 7px 11px rgba(141,120,220,.30))}

/* שובל-דיו זוהר בקצה הכתיבה */
.ink-glow{position:absolute;top:0;left:0;width:30px;height:30px;border-radius:50%;opacity:0;z-index:2;
  pointer-events:none;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(216,140,190,.55) 0%, rgba(169,152,232,.28) 52%, transparent 72%);
  filter:blur(2px)}

/* שורות מתחת — נכנסות רק אחרי שהכתיבה מסתיימת */
html.js .hero-write .wline{opacity:0;transform:translateY(12px)}
.hero-write .wline{transition:opacity 1s ease, transform 1s ease}
html.js .hero-write.reveal-lines .wline{opacity:1;transform:none}
.hero-write .wline:nth-of-type(2){transition-delay:.12s}
.hero-write .wline:nth-of-type(3){transition-delay:.26s}
.hero-write .wline.hero-bridge{transition-delay:.52s}

/* מוח קטן — מחווה עדינה בין "בשיטת המוח הטבעי" להוק (אפוי לרקע הלבנדר) */
.hero-mini-brain{width:clamp(78px,12vw,120px);margin:3px auto;line-height:0}
.hero-mini-brain video{width:100%;height:auto;display:block;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 56%,transparent 82%);
  mask-image:radial-gradient(circle at 50% 50%,#000 56%,transparent 82%)}
.hero-write .wline.hero-mini-brain{transition-delay:.26s}
@media (max-width:680px){ .hero-mini-brain{width:clamp(64px,17vw,92px)} }

/* --- גיבוי: בלי JS → הכל גלוי מיד --- */
html:not(.js) .hero-write .hero-h1{clip-path:none}
html:not(.js) .hero-write .quill,html:not(.js) .hero-write .ink-glow{display:none}

/* --- reduced-motion: בלי אנימציה, Hero רגוע וסטטי --- */
@media (prefers-reduced-motion:reduce){
  html.js .hero-write .hero-h1{clip-path:none!important}
  html.js .hero-write .wline{opacity:1!important;transform:none!important;transition:none!important}
  .hero-write .pl-mist{animation:none!important}
  .hero-write .quill{animation:none!important}
}

/* --- מובייל --- */
@media (max-width:680px){
  .hero-write .hero-h1{font-size:clamp(1.6rem,9vw,2.6rem)}
  .quill{width:clamp(44px,12vw,60px)}
}