/* =========================================================
   PROTOTYPE COMPONENT
   Comes after the Ideation section. Inline SVG scene (assets/prototype/prototype.svg)
   with an animated Figma toolbar and a playable tic-tac-toe board.
   Behaviour: js/prototype/main.js
   ========================================================= */

.prototype-section {
  /* sits above the fixed dots / grid-lines layers */
  position: relative;
  z-index: 1;
  overflow-x: clip;

  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.prototype-wrap {
  position: relative;           /* the title image is positioned against this box */
  width: calc(min(100%, var(--scene-max-width)) * var(--prototype-scale)); /* same visible width as empathize */
  aspect-ratio: 1280 / 1000;                             /* matches the SVG viewBox */
}

#prototype-scene {
  width: 100%;
  aspect-ratio: 1280 / 1000;                             /* matches the SVG viewBox */
}

#prototype-scene svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.prototype-status {
  text-align: center;
  padding: 2rem;
  color: #444;
}
.prototype-status.error { color: #b00020; }

/* ---------- Figma "Dev Mode" toggle animation (2.4s loop) ---------- */
@keyframes kf_Dev_Mode_Track_fill_0 {
  0%      { fill: #3A3A3A; }
  41.667% { animation-timing-function: ease; fill: #3A3A3A; }
  50%     { fill: #14AE5C; }
  91.667% { animation-timing-function: ease; fill: #14AE5C; }
  100%    { fill: #3A3A3A; }
}
#Dev_Mode_Track_bg_0 {
  animation: kf_Dev_Mode_Track_fill_0 2.4s linear infinite;
}

@keyframes kf_Dev_Mode_Knob_transform_0 {
  0%      { transform: translateX(0.003px) translateY(0px) translateX(0px); }
  41.67%  { animation-timing-function: ease;
            transform: translateX(0.003px) translateY(0px) translateX(0px); }
  50%     { transform: translateX(0.003px) translateY(0px) translateX(16.564px); }
  91.67%  { animation-timing-function: ease;
            transform: translateX(0.003px) translateY(0px) translateX(16.564px); }
  100%    { transform: translateX(0.003px) translateY(0px) translateX(0px); }
}
#Dev_Mode_Knob {
  transform-origin: 0 0;
  animation: kf_Dev_Mode_Knob_transform_0 2.4s linear infinite;
}

/* ---------- Handwritten "Prototype" title (an <img>, outside the scene box so the script can't wipe it) ----------
   Position / size are % of the 1280 x 1000 scene: empty top-left corner. Same visible height as the
   Empathize title (45.5 tall, see define.css); the values already allow for this scene's drawing scale. */
.prototype-title {
  position: absolute;
  left: 500px; top: 100px;
  rotate: 15deg;
  width: 12.16%;
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}