/* ===========================================================
   The Otten Family — storybook forest homepage
   The whole scene lives in .stage, which keeps the
   illustration's 1280x760 aspect ratio so every sign and
   button stays glued to the artwork at any screen size.
   =========================================================== */

:root {
  --ink-carved: #4a2a12;          /* engraved shadow inside wood */
  --paint: #fff3da;               /* warm cream "paint" on signs */
  --paint-shadow: rgba(58, 32, 12, 0.55);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
}

.scene {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(0px, 2vw, 32px);
  /* sky-to-meadow wash so letterboxed edges melt into the art */
  background:
    radial-gradient(120% 90% at 50% 0%, #bfe3f2 0%, #a9d8ec 32%, #cfe6b6 68%, #b6d489 100%);
  overflow: hidden;
}

/* The fixed-aspect canvas. Sized to fit the viewport while
   never cropping the artwork, so sign overlays stay aligned. */
.stage {
  position: relative;
  aspect-ratio: 1280 / 760;
  width: min(100%, calc((100vh - 4vw) * (1280 / 760)));
  width: min(100%, calc((100svh - 4vw) * (1280 / 760)));
  container-type: size;
  border-radius: clamp(8px, 1.4cqw, 22px);
  overflow: hidden;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.5) inset,
    0 30px 60px -20px rgba(40, 50, 25, 0.55),
    0 8px 20px -10px rgba(40, 50, 25, 0.4);
}

.backdrop {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---- shared "painted on wood" lettering ---- */
.sign {
  position: absolute;
  margin: 0;
  text-align: center;
  color: var(--paint);
  font-weight: 400;
  line-height: 0.95;
  text-shadow:
    0 1px 0 rgba(255, 246, 224, 0.25),
    0 2px 2px var(--paint-shadow),
    0 1px 6px rgba(40, 22, 8, 0.35);
}

/* ---- title sign (baked into the artwork at the top) ---- */
.sign--title {
  top: 20.6%;
  left: 48.9%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: 23%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18em;
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 600;
  font-size: 3.4cqw;
  letter-spacing: 0.005em;
}

/* ---- the two interactive plank buttons ---- */
.sign--link {
  display: grid;
  place-items: center;
  font-family: "Knewave", system-ui, sans-serif;
  font-size: 2.85cqw;
  color: var(--paint);
  cursor: pointer;
  transition: transform 0.32s var(--ease-out-quint);
  will-change: transform;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* the plank image is the button face; the drop-shadow lives
   here (on a real <img>) so it traces the plank silhouette
   cleanly instead of boxing the element */
.sign__plank {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: filter 0.32s var(--ease-out-quint);
}

/* exact footprints, matching where each plank was cut from
   the artwork so it re-seats seamlessly over its baked twin */
.sign--home {
  left: 39.69%;
  top: 39.47%;
  width: 19.06%;
  height: 10.79%;
  transform: rotate(0.5deg);
}
.sign--mail {
  left: 40.94%;
  top: 51.58%;
  width: 18.91%;
  height: 11.58%;
  transform: rotate(-1deg);
}
.sign--link .sign__label {
  position: relative;
  z-index: 1;
  /* nudge text onto the upper board face of each plank */
  transform: translateY(-2%);
  pointer-events: none;
}

/* hover / focus: the plank pops forward and warms up.
   Scale dominates the lift so it always covers its baked
   original underneath — no double-edge peeks through. */
.sign--home:hover,
.sign--home:focus-visible {
  transform: rotate(0.5deg) scale(1.09) translateY(-3px);
}
.sign--mail:hover,
.sign--mail:focus-visible {
  transform: rotate(-1deg) scale(1.09) translateY(-3px);
}
.sign--link:hover .sign__plank,
.sign--link:focus-visible .sign__plank {
  filter:
    brightness(1.055)
    drop-shadow(0 9px 11px rgba(40, 24, 8, 0.42));
}
.sign--link:active { transition-duration: 0.08s; }
.sign--link:active .sign__plank { filter: brightness(0.95); }
.sign--home:active { transform: rotate(0.5deg) scale(1.03) translateY(0); }
.sign--mail:active { transform: rotate(-1deg) scale(1.03) translateY(0); }

.sign--link:focus-visible {
  outline: 3px solid #fff3da;
  outline-offset: 4px;
  border-radius: 6px;
}

/* gentle settle-in so the page doesn't just pop on load */
@keyframes plank-settle {
  from { opacity: 0; transform: translateY(-14px) rotate(var(--r, 0deg)); }
  to   { opacity: 1; }
}
.sign--home { animation: plank-settle 0.7s var(--ease-out-quint) 0.15s both; --r: 0.5deg; }
.sign--mail { animation: plank-settle 0.7s var(--ease-out-quint) 0.28s both; --r: -1deg; }

@keyframes title-fade { from { opacity: 0; } to { opacity: 1; } }
.sign--title { animation: title-fade 0.7s var(--ease-out-quint) 0.02s both; }

@media (prefers-reduced-motion: reduce) {
  .sign--link { transition: none; }
  .sign__plank { transition: filter 0.2s ease; }
  .sign--home:hover, .sign--home:focus-visible { transform: rotate(0.5deg); }
  .sign--mail:hover, .sign--mail:focus-visible { transform: rotate(-1deg); }
  .sign--link:hover .sign__plank,
  .sign--link:focus-visible .sign__plank {
    filter: brightness(1.08) drop-shadow(0 6px 8px rgba(40, 24, 8, 0.38));
  }
  .sign--home, .sign--mail, .sign--title { animation: none; }
}