/* Sign-in page. The envelope is the hero; below the fold three glass cards open in 3D as they come into view
   while the sky turns from day to neon night. Everything scroll-linked rides CSS scroll timelines (no position
   is ever written from a scroll handler: the owner's locked-on-scroll rule). */
body.on-login { overflow-y: auto; }
body.on-login .aurora i { opacity: 1; }
.login { position: relative; min-height: 100dvh; isolation: isolate; overflow-x: clip; }

/* ---- the world behind: day sky, then neon night ---- */
.world { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.world .sky, .world .night { position: absolute; inset: 0; }
.world .sky {
  background:
    radial-gradient(38% 34% at 16% 20%, rgba(240, 171, 252, .5), transparent 70%),
    radial-gradient(34% 30% at 86% 18%, rgba(165, 243, 252, .55), transparent 72%),
    radial-gradient(46% 36% at 64% 104%, rgba(216, 180, 254, .55), transparent 70%),
    radial-gradient(30% 26% at 44% 46%, rgba(255, 255, 255, .7), transparent 72%),
    linear-gradient(180deg, #FCF2FF 0%, #F5E6FF 50%, #E8F6FD 100%);
}
[data-theme="dark"] .world .sky {
  background:
    radial-gradient(50% 40% at 16% 12%, rgba(168, 85, 247, .32), transparent 70%),
    radial-gradient(44% 36% at 88% 24%, rgba(34, 211, 238, .16), transparent 72%),
    radial-gradient(70% 46% at 50% 104%, rgba(217, 70, 239, .26), transparent 70%),
    linear-gradient(180deg, #1C0B30 0%, #150A26 52%, #0E1229 100%);
}
.world .night {
  opacity: 0;
  background:
    radial-gradient(70% 42% at 12% 104%, rgba(217, 70, 239, .5), transparent 70%),
    radial-gradient(52% 38% at 92% -4%, rgba(34, 211, 238, .32), transparent 70%),
    radial-gradient(40% 30% at 70% 70%, rgba(139, 92, 246, .22), transparent 72%),
    linear-gradient(180deg, #06020D 0%, #0B0614 56%, #14062A 100%);
}
/* between day and night the sky passes through a neon dusk, so the change never goes through grey */
.world .dusk {
  position: absolute; inset: 0; opacity: 0;
  background:
    radial-gradient(60% 44% at 50% 108%, rgba(255, 168, 120, .75), transparent 70%),
    radial-gradient(48% 40% at 10% 70%, rgba(236, 72, 153, .55), transparent 72%),
    radial-gradient(44% 36% at 92% 30%, rgba(34, 211, 238, .28), transparent 72%),
    linear-gradient(180deg, #2A0F52 0%, #6B1F86 42%, #C03A8E 74%, #F07A7A 100%);
}
.night .stars { position: absolute; inset: -10%; opacity: .75; animation: tm-twinkle 7s ease-in-out infinite alternate;
  background-image:
    radial-gradient(1.4px 1.4px at 22px 38px, #fff 50%, transparent 55%),
    radial-gradient(1px 1px at 140px 90px, #F5D0FE 50%, transparent 55%),
    radial-gradient(1.2px 1.2px at 210px 170px, #CFFAFE 50%, transparent 55%),
    radial-gradient(1px 1px at 80px 210px, #fff 50%, transparent 55%);
  background-size: 260px 260px; }
.night .stars.far { opacity: .45; background-size: 150px 150px; animation-duration: 11s; animation-delay: -4s; }
.night .horizon { position: absolute; inset-inline: 0; bottom: 0; height: 46%;
  background: linear-gradient(180deg, transparent, rgba(217, 70, 239, .16) 60%, rgba(34, 211, 238, .12)); }
@keyframes tm-twinkle { to { opacity: .35; } }
@supports (animation-timeline: scroll()) {
  .world .night { animation: tm-nightfall linear both; animation-timeline: scroll(root); animation-range: 22% 66%; }
  .world .dusk { animation: tm-dusk linear both; animation-timeline: scroll(root); animation-range: 3% 66%; }
  .world .sky { animation: tm-daybreak linear both; animation-timeline: scroll(root); animation-range: 3% 34%; }
  /* the hero steps back into the dusk as the story comes up (opacity and depth only, run by the browser) */
  .login-hero { animation: tm-recede linear both; animation-timeline: scroll(root); animation-range: 0% 34%; transform-origin: 50% 0; }
  .scroll-cue { animation: tm-cue linear both; animation-timeline: scroll(root); animation-range: 0% 10%; }
  .story h2 { animation: tm-ink linear both; animation-timeline: scroll(root); animation-range: 4% 40%; }
  @keyframes tm-nightfall { from { opacity: 0; } to { opacity: 1; } }
  @keyframes tm-dusk { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 1; } }
  @keyframes tm-daybreak { to { opacity: 0; } }
  @keyframes tm-recede { to { opacity: .18; transform: perspective(1200px) translateZ(-90px); } }
  @keyframes tm-cue { to { opacity: 0; } }
  @keyframes tm-ink { from { color: var(--text); } to { color: #FBEFFF; } }
}
@supports not (animation-timeline: scroll()) {
  .story { background: linear-gradient(180deg, transparent, #0B0614 16%); }
  .story h2 { color: #FBEFFF; }
}

/* ---- top bar ---- */
.login-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1240px; margin: 0 auto;
  padding: calc(14px + var(--sat)) max(20px, var(--sar)) 0 max(20px, var(--sal)); }
.login-word b { font: 800 19px/1 var(--display); letter-spacing: -.02em; }
.login-ctrl { display: flex; align-items: center; gap: 6px; }
.login-ctrl .seg { background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-color: var(--glass-edge); }
.login-ctrl .seg button { min-height: 36px; padding: 0 12px; font-size: 13.5px; }

/* ---- hero ---- */
.login-hero { max-width: 1200px; margin: 0 auto; padding: 18px 24px 0; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, 432px); gap: clamp(24px, 5vw, 76px); min-height: min(780px, calc(100dvh - 130px)); }
.env-col { display: grid; justify-items: center; min-width: 0; }
.env-box { position: relative; width: 100%; height: clamp(330px, 52vh, 540px); }
.env-halo { position: absolute; inset: 6% 14% 10%; border-radius: 50%; opacity: .62; filter: blur(48px);
  background: conic-gradient(from 20deg, #F0ABFC, #C4B5FD 22%, #67E8F9 44%, #F5D0FE 64%, #E879F9 84%, #F0ABFC);
  animation: tm-spin 48s linear infinite; }
[data-theme="dark"] .env-halo { opacity: .4; }
@keyframes tm-spin { to { transform: rotate(1turn); } }
.hero-copy { position: relative; z-index: 1; display: grid; gap: 12px; justify-items: center; text-align: center; margin-block-start: 6px; max-width: 560px; }
.hero-line { font: 800 clamp(40px, 4.3vw, 62px)/1 var(--display); letter-spacing: -.04em; text-wrap: balance; }
:lang(he) .hero-line { letter-spacing: -.02em; line-height: 1.08; }
.hero-line .grad { background: linear-gradient(100deg, #C026D3, #8B5CF6 46%, #0891B2); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-inline-end: .04em; }
[data-theme="dark"] .hero-line .grad { background-image: linear-gradient(100deg, #F0ABFC, #A78BFA 46%, #67E8F9); }
.hero-sub { color: var(--muted); font-size: 17px; }
.env-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .45s ease; }
.env-box.live canvas { opacity: 1; }
.env-svg { position: absolute; inset: 14% 8% 16%; width: 84%; height: 70%; transition: opacity .3s ease; animation: tm-float 7s ease-in-out infinite; filter: drop-shadow(0 30px 40px rgba(140, 40, 190, .28)); }
.env-box.live .env-svg { opacity: 0; }
.env-glow { position: absolute; inset-inline: 16%; bottom: 6%; height: 16%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(217, 70, 239, .34), rgba(34, 211, 238, .12) 62%, transparent); filter: blur(8px); }
@keyframes tm-float { 50% { transform: translate3d(0, -10px, 0) rotate(-1.5deg); } }

.login-card { display: grid; gap: 16px; padding: 30px 28px 22px; border-radius: 30px; box-shadow: var(--shadow-3), var(--inner); }
.login-brand { display: flex; align-items: center; gap: 14px; margin-block-end: 4px; }
.login-brand .mark { width: 58px; height: 58px; flex: none; display: grid; place-items: center; border-radius: 18px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .95), rgba(245, 208, 254, .55) 60%, rgba(207, 250, 254, .6));
  border: 1px solid rgba(255, 255, 255, .95); box-shadow: inset 0 1px 0 #fff, 0 10px 24px -10px rgba(176, 31, 196, .6); }
[data-theme="dark"] .login-brand .mark { background: linear-gradient(150deg, rgba(255, 255, 255, .16), rgba(217, 70, 239, .18) 60%, rgba(34, 211, 238, .14)); border-color: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 24px -10px rgba(217, 70, 239, .6); }
.mark-svg { width: 46px; height: 35px; }
.login-brand h1 { font-size: 29px; font-weight: 800; letter-spacing: -.025em; line-height: 1.05; }
.tagline { color: var(--muted); font-size: 15px; margin-block-start: 4px; }
.pw { position: relative; }
/* the field is LTR in every language while the eye follows the page: keep room on the side the eye sits */
.pw .input { padding-right: 54px; }
[dir="rtl"] .pw .input { padding-right: 16px; padding-left: 54px; }
.pw .eye { position: absolute; inset-inline-end: 7px; top: 7px; }
.login-error { min-height: 21px; margin-block: -6px -8px; color: var(--bad); font-size: 14px; font-weight: 500; }
.login-go { width: 100%; min-height: 54px; font-size: 16px; border-radius: 16px; }
.login-go > span { position: relative; z-index: 1; }
.login-go svg { position: relative; z-index: 1; }
[dir="rtl"] .flip { transform: scaleX(-1); }
.up { transform: rotate(90deg); }
.login-note { display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--muted); font-size: 13px; }
.login-note svg { width: 15px; height: 15px; flex: none; }
.login-card.bad { animation: tm-bad 1.4s ease both; }
.login-card.bad .gloss::after { background: linear-gradient(100deg, transparent, rgba(255, 140, 160, .08) 30%, rgba(255, 120, 150, .5) 50%, rgba(255, 140, 160, .08) 70%, transparent); }
@keyframes tm-bad { 0%, 40% { border-color: var(--bad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 24%, transparent), var(--shadow-3), var(--inner); } }
.login-card.warn .login-error { color: var(--warn); }

.scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 2px; width: max-content; margin: 22px auto 0; padding: 8px 14px;
  color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px; border-radius: 14px; }
.scroll-cue svg { width: 22px; height: 22px; animation: tm-bob 2.4s ease-in-out infinite; }
.scroll-cue:hover { color: var(--accent); }
@keyframes tm-bob { 50% { transform: translateY(5px); } }

/* ---- the story: three glass cards that open in 3D as they come into view ---- */
.story { position: relative; max-width: 1180px; margin: 0 auto; padding: 22vh 24px 8vh; }
.story h2 { max-width: 15ch; margin: 0 auto 9vh; text-align: center; font-size: clamp(36px, 5.6vw, 68px); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; color: #FBEFFF; }
.story-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
/* the story always plays at night: dark crystal lit from inside, a neon rim, white type */
.story-card { --tilt: 0; padding: 30px 28px 32px; min-height: 270px; border-radius: 28px; overflow: hidden; display: grid; align-content: start; gap: 14px;
  color: #FBEFFF; border-color: rgba(255, 255, 255, .2);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(240, 171, 252, .22), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(103, 232, 249, .16), transparent 62%),
    linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04) 55%, rgba(255, 255, 255, .08));
  box-shadow: 0 40px 90px -36px rgba(217, 70, 239, .75), 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 40px rgba(217, 70, 239, .08);
  transform-origin: 50% 90%; }
.story-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(240, 171, 252, .8), rgba(255, 255, 255, .1) 40%, rgba(103, 232, 249, .7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.story-card:nth-child(1) { --tilt: 14; }
.story-card:nth-child(2) { --tilt: 0; margin-block-start: 72px; }
.story-card:nth-child(3) { --tilt: -14; margin-block-start: 144px; }
.story-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; color: #fff;
  background: linear-gradient(145deg, #D946EF, #8B5CF6 55%, #22D3EE); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), 0 12px 30px -8px rgba(217, 70, 239, .9); }
.story-icon svg { width: 28px; height: 28px; }
.story-card h3 { font-size: 25px; font-weight: 800; letter-spacing: -.02em; margin-block-start: 8px; color: #FFFFFF; }
.story-card p { color: rgba(251, 239, 255, .78); font-size: 16px; line-height: 1.55; }
.story-sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.story-sheen::after { content: ""; position: absolute; top: -30%; bottom: -30%; width: 44%; inset-inline-start: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-16deg); opacity: .9; }
[data-theme="dark"] .story-sheen::after { background: linear-gradient(100deg, transparent, rgba(255, 200, 255, .2), transparent); }
@supports (animation-timeline: view()) {
  .story-card { animation: tm-open linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  .story-sheen::after { animation: tm-sheen-x linear both; animation-timeline: view(); animation-range: entry 40% exit 40%; }
  @keyframes tm-open {
    0% { opacity: 0; transform: perspective(1100px) translateZ(-260px) rotateX(52deg) rotateY(calc(var(--tilt) * 1deg)) scale(.88); }
    38%, 64% { opacity: 1; transform: perspective(1100px) translateZ(0) rotateX(0) rotateY(0) scale(1); }
    100% { opacity: .55; transform: perspective(1100px) translateZ(-120px) rotateX(-22deg) rotateY(calc(var(--tilt) * -.5deg)) scale(.95); }
  }
  @keyframes tm-sheen-x { from { transform: translateX(0) skewX(-16deg); } to { transform: translateX(420%) skewX(-16deg); } }
  [dir="rtl"] .story-sheen::after { animation-name: tm-sheen-x-rtl; }
  @keyframes tm-sheen-x-rtl { from { transform: translateX(0) skewX(16deg); } to { transform: translateX(-420%) skewX(16deg); } }
}
@media (prefers-reduced-motion: reduce) {
  .story-card, .story-sheen::after { animation: none !important; opacity: 1; transform: none; }
}
@supports not (animation-timeline: view()) {
  .story-card { opacity: 0; transform: perspective(1100px) translateZ(-200px) rotateX(40deg); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--i) * 120ms); }
  .story-card.open { opacity: 1; transform: none; }
}
.story-back { display: flex; margin: 9vh auto 0; background: rgba(255, 255, 255, .1); color: #FBEFFF; border-color: rgba(255, 255, 255, .22); }
.story-back:hover { background: rgba(255, 255, 255, .18); }
.story-back svg { transform: rotate(90deg); }
.login-foot { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 28px 16px calc(30px + var(--sab)); color: rgba(251, 239, 255, .62); font-size: 13px; }

@media (max-width: 899px) {
  .login-hero { grid-template-columns: 1fr; gap: 0; padding: 4px 16px 0; min-height: 0; max-width: 520px; }
  .env-box { height: clamp(150px, 31dvh, 290px); margin-block-end: -4px; }
  .hero-copy { display: none; }
  .env-svg { inset: 6% 18% 8%; width: 64%; height: 86%; }
  .login-card { padding: 22px 18px 16px; gap: 12px; border-radius: 26px; }
  .login-brand .mark { width: 50px; height: 50px; border-radius: 15px; }
  .mark-svg { width: 40px; height: 30px; }
  .login-brand h1 { font-size: 25px; }
  .tagline { font-size: 14px; }
  .login-word { display: none; }
  .login-top { justify-content: center; padding-top: calc(10px + var(--sat)); }
  .story { padding: 16vh 16px 6vh; }
  .story-cards { grid-template-columns: 1fr; gap: 18px; max-width: 520px; margin: 0 auto; }
  .story-card:nth-child(n) { margin-block-start: 0; min-height: 0; }
  .story-card:nth-child(2) { margin-inline-start: 18px; }
  .story-card:nth-child(3) { margin-inline-start: 36px; }
}
@media (max-width: 380px) {
  .login-ctrl .seg button { padding: 0 9px; }
  .login-card { gap: 10px; }
  .login-note { display: none; }
}
/* a short phone screen, or the iPhone app's Mail tab (390 x 675 between its bars): the card stays whole */
@media (max-width: 899px) and (max-height: 760px) {
  .env-box { height: clamp(112px, 24dvh, 200px); }
  .login-top { padding-top: calc(8px + var(--sat)); }
  .login-card { padding-block: 18px 14px; gap: 10px; }
  .login-brand .mark { width: 44px; height: 44px; border-radius: 14px; }
  .mark-svg { width: 34px; height: 26px; }
  .login-brand h1 { font-size: 23px; }
  .login-card .input { min-height: 48px; }
  .login-go { min-height: 50px; }
}