/* ============================================================
   Chance IT Studio — styles.css  (radial wheel)
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#060a08; --surface:#0d1310; --s2:#141c17; --border:#1c2721; --b2:#28362d;
  --muted:#6c7c72; --muted2:#8fa096; --text:#c9d4cd; --white:#f0f7f2;
  /* one background tone per section: near-black up to deep forest and back, so the wheel wraps smoothly */
  --tone0:#050a07; --tone1:#08130c; --tone2:#0c1c12; --tone3:#102619; --tone4:#0c1c12; --tone5:#08130c;
  --green:#00cc7a; --orange:#ff6b35; --lime:#b6e000; --cyan:#19d3ff; --magenta:#ff2e88;
  --acc:#00cc7a;
  --header:54px;
  --zoneh:62vh;
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f3f6f3; --surface:#ffffff; --s2:#eaf1ec; --border:#d6e0d9; --b2:#bccbc1;
    --muted:#7b897f; --muted2:#55625a; --text:#29322c; --white:#0d1410;
    --tone0:#f6faf7; --tone1:#edf5ef; --tone2:#e2efe6; --tone3:#d6e8dc; --tone4:#e2efe6; --tone5:#edf5ef;
    --green:#00995c; --orange:#d94f1e; --lime:#6b8a00; --cyan:#0a86b8; --magenta:#c01f63;
    --acc:#00995c;
  }
}

html,body{height:100%}
body{
  background:var(--bg); color:var(--text); font-family:'Syne',sans-serif;
  overflow:hidden; position:fixed; inset:0; overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
}
/* ============================ BACKGROUND ============================ */
.bg{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; background:var(--bg)}
.bg-slide{
  position:absolute; inset:0; overflow:hidden; will-change:transform; visibility:hidden;
  --sa:var(--green);
  --line:color-mix(in srgb, var(--sa) 7%, transparent);
  background:
    radial-gradient(ellipse 60% 55% at 50% 72%, color-mix(in srgb, var(--sa) 15%, transparent), transparent 70%),
    linear-gradient(var(--line) 1px, transparent 1px) 0 0/58px 58px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/58px 58px,
    var(--tone);
}
.bg-img{position:absolute; inset:-4% -12%; background:var(--img) center/cover no-repeat; opacity:0; transition:opacity .6s; filter:grayscale(1) contrast(1.15); will-change:transform}
.has-img .bg-img{opacity:1}
/* duotone + scrim only when a photo is loaded */
.has-img::before{content:''; position:absolute; inset:0; z-index:1; background:var(--sa); mix-blend-mode:color; opacity:.7}
.has-img::after{content:''; position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, color-mix(in srgb,var(--bg) 55%,transparent), color-mix(in srgb,var(--bg) 82%,transparent))}
.bg-num{
  position:absolute; left:3vw; bottom:-6vmin; z-index:3;
  font-family:'Bebas Neue',sans-serif; font-size:46vmin; line-height:.8; letter-spacing:-.01em;
  color:transparent; -webkit-text-stroke:1px color-mix(in srgb, var(--sa) 22%, transparent);
}
.grain{
  position:absolute; inset:0; opacity:.07; 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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{color:inherit}
button{font-family:inherit}

/* ============================ HEADER ============================ */
header{
  position:fixed; top:0; left:0; right:0; height:var(--header); z-index:60;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 clamp(14px,2.4vw,28px);
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(16px); border-bottom:1px solid var(--border);
}
.logo{display:flex; align-items:center; gap:.45rem; text-decoration:none; justify-self:start}
.logo img{height:32px; width:auto; display:block}
.logo .cursor{flex-shrink:0; margin-left:-2px; margin-bottom:-4px}
.logo small{font-family:'DM Mono',monospace; font-size:.54rem; letter-spacing:.18em; color:var(--muted); text-transform:uppercase}

.nav{display:flex; align-items:center; gap:.85rem; justify-self:center}
.nav-dots{display:flex; gap:8px}
.nav-dots button{
  width:8px; height:8px; border-radius:50%; background:var(--b2); border:none; padding:0; cursor:pointer;
  transition:background .2s, transform .2s; -webkit-tap-highlight-color:transparent;
}
.nav-dots button:hover{background:var(--muted2)}
.nav-dots button.on{background:var(--acc); transform:scale(1.5)}
.nav-label{font-family:'DM Mono',monospace; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted2); min-width:60px}

.h-right{display:flex; align-items:center; gap:.85rem; justify-self:end}
.soc{color:var(--muted); display:flex; transition:color .2s}
.soc:hover{color:var(--acc)}
.soc svg{width:17px; height:17px; display:block; fill:currentColor}
.soc[href="/blog/"] svg{width:18px; height:18px}
.h-cta{
  font-family:'DM Mono',monospace; font-size:.62rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:#000; background:var(--acc); text-decoration:none; padding:.5rem .9rem; white-space:nowrap;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  transition:opacity .2s, transform .15s;
}
.h-cta:hover{opacity:.85; transform:translateY(-1px)}

