/* Dorax Finance — the new design said once (v540, features/phone/r6-launch.js; the canvas "Lanzamiento del nuevo estilo de Dorax", boards
   "Aviso" and "Onboarding 1–5"): the notice with Dorax's icon, and the five steps over the whole screen. The steps are built on the first visits'
   page (css/look/look-r6-tours.css: .r6tv, its foot and buttons); here what is their own: the dots and "Skip" at the top, the picture (the new
   Summary in a phone with the 3D icons around it, or a screen in a window with its fade, "Example" and the swipe), the words as the boards
   have them. Light: tools/r6-light.py; a computer: a card in the middle (css/desk6/desk6-moments.css). */

/* ---------- the notice: Dorax's own icon where the others have their thing ---------- */
:root.land .curio.r6n.r6nd-note .fl-ico.nt-r6 > img.r6nd-app { display: block; width: 32px; height: 32px; border-radius: 9px; }

/* ---------- the page ---------- */
.r6nd.r6tv { z-index: 57; }
.r6nd.again { animation: none; }
.r6nd .r6tv-scr { padding: 0 20px; }
.r6nd-top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; margin-top: calc(10px + var(--safe-t, 0px)); }
.r6nd-dots { display: flex; align-items: center; gap: 6px; }
.r6nd-dots i { display: block; width: 6px; height: 6px; border-radius: 3px; background: rgba(239, 241, 246, .2); transition: width .3s cubic-bezier(.2, .9, .25, 1), background-color .3s ease; }
.r6nd-dots i.done { background: rgba(159, 209, 130, .45); }
.r6nd-dots i.on { width: 20px; background: #9FD182; }
.r6nd-skip { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; height: 44px; padding: 0 4px; color: rgba(239, 241, 246, .66); font-size: 15px; font-weight: 500; -webkit-tap-highlight-color: transparent; }
.r6nd-skip:active { opacity: .7; }
.r6nd-body { flex: none; display: flex; flex-direction: column; padding-bottom: 120px; }

/* the picture: as tall as the screen allows, at most the boards' 440 px */
.r6nd-pic { position: relative; flex: none; height: clamp(250px, calc(100vh - 410px), 440px); height: clamp(250px, calc(100dvh - 410px), 440px); margin-top: 8px; }
.r6nd-win { overflow: hidden; border-radius: 30px; background: #121414; }
.r6nd-win::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .1); pointer-events: none; }
.r6nd-win > img { display: block; width: 100%; height: auto; }
.r6nd-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; background: linear-gradient(180deg, rgba(7, 8, 8, 0), #070808 88%); pointer-events: none; }
.r6nd-chip { position: absolute; top: 14px; display: flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(7, 8, 8, .72); color: rgba(239, 241, 246, .72); font-size: 12px; }
.r6nd-chip.left { left: 14px; }
.r6nd-chip.right { right: 14px; }
.r6nd-swipe { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; background: rgba(26, 29, 29, .94); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .12); color: #EFF1F6; font-size: 13.5px; white-space: nowrap; }
.r6nd-swipe svg { width: 16px; height: 16px; color: #9FD182; stroke-width: 2.2; }
/* the first step: the new Summary in a phone, Dorax's icons around it, on a lime glow */
.r6nd-first { width: 100%; max-width: 350px; margin-inline: auto; }
.r6nd-glow { position: absolute; left: 20px; right: 20px; top: 70px; height: 340px; max-height: calc(100% - 70px); border-radius: 50%; background: radial-gradient(closest-side, rgba(159, 209, 130, .26), rgba(159, 209, 130, 0)); }
.r6nd-phone { position: absolute; left: 50%; top: 26px; bottom: 0; width: 210px; margin-left: -105px; overflow: hidden; padding: 6px 6px 0; border-radius: 36px 36px 0 0; background: #1A1D1D; box-shadow: 0 0 0 1px rgba(239, 241, 246, .14); }
.r6nd-phone img { display: block; width: 198px; height: auto; border-radius: 30px 30px 0 0; }
.r6nd-first .r6nd-fade { height: 90px; background: linear-gradient(180deg, rgba(7, 8, 8, 0), #070808); }
.r6nd-around { position: absolute; inset: 0; pointer-events: none; }
.r6nd-ic { position: absolute; display: block; transform: rotate(var(--r, 0deg)); }
.r6nd-ic svg, .r6nd-ic img { display: block; width: 100%; height: 100%; }
/* the words, as the boards have them */
.r6nd-words { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.r6nd h1 { margin: 0; color: #EFF1F6; font-size: 32px; line-height: 1.1; font-weight: 500; letter-spacing: -.025em; text-wrap: balance; }
.r6nd .r6tv-lead { margin: 0; color: rgba(239, 241, 246, .7); font-size: 16px; line-height: 1.5; }
.r6nd .r6tv-go { font-size: 16px; font-weight: 600; }
.r6nd .r6tv-acts { flex: 1 1 auto; min-width: 0; }
/* a short phone: smaller words, so the picture keeps its room */
@media (max-height: 700px) {
  .r6nd h1 { font-size: 28px; }
  .r6nd .r6tv-lead { font-size: 15px; }
}

/* ---------- each step comes in: the picture, then the words ---------- */
@keyframes r6nd-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
@keyframes r6nd-pop { from { opacity: 0; transform: rotate(var(--r, 0deg)) scale(.6); } }
.r6nd-body.in > .r6nd-pic { animation: r6nd-in .36s cubic-bezier(.2, .9, .25, 1) both; }
.r6nd-body.in > .r6nd-words { animation: r6nd-in .36s cubic-bezier(.2, .9, .25, 1) .07s both; }
.r6nd-body.in .r6nd-ic { animation: r6nd-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.r6nd-body.in .r6nd-ic:nth-child(2) { animation-delay: .08s; }
.r6nd-body.in .r6nd-ic:nth-child(3) { animation-delay: .16s; }
.r6nd-body.in .r6nd-ic:nth-child(4) { animation-delay: .24s; }
.r6nd-body.in .r6nd-ic:nth-child(5) { animation-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .r6nd-body.in > *, .r6nd-body.in .r6nd-ic { animation: none; }
  .r6nd-dots i { transition: none; }
}