/* Motion and dimensional artwork share the calm Langufy color system. */
.motion-toggle { flex-shrink:0; color:var(--deep); background:var(--soft); width:35px; height:35px; }
.motion-toggle .icon { width:21px; height:21px; }
.motion-toggle .motion-play { display:none; }
.motion-toggle[aria-pressed="false"] .motion-pause { display:none; }
.motion-toggle[aria-pressed="false"] .motion-play { display:block; }
.welcome-banner { grid-template-columns:minmax(0,1.16fr) minmax(250px,1fr); min-height:355px; background:linear-gradient(120deg,var(--soft) 40%,var(--surface)); }
.hero-art { position:relative; width:100%; max-width:310px; height:292px; justify-self:center; isolation:isolate; }
.hero-art-image { position:absolute; inset:-14px 0 auto; width:100%; height:auto; object-fit:contain; z-index:1; transform:perspective(850px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform .5s cubic-bezier(.2,.7,.3,1); animation:hero-float 5.5s ease-in-out 2; }
.art-halo { position:absolute; width:92%; aspect-ratio:1; border-radius:50%; top:-5%; left:4%; background:radial-gradient(circle,#c8e8d940,transparent 70%); z-index:0; }
.art-orbit { position:absolute; font-size:26px; color:#79b89e; font-weight:400; z-index:2; pointer-events:none; }
.orbit-one { top:25px; right:0; animation:spark-turn 5.5s ease-in-out 2; }
.orbit-two { top:96px; left:-7px; font-size:20px; color:#b5a17b; animation:spark-turn 5.5s .4s ease-in-out 2; }
.hero-word-chip { position:absolute; z-index:3; left:-3px; right:-3px; bottom:0; display:flex; align-items:center; gap:4px; padding:8px 12px 8px 3px; border:1px solid var(--line); border-radius:13px; background:var(--surface); box-shadow:0 8px 20px #244b3710; }
.hero-word-chip small { display:block; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.8px; margin-bottom:3px; }
.hero-word-chip strong { font-size:16px; font-weight:650; letter-spacing:-.3px; white-space:nowrap; }
.hero-word-chip strong>span { display:block; font-size:12px; font-weight:400; color:var(--muted); letter-spacing:0; }
.lottie-mini { width:69px; height:61px; flex-shrink:0; }
[data-lottie]>svg { display:block; width:100%; height:100%; }
.study-lottie { width:125px; height:104px; margin:-12px 0 10px; }
.result-lottie { width:170px; height:170px; margin:-20px auto 2px; }
.art-3d { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 5px 4px #2b4c3210); transition:transform .5s cubic-bezier(.2,.75,.25,1); }
.collection-cover { height:112px; display:flex; align-items:center; }
.collection-cover-icon.has-art { top:12px; right:20px; width:84px; height:84px; }
.collection-cover-icon.has-art .art-3d[src$="car.png"] { width:68px; height:60px; }
.collection-cover-icon.has-art .art-3d[src$="pear.png"] { width:48px; height:70px; }
.collection-cover:has(.has-art) .collection-tag { max-width:calc(100% - 88px); font-size:12px; line-height:1.8; }
.collection-art.has-art { background:none; width:60px; height:60px; }
.stat-icon.has-art { background:none; border-radius:0; width:40px; height:40px; }
.stat-icon.has-art .art-3d { width:40px; height:38px; }
.btn { position:relative; overflow:hidden; isolation:isolate; transition:background .2s,box-shadow .25s,transform .2s; }
.btn.primary,.btn.hero-button { box-shadow:0 3px 0 #00805e25; }
.btn:active { transform:translateY(1px) scale(.985); box-shadow:none; }
.btn .icon { transition:transform .3s ease; }
.press-wave { position:absolute; pointer-events:none; width:110px; height:110px; margin:-55px; border-radius:50%; background:#ffffff60; z-index:-1; }
.collection-card,.favorite-card,.letter-card { transition:border-color .25s,box-shadow .3s,transform .3s; }
.icon-btn { transition:background .2s,color .2s,transform .2s; }
.icon-btn:active { transform:scale(.92); }
.favorite-toggle.is-saved .icon { animation:favorite-pop .42s ease; }
.switch::after { transition:transform .26s cubic-bezier(.2,.8,.3,1.2); }
.answer-option { transition:border-color .2s,background .2s,box-shadow .2s; }
.answer-option.selected,.answer-option.correct { box-shadow:0 0 0 2px #00bf8b12; }
.answer-option.correct i { animation:favorite-pop .4s ease; }
.study-card { padding:0; border:0; background:transparent; box-shadow:none; perspective:1200px; min-height:365px; }
.study-card.flipped { background:transparent; }
.study-card-inner { display:grid; transform-style:preserve-3d; transition:transform .7s cubic-bezier(.2,.75,.25,1); }
.study-card.flipped .study-card-inner { transform:rotateY(180deg); }
.study-face { grid-area:1 / 1; backface-visibility:hidden; -webkit-backface-visibility:hidden; padding:25px; min-height:365px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:0 6px 0 -2px var(--bg),0 7px 0 -2px var(--line),0 18px 30px #234b3210; }
.study-face-back { transform:rotateY(180deg); background:var(--soft); }
.study-card-head>.icon { width:18px; height:18px; }
.study-face .study-word { padding-top:22px; }
.study-face .study-word h2 { overflow-wrap:anywhere; }
.study-face .flip-label { padding-top:12px; }
@keyframes hero-float { 0%,100%{translate:0 0} 50%{translate:0 -7px} }
@keyframes spark-turn { 0%,100%{rotate:0deg;opacity:.65} 50%{rotate:20deg;opacity:1} }
@keyframes favorite-pop { 0%{scale:.8} 55%{scale:1.15} 100%{scale:1} }
@media(hover:hover) and (pointer:fine) {
  .collection-card:hover,.favorite-card:hover { transform:translateY(-3px); border-color:#aacbbb; box-shadow:0 10px 24px #244b370b; }
  .collection-card:hover .art-3d { transform:translateY(-5px) rotate(-4deg); }
  .letter-card:hover { transform:translateY(-2px); box-shadow:0 7px 16px #244b370a; }
  .btn.primary:hover,.btn.hero-button:hover { box-shadow:0 5px 14px #00a57720; }
  .btn:hover .icon { transform:translateX(2px); }
}
@media(max-width:1250px) and (min-width:1051px) {
  .welcome-banner { grid-template-columns:minmax(0,1fr) 215px; padding:25px; }
  .hero-art { height:270px; }
  .hero-art-image { top:9px; }
  .hero-word-chip { left:-8px; right:-8px; }
  .lottie-mini { width:53px; }
  .hero-word-chip strong { font-size:15px; }
}
@media(max-width:1050px) {
  .welcome-banner { grid-template-columns:minmax(0,1.2fr) minmax(240px,1fr); }
  .home-collections .collection-cover { height:112px; }
  .home-collections .collection-cover-icon.has-art { width:68px; height:68px; right:12px; top:36px; }
  .home-collections .collection-cover:has(.has-art) .collection-tag { max-width:100%; align-self:flex-start; }
}
@media(max-width:760px) {
  .topbar { gap:10px; }
  .motion-toggle { width:32px; height:32px; }
  .welcome-banner { grid-template-columns:minmax(0,1fr) 220px; }
  .hero-art { height:270px; }
  .hero-word-chip { left:-3px; right:-3px; }
}
@media(max-width:560px) {
  .topbar { gap:7px; padding-left:14px; padding-right:14px; }
  .header-search { flex:1; min-width:0; }
  .topbar .header-search input { font-size:12px; }
  .topbar .streak-pill { display:none; }
  .welcome-banner { display:flex; padding:25px 24px; gap:24px; }
  .hero-art { width:100%; max-width:280px; height:290px; align-self:center; }
  .hero-art-image { top:-14px; }
  .hero-word-chip { bottom:3px; left:0; right:0; }
  .hero-word-chip small { font-size:12px; }
  .home-collections .collection-cover,.collection-cover { height:110px; }
  .home-collections .collection-cover-icon.has-art,.collection-cover-icon.has-art { width:90px; height:90px; top:8px; right:24px; }
  .home-collections .collection-cover:has(.has-art) .collection-tag { max-width:calc(100% - 100px); align-self:center; }
  .study-face { padding:20px; min-height:340px; }
  .study-card { min-height:340px; }
  .result-lottie { width:150px; height:150px; }
}
/* User choice and system preference always take priority over decoration. */
html[data-motion="paused"] *,html[data-motion="paused"] *::before,html[data-motion="paused"] *::after,
html[data-motion="reduced"] *,html[data-motion="reduced"] *::before,html[data-motion="reduced"] *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
html[data-motion="paused"] .hero-art-image,html[data-motion="reduced"] .hero-art-image { transform:none; translate:none; }
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .hero-art-image { transform:none; translate:none; }
}