/* eyefarmers — style.css
   Stage is a fluid 2:1 canvas (the 2018 homepage measures aspect 2.003).
   All sizes use cqh/cqw against the stage, so the scene scales as one piece. */

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

html, body { height: 100%; }
body {
  background: #000;
  font-family: 'Montserrat', -apple-system, sans-serif;
  overflow-x: hidden;
}

.frame {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

/* Full-bleed hero: the stage always covers the viewport. Anchored to the
   bottom (the footer bar), so any excess crops off the TOP of the sky. */
.stage {
  position: absolute;
  left: 50%;
  /* the bottom 10.5% of the scene was art-directed to sit under a footer bar;
     with the bar gone, push that strip below the fold so the field fills the screen */
  bottom: calc(max(100vw, 223.5vh) * -0.0525);
  transform: translateX(-50%);
  width: max(100vw, 223.5vh);
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: #050403;
  container-type: size;
  user-select: none;
}

.layer { position: absolute; inset: 0; pointer-events: none; }
.layer > * { position: absolute; }

.piece {                       /* every placed image */
  position: absolute;
  transform: translateX(-50%); /* x anchors at centre */
  will-change: transform;
}
.piece img { display: block; width: 100%; height: 100%; }
.flip img { transform: scaleX(-1); }

/* ---------- sky + clouds ---------- */
/* the sunset photo holds still; separate cloud layers drift through it */
#ly-sky .skyimg {
  left: -2cqw; top: 0;
  width: 104cqw;               /* small overscan for the mouse parallax */
}
#ly-sky .clouds {
  left: -2cqw; top: 0; width: 104cqw;
  background-image: url(../img/sky-clouds.webp);
  background-repeat: repeat-x;
  background-size: 76.86cqw 100%;     /* tile = 73.9% of the photo's width */
  mix-blend-mode: hard-light;         /* mid-grey = no change; darker/lighter = cloud */
  animation: drift 600s linear infinite;
  pointer-events: none;
}
@keyframes drift { from { background-position: 0 0; } to { background-position: -76.86cqw 0; } }

/* ---------- stalk sway ---------- */
.sway {
  animation: sway var(--swd, 5.5s) ease-in-out var(--swo, 0s) infinite alternate;
  transform-origin: 50% 100%;
}
@keyframes sway {
  from { rotate: calc(var(--swa, .8deg) * -1); }
  to   { rotate: var(--swa, .8deg); }
}

/* ---------- ground shade ---------- */
#ly-shade::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
              transparent 86%, rgba(8, 6, 3, .18) 100%);
}

/* =========================================================
   THE EYE — per the architecture in the handoff:
   sclera = CSS radial gradient (no image)
   iris   = the only raster, rotates on the sphere
   pupil  = CSS disc, child of the iris, inherits rotation
   speculars fixed to the eyeball, never the iris
   veins  = procedural SVG, seeded per eye
   lid    = a scaled disc
   ========================================================= */
.eye {
  position: absolute;
  width: calc(var(--d) * 100cqh);
  height: calc(var(--d) * 100cqh);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* sclera: warm off-white, measured 223/216/214, darker at the limb */
  background: radial-gradient(circle at 37% 30%,
      #f4eeec 0%, #e2dbd9 38%, #d0c7c5 58%, #a89c9a 80%, #6f6462 100%);
  box-shadow: 0 calc(var(--d) * 4cqh) calc(var(--d) * 10cqh) rgba(0,0,0,.22);
  pointer-events: auto;
}
/* peripheral flush: pink, weighted to the rim (2018: 29% of sclera red-tinted) */
.eye::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
      transparent 52%, rgba(214,164,164,.20) 74%,
      rgba(207,150,154,.38) 92%, rgba(196,130,136,.45) 100%);
}
.veins { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }

.ball {                        /* clips the iris at the limb */
  position: absolute; inset: 0;
  border-radius: 50%;
  overflow: hidden;
}
.iris-wrap {
  position: absolute; inset: 0;
  perspective: calc(var(--d) * 240cqh);
}
.iris3d {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(var(--rx, 0deg)) rotateX(var(--ry, 0deg));
  transition: transform .12s ease-out;
}
.iris {
  position: absolute;
  left: 50%; top: 50%;
  width: 46%; height: 46%;
  transform: translate(-50%, -50%) translateZ(calc(var(--d) * 33cqh));
}
.iris .tex {
  position: absolute; inset: 0;
  background-size: cover;
  border-radius: 50%;
  rotate: var(--irot, 0deg);   /* free variety: same texture reads new rotated */
}
.pupil {
  position: absolute; left: 50%; top: 50%;
  width: 31%; height: 31%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 42% 40%, #141010 0%, #060505 70%);
}
/* speculars — fixed to the eyeball. This is the whole trick. */
.spec { position: absolute; border-radius: 50%; pointer-events: none;
        background: radial-gradient(circle, rgba(255,252,246,.92) 0%,
                    rgba(255,252,246,0) 70%); }
