/* Evolution of the eye. All rules scoped under .ey-* */
.ey-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ey-cap { font-size: 13px; color: var(--dim); text-align: center; max-width: 320px; }
.ey-hero { display: grid; place-items: center; }
.ey-hero img { width: 300px; max-width: 100%; max-height: 34vh; object-fit: contain; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }
.ey-photo { width: 100%; display: grid; place-items: center; }
.ey-photo img { width: 100%; max-width: 360px; max-height: 36vh; object-fit: cover; border-radius: 16px; display: block; transition: opacity .4s; }
.ey-photo.ey-tall img { object-fit: contain; }

/* the quote */
.ey-quote { width: 100%; padding: 18px 18px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.ey-quote p { margin: 0 0 10px; font: italic 500 20px/1.35 var(--serif); color: var(--text); }
.ey-quote span { font-size: 13px; color: var(--dim); }

/* the builder */
.ey-rig { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ey-x { width: 100%; max-width: 380px; display: block; border-radius: 14px; overflow: hidden; }
.ey-water { fill: #1B4A70; }
.ey-body { fill: #6B4A63; }
.ey-hole { fill: #1B4A70; }
.ey-hole.ey-gel { fill: #2A5E86; }
.ey-pig { fill: none; stroke: #2A1A26; stroke-width: 9; stroke-linecap: round; }
.ey-cell { fill: #4A3A58; stroke: #1c1422; stroke-width: 1; transition: fill .25s; }
.ey-cell.on { fill: var(--gold); filter: drop-shadow(0 0 3px rgba(252,192,80,.9)); }
.ey-beam { fill: none; stroke: rgba(252,224,150,.55); stroke-width: 2; stroke-dasharray: 5 5; }
.ey-fish .ey-fb { fill: #9FB4C4; stroke: #0F2A40; stroke-width: 1.5; }
.ey-fish .ey-fin { fill: var(--gold); stroke: #0F2A40; stroke-width: 1.2; }
.ey-fish .ey-feye { fill: #0F2A40; }
.ey-ray { fill: none; stroke: var(--gold); stroke-width: 2; }
.ey-ray.b { stroke: var(--mint); }
.ey-land { fill: var(--gold); stroke: #1c1422; stroke-width: 1; }
.ey-land.b { fill: var(--mint); }
.ey-cornea { fill: none; stroke: rgba(210,236,255,.85); stroke-width: 2.5; stroke-linecap: round; }
.ey-lens { fill: rgba(210,236,255,.45); stroke: rgba(230,246,255,.95); stroke-width: 1.5; }

/* what it can make out */
.ey-view { position: relative; width: 168px; height: 101px; border-radius: 12px; overflow: hidden; background: #0c1a28; box-shadow: 0 0 0 1px var(--line); }
.ey-vimg { position: absolute; inset: -12px; transition: filter .25s; }
.ey-vimg svg { width: 100%; height: 100%; display: block; }
.ey-fog { position: absolute; inset: 0; background: #2C6A96; transition: opacity .25s, filter .25s; }
.ey-vl { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 0; font-size: 12px; font-weight: 700; text-align: center; color: var(--text); background: rgba(10,14,26,.72); }

/* half an eye */
.ey-row { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ey-step { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; opacity: 0; animation: eyIn .5s ease-out var(--d, 0s) forwards; }
.ey-step .ey-rig { gap: 0; }
.ey-step b { font-size: 14px; font-weight: 800; color: var(--gold); }
.ey-step span { font-size: 12px; line-height: 1.2; color: var(--dim); }
@keyframes eyIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* how long */
.ey-time { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.ey-tq { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ey-tn { display: flex; align-items: baseline; gap: 8px; }
.ey-tn b { font: 700 44px/1 var(--serif); color: var(--faint); transition: color .4s; }
.ey-time.on .ey-tn b { color: var(--gold); }
.ey-tn span { font-size: 15px; color: var(--dim); }
.ey-tnote { font-size: 13px; color: var(--dim); text-align: center; }
.ey-big { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ey-big b { font: 700 48px/1 var(--serif); color: var(--gold); }
.ey-big span { font-size: 15px; color: var(--dim); }

@media (max-height: 700px) {
  .ey-x { max-width: 300px; }
  .ey-view { width: 140px; height: 84px; }
  .ey-photo img { max-height: 30vh; }
}