/* Home page motion (Maayan, 19 Oct 2026; approved by Yosef). Subtle, one prominent motion at a time.
   Every animation sits inside prefers-reduced-motion: no-preference; with "reduce" the page is static.
   html.mo-off = the visitor pressed the pause button (#mo-pause): ring and blink stop, everything shows at once.
   Order on load: example questions fade in (about 1.4s), then the ring light (3 slow turns, then it rests). */

/* ---------- static parts (both modes) ---------- */
.hero .talk{display:flex;flex-direction:column;align-items:center;width:100%}
.mo-pause{position:absolute;z-index:2;bottom:16px;inset-inline-start:20px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--muted-foreground);background:var(--paper);border:1px solid var(--border)}
.mo-pause:hover{color:var(--foreground);background:var(--muted)}
.mo-pause svg{width:14px;height:14px}
.mo-pause .i-play,.mo-pause[aria-pressed="true"] .i-pause{display:none}
.mo-pause[aria-pressed="true"] .i-play{display:block}
@media (prefers-reduced-motion:reduce){.mo-pause{display:none!important}}
@media (max-width:767px){
 .mo-pause{bottom:60px;inset-inline-start:16px}
}

/* example cards on the home page: the "דוגמה" tag stands out; amounts keep their width while counting */
.home-more .tag.ex{border-color:var(--foreground);font-weight:500}
.home-more .chat>.tag.ex{justify-self:end}
[data-count]{font-variant-numeric:tabular-nums}
/* before / after in Google: black and white, colour only on the stars */
.gx-wrap .gx{padding-bottom:40px;border-top:1px solid var(--border)}
.gx-wrap .gx-h{margin-top:14px}
.gx-wrap .gx-lead{margin-inline:auto}
.gx-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:56px;align-items:start}
.gx-card{margin:0;border:1px solid var(--border);border-radius:26px;padding:22px 24px 26px;background:var(--paper)}
.gx-after{box-shadow:var(--shadow-sm,0 1px 2px rgba(10,10,10,.06))}
.gx-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.gx-lbl{font-size:14px;font-weight:500;color:var(--foreground)}
.gx-before .gx-lbl{color:var(--muted-foreground)}
.gx-res{text-align:start}
.gx-u{font-size:14px;color:var(--muted-foreground);direction:ltr;text-align:end}
.gx-ti{font-size:20px;line-height:1.35;color:var(--foreground);margin-top:4px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.gx-d{font-size:15px;line-height:1.6;color:var(--grey-700);margin-top:6px}
.gx-before .gx-d{color:var(--muted-foreground)}
.gx-rate{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:14px;color:var(--muted-foreground)}
.gx-stars{display:inline-flex;gap:2px;direction:ltr}
.gx-stars svg{width:15px;height:15px;fill:#f2a900}
.gx-faq{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--border)}
.gx-q{display:grid;grid-template-rows:1fr}
.gx-q>div{overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:15px;color:var(--foreground);border-bottom:1px solid var(--border);padding:10px 0}
.gx-q svg{width:16px;height:16px;flex:none;color:var(--muted-foreground)}
.gx-cap{margin-top:22px;text-align:center;font-size:14px;color:var(--muted-foreground)}
@media (max-width:767px){
 .gx-wrap .gx{padding-top:80px}
 .gx-pair{grid-template-columns:1fr;gap:16px;margin-top:36px}
 .gx-card{padding:18px 18px 22px;border-radius:22px}
 .gx-ti{font-size:18px}
}

/* ---------- motion (only for no-preference) ---------- */
@property --ha{syntax:'<angle>';inherits:true;initial-value:210deg}
@media (prefers-reduced-motion:no-preference){
 /* 1. the ring: light passes over it, about 6s a turn; 3 turns after the questions, then it rests (pause button stops it) */
 .hero .ring{background:conic-gradient(from var(--ha),var(--ai-sky),var(--ai-blue),var(--ai-lilac),var(--ai-green),var(--ai-sun),var(--ai-sky));animation:mo-ring 6s linear 1.6s 3}
 .hero .ring::after{background:inherit}
 html.mo-off .hero .ring{animation-play-state:paused}
 @keyframes mo-ring{to{--ha:570deg}}

 /* 1. the hero mascot blinks every 4-7s at random (home-motion.js adds .mo-blink), not on a fixed loop */
 .hero .hm .iam-mascot .m-open{animation:none}
 .hero .hm .iam-mascot.mo-blink:is([data-state=idle],[data-state=typing],[data-state=waiting]) .m-open{animation:mo-blink .24s ease-in-out 1}
 @keyframes mo-blink{0%,100%{transform:scaleY(1)}45%,55%{transform:scaleY(.12)}}

 /* 3. example questions: a soft fade-in, one after the other, once. No typing dots, no answer (Yosef via Maayan, 19.10).
    fill-mode backwards: after the run the hover lift works as usual. */
 html:not(.mo-off) .hero .talk .chip{animation:mo-bub .5s cubic-bezier(.2,.7,.2,1) backwards}
 .hero .talk .chip:nth-child(1){animation-delay:.3s}
 .hero .talk .chip:nth-child(2){animation-delay:.6s}
 .hero .talk .chip:nth-child(3){animation-delay:.9s}
 @keyframes mo-bub{from{opacity:0;transform:translateY(6px)}}

 /* 4. scroll reveal: fade in + 16px rise, 500ms (home-motion.js marks sections below the fold) */
 .mo-rv{opacity:0;transform:translateY(16px);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
 .mo-rv.mo-in,html.mo-off .mo-rv{opacity:1;transform:none}
 html.mo-off .mo-rv{transition:none}

 /* 5. the "after" card fills in once it is on screen: stars, then the description, then two FAQ rows */
 .gx.mo-wait .gx-f{opacity:0;transform:translateY(6px)}
 .gx.mo-wait .gx-stars svg{opacity:0;transform:scale(.4)}
 .gx.mo-wait .gx-q{grid-template-rows:0fr}
 .gx.mo-wait .gx-q>div{padding-block:0;border-bottom-color:transparent}
  /* transitions only on the way in (.mo-play), so hiding at load is instant */
 .gx.mo-play .gx-f,.gx.mo-play .gx-stars svg{transition:opacity .35s ease,transform .35s cubic-bezier(.2,.7,.2,1)}
 .gx.mo-play .gx-q{transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1),opacity .35s ease,transform .35s ease}
 .gx.mo-play .gx-q>div{transition:padding .4s cubic-bezier(.2,.7,.2,1),border-color .4s ease}
 .gx.mo-play .gx-stars svg:nth-child(2){transition-delay:.08s}.gx.mo-play .gx-stars svg:nth-child(3){transition-delay:.16s}
 .gx.mo-play .gx-stars svg:nth-child(4){transition-delay:.24s}.gx.mo-play .gx-stars svg:nth-child(5){transition-delay:.32s}
 .gx.mo-play .gx-d.gx-f{transition-delay:.55s}
 .gx.mo-play .gx-q:nth-child(1),.gx.mo-play .gx-q:nth-child(1)>div{transition-delay:.9s}
 .gx.mo-play .gx-q:nth-child(2),.gx.mo-play .gx-q:nth-child(2)>div{transition-delay:1.15s}
 html.mo-off .gx *{transition:none!important}
}

/* 6. hover: buttons and cards lift 2px, the main button's arrow nudges forward (left). Mouse only, never on touch. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .hero .send,.hero .chip,.mo-pause,.home-more .send,.home-more .btn,.home-more .pill,.home-more .ghost,.rv2 .btn,.rv2 .again,
 .home-more .tile,.home-more .step,.home-more .logcard,.home-more .pt-card,.gx-card{transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
 .hero .send:hover,.hero .chip:hover,.home-more .send:hover,.home-more .btn:hover,.home-more .pill:hover,.home-more .ghost:hover,.rv2 .btn:hover,.rv2 .again:hover,
 .home-more .tile:hover,.home-more .step:hover,.home-more .logcard:hover,.gx-card:hover{transform:translateY(-2px)}
 .home-more .tile:hover,.home-more .logcard:hover,.gx-card:hover{box-shadow:0 8px 24px rgba(10,10,10,.06)}
 .hero .send svg,.home-more .send svg,.home-more .btn.p svg{transition:transform .18s ease}
 .hero .send:hover svg,.home-more .send:hover svg,.home-more .btn.p:hover svg{transform:translateX(-3px)}
}