/* letter.css: the open letters (free-from-the-loop.html and -en), on the same "portal" layer as the main page.
   Load order: the page's inline <style>, then portal.css, then this file. Logical properties keep it
   working in both directions (Hebrew RTL, English LTR). */

body{ font-family:var(--sans); }
.band p, .voice-card p, .step p{ color:var(--text2); }

/* ---------- reveal: content stays visible if the script never runs ---------- */
.rv{ opacity:1; transform:none; transition:opacity .7s var(--ease-soft), transform .7s var(--ease-soft); }
.reveal-ready .rv:not(.in){ opacity:0; transform:translateY(22px); }

/* ---------- hero ---------- */
.hero{ background:radial-gradient(ellipse 70% 50% at 50% -8%, rgb(209 52 56 / .07) 0%, transparent 70%), var(--canvas); }
.hero .kicker{ margin-bottom:1.4rem; }
.hero h1{ color:var(--ink); letter-spacing:-.025em; }
.hero p.lede{ color:var(--text2); }
/* the time, circled in red pen */
.circled{ position:relative; display:inline-block; direction:ltr; unicode-bidi:isolate; }
.circled .circle{ position:absolute; left:-9%; top:-24%; width:118%; height:148%; overflow:visible; pointer-events:none; }
[dir="ltr"] .circled .circle{ left:-15%; width:130%; }          /* "7:40" is shorter than "19:40" */
.circled .circle path{ fill:none; stroke:var(--red); stroke-width:3.2; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:100; animation:draw-mark 1.2s .6s cubic-bezier(.6,.1,.3,1) forwards; }
.scroll-hint::after{ background:linear-gradient(var(--red2), transparent); }

/* ---------- bands: canvas and white take turns; the "black work" band is night ---------- */
.band{ border:0!important; }
.band.b1, .band.b4{ background:#fff; }
.band.b3, .band.b5{ background:var(--canvas); }
.band.b2.band-night p{ color:rgb(255 255 255 / .74); }
.band.b2.band-night p strong{ color:#fff; }
.band.b2.band-night .whisper{ color:rgb(255 255 255 / .56); }

/* ---------- step marker: a 6-part progress bar, then the step name ----------
   --n = how many parts are filled (b1=1 ... b5=5, dawn=6) */
.b1{ --n:1; } .b2{ --n:2; } .b3{ --n:3; } .b4{ --n:4; } .b5{ --n:5; } .dawn{ --n:6; }
.band .eyebrow, .dawn .eyebrow{
  display:flex; align-items:center; flex-wrap:wrap; gap:.4rem .85rem; width:auto;
  background:none!important; border:0!important; padding:0; border-radius:0; margin-bottom:1.3rem;
  font-size:1rem; font-weight:500; letter-spacing:0; color:var(--text3)!important; }
.band .eyebrow::before, .dawn .eyebrow::before{
  content:""; flex:none; width:7.5rem; height:.42rem; border-radius:0;
  --fill:var(--blue); --rest:var(--border2);
  background:linear-gradient(var(--fill), var(--fill)) no-repeat 100% 0 / calc(var(--n) * 100% / 6) 100%, var(--rest);
  -webkit-mask:repeating-linear-gradient(to left, #000 0 calc(16.6667% - 4px), transparent 0 16.6667%);
          mask:repeating-linear-gradient(to left, #000 0 calc(16.6667% - 4px), transparent 0 16.6667%); }
[dir="ltr"] .band .eyebrow::before, [dir="ltr"] .dawn .eyebrow::before{
  background-position:0 0;
  -webkit-mask:repeating-linear-gradient(to right, #000 0 calc(16.6667% - 4px), transparent 0 16.6667%);
          mask:repeating-linear-gradient(to right, #000 0 calc(16.6667% - 4px), transparent 0 16.6667%); }
.eyebrow b{ color:var(--ink); font-weight:800; }
.band-night .eyebrow::before{ --fill:#4da3f0; --rest:rgb(255 255 255 / .16); }
.band-night .eyebrow b{ color:#fff; }
.dawn .eyebrow::before{ --fill:var(--green); }                       /* last step: the bar is full, and green */

/* ---------- headings and quotes ---------- */
h2{ color:var(--ink); letter-spacing:-.02em; }
.pull{ background:none; border:0; border-inline-start:3px solid var(--blue); border-radius:0;
  padding-block:.2rem; padding-inline:1.3rem 0; color:var(--ink); }
.dawn .pull{ background:none; border-inline-start-color:var(--orange); color:var(--ink); }

/* ---------- the voices: each one is a thought bubble ---------- */
.voice-card{ border:1px solid var(--border); border-radius:1.2rem; box-shadow:0 1px 2px rgb(10 30 60 / .04); }
.voice-card::before{ display:none; }
.vtag{ display:block; background:none; border:0; padding:0; border-radius:0; margin-bottom:.7rem;
  font-size:.92rem; font-weight:800; letter-spacing:0; color:var(--red2); }
.voice{ display:inline-block; max-width:100%; background:#fbefef; border:1px solid rgb(209 52 56 / .16);
  border-radius:1.2rem; border-end-start-radius:.3rem; padding:.7rem 1.15rem; margin-bottom:1.2rem; color:var(--ink); }
.mirror{ border-radius:.9rem; background:rgb(0 120 212 / .06); border-color:rgb(0 120 212 / .18); }

/* ---------- ladder and safety rail ---------- */
.step h3 span{ font-size:.86rem; letter-spacing:0; }
.step::before{ background:#fff; }
.rails{ border-radius:1rem; }

/* ---------- dawn: the page ends in morning light ---------- */
.dawn{ border:0;
  background:radial-gradient(ellipse 85% 55% at 50% 0%, rgb(224 134 0 / .16) 0%, transparent 60%),
             linear-gradient(180deg, #fbf1e1 0%, var(--canvas) 55%, var(--canvas) 100%); }
.dawn p{ margin-bottom:1.2rem; color:var(--text2); }
.dawn p.soft{ margin-bottom:.7rem; color:var(--text3); }
.cta.btn-primary{ margin:1.8rem 0 1rem; font-size:1.12rem; }
.soft a{ color:var(--blue); font-weight:700; }

/* ---------- small bits ---------- */
.counter{ font-family:var(--sans); background:rgb(255 255 255 / .94); border-color:var(--border); }
.step code,.band code{ font-family:ui-monospace,'Cascadia Mono','Consolas',monospace; }

/* phones: Heebo is wider than the old font, so the header row (logo, language, menu) needs to tighten */
@media(max-width:520px){
  .nav-inner{ padding:0 1rem; gap:.35rem; }
  .nav-logo{ font-size:1.22rem; }
  .lang-toggle{ margin-inline:.1rem; }
  .lang-toggle a{ padding:.25rem .5rem; }
}
@media(max-width:400px){ .lang-toggle a svg{ display:none; } }
@media(max-width:520px){ .counter{ font-size:.76rem; line-height:1.45; padding:.45em .95em; bottom:10px; inset-inline-start:10px; max-width:min(78vw,290px); } }

@media (prefers-reduced-motion:reduce){
  .reveal-ready .rv:not(.in){ opacity:1; transform:none; }
  .rv{ transition:none; }
  .circled .circle path{ animation:none; stroke-dashoffset:0; }
}