@scope (.sec02) {
:scope{display:block;position:relative;overflow:hidden;}

/* ====== tuned to the IQF back office: near-black, monochrome, one periwinkle accent ====== */
:scope{
  --bg:#050506; --panel:#0c0c0f;
  --ink:#FFFFFF; --ink2:#eae7f3; --muted:#ABA9BD; --muted2:#6C6982;
  --accent:#8b6cf5;          /* the CLAIM-button periwinkle */
  --accent2:#a58aee; --accent-deep:#733aed;
  --line:rgba(255,255,255,.16); --line2:rgba(255,255,255,.16);
  --data:'IBM Plex Mono','Host Grotesk',monospace;
  /* carbon weave lifted from the dashboard panels */
  --carbon:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.016) 0 1px, rgba(255,255,255,0) 1px 6px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.008) 0 1px, rgba(255,255,255,0) 1px 6px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.34) 0 3px, rgba(0,0,0,0) 3px 6px);
}
*{box-sizing:border-box;margin:0;padding:0}
:scope{height:100%}
:scope{background:var(--bg);color:var(--ink2);font-family:'Host Grotesk',system-ui,sans-serif;
  line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}

.bg-field{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(680px 520px at 50% 50%, rgba(154,127,232,.07), transparent 64%),
    #000000;}
.grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");background-size:160px 160px}

/* ====== ~44vh versus band ====== */
.versus{position:relative;z-index:2;height:38vh;min-height:290px;max-height:440px;
  display:flex;align-items:stretch;overflow:hidden;
  border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);
  background:transparent}

/* moving faction words — ghost outline text, very quiet */
.rail{position:absolute;top:50%;transform:translateY(-50%);white-space:nowrap;pointer-events:none;
  font-family:'Host Grotesk',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(2.8rem,8vw,6.6rem);
  line-height:1;opacity:.5}
.hold .rail{left:-4%;animation:slL 34s linear infinite;opacity:.85}
.burn .rail{right:-4%;animation:slR 34s linear infinite;opacity:.85}
.rail b{font-weight:400;padding:0 .18em;color:transparent;
  -webkit-text-stroke:1px rgba(216,212,232,.13)}
/* HOLD ghost text — filled with the same carbon twill as the telemetry rail, green glow at the letter base */
.hold .rail b{
  -webkit-text-stroke:1px rgba(216,212,232,.09);
  background:
    linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.42) 100%),
    url("../../uploads/pasted-1783592668292-0.png") repeat 0 0 / 420px auto,
    #000000;
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* BURN ghost text — same carbon fill, red glow at the letter base */
.burn .rail b{
  -webkit-text-stroke:1px rgba(216,212,232,.09);
  background:
    linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.42) 100%),
    url("../../uploads/pasted-1783592668292-0.png") repeat 0 0 / 420px auto,
    #000000;
  -webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes slL{from{transform:translate(0,-50%)}to{transform:translate(-33.33%,-50%)}}
@keyframes slR{from{transform:translate(0,-50%)}to{transform:translate(33.33%,-50%)}}

