/* Cylingas — 3D build sequence (component). Used by the home page section (#deliver) and /animation. All rules are scoped under #build3d so nothing leaks into the site.
   Sept 2026 layout (owner): frames fill the pinned screen; the only things on them are the tracked labels and ONE slim caption bar at the bottom.
   Photo, stats and reference live behind the ⓘ Details button (modal). Palette: white · red · black. */
#build3d{--bg:#FFFFFF; --ink:#111111; --muted:#6B6B6B; --line:rgba(0,0,0,.10); --red:#D2232A; --red-hi:#B81E24; --barh:76px;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --font:"Inter","Avenir Next","Helvetica Neue","Segoe UI",system-ui,sans-serif;
  background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.5;position:relative}
#build3d *{box-sizing:border-box;margin:0;padding:0}

/* ---- pinned full-screen stage ---- */
#build3d .b-track{height:1600vh;position:relative}   /* ≥ 6 px of scroll per frame on a laptop (2,025 frames); autoplay scrolls it for the visitor */
#build3d .b-stage{--navh:70px;position:sticky;top:0;height:100vh;width:100%;overflow:hidden;background:var(--bg)}
#build3d canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
#build3d .b-brand,#build3d .spec,#build3d .media{display:none}   /* nothing else sits on the frames */

/* ---- caption bar ---- */
#build3d .panel{position:absolute;left:0;right:0;bottom:0;background:rgba(255,255,255,.94);border-top:1px solid var(--line);transition:opacity .4s ease,transform .4s ease}
#build3d .rail{display:flex;gap:3px;height:3px;background:var(--line)}
#build3d .rail div{flex:1;position:relative;overflow:hidden;cursor:pointer}
#build3d .rail div span{display:none}
#build3d .rail div i{position:absolute;inset:0;background:var(--red);transform-origin:left;transform:scaleX(0)}
#build3d .rail div.done i{transform:scaleX(1)}
#build3d .pbar{min-height:var(--barh);display:flex;align-items:center;gap:clamp(12px,2vw,28px);padding:10px clamp(16px,4vw,56px)}
#build3d .ptext{min-width:0;flex:1;display:flex;align-items:baseline;gap:clamp(10px,1.6vw,22px);flex-wrap:wrap}
#build3d .phase-no{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:10px;white-space:nowrap}
#build3d .phase-no::before{content:"";display:inline-block;width:22px;height:2px;background:var(--red)}
#build3d .phase-title{font-size:clamp(17px,1.5vw,22px);line-height:1.1;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
#build3d .phase-desc{font-size:13.5px;line-height:1.4;color:var(--muted);flex-basis:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:1280px){#build3d .phase-desc{flex-basis:auto;flex:1;min-width:0}}
#build3d .tags{display:none}
#build3d .b-info{flex:none;display:inline-flex;align-items:center;gap:9px;padding:10px 16px 10px 10px;border:1.5px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
#build3d .b-info i{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font-style:italic;font-family:Georgia,serif;font-size:13px;font-weight:700;line-height:1}
#build3d .b-info:hover{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-1px)}
#build3d .b-info:hover i{background:#fff;color:var(--red)}
#build3d .panel .fade{transition:opacity .35s ease,transform .35s ease}
#build3d .panel.switching .fade{opacity:0;transform:translateY(4px)}
#build3d .panel.off{opacity:0;transform:translateY(100%)}

/* ---- hint + loader ---- */
#build3d .hint{position:absolute;left:50%;bottom:calc(var(--barh) + 14px);transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.8);padding:6px 12px;border-radius:999px;transition:opacity .5s;pointer-events:none}
#build3d .hint:empty{display:none}
#build3d .hint.gone,#build3d .hint.off{opacity:0}
#build3d .b-loader{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:opacity .5s}
#build3d .b-loader i{display:block;width:180px;height:2px;background:var(--line);position:relative;overflow:hidden;border-radius:2px}
#build3d .b-loader i::after{content:"";position:absolute;inset:0;background:var(--red);transform-origin:left;transform:scaleX(var(--p,0))}
#build3d .b-loader.gone{opacity:0;pointer-events:none}
#build3d .b-loader.buffering{opacity:1;pointer-events:none}
#build3d .b-loader.buffering span::before{content:"Buffering · "}

