/* Welcome page, award pass: a display face for headlines, a stage every visitor can
   touch, one signature "got it" moment, and a real game that loads on request.
   Loads after welcome.css and only adds to it. */

/* 1. Headline face. Baloo 2, Latin subset only (37 KB); Chinese headlines keep the system face. */
@font-face{font-family:"ClassPlay Headline";src:url("../assets/fonts/Baloo2-Variable-latin.woff") format("woff");font-style:normal;font-weight:400 800;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-2019,U+201C-201D,U+2022,U+2026}
.welcome-page{--welcome-headline:"ClassPlay Headline","ClassPlay Round","PingFang SC","Microsoft YaHei",system-ui,sans-serif;--welcome-sea:#eaf2ef;--welcome-glow:#e3ecdc}
.welcome-copy h1{font-family:var(--welcome-headline);font-weight:800;letter-spacing:-1.2px;line-height:1.02;font-size:clamp(42px,4.9vw,74px)}
.welcome-main h2,.welcome-closing h2,.demo-complete h4,.welcome-process-grid h3{font-family:var(--welcome-headline);font-weight:800;letter-spacing:-.4px}
.welcome-main h2{font-size:clamp(31px,3.3vw,46px);line-height:1.08}
.welcome-process-grid h3{letter-spacing:0}
html[lang="zh-CN"] .welcome-copy h1{letter-spacing:0;font-weight:900}
html[lang="zh-CN"] .welcome-main h2,html[lang="zh-CN"] .welcome-closing h2{letter-spacing:0;font-weight:900}

/* 2. Room to breathe on wide screens. */
.welcome-main,.welcome-page .welcome-footer{max-width:1440px}
.welcome-hero{gap:40px;padding:72px 0 80px;overflow-x:clip}
.welcome-hero::before{content:"";position:absolute;right:-6%;top:-10%;width:min(58vw,760px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--welcome-glow),transparent 72%);z-index:0;pointer-events:none}
.welcome-copy,.welcome-stage{position:relative;z-index:1}
@media(min-width:1200px){.welcome-stage{max-width:600px;height:480px}.piece-card{width:47%}.piece-tiles{top:282px}.welcome-lead{font-size:20px;max-width:500px}}
@media(min-width:1500px){.welcome-hero{padding:92px 0 96px}}

