/* "I have got my eye on you" hero object, driven by js/eye/eye-hero.js.
   Used by the home page, coming-soon.html and /lab/eye.html. The page sizes .eye; the stage fills what is left
   under the picker. The poster is the first paint (and the whole thing with reduced motion or Save-Data);
   the live canvas fades in over it once its demo is ready. */
.eye{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;min-height:0;min-width:0}
.eye-seg{position:relative;z-index:2;display:inline-flex;flex-wrap:wrap;justify-content:center;max-width:100%;padding:3px;border-radius:99px;background:rgba(28,28,30,.72);border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.eye-seg button{background:none;border:0;color:var(--mut2);font-size:13px;line-height:1.3;padding:6px 13px;border-radius:99px;cursor:pointer;white-space:nowrap;transition:background-color .3s,color .3s}
.eye-seg button[aria-pressed=true]{background:var(--gold);color:#000;font-weight:600}
.eye-seg button:hover:not([aria-pressed=true]){color:#fff}

.eye-stage{position:relative;flex:1 1 auto;width:100%;min-height:0;perspective:1100px}
.eye-stage>canvas,.eye-poster{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.eye-poster{object-fit:contain;pointer-events:none;transition:opacity .9s cubic-bezier(.16,1,.3,1)}
.eye-stage>canvas{display:block;opacity:0;transition:opacity .9s cubic-bezier(.16,1,.3,1)}
.eye-stage.on>canvas{opacity:1}
.eye-stage.on .eye-poster{opacity:0}
.eye-stage.mq>canvas{-webkit-mask-image:linear-gradient(#000 72%,transparent 98%);mask-image:linear-gradient(#000 72%,transparent 98%)}
/* the lens is a square 2D canvas that the scene sizes itself and turns in 3D */
.eye-stage.lens>canvas{inset:auto;top:50%;left:50%;width:auto;height:auto;translate:-50% -50%;transform-style:preserve-3d;will-change:transform}

.eye-cap{position:relative;z-index:2;max-width:440px;min-height:3em;text-align:center;font-size:14px;line-height:1.5;color:var(--mut2)}
.eye-cap [data-eye-hint]{color:var(--gold)}
.eye.is-still .eye-cap [data-eye-hint]{color:var(--mut2)}
.eye-tilt{margin-inline-start:6px;background:var(--gold);color:#000;border:0;border-radius:99px;padding:5px 14px;font-weight:700;font-size:13px;cursor:pointer;vertical-align:middle}
.eye-tilt:disabled{background:#2a2a2c;color:var(--mut2)}

@media (max-width:734px){
  .eye{gap:6px}
  .eye-seg button{font-size:12px;padding:6px 10px}
  .eye-cap{font-size:13px;min-height:0}
  .eye-cap [data-eye-sub]{display:none} /* one short line on phones: the hint */
}
@media (prefers-reduced-motion:reduce){
  .eye-poster,.eye-stage>canvas,.eye-seg button{transition:none}
}