/* ============================================================
   scroll-world — DivineSites theme + RTL corrections

   The engine injects its own CSS inside `@layer sw`, so every rule
   here is unlayered and wins on cascade order alone — no specificity
   hacks, and the engine stays upgradable in place.

   Two jobs:
     1. brand tokens (the engine reads them as CSS custom properties)
     2. flip the physical left/right the engine hard-codes, because the
        page is Hebrew RTL and its copy belongs on the right
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Varela+Round&family=Assistant:wght@300;400;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root{
  /* page background matches the diorama stills' solid background, so a
     poster that has not painted yet is invisible against the page */
  --sw-bg:        #f4fafd;
  --sw-ink:       #1f3040;
  --sw-ink-soft:  #5c7183;   /* the AA-safe tone from the day page */
  --sw-accent:    #0288a2;
  --sw-font-display: "Varela Round", "Assistant", sans-serif;
  --sw-font-body:    "Assistant", "Segoe UI", sans-serif;

  --brand-teal:  #0288a2;
  --brand-gold:  #f4c345;
  --brand-coral: #f16a55;
  --brand-slate: #283947;
}

html, body{ margin:0; background:var(--sw-bg); }
body{ font-family:var(--sw-font-body); }

/* ---------- RTL corrections ---------- */

/* Copy pins to the reading edge. In Hebrew that is the right. */
.sw-copy{
  left:auto;
  right:clamp(18px,5vw,64px);
  text-align:right;
}

/* The copy scrim is a one-way gradient: opaque under the text, fading to
   clear across the frame. The engine anchors it left and runs it 90deg for
   LTR — with the copy moved right that left a hard vertical edge down the
   middle of the picture. Anchor right, run it the other way. */
.sw-copylayer::before{
  left:auto; right:0;
  background:linear-gradient(270deg,
    var(--sw-bg) 0%,
    color-mix(in srgb, var(--sw-bg) 82%, transparent) 34%,
    color-mix(in srgb, var(--sw-bg) 40%, transparent) 62%,
    transparent 100%);
}

/* The route rail moves to the opposite edge from the copy. */
.sw-route{ right:auto; left:clamp(14px,2.4vw,30px); }
/* Its hover label then has to grow the other way too. */
.sw-route__label{
  right:auto; left:24px;
  transform:translateY(-50%) translateX(-6px);
}
.sw-route__dot:hover .sw-route__label,
.sw-route__dot:focus-visible .sw-route__label{
  transform:translateY(-50%) translateX(0);
}

@media (max-width:860px){
  /* the engine's own mobile rule re-pins copy to both edges — restore
     right-alignment after it, since ours is the later rule */
  .sw-copy{ left:clamp(18px,5vw,64px); right:clamp(18px,5vw,64px); text-align:right; }
  .sw-route{ left:6px; right:auto; }
}

/* ---------- Hebrew typography corrections ---------- */

/* The engine uppercases and widely tracks its small labels — a Latin
   idiom. Hebrew has no case, and above ~.12em the words stop reading
   as words (same finding as the two sibling pages). */
.sw-hint,
.sw-copy .sw-copy__eyebrow,
.sw-eyebrow{
  text-transform:none;
  letter-spacing:.08em;
}
.sw-copy h2, .sw-copy__title{ letter-spacing:-.01em; }

/* Latin-suffixed numerals inside Hebrew need their own direction or
   bidi reorders "70+" into "+70". */
.ltr{ direction:ltr; unicode-bidi:isolate; display:inline-block; }

/* ---------- brand chrome ---------- */

.sw-topcta{
  background:var(--brand-coral);
  color:#fff;
  border-radius:999px;
  padding:10px 20px;
  font-weight:600;
}

/* A quiet way back to the two sibling pages, since this world is a
   standalone landing rather than part of their nav. */
.world-exits{
  position:fixed; z-index:55;
  inset-inline-end:clamp(14px,2.4vw,30px);
  bottom:clamp(14px,2.4vw,26px);
  display:flex; gap:8px;
  font-family:var(--sw-font-body); font-size:13px;
}
.world-exits a{
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(31,48,64,.12);
  border-radius:999px; padding:8px 15px;
  color:var(--sw-ink); text-decoration:none;
  backdrop-filter:blur(8px);
  transition:background .3s, transform .3s, border-color .3s;
}
.world-exits a:hover{
  background:#fff; transform:translateY(-2px);
  border-color:rgba(31,48,64,.24);
}
/* `display:flex` above beats the UA stylesheet's `[hidden]{display:none}`, so
   the attribute needs saying again here or the pills show up regardless. */
.world-exits[hidden]{ display:none; }

@media (max-width:860px){ .world-exits{ display:none; } }

