/* ==========================================================================
   MY STORY
   Photo on the left, story on the right. Hovering the photo reveals the
   hand-drawn illustration in the same frame. Stacks on phones.
   ========================================================================== */

@property --reveal {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.story { --story-ratio: 4 / 5; }      /* shape of the photo frame (width / height) */

.story__title {
  margin-bottom: var(--space-7);
  font-size: var(--step-5);
  font-weight: 600;
  line-height: 1;
}

.story__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

/* ---------- Photo frame ---------- */
.story__frame {
  --x: 50%;                           /* where the reveal starts; the script sets these from the cursor */
  --y: 50%;
  position: relative;
  aspect-ratio: var(--story-ratio);
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--color-accent-soft);
  cursor: pointer;
}
.story__frame:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

.story__photo,
.story__drawing {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}
.story__drawing {
  --reveal: 0%;                       /* how much of the illustration is showing (animated) */
  clip-path: circle(var(--reveal) at var(--x) var(--y));
  transition: --reveal 800ms var(--ease-out);
}
.story__frame:focus-visible .story__drawing,
.story__frame.is-drawn .story__drawing { --reveal: 150%; }
@media (hover: hover) {
  .story__frame:hover .story__drawing { --reveal: 150%; }
}

/* Placeholders: they disappear once you swap in real images (see index.html) */
.story__ph {
  display: grid;
  place-items: center;
  padding: var(--space-5);
  text-align: center;
  font-size: var(--step--1);
  color: var(--color-muted);
}
.story__photo.story__ph { background: linear-gradient(160deg, #eedbd0, #dfae98); }
.story__drawing.story__ph { background: linear-gradient(160deg, var(--color-accent-soft), #b6cfc0); }

/* ---------- Story text ---------- */
.story__text { display: grid; gap: var(--space-5); }
.story__hello {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--track-display);
}
.story__role { font-size: var(--step-1); line-height: 1.4; }
.story__cta { justify-self: start; margin-top: var(--space-4); }

@media (max-width: 809px) {
  .story__grid { grid-template-columns: 1fr; }
  .story__frame { aspect-ratio: 1 / 1; }
}