/* The buytimeframe.com teaser. Timeframe colours: ink, mahogany, ivory, sand and gold.
   Everything that moves uses only transform and opacity, so a phone can draw it smoothly.
   With "reduce motion" turned on, the page stands still. */
:root {
  --deep: #0e0907;
  --ink: #211614;
  --mah: #3a2419;
  --ivory: #f7f4ed;
  --sand: #f7dfb9;
  --gold: #d8b784;
  --line: rgba(247, 244, 237, 0.18);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--deep); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: var(--ivory);
  background: var(--deep);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Space ---------- */
.space { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.nebula {
  position: absolute; inset: -20%;
  background:
    radial-gradient(ellipse 45% 35% at 50% 42%, rgba(247, 223, 185, 0.10) 0%, rgba(247, 223, 185, 0) 70%),
    radial-gradient(ellipse 60% 45% at 22% 70%, rgba(120, 66, 40, 0.22) 0%, rgba(120, 66, 40, 0) 70%),
    radial-gradient(ellipse 55% 40% at 80% 25%, rgba(88, 52, 36, 0.25) 0%, rgba(88, 52, 36, 0) 70%),
    linear-gradient(180deg, #160e0b 0%, var(--deep) 100%);
  animation: nebula 60s ease-in-out infinite alternate;
}
@keyframes nebula { from { transform: scale(1) rotate(0deg); } to { transform: scale(1.08) rotate(3deg); } }

.stars { position: absolute; left: 50%; top: 50%; width: 1px; height: 1px; border-radius: 50%; background: transparent; }
.stars-far { opacity: 0.55; animation: drift 240s linear infinite; }
.stars-near { width: 2px; height: 2px; opacity: 0.7; animation: drift 150s linear infinite, twinkle 7s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-60px, 40px, 0); } }
@keyframes twinkle { from { opacity: 0.35; } to { opacity: 0.8; } }
/* stars:start */
.stars-far { box-shadow: -462px -194px rgba(247,244,237,0.65), -424px -174px rgba(247,244,237,0.93), -1293px 57px rgba(247,244,237,0.76), -243px -508px rgba(247,244,237,0.54), -141px 442px rgba(247,244,237,0.55), -1112px -335px rgba(247,244,237,0.78), -1211px -597px rgba(247,244,237,0.54), 1199px 217px rgba(247,244,237,0.62), -1037px 462px rgba(247,244,237,0.44), 1116px -389px rgba(247,244,237,0.84), 1251px -419px rgba(247,244,237,0.94), 840px 86px rgba(247,244,237,0.80), 453px 235px rgba(247,244,237,0.64), 533px -181px rgba(247,244,237,0.77), 200px -759px rgba(247,244,237,0.52), 496px -460px rgba(247,244,237,0.40), -319px -175px rgba(247,244,237,0.79), 223px -216px rgba(247,244,237,0.83), -1141px -574px rgba(247,244,237,0.51), 823px -399px rgba(247,244,237,0.72), -987px 695px rgba(247,244,237,0.92), -482px -363px rgba(247,244,237,0.51), 1272px 462px rgba(247,244,237,0.45), 442px 267px rgba(247,244,237,0.63), 1059px -525px rgba(247,244,237,0.52), -1140px -814px rgba(247,244,237,0.77), 1241px -204px rgba(247,244,237,0.87), 333px 179px rgba(247,244,237,0.66), 326px 797px rgba(247,244,237,0.69), 649px -73px rgba(247,244,237,0.85), -65px -826px rgba(247,244,237,0.94), 54px 613px rgba(247,244,237,0.42), 745px -351px rgba(247,244,237,0.62), -139px -195px rgba(247,244,237,0.97), -854px 638px rgba(247,244,237,0.76), 1071px -422px rgba(247,244,237,0.71), 715px 729px rgba(247,244,237,0.61), 771px 707px rgba(247,244,237,0.94), 590px -289px rgba(247,244,237,0.39), 1026px -1px rgba(247,244,237,0.39), 860px 438px rgba(247,244,237,0.70), -545px 121px rgba(247,244,237,0.59), -598px 614px rgba(247,244,237,0.46), -510px 454px rgba(247,244,237,0.89), -652px 617px rgba(247,244,237,0.54), 614px -325px rgba(247,244,237,0.43), -524px -524px rgba(247,244,237,0.75), -1074px -99px rgba(247,244,237,0.84), 333px 423px rgba(247,244,237,0.71), 114px -379px rgba(247,244,237,0.95), -5px 610px rgba(247,244,237,0.74), 564px -402px rgba(247,244,237,0.60), -1192px 108px rgba(247,244,237,0.87), -375px 793px rgba(247,244,237,0.67), -709px 475px rgba(247,244,237,0.63), -66px -205px rgba(247,244,237,0.76), -977px 527px rgba(247,244,237,0.44), -180px -288px rgba(247,244,237,0.71), 984px 217px rgba(247,244,237,0.73), 0px -774px rgba(247,244,237,0.72), 538px 672px rgba(247,244,237,0.36), 1250px -268px rgba(247,244,237,0.75), -261px 641px rgba(247,244,237,0.69), 1238px -836px rgba(247,244,237,0.64), -871px -84px rgba(247,244,237,0.76), -1033px -25px rgba(247,244,237,0.90), 187px -599px rgba(247,244,237,0.98), 1006px 427px rgba(247,244,237,0.68), 1177px -629px rgba(247,244,237,0.97), -417px 137px rgba(247,244,237,0.80), -663px 11px rgba(247,244,237,0.93), 977px 565px rgba(247,244,237,0.72), 797px -416px rgba(247,244,237,0.79), 583px -496px rgba(247,244,237,0.52), 540px 867px rgba(247,244,237,0.87), -1186px -360px rgba(247,244,237,0.71), -709px -457px rgba(247,244,237,0.78), -41px 773px rgba(247,244,237,0.71), 1223px 742px rgba(247,244,237,0.79), 286px -749px rgba(247,244,237,0.85), -330px 18px rgba(247,244,237,0.96), -622px 432px rgba(247,244,237,0.79), 270px 517px rgba(247,244,237,0.62), -129px 630px rgba(247,244,237,0.58), 659px 596px rgba(247,244,237,0.35), 1291px -281px rgba(247,244,237,0.83), -326px 70px rgba(247,244,237,0.65), 257px 371px rgba(247,244,237,0.51), -861px -543px rgba(247,244,237,0.65), -14px 488px rgba(247,244,237,0.75), 907px 858px rgba(247,244,237,0.95), 239px 663px rgba(247,244,237,0.66), 1014px -23px rgba(247,244,237,0.99), 504px 492px rgba(247,244,237,0.98), 284px 345px rgba(247,244,237,0.87), -1079px 735px rgba(247,244,237,0.90), 523px -382px rgba(247,244,237,0.53), 159px -708px rgba(247,244,237,0.94), 756px 118px rgba(247,244,237,0.40), -1163px 735px rgba(247,244,237,0.50), -1181px -129px rgba(247,244,237,0.59), 738px 510px rgba(247,244,237,0.55), -961px -232px rgba(247,244,237,0.53), -653px 761px rgba(247,244,237,0.63), -1107px -64px rgba(247,244,237,0.64), -872px -789px rgba(247,244,237,0.72), -1300px -885px rgba(247,244,237,0.98), -688px -337px rgba(247,244,237,0.85), 115px 647px rgba(247,244,237,0.90), 116px -895px rgba(247,244,237,0.44), 447px 687px rgba(247,244,237,0.63), -983px -862px rgba(247,244,237,0.91), 1120px -327px rgba(247,244,237,0.67), -1227px 393px rgba(247,244,237,0.55), 732px 495px rgba(247,244,237,0.83), 565px 508px rgba(247,244,237,0.72), -1290px -665px rgba(247,244,237,0.79), 804px -388px rgba(247,244,237,0.53), -62px 474px rgba(247,244,237,0.81), 663px 800px rgba(247,244,237,0.73), -166px -791px rgba(247,244,237,0.68), -651px 3px rgba(247,244,237,0.91), 739px 452px rgba(247,244,237,0.85), -74px -192px rgba(247,244,237,0.98), 1115px 218px rgba(247,244,237,0.61), -623px 707px rgba(247,244,237,0.71), 283px 268px rgba(247,244,237,0.56), -809px -274px rgba(247,244,237,0.59), -437px -364px rgba(247,244,237,0.62), 733px -597px rgba(247,244,237,0.49), 1244px 852px rgba(247,244,237,0.43), -870px 141px rgba(247,244,237,0.77), -8px 88px rgba(247,244,237,0.69), -197px 757px rgba(247,244,237,0.53), 1279px -338px rgba(247,244,237,0.53), 1020px 403px rgba(247,244,237,0.37), 573px 789px rgba(247,244,237,0.74), -1071px 294px rgba(247,244,237,0.40), 967px 201px rgba(247,244,237,0.85), -53px -339px rgba(247,244,237,0.78), 1279px 733px rgba(247,244,237,0.53), 636px -665px rgba(247,244,237,0.44), -587px 62px rgba(247,244,237,0.43), 784px 761px rgba(247,244,237,0.76), 542px -152px rgba(247,244,237,0.81), 845px 80px rgba(247,244,237,0.50), -1183px 737px rgba(247,244,237,0.74), -422px -712px rgba(247,244,237,0.94), -520px 116px rgba(247,244,237,0.64), -269px -88px rgba(247,244,237,0.61), 87px -235px rgba(247,244,237,0.45), -789px 601px rgba(247,244,237,0.86), -938px -618px rgba(247,244,237,0.99), -461px 187px rgba(247,244,237,0.89), 926px -458px rgba(247,244,237,0.54), 42px -765px rgba(247,244,237,0.89), -1126px 597px rgba(247,244,237,0.54), 1168px 188px rgba(247,244,237,0.99), 183px 260px rgba(247,244,237,0.53), 16px 275px rgba(247,244,237,0.89); }
.stars-near { box-shadow: -1288px 830px rgba(247,244,237,0.58), -1049px -363px rgba(247,244,237,0.54), 1173px -412px rgba(247,244,237,0.41), -1242px -482px rgba(247,244,237,0.53), 160px 279px rgba(247,244,237,0.84), 486px -667px rgba(247,244,237,0.93), -1231px -86px rgba(247,244,237,0.78), 725px -53px rgba(247,244,237,0.78), -234px -510px rgba(247,244,237,0.74), -256px 225px rgba(247,244,237,0.95), 629px 267px rgba(247,244,237,0.73), -854px 50px rgba(247,244,237,0.92), -384px 354px rgba(247,244,237,0.99), -487px 756px rgba(247,244,237,0.95), -316px -57px rgba(247,244,237,0.86), 864px -137px rgba(247,244,237,0.37), 792px -644px rgba(247,244,237,0.52), 120px -187px rgba(247,244,237,0.76), 135px -869px rgba(247,244,237,0.66), 358px -730px rgba(247,244,237,0.90), -23px 629px rgba(247,244,237,0.54), -1239px -368px rgba(247,244,237,0.88), 264px -79px rgba(247,244,237,0.57), 624px 44px rgba(247,244,237,0.99), -1246px 595px rgba(247,244,237,0.69), -468px 226px rgba(247,244,237,0.68), 409px 745px rgba(247,244,237,0.65), 1240px 564px rgba(247,244,237,0.38), 540px -428px rgba(247,244,237,0.77), -331px 267px rgba(247,244,237,0.91), -430px 167px rgba(247,244,237,0.38), -797px -500px rgba(247,244,237,0.65), -291px -513px rgba(247,244,237,0.77), -499px -388px rgba(247,244,237,0.49), 1116px -586px rgba(247,244,237,0.40), -522px -412px rgba(247,244,237,0.40), 774px 281px rgba(247,244,237,0.74), -875px 338px rgba(247,244,237,0.76), 1295px 732px rgba(247,244,237,0.36), 1111px -243px rgba(247,244,237,0.91), 745px -31px rgba(247,244,237,0.75), -227px 744px rgba(247,244,237,0.62), -246px 337px rgba(247,244,237,0.60), -17px 38px rgba(247,244,237,0.75), 467px 784px rgba(247,244,237,0.93); }
/* stars:end */

