/* PROJECTED REALITY — projection page components (v2 "Haze", DESIGN.md).
   Loaded after css/services.css; every color is a token from that sheet. Two parts:
   1. "From surface to show" — scroll-driven throw (clip-path grows from the lens dot).
   2. Content-type bento — four cards with live 2D <canvas> art panels. */

/* ===== 1. the throw ===== */
.throw{--throw:1;display:grid;gap:1.25rem}
.throw-frame{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--surface);isolation:isolate}
.throw-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.throw-dark{filter:grayscale(1) brightness(.18) contrast(1.1)}
.throw-spill{opacity:.32;clip-path:circle(calc(var(--throw)*133% + 4%) at 6% 90%)}
.throw-lit{clip-path:circle(calc(var(--throw)*133%) at 6% 90%)}
.throw-beam{position:absolute;left:6%;bottom:10%;height:1px;width:calc(var(--throw)*107%);transform-origin:0 50%;transform:rotate(-28.3deg);background:var(--beam);opacity:calc(.9 - var(--throw)*.75);pointer-events:none}
.throw-lens{position:absolute;left:6%;bottom:10%;width:10px;height:10px;margin:0 0 -5px -5px;border-radius:50%;background:var(--accent);outline:1px solid rgba(var(--accent-rgb),.45);outline-offset:4px;z-index:2}
.throw-lens-label,.throw-readout{position:absolute;z-index:2;padding:.35em .6em;border-radius:6px;background:rgba(var(--bg-rgb),.62);color:var(--text-2);line-height:1;pointer-events:none}
.throw-lens-label{left:calc(6% + 16px);bottom:10%;transform:translateY(50%)}
.throw-readout{top:1rem;right:1rem;font-variant-numeric:tabular-nums}
.throw-readout b{font-weight:400;color:var(--text)}
.throw-stages{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem 1.5rem}
.throw-stage{padding-top:.9rem;border-top:1px solid var(--border);transition:border-color .6s var(--ease-out)}
.throw-stage>div{display:grid;gap:.4rem;opacity:0;transform:translateY(8px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.throw-stage .mono{color:var(--accent);letter-spacing:.14em}
.throw-stage p{color:var(--text-2);font-size:.9rem;line-height:1.55;max-width:34ch}
.throw-stage.is-on{border-top-color:rgba(var(--accent-rgb),.55)}
.throw-stage.is-on>div{opacity:1;transform:none}

/* ===== 2. content-type bento ===== */
.ctype-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.ctype{height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden;transition:border-color .3s,transform .5s var(--ease-out)}
.ctype:hover{border-color:var(--border-hover);transform:translateY(-3px)}
.ctype-body{padding:1.5rem;display:grid;gap:.7rem;align-content:start}
.ctype .n{font:400 .72rem/1 var(--font-mono);letter-spacing:.14em;color:var(--accent)}
.ctype h3{font-size:clamp(1.25rem,1.6vw,1.5rem);line-height:1.15;letter-spacing:-.015em}
.ctype p{color:var(--text-2);font-size:.95rem;max-width:36ch}
.ctype-spec{margin-top:auto;padding-top:.8rem;border-top:1px solid var(--border);line-height:1.5}
.ctype-art{position:relative;aspect-ratio:16/10;align-self:center;margin:1rem 1rem 1rem 0;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);overflow:hidden}
.ctype-art canvas{display:block;width:100%;height:100%}
.ctype-art::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(var(--text-rgb),.05)}

/* ===== responsive ===== */
@media (max-width:1000px){
  .ctype{grid-template-columns:1fr}
  .ctype-art{order:-1;margin:1rem 1rem 0;align-self:start}
}
@media (max-width:640px){
  .throw-frame{border-radius:12px}
  .throw-readout{top:.7rem;right:.7rem}
  .throw-stages{grid-template-columns:1fr;gap:.75rem}
  .ctype-grid{grid-template-columns:1fr}
  .ctype-body{padding:1.25rem}
}
@media (prefers-reduced-motion:reduce){
  .throw{--throw:1!important}
  .throw-beam{display:none}
  .throw-stage>div{opacity:1!important;transform:none!important}
  .throw-stage{border-top-color:rgba(var(--accent-rgb),.55)}
  .ctype:hover{transform:none}
}
@media print{
  .throw{--throw:1!important}
  .throw-stage>div{opacity:1!important;transform:none!important}
}