/* ---- panels : diagonal split, content centered in each half ---- */
.side{position:relative;flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:clamp(12px,2.2vh,22px) clamp(20px,3vw,54px);overflow:hidden}
.side.hold{clip-path:polygon(0 0, 100% 0, calc(100% - 90px) 100%, 0 100%);
  background:#000000}
.side.burn{margin-left:-90px;clip-path:polygon(90px 0, 100% 0, 100% 100%, 0 100%);
  background:#000000}

.side .who{font-family:'Host Grotesk',sans-serif;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;font-size:clamp(.72rem,1vw,.82rem);color:#B7BAC2;margin-bottom:12px;
  display:inline-flex;align-items:center;gap:10px}
.side .who i{display:none}
/* digital scanner: a thin vertical light-line with a soft gradient trail sweeps
   across the label left → right; letters under it light up in the faction color */
.side .who{position:relative;isolation:isolate}
/* lit letters — the color trails ONLY behind the line; the image is swapped at
   the turn so the trail follows the direction of travel */
.side .who::before{content:attr(data-text);position:absolute;left:0;top:0;z-index:1;
  color:transparent;
  background-size:320% 100%;
  -webkit-background-clip:text;background-clip:text;
  animation:whoScanGlow 6.3s infinite;
  text-shadow:none;pointer-events:none}
/* the scan beam — crisp line + gradient trail; on the return leg the element is
   mirrored so the trail bije na suprotnu stranu */
.side .who::after{content:'';position:absolute;top:-1px;bottom:-1px;left:-4px;width:calc(100% + 8px - 0.28em);z-index:2;
  pointer-events:none;mix-blend-mode:screen;
  background-image:linear-gradient(90deg,
    transparent 0%,transparent 30%,
    color-mix(in srgb, var(--glow) 6%, transparent) 38%,
    color-mix(in srgb, var(--glow) 16%, transparent) 45%,
    color-mix(in srgb, var(--glow) 46%, transparent) 49.6%,
    var(--glow) 50%,
    transparent 50.4%,transparent 100%);
  background-size:320% 100%;
  filter:blur(.4px);
  animation:whoScanBeam 6.3s infinite}
.hold .who{--glow:#3fdc84}
.burn .who{--glow:#ff2a2b}
/* background-position mapping (size 320%): 72.727% = line on the text's left
   edge, 27.273% = line on the text's right edge */
@keyframes whoScanGlow{
  0%     {background-position:72.727% 0; animation-timing-function:ease-in-out;
          background-image:linear-gradient(90deg,transparent 0%,transparent 42%,var(--glow) 48.5%,var(--glow) 50%,transparent 50.4%,transparent 100%)}
  49.99% {background-position:27.273% 0;
          background-image:linear-gradient(90deg,transparent 0%,transparent 42%,var(--glow) 48.5%,var(--glow) 50%,transparent 50.4%,transparent 100%)}
  50%    {background-position:27.273% 0; animation-timing-function:ease-in-out;
          background-image:linear-gradient(90deg,transparent 0%,transparent 49.6%,var(--glow) 50%,var(--glow) 51.5%,transparent 58%,transparent 100%)}
  100%   {background-position:72.727% 0;
          background-image:linear-gradient(90deg,transparent 0%,transparent 49.6%,var(--glow) 50%,var(--glow) 51.5%,transparent 58%,transparent 100%)}
}
@keyframes whoScanBeam{
  0%     {transform:scaleX(1);  background-position:72.727% 0; animation-timing-function:ease-in-out}
  49.99% {transform:scaleX(1);  background-position:27.273% 0}
  50%    {transform:scaleX(-1); background-position:72.727% 0; animation-timing-function:ease-in-out}
  100%   {transform:scaleX(-1); background-position:27.273% 0}
}

.side .word{font-family:'Host Grotesk',sans-serif;font-weight:700;text-transform:uppercase;line-height:.95;
  letter-spacing:-.02em;font-size:clamp(2rem,5.15vw,4.2rem);
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.6)) drop-shadow(0 16px 34px rgba(0,0,0,.5))}
.hold .word{background:linear-gradient(180deg,#ffffff 0%,#f4f3f9 50%,#cdc8e2 76%,#a58aee 106%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.burn .word{background:linear-gradient(180deg,#ffffff 0%,#f4f3f9 50%,#cdc8e2 76%,#a58aee 106%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.side .line{font-family:'Host Grotesk',sans-serif;font-weight:400;
  font-size:clamp(.92rem,1.15vw,1.08rem);color:var(--ink2);margin-top:clamp(8px,1.4vh,14px);letter-spacing:.002em}
.side .line em{font-style:normal;font-weight:700;background:linear-gradient(100deg,#d3c6f5,#a58aee 52%,#7957d6);-webkit-background-clip:text;background-clip:text;color:transparent}   /* cross-links the two factions */

/* ---- center seam : big VS, periwinkle-lit ---- */
.seam{position:absolute;left:50%;top:0;height:100%;transform:translateX(-50%);z-index:4;
  display:flex;align-items:center;justify-content:center;pointer-events:none}
.seam .bar{position:absolute;top:0;left:50%;transform:translateX(-50%);width:1px;height:100%;
  background:rgba(255,255,255,.16)}
.seam .badge{position:relative;overflow:hidden;border-radius:9px;padding:11px 14px;text-align:center;
  background:linear-gradient(158deg, rgba(82,82,88,0.92) 0%, rgba(40,40,46,0.95) 46%, rgba(15,15,19,0.98) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 5px 12px rgba(0,0,0,0.5)}
.seam .badge .vs{position:relative;display:block;font-family:'Host Grotesk',sans-serif;font-weight:700;line-height:.9;
  font-size:clamp(0.95rem,1.6vw,1.4rem);letter-spacing:.03em;
  color:#ffffff;-webkit-text-fill-color:#ffffff}
.seam .badge .lbl{position:relative;display:block;font-family:'Host Grotesk',sans-serif;font-weight:600;
  font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;color:#ffffff;margin-top:4px;white-space:nowrap}

/* entrance — handled by scroll-reveal (reveal.css); old load-time animation removed */
@keyframes pulse_sec02{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes beep{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.2;transform:scale(.65)}}

/* mobile : side-by-side 50/50, rotated seam label */
@media(max-width:720px){
  .versus{height:auto;max-height:none;flex-direction:row;align-items:stretch}
  .side{clip-path:none!important;margin:0!important;flex:1 1 50%;min-width:0;padding:clamp(34px,10vw,50px) 12px}
  .side.burn{border-top:none;border-left:1px solid var(--line)}
  .side .word{font-size:clamp(1.5rem,8.4vw,2.4rem)}
  .side .line{font-size:.78rem}
  .side .who{font-size:.6rem;letter-spacing:.22em}
  .seam{left:50%;top:50%;height:auto;transform:translate(-50%,-50%)}
  .seam .bar{display:none}
  .seam .badge{background:none;box-shadow:none;padding:0;overflow:visible;border-radius:0}
  .seam .badge .vs{display:none}
  .seam .badge .lbl{transform:rotate(-90deg);transform-origin:center;margin-top:0;
    font-family:'Host Grotesk',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.3em;
    color:#ffffff;-webkit-text-fill-color:#ffffff;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
  .side,.seam{opacity:1;transform:none;animation:none}
  .hold .rail,.burn .rail,.who i{animation:none}
}

}