/* Words that fly toward you out of the dark, very blurred: zmanim, tefillah changes and calendar words. */
.field { position: absolute; inset: 0; perspective: 600px; perspective-origin: 50% 40%; }
/* A darker clearing in the middle keeps the logo, the words and the sign-up box apart from the flying words. */
.space::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 36% 46% at 50% 50%, rgba(14, 9, 7, 0.94) 0%, rgba(14, 9, 7, 0.8) 50%, rgba(14, 9, 7, 0) 100%);
}
/* On short screens (a phone turned sideways) the words are smaller, so they never overlap. */
@media (max-height: 500px) and (min-aspect-ratio: 4/5) {
  .field { --fs: 0.75; }
}
/* On tall, narrow screens the words fly wider and smaller, so they never overlap. */
@media (max-aspect-ratio: 4/5) {
  .field { --kx: 2.2; --fs: 0.75; }
  .space::after { background: radial-gradient(ellipse 80% 36% at 50% 50%, rgba(14, 9, 7, 0.94) 0%, rgba(14, 9, 7, 0.8) 55%, rgba(14, 9, 7, 0) 100%); }
}
.w {
  position: absolute; left: 50%; top: 40%;
  white-space: nowrap;
  font-size: calc(var(--s) * var(--fs, 1));
  font-weight: 500;
  opacity: 0;
  will-change: transform, opacity;
  animation: fly var(--d) linear var(--t) infinite;
}
.w[lang="he"] { font-family: "Arial Hebrew", "Noto Sans Hebrew", "Segoe UI", Arial, sans-serif; }
/* The glow is always blurred. The sharp copy fades in only while the word is close, so it can be read for a moment. */
.w .b { color: transparent; text-shadow: 0 0 var(--b) rgba(247, 223, 185, 0.95); }
.w .s {
  position: absolute; left: 0; top: 0;
  color: rgba(247, 244, 237, 0.95);
  text-shadow: 0 0 6px rgba(247, 223, 185, 0.45);
  opacity: 0;
  will-change: opacity;
  animation: focus var(--d) linear var(--t) infinite;
}
@keyframes focus {
  0%, 72% { opacity: 0; }
  81%     { opacity: 1; }
  87%     { opacity: 1; }
  93%, 100% { opacity: 0; }
}
@keyframes fly {
  0%   { transform: translate(-50%, -50%) translate3d(calc(var(--x) * var(--kx, 1)), var(--y), -1700px); opacity: 0; }
  62%  { opacity: 0; }
  78%  { opacity: var(--o); }
  90%  { opacity: var(--o); }
  100% { transform: translate(-50%, -50%) translate3d(calc(var(--x) * var(--kx, 1)), var(--y), 320px); opacity: 0; }
}

