/* nio · Trucada */
.call-hero { display: grid; justify-items: center; gap: 10px; max-width: 640px; margin: 8px auto 0; padding: 40px 24px 32px; border: 1px solid var(--border); border-radius: 24px; background: var(--panel); text-align: center; }
.call-hero h2 { margin-top: 8px; font-size: 22px; font-weight: 500; letter-spacing: -.04em; }
.call-hero > p { max-width: 440px; text-wrap: balance; }
.call-why { font-size: 14px; color: var(--fg-muted); }
.call-why.err { color: var(--red); }
.call-cta { margin-top: 14px; }
.call-try { max-width: 640px; margin: 0 auto; }
.call-try .sec { font-size: 15px; margin: 28px 0 10px; }
.call-ex { display: flex; flex-wrap: wrap; gap: 8px; }
.call-ex span { padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--white); font-size: 14px; }
.call-notes { margin: 18px 0 0; padding-left: 18px; display: grid; gap: 6px; }

/* La cara d'en Nio: anells que respiren i que creixen amb la veu (--lvl, de 0 a 1). */
.call-face { --lvl: 0; position: relative; display: grid; place-items: center; width: 132px; height: 132px; color: var(--fg); }
.call-face .call-bot { --s: 64px; position: relative; z-index: 2; }
.call-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid currentColor; opacity: .18; transform: scale(calc(.82 + var(--lvl) * .3)); transition: transform .08s linear; animation: call-breathe 3.2s ease-in-out infinite; }
.call-ring.r2 { opacity: .09; transform: scale(calc(1 + var(--lvl) * .55)); animation-delay: -1.6s; }
.call-lvl { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 70%, transparent), transparent 70%); opacity: calc(var(--lvl) * 1.4); transform: scale(calc(.9 + var(--lvl) * .5)); transition: transform .08s linear, opacity .08s linear; }
@keyframes call-breathe { 50% { opacity: .3; } }

