/* third-eye.css: the WORK block on the home page, after BEHIND THE MASK (js/third-eye.js draws the eye).
   The Third AI Studios eye is the centrepiece: about half the screen wide on desktop, its I standing on the spine (the
   I of AI is the line, as the I of AIDAN is); on phones it hangs right of the edge spine, nearly the full width. The
   words hang off the spine under it. The canvas overflows the eye's box on every side (the GW halo, the LL shadow).
   Reuses hero.css's .work, .work-h, .work-line, .work-go and .draft-tag. */

.te {
  --ew: clamp(340px, 50vw, 1100px);        /* the eye's width */
  --eh: calc(var(--ew) * 0.46154);          /* the steel is 1079 x 498 */
  --epad: calc(var(--ew) * 0.12);           /* the canvas reaches past the steel by this much */
  --ei: 0.6784;                             /* the centre of the I bar, as a fraction of the width */
  position: relative;
  overflow-x: clip;
}
.te-stage { position: relative; width: var(--ew); height: var(--eh); margin-left: calc(var(--lx) * 1px - var(--ew) * var(--ei)); }

/* the eye is the link */
.te-eye {
  position: absolute; inset: 0; display: block; border-radius: 50%;
  touch-action: pan-y pinch-zoom; -webkit-tap-highlight-color: transparent;
}
.te-eye:focus-visible { outline: 2px solid var(--focus); outline-offset: calc(var(--eh) * 0.08); border-radius: 50%; }
html[data-world="gw"] .te-eye:focus-visible { box-shadow: 0 0 22px rgba(0, 229, 255, 0.35); }
.te-still, .te-gl { position: absolute; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.te-still { inset: 0; width: 100%; height: 100%; transition: filter var(--d-mid) var(--breath); }
.te-gl {
  left: calc(-1 * var(--epad)); top: calc(-1 * var(--epad));
  width: calc(100% + 2 * var(--epad)); height: calc(100% + 2 * var(--epad));
  opacity: 0; transform-origin: 50% 50%;
  transition: opacity 200ms linear, transform var(--ease-d) var(--ease);
}
/* the canvas takes over once it has drawn; the still stays only when WebGL is missing (data-gl 0) or without JS */
.te[data-gl="1"] .te-gl { opacity: 1; }
.te[data-js] .te-still { visibility: hidden; }
.te[data-gl="0"] .te-still { visibility: visible; }
.te[data-gl="0"] .te-gl { display: none; }
/* compile ahead (third-eye.js): on screen before its program has linked, the still stands in; the canvas fades in over it
   once drawn (open), then the still goes */
.te[data-gl="wait"] .te-still { visibility: visible; }
.te[data-gl="1"] .te-still { transition: filter var(--d-mid) var(--breath), visibility 0s linear 220ms; }
/* the still, dressed per world: gold rim on the paper, cyan light in the dark */
html[data-world="ll"] .te-still { filter: drop-shadow(0 1px 0 rgba(238, 189, 85, 0.9)) drop-shadow(0 10px 14px rgba(11, 11, 12, 0.22)); }
html[data-world="gw"] .te-still { filter: brightness(0.72) drop-shadow(0 0 2px rgba(0, 229, 255, 0.8)) drop-shadow(0 0 22px rgba(0, 229, 255, 0.35)); }

/* hover: the eye widens a hair, on the world's curve */
.te-eye:hover .te-gl, .te-eye:focus-visible .te-gl { transform: scale(1.02); }
html[data-rm="1"] .te-eye:hover .te-gl, html[data-rm="1"] .te-eye:focus-visible .te-gl { transform: none; }

/* the words, hanging off the spine: the label left of it, the line and the link right of it */
.te-text {
  position: relative; display: grid; grid-template-columns: calc(var(--lx) * 1px) minmax(0, 1fr);
  align-items: start; margin-top: clamp(2.6rem, 7vh, 5.5rem);
}
.te-text .work-h { grid-column: 1; grid-row: 1; justify-self: end; margin: 0.55rem var(--arm) 0 0; text-align: right; }
.te-text .work-line { grid-column: 2; grid-row: 1; margin: 0 0 0 var(--arm); max-width: 27rem; }
.te-text .work-go { grid-column: 2; grid-row: 2; justify-self: start; margin: 1.05rem 0 0 var(--arm); }

/* the words arrive once the eye opens (the world's curve; JS only, so nothing hides without it) */
.te[data-js] .te-text > * { opacity: 0; transform: translateY(18px); transition: opacity var(--d-long) var(--breath), transform var(--d-long) var(--ease); }
.te[data-js] .te-text > :nth-child(2) { transition-delay: 90ms; }
.te[data-js] .te-text > :nth-child(3) { transition-delay: 180ms; }
.te[data-js] .te-text.is-in > * { opacity: 1; transform: none; }
html[data-world="ll"] .te[data-js] .te-text > * { transition-duration: var(--d-mid), var(--d-mid); }
html[data-rm="1"] .te[data-js] .te-text > * { transform: none; transition: opacity 200ms linear; transition-delay: 0ms; }

/* tablets and small laptops: a little more of the width (the eye still clears the left edge: its I is on the spine) */
@media (min-width: 720px) and (max-width: 1100px) { .te { --ew: 58vw; } }

@media (max-width: 719.98px) {
  .te { --ew: calc(100vw - var(--lx) * 1px - 32px); --epad: calc(var(--ew) * 0.1); }
  .te-stage { margin-left: calc(var(--lx) * 1px + 14px); }
  .te-text { display: block; margin-top: 2.4rem; padding: 0 var(--gutter) 0 calc(var(--lx) * 1px + var(--arm)); }
  .te-text .work-h { justify-self: auto; margin: 0; text-align: left; }
  .te-text .work-line { margin: 0.75rem 0 0; max-width: none; font-size: 1.95rem; }
  .te-text .work-go { margin: 1.05rem 0 0; }
}