/* =====================================================================
   CYB3R homepage sections — rebranded from TRIONN.
   ONLY colours / fonts / copy / card content changed. Animation logic,
   class names and ids are untouched. Scoped under .wk / .dm.
   Demo/global scaffolding (body, ::selection, .section-tab, .combined-head)
   removed so this file cannot affect the rest of the Webflow site.
   ===================================================================== */

.wk *{ box-sizing:border-box; }
.dm *{ box-sizing:border-box; }
@keyframes drip{ 0%{ top:-100% } 60%,100%{ top:100% } }
.wk,.dm{display:block}

/* ===== SECTION 1 — Selected Work (CYB3R dark) ===== */
.wk{
    --bg-1:#1A232D; --bg-2:#1A232D; --ink:#ffffff; --ink-2:#c7c7cc; --ink-dim:#8b8b90;
    --line:#2a2a2e; --line-2:#3a3a40; --accent:#39F1E0;
    --mono: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    --sans:"Inter",Helvetica,Arial,system-ui,sans-serif;
    --edge: max(24px, (100vw - 1400px) / 2);   /* aligns content to the site's 1400px grid */
  }
.wk{ margin:0; font-family:var(--sans); color:var(--ink);
    background:linear-gradient(180deg,var(--bg-1),var(--bg-2)); -webkit-font-smoothing:antialiased; }
.wk .intro, .wk .outro{ min-height:56vh; display:flex; flex-direction:column; justify-content:center; align-items:center;
    text-align:center; padding:56px 24px; gap:14px; }
.wk .intro .eyebrow, .wk .outro p{ font-family:var(--mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-dim); }
.wk .intro .eyebrow b{ color:var(--accent); }
.wk .intro h1{ font-weight:500; letter-spacing:-.03em; font-size:clamp(1.7rem,3.6vw,2.7rem); margin:0; line-height:1.04; text-wrap:balance; }
.wk .intro .cue{ margin-top:20px; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim);
    display:flex; flex-direction:column; align-items:center; gap:8px; }
.wk .intro .cue .arrow{ width:1px; height:34px; background:var(--line-2); position:relative; overflow:hidden; }
.wk .intro .cue .arrow::after{ content:""; position:absolute; left:0; top:-100%; width:1px; height:100%; background:var(--ink); animation:drip 1.6s ease-in-out infinite; }
.wk .pin-container{ position:relative; height:760vh; }
.wk .pin-stage{ position:sticky; top:0; height:100vh; overflow:hidden; }
.wk .htrack{ position:absolute; top:0; left:0; height:100%; display:flex; will-change:transform; }
.wk .panel{ height:100%; flex:none; position:relative; }
.wk .panel.head{ display:flex; flex-direction:column; justify-content:flex-start; padding:clamp(70px,15vh,160px) clamp(24px,3vw,56px) 0 var(--edge); }
.wk .panel.head .kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:20px; }
.wk .panel.head .kicker b{ color:var(--accent); }
.wk .panel.head h2{ font-weight:500; letter-spacing:-.06em; line-height:.9; font-size:clamp(2.6rem,7vw,7rem); text-transform:uppercase; margin:0 0 18px; }
.wk .panel.head .lede{ font-family:var(--sans); color:var(--ink-2); font-size:1rem; line-height:1.6; max-width:42ch; margin:0 0 32px; }
.wk .panel.card{ display:flex; align-items:flex-start; }
.wk .p-inner{ width:100%; will-change:transform; padding:clamp(70px,15vh,160px) min(var(--edge),88px) 0; }
.wk .p-inner .art, .wk .p-inner .info{ max-width:560px; margin-left:auto; margin-right:auto; }
.wk .art{ position:relative; border-radius:0; overflow:hidden; aspect-ratio:16/10; width:100%; max-height:50vh;
    box-shadow:0 30px 60px -34px rgba(0,0,0,.7); }
