/* Hero: vivid headline, a card that floats in light, and a few things drifting around it. */

/* ---- headline ---- */
.display .hw { display: inline-block; opacity: 0; transform: translateY(0.5em) rotate(2deg); animation: hwIn 800ms calc(var(--d) * 140ms + 100ms) cubic-bezier(0.2, 1, 0.3, 1) forwards; }
.display em { background: none !important; color: inherit !important; -webkit-text-fill-color: initial !important; }
.display .gw { position: relative; display: inline-block; color: transparent; -webkit-background-clip: text; background-clip: text; background-size: 220% 100%; opacity: 0; transform: translateY(0.5em) rotate(2deg); animation: hwIn 800ms calc(var(--d) * 140ms + 100ms) cubic-bezier(0.2, 1, 0.3, 1) forwards, gwFlow 6s ease-in-out infinite alternate; }
.display .gw::before { content: attr(data-t); position: absolute; left: 0; top: 0; z-index: -1; background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; filter: blur(22px); opacity: 0.55; }
/* two vivid pairs, blended in oklch so the middle never goes grey */
.display .g1 { background-image: linear-gradient(100deg, #2bf08a, #19e8d6, #2bf08a); }
.display .g2 { background-image: linear-gradient(100deg, #3aa8ff, #9b6bff, #ff4fd0, #3aa8ff); }
@supports (background: linear-gradient(in oklch, red, blue)) {
  .display .g1 { background-image: linear-gradient(100deg in oklch, #2bf08a, #19e8d6, #2bf08a); }
  .display .g2 { background-image: linear-gradient(100deg in oklch, #3aa8ff, #9b6bff, #ff4fd0, #3aa8ff); }
}
@keyframes hwIn { to { opacity: 1; transform: none; } }
@keyframes gwFlow { to { background-position: 100% 0; } }

/* ---- pills, each with its own colour ---- */
.trust li { font-weight: 700; }
.trust li:nth-child(1) { color: #bfe0ff; border-color: rgba(90, 168, 255, 0.45); background: rgba(90, 168, 255, 0.1); }
.trust li:nth-child(1) svg { color: #5aa8ff; }
.trust li:nth-child(2) { color: #c8ffe0; border-color: rgba(79, 240, 138, 0.45); background: rgba(79, 240, 138, 0.1); }
.trust li:nth-child(2) svg { color: #4ff08a; }
.trust li:nth-child(3) { color: #ffd0ec; border-color: rgba(255, 95, 210, 0.45); background: rgba(255, 95, 210, 0.1); }
.trust li:nth-child(3) svg { color: #ff5fd2; }

/* ---- download button: a slow shine ---- */
.hero-cta .btn { position: relative; overflow: hidden; background: linear-gradient(100deg, #2bf08a, #19e8d6); }
.hero-cta .btn::after { content: ""; position: absolute; top: -50%; bottom: -50%; width: 36%; left: -50%; transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); animation: ctaShine 4.5s ease-in-out infinite; }
@keyframes ctaShine { 0%, 60% { left: -50%; } 100% { left: 130%; } }

/* ---- the stage ---- */
.hero-stage::before { display: none; }
.hero-tilt { position: relative; transform-style: preserve-3d; transition: transform 250ms var(--ease-out); transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.hero-ring { position: absolute; inset: -9% -7%; z-index: -1; border-radius: 40px; background: conic-gradient(from var(--a, 0deg), #2bf08a, #19e8d6, #3aa8ff, #9b6bff, #ff4fd0, #2bf08a); filter: blur(44px); opacity: 0.5; animation: ringSpin 14s linear infinite; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ringSpin { to { --a: 360deg; } }
.hero-tilt .dcard { animation: heroFloat 7s ease-in-out infinite; border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 40px 80px -30px #000; }
.dspotify-logo { width: 16px; height: 16px; border-radius: 4px; vertical-align: -3px; margin-right: 4px; }

/* chips that drift around the card */
.hero-chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; white-space: nowrap; color: #fff; background: rgba(14, 14, 22, 0.72); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(12px); box-shadow: 0 16px 36px -16px #000; animation: chipBob 5s ease-in-out infinite; }
.hero-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--k); box-shadow: 0 0 10px var(--k); }
.hero-chip.c1 { --k: #2bf08a; top: -14px; left: -26px; }
.hero-chip.c2 { --k: #7983f5; top: 44%; right: -34px; animation-delay: 1.2s; }
.hero-chip.c3 { --k: #ff4fd0; bottom: 22px; left: -34px; animation-delay: 2.4s; }
@keyframes chipBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (max-width: 900px) { .hero-chip.c1 { left: 6px; } .hero-chip.c2 { right: 6px; } .hero-chip.c3 { left: 6px; } }

/* emoji particles rising behind the chips */
.hero-fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: visible; }
.hero-fx span { position: absolute; bottom: 10%; font-size: 1.3rem; opacity: 0; animation: fxRise var(--t, 7s) var(--s, 0s) ease-in infinite; }
@keyframes fxRise { 0% { opacity: 0; transform: translateY(0) scale(0.6) rotate(0); } 15% { opacity: 0.95; } 100% { opacity: 0; transform: translateY(-340px) translateX(var(--x, 20px)) scale(1.1) rotate(var(--r, 20deg)); } }

@media (prefers-reduced-motion: reduce) { .display .gw, .display .hw { animation: none; opacity: 1; transform: none; } .hero-ring, .hero-chip, .hero-fx span, .hero-cta .btn::after { animation: none !important; } .hero-fx { display: none; } }

.hero-tilt { width: 100%; max-width: 400px; }

/* ---- typed headline: types, waits, erases, types the next one ---- */
.tw-line { display: inline-flex; align-items: baseline; min-height: 1.05em; }
.display .g1 { background-image: linear-gradient(100deg, #19f08a, #7dff5a, #19f08a); }
@supports (background: linear-gradient(in oklch, red, blue)) { .display .g1 { background-image: linear-gradient(100deg in oklch, #19f08a, #8dff4f, #19f08a); } }
.tw-caret { display: inline-block; width: 0.07em; height: 0.82em; margin-left: 0.06em; align-self: center; border-radius: 2px; background: #7dff5a; box-shadow: 0 0 14px #7dff5a; animation: caret 900ms steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.tw-line.typing .tw-caret { animation: none; opacity: 1; }
.hero-ring { background: conic-gradient(from var(--a, 0deg), #19f08a, #7dff5a, #19e8d6, #3aa8ff, #19f08a); }
.tw-line { white-space: nowrap; font-size: 0.9em; }
.tw-line .tw { white-space: nowrap; }