/* Conversion Architecture reel v3 (15s showreel).
   Every rule is scoped under .ca-reel so the same stylesheet works in the
   HyperFrames render and embedded live in the site page. Images live in img/
   next to this file. */

.ca-reel {
  --ink: #0A0A0A;
  --bone: #F5F2EB;
  --hair: rgba(245, 242, 235, 0.16);
  --hair2: rgba(245, 242, 235, 0.32);
  --dim: rgba(245, 242, 235, 0.72);
  --acc: #E27A6A;
  --old: #8A8782;
  --f-display: 'Geist', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;
  --f-serif: 'Instrument Serif', 'Times New Roman', serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  position: relative; overflow: hidden; color: var(--bone); background: var(--ink);
  font-family: var(--f-body); line-height: 1.2; letter-spacing: normal; text-align: left;
  -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
}
.ca-reel *, .ca-reel *::before, .ca-reel *::after { box-sizing: border-box; }
.ca-reel h1, .ca-reel h2, .ca-reel p { margin: 0; font-weight: inherit; }
.ca-reel img { display: block; max-width: none; }

.ca-reel.landscape {
  width: 1920px; height: 1080px;
  --pad: 110px; --hud: 20px; --mono: 20px; --h2: 96px; --hero: 232px; --vd: 236px; --odo: 150px; --lb: 96px;
}
.ca-reel.portrait {
  width: 1080px; height: 1920px;
  --pad: 72px; --hud: 30px; --mono: 28px; --h2: 92px; --hero: 136px; --vd: 168px; --odo: 132px; --lb: 150px;
}

.ca-reel .layer, .ca-reel .scene { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.ca-reel .scene { overflow: hidden; }
.ca-reel .r-mono { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 500; }
.ca-reel .r-serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.ca-reel .mask { display: block; overflow: hidden; padding: 0.02em 0.12em 0.12em; }
.ca-reel .ch { display: inline-block; }

/* ── background ── */
.ca-reel .bg-fill { position: absolute; inset: 0; background: var(--ink); }
.ca-reel .grid {
  position: absolute; left: -160px; top: -160px; right: -160px; bottom: -160px;
  background-image:
    linear-gradient(rgba(245, 242, 235, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 242, 235, 0.045) 1px, transparent 1px);
  background-size: 80px 80px;
}
.ca-reel .glow { position: absolute; width: 1600px; height: 1600px; border-radius: 50%; left: 50%; top: 50%; margin: -800px 0 0 -800px; opacity: 0; }
.ca-reel .glow-good { background: radial-gradient(closest-side, rgba(226, 122, 106, 0.22), rgba(226, 122, 106, 0) 70%); }
.ca-reel .glow-bone { background: radial-gradient(closest-side, rgba(245, 242, 235, 0.12), rgba(245, 242, 235, 0) 70%); }

/* ── fx: slices, flash, grain ── */
.ca-reel .slices { position: absolute; inset: 0; }
.ca-reel .slc { position: absolute; left: 0; width: 100%; background: var(--bone); transform-origin: 0 50%; transform: scaleX(0); }
.ca-reel .flash { position: absolute; inset: 0; background: var(--bone); opacity: 0; }
.ca-reel .grain { position: absolute; left: -256px; top: -256px; right: -256px; bottom: -256px; background: url(img/grain.webp) 0 0 / 256px 256px repeat; opacity: 0.09; mix-blend-mode: overlay; pointer-events: none; }

/* ── HUD ── */
.ca-reel .hud-tl, .ca-reel .hud-tr, .ca-reel .hud-bl, .ca-reel .hud-br { position: absolute; font-size: var(--hud); display: flex; align-items: center; gap: 14px; color: rgba(245, 242, 235, 0.72); mix-blend-mode: difference; }
.ca-reel .hud-tl { left: 56px; top: 48px; }
.ca-reel .hud-tr { right: 56px; top: 48px; }
.ca-reel .hud-bl { left: 56px; bottom: 48px; }
.ca-reel .hud-br { right: 56px; bottom: 54px; }
.ca-reel .hud-dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--acc); }
.ca-reel .hud-logo { display: block; height: 24px; width: 78px; background: url(logo.svg) left center / contain no-repeat; filter: invert(1) brightness(1.05); opacity: 0.9; }
.ca-reel .hud-of { opacity: 0.45; }
.ca-reel .chap-wrap { position: relative; display: block; width: 380px; height: 1.3em; }
.ca-reel .chap { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; }
.ca-reel .bar { position: relative; width: 240px; height: 2px; background: var(--hair); overflow: hidden; }
.ca-reel .bar-fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--bone); transform-origin: 0 50%; }
.ca-reel .r-corner { position: absolute; width: 26px; height: 26px; border: 0 solid rgba(245, 242, 235, 0.35); }
.ca-reel .r-corner.tl { left: 28px; top: 28px; border-left-width: 1px; border-top-width: 1px; }
.ca-reel .r-corner.tr { right: 28px; top: 28px; border-right-width: 1px; border-top-width: 1px; }
.ca-reel .r-corner.bl { left: 28px; bottom: 28px; border-left-width: 1px; border-bottom-width: 1px; }
.ca-reel .r-corner.br { right: 28px; bottom: 28px; border-right-width: 1px; border-bottom-width: 1px; }
.ca-reel.portrait .chap-wrap { width: 420px; }
.ca-reel.portrait .bar { width: 160px; }
.ca-reel.portrait .hud-logo { height: 34px; width: 110px; }
/* embedded in the page: the site nav + progress bar replace these */
.ca-reel.is-page .hud-tl, .ca-reel.is-page .hud-bl, .ca-reel.is-page .hud-br { display: none; }