.spec.a { left: 26%; top: 17%; width: 22%; height: 17%; }
.spec.b { left: 61%; top: 60%; width: 8%;  height: 7%; opacity: .55; }

.lid {
  position: absolute; inset: -2%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #cec2bc 0%, #a99a93 70%, #857770 100%);
  transform: scaleY(0);
  transform-origin: 50% 0%;
}
.blink .lid { animation: blink .16s ease-in-out; }
@keyframes blink {
  0% { transform: scaleY(0); } 45% { transform: scaleY(1.02); }
  100% { transform: scaleY(0); }
}

/* ---------- windmill wheel ---------- */
.piece img.head { position: absolute; left: 0; top: 0; }
.wheel {
  position: absolute;
  transform: translate(-50%, -50%);
  animation: spin 11s linear infinite;
}
@keyframes spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ---------- crows ---------- */
.crow {
  position: absolute;
  left: -6cqw; top: var(--y, 12cqh);
  width: calc(var(--s, 1.5) * 2.2cqh);
  animation: fly var(--dur, 30s) linear forwards;
  opacity: .88;
}
.crow.rtl {
  left: auto; right: -6cqw;
  animation-name: fly-rtl;
  transform: scaleX(-1);
}
.crow svg { width: 100%; height: auto; display: block;
            animation: bob 5s ease-in-out infinite alternate; }
.crow .wing {
  fill: none; stroke: #17110c; stroke-width: 3.2; stroke-linecap: round;
  transform-origin: 20px 12px;
}
.crow .wl { animation: flapL var(--flap, .45s) ease-in-out infinite alternate; }
.crow .wr { animation: flapR var(--flap, .45s) ease-in-out infinite alternate; }
@keyframes fly     { to { transform: translateX(114cqw); } }
@keyframes fly-rtl { to { transform: translateX(-114cqw) scaleX(-1); } }
@keyframes flapL { from { transform: rotate(12deg); }  to { transform: rotate(-34deg); } }
@keyframes flapR { from { transform: rotate(-12deg); } to { transform: rotate(34deg); } }
@keyframes bob  { from { translate: 0 -.3cqh; } to { translate: 0 .3cqh; } }

/* ---------- brand: top-left, viewport-anchored ---------- */
.brand {
  position: absolute; top: 2.4vh; left: 1.6vw;
  display: flex; align-items: center; gap: 1vh;
  z-index: 70; text-decoration: none;
  filter: drop-shadow(0 .3vh .9vh rgba(0,0,0,.55));
}
.brand img.mark { height: 9vh; width: auto; display: block; }
.brand img.word { height: 2.6vh; width: auto; display: block; }
@media (max-aspect-ratio: 1/1) {      /* phones: mark only, a touch smaller */
  .brand img.mark { height: 7vh; }
  .brand img.word { display: none; }
}

/* ---------- hamburger + menu ---------- */
.burger {
  position: absolute; top: 3.4vh; right: 1.6vw;
  width: 4.4vh; height: 3.4vh;
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between;
  z-index: 70; padding: 0;
}
.burger span {
  display: block; height: .42vh; border-radius: .3vh;
  background: #fff;
  box-shadow: 0 .2cqh .8cqh rgba(0,0,0,.55);
  transition: transform .28s, opacity .2s;
}
body.menu-open .burger span:nth-child(1) { transform: translateY(1.5vh) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-1.5vh) rotate(-45deg); }

.menu {
  position: absolute; top: 0; right: 0; bottom: 0;
  min-width: 24vw; padding: 12vh 3vw 4vh;
  background: rgba(6,6,6,.86);
  backdrop-filter: blur(6px);
  display: flex; flex-direction: column; gap: 3.6vh;
  transform: translateX(105%);
  transition: transform .34s cubic-bezier(.2,.7,.2,1);
  z-index: 60;
}
body.menu-open .menu { transform: translateX(0); }
.menu a, .menu .menu-loc {
  color: #cfcfcf; text-decoration: none;
  font-size: 2.6vh; font-weight: 500; letter-spacing: .16em;
}
.menu a:hover { color: #fff; }
.menu .menu-loc { color: #8f8f8f; font-size: 2.2vh; }

/* baby eyes: half-hidden watchers, dimmed into the field */
.eye.baby { filter: brightness(.82) saturate(.92); }

/* ---------- edit-mode ---------- */
.hint {
  position: absolute; left: 1.2vw; bottom: 2vh;
  color: rgba(255,255,255,.55);
  font-size: 1.9vh; letter-spacing: .08em;
  z-index: 50; pointer-events: none;
  transition: opacity 1s;
}
.hint b { color: #fff; }
body.editing .hint { opacity: 1 !important; }
body.editing .draggable { outline: 1px dashed rgba(120,220,255,.85); cursor: grab; pointer-events: auto; }
body.editing .draggable:active { cursor: grabbing; outline-color: #ffd23f; }
body.editing .sway, body.editing #ly-sky .clouds { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .sway, #ly-sky .clouds, .blink .lid { animation: none !important; }
  .iris3d { transition: none; }
}