@media (prefers-reduced-motion: reduce){
  .world-exits a{ transition:none; }
}

/* ============================================================
   Closing panel + contact form

   The engine's layers are all position:fixed — sky 0, stage 10, copy 20,
   hint 30, route 40, topbar 50, progress bar 60. This panel is in normal
   flow after the scroll track, so without a stacking order of its own the
   fixed scene would show straight through it.

   z-index 45 puts it over the picture, the copy and the route rail, and
   deliberately under the topbar and the progress bar — those stay usable
   while the visitor fills the form, which is also how they get back up.
   ============================================================ */

.contact{
  position:relative; z-index:45;
  background:var(--sw-bg);
  border-top:1px solid color-mix(in srgb, var(--sw-ink) 10%, transparent);
  padding:clamp(60px,10vh,120px) clamp(20px,5vw,64px) clamp(80px,12vh,140px);
}
.contact__inner{ max-width:640px; margin:0 auto; text-align:center; }

.contact__eyebrow{
  display:block; font-family:var(--sw-font-body);
  font-size:.8rem; letter-spacing:.08em; color:var(--sw-accent); font-weight:600;
}
.contact__title{
  font-family:var(--sw-font-display); font-weight:700;
  font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.08; letter-spacing:-.01em;
  color:var(--sw-ink); margin:10px 0 0;
}
.contact__lead{
  margin:16px auto 0; max-width:46ch;
  font-size:clamp(1rem,1.2vw,1.1rem); line-height:1.6; color:var(--sw-ink-soft);
}

/* Two columns on desktop so name and phone — the only required pair —
   sit on one line and the form reads as short. */
.cform{
  margin-top:clamp(28px,4vh,44px);
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  text-align:right;
}
.field--wide{ grid-column:1 / -1; }

/* Floating label. The empty `placeholder=" "` in the markup is what makes
   :placeholder-shown true only while the field is genuinely empty. */
.field{ position:relative; }
.field input, .field textarea{
  width:100%; box-sizing:border-box;
  font:400 1rem/1.5 var(--sw-font-body); color:var(--sw-ink);
  background:#fff;
  border:1px solid color-mix(in srgb, var(--sw-ink) 16%, transparent);
  border-radius:12px; padding:22px 15px 9px;
  transition:border-color .2s, box-shadow .2s;
}
.field textarea{ resize:vertical; min-height:92px; }
.field label{
  position:absolute; inset-inline-start:15px; top:8px;
  font-size:.72rem; color:var(--sw-ink-soft);
  pointer-events:none; transition:top .16s, font-size .16s, color .16s;
}
.field input:placeholder-shown + label,
.field textarea:placeholder-shown + label{ top:15px; font-size:.95rem; }
.field input:focus + label,
.field textarea:focus + label{ top:8px; font-size:.72rem; color:var(--sw-accent); }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--sw-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--sw-accent) 18%, transparent);
}
/* contact.js puts this on the wrapper of any field that failed validation. */
.field.is-bad input, .field.is-bad textarea{ border-color:var(--brand-coral); }

.cform__btn{
  grid-column:1 / -1;
  font:600 1.02rem var(--sw-font-body); color:#fff;
  background:var(--brand-coral); border:0; border-radius:999px;
  padding:15px 24px; cursor:pointer;
  transition:transform .2s, box-shadow .2s, opacity .2s;
}
.cform__btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px color-mix(in srgb, var(--brand-coral) 34%, transparent); }
.cform__btn:disabled{ opacity:.55; cursor:progress; transform:none; box-shadow:none; }

/* `form__note`, not `cform__note`: contact.js replaces the element's whole
   className when it reports a result, and it writes that name. Styling the
   `c`-prefixed one meant the status line lost its colours on first submit. */
.form__note{
  grid-column:1 / -1; margin:0; min-height:1.3em; text-align:center;
  font-size:.9rem; color:var(--sw-ink-soft);
}
/* --sw-accent is the teal; against #f4fafd it measures 4.6:1. The coral at
   this size does not clear AA, so failures use the darker ink variant. */
.form__note.is-ok{ color:var(--sw-accent); }
.form__note.is-bad{ color:#c04a35; }

/* Honeypot: off-screen, not display:none — the cruder bots skip fields they
   can tell are hidden, and this one has to look ordinary to them. */
.hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

.contact__direct{
  margin:clamp(22px,3vh,32px) 0 0;
  font-size:.94rem; color:var(--sw-ink-soft);
}
.contact__direct a{ color:var(--sw-ink); text-decoration:underline; text-underline-offset:3px; }

@media (max-width:640px){
  .cform{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  .cform__btn, .field input, .field textarea, .field label{ transition:none; }
  .cform__btn:hover{ transform:none; }
}