/* =====================================================================
   Smart Calendar — night theme (login / signup)
   The app's loading-screen look: slate gradient, a soft light beam and
   floating particles (night-sky.js). Opt in with <body class="night">,
   loaded after home.css and pages-new.css. It mostly re-points the
   shared tokens, so the nav, cards, fields and footer follow on their own.
   ===================================================================== */

body.night {
  --cream:       rgba(255, 255, 255, 0.04);
  --cream-2:     rgba(255, 255, 255, 0.06);
  --paper:       rgba(18, 22, 52, 0.62);
  --ink:         #F4F1EC;
  --ink-soft:    #CFCAC2;
  --muted:       #9C978E;
  --line:        rgba(244, 241, 236, 0.10);
  --line-strong: rgba(244, 241, 236, 0.18);
  --lavender:    rgba(143, 116, 255, 0.16);
  --lavender-2:  rgba(143, 116, 255, 0.28);
  --violet-deep: #B9A8FF;
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md:   0 18px 60px rgba(0, 0, 0, 0.35);
  /* html has no background, so this paints on the root canvas, beneath the sky layers */
  background-color: #0A0C1F;
  background-image:
    radial-gradient(ellipse 55% 42% at 58% -6%, rgba(150, 160, 255, 0.42), transparent 70%),
    radial-gradient(ellipse 85% 60% at 72% 22%, rgba(70, 80, 180, 0.38), transparent 72%),
    linear-gradient(180deg, #27357A 0%, #171E47 48%, #0A0C1F 100%);
  background-attachment: fixed;
  color: var(--ink);
}

/* sky layers drawn by night-sky.js; content sits above them */
.night-sky, .night-beam { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.night-sky { width: 100%; height: 100%; }
.night-beam {
  top: -25%; left: 28%; right: auto; bottom: auto; width: 72%; height: 150%;
  background: linear-gradient(115deg, transparent 32%, rgba(170, 200, 255, 0.12) 46%, rgba(170, 200, 255, 0.05) 56%, transparent 70%);
  filter: blur(28px);
  animation: night-beam 9s ease-in-out infinite alternate;
}
@keyframes night-beam {
  from { opacity: 0.7; transform: translateX(-2%) rotate(-2deg); }
  to   { opacity: 1;   transform: translateX(2%) rotate(2deg); }
}

/* nav + mobile menu */
body.night .nav.scrolled { background: rgba(14, 17, 40, 0.72); }
body.night .nav-link:hover,
body.night .mobile-menu a:hover { background: rgba(244, 241, 236, 0.08); }
body.night .mobile-menu { background: #121634; }

/* the cream page's glow blobs don't belong on the night sky */
body.night .auth-wrap::before, body.night .auth-wrap::after,
body.night .page-hero::before { display: none; }

/* glass card */
body.night .auth-card {
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-color: rgba(244, 241, 236, 0.12);
}
body.night .auth-card h1 { color: #F4F1EC; }
/* the cream divider masks its line with a solid chip; on glass, draw two lines instead */
body.night .auth-divider { display: flex; align-items: center; gap: 12px; }
body.night .auth-divider::before,
body.night .auth-divider::after { content: ""; position: static; flex: 1; height: 1px; background: var(--line); }
body.night .auth-divider span { background: none; padding: 0; }
body.night .field input { color: #F4F1EC; background: rgba(255, 255, 255, 0.05); border-color: rgba(244, 241, 236, 0.14); }
body.night .field input::placeholder { color: #8E897F; }
body.night .field input:focus { border-color: #8F74FF; box-shadow: 0 0 0 3px rgba(143, 116, 255, 0.22); }
body.night .field input:-webkit-autofill { -webkit-text-fill-color: #F4F1EC; -webkit-box-shadow: 0 0 0 40px #1C2150 inset; caret-color: #F4F1EC; }
body.night .auth-error { background: rgba(214, 69, 58, 0.14); color: #F3B1A9; border-color: rgba(214, 69, 58, 0.35); }

/* Google stays white (brand rule); Apple gets a light edge so it doesn't vanish */
body.night .btn-google { color: #1B1813; border-color: transparent; }
body.night .btn-google:hover { border-color: transparent; background: #F4F1EC; }
body.night .btn-apple { border-color: rgba(244, 241, 236, 0.22); }

/* signup testimonials */
body.night .auth-quote,
body.night .auth-quote:nth-child(2),
body.night .auth-quote:nth-child(3) {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(244, 241, 236, 0.10);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
body.night .auth-quote b,
body.night .auth-quote:nth-child(2) b,
body.night .auth-quote:nth-child(3) b { color: #F4F1EC; }
body.night .auth-quote p,
body.night .auth-quote:nth-child(2) p,
body.night .auth-quote:nth-child(3) p { color: #CFCAC2; }

/* download + contact */
body.night .btn-apple-dark { background: rgba(244, 241, 236, 0.08); border-color: rgba(244, 241, 236, 0.22); color: #F4F1EC; }
body.night .btn-apple-dark:hover { background: rgba(244, 241, 236, 0.14); }
body.night .contact-side .disc p { color: #CFCAC2; }
body.night .contact-side .disc a { color: #C9BCFF; }

@media (prefers-reduced-motion: reduce) {
  .night-beam { animation: none; }
}

/* =====================================================================
   Night band — the home page hero. Same sky, limited to the band, fading
   into the cream page at the bottom. The demo panel keeps its own light
   colours so it still reads as the product.
   ===================================================================== */
.night-band {
  position: relative;
  isolation: isolate;
  /* No extra padding: the band must not change the page's spacing. The fade continues
     below it, behind the reviews (::after). */
  --night-fade-below: clamp(360px, 36vw, 520px);
  background-color: #0A0C1F;
  background-image:
    radial-gradient(ellipse 55% 42% at 58% -6%, rgba(150, 160, 255, 0.42), transparent 70%),
    radial-gradient(ellipse 85% 60% at 72% 22%, rgba(70, 80, 180, 0.38), transparent 72%),
    linear-gradient(180deg, #27357A 0%, #171E47 48%, #0A0C1F 100%);
  --ink:         #F4F1EC;
  --ink-soft:    #CFCAC2;
  --muted:       #A6A2B8;
  --line-strong: rgba(244, 241, 236, 0.22);
  color: var(--ink);
}
.night-band .night-sky, .night-band .night-beam { position: absolute; z-index: -1; }
.night-band .night-sky { inset: 0; }
.night-band .night-beam {
  bottom: 0; height: auto;
  /* ends inside the band; fade it out so it doesn't stop in a straight line */
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 92%);
}
/* The fade reaches below the band, so only clip sideways (the beam is rotated). */
@supports (overflow-x: clip) { .night-band { overflow-x: clip; } }
/* Content above the fade: the band's own sections, and the sections after it. */
.night-band > section, .night-band ~ section { position: relative; z-index: 1; }
/* fade into the cream page */
.night-band::after {
  /* Starts at the band's bottom edge in the band's own colour and eases (smootherstep)
     through indigo, periwinkle and lavender into the cream page, behind the reviews. */
  content: ""; position: absolute; left: 0; right: 0;
  top: calc(100% - 1px); /* 1px overlap: no sub-pixel seam */
  height: var(--night-fade-below);
  /* night-sky.js replaces this with a longer, two-part fade sized to the page */
  background: var(--night-fade-bg, linear-gradient(180deg,
    #0A0C1F 0%,
    rgb(11, 14, 36) 5%,
    rgb(12, 15, 38) 10%,
    rgb(14, 17, 43) 15%,
    rgb(17, 21, 52) 20%,
    rgb(22, 26, 64) 25%,
    rgb(29, 34, 81) 30%,
    rgb(37, 42, 100) 35%,
    rgb(49, 54, 123) 40%,
    rgb(73, 77, 151) 45%,
    rgb(98, 101, 180) 50%,
    rgb(129, 129, 204) 55%,
    rgb(163, 161, 220) 60%,
    rgb(194, 191, 235) 65%,
    rgb(214, 210, 239) 70%,
    rgb(228, 225, 239) 75%,
    rgb(239, 237, 239) 80%,
    rgb(247, 244, 240) 85%,
    rgb(251, 249, 240) 90%,
    #FDFBF0 95%,
    #FDFBF0 100%));
  pointer-events: none; z-index: 0;
}
/* The hero clips overflow for its cream glow blobs, which are hidden here; clipping
   would also cut the demo panel's shadow into a hard edge on phones. */
.night-band > .hero { overflow: visible; }
.night-band .hero::before, .night-band .hero::after { display: none; }
.night-band .violet-word { background-image: linear-gradient(100deg, #B9A8FF 0%, #9B84FF 60%, #8B6CFF 100%); color: #B9A8FF; }
.night-band .lead i { color: #F4F1EC; }
.night-band .btn-google { color: #1B1813; border-color: transparent; }
.night-band .btn-apple-dark { background: rgba(244, 241, 236, 0.08); border-color: rgba(244, 241, 236, 0.22); color: #F4F1EC; }
.night-band .btn-apple-dark:hover { background: rgba(244, 241, 236, 0.14); }
.night-band .demo-pill:hover { border-color: rgba(244, 241, 236, 0.5); color: #F4F1EC; }
.night-band .demo-pill[aria-selected="true"] { background: #F4F1EC; border-color: #F4F1EC; color: #171E47; }
.night-band .demo-frame { background: #10153A; border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 24px 60px rgba(10, 12, 40, 0.32); }
/* the panel is the product: back to the light page tokens inside it */
.night-band .demo-screen { --ink: #1B1813; --ink-soft: #43403A; --muted: #807A6B; --line-strong: #D8CFB6; color: var(--ink); }

/* the labels that sit on the night sky and its fade read white */
.night-band .logos-label { color: #F4F1EC; opacity: 0.9; }
.night-band .wordmark { color: #FFFFFF; opacity: 0.88; }
.night-band + section .anon-note,
.night-band + section .anon-note span { color: rgba(244, 241, 236, 0.92); }

/* nav while it sits over the band */
.nav.over-night { --ink: #F4F1EC; --ink-soft: #CFCAC2; --line-strong: rgba(244, 241, 236, 0.22); color: var(--ink); }
.nav.over-night .nav-link:hover { background: rgba(244, 241, 236, 0.10); }
.nav.over-night.scrolled { background: rgba(14, 17, 40, 0.72); border-bottom-color: rgba(244, 241, 236, 0.08); }

/* Smooth page-to-page fade (cross-document View Transitions). Both pages need this
   rule; browsers without support just navigate normally. The site nav gets its own
   layer so it holds steady while the page beneath it crossfades. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.38s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.nav { view-transition-name: site-nav; }
::view-transition-group(site-nav) { animation-duration: 0.38s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}