/* Amit Compass Section · "בסערה מטילים עוגנים"
   Everything is scoped under .amc so the theme's styles stay untouched.
   Colours and fonts can be changed through the variables below (e.g. in Appearance > Customize > Additional CSS). */

.amc{
  --amc-ink:#0A161D;
  --amc-ink2:#3C4E56;
  --amc-accent:#B0156C;
  --amc-paper:#F4F1EA;
  --amc-font:"Heebo","Assistant","Arial Hebrew",system-ui,sans-serif;
  --amc-ease:cubic-bezier(.23,1,.32,1);
  --amc-spring:cubic-bezier(.34,1.45,.64,1);
  position:relative;
  height:290vh;
  height:290svh;
  color:var(--amc-ink);
  font-family:var(--amc-font);
  direction:rtl;
  text-align:right;
}
.amc *,.amc *::before,.amc *::after{box-sizing:border-box}
.amc h2,.amc h3,.amc p{margin:0;padding:0;font-family:var(--amc-font);color:inherit;text-transform:none;border:0;background:none}

.amc .amc-stick{position:sticky;top:var(--amc-top,0px);height:calc(100vh - var(--amc-top,0px));height:calc(100svh - var(--amc-top,0px));display:flex;align-items:center;overflow:hidden}
.amc .amc-in{width:100%;max-width:1280px;margin-inline:auto;padding-inline:clamp(18px,4vw,64px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,100px);align-items:center}

.amc .amc-h{font-size:clamp(40px,5.2vw,80px);font-weight:800;line-height:1;letter-spacing:-.035em;max-width:11ch;text-wrap:balance}
.amc .amc-lead{margin-top:20px;font-size:clamp(18px,1.5vw,22px);line-height:1.55;max-width:30rem}

.amc .amc-ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* the compass */
.amc .amc-rose{width:min(100%,560px,74vh);width:min(100%,560px,74svh);justify-self:center;aspect-ratio:544/460}
.amc .amc-rose svg{width:100%;height:100%;display:block;overflow:visible}
.amc .amc-ring{fill:none;stroke:var(--amc-ink)}
.amc .amc-tick{stroke:var(--amc-ink)}
.amc .amc-lt{fill:var(--amc-paper);stroke:var(--amc-ink);stroke-width:.8}
.amc .amc-dk{fill:var(--amc-ink);stroke:var(--amc-ink);stroke-width:.8}
.amc .amc-md{fill:var(--amc-ink);fill-opacity:.55;stroke:var(--amc-ink);stroke-width:.8}
.amc .amc-pt{cursor:pointer}
.amc .amc-pt text{font:800 19px var(--amc-font);fill:var(--amc-ink);fill-opacity:.45;transition:fill .35s ease,fill-opacity .35s ease}
.amc .amc-pt:hover text,.amc .amc-pt:focus-visible text{fill-opacity:1}
.amc .amc-pt.is-on text{fill:var(--amc-accent);fill-opacity:1}
.amc .amc-pt:focus{outline:none}
.amc .amc-hit{fill:transparent}
.amc .amc-needle{transition:transform 1.1s var(--amc-spring);transform-origin:200px 200px}
.amc .amc-needle .amc-n1{fill:var(--amc-accent)}
.amc .amc-needle .amc-n2{fill:var(--amc-ink);fill-opacity:.8}
.amc .amc-needle .amc-hub{fill:var(--amc-paper);stroke:var(--amc-ink);stroke-width:1.5}
.amc .amc-needle .amc-pin{fill:var(--amc-accent)}
.amc .amc-bezel{transform-origin:200px 200px;animation:amc-breathe 9s ease-in-out infinite}
@keyframes amc-breathe{50%{transform:rotate(1.2deg)}}

/* the text that changes with the needle */
.amc .amc-panel{position:relative;margin-top:clamp(28px,4vh,48px);min-height:230px}
.amc .amc-pane{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(14px);filter:blur(4px);transition:opacity .5s ease,transform .7s var(--amc-ease),filter .5s ease;pointer-events:none}
.amc .amc-pane.is-on{position:relative;opacity:1;transform:none;filter:none;pointer-events:auto}
.amc .amc-pic{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--amc-ink);color:var(--amc-accent);margin-bottom:16px}
.amc .amc-pic .amc-ic{width:26px;height:26px}
.amc .amc-t{font-size:clamp(26px,2.6vw,38px);font-weight:800;line-height:1.08;letter-spacing:-.02em}
.amc .amc-p{margin-top:12px;font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:var(--amc-ink2);max-width:30rem}

/* arrows and dots */
.amc .amc-nav{display:flex;align-items:center;gap:12px;margin-top:24px}
.amc .amc-nav button{appearance:none;-webkit-appearance:none;display:grid;place-items:center;width:50px;height:50px;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:inset 0 0 0 2px var(--amc-ink);color:var(--amc-ink);cursor:pointer;line-height:1;text-transform:none;transition:background-color .2s,color .2s,transform 160ms var(--amc-ease)}
.amc .amc-nav button .amc-ic{width:22px;height:22px;stroke-width:2}
@media (hover:hover) and (pointer:fine){.amc .amc-nav button:hover{background:var(--amc-ink);color:var(--amc-paper)}}
.amc .amc-nav button:active{transform:scale(.95)}
.amc .amc-nav button:focus-visible,.amc .amc-pt:focus-visible{outline:2px solid var(--amc-accent);outline-offset:3px}
.amc .amc-dots{display:flex;gap:8px;margin-inline-start:8px}
.amc .amc-dots i{display:block;width:8px;height:8px;border-radius:50%;background:var(--amc-ink);opacity:.2;transition:background .3s,opacity .3s,transform .3s}
.amc .amc-dots i.is-on{background:var(--amc-accent);opacity:1;transform:scale(1.25)}

/* phones: heading, compass, then the text, all on one screen */
@media (max-width:860px){
  .amc .amc-in{grid-template-columns:minmax(0,1fr);gap:8px;align-content:center;padding-top:24px}
  .amc .amc-text{display:contents}
  .amc .amc-h{order:1;font-size:clamp(32px,8.6vw,44px);max-width:none}
  .amc .amc-lead{order:2;font-size:16px;margin-top:8px}
  .amc .amc-rose{order:3;width:min(100%,46vh);width:min(100%,46svh);margin-block:4px}
  .amc .amc-panel{order:4;margin-top:0;min-height:150px}
  .amc .amc-pic{display:none}
  .amc .amc-t{font-size:24px}
  .amc .amc-p{font-size:16px;margin-top:6px;line-height:1.5}
  .amc .amc-nav{order:5;margin-top:10px}
  .amc .amc-nav button{width:44px;height:44px}
}
@media (max-width:860px) and (max-height:760px){
  .amc .amc-lead{display:none}
  .amc .amc-rose{width:min(100%,40vh);width:min(100%,40svh)}
}

/* if the theme prevents pinning (a parent with overflow), the section shows as a normal block driven by clicks */
.amc.amc--static{height:auto}
.amc.amc--static .amc-stick{position:relative;top:auto;height:auto;padding-block:clamp(64px,8vw,120px)}

@media (prefers-reduced-motion:reduce){
  .amc .amc-needle,.amc .amc-pane{transition:none}
  .amc .amc-bezel{animation:none}
}