/* Interactive touches (static/js/fx.js) */

/* "in N days" chip on events */
.fx-days { display: inline-block; margin: -6px 0 12px; padding: 4px 12px; border-radius: 99px; background: #FBF1E6; color: #c25e17;
    font-size: 13px; font-weight: 700; letter-spacing: .3px; box-shadow: 0 0 0 1px #f3c39e; animation: fxChipIn .6s cubic-bezier(.3,1.6,.5,1) both; }
.fx-days.soon { background: #E47A2E; color: #fff; animation: fxChipIn .6s cubic-bezier(.3,1.6,.5,1) both, fxGlow 1.8s ease-in-out .6s infinite; }
@keyframes fxChipIn { from { opacity: 0; transform: translateY(8px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes fxGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(228,122,46,.5); } 50% { box-shadow: 0 0 0 9px rgba(228,122,46,0); } }

/* dress colour splash */
.swatch[role=button] { cursor: pointer; transition: transform .2s; }
.swatch[role=button]:hover, .swatch[role=button]:focus-visible { transform: scale(1.35); outline: none; }
.fx-splash-host { position: relative; overflow: hidden; }
.fx-splash { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; pointer-events: none; z-index: 0;
    opacity: .35; animation: fxSplash 1.2s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes fxSplash { to { transform: scale(60); opacity: 0; } }

/* ripple */
.fx-ink-host { overflow: hidden; }
.fx-ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.45); transform: scale(0); pointer-events: none;
    animation: fxRipple .6s ease-out forwards; }
.btn-outline-primary .fx-ripple, .btn-outline-light .fx-ripple { background: rgba(228,122,46,.3); }
@keyframes fxRipple { to { transform: scale(1); opacity: 0; } }

/* flower shower */
.fx-shower { position: fixed; inset: 0; pointer-events: none; z-index: 2000; overflow: hidden; }
.fx-shower span { position: absolute; top: -50px; animation: fxFall linear forwards; will-change: transform; }
@keyframes fxFall { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 8% { opacity: 1; }
    100% { transform: translate(var(--drift), 110vh) rotate(var(--spin)); opacity: .9; } }
.fx-shower-wrap { text-align: center; margin: 26px 0 6px; }
.fx-shower-btn { position: relative; overflow: hidden; border: 0; border-radius: 99px; padding: 13px 28px; cursor: pointer; color: #fff;
    font: 700 15px "Montserrat", Arial, sans-serif; background: linear-gradient(135deg, #E47A2E, #f2b23c, #E47A2E); background-size: 200% 100%;
    box-shadow: 0 10px 24px rgba(228,122,46,.35); animation: fxShine 4s linear infinite; transition: transform .25s; }
.fx-shower-btn:hover { transform: translateY(-2px) scale(1.03); }
.fx-shower-btn.pop { animation: fxShine 4s linear infinite, fxPop .45s cubic-bezier(.3,1.8,.5,1); }
@keyframes fxShine { to { background-position: -200% 0; } }
@keyframes fxPop { 40% { transform: scale(1.15); } }
.fx-shower-count { display: block; margin-top: 10px; color: #c25e17; font-weight: 600; font-size: 14px; }
.fx-shower-count.bump { animation: fxPop .4s ease; }
.fx-shower-count[hidden] { display: none; }

/* section titles: letter wave */
.fx-wave .fx-letter { display: inline-block; opacity: 0; transform: translateY(.55em) rotate(8deg); }
.fx-wave.fx-wave-in .fx-letter { animation: fxLetter .7s cubic-bezier(.3,1.5,.5,1) forwards; animation-delay: calc(var(--i) * 45ms); }
@keyframes fxLetter { to { opacity: 1; transform: none; } }

/* 3D tilt + glare */
.fx-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2,.8,.3,1), box-shadow .3s;
    will-change: transform; position: relative; }
.fx-tilt.fx-tilting { transition: transform .08s linear, box-shadow .3s; box-shadow: 0 18px 40px rgba(18,31,56,.18); }
.fx-tilt:not(img)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.45), transparent 55%); }
.fx-tilt.fx-tilting:not(img)::after { opacity: 1; }

/* magnetic buttons */
.fx-magnet { transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform .25s cubic-bezier(.3,1.5,.5,1), background .2s, color .2s; }

/* sparkle trail */
.fx-spark { position: fixed; z-index: 2100; pointer-events: none; font-size: 13px; margin: -8px 0 0 -6px; text-shadow: 0 0 6px rgba(245,197,24,.7);
    animation: fxSpark .9s ease-out forwards; }
@keyframes fxSpark { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--dx), 26px) scale(.3) rotate(90deg); } }

@media (prefers-reduced-motion: reduce) {
    .fx-days, .fx-days.soon, .fx-shower-btn { animation: none; }
}

/* call button, bottom-left (the music button moves above it) */
.call-fab { position: fixed; left: 16px; bottom: 20px; z-index: 1031; display: flex; align-items: center; height: 56px; min-width: 56px;
    border-radius: 99px; background: linear-gradient(135deg, #1fa855, #25D366); color: #fff !important; text-decoration: none !important;
    box-shadow: 0 8px 22px rgba(31,168,85,.45); overflow: visible; animation: callIn .7s cubic-bezier(.3,1.6,.5,1) 1s both; }
.call-fab > .fa { width: 56px; text-align: center; font-size: 22px; animation: callShake 3.2s ease-in-out 2s infinite; }
.call-ring { position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%; border: 2px solid #25D366;
    animation: callRing 2s ease-out infinite; pointer-events: none; }
.call-label { display: flex; flex-direction: column; max-width: 0; overflow: hidden; white-space: nowrap; line-height: 1.15;
    transition: max-width .35s ease, padding .35s ease; }
.call-label b { font-size: 14px; } .call-label small { font-size: 12px; opacity: .9; letter-spacing: .5px; }
.call-fab:hover .call-label, .call-fab:focus-visible .call-label { max-width: 160px; padding-right: 18px; }
.call-fab:active { transform: scale(.95); }
.call-fab ~ .music-toggle { bottom: 88px; }
@keyframes callIn { from { opacity: 0; transform: translateY(30px) scale(.4); } to { opacity: 1; transform: none; } }
@keyframes callRing { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes callShake { 0%, 84%, 100% { transform: rotate(0); } 86%, 90%, 94% { transform: rotate(-14deg); } 88%, 92%, 96% { transform: rotate(14deg); } }
@media (max-width: 991.98px) {
    .call-fab { bottom: 84px; height: 52px; min-width: 52px; }
    .call-fab > .fa, .call-ring { width: 52px; } .call-ring { height: 52px; }
    .call-fab ~ .music-toggle { bottom: 146px; }
}
@media (prefers-reduced-motion: reduce) { .call-fab, .call-fab > .fa, .call-ring { animation: none; } }