.wk .art .scene{ position:absolute; inset:0; will-change:transform; background-size:cover; background-position:center; background-repeat:no-repeat; }
.wk .art:hover .scene{ transform:scale(1.05); transition:transform .8s cubic-bezier(.22,1,.36,1); }
.wk .art .scene-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; z-index:1; }
.wk .art:hover .scene-vid{ transform:scale(1.05); transition:transform .8s cubic-bezier(.22,1,.36,1); }
.wk .art::after{ content:none; }
.wk .art .frame{ position:absolute; inset:16px; pointer-events:none; z-index:3; }
.wk .art .frame span{ position:absolute; width:14px; height:14px; border:1px solid rgba(255,255,255,.5); }
.wk .art .frame .tl{ left:0; top:0; border-right:0; border-bottom:0; }
.wk .art .frame .tr{ right:0; top:0; border-left:0; border-bottom:0; }
.wk .art .frame .bl{ left:0; bottom:0; border-right:0; border-top:0; }
.wk .art .frame .br{ right:0; bottom:0; border-left:0; border-top:0; }
.wk .art .brandmark{ position:absolute; left:22px; top:20px; z-index:3; display:flex; gap:3px; }
.wk .art .brandmark i{ width:8px; height:14px; border-radius:8px 8px 2px 2px; background:rgba(255,255,255,.92); }
.wk .art .kick{ position:absolute; left:22px; top:44px; z-index:3; font-size:12px; line-height:1.25; letter-spacing:.01em; color:rgba(255,255,255,.92); font-weight:500; text-transform:uppercase; max-width:62%; text-shadow:0 1px 14px rgba(0,0,0,.55); }
.wk .art .hero-word{ position:absolute; left:22px; bottom:12px; z-index:3; color:#fff; font-weight:500; letter-spacing:-.03em; font-size:clamp(1.6rem,3.2vw,2.8rem); line-height:.95; text-shadow:0 2px 30px rgba(0,0,0,.55); }
.wk .info{ position:relative; margin-top:20px; padding-left:20px; }
.wk .info .cardline{ position:absolute; left:0; top:2px; width:1px; height:100%; background:var(--line-2); transform:scaleY(0); transform-origin:top; }
.wk .info h3{ font-weight:500; letter-spacing:-.01em; font-size:clamp(1.15rem,2vw,1.5rem); margin:0; }
.wk .info p{ color:var(--ink-2); font-size:.88rem; margin:6px 0 0; max-width:38ch; }
.wk .info .cta-row{ margin-top:14px; }
.wk .hud{ position:absolute; left:var(--edge); bottom:38px; z-index:5; display:flex; align-items:center; gap:14px;
    font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--ink-dim); }
.wk .hud .cur{ color:var(--ink); font-variant-numeric:tabular-nums; }
.wk .hud .bar{ width:150px; height:1px; background:var(--line-2); position:relative; }
.wk .hud .bar i{ position:absolute; left:0; top:0; height:100%; width:100%; background:var(--accent); transform-origin:left; transform:scaleX(0); }
.wk .button_wrapper{ --step:30ms; --base-dur:300ms; --dur-step:30ms; --run:28px; --out-time:200ms; --in-time:320ms;
    --ul-out-time:1000ms; --ul-in-time:500ms; --arrow-gap:10px; --inset-min:8px; position:relative; display:inline-block; }
.wk .button_wrapper .btn{ position:relative; display:block; text-decoration:none; color:var(--ink); font-family:var(--sans);
    font-weight:500; text-transform:none; letter-spacing:-.5px; font-size:1rem; padding:8px 0 10px; width:15rem; overflow:hidden; cursor:pointer; }
.wk .button_wrapper .word{ display:inline-flex; transform:translate(0); position:relative; z-index:1; }
.wk .button_wrapper .text{ display:inline-block; white-space:pre; transition-property:transform; transition-duration:var(--dur,var(--base-dur));
    transition-timing-function:ease; transition-delay:var(--delay,0s); transform:translate(0); }
.wk .button_wrapper.is-hovered .text{ transform:translateX(var(--group-move,0px)); }
.wk .button_wrapper .arrow{ position:absolute; top:50%; transform:translateY(-50%); width:20px; height:1em; overflow:hidden; }
.wk .button_wrapper .arrow.arrow-right{ right:2px; }
.wk .button_wrapper .arrow.arrow-left{ left:0; }
.wk .button_wrapper .arrow-sprite{ display:inline-block; will-change:transform,opacity; }
.wk .button_wrapper .u-right, .wk .button_wrapper .u-left{ position:absolute; left:0; bottom:2px; height:1px; width:100%; }
.wk .button_wrapper .u-right{ background:var(--ink); }
.wk .button_wrapper .u-left{ background:var(--accent); }
.wk .button_wrapper:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.wk .outro h2{ font-weight:500; letter-spacing:-.02em; font-size:clamp(1.4rem,3vw,2.2rem); margin:0; }
@media(max-width:820px){.wk .pin-container{ height:auto; }
.wk .pin-stage{ position:static; height:auto; overflow:visible; }
.wk .htrack{ position:static; flex-direction:column; transform:none !important; }
.wk .panel{ height:auto; width:100% !important; padding:36px 24px; }
.wk .panel.card{ display:block; }
.wk .p-inner{ transform:none !important; }
.wk .info .cardline{ transform:scaleY(1) !important; }
.wk .hud{ display:none; }}
@media (prefers-reduced-motion: reduce){.wk *{ animation:none !important; }}

