/* Flat page — one Figma artboard rendered as a full-width image.
   Overlays (form inputs, video elements, hotspots) are positioned absolutely
   as percentages so they scale with the image at any width. */

.flat {
  padding-top: 0;             /* live nav sits on top of the Figma nav baked into the image */
  background: var(--surface);
  min-height: 100vh;
}

.flat__figure {
  position: relative;
  width: 100%;
  margin: 0 auto;
  /* Cap at the Figma artboard width so the image doesn't smear past its native pixels */
  max-width: 1440px;
}

.flat__img {
  display: block;
  width: 100%;
  height: auto;
  /* Placeholder tint until the image 200s — matches each page theme */
  background: linear-gradient(145deg, rgba(0, 0, 0, 0.04), transparent 60%),
              var(--surface);
  min-height: 100vh;
}

img.flat__img:not([data-loaded]) {
  /* While loading, keep a subtle tint matching the page accent */
  background-image: linear-gradient(145deg,
    color-mix(in srgb, var(--accent) 18%, transparent),
    color-mix(in srgb, var(--accent) 4%,  transparent) 60%);
}

/* Generic overlay — positioned absolutely within .flat__figure using % coords */
.flat__overlay {
  position: absolute;
}

/* Invisible hotspot — for clickable regions over the image (e.g. "Next project") */
.flat__hotspot {
  position: absolute;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
  background: transparent;
  border-radius: 6px;
  transition: background 0.25s var(--ease-out), outline 0.25s var(--ease-out);
}

.flat__hotspot:hover,
.flat__hotspot:focus-visible {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Default next/back hotspot positions — covers the bottom ~6% of the page,
   split into two halves. Pages with exact Figma coords (like shadow-girl)
   override these in their own CSS. */
.flat__hotspot--back,
.flat__hotspot--next {
  bottom: 0;
  height: 6%;
  min-height: 80px;
}

.flat__hotspot--back {
  left: 0;
  width: 50%;
}

.flat__hotspot--next {
  right: 0;
  width: 50%;
}

/* Video overlay — object-covers its box, no controls */
video.flat__video {
  position: absolute;
  object-fit: cover;
  display: block;
  background: #000;
}

/* Form overlay (About) — sits in the form area of the flat image */
.flat__form {
  position: absolute;
  display: grid;
  gap: var(--space-md);
}

.flat__form .field__input,
.flat__form .field__textarea {
  background: transparent;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  border: none;
  outline: none;
  width: 100%;
}

.flat__form .field__input {
  border-bottom: 1px solid transparent;
  padding: 4px 0;
}

.flat__form .field__textarea {
  resize: none;
  padding: 12px;
  background: transparent;
}

/* Invisible submit that sits over the Figma-drawn SEND button */
.flat__submit {
  position: absolute;
  background: transparent;
  border: 0;
  cursor: pointer;
  border-radius: 28px;
  color: transparent; /* the button label is baked into the image */
  transition: background 0.25s var(--ease-out);
}

.flat__submit:hover,
.flat__submit:focus-visible {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Tiny status line under the form */
.flat__form-hint {
  position: absolute;
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--ink-subtle);
  margin: 0;
  min-height: 1em;
}

.flat__form-hint[data-state="ok"]  { color: #1fa65a; }
.flat__form-hint[data-state="err"] { color: #b3261e; }