/* Homepage "platform principles": pills that swap a layered, floating product
   scene. Every scene is seven full-canvas (1860×1240) transparent images —
   bg conduits → rack → screen → four device groups — so each layer can move on
   its own. Three independent properties keep the motions from fighting:
     translate / scale / clip-path  → enter + exit (one-shot, per scene)
     transform                      → idle float (looping, per scene)
     opacity                        → both (the loop never touches it)
   Each scene sets its own signature through custom properties on
   .rl-pp__layers[data-scene], so the animation list below is written once. */
.rl-pp { background: var(--rl-dev-bg, #fff); padding: 4rem 0 5rem; }
.rl-pp__head { text-align: center; max-width: 46rem; margin: 0 auto 1.75rem; }
.rl-pp__head .rl-pp__title { max-width: none; margin: 0.5rem auto 0; }

/* Pills */
.rl-pp__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.6rem; margin: 0 auto 2.25rem; padding: 0; }
.rl-pp__tab {
    display: inline-flex; align-items: center; gap: 0.5rem;
    height: 44px; padding: 0 1.05rem; border-radius: 999px;
    border: 1px solid var(--rl-dev-line, #E1E6EC); background: transparent;
    color: var(--rl-dev-ink-2, #3B4350); font: 600 0.95rem/1 "DM Sans", system-ui, sans-serif;
    cursor: pointer; white-space: nowrap;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.rl-pp__tab i { font-size: 0.95em; opacity: .75; }
.rl-pp__tab:hover { border-color: var(--rl-dev-ink-2, #3B4350); }
.rl-pp__tab:focus-visible { outline: 3px solid var(--rl-dev-accent, #0B5FFF); outline-offset: 2px; }
.rl-pp__tab[aria-selected="true"] {
    color: var(--rl-dev-accent, #0B5FFF); border-color: var(--rl-dev-accent, #0B5FFF);
    background: var(--rl-dev-accent-soft, rgba(11, 95, 255, .08)); box-shadow: 0 6px 18px -10px var(--rl-dev-accent, #0B5FFF);
}
.rl-pp__tab[aria-selected="true"] i { opacity: 1; }
/* Progress ring: traces the active pill's outline over the dwell time, then the
   script advances to the next pill (home-principles.js listens for animationend). */
.rl-pp__tab { position: relative; }
/* inset is measured from the padding box, so -4px = 3px outside the 1px border on every side */
.rl-pp__ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); pointer-events: none; overflow: visible; }
.rl-pp__ring rect { fill: none; stroke: var(--rl-dev-accent, #0B5FFF); stroke-width: 2px; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; shape-rendering: geometricPrecision; }   /* geometry (x/y/w/h/rx) is set from the pill's real size in JS */
.rl-pp__tab[aria-selected="true"] .rl-pp__ring rect { opacity: 1; animation: rl-pp-ring var(--rl-pp-dwell, 7s) linear forwards; }
.rl-pp.is-paused .rl-pp__ring rect { animation-play-state: paused; }
@keyframes rl-pp-ring { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* Stage: copy on the left, scene on the right (stacked on phones) */
.rl-pp__stage {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 2.5rem 3rem; align-items: center;
    background: #F7F9FC; border: 1px solid var(--rl-dev-line, #E1E6EC); border-radius: 28px; padding: 2.5rem 2.75rem;
}
.rl-pp__copy { position: relative; min-height: 18rem; }
.rl-pp__panel { display: none; }
.rl-pp__panel.is-active { display: block; }
.rl-pp__panel.is-active h3, .rl-pp__panel.is-active li, .rl-pp__panel.is-active .rl-learn-more { animation: rl-pp-copy-in .5s cubic-bezier(.2,.7,.2,1) both; }
.rl-pp__panel.is-active li:nth-child(1) { animation-delay: .2s; }
.rl-pp__panel.is-active li:nth-child(2) { animation-delay: .38s; }
.rl-pp__panel.is-active li:nth-child(3) { animation-delay: .56s; }
.rl-pp__panel.is-active li:nth-child(4) { animation-delay: .74s; }
.rl-pp__panel.is-active .rl-learn-more { animation-delay: .8s; }
.rl-pp__panel h3 { font-size: clamp(1.45rem, 2.2vw, 2rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--rl-dev-ink, #111827); margin: 0 0 0.6rem; }
.rl-pp__panel h3::after { content: ""; display: block; width: 100%; height: 1px; background: var(--rl-dev-line, #E1E6EC); margin: 1.1rem 0 1.25rem; }
.rl-pp__panel ul { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1rem; }
.rl-pp__panel li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; align-items: start; color: var(--rl-dev-ink-2, #3B4350); font-size: 1.02rem; line-height: 1.5; }
.rl-pp__panel li i {
    width: 2.5rem; height: 2.5rem; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--rl-dev-ink-2, #3B4350); background: #fff; border: 1px solid var(--rl-dev-line, #E1E6EC); font-size: 1.05rem;
}
.rl-pp__panel .rl-learn-more { margin-top: 0.25rem; }

/* Scene */
.rl-pp__scene { position: relative; aspect-ratio: 1860 / 1240; width: 100%; }
/* Desktop: the artwork spills past the hero card (origin biased right, away from the copy) */
@media (min-width: 992px) { .rl-pp__scene { transform: scale(1.2); transform-origin: 32% 50%; } }
.rl-pp__stage, .rl-pp { overflow: visible; }
.rl-pp__layers { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.rl-pp__layers.is-active, .rl-pp__layers.is-leaving { opacity: 1; visibility: visible; }
.rl-pp__layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; will-change: transform, opacity; transform-origin: 50% 60%; }

/* One animation list, driven by per-scene / per-layer custom properties:
   --in  enter keyframes   --in-d duration   --in-delay stagger
   --fl  idle keyframes    --fl-d period     --fl-delay phase (negative = start mid-loop)
   --out exit keyframes                                                         */
.rl-pp__layers.is-active .rl-pp__layer {
    animation-name: var(--in, rl-pp-rise), var(--fl, rl-pp-bob);
    animation-duration: var(--in-d, .7s), var(--fl-d, 8s);
    animation-delay: var(--in-delay, 0s), var(--fl-delay, 0s);
    animation-timing-function: cubic-bezier(.2,.7,.2,1), ease-in-out;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: both, none;
}
.rl-pp__layers.is-leaving .rl-pp__layer { animation: var(--out, rl-pp-fade-up) .3s cubic-bezier(.4,0,.8,.4) both; }

/* ---- Shared keyframes -------------------------------------------------- */
@keyframes rl-pp-rise      { from { opacity: 0; translate: 0 16px; }  to { opacity: 1; translate: 0 0; } }
@keyframes rl-pp-from-left { from { opacity: 0; translate: -48px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes rl-pp-from-right{ from { opacity: 0; translate: 48px 0; }  to { opacity: 1; translate: 0 0; } }
@keyframes rl-pp-from-tl   { from { opacity: 0; translate: -34px -34px; } to { opacity: 1; translate: 0 0; } }
@keyframes rl-pp-from-tr   { from { opacity: 0; translate: 34px -34px; }  to { opacity: 1; translate: 0 0; } }
@keyframes rl-pp-from-bl   { from { opacity: 0; translate: -34px 34px; }  to { opacity: 1; translate: 0 0; } }
@keyframes rl-pp-from-br   { from { opacity: 0; translate: 34px 34px; }   to { opacity: 1; translate: 0 0; } }
@keyframes rl-pp-zoom-out  { from { opacity: 0; scale: 1.1; }  to { opacity: 1; scale: 1; } }
@keyframes rl-pp-zoom-in   { from { opacity: 0; scale: .92; }  to { opacity: 1; scale: 1; } }
@keyframes rl-pp-fade      { from { opacity: 0; } to { opacity: 1; } }
/* conduit reveals: the wire is "drawn" in the direction the data flows */
@keyframes rl-pp-wipe-ltr  { from { opacity: 0; clip-path: inset(0 100% 0 0); } 20% { opacity: 1; } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes rl-pp-wipe-ttb  { from { opacity: 0; clip-path: inset(0 0 100% 0); } 20% { opacity: 1; } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes rl-pp-wipe-mid  { from { opacity: 0; clip-path: inset(0 50%); }      20% { opacity: 1; } to { opacity: 1; clip-path: inset(0 0); } }
@keyframes rl-pp-wipe-ring { from { opacity: 0; clip-path: circle(4% at 50% 48%); } 20% { opacity: 1; } to { opacity: 1; clip-path: circle(80% at 50% 48%); } }
/* exits (shorter than the enter, ease-in) */
@keyframes rl-pp-fade-up    { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -12px; } }
@keyframes rl-pp-push-left  { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: -36px 0; } }
@keyframes rl-pp-part-left  { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: -28px 0; } }
@keyframes rl-pp-part-right { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 28px 0; } }
@keyframes rl-pp-fly-tl     { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: -30px -30px; } }
@keyframes rl-pp-fly-tr     { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 30px -30px; } }
@keyframes rl-pp-fly-bl     { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: -30px 30px; } }
@keyframes rl-pp-fly-br     { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 30px 30px; } }
@keyframes rl-pp-zoom-away  { from { opacity: 1; scale: 1; } to { opacity: 0; scale: 1.06; } }
@keyframes rl-pp-fade-out   { from { opacity: 1; } to { opacity: 0; } }
/* idle loops (transform only) */
@keyframes rl-pp-bob     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes rl-pp-bob-sm  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes rl-pp-sway    { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px); } }
@keyframes rl-pp-drift   { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-6px, -5px); } }
@keyframes rl-pp-orbit   { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(5px, -5px); } 50% { transform: translate(0, -9px); } 75% { transform: translate(-5px, -5px); } }
@keyframes rl-pp-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012); } }
@keyframes rl-pp-copy-in { from { opacity: 0; translate: -10px 0; } to { opacity: 1; translate: 0 0; } }

/* ---- Scene signatures ---------------------------------------------------
   Every scene builds up one element per beat (~0.3s), slide-style: the layer
   order and the direction each one arrives from is what differs per scene. */
/* 1. Platform — "the whole network rises": conduits unfold from the centre,
      then rack, screen and the four client groups rise in turn. */
[data-scene="platform"] { --in: rl-pp-rise; --in-d: .6s; --fl: rl-pp-bob; --out: rl-pp-fade-up; }
[data-scene="platform"] .rl-pp__layer--bg     { --in: rl-pp-wipe-mid; --in-d: .9s; --fl: none; }
[data-scene="platform"] .rl-pp__layer--rack   { --in-delay: .35s; --fl: none; }
[data-scene="platform"] .rl-pp__layer--screen { --in-delay: .7s;  --fl-d: 11s;  --fl-delay: -2s; }
[data-scene="platform"] .rl-pp__layer--dev-tl { --in-delay: 1.05s; --fl-d: 8s;   --fl-delay: -1s; }
[data-scene="platform"] .rl-pp__layer--dev-tr { --in-delay: 1.3s;  --fl-d: 9.5s; --fl-delay: -4s; }
[data-scene="platform"] .rl-pp__layer--dev-bl { --in-delay: 1.55s; --fl-d: 7.5s; --fl-delay: -6s; }
[data-scene="platform"] .rl-pp__layer--dev-br { --in-delay: 1.8s;  --fl-d: 8.5s; --fl-delay: -3s; }

/* 2. Network as code — "push": the editor slides in from the left, the wire
      draws left→right, the rack arrives from the right, then the clients come
      online one after another along the bottom. Exit pushes everything left. */
[data-scene="code"] { --in: rl-pp-rise; --in-d: .55s; --fl: rl-pp-bob-sm; --fl-d: 6s; --out: rl-pp-push-left; }
[data-scene="code"] .rl-pp__layer--screen { --in: rl-pp-from-left;  --in-d: .75s; --fl: rl-pp-bob-sm; --fl-d: 10s; }
[data-scene="code"] .rl-pp__layer--bg     { --in: rl-pp-wipe-ltr;  --in-d: 1s;   --in-delay: .45s; --fl: none; }
[data-scene="code"] .rl-pp__layer--rack   { --in: rl-pp-from-right; --in-d: .7s; --in-delay: .95s; --fl: none; }
[data-scene="code"] .rl-pp__layer--dev-tl { --in-delay: 1.3s;  --fl-delay: 0s; }
[data-scene="code"] .rl-pp__layer--dev-tr { --in-delay: 1.55s; --fl-delay: -.7s; }
[data-scene="code"] .rl-pp__layer--dev-bl { --in-delay: 1.8s;  --fl-delay: -1.4s; }
[data-scene="code"] .rl-pp__layer--dev-br { --in-delay: 2.05s; --fl-delay: -2.1s; }

/* 3. Make it match production — "mirror": the physical rack arrives from the
      left, its twin on the screen from the right, the wire between them grows
      out from the middle, then the clients pop in. Exit parts them again. */
[data-scene="production"] { --in: rl-pp-zoom-in; --in-d: .55s; --fl: rl-pp-bob; --fl-d: 9s; --out: rl-pp-fade-out; }
[data-scene="production"] .rl-pp__layer--rack   { --in: rl-pp-from-left;  --in-d: .8s; --fl: none; --out: rl-pp-part-left; }
[data-scene="production"] .rl-pp__layer--screen { --in: rl-pp-from-right; --in-d: .8s; --in-delay: .35s; --fl: rl-pp-sway; --fl-d: 12s; --out: rl-pp-part-right; }
[data-scene="production"] .rl-pp__layer--bg     { --in: rl-pp-wipe-mid; --in-d: .9s; --in-delay: .75s; --fl: none; }
[data-scene="production"] .rl-pp__layer--dev-tl { --in-delay: 1.15s; --fl-delay: 0s; }
[data-scene="production"] .rl-pp__layer--dev-tr { --in-delay: 1.4s;  --fl-delay: -4.5s; }
[data-scene="production"] .rl-pp__layer--dev-bl { --in-delay: 1.65s; --fl-delay: -4.5s; }
[data-scene="production"] .rl-pp__layer--dev-br { --in-delay: 1.9s;  --fl-delay: 0s; }

/* 4. Built for global scale — "pull back": the Sites view first, the conduits
      pour down, then a fleet of racks appears back to front, then the edge. */
[data-scene="scale"] { --in: rl-pp-zoom-out; --in-d: .7s; --fl: rl-pp-drift; --fl-d: 12s; --out: rl-pp-zoom-away; }
[data-scene="scale"] .rl-pp__layer--screen { --fl: rl-pp-bob-sm; --fl-d: 11s; }
[data-scene="scale"] .rl-pp__layer--bg     { --in: rl-pp-wipe-ttb; --in-d: 1s; --in-delay: .35s; --fl: none; }
[data-scene="scale"] .rl-pp__layer--dev-tl { --in-delay: .8s;  --fl-d: 14s; --fl-delay: 0s; }
[data-scene="scale"] .rl-pp__layer--dev-bl { --in-delay: 1.05s; --fl-d: 12s; --fl-delay: -4s; }
[data-scene="scale"] .rl-pp__layer--rack   { --in-delay: 1.3s;  --fl-d: 10s; --fl-delay: -8s; }
[data-scene="scale"] .rl-pp__layer--dev-tr { --in-delay: 1.65s; --fl: rl-pp-bob; --fl-d: 9s; }
[data-scene="scale"] .rl-pp__layer--dev-br { --in-delay: 1.9s;  --fl: rl-pp-bob; --fl-d: 8s; --fl-delay: -3s; }

/* 5. Unified platform — "converge": ReadyView blooms at the centre, the wire
      rings out from it, the switch rises, then each product flies in from its
      own corner. Idle: the corners orbit the hub. Exit: back to the corners. */
[data-scene="unified"] { --in-d: .65s; --fl: rl-pp-orbit; --fl-d: 10s; --out: rl-pp-fade-out; }
[data-scene="unified"] .rl-pp__layer--screen { --in: rl-pp-zoom-in; --in-d: .7s; --fl: rl-pp-breathe; --fl-d: 7s; }
[data-scene="unified"] .rl-pp__layer--bg     { --in: rl-pp-wipe-ring; --in-d: 1s; --in-delay: .4s; --fl: none; }
[data-scene="unified"] .rl-pp__layer--rack   { --in: rl-pp-rise; --in-delay: .85s; --fl: rl-pp-bob-sm; --fl-d: 9s; }
[data-scene="unified"] .rl-pp__layer--dev-tl { --in: rl-pp-from-tl; --in-delay: 1.15s; --fl-delay: 0s;    --out: rl-pp-fly-tl; }
[data-scene="unified"] .rl-pp__layer--dev-tr { --in: rl-pp-from-tr; --in-delay: 1.4s;  --fl-delay: -2.5s; --out: rl-pp-fly-tr; }
[data-scene="unified"] .rl-pp__layer--dev-bl { --in: rl-pp-from-bl; --in-delay: 1.65s; --fl-delay: -5s;   --out: rl-pp-fly-bl; }
[data-scene="unified"] .rl-pp__layer--dev-br { --in: rl-pp-from-br; --in-delay: 1.9s;  --fl-delay: -7.5s; --out: rl-pp-fly-br; }

/* 6. Simplicity and power — "beats": one client, one wire, one switch, then the
      inventory that proves it — each appearing in turn with no motion at all. */
[data-scene="simple"] { --in: rl-pp-fade; --in-d: .5s; --fl: none; --out: rl-pp-fade-out; }
[data-scene="simple"] .rl-pp__layer--dev-tl { --in-delay: 0s; --fl: rl-pp-bob-sm; --fl-d: 9s; }
[data-scene="simple"] .rl-pp__layer--bg     { --in: rl-pp-wipe-ltr; --in-d: .9s; --in-delay: .45s; }
[data-scene="simple"] .rl-pp__layer--rack   { --in-delay: .95s; }
[data-scene="simple"] .rl-pp__layer--screen { --in-delay: 1.35s; --fl: rl-pp-breathe; --fl-d: 8s; }
[data-scene="simple"] .rl-pp__layer--dev-bl { --in-delay: 1.7s;  --fl: rl-pp-bob-sm; --fl-d: 10s; --fl-delay: -5s; }
[data-scene="simple"] .rl-pp__layer--dev-br { --in-delay: 1.95s; --fl: rl-pp-bob-sm; --fl-d: 10s; --fl-delay: -5s; }

/* Prev / next for thumbs (phones) */
.rl-pp__nav { display: none; justify-content: center; gap: .75rem; margin-top: 1.25rem; }
.rl-pp__nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rl-dev-line, #E1E6EC); background: #fff; color: var(--rl-dev-ink-2, #3B4350); }

@media (max-width: 991.98px) {
    .rl-pp__stage { grid-template-columns: minmax(0, 1fr); padding: 1.5rem; gap: 1.5rem; }
    .rl-pp__scene { order: -1; }
    .rl-pp__copy { min-height: 0; }
}
@media (max-width: 767.98px) {
    .rl-pp { padding: 3rem 0 3.5rem; }
    .rl-pp__tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity; padding: 0 1rem .5rem; margin-left: -1rem; margin-right: -1rem; scrollbar-width: none; }
    .rl-pp__tabs::-webkit-scrollbar { display: none; }
    .rl-pp__tab { scroll-snap-align: center; flex: 0 0 auto; }
    .rl-pp__nav { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
    .rl-pp__layer, .rl-pp__layers.is-active .rl-pp__layer, .rl-pp__layers.is-leaving .rl-pp__layer, .rl-pp__panel.is-active h3, .rl-pp__panel.is-active li, .rl-pp__panel.is-active .rl-learn-more, .rl-pp__ring rect { animation: none !important; }
    .rl-pp__layers { transition: opacity .25s ease; }
    .rl-pp__layers.is-leaving { opacity: 0; }
}

/* Dark theme: the artwork is lit for a light card, so the card stays light */
html[data-theme="dark"] .rl-pp { background: #0B0F19; }
html[data-theme="dark"] .rl-pp__title, html[data-theme="dark"] .rl-pp__panel h3 { color: #F4F5F8; }
html[data-theme="dark"] .rl-pp__tab { border-color: rgba(244, 245, 248, .22); color: rgba(244, 245, 248, .85); }
html[data-theme="dark"] .rl-pp__tab:hover { border-color: rgba(244, 245, 248, .6); }
html[data-theme="dark"] .rl-pp__tab[aria-selected="true"] { color: #fff; border-color: var(--rl-dev-accent-bright, #4C8DFF); background: rgba(76, 141, 255, .16); }
html[data-theme="dark"] .rl-pp__stage { background: #F7F9FC; border-color: rgba(244, 245, 248, .12); }