/* ==========================================================
   סיקווגל · קו החתימה של ShovalGA
   מתכון שני הקווים מדף הנחיתה: פס לבן שקוף עבה, ולידו קו כהה דק מוסט.
   כל הכיוונון יושב במשתנים למטה, ונערך חי דרך ?sqedit.
   ========================================================== */
:root{
  --sq-h:72px;      /* גובה הקו. נמוך יותר = פחות גלי, יותר מתוח */
  --sq-mt:-24px;    /* מרווח מלמעלה. ערך שלילי מקרב לתוכן שמעל */
  --sq-mb:-16px;    /* מרווח מלמטה */
  --sq-w:100vw;     /* רוחב הקו, ביחס לרוחב המסך. 100vw = מקצה לקצה */
  --sq-white:5;     /* עובי הפס הלבן */
  --sq-ink:1.6;     /* עובי הקו הכהה */
  --sq-rot:7.5deg;  /* זווית. ערך חיובי מגביר את הנטייה למעלה בצד הגבוה */
  --sq-color:#0D0A0A;   /* צבע הקו הכהה. בדרך כלל --ink של הדף */
}
.squig{
  width:var(--sq-w);
  max-width:none;
  /* מקצה לקצה של המסך: הקו יוצא מהריפוד של הדף ונשאר ממורכז למסך.
     עובד גם כשההורה הוא בלוק רגיל וגם כשהוא flex עם align-items:center */
  margin:var(--sq-mt) calc(50% - var(--sq-w) / 2) var(--sq-mb);
  line-height:0;
  transform:rotate(calc(-1 * var(--sq-rot)));
}
/* הקו שהצד השמאלי שלו גבוה מקבל את הזווית ההפוכה, שהנטייה תישאר סימטרית */
.squig[data-squig="b"]{transform:rotate(var(--sq-rot))}

.squig svg{display:block;width:100%;height:var(--sq-h);overflow:visible}
.squig path{fill:none;stroke-linecap:round}
.squig .sq-white{stroke:rgba(255,255,255,.7);stroke-width:var(--sq-white)}
.squig .sq-ink{stroke:var(--sq-color);stroke-width:var(--sq-ink)}

/* הקו נמשך לכיוון שלו כשמגיעים אליו בגלילה.
   --len מחושב ב JS בפיקסלים אמיתיים, ראו squig.js */
.squig.draw path{
  stroke-dasharray:var(--len) var(--len);
  stroke-dashoffset:var(--len);
}
.squig.draw.is-in path{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.15s cubic-bezier(.42,0,.28,1);
}
@media (prefers-reduced-motion:reduce){
  .squig.draw path{stroke-dasharray:none;stroke-dashoffset:0}
}
/* בעורך החי מכבים את ההנפשה. אחרת כל הזזת פס תופסת את הקו באמצע המשיכה
   והוא נראה מקוטע, במקום להראות את התוצאה הסופית */
body.sqedit-on .squig.draw path{
  stroke-dasharray:none !important;
  stroke-dashoffset:0 !important;
  transition:none !important;
}

/* הנטייה מוציאה את קצוות הקו כעשרה פיקסלים מעבר לרוחב המסך.
   בלי החסימה הזאת נפתחת גלילה אופקית קטנה, והתוכן זז בטלפון */
html{overflow-x:clip}
body{overflow-x:hidden}