/* ===================================================================
   Shared styles for every page on the site: index.html and the
   tutorial-*.html pages.
   Page-specific rules stay in a <style> block inside the page itself.
   =================================================================== */

/* ---------------------------------------------------------------
   Theme tokens. Tweak these to restyle the whole page.
--------------------------------------------------------------- */
:root {
  --bg-deep:     #05070f;
  --bg-mid:      #0b1226;
  --accent:      #4ea8ff;
  --accent-2:    #7af2d4;
  --sale:        #ffd27a;   /* discounted price / notice highlight */
  /* Notice-banner hue, as bare RGB channels so the text, the glow, the
     background wash and the hairline all derive from this one line.
     Change these three numbers to recolour the whole banner. */
  --notice-rgb:  255, 200, 97;   /* amber */
  --text:        #e8eefc;
  --text-dim:    #93a1c0;
  --text-faint:  #6b7a99;
  --btn-text:    #05070f;
  --card-bg:     rgba(255, 255, 255, .045);
  --card-border: rgba(255, 255, 255, .09);
  --hairline:    rgba(255, 255, 255, .055);
  --maxw:        1040px;

  /* Height of the top notice banner. Stays 0 until config.js supplies
     a notice; everything below the banner offsets itself by this. */
  --notice-h:    0px;
}

html.has-notice { --notice-h: 38px; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(84px + var(--notice-h));   /* clear the fixed header */
}

body {
  min-height: 100%;
  margin: 0;
  background: var(--bg-deep);
  color: var(--text);
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
               "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Soft nebula wash, fixed so it stays put while the page scrolls. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(60% 55% at 50% 38%, rgba(78, 168, 255, .16), transparent 70%),
    radial-gradient(45% 40% at 78% 12%, rgba(122, 242, 212, .10), transparent 70%),
    radial-gradient(80% 80% at 50% 50%, var(--bg-mid), var(--bg-deep) 75%);
  z-index: -1;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------ header ------------------------------ */
header {
  position: fixed;
  top: var(--notice-h);
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(10px, 2.2vw, 16px) clamp(14px, 3vw, 28px);
  padding-top: max(clamp(10px, 2.2vw, 16px), env(safe-area-inset-top));
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease;
}
header.scrolled {
  background: rgba(7, 11, 24, .72);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: rgba(255, 255, 255, .07);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.brand img { width: 28px; height: 28px; border-radius: 8px; }
.brand span { font-size: 16px; font-weight: 600; letter-spacing: .5px; }

.login-btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--btn-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .5px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 22px rgba(78, 168, 255, .28);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.login-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 10px 28px rgba(78, 168, 255, .42);
}
.login-btn:active { transform: translateY(0); }
.login-btn:focus-visible,
.cta:focus-visible,
.code:focus-visible,
.brand:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}

/* --------------------------- notice banner --------------------------- */
.notice-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  height: var(--notice-h);
  overflow: hidden;
  /* Same dark navy as the scrolled header, so the banner and the header
     read as one piece of chrome, lifted by a thin wash of the accent. */
  background:
    linear-gradient(rgba(var(--notice-rgb), .10), rgba(var(--notice-rgb), .05)),
    rgba(8, 12, 26, .92);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
/* Hairline that fades out at both ends rather than cutting a hard edge. */
.notice-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(var(--notice-rgb), 0),
    rgba(var(--notice-rgb), .45) 18%,
    rgba(var(--notice-rgb), .45) 82%,
    rgba(var(--notice-rgb), 0));
}

.notice-track {
  display: flex;
  flex: 0 0 auto;
  white-space: nowrap;
  will-change: transform;
}
/* Pause while hovered so a long notice can actually be read. */
.notice-bar:hover .notice-track { animation-play-state: paused; }

.notice-item {
  flex: 0 0 auto;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .5px;
  color: rgb(var(--notice-rgb));
  /* Soft glow, the same trick the buttons and the globe already use. */
  text-shadow: 0 0 16px rgba(var(--notice-rgb), .35);
}

/* Reduced-motion fallback: one centred line, no movement. */
.notice-bar.static { justify-content: center; padding: 0 16px; }
.notice-bar.static .notice-track { flex: 0 1 auto; min-width: 0; }
.notice-bar.static .notice-item {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@keyframes notice-scroll {
  from { transform: translateX(var(--from, 100%)); }
  to   { transform: translateX(var(--to, -100%)); }
}


/* ----------------------------- sections ----------------------------- */
.section { padding: clamp(46px, 8.5vh, 86px) 20px; }
/* Extra head room so the first section clears the fixed header. */
.section-top { padding-top: calc(clamp(84px, 12vh, 116px) + var(--notice-h)); }
.container { max-width: var(--maxw); margin: 0 auto; }

.section h1,
.section h2 {
  margin: 0;
  font-size: clamp(23px, 4.4vw, 34px);
  font-weight: 650;
  letter-spacing: 1px;
  line-height: 1.4;
}

.lead {
  margin: 14px 0 0;
  max-width: 40em;
  font-size: clamp(14px, 2.3vw, 16px);
  line-height: 1.95;
  color: var(--text-dim);
}

.head-center { text-align: center; }
.head-center .lead { margin-left: auto; margin-right: auto; }

/* Scroll-in reveal. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1),
              transform .7s cubic-bezier(.2, .7, .2, 1);
}
.reveal.in { opacity: 1; transform: none; }


/* -------------------------------- CTA -------------------------------- */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: clamp(26px, 4.5vh, 40px);
}
.cta {
  display: inline-block;
  padding: 14px 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--btn-text);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .5px;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(78, 168, 255, .3);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 12px 34px rgba(78, 168, 255, .44);
}
.cta:active { transform: translateY(0); }

/* Secondary action: same shape, no fill. */
.cta-ghost {
  background: none;
  color: var(--text);
  border: 1px solid var(--card-border);
  box-shadow: none;
}
.cta-ghost:hover {
  border-color: rgba(78, 168, 255, .5);
  background: rgba(78, 168, 255, .08);
  box-shadow: 0 8px 24px rgba(78, 168, 255, .14);
}

/* Stacked rows — primary actions first, secondary below — read as one block. */
.cta-row + .cta-row { margin-top: 14px; }

/* ------------------------------ footer ------------------------------ */
footer {
  margin-top: clamp(38px, 7vh, 68px);
  padding: 30px 20px calc(30px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, .06);
  text-align: center;
  font-size: 12.5px;
  letter-spacing: .5px;
  color: var(--text-faint);
}


/* ---------------------------- breakpoints ---------------------------- */
@media (max-width: 560px) {
  .login-btn { padding: 9px 18px; font-size: 14px; }
  html.has-notice { --notice-h: 34px; }
  .notice-item { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}