.call-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px; color: #fff; cursor: pointer; transition: transform .16s var(--ease), filter .16s, box-shadow .2s; -webkit-tap-highlight-color: transparent; }
.call-btn .ico { width: 26px; height: 26px; fill: currentColor; stroke: none; }
.call-btn:active { transform: scale(.93); }
.call-btn:disabled { opacity: .55; cursor: progress; }
.call-btn.go { min-width: 72px; height: 72px; padding: 0 30px; background: #1f9d55; box-shadow: 0 12px 30px -12px #1f9d55; font-size: 17px; font-weight: 600; }
.call-btn.go:hover { filter: brightness(1.06); }
.call-btn.end { width: 76px; height: 76px; background: var(--red); box-shadow: 0 12px 30px -12px var(--red); }
.call-btn.end .ico { width: 32px; height: 32px; }

/* Pantalla de la trucada: fosca, com al telèfon, i la conversa com les lletres d'Apple Music. */
.call-ov { --lvl: 0; position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: auto 1fr auto; color: #fff; background: #141112; overscroll-behavior: contain; overflow: hidden; }
.call-amb { position: absolute; inset: -20%; pointer-events: none; filter: blur(70px) saturate(1.2); opacity: calc(.5 + var(--lvl) * .45); transform: scale(calc(1 + var(--lvl) * .12)); transition: opacity .2s linear, transform .2s linear; }
.call-amb i { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; animation: call-drift 22s ease-in-out infinite alternate; }
.call-amb i:nth-child(1) { left: -10%; top: -15%; background: radial-gradient(circle, #f46a3b 0%, transparent 62%); }
.call-amb i:nth-child(2) { right: -4%; top: 18%; background: radial-gradient(circle, #6d3f7e 0%, transparent 62%); animation-duration: 27s; animation-delay: -9s; }
.call-amb i:nth-child(3) { left: 10%; bottom: -30%; background: radial-gradient(circle, #1f5f63 0%, transparent 62%); animation-duration: 31s; animation-delay: -15s; }
@keyframes call-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(8vmax, 6vmax) scale(1.12); } 100% { transform: translate(-6vmax, 3vmax) scale(.94); } }
.call-ov[data-st="ended"] .call-amb { opacity: .28; }
.call-ov > :not(.call-amb) { position: relative; z-index: 1; }

.call-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(14px + var(--safe-t)) 22px 6px; max-width: 760px; width: 100%; margin: 0 auto; }
.call-me { display: flex; align-items: center; gap: 11px; min-width: 0; }
.call-me .call-bot { --s: 30px; color: #fff; transform: scale(calc(1 + var(--lvl) * .25)); transition: transform .1s linear; }
.call-me > span { display: grid; line-height: 1.2; }
.call-me b { font-size: 15px; font-weight: 600; }
.call-me small { font-size: 13px; color: rgba(255,255,255,.62); }
.call-time { font-size: 14px; color: rgba(255,255,255,.62); font-variant-numeric: tabular-nums; }

.call-lyrics { overflow-y: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(transparent 0, #000 16%, #000 78%, transparent 100%); mask-image: linear-gradient(transparent 0, #000 16%, #000 78%, transparent 100%); }
.call-lyrics::-webkit-scrollbar { display: none; }
.call-lines { display: grid; gap: 26px; max-width: 760px; margin: 0 auto; padding: 26vh 24px 52vh; }
.call-line { font-size: clamp(27px, 7.2vw, 42px); font-weight: 700; line-height: 1.17; letter-spacing: -.035em; text-wrap: pretty; overflow-wrap: anywhere; transition: opacity .5s var(--ease), filter .5s var(--ease), transform .5s var(--ease); }
.call-line:not(.now) { opacity: .42; filter: blur(1.2px); transform: scale(.97); transform-origin: left center; }
.call-line.nio span { color: rgba(255,255,255,.32); transition: color .22s ease-out, text-shadow .4s; }
.call-line.nio span.on { color: #fff; }
.call-line.nio.now span.on { text-shadow: 0 0 22px rgba(255,255,255,.18); }
.call-line.tu { justify-self: end; max-width: 86%; font-size: clamp(20px, 5.4vw, 30px); font-weight: 600; text-align: right; color: rgba(255,255,255,.72); }
.call-line.tu:not(.now) { transform-origin: right center; }
.call-line.ear { display: flex; gap: 7px; padding: 8px 2px; opacity: 1; filter: none; transform: none; }
.call-line.ear[hidden] { display: none; }
.call-line.ear i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.8); transform: scale(calc(.55 + var(--lvl) * 1.1)); transition: transform .08s linear; }
.call-line.ear i:nth-child(2) { transform: scale(calc(.55 + var(--lvl) * 1.5)); }
.call-line.info { font-size: 15px; font-weight: 500; letter-spacing: 0; color: rgba(255,255,255,.6); filter: none; transform: none; opacity: 1; background: linear-gradient(90deg, rgba(255,255,255,.45) 30%, #fff 50%, rgba(255,255,255,.45) 70%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: call-shimmer 1.6s linear infinite; }
@keyframes call-shimmer { to { background-position: -150% 0; } }
.call-line.err { font-size: clamp(20px, 5vw, 26px); color: #ffb3a8; }
.call-ov.over .call-line { opacity: .9; filter: none; transform: none; }
.call-ov.over .call-line.tu { opacity: .7; }

.call-bar { display: flex; align-items: center; justify-content: center; gap: 40px; padding: 12px 20px calc(26px + var(--safe-b)); }
.call-ctl { display: grid; place-items: center; width: 62px; height: 62px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transition: background .18s, color .18s, transform .16s var(--ease); -webkit-tap-highlight-color: transparent; }
.call-ctl .ico { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.call-ctl:active { transform: scale(.92); }
.call-ctl[aria-pressed="true"] { background: #fff; color: #141112; }
.call-ov .call-btn.go { height: 62px; min-width: 0; padding: 0 26px; font-size: 16px; }
.call-ov .call-btn.go .ico { width: 22px; height: 22px; }
.call-ov :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
body:has(.call-ov) { overflow: hidden; }
@media (min-width: 900px) { .call-lines { padding-inline: 40px; } }
@media (prefers-reduced-motion: reduce) { .call-amb i, .call-line.info, .call-ring { animation: none; } .call-line { transition: none; } }