/* ── S1 ignition ── */
.ca-reel .s1-line { position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px; background: var(--bone); box-shadow: 0 0 18px rgba(245, 242, 235, 0.7); transform: scaleX(0); }
.ca-reel .s1-ap { position: absolute; left: 0; top: 50%; width: 100%; height: 240px; margin-top: -120px; background: radial-gradient(ellipse at center, rgba(245, 242, 235, 0.16), rgba(245, 242, 235, 0.02) 60%, rgba(245, 242, 235, 0) 75%); transform: scaleY(0); }
.ca-reel .s1-txt { position: absolute; left: 0; right: 0; top: 50%; height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.ca-reel .s1-scr { font-size: 46px; letter-spacing: 0.34em; padding-left: 0.34em; white-space: nowrap; }
.ca-reel .s1-scr .ch { opacity: 0; }
.ca-reel .s1-scr .ch.lk { color: var(--bone); }
.ca-reel .s1-sub { font-size: 17px; letter-spacing: 0.6em; color: rgba(245, 242, 235, 0.6); opacity: 0; }
.ca-reel .s1-ix { position: absolute; left: var(--pad); top: calc(50% + 22px); font-size: 15px; color: rgba(245, 242, 235, 0.5); opacity: 0; }
.ca-reel.portrait .s1-scr { font-size: 46px; letter-spacing: 0.16em; padding-left: 0.16em; }
.ca-reel.portrait .s1-sub { font-size: 26px; }
.ca-reel.portrait .s1-ix { font-size: 22px; top: calc(50% + 190px); }

/* ── S2 slams ── */
.ca-reel .slam { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; opacity: 0; }
.ca-reel .sm-bone { background: var(--bone); color: var(--ink); }
.ca-reel .sm-ink { background: var(--ink); color: var(--bone); }
.ca-reel .sm-bad { background: var(--acc); color: var(--ink); }
.ca-reel .sm-in { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.ca-reel .sm-w { display: block; font-family: var(--f-display); font-weight: 800; letter-spacing: -0.055em; line-height: 0.9; white-space: nowrap; }
.ca-reel .sm-out .sm-w { color: transparent; -webkit-text-stroke: 3px var(--bone); }
.ca-reel .sm-serif .sm-w { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; line-height: 1; }
.ca-reel .sm-mask { display: block; overflow: hidden; padding: 0 0.22em 0.08em 0.12em; }
.ca-reel .sm-bad .sm-in { gap: 70px; }
.ca-reel .sm-t { display: block; font-size: calc(var(--mono) * 1.25); letter-spacing: 0.24em; opacity: 0.75; }

.ca-reel .net { position: absolute; inset: 0; }
.ca-reel .links { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.ca-reel .links line { stroke: rgba(245, 242, 235, 0.35); stroke-width: 1.8; stroke-dasharray: 6 8; vector-effect: non-scaling-stroke; }
.ca-reel .xmark { position: absolute; width: 42px; height: 42px; translate: -50% -50%; border-radius: 50%; background: var(--ink); border: 1.5px solid rgba(245, 242, 235, 0.5); color: rgba(245, 242, 235, 0.8); font-family: var(--f-mono); font-size: 18px; display: flex; align-items: center; justify-content: center; transform: scale(0); }
.ca-reel .node-pos { position: absolute; width: 0; height: 0; }
.ca-reel .node { position: absolute; left: 0; top: 0; translate: -50% -50%; display: flex; align-items: center; gap: 14px; padding: 18px 28px; border: 1px solid var(--hair2); border-radius: 999px; background: rgba(22, 22, 22, 0.96); font-family: var(--f-mono); font-weight: 500; font-size: calc(var(--mono) * 1.15); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; opacity: 0; }
.ca-reel .node i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--old); }
.ca-reel .verdict { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ca-reel .vd-w { position: relative; display: block; }
.ca-reel .vd { display: block; font-size: var(--vd); line-height: 1; opacity: 0; }
.ca-reel .vd-st { position: absolute; left: -3%; right: -3%; top: 56%; height: 14px; background: var(--acc); transform-origin: 0 50%; transform: scaleX(0); }
.ca-reel .vd-cap { display: block; margin-top: 36px; font-size: var(--mono); color: var(--dim); opacity: 0; }
.ca-reel.portrait .vd-cap { padding: 0 60px; line-height: 1.6; }

/* ── S3 the wall ── */
.ca-reel .wall-cam { position: absolute; inset: 0; perspective: 2600px; perspective-origin: 50% 50%; overflow: hidden; }
.ca-reel .wall { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.ca-reel .wcol { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.ca-reel .wt { position: absolute; border-radius: 14px; overflow: hidden; background: #161616; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55); outline: 1px solid rgba(245, 242, 235, 0.08); }
.ca-reel .wt img { width: 100%; height: 100%; object-fit: cover; }
.ca-reel .wall-dim { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(10, 10, 10, 0.86) 0%, rgba(10, 10, 10, 0.62) 70%); opacity: 0; }
.ca-reel .s3-shot { position: absolute; left: 50%; top: 50%; translate: -50% -50%; overflow: hidden; background: #161616; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7); opacity: 0; }
.ca-reel .s3-shot img { width: 100%; height: 100%; object-fit: cover; }
.ca-reel .s3-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--pad); }
.ca-reel .s3-eb { display: block; font-size: var(--mono); color: var(--dim); opacity: 0; }
.ca-reel .s3-title { margin-top: 18px; font-weight: 400; }
.ca-reel .t-sans, .ca-reel .t-serif { display: block; line-height: 0.98; white-space: nowrap; }
.ca-reel .t-sans { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.05em; font-size: var(--hero); }
.ca-reel .t-serif { font-family: var(--f-serif); font-style: italic; letter-spacing: -0.02em; font-size: calc(var(--hero) * 1.1); color: var(--acc); }
.ca-reel .s3-sub { display: block; margin-top: 30px; font-size: var(--mono); letter-spacing: 0.3em; color: var(--bone); opacity: 0; }
.ca-reel.portrait .s3-sub { letter-spacing: 0.08em; font-size: 24px; }
.ca-reel .lbox { position: absolute; left: 0; width: 100%; height: var(--lb); background: var(--ink); transform: scaleY(0); }
.ca-reel .lb-t { top: 0; transform-origin: 50% 0; }
.ca-reel .lb-b { bottom: 0; transform-origin: 50% 100%; }

/* ── shared section head ── */
.ca-reel .head { position: absolute; left: var(--pad); top: 128px; }
.ca-reel .r-eb { display: block; font-size: var(--mono); color: var(--dim); opacity: 0; }
.ca-reel .r-h2 { margin-top: 20px; font-family: var(--f-display); font-weight: 700; letter-spacing: -0.045em; line-height: 1; font-size: var(--h2); }
.ca-reel .r-h2 .ln { display: block; opacity: 0; white-space: nowrap; }
.ca-reel .r-h2 .r-serif { font-weight: 400; font-size: 1.1em; }
.ca-reel.portrait .head { top: 150px; }

/* ── S4 five layers (perspective 3D, orbiting) ── */
.ca-reel .s4-cam { position: absolute; inset: 0; perspective: 2600px; }
.ca-reel .stack { position: absolute; width: 0; height: 0; transform-style: preserve-3d; }
.ca-reel.landscape .stack { --SW: 640px; --SH: 400px; --T: 20px; }
.ca-reel.portrait .stack { --SW: 700px; --SH: 438px; --T: 22px; }
.ca-reel .slab { position: absolute; left: calc(var(--SW) / -2); top: calc(var(--SH) / -2); width: var(--SW); height: var(--SH); transform-style: preserve-3d; opacity: 0; }
.ca-reel .slab .top { position: absolute; inset: 0; border-radius: 8px; overflow: hidden; border: 2px solid rgba(245, 242, 235, 0.6); background: #121212; }
.ca-reel .slab .top img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.ca-reel img.mono { filter: grayscale(1) contrast(1.08); }
.ca-reel .slab .tint { position: absolute; inset: 0; background: rgba(10, 10, 10, 1); opacity: 0.3; }
.ca-reel .slab .fx { position: absolute; inset: 0; border: 3px solid var(--acc); border-radius: 8px; box-shadow: 0 0 50px rgba(226, 122, 106, 0.4); opacity: 0; }
.ca-reel .slab .face { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: baseline; gap: 12px; padding: 34px 26px 16px; background: linear-gradient(to top, rgba(10, 10, 10, 0.9), rgba(10, 10, 10, 0)); white-space: nowrap; }
.ca-reel .slab .face b { font-family: var(--f-mono); font-weight: 500; font-size: 18px; letter-spacing: 0.14em; color: rgba(245, 242, 235, 0.65); }
.ca-reel .slab .face span { font-family: var(--f-display); font-weight: 800; font-size: 36px; letter-spacing: -0.03em; }
.ca-reel.portrait .slab .face span { font-size: 40px; }
.ca-reel .slab .sa { position: absolute; left: 0; top: 100%; width: 100%; height: var(--T); transform-origin: 50% 0; transform: rotateX(-90deg); background: #1d1d1d; border: 2px solid rgba(245, 242, 235, 0.4); }
.ca-reel .slab .sb { position: absolute; left: calc(var(--T) * -1); top: 0; width: var(--T); height: 100%; transform-origin: 100% 50%; transform: rotateY(-90deg); background: #141414; border: 2px solid rgba(245, 242, 235, 0.4); }
.ca-reel .beam3d { position: absolute; left: -4px; width: 8px; transform-origin: 50% 100%; border-radius: 4px; background: linear-gradient(to top, rgba(226, 122, 106, 0.1), var(--acc) 25%, #fff1ec); box-shadow: 0 0 30px rgba(226, 122, 106, 0.95); opacity: 0; }
.ca-reel .beacon { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.ca-reel .beacon .disc { position: absolute; left: -120px; top: -120px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #2c1d1a, #100b0a 70%); border: 2px solid var(--acc); box-shadow: 0 0 90px rgba(226, 122, 106, 0.6), inset 0 0 40px rgba(226, 122, 106, 0.25); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; opacity: 0; }
.ca-reel .beacon .disc strong { font-family: var(--f-display); font-weight: 800; font-size: 40px; letter-spacing: -0.03em; }
.ca-reel .beacon .disc small { font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.18em; color: var(--acc); }
.ca-reel .beacon .halo { position: absolute; left: -120px; top: -120px; width: 240px; height: 240px; border-radius: 50%; border: 2px solid var(--acc); opacity: 0; }
.ca-reel.portrait .beacon .disc, .ca-reel.portrait .beacon .halo { left: -140px; top: -140px; width: 280px; height: 280px; }
.ca-reel.portrait .beacon .disc strong { font-size: 48px; }
.ca-reel.portrait .beacon .disc small { font-size: 19px; }
.ca-reel .lys { position: absolute; display: flex; flex-direction: column; }
.ca-reel.landscape .lys { left: var(--pad); bottom: 120px; width: 560px; }
.ca-reel.portrait .lys { left: var(--pad); right: var(--pad); bottom: 130px; }
.ca-reel .ly { will-change: opacity; display: grid; grid-template-columns: 54px auto; column-gap: 10px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--hair); opacity: 0; }
.ca-reel .ly b { font-family: var(--f-mono); font-weight: 500; font-size: 17px; letter-spacing: 0.14em; color: rgba(245, 242, 235, 0.55); }
.ca-reel .ly span { font-family: var(--f-display); font-weight: 700; font-size: 34px; letter-spacing: -0.025em; line-height: 1; white-space: nowrap; }
.ca-reel .ly small { grid-column: 2; margin-top: 6px; font-size: 19px; color: var(--dim); white-space: nowrap; }
.ca-reel.portrait .ly { grid-template-columns: 70px auto; padding: 9px 0; }
.ca-reel.portrait .ly b { font-size: 24px; }
.ca-reel.portrait .ly span { font-size: 40px; }
.ca-reel.portrait .ly small { font-size: 24px; margin-top: 4px; }

/* ── S5 proof ── */
.ca-reel .cards-cam { position: absolute; perspective: 2200px; }
.ca-reel.landscape .cards-cam { left: 760px; top: 190px; width: 960px; height: 700px; }
.ca-reel.portrait .cards-cam { left: 90px; top: 250px; width: 860px; height: 780px; }
.ca-reel .cards { position: absolute; inset: 0; transform-style: preserve-3d; }
.ca-reel .card { position: absolute; left: 0; top: 0; width: 100%; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(245, 242, 235, 0.12); opacity: 0; }
.ca-reel .card img { width: 100%; height: auto; }
.ca-reel .scan { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--acc); box-shadow: 0 0 26px 4px rgba(226, 122, 106, 0.8); opacity: 0; }
.ca-reel .scan::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 140px; background: linear-gradient(to top, rgba(226, 122, 106, 0.28), rgba(226, 122, 106, 0)); }
.ca-reel .focus { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; }
.ca-reel .focus .c { position: absolute; width: 26px; height: 26px; border: 0 solid var(--acc); }
.ca-reel .focus .tl { left: 0; top: 0; border-left-width: 4px; border-top-width: 4px; }
.ca-reel .focus .tr { right: 0; top: 0; border-right-width: 4px; border-top-width: 4px; }
.ca-reel .focus .bl { left: 0; bottom: 0; border-left-width: 4px; border-bottom-width: 4px; }
.ca-reel .focus .br { right: 0; bottom: 0; border-right-width: 4px; border-bottom-width: 4px; }
.ca-reel .cards-cap { position: absolute; left: 0; bottom: 0; font-size: calc(var(--mono) * 0.9); color: var(--acc); opacity: 0; }
.ca-reel .stats { position: absolute; }
.ca-reel.landscape .stats { left: var(--pad); top: 190px; width: 600px; }
.ca-reel.portrait .stats { left: var(--pad); right: var(--pad); top: 1060px; }
.ca-reel .st { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--hair); opacity: 0; }
.ca-reel.portrait .st { margin-top: 22px; padding-top: 16px; display: flex; align-items: center; gap: 30px; }
.ca-reel .odo { display: flex; height: var(--odo); overflow: hidden; font-family: var(--f-display); font-weight: 800; font-size: var(--odo); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.ca-reel .odo .dg { position: relative; display: block; height: var(--odo); overflow: hidden; }
.ca-reel .odo .strip { display: flex; flex-direction: column; }
.ca-reel .odo .strip span, .ca-reel .odo .fix { display: block; height: var(--odo); line-height: var(--odo); }
.ca-reel .odo .fix { color: var(--acc); }
.ca-reel .st-k { display: block; margin-top: 10px; font-size: 24px; color: var(--dim); }
.ca-reel.portrait .st-k { margin-top: 0; font-size: 32px; max-width: 520px; }

/* ── S6 compound growth ── */
.ca-reel .chart { position: absolute; }
.ca-reel.landscape .chart { left: 110px; top: 400px; width: 1260px; height: 500px; }
.ca-reel.portrait .chart { left: 72px; top: 620px; width: 936px; height: 720px; }
.ca-reel .chart svg { position: absolute; left: 0; top: 0; overflow: visible; }
.ca-reel .r-gl { stroke: rgba(245, 242, 235, 0.09); stroke-width: 1; }
.ca-reel .ln-old { fill: none; stroke: var(--old); stroke-width: 4; stroke-linecap: round; }
.ca-reel .ln-new { fill: none; stroke: var(--acc); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.ca-reel .ln-glow { fill: none; stroke: var(--acc); stroke-width: 26; stroke-linecap: round; opacity: 0.35; filter: blur(12px); }
.ca-reel .head-dot { opacity: 0; }
.ca-reel .ms-dot { fill: var(--ink); stroke: var(--acc); stroke-width: 3; }
.ca-reel .ms-pill { position: absolute; translate: -50% 0; padding: 10px 16px; border: 1px solid rgba(226, 122, 106, 0.6); border-radius: 999px; background: rgba(16, 11, 10, 0.92); font-family: var(--f-mono); font-size: 16px; letter-spacing: 0.12em; color: var(--bone); white-space: nowrap; opacity: 0; }
.ca-reel.portrait .ms-pill { font-size: 24px; padding: 12px 18px; }
.ca-reel .ax { position: absolute; bottom: -50px; font-family: var(--f-mono); font-size: 17px; letter-spacing: 0.14em; color: rgba(245, 242, 235, 0.6); opacity: 0; }
.ca-reel.portrait .ax { font-size: 26px; bottom: -62px; }
.ca-reel .ax.a0 { left: 0; } .ca-reel .ax.a1 { left: 50%; translate: -50% 0; } .ca-reel .ax.a2 { right: 0; }
.ca-reel .legend { position: absolute; display: flex; flex-direction: column; gap: 22px; }
.ca-reel.landscape .legend { right: var(--pad); width: 380px; top: 420px; }
.ca-reel.portrait .legend { left: var(--pad); right: var(--pad); top: 1460px; }
.ca-reel .lg { display: flex; align-items: center; gap: 16px; font-family: var(--f-mono); font-size: 18px; letter-spacing: 0.14em; opacity: 0; }
.ca-reel.portrait .lg { font-size: 27px; }
.ca-reel .lg i { display: block; width: 40px; height: 5px; border-radius: 3px; }
.ca-reel .lg.is-old i { background: var(--old); }
.ca-reel .lg.is-new i { background: var(--acc); box-shadow: 0 0 12px rgba(226, 122, 106, 0.8); }

/* ── S7 outro ── */
.ca-reel .s7-ring { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; border: 2px solid var(--acc); opacity: 0; }
.ca-reel .s7-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ca-reel .s7-a, .ca-reel .s7-b { display: block; line-height: 1; white-space: nowrap; }
.ca-reel .s7-a { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.05em; font-size: 150px; }
.ca-reel .s7-b { font-size: 168px; color: var(--acc); }
.ca-reel.portrait .s7-a { font-size: 112px; }
.ca-reel.portrait .s7-b { font-size: 124px; }
.ca-reel .s7-sign { position: absolute; left: 0; right: 0; bottom: 150px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.ca-reel .s7-logo { display: block; height: 52px; width: 169px; background: url(logo.svg) center / contain no-repeat; filter: invert(1) brightness(1.05); opacity: 0; }
.ca-reel .s7-meta { display: block; font-size: 18px; color: rgba(245, 242, 235, 0.6); opacity: 0; }
.ca-reel.portrait .s7-sign { bottom: 280px; }
.ca-reel.portrait .s7-logo { height: 70px; width: 227px; }
.ca-reel.portrait .s7-meta { font-size: 24px; white-space: nowrap; }

/* ── lighter build for phones and tablets in the page (iOS Safari GPU memory) ── */
.ca-reel.is-lite .grain { display: none; }
.ca-reel.is-lite .hud-tl, .ca-reel.is-lite .hud-tr, .ca-reel.is-lite .hud-bl, .ca-reel.is-lite .hud-br { mix-blend-mode: normal; }
.ca-reel.is-lite .wt { box-shadow: none; }
.ca-reel.is-lite .ln-glow { filter: none; stroke-width: 18; opacity: 0.16; }
.ca-reel.is-lite .g-fg { filter: none; }
.ca-reel.is-lite .s3-shot, .ca-reel.is-lite .win, .ca-reel.is-lite .card { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); }