/* dp-home-look.css — Step 4 "Look at it through a Quest" (views/partials/home-lbe-step-look.ejs):
 * a small Quest looks down at the portal, the sight cone finds it, a ring rolls out and a real
 * attraction pops up on the floor. One 7s loop, every layer on the same clock, started by
 * dp-home-lbe.js (.is-on) once the first render has loaded. Reduced motion: the finished frame. */

.hl-step__art--look { align-items: center; }

/* ONE box: the picture and the game are placed in % of it and both SVGs share its 280x210 viewBox. */
/* The drawing fills only the middle of its 280x210 box, so the box is scaled up to fill the card. */
.hlk { position: relative; display: block; width: min(96%, 280px); aspect-ratio: 280 / 210; transform: scale(1.26); transform-origin: 50% 58%; }
.hlk__floor, .hlk__front { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hlk__front { pointer-events: none; }

.hlk__quest { position: absolute; left: 12%; top: 46%; width: 16%; display: block; }
.hlk__quest img {
  display: block; width: 100%; height: auto;
  transform-origin: 14% 50%;
}
.hlk.is-on .hlk__quest img { animation: hlk-nod 7s cubic-bezier(.45, 0, .25, 1) infinite; }

/* floor: the sizes card's, smaller */
.hlk__plane { fill: rgba(255, 255, 255, 0.1); }
.hlk__grid { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; }
.hlk__edge { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
.hlk__flash { fill: #fff; opacity: 0; }
.hlk.is-on .hlk__flash { animation: hlk-flash 7s ease-out infinite; }
.hlk__paper { fill: #fff; }

/* the game: rises off the floor from the render's own pad corner (--hlk-origin, set by the script) */
.hlk__game {
  position: absolute; display: block; max-width: none; opacity: 0; pointer-events: none;
  transform-origin: var(--hlk-origin, 60% 92%);
}
.hlk.is-on .hlk__game { animation: hlk-game 7s linear infinite; }

/* sight cone */
.hlk__beam, .hlk__source, .hlk__glow, .hlk__ring, .hlk__scan { opacity: 0; }
.hlk.is-on .hlk__beam { animation: hlk-beam 7s ease-in-out infinite; }
.hlk__cone { fill: url(#hlkBeamFill); }
.hlk.is-on .hlk__scan { animation: hlk-scan 7s cubic-bezier(.4, 0, .6, 1) infinite; }
.hlk__source { fill: #fff; filter: blur(3px); }
.hlk.is-on .hlk__source { animation: hlk-source 7s ease-in-out infinite; }

/* found: the disc flashes, a ring rolls out */
.hlk__glow { fill: #fff; }
.hlk.is-on .hlk__glow { animation: hlk-glow 7s ease-out infinite; }
.hlk__ring { fill: none; stroke: #fff; stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.hlk.is-on .hlk__ring { animation: hlk-ring 7s ease-out infinite; }
.hlk.is-on .hlk__ring--2 { animation-name: hlk-ring2; }

/* the clock (7s): 0–14% looking ahead · 14–24% nods down · 24–44% cone sweeps · 44% found ·
 * 46–56% the game pops up · 56–86% it stands there · 86–96% everything clears, head back up */
@keyframes hlk-flash {
  0%, 44% { opacity: 0; }
  48% { opacity: 0.55; }
  62%, 100% { opacity: 0; }
}
@keyframes hlk-game {
  0%, 45% { opacity: 0; transform: translateY(10%) scale(0.45); }
  50% { opacity: 1; transform: translateY(-5%) scale(1.07); }
  54% { transform: translateY(1%) scale(0.98); }
  57%, 86% { opacity: 1; transform: none; }
  93%, 100% { opacity: 0; transform: translateY(-4%) scale(0.94); }
}
@keyframes hlk-nod {
  0%, 8%   { transform: rotate(-7deg); }
  22%, 84% { transform: rotate(0deg); }
  98%, 100% { transform: rotate(-7deg); }
}
@keyframes hlk-beam {
  0%, 22%  { opacity: 0; }
  30%, 82% { opacity: 1; }
  90%, 100% { opacity: 0; }
}
@keyframes hlk-source {
  0%, 22%  { opacity: 0; }
  30%, 82% { opacity: 0.75; }
  90%, 100% { opacity: 0; }
}
@keyframes hlk-scan {
  0%, 24%  { transform: translateY(0); opacity: 0; }
  27%      { opacity: 1; }
  44%      { transform: translateY(85px); opacity: 1; }
  48%, 100% { transform: translateY(85px); opacity: 0; }
}
@keyframes hlk-glow {
  0%, 43%  { opacity: 0; }
  47%      { opacity: 0.55; }
  60%, 100% { opacity: 0; }
}
@keyframes hlk-ring {
  0%, 45%  { opacity: 0; transform: scale(0.95); }
  47%      { opacity: 0.9; transform: scale(1); }
  72%, 100% { opacity: 0; transform: scale(2.1); }
}
@keyframes hlk-ring2 {
  0%, 53%  { opacity: 0; transform: scale(0.95); }
  55%      { opacity: 0.6; transform: scale(1); }
  80%, 100% { opacity: 0; transform: scale(2.1); }
}

@media (prefers-reduced-motion: reduce) {
  .hlk.is-on *, .hlk.is-on .hlk__quest img { animation: none !important; }
  .hlk__game { opacity: 1; }
  .hlk__beam { opacity: 1; }
  .hlk__source { opacity: 0.75; }
}