/* ============================ STAGE / WHEEL ============================ */
.stage{
  position:fixed; top:var(--header); left:0; right:0; bottom:0; z-index:1;
  overflow:hidden; touch-action:pan-y; cursor:grab;
}
.stage:active{cursor:grabbing}

.tiles{position:absolute; inset:0}
.tile{
  position:absolute; left:50%; top:50%;
  width:clamp(330px, 48vw, 820px); max-height:var(--zoneh);
  background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--acc);
  border-radius:20px; padding:clamp(24px,3.2vw,46px);
  display:flex; flex-direction:column; justify-content:safe center; gap:1.05rem;
  overflow-y:auto; scrollbar-width:thin; will-change:transform,left,top,opacity;
  transform-origin:center center;
}
.tile::-webkit-scrollbar{width:6px}
.tile::-webkit-scrollbar-thumb{background:var(--b2); border-radius:6px}

/* content */
.eyebrow{font-family:'DM Mono',monospace; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--acc); display:flex; align-items:center; gap:.7rem}
.eyebrow::before{content:''; width:1.4rem; height:1px; background:var(--acc)}
.sh{font-family:'Bebas Neue',sans-serif; font-size:clamp(2.2rem,4.8vw,3.9rem); line-height:.92; letter-spacing:.01em; color:var(--white)}
.lead{font-size:clamp(.9rem,1.45vw,1.08rem); line-height:1.65; color:var(--text)}
.lead b{color:var(--white); font-weight:700}

.hero-name{font-family:'Bebas Neue',sans-serif; font-size:clamp(3.4rem,8.5vw,6.6rem); line-height:.86; letter-spacing:.015em; color:var(--white)}
.hero-name .g{color:var(--green)}
.role{font-family:'DM Mono',monospace; font-size:clamp(.62rem,1.3vw,.74rem); letter-spacing:.08em; color:var(--muted2)}
.cta-row{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:.3rem}
.btn{font-family:'DM Mono',monospace; font-size:.68rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:opacity .2s, transform .15s, border-color .2s, color .2s; border:none}
.btn-fill{padding:.72rem 1.4rem; background:var(--acc); color:#000; clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.btn-fill:hover{opacity:.85; transform:translateY(-2px)}
.btn-line{padding:.7rem 1.25rem; border:1px solid var(--b2); color:var(--muted2); background:none}
.btn-line:hover{border-color:var(--white); color:var(--white)}

.chips{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.2rem}
.chips span{font-family:'DM Mono',monospace; font-size:.56rem; color:var(--muted2); border:1px solid var(--b2); padding:.26rem .5rem; letter-spacing:.04em}

.proj-grid{display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:.2rem}
.proj{position:relative; display:flex; flex-direction:column; gap:.4rem; text-decoration:none; color:inherit;
  background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:.85rem .9rem; overflow:hidden; transition:background .2s, transform .15s}
.proj::before{content:''; position:absolute; left:0; top:0; width:3px; height:0; background:var(--pa,var(--green)); transition:height .3s}
.proj:hover{background:var(--s2); transform:translateY(-2px)}
.proj:hover::before{height:100%}
.proj-top{display:flex; justify-content:space-between; align-items:flex-start; gap:.4rem}
.proj-name{font-size:.98rem; font-weight:700; color:var(--white); line-height:1.15}
.proj-arrow{color:var(--muted); font-size:.85rem; transition:color .2s, transform .2s}
.proj:hover .proj-arrow{color:var(--pa,var(--green)); transform:translate(2px,-2px)}
.proj-desc{font-size:.78rem; line-height:1.5; color:var(--muted2); flex:1}
.proj-stack{display:flex; gap:.28rem; flex-wrap:wrap}
.proj-stack span{font-family:'DM Mono',monospace; font-size:.52rem; color:var(--muted); border:1px solid var(--border); padding:.12rem .34rem}

.svc-grid{display:grid; grid-template-columns:1fr 1fr; gap:.5rem 1.1rem; margin-top:.2rem}
.svc{display:flex; gap:.6rem; align-items:flex-start; padding:.4rem 0; border-bottom:1px solid var(--border)}
.svc .n{font-family:'DM Mono',monospace; font-size:.58rem; color:var(--acc); padding-top:.2rem}
.svc .nm{font-size:.9rem; font-weight:700; color:var(--white)}
.svc .ds{font-size:.75rem; line-height:1.45; color:var(--muted2)}

.steps{display:flex; flex-direction:column; gap:0; margin-top:.2rem}
.step{display:grid; grid-template-columns:2.2rem 1fr; gap:.8rem; padding:.6rem 0; border-bottom:1px solid var(--border)}
.step .n{font-family:'DM Mono',monospace; font-size:.6rem; color:var(--acc); padding-top:.15rem}
.step .nm{font-size:.95rem; font-weight:700; color:var(--white); margin-bottom:.15rem}
.step .ds{font-size:.77rem; line-height:1.5; color:var(--muted2)}

.cform{display:flex; flex-direction:column; gap:.7rem; margin-top:.2rem}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:.7rem}
.field{display:flex; flex-direction:column; gap:.3rem}
.field label{font-family:'DM Mono',monospace; font-size:.55rem; color:var(--muted); text-transform:uppercase; letter-spacing:.12em}
.field input,.field textarea{
  background:var(--bg); border:1px solid var(--b2); color:var(--white);
  font-family:'Syne',sans-serif; font-size:.86rem; padding:.6rem .8rem; outline:none;
  border-radius:0; -webkit-appearance:none; transition:border-color .2s}
