/* /door-live.css - the look of Logi's doors: the login pages and the family pay page (25.10.2026).
   Visual only: every form, field, button and script on these pages works exactly as before.
   The /maor language (graph paper, Futurism 900, the marker, the press) made colourful and alive:
   soft brand-colour fields drifting behind a white card, the bot on the card's corner, a logo that
   builds itself, a marker under the title, a light that crosses the button. Brand colours only;
   every move is calm (no jiggle) and off under reduced motion. Pairs with /door-live.js. */
:root{--d-ease:cubic-bezier(.23,1,.32,1);--d-spring:cubic-bezier(.34,1.56,.64,1)}
body{background-color:color-mix(in srgb,var(--sand) 58%,var(--white));min-height:100vh;overflow-x:clip;
  background-image:linear-gradient(to right,color-mix(in srgb,var(--mint) 22%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--mint) 22%,transparent) 1px,transparent 1px),
    linear-gradient(to right,color-mix(in srgb,var(--mint-soft) 32%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--mint-soft) 32%,transparent) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:-1px -1px}
/* the colour fields: large soft shapes of the brand colours, slowly drifting, behind everything */
.dl-fields{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.dl-fields i{position:absolute;display:block;border-radius:42% 58% 55% 45% / 48% 42% 58% 52%;filter:blur(2px)}
.dl-fields i:nth-child(1){width:44vmax;height:44vmax;background:color-mix(in srgb, #b4efcb 55%, color-mix(in srgb, #e0ddd1 58%, #ffffff));top:-18vmax;inset-inline-end:-14vmax}
.dl-fields i:nth-child(2){width:30vmax;height:30vmax;background:color-mix(in srgb, #ffabd1 45%, color-mix(in srgb, #e0ddd1 58%, #ffffff));bottom:-12vmax;inset-inline-start:-8vmax;}
.dl-fields i:nth-child(3){width:18vmax;height:18vmax;background:color-mix(in srgb, #ff9f48 32%, color-mix(in srgb, #e0ddd1 58%, #ffffff));top:38%;inset-inline-start:-6vmax;}
.dl-fields i:nth-child(4){width:22vmax;height:22vmax;background:color-mix(in srgb, #b4efcb 45%, color-mix(in srgb, #e0ddd1 58%, #ffffff));bottom:-6vmax;inset-inline-end:8vmax;}
.dl-fields i:nth-child(5){width:10vmax;height:10vmax;background:color-mix(in srgb, #ff8383 33%, color-mix(in srgb, #e0ddd1 58%, #ffffff));top:14%;inset-inline-start:18%;}
@media (prefers-reduced-motion:no-preference){
  .dl-fields i{animation:dl-drift 26s ease-in-out infinite alternate}
  .dl-fields i:nth-child(2){animation-duration:32s;animation-delay:-8s}
  .dl-fields i:nth-child(3){animation-duration:22s;animation-delay:-4s}
  .dl-fields i:nth-child(4){animation-duration:36s;animation-delay:-12s}
  .dl-fields i:nth-child(5){animation-duration:19s;animation-delay:-2s}
}
@keyframes dl-drift{0%{transform:translate(0,0) rotate(0deg) scale(1)}50%{transform:translate(3vmax,-2vmax) rotate(18deg) scale(1.06)}100%{transform:translate(-2vmax,2.5vmax) rotate(-12deg) scale(.96)}}
.brand-bar,.wrap{position:relative;z-index:1}
/* the logo builds itself: the green loop is drawn in, then the letters land one by one, then the words */
@media (prefers-reduced-motion:no-preference){
  .brand-bar svg .ldkc3{animation:dl-wipe 900ms var(--d-ease) 150ms both}
  .brand-bar svg .ldkc2{transform-box:fill-box;transform-origin:50% 100%;animation:dl-land 620ms var(--d-spring) both}
  .brand-bar svg .ldkc2:nth-of-type(1){animation-delay:650ms}.brand-bar svg .ldkc2:nth-of-type(2){animation-delay:760ms}.brand-bar svg .ldkc2:nth-of-type(3){animation-delay:870ms}
  .brand-bar svg text{animation:dl-fade 600ms ease 1050ms both}
}
@keyframes dl-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes dl-land{from{opacity:0;transform:translateY(-22px) scale(.7)}}
@keyframes dl-fade{from{opacity:0}}
/* the card: white with a crisp edge and a layered shadow; it rises in and, on a computer, leans toward the pointer */
.auth{background:var(--white)!important;border:1.5px solid color-mix(in srgb,var(--dark) 58%,transparent)!important;border-radius:28px!important;
  box-shadow:0 1px 0 color-mix(in srgb,var(--dark) 18%,transparent),0 14px 30px -14px color-mix(in srgb,var(--dark) 30%,transparent),0 50px 90px -40px color-mix(in srgb,var(--dark) 45%,transparent)!important;
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform 400ms var(--d-ease)}
.auth::before{content:none!important}
.auth::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--mint-pale) 55%,transparent),transparent 40%);opacity:var(--glow,0);transition:opacity 300ms ease}
@media (prefers-reduced-motion:no-preference){.auth{animation:dl-rise 800ms var(--d-ease) 250ms both}}
@keyframes dl-rise{from{opacity:0;transform:perspective(1100px) translateY(40px) rotateX(10deg)}}
.auth .pad{position:relative;z-index:1}
/* the title: Futurism 900 with the mint marker drawn behind its last words */
.auth h1{font-weight:900!important;font-size:clamp(28px,1rem + 2vw,38px)!important;letter-spacing:-.02em;line-height:1.15}
.dl-hl{position:relative;z-index:0;white-space:nowrap}
.dl-hl::before{content:'';position:absolute;z-index:-1;inset:.18em -.08em -.04em;border-radius:6px;background:var(--mint);transform-origin:right center}
@media (prefers-reduced-motion:no-preference){.dl-hl::before{animation:dl-mark 700ms cubic-bezier(.65,0,.35,1) 950ms both}}
@keyframes dl-mark{from{transform:scaleX(0)}}
/* fields: a calm frame that lights mint on focus */
.auth input:not([type=hidden]):not([type=checkbox]){border:2px solid color-mix(in srgb,var(--dark) 30%,transparent)!important;border-radius:14px!important;background:var(--white)!important;
  transition:border-color 200ms ease,box-shadow 260ms var(--d-ease)}
.auth input:not([type=hidden]):not([type=checkbox]):focus{outline:none;border-color:var(--dark)!important;box-shadow:0 0 0 5px color-mix(in srgb,var(--mint) 35%,transparent)}
/* the one button: it lifts under the pointer, a light crosses it, it presses in */
.auth button[type=submit]:not(.quiet),.auth .btn.primary{position:relative;overflow:hidden;border-radius:16px!important;
  box-shadow:0 14px 28px -14px color-mix(in srgb,var(--mint) 90%,transparent),0 2px 0 color-mix(in srgb,var(--dark) 25%,transparent);transition:transform 160ms var(--d-ease),box-shadow 220ms ease}
.auth button[type=submit]:not(.quiet)::after,.auth .btn.primary::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,color-mix(in srgb,var(--white) 65%,transparent) 50%,transparent 65%);transform:translateX(110%);pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .auth button[type=submit]:not(.quiet):hover,.auth .btn.primary:hover{transform:translateY(-2px)}
  .auth button[type=submit]:not(.quiet):hover::after,.auth .btn.primary:hover::after{transform:translateX(-110%);transition:transform 700ms var(--d-ease)}
}
.auth button[type=submit]:not(.quiet):active,.auth .btn.primary:active{transform:scale(.97)}
/* the bot on the card's corner, in the pose of the moment; at rest it stands still (no idle body motion, rotation within 6deg) */
.dl-bot{position:absolute;z-index:2;top:-86px;inset-inline-end:-26px;width:124px;height:124px;object-fit:contain;object-position:bottom;pointer-events:none;
  filter:drop-shadow(0 12px 14px color-mix(in srgb,var(--dark) 22%,transparent))}
@media (max-width:520px){.dl-bot{width:92px;height:92px;top:-64px;inset-inline-end:-6px}}
@media (prefers-reduced-motion:no-preference){
  .dl-bot{animation:dl-pop 760ms var(--d-spring) 700ms both}
}
@keyframes dl-pop{from{opacity:0;transform:translateY(30px) scale(.6) rotate(-6deg)}}
@keyframes dl-float{50%{transform:translateY(-6px)}}
/* pay: the total speaks at hero size, on a marker */
.pay .total .num,.p2-due .num{font-weight:900;font-variant-numeric:tabular-nums;position:relative;z-index:0}
.pay .total .num::before,.p2-due .num::before{content:'';position:absolute;z-index:-1;inset:.2em -.1em 0;border-radius:6px;background:var(--mint-pale);transform-origin:right center}
@media (prefers-reduced-motion:no-preference){.pay .total .num::before,.p2-due .num::before{animation:dl-mark 700ms cubic-bezier(.65,0,.35,1) 1200ms both}}
/* paid: a tick that draws and a short burst of brand confetti, once */
.dl-confetti{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.dl-confetti b{position:absolute;top:-20px;width:10px;height:14px;border-radius:3px;opacity:0}
@media (prefers-reduced-motion:no-preference){.dl-confetti b{animation:dl-fall var(--t,2.4s) cubic-bezier(.25,.6,.4,1) var(--d,0s) forwards}}
@keyframes dl-fall{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x,0),105vh) rotate(var(--r,540deg))}}
.done .mark{display:inline-grid;place-items:center}
@media (prefers-reduced-motion:no-preference){.done{animation:dl-pop 700ms var(--d-spring) 500ms both}}
/* the bot stands out of the card (the old card clipped its own corner) */
.auth{overflow:visible!important}
/* a normal space between an amount and its shekel (Futurism's space is 0.55em) */
.pay .total .num,.p2-due .num{word-spacing:-.3em}
/* fine print never leaves a word alone; the field hint reads (4.5:1+) */
.auth .note,.auth p{text-wrap:balance}
.auth input::placeholder{color:color-mix(in srgb,var(--dark) 62%,var(--white));opacity:1}

/* ---- the parents' area (25.10): a strip of its subject's colour on each box, the bot in the next-lesson board ---- */
.k-sheet.dl-strip,.k-sec.dl-strip{background-image:linear-gradient(var(--strip),var(--strip));background-size:100% 6px;background-repeat:no-repeat;background-position:top}
.ac-next{position:relative}
.dl-hbot{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:88%;max-height:150px;width:auto;pointer-events:none}
@media (max-width:699px){.dl-hbot{display:none}}
@media (prefers-reduced-motion:no-preference){.dl-hbot{animation:dl-hbot 760ms var(--d-spring) 400ms both}}
@keyframes dl-hbot{from{opacity:0;transform:translateX(-50%) translateY(24px) scale(.8)}}
/* the open-palm pose (pay) stands on the card's other corner, so its hand invites toward the card (never mirrored) */
.dl-bot.dl-palm{inset-inline-end:auto;inset-inline-start:-30px}
@media (max-width:520px){.dl-bot.dl-palm{inset-inline-start:-6px}}
/* the nod (a full phone number) and the button's one pulse */
.dl-bot.dl-nod{animation:dl-nod 900ms cubic-bezier(.37,0,.63,1) both}
@keyframes dl-nod{25%{transform:translateY(3px) rotate(3deg)}55%{transform:translateY(-2px) rotate(-2deg)}100%{transform:none}}
.auth button.dl-pulse{animation:dl-pulse 520ms cubic-bezier(.34,1.56,.64,1)}
@keyframes dl-pulse{40%{transform:scale(1.03)}}
/* the pay line reads label first, then the amount: "לתשלום 860 ₪" / "שולם ב-... 860 ₪" (order only, the words are the server's) */
.p2-due span{order:-1}