/* ==========================================================================
   ASTRA — FX layer
   1) Typography: headlines now use the same family as the buttons (Manrope)
   2) Cosmos: canvas sky, aurora, glyph rain, progress bar
   3) Hero choreography, zodiac ring, orbiting bodies
   4) New sections: marquee, tarot draw, sky (constellations, phases, stats)
   ========================================================================== */

/* ---------- 1. TYPOGRAPHY ---------- */
:root {
  --sans: "Manrope", "Noto Sans", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Manrope", "Noto Sans", "Noto Sans Devanagari", system-ui, sans-serif; /* serif retired: same family as buttons */
  --gold: #e5c68b;
  --gold-hi: #fff1cf;
  --violet: #8a6cd9;
}
.hero h1, .section h2, .reading-intro h2, .center-heading h2, .pricing-copy h2, .closing-cta h2 {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.08;
}
.hero h1 {
  font-size: clamp(36px, 4.3vw, 62px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.04;
  text-shadow: 0 0 60px rgba(187, 168, 255, .18);
}
.service-card h3, .step h3, .result-heading h3, .modal h2 { font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; }
.price { font-family: var(--sans); font-weight: 800; letter-spacing: -.035em; }
.card-symbol { font-family: var(--sans); font-weight: 600; }

/* The accent line: no more italic, a living gold gradient instead */
.hero h1 em, .pricing-copy h2 em {
  font-style: normal;
  font-weight: 700;
  color: transparent;
  background: linear-gradient(100deg, #d6af68 0%, var(--gold-hi) 28%, #e5c68b 48%, #c7a6ff 74%, #e5c68b 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: shimmer 8s linear infinite;
}
.pricing-copy h2 em { font-weight: 700; }

::selection { background: rgba(229, 198, 139, .32); color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
html { scrollbar-width: thin; scrollbar-color: #3d3160 transparent; }

/* ---------- 2. COSMOS LAYERS ---------- */
#cosmos { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.has-cosmos .stars { display: none; }
.aurora { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(90px); mix-blend-mode: screen; opacity: .32; will-change: transform; }
.aurora i:nth-child(1) { width: 46vw; height: 46vw; left: -12vw; top: 6vh; background: #5b3fb0; animation: aurora-a 26s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 38vw; height: 38vw; right: -10vw; top: 38vh; background: #a8803f; opacity: .16; animation: aurora-b 32s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { width: 34vw; height: 34vw; left: 30vw; bottom: -14vh; background: #2f5fa8; opacity: .18; animation: aurora-c 29s ease-in-out infinite alternate; }
.glyph-rain { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.glyph-rain span { position: absolute; bottom: -40px; color: var(--gold); opacity: 0; animation: rise-up var(--d, 30s) linear var(--dl, 0s) infinite; text-shadow: 0 0 12px rgba(229, 198, 139, .6); }
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #7b5cd0, var(--gold), var(--gold-hi)); box-shadow: 0 0 14px rgba(229, 198, 139, .65); pointer-events: none; }
.topbar { transition: height .35s cubic-bezier(.2, .7, .2, 1), background .35s; }
.topbar.scrolled { height: 66px; background: rgba(13, 10, 27, .9); }
.trail { position: fixed; z-index: 70; pointer-events: none; color: var(--gold); font-size: 13px; transform: translate(-50%, -50%); text-shadow: 0 0 10px rgba(229, 198, 139, .9); animation: trail .95s ease-out forwards; }

/* ---------- 3. HERO CHOREOGRAPHY ---------- */
@media (prefers-reduced-motion: no-preference) {
  .topbar { animation: drop-in .8s cubic-bezier(.2, .7, .2, 1) both; }
  .hero .eyebrow { animation: rise-in 1s cubic-bezier(.2, .7, .2, 1) .15s both; }
  .hero h1 { animation: rise-in 1.1s cubic-bezier(.2, .7, .2, 1) .3s both; }
  .hero .hero-text { animation: rise-in 1s cubic-bezier(.2, .7, .2, 1) .55s both; }
  .hero .hero-actions { animation: rise-in 1s cubic-bezier(.2, .7, .2, 1) .72s both; }
  .hero .hero-trust { animation: rise-in 1s cubic-bezier(.2, .7, .2, 1) .9s both; }
  .hero .hero-art { animation: art-in 1.6s cubic-bezier(.2, .7, .2, 1) .35s both; }
  .hero h1 em { animation: shimmer 8s linear infinite; }
}
.hero .button-primary { animation: cta-glow 3.4s ease-in-out infinite; }
.hero .button-primary .arrow { display: inline-block; animation: nudge 2.6s ease-in-out infinite; }

.hero-art { --mx: 0; --my: 0; }
.hero-art .moon { translate: calc(var(--mx) * 18px) calc(var(--my) * 14px); }
.hero-art .moon-halo { translate: calc(var(--mx) * 26px) calc(var(--my) * 20px); }
.hero-art .orbit-one { translate: calc(var(--mx) * -12px) calc(var(--my) * -10px); }
.hero-art .spark { translate: calc(var(--mx) * -34px) calc(var(--my) * -26px); }
.hero-art .card-top { translate: calc(var(--mx) * -30px) calc(var(--my) * -22px); }
.hero-art .card-bottom { translate: calc(var(--mx) * 26px) calc(var(--my) * 20px); }

.zodiac-ring { position: absolute; left: 50%; top: 50%; width: 340px; height: 340px; margin: -170px 0 0 -170px; animation: spin 110s linear infinite; pointer-events: none; opacity: .9; }
.zodiac-ring .zr-line { fill: none; stroke: rgba(229, 198, 139, .28); stroke-width: 1; }
.zodiac-ring .zr-tick { stroke: rgba(229, 198, 139, .4); stroke-width: 1; }
.zodiac-ring text { fill: var(--gold); font-size: 17px; font-family: "Segoe UI Symbol", "Noto Sans Symbols", "Noto Sans Symbols 2", "DejaVu Sans", sans-serif; opacity: .9; }
.orbit-body { position: absolute; left: 50%; top: 50%; border-radius: 50%; pointer-events: none; }
.orbit-body i { position: absolute; top: -5px; left: 50%; margin-left: -5px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, var(--gold) 60%); box-shadow: 0 0 16px 2px rgba(229, 198, 139, .75); }
.orbit-body-a { width: 410px; height: 410px; margin: -205px 0 0 -205px; border: 1px dashed rgba(229, 198, 139, .14); animation: spin 26s linear infinite; }
.orbit-body-b { width: 480px; height: 480px; margin: -240px 0 0 -240px; border: 1px dashed rgba(187, 168, 255, .12); animation: spin 48s linear infinite reverse; }
.orbit-body-b i { width: 15px; height: 15px; margin-left: -7px; top: -7px; background: radial-gradient(circle at 35% 35%, #efe4ff, #9b7de0 65%); box-shadow: 0 0 20px 3px rgba(155, 125, 224, .7); }
.orbit-body-b i::after { content: ""; position: absolute; left: -7px; right: -7px; top: 50%; height: 4px; margin-top: -2px; border: 1px solid rgba(239, 228, 255, .6); border-radius: 50%; transform: rotate(-18deg); }

/* ---------- Feature strip + marquee ---------- */
.strip-icon { animation: bob 4.6s ease-in-out infinite; }
.feature-strip > div:nth-child(2) .strip-icon { animation-delay: -1.1s; }
.feature-strip > div:nth-child(3) .strip-icon { animation-delay: -2.2s; }
.feature-strip > div:nth-child(4) .strip-icon { animation-delay: -3.3s; }
.marquee { overflow: hidden; padding: 22px 0; border-bottom: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { flex: none; margin-right: 52px; font-size: 26px; line-height: 1; color: rgba(229, 198, 139, .72); font-family: "Segoe UI Symbol", "Noto Sans Symbols", "Noto Sans Symbols 2", "DejaVu Sans", sans-serif; transition: color .3s, text-shadow .3s, transform .3s; }
.marquee span.dim { font-size: 12px; color: rgba(187, 168, 255, .45); align-self: center; }
.marquee span:not(.dim):hover { color: var(--gold-hi); text-shadow: 0 0 18px rgba(229, 198, 139, .8); transform: translateY(-4px) scale(1.2); }

/* ---------- Scroll reveal for new blocks (armed by JS only) ---------- */
.fx [data-fx].fx-armed { opacity: 0; transform: translateY(30px) scale(.985); filter: blur(6px); transition: opacity .95s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 110ms), transform .95s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 110ms), filter .95s ease calc(var(--i, 0) * 110ms); }
.fx [data-fx].fx-armed.in { opacity: 1; transform: none; filter: none; }

/* ---------- Service cards: tilt + spotlight ---------- */
.service-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(280px circle at var(--x, 50%) var(--y, 0%), rgba(229, 198, 139, .15), transparent 62%); }
.service-card:hover::after { opacity: 1; }
.service-card.settled { transition: transform .25s ease-out, border-color .3s, box-shadow .4s, background .4s !important; transition-delay: 0s !important; }
.service-card.settled:hover { transform: perspective(900px) translateY(-8px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.service-number { transition: color .3s, letter-spacing .3s; }
.service-card:hover .service-number { color: var(--gold); letter-spacing: 3px; }
.service-card .service-link b { display: inline-block; transition: transform .3s; }
.service-card:hover .service-link b { transform: translate(4px, -4px); }
.card-glow { animation: halo-breathe 6s ease-in-out infinite; }

/* ---------- Buttons ---------- */
.button { transition: transform .2s, translate .25s cubic-bezier(.2, .7, .2, 1), background .2s, border-color .2s, box-shadow .3s; }
.button-primary:hover { box-shadow: 0 12px 38px rgba(229, 198, 139, .32), inset 0 1px 0 rgba(255, 255, 255, .4); }

/* ---------- Reading section ornaments ---------- */
.reading-section { position: relative; overflow: hidden; isolation: isolate; }
.reading-section > * { position: relative; z-index: 1; }
.reading-section::before { content: ""; position: absolute; z-index: 0; width: 760px; height: 760px; right: -260px; top: 50%; margin-top: -380px; border-radius: 50%; pointer-events: none; background: repeating-conic-gradient(rgba(229, 198, 139, .26) 0 .35deg, transparent .35deg 4deg); -webkit-mask: radial-gradient(circle, transparent 61%, #000 61.4%, #000 63%, transparent 63.4%); mask: radial-gradient(circle, transparent 61%, #000 61.4%, #000 63%, transparent 63.4%); animation: spin 160s linear infinite; }
.reading-panel { position: relative; }
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.reading-panel::after, .price-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: conic-gradient(from var(--ang), transparent 0 68%, rgba(229, 198, 139, .95) 84%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask-composite: exclude; animation: ang 7s linear infinite; }
.free-badge { animation: badge-pulse 3s ease-in-out infinite; }
.submit-button .arrow { display: inline-block; animation: sparkle 3.2s ease-in-out infinite; }

/* ---------- How it works: flowing connectors + ping ---------- */
.step:not(:last-child)::after { background: linear-gradient(90deg, rgba(229, 198, 139, .1) 0 38%, rgba(255, 238, 196, .95) 50%, rgba(229, 198, 139, .1) 62% 100%); background-size: 300% 100%; animation: flow 3.4s linear infinite; }
.step-icon { position: relative; }
.step-icon::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(229, 198, 139, .55); animation: ping 4s ease-out infinite; }
.step:nth-child(2) .step-icon::after { animation-delay: 1.3s; }
.step:nth-child(3) .step-icon::after { animation-delay: 2.6s; }

/* ---------- Closing CTA ---------- */
.closing-cta > * { position: relative; z-index: 1; }
.closing-cta::before { content: ""; position: absolute; z-index: 0; width: 900px; height: 900px; left: 50%; top: 50%; margin: -450px 0 0 -450px; border-radius: 50%; pointer-events: none; background: conic-gradient(from 0deg, transparent, rgba(139, 108, 217, .14), transparent 38%, rgba(229, 198, 139, .1), transparent 68%); animation: spin 45s linear infinite; }
.closing-orb { position: relative; width: 64px; height: 64px; margin: 0 auto; display: grid; place-items: center; }
.closing-orb .closing-symbol { font-size: 30px; line-height: 1; }
.pulse-ring { position: absolute; inset: 0; border: 1px solid rgba(229, 198, 139, .55); border-radius: 50%; opacity: 0; animation: ping-big 5s cubic-bezier(.2, .6, .3, 1) infinite; }
.pulse-ring:nth-child(2) { animation-delay: 1.6s; }
.pulse-ring:nth-child(3) { animation-delay: 3.2s; }
.button-light { animation: cta-glow-light 3.6s ease-in-out infinite; }

/* ---------- 4a. TAROT DRAW ---------- */
.draw-section { text-align: center; }
.lead { color: var(--muted); max-width: 52ch; margin: 16px auto 0; font-size: 13px; line-height: 1.9; }
.draw-stage { display: grid; grid-template-columns: repeat(3, minmax(0, 210px)); justify-content: center; gap: clamp(14px, 4vw, 54px); margin-top: 52px; }
.tcard { display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 0; }
.tfloat { width: 100%; animation: card-idle 6s ease-in-out infinite; position: relative; }
.tcard:nth-child(2) .tfloat { animation-delay: -2s; }
.tcard:nth-child(3) .tfloat { animation-delay: -4s; }
.tcard-btn { display: block; width: 100%; aspect-ratio: 2 / 3.2; border: 0; padding: 0; background: none; cursor: pointer; position: relative; color: inherit; border-radius: 16px; }
.tflip { display: block; position: absolute; inset: 0; transform-style: preserve-3d; transform: perspective(1100px) rotateY(0deg); transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.tcard:not(.flipped) .tcard-btn:hover .tflip, .tcard:not(.flipped) .tcard-btn:focus-visible .tflip { transform: perspective(1100px) rotateY(-9deg) rotateX(4deg) translateY(-6px); }
.tcard-btn { transition: filter .5s; }
.tcard:not(.flipped) .tcard-btn:hover { filter: drop-shadow(0 22px 34px rgba(155, 125, 224, .35)); }
.tcard.flipped .tcard-btn { filter: drop-shadow(0 20px 40px rgba(229, 198, 139, .25)); }
.tcard.flipped .tcard-btn .tflip { transform: perspective(1100px) rotateY(180deg); }
.tcard.flipped .tcard-btn { cursor: default; }
.tface { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; border: 1px solid rgba(229, 198, 139, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.tface::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(229, 198, 139, .26); border-radius: 10px; pointer-events: none; z-index: 2; }
.tback { background: radial-gradient(circle at 50% 38%, #3a2d5e, #1a1430 70%); display: grid; place-items: center; }
.tback svg { width: 76%; height: auto; color: var(--gold); }
.tback::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .13) 48%, transparent 66%); background-size: 260% 100%; animation: card-sheen 5.5s ease-in-out infinite; pointer-events: none; }
.tfront { transform: rotateY(180deg); background: radial-gradient(circle at 50% 30%, #3d3060, #1b1531 72%); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 16px 10px 15px; text-align: center; }
.tnum { font-weight: 700; font-size: 12px; letter-spacing: .24em; color: var(--gold); text-indent: .24em; }
.tart { width: 72%; color: var(--gold); flex: 1; display: grid; place-items: center; margin: 4px 0; }
.tart svg { width: 100%; height: auto; max-height: 100%; filter: drop-shadow(0 0 8px rgba(229, 198, 139, .45)); }
.tname { font-weight: 700; font-size: clamp(10px, 1.4vw, 15px); line-height: 1.25; letter-spacing: -.01em; color: #fff5dc; position: relative; z-index: 3; }
.tmeta { display: grid; gap: 6px; justify-items: center; min-height: 52px; }
.tlabel { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--gold); }
.ttheme { font-size: 11px; line-height: 1.6; color: #cfc6e2; max-width: 22ch; opacity: 0; transform: translateY(-6px); transition: opacity .6s ease .55s, transform .6s ease .55s; }
.tcard.flipped .ttheme { opacity: 1; transform: none; }
.tburst { position: absolute; left: 50%; top: 50%; z-index: 5; pointer-events: none; color: var(--gold-hi); font-size: 14px; text-shadow: 0 0 12px var(--gold); animation: burst .95s cubic-bezier(.1, .7, .3, 1) forwards; }
.draw-stage.shuffling .tfloat { animation: shuffle .95s cubic-bezier(.5, 0, .3, 1); }
.draw-stage.shuffling .tcard:nth-child(1) { --sx: 112%; --sr: 7deg; }
.draw-stage.shuffling .tcard:nth-child(2) { --sx: 0%; --sr: -4deg; }
.draw-stage.shuffling .tcard:nth-child(3) { --sx: -112%; --sr: -7deg; }
.draw-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 34px; }

/* ---------- 4b. SKY ---------- */
.sky { text-align: center; }
.constellations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 46px; }
.constellation { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(150deg, rgba(34, 27, 58, .62), rgba(16, 13, 32, .74)); padding: 14px; transition: border-color .4s, transform .5s cubic-bezier(.2, .8, .2, 1); }
.constellation:hover { border-color: rgba(229, 198, 139, .5); transform: translateY(-6px); }
.constellation::before { content: ""; position: absolute; width: 180px; height: 180px; right: -60px; top: -60px; border-radius: 50%; background: rgba(139, 108, 217, .16); filter: blur(34px); pointer-events: none; }
.constellation svg { display: block; width: 100%; height: auto; position: relative; }
.cline { fill: none; stroke: rgba(229, 198, 139, .85); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.fx .cline { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s cubic-bezier(.4, 0, .2, 1) calc(var(--i, 0) * .55s + .3s); }
.fx .in .cline, .fx.no-io .cline { stroke-dashoffset: 0; }
.cstar { fill: var(--gold-hi); filter: drop-shadow(0 0 4px rgba(255, 236, 190, .95)); transform-box: fill-box; transform-origin: center; animation: twinkle 3.4s ease-in-out var(--d, 0s) infinite; }
.cdust { fill: rgba(200, 185, 255, .55); }
.phases { display: flex; justify-content: center; align-items: center; gap: clamp(10px, 3vw, 36px); margin: 54px 0 4px; flex-wrap: wrap; }
.phase { width: clamp(34px, 6vw, 58px); height: auto; opacity: .55; animation: phase-on 12.8s ease-in-out infinite; animation-delay: calc(var(--i) * 1.6s); }
.phase .disc { fill: #1b1531; stroke: rgba(229, 198, 139, .4); stroke-width: .6; }
.phase .lit { fill: #f3e4bf; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 780px; margin: 58px auto 0; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat b { display: block; font-weight: 800; font-size: clamp(40px, 6.4vw, 76px); letter-spacing: -.05em; line-height: 1; background: linear-gradient(180deg, var(--gold-hi), #cfa561); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 10px; font-size: 12px; color: var(--muted); }

/* ---------- KEYFRAMES ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: -260% 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(26px); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
@keyframes art-in { from { opacity: 0; transform: scale(.88) rotate(-6deg); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes cta-glow { 0%, 100% { box-shadow: 0 8px 28px rgba(220, 185, 124, .15), 0 0 0 0 rgba(229, 198, 139, .35), inset 0 1px 0 rgba(255, 255, 255, .3); } 50% { box-shadow: 0 10px 34px rgba(220, 185, 124, .3), 0 0 0 12px rgba(229, 198, 139, 0), inset 0 1px 0 rgba(255, 255, 255, .3); } }
@keyframes cta-glow-light { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 223, 189, .35); } 50% { box-shadow: 0 0 0 14px rgba(240, 223, 189, 0); } }
@keyframes nudge { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, -3px); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes rise-up { 0% { transform: translateY(0) rotate(0); opacity: 0; } 8% { opacity: var(--o, .25); } 90% { opacity: var(--o, .25); } 100% { transform: translateY(-118vh) rotate(var(--r, 90deg)); opacity: 0; } }
@keyframes aurora-a { to { transform: translate3d(14vw, 10vh, 0) scale(1.2); } }
@keyframes aurora-b { to { transform: translate3d(-16vw, -8vh, 0) scale(1.15); } }
@keyframes aurora-c { to { transform: translate3d(10vw, -14vh, 0) scale(1.25); } }
@keyframes trail { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + 34px)) scale(.3) rotate(90deg); } }
@keyframes ang { to { --ang: 360deg; } }
@keyframes badge-pulse { 0%, 100% { background: rgba(176, 151, 229, .13); } 50% { background: rgba(229, 198, 139, .22); } }
@keyframes flow { to { background-position: -300% 0; } }
@keyframes ping { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(1.55); opacity: 0; } }
@keyframes ping-big { 0% { transform: scale(.6); opacity: 0; } 15% { opacity: .7; } 100% { transform: scale(4.2); opacity: 0; } }
@keyframes card-idle { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-9px) rotate(.6deg); } }
@keyframes card-sheen { 0%, 55% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
@keyframes burst { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2) rotate(180deg); opacity: 0; } }
@keyframes shuffle { 0% { transform: none; } 40% { transform: translateX(var(--sx)) rotate(var(--sr)) scale(.94); } 100% { transform: none; } }
@keyframes twinkle { 0%, 100% { opacity: .55; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.4); } }
@keyframes phase-on { 0%, 14%, 100% { opacity: .5; transform: scale(1); filter: none; } 3.5%, 10% { opacity: 1; transform: scale(1.22); filter: drop-shadow(0 0 14px rgba(229, 198, 139, .85)); } }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .constellations { gap: 10px; }
  .orbit-body-b { display: none; }
}
@media (max-width: 650px) {
  .zodiac-ring { width: 270px; height: 270px; margin: -135px 0 0 -135px; }
  .orbit-body-a { width: 320px; height: 320px; margin: -160px 0 0 -160px; }
  .constellations { grid-template-columns: 1fr; max-width: 360px; margin-left: auto; margin-right: auto; }
  .draw-stage { gap: 10px; }
  .tface { border-radius: 11px; }
  .tface::before { inset: 5px; border-radius: 7px; }
  .tfront { padding: 12px 6px 11px; }
  .tnum { font-size: 9px; }
  .ttheme { font-size: 10px; }
  .stat span { font-size: 10px; }
  .reading-section::before { width: 520px; height: 520px; margin-top: -260px; right: -300px; }
  .step:not(:last-child)::after { background: linear-gradient(180deg, rgba(229, 198, 139, .1) 0 38%, rgba(255, 238, 196, .95) 50%, rgba(229, 198, 139, .1) 62% 100%); background-size: 100% 300%; animation-name: flow-v; }
}
@keyframes flow-v { to { background-position: 0 -300%; } }

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .glyph-rain, .trail { display: none; }
  .fx [data-fx].fx-armed { opacity: 1; transform: none; filter: none; }
  .fx .cline { stroke-dashoffset: 0; }
  .phase { opacity: .8; }
}

/* keep decorative rings from creating sideways scroll on tablets */
.hero { overflow-x: clip; }
html, body { overflow-x: clip; }


/* ==========================================================================
   PERFORMANCE PASS — same look, far cheaper to paint (tablets / mid GPUs)
   ========================================================================== */

/* Blurred, blended fixed layers were the biggest cost: use plain gradients instead */
.aurora i { filter: none; mix-blend-mode: normal; opacity: 1; }
.aurora i:nth-child(1) { background: radial-gradient(circle, rgba(91, 63, 176, .5), transparent 66%); }
.aurora i:nth-child(2) { background: radial-gradient(circle, rgba(168, 128, 63, .28), transparent 66%); }
.aurora i:nth-child(3) { background: radial-gradient(circle, rgba(47, 95, 168, .32), transparent 66%); }
.ambient-orb { filter: none; width: 380px; height: 380px; opacity: .4; }
.ambient-orb-one { background: radial-gradient(circle, rgba(169, 139, 255, .45), transparent 66%); }
.ambient-orb-two { background: radial-gradient(circle, rgba(216, 184, 125, .35), transparent 66%); }

/* backdrop-filter re-blurs every frame over the animated sky: drop it where it is not essential */
.service-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
.floating-card { backdrop-filter: none; -webkit-backdrop-filter: none; background: linear-gradient(135deg, rgba(35, 27, 56, .94), rgba(25, 19, 43, .9)); }
.topbar { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* No animated blur / drop-shadow filters */
.fx [data-fx].fx-armed { filter: none; transition: opacity .95s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 110ms), transform .95s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 110ms); }
.cstar { filter: none; }
.glyph-rain span { text-shadow: none; }
@keyframes rise-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes art-in { from { opacity: 0; transform: scale(.9) rotate(-5deg); } to { opacity: 1; transform: none; } }
@keyframes phase-on { 0%, 14%, 100% { opacity: .5; transform: scale(1); } 3.5%, 10% { opacity: 1; transform: scale(1.22); } }

/* Promote long-running spinners to their own compositor layers */
.zodiac-ring, .orbit-body, .orbit-body i, .marquee-track, .aurora i, .moon, .moon-halo, .tfloat { will-change: transform; }

/* Skip rendering of off-screen sections until they are near the viewport */
.explore-section, .draw-section, .sky, .how-section, .pricing-section, .closing-cta, .footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}

/* Touch devices: remove the heaviest decorative repaint loops */
@media (pointer: coarse) {
  .reading-panel::after, .price-card::after { display: none; }
  .reading-section::before, .closing-cta::before { animation: none; }
  .orbit-body-b { display: none; }
  .card-glow { animation: none; }
}

/* Auto "lite" mode — switched on by fx.js when the device can't hold ~45fps */
.perf-lite .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(13, 10, 27, .95); }
.perf-lite .glyph-rain, .perf-lite .aurora i:nth-child(3) { display: none; }
.perf-lite .aurora i, .perf-lite .ambient-orb { animation: none; }
.perf-lite .cstar, .perf-lite .tback::after, .perf-lite .step-icon::after, .perf-lite .pulse-ring, .perf-lite .strip-icon,
.perf-lite .moon-halo, .perf-lite .free-badge, .perf-lite .submit-button .arrow, .perf-lite .hero .button-primary, .perf-lite .button-light { animation: none; }
.perf-lite .pulse-ring, .perf-lite .step-icon::after { opacity: 0; }
.perf-lite .reading-section::before, .perf-lite .closing-cta::before, .perf-lite .orbit-body, .perf-lite .step:not(:last-child)::after { display: none; }
.perf-lite .tfloat { animation: none; }
.perf-lite .zodiac-ring { animation-duration: 220s; }
.perf-lite .tart svg { filter: none; }
.perf-lite .hero::before { display: none; }