/* ==========================================================================
   home-soon.html · דף בית זמני של sapir-sabag.co.il (יונתן, 3.10.26, סבב 13)
   נטען אחרי lp360.css ומשתמש בטוקנים שלו. מסך אחד: וורדמרק, יהלום עם חמשת הצירים, כותרת, פוטר.
   ========================================================================== */
.soon-page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: var(--bg-dark); }
.soon { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px var(--gutter) 40px; }
.soon__top .logo { margin-inline: auto; }
.soon__center { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block: 32px 8px; width: 100%; }
/* הבמה: היהלום במרכז, חמשת הצירים סביבו במיקומים של שיטת היהלום (01 ימין-עליון, 02 שמאל-עליון, 03 שמאל, 04 למטה, 05 ימין) */
.soon__stage { position: relative; width: min(80vw, 300px); aspect-ratio: 1; }
.soon__dia { position: absolute; left: 22%; top: 21%; width: 56%; height: auto; overflow: visible; }
.soon__ax { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; display: grid; place-items: center; }
.soon__ax img { width: 24px; height: 24px; display: block; opacity: .85; }
.soon__ax--01 { left: 76%; top: 10%; }
.soon__ax--02 { left: 24%; top: 10%; }
.soon__ax--03 { left: 6%; top: 48%; }
.soon__ax--04 { left: 50%; top: 94%; }
.soon__ax--05 { left: 94%; top: 48%; }
.soon__title { margin-top: 36px; font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-semibold); color: var(--text-on-dark); text-wrap: balance; }
.soon-page .foot { flex: none; }
@media (min-width: 768px) {
  .soon { padding-top: 40px; }
  .soon__stage { width: 380px; }
  .soon__ax { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
  .soon__ax img { width: 30px; height: 30px; }
  .soon__title { margin-top: 44px; }
}
/* 1200+: the H1 token itself (book 5.2: 64/110%) */

/* תנועה (כיוון A): כניסה רגועה כמו ההירו, ואז חיים שקטים בלולאה איטית.
   הצירים מרחפים (6-8 שניות, לא מסונכרנים) ונדלקים אחד אחרי השני בסדר השיטה (מחזור של 10 שניות).
   רק opacity ו-transform, רק כשה-head סימן hero-motion (JS ובלי reduced-motion), ורק אחרי שער הגופנים. */
.soon__dia .f { transform-box: fill-box; transform-origin: center; }
@keyframes soon-facet { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
@keyframes soon-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -6px, 0); } }
@keyframes soon-glow { 0%, 22%, 100% { opacity: .55; transform: none; } 8%, 14% { opacity: 1; transform: scale(1.14); } }
html.hero-motion:not(.fonts-wait) .soon__top { animation: hero-fade 600ms var(--ease-calm) 0ms both; }
html.hero-motion:not(.fonts-wait) .soon__dia .f { animation: soon-facet 620ms var(--ease-calm) calc(200ms + var(--i) * 70ms) both; }
html.hero-motion:not(.fonts-wait) .soon__title { animation: hero-up var(--rv-dur) var(--ease-calm) 420ms both; }
html.hero-motion:not(.fonts-wait) .soon__ax {
  animation: hero-fade 700ms var(--ease-calm) calc(1000ms + var(--k) * 110ms) both,
             soon-float calc(6400ms + var(--k) * 400ms) ease-in-out calc(var(--k) * -1300ms) infinite;
}
html.hero-motion:not(.fonts-wait) .soon__ax img { animation: soon-glow 10s ease-in-out calc(1800ms + var(--k) * 2s) infinite both; }
@media (prefers-reduced-motion: reduce) {
  html.hero-motion .soon__top, html.hero-motion .soon__title, html.hero-motion .soon__dia .f,
  html.hero-motion .soon__ax, html.hero-motion .soon__ax img { animation: none !important; }
}
/* הוורדמרק כבר בראש המסך: בפוטר של הדף הזה רק הקישורים וזכויות היוצרים */
.soon-page .foot .logo { display: none; }
.soon-page .foot { padding-block: 24px 28px; }

/* שתי הקוביות מתחת לכותרת (יונתן, DESIGN 2.2, 20.10.26). הערכים מ-design/mock/home.css, בלי ערך חדש: האריח של 360
   (.tile + .facet-box, מילוי wine-800), קו השדה הכהה כקצה (3:1 למשטח לחיץ), ערך הריחוף של השדה, הלחיצה של .btn. */