/* ===== SECTION 2 — Design in Motion (CYB3R dark) ===== */
.dm{ --bg:#1A232D; --ink:#ffffff; --ink-2:#c7c7cc; --ink-dim:#8b8b90; --line:#2a2a2e; --accent:#39F1E0;
    --mono: ui-monospace,"SF Mono",Menlo,Consolas,monospace; --sans:"Inter",Helvetica,Arial,system-ui,sans-serif; --edge: max(24px, (100vw - 1400px) / 2); }
.dm{ margin:0; font-family:var(--sans); color:var(--ink); background:#1A232D; -webkit-font-smoothing:antialiased; }
.dm .intro{ min-height:54vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:56px 24px; gap:14px; background:#1A232D; }
.dm .intro .eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-dim); }
.dm .intro .eyebrow b{ color:var(--accent); }
.dm .intro h1{ font-weight:500; letter-spacing:-.03em; font-size:clamp(1.7rem,3.6vw,2.7rem); margin:0; line-height:1.04; text-wrap:balance; }
.dm .intro .cue{ margin-top:20px; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); display:flex; flex-direction:column; align-items:center; gap:8px; }
.dm .intro .cue .arrow{ width:1px; height:34px; background:var(--line); position:relative; overflow:hidden; }
.dm .intro .cue .arrow::after{ content:""; position:absolute; left:0; top:-100%; width:1px; height:100%; background:var(--ink); animation:drip 1.6s ease-in-out infinite; }
.dm .pin-container{ position:relative; height:640vh; background:var(--bg); }
.dm .pin-stage{ position:sticky; top:0; height:100vh; overflow:hidden; background:var(--bg); }
.dm #gl{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:2; }
.dm .headline{ position:absolute; inset:0; z-index:1; pointer-events:none; display:flex; flex-direction:column; justify-content:center; }
.dm .headline .hw{ font-weight:500; letter-spacing:-.04em; line-height:.84; font-size:clamp(4rem,15vw,13rem); color:#202A36; text-transform:uppercase; white-space:nowrap; will-change:transform; }
.dm .headline .top{ align-self:flex-start; padding-left:var(--edge); transform:translateX(-100vw); }
.dm .headline .bottom{ align-self:flex-end; padding-right:var(--edge); transform:translateX(100vw); }
.dm .caption{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); z-index:3; text-align:center; font-family:var(--sans); font-weight:500; font-size:clamp(1.4rem,3vw,2.4rem); letter-spacing:-.02em; text-transform:none; color:var(--ink); pointer-events:none; line-height:1.15; padding:0 6vw; }
.dm .foot-note{ display:none; position:absolute; left:var(--edge); bottom:34px; z-index:3; max-width:32ch; color:var(--ink-2); font-size:.9rem; }
.dm .foot-cta{ position:absolute; right:var(--edge); bottom:34px; z-index:3; font-family:var(--sans); font-weight:500; font-size:1rem; letter-spacing:-.5px; text-transform:none; color:var(--ink); border-bottom:1px solid var(--accent); padding-bottom:3px; text-decoration:none; }
.dm .hud{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:3; font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--ink-dim); display:flex; gap:10px; align-items:center; }
.dm .hud #phase{ display:none; }
.dm .hud .bar{ width:120px; height:1px; background:var(--line); position:relative; }
.dm .hud .bar i{ position:absolute; inset:0; background:var(--accent); transform-origin:left; transform:scaleX(0); }
.dm .outro{ min-height:44vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:12px; background:#1A232D; color:#d8d8d8; padding:50px 24px; }
.dm .outro h2{ font-weight:500; letter-spacing:-.02em; font-size:clamp(1.4rem,3vw,2.2rem); margin:0; }
.dm .outro p{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#6b6f78; }