/* 3. Glyphs drawn, not typed. */
.welcome-spark{width:34px;height:34px;fill:currentColor;animation:welcome-twinkle 4.6s ease-in-out infinite}
.spark-two{width:26px;height:26px;animation-delay:-1.6s}.spark-three{width:28px;height:28px;fill:none;animation-delay:-3.1s}
.welcome-text-link .welcome-glyph-arrow{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:translate .18s}
.welcome-text-link:hover .welcome-glyph-arrow{translate:3px 3px}
.welcome-catalog summary>span:last-child{display:grid;place-items:center;width:28px;height:28px}.welcome-catalog-toggle svg{width:22px;height:22px}
.closing-star{width:56px;height:56px;flex:none;color:#e7bb62}
.welcome-footer-brand svg{width:20px;height:20px;color:#ad7b2d}
.welcome-footer-top{gap:6px}.welcome-footer-top svg{width:18px;height:18px}
.piece-match-mark svg,.piece-tiles-check svg{width:16px;height:16px;display:block}
@keyframes welcome-twinkle{0%,100%{scale:1;opacity:1}50%{scale:.72;opacity:.55}}

/* 4. The stage: every piece is a control. */
.welcome-stage{cursor:default}
.piece-card{cursor:pointer}
.piece-card-turn{appearance:none;border:0;margin:13px 0 12px;padding:0;width:100%;cursor:pointer;font:inherit;color:inherit}
.piece-card-turn:focus-visible,.piece-wheel:focus-visible,.piece-tiles button:focus-visible,.piece-card-speak:focus-visible{outline:3px solid #155f69;outline-offset:3px}
.piece-wheel{appearance:none;border:0;padding:0;margin:0;background:none;display:block;cursor:pointer;color:inherit;font:inherit}
.piece-wheel-disc{display:block}
.piece-wheel:hover .piece-wheel-hub{scale:1.08}.piece-wheel-hub{transition:scale .18s}
.piece-card-speak{appearance:none;border:0;padding:0;margin:0;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#eef3e6;color:var(--welcome-teal);cursor:pointer;transition:background .18s,scale .18s}
.piece-card-speak svg{width:22px;height:22px}.piece-card-speak:hover{background:#dfeadb;scale:1.08}
.piece-card.is-speaking .piece-card-speak{animation:welcome-speak .7s ease-out}
@keyframes welcome-speak{0%{scale:1}30%{scale:1.3;background:#cfe3d6}100%{scale:1}}
.piece-tiles button{appearance:none;margin:0;padding:0;width:48px;height:56px;display:grid;place-items:center;background:#fffdf2;border:1px solid #cfb986;box-shadow:0 4px 0 #d3b97c;border-radius:7px;font:900 31px/1 "ClassPlay Round","PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:#795224;cursor:pointer;transition:translate .14s,background .18s,color .18s,box-shadow .14s}
.piece-tiles button:hover{translate:0 -2px}
.piece-tiles button.is-lit{background:#1c705c;border-color:#155f4f;color:#fff;box-shadow:0 4px 0 #0f4a3d}
.piece-tiles.is-wrong button{animation:welcome-shake .45s ease-in-out}
.piece-tiles-check{opacity:.35;scale:.8;transition:opacity .2s,scale .25s cubic-bezier(.3,1.6,.5,1)}
.piece-tiles.is-spelled .piece-tiles-check{opacity:1;scale:1.15}
.piece-match.is-bouncing{animation:welcome-bounce .9s cubic-bezier(.3,1.4,.5,1)}
@keyframes welcome-shake{20%{translate:-4px 0}45%{translate:4px 0}70%{translate:-2px 0}}
@keyframes welcome-bounce{0%{translate:0 0;rotate:-3deg}35%{translate:0 -12px;rotate:2deg}100%{translate:0 0;rotate:-3deg}}
/* Idle life: the sun's rays turn, its eyes blink, the wheel rocks (already), the tiles float (already). */
.hero-sun-rays{transform-box:fill-box;transform-origin:center;animation:welcome-rays 24s linear infinite}
.hero-sun-eyes{transform-box:fill-box;transform-origin:center;animation:welcome-blink 5.2s ease-in-out infinite}
@keyframes welcome-rays{to{rotate:360deg}}
@keyframes welcome-blink{0%,92%,100%{scale:1 1}95%{scale:1 .1}}

/* 5. The signature moment. Confetti, then a stamp. The host clips nothing; it
   sits over its piece and never catches a tap. */
.welcome-got-it,.demo-reward-particles{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:6}
.welcome-confetti{position:absolute;width:12px;height:12px;translate:-50% -50%;opacity:0;animation:welcome-confetti 1.25s var(--delay,0ms) cubic-bezier(.15,.75,.35,1) forwards}
@keyframes welcome-confetti{0%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.4)}12%{opacity:1;transform:translate(calc(var(--dx)*.35),calc(var(--dy)*.35)) rotate(calc(var(--turn)*.3)) scale(1.1)}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 70px)) rotate(var(--turn)) scale(.7)}}
.welcome-stamp{position:absolute;translate:-50% -100%;display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;background:#fff8e3;border:2px solid #1c705c;color:#17553f;font:900 15px/1 "ClassPlay Round","PingFang SC","Microsoft YaHei",system-ui,sans-serif;box-shadow:0 5px 0 #1c705c33;white-space:nowrap;animation:welcome-stamp 1.6s cubic-bezier(.2,1.5,.4,1) forwards}
.welcome-stamp svg{width:18px;height:18px}
@keyframes welcome-stamp{0%{opacity:0;scale:.5;rotate:-14deg}22%{opacity:1;scale:1.08;rotate:4deg}35%{scale:1;rotate:-2deg}80%{opacity:1;translate:-50% -100%}100%{opacity:0;translate:-50% -140%}}
.welcome-page:not(.welcome-motion-enabled) .welcome-stamp{animation:none;opacity:1}

/* 7. Section order: the tracing tool now sits after the templates, as one tool among many. */
.welcome-main .welcome-tool-callout{margin-top:56px}

/* 8. Small screens. */
@media(max-width:1100px){.piece-tiles button{width:40px;height:48px;font-size:27px}}
@media(max-width:900px){
  .piece-tiles button{width:33px;height:41px;font-size:24px}
  .welcome-main .welcome-tool-callout{margin-top:40px}
}
@media(max-width:700px){.piece-tiles button{width:40px;height:46px;font-size:26px}}
@media(max-width:460px){.piece-tiles button{width:33px;height:40px;font-size:25px}}
@media(max-width:350px){.piece-tiles button{width:28px;height:35px;font-size:21px}}

/* 9. Top bar on phones and small tablets: section links and Log in behind one Menu button. */
.welcome-menu-toggle{display:none;order:9}
.welcome-nav-login{display:none!important}
.welcome-narrow-only{display:none}
@media(max-width:900px){
  .welcome-page .site-header-inner{position:relative}
  .welcome-menu-toggle{display:grid;place-items:center;width:44px;height:44px;flex:none;padding:0;border:1px solid #c5d6d3;border-radius:10px;background:transparent;color:var(--welcome-ink);cursor:pointer}
  .welcome-menu-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .welcome-menu-toggle:focus-visible{outline:3px solid var(--welcome-ink);outline-offset:2px}
  .welcome-menu-open .welcome-menu-toggle{background:#edf4ef}
  .welcome-page .site-header-inner.welcome-menu-open .welcome-section-nav{display:grid;position:absolute;z-index:90;top:calc(100% - 6px);left:12px;right:12px;gap:2px;margin:0;padding:8px;background:#fffdf6;border:1px solid #d7e3d9;border-radius:14px;box-shadow:0 14px 34px #15374726}
  .welcome-menu-open .welcome-section-nav a{padding:12px 14px;border-radius:10px;font-size:15px}
  .welcome-menu-open .welcome-section-nav a:hover{background:#eef4ec;text-decoration:none}
}
@media(max-width:520px){
  .welcome-menu-open .welcome-nav-login:not([hidden]){display:flex!important;border-top:1px solid #e3ebe6;border-radius:0 0 10px 10px;margin-top:4px}
  .welcome-account a[href*="mode=login"]{display:none}
  .welcome-wide-only{display:none}.welcome-narrow-only{display:inline}
  .welcome-page .site-header-inner{display:flex;flex-wrap:nowrap;align-items:center;gap:8px}
  .welcome-page .site-brand{margin-right:auto;min-width:0}
  .welcome-account{margin-left:0;gap:6px}
  .welcome-account .site-button{flex:none}
}
/* The hero's glow must not wash over the top bar's buttons; the bar and its menu sit above the page. */
.welcome-page .site-header{position:relative;z-index:20}