/* The hero dish. Self-contained: this file + the DISH markup in index.html + scripts/dish.js.
   Read research/landing-page/mockup2/DISH-HANDOFF.md before changing anything here. */
/* ── DISH: start (self-contained: this CSS + the DISH markup + the DISH script) ── */
/* chrome, as ruled: light from the left (the text side), a close dark shadow to the right, no rim,
   teal only inside (spokes + hub), hub = teal disc with a black disc on top. */
.dish{position:relative;width:var(--D);height:var(--D);border-radius:50%;border:0;background:var(--wash);
  box-shadow:3px 3px 5px rgba(11,18,32,.20), 13px 9px 20px -4px rgba(11,18,32,.40), 26px 18px 38px -14px rgba(11,18,32,.34)}
.plate{position:absolute;inset:0;border-radius:50%;overflow:hidden}
.rotor{position:absolute;inset:0;transform:rotate(var(--rot));transition:transform var(--spin) var(--ease)}
.wedge{position:absolute;inset:0;transition:background .6s ease}
/* The seat is a dish-sized square that carries one photo. Its anchor sits at
   carry x orbit along the wedge's bisector, so it orbits with the plate by that
   fraction; the counter-rotation keeps the photo upright. carry 0 = the photo is
   pinned to the middle of the dish and the wedge sweeps across it; carry 1 = the
   photo rides the whole way and the view barely changes. */
.seat{position:absolute;width:var(--D);height:var(--D);--win:var(--D);
  transform:translate(-50%,-50%) rotate(calc(var(--rot) * -1));
  transition:transform var(--spin) var(--ease)}
.layer{position:absolute;inset:0;background:transparent;transition:opacity .6s ease}
.layer.bd{background:var(--bg,var(--wash))}   /* only the backdrop carries the tint: a working layer must show the backdrop wherever its photo does not reach */
.layer.off{opacity:0}
.layer.off .ph{transition:none}
.layer.bd .ph{transition:none}   /* the backdrop copy never moves; it only shows where the working layer has not yet covered */
/* a photo's placement (size + offset, in window units). Registered so a change glides:
   at each step the picture rides to a framing that covers the sweep, then settles into
   the wedge's own crop on landing. Hidden layers snap, so a swapped-in photo never slides in. */
@property --iw{syntax:'<number>';inherits:false;initial-value:1}
@property --ih{syntax:'<number>';inherits:false;initial-value:1}
@property --ix{syntax:'<number>';inherits:false;initial-value:0}
@property --iy{syntax:'<number>';inherits:false;initial-value:0}
.layer .ph{position:absolute;left:50%;top:50%;width:var(--win);height:var(--win);
  transform:translate(-50%,-50%) scaleX(var(--flip,1));
  transition:--iw var(--pan,900ms) ease-in-out,--ih var(--pan,900ms) ease-in-out,--ix var(--pan,900ms) ease-in-out,--iy var(--pan,900ms) ease-in-out;
  background-repeat:no-repeat;
  background-size:calc(var(--win) * var(--iw,1)) calc(var(--win) * var(--ih,1));
  background-position:calc(var(--win) * var(--ix,0)) calc(var(--win) * var(--iy,0))}
/* drift: a slow pan under the window so the dish is never quite still */
.dish.drifting .layer .ph{animation:drift var(--drift-ms) ease-in-out infinite alternate}
@keyframes drift{
  from{transform:translate(calc(-50% - var(--D) * var(--dx,0)),calc(-50% - var(--D) * var(--dy,0))) scaleX(var(--flip,1))}
  to  {transform:translate(calc(-50% + var(--D) * var(--dx,0)),calc(-50% + var(--D) * var(--dy,0))) scaleX(var(--flip,1))}
}

.spokes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.spokes line{stroke:var(--teal);stroke-width:1.6;stroke-linecap:round}
.spokes circle{fill:var(--teal);stroke:none;pointer-events:auto;cursor:pointer;transition:transform .25s ease;transform-origin:50% 50%}
.spokes .pip{fill:var(--ink)}
.spokes .hit{fill:transparent}
.spokes:hover circle:not(.hit){transform:scale(1.18)}

.tags{position:absolute;width:var(--D);height:var(--D);left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.tag{position:absolute;transform:translate(-50%,-50%);background:#fff;border:1px solid var(--rule);border-radius:999px;
  padding:6px 12px;white-space:nowrap;font:600 11.5px/1 Inter,sans-serif;color:var(--ink);
  box-shadow:0 8px 20px -12px rgba(11,18,32,.35);opacity:0;transition:opacity .4s}
.tag b{color:var(--teal);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:9.5px;margin-right:6px}
.dish-wrap.labels .tag{opacity:1}

/* continuous turning: the plate rotates without stopping and each seat counter-rotates
   on the same clock, so the photo stays upright the whole way round */
.dish.spinning .rotor{transition:none;animation:rotorSpin var(--rev) linear infinite}
.dish.spinning .seat{transition:none;animation:seatSpin var(--rev) linear infinite}
.dish.spinning.paused .rotor,.dish.spinning.paused .seat{animation-play-state:paused}
@keyframes rotorSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes seatSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(-360deg)}}

@media(prefers-reduced-motion:reduce){.rotor,.seat,.wedge,.layer,.layer .ph{transition:none}
  .dish.drifting .layer .ph,.dish.spinning .rotor,.dish.spinning .seat{animation:none}}
/* ── DISH: end ── */