/* ---- tracked labels (from the Blender camera) ---- */
#build3d .labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#build3d .tag{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:flex-start;padding:6px 10px 7px;background:rgba(255,255,255,.94);border-left:3px solid var(--red);border-radius:8px;opacity:0;transition:opacity .35s;white-space:nowrap;will-change:left,top}
#build3d .tag b{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--ink)}
#build3d .tag span{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--muted)}
#build3d .tag::after{content:"";position:absolute;left:50%;bottom:-14px;width:1px;height:14px;background:var(--ink);opacity:.6}
#build3d .tag.on{opacity:1}
@media (max-width:899px){#build3d .tag.mob-skip{display:none}}

/* ---- full-screen cards: opening screen, core-focus title, outro ---- */
#build3d .b-intro,#build3d .outro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px 4vh;pointer-events:none}
#build3d .b-intro{z-index:3;background:radial-gradient(ellipse at 50% 42%,#FFFFFF 0%,#FFFFFF 40%,#F4F4F4 78%,#E8E8E8 100%);transition:opacity .45s ease}   /* quick fade so the FEED checkpoint card is not covered */
#build3d .b-intro.gone{opacity:0}
#build3d .outro{opacity:0;transition:opacity .7s ease;background:radial-gradient(ellipse at center,rgba(255,255,255,.94) 0%,rgba(255,255,255,.6) 45%,rgba(255,255,255,0) 75%)}
#build3d .outro.on{opacity:1;pointer-events:auto}
#build3d .outro-logo{height:clamp(44px,5.4vw,72px);width:auto;padding:10px 22px;background:#fff;border-radius:18px;box-shadow:0 18px 40px -22px rgba(0,0,0,.35)}
#build3d .outro .outro-logo{height:clamp(56px,7vw,96px)}
#build3d .outro-sub{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-top:10px;font-weight:600}
#build3d .outro h1,#build3d .b-intro h1{font-size:clamp(30px,4.6vw,72px);font-weight:700;letter-spacing:-.03em;line-height:1;margin:16px 0 8px;color:var(--ink)}
#build3d .outro h1{font-size:clamp(44px,7vw,110px);margin:28px 0 12px}
#build3d .outro > p,#build3d .b-intro > p{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0;max-width:70ch;padding:0 16px}
#build3d .b-play{pointer-events:auto;display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:16px 34px;border:0;border-radius:999px;background:var(--red);color:#fff;font-family:var(--font);font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;box-shadow:0 18px 40px -16px rgba(210,35,42,.6);transition:transform .2s,box-shadow .2s,background .2s}
#build3d .b-play:hover{transform:translateY(-2px);background:var(--red-hi);box-shadow:0 24px 48px -16px rgba(210,35,42,.65)}
#build3d .b-play i{display:inline-block;width:0;height:0;border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
#build3d .b-intro .sgrid{width:min(1280px,100%);margin:clamp(14px,3vh,34px) auto 0;padding:0 clamp(16px,3vw,40px);pointer-events:auto;text-align:left}
#build3d .b-intro .sc{padding:1rem 1.1rem;gap:.45rem}
#build3d .b-intro .sc h3{font-size:.94rem}
#build3d .b-intro .sc p{font-size:.78rem;line-height:1.5}
#build3d .b-intro .sc .ic{width:24px;height:24px}
@media (max-height:820px){#build3d .b-intro .sc p{display:none} #build3d .b-intro .outro-logo{height:44px}}
@media (max-width:820px){#build3d .b-intro .sgrid{display:none}}
#build3d .outro .b-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;justify-content:center}
#build3d .outro .b-btn{font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:15px 28px;border:1.5px solid var(--ink);border-radius:999px;color:var(--ink);background:rgba(255,255,255,.9);transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease}
#build3d .outro .b-btn:hover{transform:translateY(-3px);background:#fff;box-shadow:0 14px 30px -16px rgba(0,0,0,.4)}
#build3d .outro .b-btn.primary{background:var(--red);border-color:var(--red);color:#fff}
#build3d .outro .b-btn.primary:hover{background:var(--red-hi);border-color:var(--red-hi)}
#build3d .outro .contact{margin-top:26px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted)}
#build3d .b-badge{display:none}

/* ---- details modal (photo · summary · stats · reference) ---- */
#build3d .modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:900;padding:24px}
#build3d .modal.on{display:flex}
#build3d .modal-box{background:#fff;max-width:880px;width:100%;max-height:92vh;overflow:auto;border:1px solid var(--line);border-radius:20px;position:relative;transform-origin:top left;will-change:transform,opacity}
#build3d .modal-box img{width:100%;height:auto;max-height:46vh;object-fit:contain;display:block;background:#111}
#build3d .modal.animating .modal-box{transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s ease}
#build3d .modal-body{padding:26px 28px}
#build3d .modal-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;display:flex;align-items:center;gap:10px}
#build3d .modal-eyebrow::before{content:"";width:24px;height:2px;background:var(--red)}
#build3d .modal-body h3{font-size:26px;font-weight:700;letter-spacing:-.02em;margin:0 0 12px;line-height:1.05}
#build3d .modal-text{font-size:14.5px;line-height:1.6;color:var(--ink);margin:0 0 14px}
#build3d .modal-body .stats{display:grid;grid-template-columns:1fr 1fr;padding:0}
#build3d .modal-body .stats div{padding:8px 0;border-top:1px solid var(--line)}
#build3d .modal-body .stats b{display:block;font-family:var(--mono);color:var(--red);font-size:20px;font-weight:700}
#build3d .modal-body .stats span{font-size:12px;color:var(--muted)}
#build3d .modal-body .ref{padding:10px 0 0;border-top:1px solid var(--line);font-size:12px;margin-top:6px}
#build3d .modal-body .ref small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
#build3d .modal-close{position:absolute;top:10px;right:12px;border:0;background:#fff;color:var(--ink);font-size:26px;line-height:1;width:36px;height:36px;border-radius:50%;cursor:pointer;z-index:2}

/* ---- state ---- */
#build3d.introing .panel,#build3d.introing .b-loader,#build3d.introing .labels{opacity:0;transition:opacity .4s}   /* while the opening screen is up, nothing else competes with it */
#build3d.introing .hint{z-index:4}
@media (max-width:720px){
  #build3d{--barh:64px}
  #build3d .phase-desc{display:none}
  #build3d .b-info span{display:none}
  #build3d .b-info{padding:8px}
}
@media (prefers-reduced-motion:reduce){#build3d .panel .fade{transition:none}}

/* ---- section intro card (owner, Sept 18 2026: "the cards were disrupting everything"): a SMALL card in the TOP LEFT corner.
   It slides in when the build reaches a new section, holds ~5 s and fades out on its own. It never pauses the build, never covers
   the frames and never hides the caption bar or the tracked labels. No backdrop blur — blurs over the moving canvas repaint every frame. ---- */
#build3d .b-skip{position:absolute;top:calc(var(--navh) + 18px);right:clamp(14px,3vw,38px);z-index:5;padding:9px 20px;border:1.5px solid var(--ink);border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink);font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s,opacity .4s}
#build3d .b-skip:hover{background:var(--red);border-color:var(--red);color:#fff}
#build3d .b-skip.off{opacity:0;pointer-events:none}
#build3d .b-card{position:absolute;top:calc(var(--navh) + 18px);left:clamp(14px,3vw,38px);width:min(320px,calc(100% - 28px));
  background:rgba(255,255,255,.94);border:1px solid var(--line);border-left:3px solid var(--red);border-radius:14px;
  box-shadow:0 18px 44px -26px rgba(0,0,0,.45);opacity:0;transform:translateX(-16px);pointer-events:none;
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1);z-index:2;overflow:hidden}
#build3d .b-card.on{opacity:1;transform:none}
#build3d .bc-img{display:none}
#build3d .bc-body{padding:14px 16px 14px;min-width:0}
#build3d .bc-no{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
#build3d .b-card h3{font-size:17px;font-weight:700;letter-spacing:-.015em;line-height:1.15;margin:0 0 6px;color:var(--ink)}
#build3d .bc-desc{font-size:12.5px;line-height:1.45;color:var(--muted);margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#build3d .b-card .stats{display:grid;grid-template-columns:1fr}
#build3d .b-card .stats div{padding:5px 0;border-top:1px solid var(--line)}
#build3d .b-card .stats b{display:block;font-family:var(--mono);color:var(--red);font-size:13.5px;font-weight:700;line-height:1.15}
#build3d .b-card .stats span{font-size:11px;color:var(--muted);line-height:1.3}
#build3d .bc-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line);display:block}
#build3d .bc-bar b{position:absolute;inset:0;background:var(--red);transform-origin:left;transform:scaleX(0)}
/* the bar is set per frame from JS (position INSIDE the section) — no CSS transition, or it would lag the video */
#build3d .b-card .bc-img,#build3d .b-card .bc-body{transition:opacity .22s ease}
#build3d .b-card.swapping .bc-img,#build3d .b-card.swapping .bc-body{opacity:0}   /* contents cross-fade at the handover; the card never moves */
@media (max-width:720px){
  #build3d .b-card{top:calc(var(--navh) + 10px);left:12px;width:calc(100% - 24px)}
  #build3d .bc-body{padding:12px 14px}
  #build3d .b-card h3{font-size:15.5px}
  #build3d .bc-desc{-webkit-line-clamp:2;font-size:12px}
  #build3d .b-card .stats{grid-template-columns:1fr 1fr;gap:0 14px}
}
@media (prefers-reduced-motion:reduce){ #build3d .b-card{transition:none} }

/* laptop tier (owner, Sept 17 2026): the opening screen and cards scale down with the site */
@media (max-width:1500px) and (min-width:721px){
  #build3d .b-intro h1{font-size:clamp(26px,3.8vw,54px);margin:12px 0 6px}
  #build3d .b-intro .outro-logo{height:clamp(40px,4.6vw,60px)}
  #build3d .b-play{padding:13px 28px;font-size:14px;margin-top:16px}
  #build3d .b-intro .sgrid{margin-top:clamp(10px,2.4vh,26px)}
  #build3d .b-intro .sc{padding:.85rem .95rem}
  #build3d .b-card{width:min(290px,calc(100% - 28px))}
  #build3d .bc-body{padding:12px 14px}
  #build3d .b-card h3{font-size:16px}
  #build3d .bc-desc{font-size:12px}
  #build3d .b-card .stats b{font-size:13px}
  #build3d .outro h1{font-size:clamp(36px,5.5vw,80px)}
}