.field input:focus,.field textarea:focus{border-color:var(--acc)}
.field textarea{min-height:78px; resize:vertical}
.honeypot{position:absolute; left:-9999px}
.form-foot{display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
#fstatus{font-family:'DM Mono',monospace; font-size:.64rem; color:var(--acc); opacity:0; transition:opacity .3s}
.contact-links{display:flex; gap:1rem; flex-wrap:wrap; margin-top:.2rem}
.clink{font-family:'DM Mono',monospace; font-size:.62rem; letter-spacing:.06em; color:var(--muted2); text-decoration:none; display:flex; align-items:center; gap:.4rem; transition:color .2s}
.clink::before{content:'→'; color:var(--acc)}
.clink:hover{color:var(--white)}
.latest{display:flex; align-items:center; gap:.75rem; margin-top:.3rem; padding:.7rem .85rem; text-decoration:none;
  border:1px solid var(--border); border-left:3px solid var(--acc); border-radius:10px; background:var(--bg); transition:background .2s, transform .15s}
.latest:hover{background:var(--s2); transform:translateY(-2px)}
.latest-ic{width:18px; height:18px; flex-shrink:0; fill:var(--acc)}
.latest-body{display:flex; flex-direction:column; gap:.2rem; min-width:0; flex:1}
.latest-k{font-family:'DM Mono',monospace; font-size:.54rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.latest-t{font-size:.86rem; font-weight:700; color:var(--white); line-height:1.3}
.latest-arrow{color:var(--muted); transition:color .2s, transform .2s}
.latest:hover .latest-arrow{color:var(--acc); transform:translateX(3px)}
.copy{font-family:'DM Mono',monospace; font-size:.54rem; color:var(--muted); letter-spacing:.05em; margin-top:.3rem}

/* ============================ AVATAR DECK ============================ */
.deck{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:55;
  display:flex; align-items:center; gap:clamp(16px,4vw,40px);
}
.runner{position:relative}
.runner svg{display:block; height:clamp(128px,19vh,172px); width:auto; overflow:visible}
.runner::after{content:''; position:absolute; left:50%; bottom:-6px; width:110%; height:12px; transform:translateX(-50%); z-index:-1;
  background:radial-gradient(ellipse, color-mix(in srgb,var(--acc) 55%,transparent) 0%, transparent 70%); opacity:.6; transition:background .35s}
.dust{position:absolute; bottom:0; left:50%; width:7px; height:7px; border-radius:50%; pointer-events:none;
  background:color-mix(in srgb, var(--muted2) 60%, transparent); animation:dust .55s ease-out forwards}
@keyframes dust{
  from{transform:translate(0,0) scale(.6); opacity:.9}
  to{transform:translate(var(--dx),-14px) scale(1.8); opacity:0}
}

.ctrl{
  width:clamp(48px,6.5vw,58px); height:clamp(48px,6.5vw,58px); border-radius:50%;
  background:var(--surface); border:1px solid var(--b2); color:var(--muted);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:border-color .15s,color .15s,background .15s,transform .1s; -webkit-tap-highlight-color:transparent; touch-action:none}
.ctrl:hover{color:var(--white); border-color:var(--white)}
.ctrl.live{border-color:var(--acc); color:var(--acc); background:color-mix(in srgb,var(--acc) 12%,var(--surface)); transform:scale(.94)}
.ctrl svg{width:42%; height:42%; fill:currentColor}
.ctrl:focus-visible{outline:2px solid var(--acc); outline-offset:3px}

.hint{position:absolute; bottom:8px; left:50%; transform:translateX(-50%); z-index:55;
  font-family:'DM Mono',monospace; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); opacity:.75; white-space:nowrap}

/* ============================ RESPONSIVE ============================ */
@media (max-width:720px){
  :root{--header:50px}
  .proj-grid{grid-template-columns:1fr 1fr}
  .svc-grid{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  .h-cta{display:none}
  .nav-label{display:none}
  .logo small{display:none}
}
@media (max-width:430px){
  .proj-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  .runner::after{transition:none}
  .bg-img{transition:none}
}