/* EasyTouch page, Neon writing look: night colours for the whole page, a handwritten sum that writes itself in neon
   on a touchpad in the hero, a soft glow that follows the pointer, and a glowing hand-drawn glyph on each feature.
   The pad, glow and glyphs are added by easytouch-neon.js. Loaded after the page's own styles, so it wins. */

/* ---- TC-B4 night colours for the whole page, in light and dark ---- */
html[data-app="easytouch"], html[data-app="easytouch"].calm {
  color-scheme: dark;
  --bg: #13142A; --surface: #1A1C38; --surface-alt: #222548; --line: #2A2C55;
  --text: #E9EAFB; --muted: #A6A9D6; --subtle: #8D90C2;
  --accent: #818DE6; --accent-soft: #252852; --on-accent: #13142A;
  --link: #AEB5FF; --link-hover: #D6DAFF; --button: #818DE6; --button-hover: #9CA6F0;
  --ok: #9CC08A; --ok-soft: #1E2A2A; --soon: #D9B36A; --soon-soft: #2E2A2A; --lab: #A6A9D6; --lab-soft: #222548;
  --band-bg: #0C0D1F; --band-text: #E9EAFB; --band-muted: #A6A9D6; --band-line: #2A2C55;
}
html[data-app="easytouch"] body { background: var(--bg); }
html[data-app="easytouch"] h1, html[data-app="easytouch"] h2 { text-shadow: 0 0 22px rgba(129, 141, 230, .6); }
html[data-app="easytouch"] .btn-primary { box-shadow: 0 0 24px rgba(129, 141, 230, .45); }
html[data-app="easytouch"] .card { background: rgba(255, 255, 255, .04); }
html[data-app="easytouch"] .step .num { background: #2A2C55; color: #C9CCFF; box-shadow: 0 0 14px rgba(129, 141, 230, .5); }

/* ---- TC-B1 a touchpad in the hero where a sum writes itself in neon, then the answer shows ---- */
.hero .art .ring { display: none; }
.tc-pad {
  position: absolute; left: 6%; right: 6%; top: 18%; height: 46%; border-radius: 18px; border: 1px solid #2E3166;
  background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 40px rgba(129, 141, 230, .08);
  display: flex; flex-direction: column; justify-content: center; align-items: center; pointer-events: none;
}
.tc-hw { width: 92%; height: auto; display: block; overflow: visible; }
.tc-hw text { font: 78px "Ink Free", "Segoe Print", "Bradley Hand", cursive; }
.tc-hw .sum { fill: transparent; stroke: #AEB5FF; stroke-width: 1.6; stroke-dasharray: 700; stroke-dashoffset: 700; filter: drop-shadow(0 0 6px rgba(150, 160, 255, .9)); }
.tc-hw .ans { fill: #F2F3FF; opacity: 0; filter: drop-shadow(0 0 12px #818DE6); }
html.motion .tc-hw .sum { animation: tc-write 7s ease-in-out infinite; }
html.motion .tc-hw .ans { animation: tc-ans 7s ease-in-out infinite; }
.tc-pad.paused .tc-hw text { animation-play-state: paused; }
@keyframes tc-write { 0% { stroke-dashoffset: 700; fill: transparent; opacity: 1; } 40% { stroke-dashoffset: 0; fill: transparent; } 50% { fill: #E9EAFB; } 88% { stroke-dashoffset: 0; fill: #E9EAFB; opacity: 1; } 100% { stroke-dashoffset: 0; fill: #E9EAFB; opacity: 0; } }
@keyframes tc-ans { 0%, 50% { opacity: 0; } 58%, 88% { opacity: 1; } 100% { opacity: 0; } }
html.calm .tc-hw .sum { stroke-dashoffset: 0; fill: #E9EAFB; }
html.calm .tc-hw .ans { opacity: 1; }
.tc-pad small { margin-top: 4px; color: #8D90C2; font-size: .82rem; }
/* The app icon (the eggs use it) sits small under the pad. */
.hero .art .icon-big { width: 17%; top: 84%; filter: drop-shadow(0 0 14px rgba(129, 141, 230, .55)); }
.hero .art .float { background: rgba(26, 28, 56, .92); box-shadow: 0 0 16px rgba(129, 141, 230, .22); }
.hero .art .f1 { left: -2%; top: 0; }
.hero .art .f2 { right: -4%; top: 3%; left: auto; }
.hero .art .f3 { left: -2%; bottom: 12%; }
.hero .art .f4 { right: -2%; bottom: 12%; }
@media (max-width: 480px) { .hero .art .float { font-size: .8rem; padding: 6px 10px; } .tc-pad small { font-size: .74rem; } }

/* ---- TC-B2 a soft glow follows the pointer (fine pointers only; not in calm mode) ---- */
.tc-glow {
  position: fixed; left: 0; top: 0; z-index: 1; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(129, 141, 230, .14), transparent); pointer-events: none;
  opacity: 0; transition: opacity .4s; will-change: transform;
}
.tc-glow.on { opacity: 1; }
html.calm .tc-glow { display: none; }
@media print { .tc-glow { display: none; } }

/* ---- TC-B3 each feature has a hand-drawn glowing glyph ---- */
#features .card .icon.tc-has { width: auto; height: auto; min-width: 48px; background: none; justify-content: flex-start; }
#features .card .icon.tc-has svg { display: none; }
.tc-gly { display: block; font: 2.4rem/1.1 "Ink Free", "Segoe Print", cursive; color: #AEB5FF; text-shadow: 0 0 14px rgba(150, 160, 255, .8); }