/* shine.css — v2 (owner, 14 Nov 2026): nothing flat. Every colour shines, glows or flows; ornaments drawn in code (tools/patterns.py). */
html { background: #07060a; }
body { background: transparent; }
html::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 85% -10%, rgba(255, 91, 58, .16), transparent 55%), radial-gradient(90% 60% at -10% 40%, rgba(163, 18, 58, .16), transparent 60%),
  radial-gradient(100% 70% at 50% 120%, rgba(227, 38, 47, .14), transparent 60%), linear-gradient(180deg, #0b0710, #07060a 30%, #0c070b 70%, #07060a); }
section, footer, .marquee { position: relative; }
body::before { content: ''; position: fixed; inset: -20%; z-index: 0; pointer-events: none; opacity: .5; filter: blur(70px);
  background: conic-gradient(from 0deg at 30% 40%, rgba(255, 91, 58, 0), rgba(227, 38, 47, .14), rgba(120, 10, 60, 0), rgba(255, 120, 80, .1), rgba(255, 91, 58, 0)); animation: aurora 26s linear infinite; }
@keyframes aurora { to { transform: rotate(360deg) } }
:root { --grad: linear-gradient(120deg, #ffb08a 0%, #ff5b3a 28%, #e3262f 55%, #b3123a 80%, #ff6a3d 100%); --edge: linear-gradient(140deg, rgba(255, 170, 140, .55), rgba(227, 38, 47, .15) 35%, rgba(255, 255, 255, .04) 60%, rgba(255, 91, 58, .45)); }

/* ivory headings carry a soft rose sheen; red words shimmer and glow */
h1, h2, h3 { background: linear-gradient(180deg, #fffaf6 20%, #f3d9cf 70%, #e8b3a2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.split-words .w > span { background: linear-gradient(180deg, #fffaf6 20%, #f3d9cf 70%, #e8b3a2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.red, .split-words .red .w > span, .split-words .w > span.red { background: linear-gradient(100deg, #ff9a7a, #ff5b3a 25%, #e3262f 45%, #ffd0bc 52%, #e3262f 60%, #a3123a 85%, #ff6a3d); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s ease-in-out infinite; }
.red { filter: drop-shadow(0 0 22px rgba(255, 70, 50, .35)); }
@keyframes shimmer { 0%, 100% { background-position: 0% 50% } 50% { background-position: 100% 50% } }
.lead { color: #c9b8b1; }
.eyebrow { background: linear-gradient(90deg, #ffb08a, #ff5b3a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow::before { box-shadow: 0 0 10px #ff5b3a; }

/* buttons: glossy, glowing, with a light that sweeps across */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn-red { background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 48%), var(--grad); background-size: 100% 100%, 200% 100%; animation: flow 8s ease-in-out infinite;
  box-shadow: 0 0 0 1px rgba(255, 180, 150, .35) inset, 0 12px 40px -10px rgba(255, 60, 40, .8), 0 0 30px -6px rgba(255, 91, 58, .6); text-shadow: 0 1px 2px rgba(80, 0, 10, .5); }
@keyframes flow { 0%, 100% { background-position: 0 0, 0% 50% } 50% { background-position: 0 0, 100% 50% } }
.btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: 1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); animation: sweep 4.5s ease-in-out infinite; pointer-events: none; }
.btn-ghost::after { background: linear-gradient(100deg, transparent, rgba(255, 180, 160, .18), transparent); }
@keyframes sweep { 0%, 60% { left: -60% } 100% { left: 130% } }
.btn-ghost { background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)), radial-gradient(120% 140% at 50% 120%, rgba(227, 38, 47, .25), transparent 60%); border: 0; box-shadow: 0 0 0 1px rgba(255, 150, 130, .25) inset, 0 8px 30px -12px rgba(227, 38, 47, .5); }
.btn-ghost:hover { box-shadow: 0 0 0 1px rgba(255, 150, 130, .5) inset, 0 10px 40px -10px rgba(255, 91, 58, .6); }

/* every panel: gradient glass and a glowing gradient edge (no flat borders) */
.card, .tool, .feat, .dl .opt, .player, .media, .strip figure, .band, .filters button, .lang button, .pill-list span { border: 0 !important; }
.tool, .feat, .dl .opt, .pill-list span, .filters button, .lang button { position: relative; }
.card::after, .tool::after, .feat::after, .dl .opt::after, .player::after, .strip figure::after, .band::after, .pill-list span::after, .filters button::after, .lang button::after, .media::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--edge); pointer-events: none; z-index: 4; box-shadow: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.tool, .feat, .dl .opt { background: linear-gradient(160deg, rgba(255, 120, 100, .09), rgba(255, 255, 255, .02) 40%, rgba(120, 10, 40, .12)); box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 220, 210, .08); }
.tool:hover, .feat:hover { box-shadow: 0 30px 60px -30px rgba(255, 60, 40, .45), 0 0 40px -10px rgba(255, 91, 58, .25), inset 0 1px 0 rgba(255, 220, 210, .15); transform: translateY(-5px); }
.feat { transition: transform .35s, box-shadow .35s; overflow: hidden; position: relative; }
.feat::before { content: ''; position: absolute; width: 220px; height: 220px; right: -80px; top: -80px; background: radial-gradient(circle, rgba(255, 91, 58, .28), transparent 65%); pointer-events: none; }
.feat .n { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 30px; filter: drop-shadow(0 0 10px rgba(255, 80, 50, .5)); }
.feat h4, .tool h4, .dl h4 { background: linear-gradient(180deg, #fff, #f0cfc4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 1), 0 0 60px -30px rgba(255, 60, 40, .35); }
.card:hover { box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 1), 0 0 80px -20px rgba(255, 70, 50, .45); }
.card::before { background: linear-gradient(180deg, rgba(7, 6, 10, 0) 25%, rgba(30, 6, 12, .75) 70%, rgba(12, 4, 8, .96) 100%); }
.tag { background: linear-gradient(135deg, rgba(255, 120, 90, .3), rgba(160, 10, 50, .25)); border: 0; color: #ffe1d6; box-shadow: 0 0 0 1px rgba(255, 150, 120, .4) inset, 0 0 18px -4px rgba(255, 80, 50, .6); }
.tool .st { background: linear-gradient(90deg, #ffb08a, #ff5b3a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tool .st.ok { background: linear-gradient(90deg, #c9ffd9, #6fe39b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tool img { box-shadow: 0 8px 22px -6px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08); }
.pill-list span { background: linear-gradient(160deg, rgba(255, 120, 100, .12), rgba(255, 255, 255, .02)); }
.filters button { background: linear-gradient(160deg, rgba(255, 120, 100, .1), rgba(255, 255, 255, .02)); }
.filters button.on, .filters button:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .25), transparent 50%), var(--grad); box-shadow: 0 8px 30px -8px rgba(255, 60, 40, .7); }
.lang button.on { background: linear-gradient(180deg, rgba(255, 255, 255, .2), transparent 50%), var(--grad); color: #fff; }
.stats b { background: linear-gradient(180deg, #ffd8c8, #ff5b3a 55%, #b3123a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 16px rgba(255, 70, 50, .45)); }
.marquee { background: linear-gradient(90deg, rgba(227, 38, 47, .14), rgba(30, 6, 12, .3) 30%, rgba(30, 6, 12, .3) 70%, rgba(227, 38, 47, .14)); border: 0; position: relative; }
.marquee::before, .marquee::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, #ff5b3a, #ffd0bc, #e3262f, transparent); box-shadow: 0 0 12px #ff5b3a; }
.marquee::before { top: 0 } .marquee::after { bottom: 0 }
.marquee div span { background: linear-gradient(180deg, #fff3ee, #c99a8c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marquee span::after { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav.solid { background: linear-gradient(180deg, rgba(20, 6, 12, .82), rgba(7, 6, 10, .7)); border-bottom: 0; box-shadow: 0 1px 0 rgba(255, 120, 90, .18), 0 10px 40px -20px rgba(255, 60, 40, .4); }
.menu a.on::after, .menu a:hover::after { box-shadow: 0 0 10px #ff5b3a; }
.brand b { background: linear-gradient(180deg, #fff, #f2c9bb); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand svg { filter: drop-shadow(0 0 12px rgba(255, 70, 50, .6)); }
.band { background: radial-gradient(80% 120% at 50% 0%, rgba(255, 91, 58, .45), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(163, 18, 58, .4), transparent 60%), linear-gradient(135deg, #3a0a14, #160609 60%, #2a0610);
  box-shadow: 0 60px 120px -50px rgba(255, 50, 40, .5), inset 0 1px 0 rgba(255, 220, 200, .15); }
footer { border-top: 0 !important; position: relative; background: linear-gradient(180deg, transparent, rgba(60, 8, 18, .35)); }
footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, #ff5b3a, #ffd0bc, #e3262f, transparent); box-shadow: 0 0 14px #ff5b3a; }
footer h5 { background: linear-gradient(90deg, #ffb08a, #ff5b3a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.play { background: linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 50%), var(--grad); animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 22px rgba(227, 38, 47, .1), 0 20px 70px rgba(255, 70, 50, .7) } }
.glow-cursor { background: radial-gradient(circle, rgba(255, 70, 50, .16), rgba(163, 18, 58, .06) 40%, transparent 65%); }
.scroll-hint::after { background: linear-gradient(#ffb08a, #e3262f, transparent); box-shadow: 0 0 10px #ff5b3a; }
.credit .ded { background: linear-gradient(180deg, #fff3ee, #e6b3a3); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ornaments */
.lattice-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: url(../img/patterns/lattice.svg) 0 0 / 56px; opacity: .12; -webkit-mask: radial-gradient(70% 60% at 50% 50%, #000, transparent 75%); mask: radial-gradient(70% 60% at 50% 50%, #000, transparent 75%); }
.mandala { position: absolute; pointer-events: none; z-index: 1; width: min(900px, 90vw); aspect-ratio: 1; background: url(../img/patterns/mandala.svg) center / contain no-repeat; animation: turn 120s linear infinite; opacity: .55; mix-blend-mode: screen; }
@keyframes turn { to { transform: rotate(360deg) } }
.ornament { height: 46px; background: url(../img/patterns/border_lotus.svg) center / auto 100% repeat-x; filter: drop-shadow(0 0 8px rgba(255, 70, 50, .55)); opacity: .9; margin: 0 auto; width: min(1100px, 92vw); }
.jali-bg { position: absolute; inset: 0; pointer-events: none; background: url(../img/patterns/jali.svg) 0 0 / 70px; opacity: .16; -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }
.feather-bg { position: absolute; inset: 0; pointer-events: none; background: url(../img/patterns/feather_eye.svg) 0 0 / 120px 144px; opacity: .12; -webkit-mask: radial-gradient(60% 70% at 50% 50%, #000, transparent); mask: radial-gradient(60% 70% at 50% 50%, #000, transparent); }