@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;0,900;1,500;1,600;1,700;1,800&display=swap');

:root{
    --inferno-50:#fff6ef;
    --inferno-100:#ffe2cc;
    --inferno-200:#ffcb9e;
    --inferno-300:#ff9d44;
    --inferno-400:#ff6a1a;
    --inferno-500:#ef4f0c;
    --inferno-600:#c1360a;
    --inferno-700:#9c2d0c;
    --inferno-800:#7d2710;
    --inferno-900:#6a2410;
    --inferno-ember-300:#ffb267;
    --inferno-ember-400:#ff8a2b;
    --inferno-ember-500:#e11d0b;
    --inferno-ember-600:#c42d06;
    --inferno-pink-soft:#FBCFE8;
    --inferno-text:#2a1608;
    --inferno-text-soft:rgba(68,34,12,.6);
    --inferno-bg:#fff5ec;
    --inferno-bg-card:rgba(255,255,255,.7);
    --inferno-grad-1:linear-gradient(135deg,#ff6a1a 0%,#e11d0b 100%);
    --inferno-grad-2:linear-gradient(135deg,#ff9d44 0%,#ff6a1a 50%,#e11d0b 100%);
    --inferno-glow:0 12px 40px rgba(255,106,26,.25);
}

html.dark{
    --inferno-text:#fce4d6;
    --inferno-text-soft:rgba(255,226,204,.65);
    --inferno-bg:#1c0f08;
    --inferno-bg-card:rgba(64,31,11,.75);
}

.inferno-embers{
    position:fixed;inset:0;
    overflow:hidden;pointer-events:none;
    z-index:0;
    perspective:700px;
}
.inferno-embers span{
    position:absolute;
    top:0;left:0;
    width:26px;height:26px;
    will-change:transform,opacity;
    animation:infLeafFall 16s linear infinite;
}
.inferno-embers span::before{
    content:'';
    display:block;width:100%;height:100%;
    background:url('/assets/leaf.png') center/contain no-repeat;
    opacity:var(--lop,.58);
    filter:drop-shadow(0 6px 7px rgba(90,32,8,.16));
    transform-origin:50% 50%;
    animation:infLeafSpin var(--spin,4s) ease-in-out infinite alternate;
}
html.dark .inferno-embers span::before{opacity:var(--lop,.72);filter:drop-shadow(0 6px 9px rgba(0,0,0,.4)) brightness(1.05)}
.inferno-embers span:nth-child(1){left:6%;width:34px;height:34px;animation-duration:17s;animation-delay:-2s;--spin:4.6s}
.inferno-embers span:nth-child(2){left:18%;width:22px;height:22px;animation-duration:13s;animation-delay:-7s;--spin:3.4s}
.inferno-embers span:nth-child(3){left:31%;width:44px;height:44px;animation-duration:23s;animation-delay:-11s;--spin:5.4s}
.inferno-embers span:nth-child(4){left:45%;width:26px;height:26px;animation-duration:16s;animation-delay:-1s;--spin:4.1s}
.inferno-embers span:nth-child(5){left:59%;width:32px;height:32px;animation-duration:19s;animation-delay:-8s;--spin:3.8s}
.inferno-embers span:nth-child(6){left:72%;width:20px;height:20px;animation-duration:12s;animation-delay:-4s;--spin:2.9s}
.inferno-embers span:nth-child(7){left:84%;width:40px;height:40px;animation-duration:21s;animation-delay:-9s;--spin:5s}
.inferno-embers span:nth-child(8){left:93%;width:24px;height:24px;animation-duration:15s;animation-delay:-5s;--spin:3.2s}
@keyframes infLeafFall{
    0%{transform:translate3d(0,-14vh,0);opacity:0}
    7%{opacity:1}
    25%{transform:translate3d(34px,22vh,0)}
    50%{transform:translate3d(-30px,50vh,0)}
    75%{transform:translate3d(28px,78vh,0)}
    94%{opacity:1}
    100%{transform:translate3d(-16px,116vh,0);opacity:0}
}
@keyframes infLeafSpin{
    0%{transform:rotate(-22deg) rotateY(0deg)}
    100%{transform:rotate(24deg) rotateY(190deg)}
}
@media(prefers-reduced-motion:reduce){
    .inferno-embers{display:none}
}

.inferno-sparks{
    position:fixed;inset:0;pointer-events:none;z-index:1;
    background-image:
        radial-gradient(2px 2px at 12% 22%,rgba(255,255,255,.9),transparent 70%),
        radial-gradient(1.5px 1.5px at 78% 38%,rgba(255,226,204,.95),transparent 70%),
        radial-gradient(2.5px 2.5px at 32% 76%,rgba(255,157,68,.85),transparent 70%),
        radial-gradient(1px 1px at 62% 12%,rgba(255,255,255,.8),transparent 70%),
        radial-gradient(2px 2px at 88% 84%,rgba(255,106,26,.7),transparent 70%);
    background-size:480px 480px;
    animation:infTwinkle 5s ease-in-out infinite;
    opacity:.55;
}
@keyframes infTwinkle{
    0%,100%{opacity:.45}
    50%{opacity:.85}
}

html.dark .inferno-sparks{opacity:.85}

@keyframes infBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes infShine{
    0%{background-position:-200% 0}
    100%{background-position:200% 0}
}

.inferno-shine{
    background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);
    background-size:200% 100%;
    animation:infShine 2.4s linear infinite;
}

@keyframes infGlowPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(255,106,26,.5)}
    50%{box-shadow:0 0 0 14px rgba(255,106,26,0)}
}

