/* HiDoof preview · Living scenes for Home, Create, My orders and Cent.
   Slow, decorative, behind content; the particles come from scene.js. Calm and reduced motion stop the movement. */

/* ---------- Home: a warm aurora breathing behind the floating cards ---------- */
.aurora{position:absolute;inset:-10% -5% 10%;z-index:-1;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;width:52%;aspect-ratio:1;border-radius:50%;opacity:.6}
.aurora i:nth-child(1){left:8%;top:6%;background:radial-gradient(circle,#f2cf7a,transparent 70%);animation:aur1 34s ease-in-out infinite alternate}
.aurora i:nth-child(2){right:6%;top:2%;background:radial-gradient(circle,#f3b9c6,transparent 70%);opacity:.3;animation:aur2 41s ease-in-out infinite alternate}
.aurora i:nth-child(3){left:30%;top:30%;background:radial-gradient(circle,#bfe3da,transparent 70%);opacity:.26;animation:aur3 48s ease-in-out infinite alternate}
@keyframes aur1{to{transform:translate(18%,12%) scale(1.15)}}
@keyframes aur2{to{transform:translate(-22%,16%) scale(.9)}}
@keyframes aur3{to{transform:translate(10%,-14%) scale(1.2)}}
/* the hero's golden arch glows slowly */
.hero .arch{animation:archGlow 9s ease-in-out infinite}
@keyframes archGlow{0%,100%{opacity:.85}50%{opacity:1;filter:drop-shadow(0 0 6px rgba(217,178,90,.45))}}

/* ---------- Create: a summoning circle turns behind the panel, faster while cards are forged ---------- */
.panel{overflow:hidden;isolation:isolate}
.panel>*:not(.magic-circle){position:relative;z-index:1}
.magic-circle{position:absolute;right:-22%;bottom:-26%;width:78%;max-width:520px;aspect-ratio:1;z-index:0;opacity:.13;pointer-events:none;transition:opacity .8s ease,filter .8s ease}
.magic-circle .mc-outer{transform-origin:0 0;animation:mcSpin 120s linear infinite}
.magic-circle .mc-inner{transform-origin:0 0;animation:mcSpin 80s linear infinite reverse}
@keyframes mcSpin{to{transform:rotate(360deg)}}
.panel.forging .magic-circle{opacity:.38;filter:drop-shadow(0 0 10px rgba(217,178,90,.7))}
.panel.forging .magic-circle .mc-outer{animation-duration:14s}
.panel.forging .magic-circle .mc-inner{animation-duration:9s}
.panel:hover .magic-circle{opacity:.2}

/* ---------- My orders: the hall of records, candlelit at the edges ---------- */
#orderview::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(40% 50% at 0 100%,rgba(255,190,100,.16),transparent 70%),radial-gradient(40% 50% at 100% 100%,rgba(255,190,100,.14),transparent 70%),radial-gradient(70% 40% at 50% 0,rgba(255,244,214,.6),transparent 70%);animation:candle 6s ease-in-out infinite}
#orderview::after{content:"";position:fixed;right:-8vmin;bottom:-8vmin;width:52vmin;aspect-ratio:1;z-index:-1;pointer-events:none;opacity:.07;animation:mcSpin 240s linear infinite;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cg fill='none' stroke='%239a6f1c'%3E%3Ccircle r='48'/%3E%3Ccircle r='40' stroke-dasharray='1 3'/%3E%3Cpath d='M0-46L7-7 46 0 7 7 0 46-7 7-46 0-7-7z' fill='%239a6f1c' fill-opacity='.4'/%3E%3Cpath d='M-30-30L30 30M30-30L-30 30'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
@keyframes candle{0%,100%{opacity:.9}35%{opacity:1}60%{opacity:.85}}
#orderview .order-row{backdrop-filter:blur(2px)}

/* ---------- Cent: the treasury, a slow sweep of golden light and a turning coin ---------- */
#creditview::before{content:"";position:fixed;left:50%;top:-30vmax;width:160vmax;height:160vmax;margin-left:-80vmax;z-index:-1;pointer-events:none;opacity:.5;
 background:repeating-conic-gradient(from 0deg,rgba(217,178,90,.10) 0 4deg,transparent 4deg 14deg);-webkit-mask:radial-gradient(circle,#000 10%,transparent 55%);mask:radial-gradient(circle,#000 10%,transparent 55%);animation:mcSpin 160s linear infinite}
#creditview::after{content:"¢";position:fixed;right:6vw;top:22vh;width:min(26vw,220px);aspect-ratio:1;z-index:-1;pointer-events:none;display:grid;place-items:center;border-radius:50%;
 font:700 min(12vw,110px) 'Cinzel',Georgia,serif;color:rgba(154,111,28,.32);background:radial-gradient(circle at 35% 30%,rgba(255,240,200,.75),rgba(217,178,90,.28) 60%,rgba(154,111,28,.18));box-shadow:inset 0 0 0 6px rgba(154,111,28,.14),inset 0 0 0 10px rgba(255,240,200,.3);animation:coin 9s ease-in-out infinite}
@keyframes coin{0%,100%{transform:perspective(600px) rotateY(-24deg) translateY(0)}50%{transform:perspective(600px) rotateY(24deg) translateY(-12px)}}
#creditbalance{background:linear-gradient(100deg,#7a5410,#c79a35 40%,#f3d98f 50%,#c79a35 60%,#7a5410);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:titleGlint 8s ease-in-out infinite}
@media(max-width:767px){#creditview::after{top:auto;bottom:14vh;opacity:.6}#orderview::after{width:70vmin}}

/* ---------- quiet ---------- */
html.calm .aurora i,html.calm .hero .arch,html.calm .magic-circle g,html.calm #orderview::before,html.calm #orderview::after,html.calm #creditview::before,html.calm #creditview::after,html.calm #creditbalance{animation:none}
@media(prefers-reduced-motion:reduce){.aurora i,.hero .arch,.magic-circle g,#orderview::before,#orderview::after,#creditview::before,#creditview::after,#creditbalance{animation:none!important}}