.soon__tiles { list-style: none; margin: 40px 0 0; padding: 0; width: 100%; max-width: 760px; display: grid; gap: var(--space-tiles); }
@media (min-width: 768px) { .soon__tiles { grid-template-columns: 1fr 1fr; margin-top: 48px; } }
@media (min-width: 1200px) { .soon__tiles { margin-top: 56px; } }
.soon__tile { display: block; height: 100%; text-decoration: none; color: var(--text-on-dark); border-radius: 16px; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-press); }
.soon__tile .tile { --box-stroke: var(--border-field-dark); height: 100%; padding: 28px 24px; gap: 0; justify-items: center; text-align: center; transition: none; }
.soon__tile .tile::before, .soon__tile .tile::after { transition: background-color var(--dur-fast) ease; }
.soon__tile .ic { width: 40px; height: 40px; }
.soon__tile-t { margin-top: 16px; font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); text-wrap: balance; }
.soon__tile-p { margin-top: 8px; max-width: 22em; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-on-dark); text-wrap: pretty; }
.soon__tile-go { margin-top: 20px; font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-medium); color: var(--text-accent-on-dark); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.soon__tile:active { transform: scale(.98); }
.soon__tile:focus-visible { outline: 2px solid var(--state-focus-dark); outline-offset: 4px; }
@media (min-width: 1200px) { .soon__tile .tile { padding: 32px 32px 36px; } }
@media (prefers-reduced-motion: reduce) { .soon__tile, .soon__tile:active { transition: none; transform: none; } }
.soon__line { display: block; }
/* the two-sentence title only (DESIGN 2.1): 28 under 768, so "בינתיים," never stays alone; the one-line title keeps its size */
@media (max-width: 767px) { .soon__title--two { font-size: var(--fs-h2); line-height: var(--lh-h2); } }
@media (hover: hover) { .soon__tile:hover .tile { --box-stroke: #A7808B; --box-fill: var(--wine-700); } }
/* קוביה אחת (הדף של הקורס עוד לא פורסם): באמצע, ברוחב של קוביה */
.soon__tiles--one { grid-template-columns: minmax(0, 370px); justify-content: center; }
/* כניסה עם הכותרת: על ה-li, כדי שה-scale של הלחיצה על הקישור לא יידרס */
html.hero-motion:not(.fonts-wait) .soon__tiles > li { animation: hero-up var(--rv-dur) var(--ease-calm) calc(520ms + var(--k, 0) * 80ms) both; }
.soon__tiles > li:nth-child(2) { --k: 1; }
@media (prefers-reduced-motion: reduce) { html.hero-motion .soon__tiles > li { animation: none !important; } }

/* מסך אחד בכל גובה נפוץ (גיא 21.10.26: "היהלום של בקרוב מייצר גלילה סתם"). אותה שפה, רק המידות: המרווחים של ההירו
   יורדים בקו ישר עם גובה המסך (מ-720 עד 900 בדסקטופ, מ-740 עד 932 בטלפון), והיהלום מקבל את מה שנשאר מהגובה, בין מינימום
   למקסימום. מה שנשאר = הגובה פחות כל השאר: הוורדמרק, המרווחים, הכותרת, הקוביות והפוטר (גבהים קבועים, נמדדו). כבוי = קוביה
   אחת וכותרת בשורה אחת; דלוק = שתי קוביות וכותרת בשתי שורות. אם התוכן עצמו ארוך מהמסך (שתי קוביות בטלפון), היהלום יורד
   למינימום והגלילה היא בגלל התוכן בלבד. */
.soon-page {
  --fit-rest: 95px;   /* הוורדמרק 13 + הפוטר 70 + הריפוד התחתון של המרכז 8 + 4 ביטחון */
  --fit-title: 40px;
  --fit-tiles: 233px;
  --fit-p1: clamp(20px, calc(20px + (100svh - 740px) * 8 / 192), 28px);   /* מעל הוורדמרק */
  --fit-p2: clamp(12px, calc(12px + (100svh - 740px) * 20 / 192), 32px);  /* בין הוורדמרק ליהלום */
  --fit-p3: clamp(24px, calc(24px + (100svh - 740px) * 12 / 192), 36px);  /* מעל הכותרת */
  --fit-p4: clamp(24px, calc(24px + (100svh - 740px) * 16 / 192), 40px);  /* מעל הקוביות */
  --fit-p5: clamp(16px, calc(16px + (100svh - 740px) * 24 / 192), 40px);  /* מתחת לקוביות */
  --fit-min: 150px;
  --fit-max: 300px;
}
.soon-page:has(.soon__title--two) { --fit-title: 67px; }
.soon-page:has(.soon__tiles:not(.soon__tiles--one)) { --fit-tiles: 486px; }
.soon-page:not(:has(.soon__tiles)) { --fit-tiles: 0px; --fit-p4: 0px; }
@media (min-width: 768px) {
  .soon-page {
    --fit-rest: 101px; /* הוורדמרק 19 + הפוטר 70 + 8 + 4 */
    --fit-title: 63px;
    --fit-tiles: 257px;
    --fit-p1: clamp(20px, calc(20px + (100svh - 720px) * 20 / 180), 40px);
    --fit-p2: clamp(8px, calc(8px + (100svh - 720px) * 24 / 180), 32px);
    --fit-p3: clamp(20px, calc(20px + (100svh - 720px) * 24 / 180), 44px);
    --fit-p4: clamp(24px, calc(24px + (100svh - 720px) * 32 / 180), 56px);
    --fit-p5: clamp(16px, calc(16px + (100svh - 720px) * 24 / 180), 40px);
    --fit-min: 150px;
    --fit-max: 380px;
  }
  .soon-page:has(.soon__title--two) { --fit-title: 125px; }
  .soon-page:has(.soon__tiles:not(.soon__tiles--one)) { --fit-tiles: 257px; } /* שתיהן באותה שורה */
  .soon-page:not(:has(.soon__tiles)) { --fit-tiles: 0px; --fit-p4: 0px; }
}
.soon { padding-top: var(--fit-p1); padding-bottom: var(--fit-p5); }
.soon__center { padding-block: var(--fit-p2) 8px; }
.soon__title { margin-top: var(--fit-p3); }
.soon__tiles { margin-top: var(--fit-p4); }
.soon__stage {
  width: min(80vw, clamp(var(--fit-min), calc(100svh - var(--fit-rest) - var(--fit-p1) - var(--fit-p2) - var(--fit-p3) - var(--fit-title) - var(--fit-p4) - var(--fit-tiles) - var(--fit-p5)), var(--fit-max)));
}
@supports not (height: 1svh) {
  .soon__stage { width: min(80vw, clamp(var(--fit-min), calc(100vh - var(--fit-rest) - var(--fit-p1) - var(--fit-p2) - var(--fit-p3) - var(--fit-title) - var(--fit-p4) - var(--fit-tiles) - var(--fit-p5)), var(--fit-max))); }
}