.inferno-pulse{animation:infGlowPulse 2.6s ease-out infinite}

::selection{background:rgba(255,106,26,.35);color:#2a1608}
html.dark ::selection{background:rgba(255,157,68,.4);color:#170c05}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,#ff9d44,#e11d0b);
    border-radius:10px;
    border:2px solid transparent;
    background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ff6a1a,#c42d06);background-clip:padding-box;border:2px solid transparent}

html.dark ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#e11d0b,#7d2710);background-clip:padding-box;border:2px solid transparent}

h1,h2,.hero-title,.page-title,.toolbar-title,.auth-title,.id-name{
    font-family:'Playfair Display',Georgia,'Times New Roman',serif;
}
.hero-title,.page-title{
    font-style:italic;
    letter-spacing:.012em!important;
}
.hero-title span,.page-title span{font-style:italic}

.hero-cta,.btn-accent,.cart-checkout,.pcard-buy,.modal-buy,.submit-btn,.pay-btn,.auth-btn,.m-btn-primary,.qr-btn.cta,.mgr-add-btn,.sp-login a,.reply-send{
    position:relative;overflow:hidden;isolation:isolate;
    transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease,filter .25s ease!important;
}
.hero-cta,.btn-accent,.cart-checkout,.pcard-buy,.modal-buy,.submit-btn,.pay-btn,.auth-btn,.m-btn-primary,.mgr-add-btn{
    text-transform:uppercase!important;letter-spacing:.04em!important;font-weight:700!important;
}
.hero-cta::after,.btn-accent::after,.cart-checkout::after,.pcard-buy::after,.modal-buy::after,.submit-btn::after,.pay-btn::after,.auth-btn::after,.m-btn-primary::after,.qr-btn.cta::after,.mgr-add-btn::after,.sp-login a::after,.reply-send::after{
    content:'';position:absolute;top:0;left:-130%;width:55%;height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
    transform:skewX(-20deg);transition:left .65s cubic-bezier(.4,0,.2,1);
    pointer-events:none;z-index:2;
}
.hero-cta:hover:not(:disabled)::after,.btn-accent:hover::after,.cart-checkout:hover:not(:disabled)::after,.pcard-buy:hover:not(:disabled)::after,.modal-buy:hover:not(:disabled)::after,.submit-btn:hover:not(:disabled)::after,.pay-btn:hover:not(:disabled)::after,.auth-btn:hover:not(:disabled)::after,.m-btn-primary:hover::after,.qr-btn.cta:hover::after,.mgr-add-btn:hover::after,.sp-login a:hover::after,.reply-send:hover::after{left:165%}
.hero-cta:hover:not(:disabled),.btn-accent:hover,.cart-checkout:hover:not(:disabled),.pcard-buy:hover:not(:disabled),.modal-buy:hover:not(:disabled),.submit-btn:hover:not(:disabled),.pay-btn:hover:not(:disabled),.auth-btn:hover:not(:disabled),.m-btn-primary:hover,.qr-btn.cta:hover,.mgr-add-btn:hover,.sp-login a:hover,.reply-send:hover{
    transform:translateY(-2px)!important;
    filter:brightness(1.06) saturate(1.05);
    box-shadow:0 16px 32px -10px rgba(255,106,26,.6)!important;
}
.hero-cta:active,.btn-accent:active,.cart-checkout:active,.pcard-buy:active,.modal-buy:active,.submit-btn:active,.pay-btn:active,.auth-btn:active,.m-btn-primary:active,.mgr-add-btn:active,.sp-login a:active,.reply-send:active{transform:translateY(0) scale(.99)!important}

.hero-ghost,.btn-ghost,.modal-cart,.auth-btn-secondary,.m-btn-secondary,.cp-btn{
    transition:transform .25s ease,border-color .25s ease,color .25s ease,background .25s ease!important;
}
.hero-ghost:hover,.btn-ghost:hover,.modal-cart:hover,.auth-btn-secondary:hover,.m-btn-secondary:hover,.cp-btn:hover{transform:translateY(-1px)}

@media(max-width:600px){
    .hero-cta,.btn-accent,.cart-checkout,.submit-btn,.pay-btn,.auth-btn,.m-btn-primary,.modal-buy,.qr-btn,.qr-btn.cta{font-size:.95rem!important;min-height:48px;padding-top:.74rem!important;padding-bottom:.74rem!important}
    .pcard-buy{font-size:.82rem!important;min-height:40px}
    .hero-ghost,.btn-ghost,.cp-btn,.modal-cart{font-size:.9rem!important;min-height:46px}
    .hero-sub{font-size:.98rem!important;line-height:1.6!important}
    .nav-link{font-size:.95rem!important}
}