/* Rose, pearl and gold: shared motion for the VK and OK journeys. */
.motion-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 20px 0; color:#97717e; font:italic 12px Georgia,serif; }
.motion-toggle { display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:8px 12px; border:1px solid #dfc7ce; border-radius:30px; background:#fffaf7; color:#795262; font:12px Georgia,serif; cursor:pointer; }
.motion-toggle svg { width:16px; height:16px; stroke:currentColor; fill:none; }
.motion-toggle:focus-visible { outline:3px solid #b5607a; outline-offset:3px; }
.motion-toggle[aria-pressed="false"] { background:#f2ece8; }
.motion-scene { position:fixed; inset:0; height:100vh; overflow:hidden; pointer-events:none; z-index:0; contain:strict; transition:opacity .6s; }
.motion-mote { position:absolute; width:5px; height:5px; border-radius:50%; background:#d8ad68; box-shadow:0 0 16px 3px #edd6b966; animation:moteFloat var(--drift,13s) ease-in-out infinite alternate; }
.motion-mote.spark { width:12px; height:12px; background:#c69b63; clip-path:polygon(50% 0,60% 39%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%); }
.motion-mote.pearl { width:28px; height:28px; background:radial-gradient(circle at 35% 30%,#fffaf9,#e8c4d466 42%,transparent 72%); box-shadow:none; }
html[data-motion-focus="true"] .motion-scene { opacity:.35; }
.screen-header { position:relative; }
#screen1 .screen-header { padding-top:16px; }
#screen1 .screen-header .icon-wrap { width:100px; height:100px; font-size:40px; margin-bottom:28px; background:radial-gradient(circle at 30% 25%,#fffaf5,#f3dadd 65%,#e4c59b); box-shadow:0 12px 42px #b56e8629,inset 0 1px 2px #fff; }
.motion-orbit { position:absolute; inset:-21px; width:calc(100% + 42px); height:calc(100% + 42px); overflow:visible; pointer-events:none; animation:orbitTurn 32s linear infinite; }
.motion-orbit .orbit-ring { fill:none; stroke:#cbb08f; stroke-width:.65; stroke-dasharray:2 5; opacity:.7; }
.motion-orbit .orbit-dot { fill:#c49c59; }
.motion-orbit .orbit-petal { fill:#ecd0d84d; stroke:#c99cae99; stroke-width:.65; transform-origin:60px 60px; }
.screen.active .screen-header h1 { background:linear-gradient(105deg,#593847 20%,#9b546b 42%,#ae843c 50%,#9b546b 58%,#593847 80%); background-size:220% 100%; background-clip:text; -webkit-background-clip:text; color:transparent; animation:titleLight 11s ease-in-out infinite; }
.screen.active .daily-message-avatar { animation:flowerSway 7s ease-in-out infinite; }
.daily-message-card { position:relative; isolation:isolate; overflow:hidden; }
.daily-message-card::after { content:''; position:absolute; pointer-events:none; inset:0; z-index:-1; background:linear-gradient(115deg,transparent 25%,#ffffff60 45%,transparent 65%); transform:translateX(-110%); animation:letterLight 12s ease-in-out infinite; }
html[data-wish-motion-ready] .screen.active .card,
html[data-wish-motion-ready] .screen.active .rule-card,
html[data-wish-motion-ready] .screen.active .affirmation-box,
html[data-wish-motion-ready] .screen.active .community-card,
html[data-wish-motion-ready] .wish-item { animation:none; }
.card,.rule-card,.wish-map-card,.affirmation-box,.daily-message-card { transition:box-shadow .3s,border-color .3s; }
.wish-map-card { position:relative; }
.wish-counter span { display:inline-block; }
.screen.active .wish-map-card .wish-icon { animation:flowerSway 6s ease-in-out infinite; animation-delay:var(--motion-delay,0s); }
.screen.active .task-icon { animation:flowerSway 7s ease-in-out infinite; }
.screen.active .star-big { animation:finalStar 6s ease-in-out infinite; transform-origin:center; }
.screen.active .breath-circle { box-shadow:0 0 35px #d4a5b44d,0 0 65px #e8d5a333; }
.screen.active #wishTreeSvg > g { transform-box:fill-box; transform-origin:center; animation:blossom .9s both; animation-delay:var(--motion-delay,0s); }
.screen.active #wishTreeSvg > line { stroke-dasharray:200; stroke-dashoffset:0; animation:branchGrow 1.5s ease-out both; }
.screen.active .affirmation-box { background-size:180% 100%; }
.btn,.btn-share { position:relative; overflow:hidden; }
.btn-primary::after,.btn-gold::after,.btn-ok::after { content:''; pointer-events:none; position:absolute; inset:-40% -60%; background:linear-gradient(110deg,transparent 42%,#ffffff30 49%,transparent 57%); transform:translateX(-80%); animation:buttonGlint 9s ease-in-out infinite; }
.motion-ripple { position:absolute; width:24px; height:24px; margin:-12px; border:1px solid #fff9; background:#e9c4cf55; border-radius:50%; pointer-events:none; animation:tapRipple .65s ease-out forwards; }
.motion-toast { position:fixed; left:50%; bottom:max(24px,env(safe-area-inset-bottom)); transform:translateX(-50%); width:max-content; max-width:calc(100vw - 40px); z-index:950; padding:13px 20px; border:1px solid #e4c5cc; border-radius:24px; background:#fffaf7f5; color:#744452; box-shadow:0 8px 36px #85435724; text-align:center; font:15px/1.5 Georgia,serif; pointer-events:none; }
.motion-toast:empty { display:none; }
.motion-celebration { position:fixed; inset:0; width:100%; height:100%; z-index:900; pointer-events:none; }
.motion-star-shimmer { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.motion-star-shimmer i { position:absolute; width:4px; height:4px; border-radius:50%; background:#fff2c5; box-shadow:0 0 10px 3px #fff2c566; animation:skyTwinkle 4.2s ease-in-out infinite; }
@media (hover:hover) and (pointer:fine) {
  .card:hover,.wish-map-card:hover,.daily-message-card:hover { border-color:#d7a8b8; box-shadow:0 9px 32px #ad67822b; }
  .rule-card:hover { box-shadow:0 6px 22px #ad67821a; }
  .rule-card:hover .rule-num { transform:rotate(-7deg) scale(1.08); }
  .rule-num { transition:transform .3s; }
  .btn:hover { transform:translateY(-2px); }
  .btn:active { transform:scale(.98); }
}
@keyframes moteFloat { 0% { transform:translate3d(-9px,14px,0) rotate(-12deg); opacity:.18; } 50% { opacity:.55; } 100% { transform:translate3d(18px,-30px,0) rotate(22deg); opacity:.24; } }
@keyframes orbitTurn { to { transform:rotate(360deg); } }
@keyframes titleLight { 0%,30%,100% { background-position:100% 50%; } 65% { background-position:0% 50%; } }
@keyframes flowerSway { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-4px) rotate(4deg); } }
@keyframes letterLight { 0%,65% { transform:translateX(-110%); } 90%,100% { transform:translateX(110%); } }
@keyframes finalStar { 0%,100% { transform:scale(1) rotate(-5deg); } 50% { transform:scale(1.09) rotate(5deg); } }
@keyframes blossom { from { opacity:0; transform:scale(.2) rotate(-12deg); } to { opacity:1; transform:scale(1) rotate(0deg); } }
@keyframes branchGrow { from { stroke-dashoffset:200; } to { stroke-dashoffset:0; } }
@keyframes buttonGlint { 0%,70% { transform:translateX(-80%); } 94%,100% { transform:translateX(80%); } }
@keyframes tapRipple { to { transform:scale(14); opacity:0; } }
@keyframes skyTwinkle { 0%,100% { opacity:.2; transform:scale(.7); } 50% { opacity:.9; transform:scale(1.3); } }
html[data-wish-motion="off"] *,html[data-wish-motion="off"] *::before,html[data-wish-motion="off"] *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
html[data-wish-motion="off"] .motion-scene,html[data-wish-motion="off"] .motion-star-shimmer { display:none; }
html[data-wish-motion="off"] .screen-header h1 { color:#593847; background:none; }
html[data-wish-motion="off"] .motion-orbit { opacity:.5; }
html[data-motion-hidden="true"] *,html[data-motion-hidden="true"] *::before,html[data-motion-hidden="true"] *::after,
[data-motion-in-view="false"],[data-motion-in-view="false"] *,[data-motion-in-view="false"] *::before,[data-motion-in-view="false"] *::after { animation-play-state:paused!important; }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .motion-scene,.motion-star-shimmer { display:none; }
  .screen.active .screen-header h1 { color:#593847; background:none; }
}