/* ---------- The page ---------- */
main {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(40px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
  text-align: center;
}

/* The logo hovers in space, turning a little, with real depth. */
.logo {
  position: relative;
  width: clamp(116px, 24vmin, 200px);
  aspect-ratio: 1;
  perspective: 900px;
  margin-bottom: clamp(26px, 5vh, 48px);
  animation: arrive 1.6s ease-out both;
}
.halo {
  position: absolute; inset: -80%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 223, 185, 0.16) 0%, rgba(247, 223, 185, 0.06) 30%, rgba(247, 223, 185, 0) 62%);
  animation: breathe 8s ease-in-out infinite;
}
.hover { position: absolute; inset: 0; transform-style: preserve-3d; animation: hover 10s ease-in-out infinite; }
.hover svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateZ(var(--z, 0)); }
.hover svg line { stroke: currentColor; stroke-width: 22; }
.hover .edge { color: var(--c); }
.hover .face { color: var(--ivory); }
@keyframes hover {
  0%, 100% { transform: translateY(0) rotateX(10deg) rotateY(-18deg); }
  50%      { transform: translateY(-10px) rotateX(-8deg) rotateY(18deg); }
}
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } }
@keyframes arrive { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }

h1 {
  margin: 0;
  font-size: clamp(30px, 6vw, 58px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.12;
  text-wrap: balance;
  max-width: 16em;
  animation: rise 1s ease-out 0.5s both;
}
.date {
  margin: clamp(14px, 2.6vh, 22px) 0 0;
  font-size: clamp(15px, 1.7vw, 19px);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--gold);
  animation: rise 1s ease-out 0.8s both;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Still version for people who turn motion off. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .w { opacity: var(--o); transform: translate(-50%, -50%) translate3d(calc(var(--x) * var(--kx, 1)), var(--y), var(--zs)); }
  .w .s { opacity: 0.7; }
  .hover { transform: rotateX(6deg) rotateY(-14deg); }
}