/* Round 6: shared on top of v4.css. Blush colours, the About card, the cursor objects and the walking characters. */

/* ---------- Blush palette (from 16-blush) ---------- */
:root {
  --font-head: "Instrument Serif", Georgia, serif;
  --head-weight: 400;
  --head-scale: 1.25;
  --head-tracking: 0;

  --bg: #FBF8F3;
  --surface: #FFF7EE;
  --ink: #262A22;
  --text: #575C51;
  --soft: #9C9F95;
  --line: #EFE6D8;
  --kicker: #A6566B;
  --accent: #4E6B48;
  --accent-ink: #FFFFFF;
  --glow: #E3A3B0;
  --band: #FBF8F3;

  --status-bg: rgba(251, 248, 243, 0.88);
  --hero-bg: #FFF9F0;
  --track: linear-gradient(180deg, #F3E8D4, #FBF3E6);
  --knob-bottom: #F5EBDA;

  --me-bg: #4E6B48;
  --me-ink: #FFFFFF;

  --dock-top: rgba(255, 252, 247, 0.88);
  --dock-bottom: rgba(251, 237, 240, 0.88);
  --ic1-top: #7E9A74; --ic1-bottom: #4E6B48; --ic1-ink: #FFFFFF;
  --ic2-top: #F7C4AA; --ic2-bottom: #F2A17A; --ic2-ink: #FFFFFF;
  --ic3-top: #F8DCE2; --ic3-bottom: #E8AEBB; --ic3-ink: #FFFFFF;
  --ic4-top: #B3C6A6; --ic4-bottom: #8DA67E; --ic4-ink: #FFFFFF;
  --ic5-top: #FFFFFF; --ic5-bottom: #F4ECE4; --ic5-ink: #4E6B48;

  --chip-bg: #DCE8D2;
  --chip-ink: #3B5536;
  --chip2-bg: #FBEDF0;
  --chip2-ink: #A6566B;

  --card-1: #C3D4B4;
  --card-2: #FCE3D6;
}

/* ---------- Hero: the object at the cursor ---------- */
.wand-obj {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.wand-obj.is-on { opacity: 1; }
.wand-obj svg {
  position: absolute;
  overflow: visible;
}
@media (hover: hover) and (pointer: fine) {
  .intro-zoom { cursor: none; }
}

/* ---------- Map: walking ---------- */
.walk-map { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.walker { pointer-events: none; }
.walker-label { transition: opacity 0.4s ease; }
.walker.has-walked .walker-label { opacity: 0; }

.w-bob { transform-box: fill-box; transform-origin: 50% 100%; }
.w-leg-l, .w-leg-r, .w-arm-l, .w-arm-r { transform-box: fill-box; transform-origin: 50% 0; }
.walker.is-walking .w-bob { animation: w-bob 0.42s ease-in-out infinite alternate; }
.walker.is-walking .w-leg-l { animation: w-swing 0.42s ease-in-out infinite alternate; }
.walker.is-walking .w-leg-r { animation: w-swing 0.42s ease-in-out infinite alternate-reverse; }
.walker.is-walking .w-arm-l { animation: w-swing-arm 0.42s ease-in-out infinite alternate-reverse; }
.walker.is-walking .w-arm-r { animation: w-swing-arm 0.42s ease-in-out infinite alternate; }
.walker:not(.is-walking) .w-idle { animation: w-idle 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.w-blink { animation: w-blink 4.2s infinite; transform-box: fill-box; transform-origin: 50% 50%; }

@keyframes w-bob { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes w-swing { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
@keyframes w-swing-arm { from { transform: rotate(-30deg); } to { transform: rotate(30deg); } }
@keyframes w-idle { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.97); } }
@keyframes w-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.1); } }

.walk-dot {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  opacity: 0;
  pointer-events: none;
}
.walk-dot.is-on { animation: walk-dot 0.7s ease-out; }
@keyframes walk-dot {
  from { opacity: 0.8; r: 4; }
  to { opacity: 0; r: 18; }
}

/* ---------- About: the embossed orchid card (from 16-blush) ---------- */
.about-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 40px);
  align-items: center;
  max-width: 760px;
  margin: 0 auto;
  overflow: hidden;
  padding: clamp(20px, 3.5vw, 32px);
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(40, 30, 25, 0.04), 0 18px 40px rgba(120, 90, 60, 0.1);
}
.about-orchid {
  position: absolute;
  top: -64px;
  right: -64px;
  width: 280px;
  height: 280px;
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.about-light {
  position: absolute;
  inset: 0;
  background: radial-gradient(200px circle at var(--mx, 85%) var(--my, 15%), rgba(255, 255, 255, 0.9), rgba(252, 227, 214, 0.25) 45%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.about-card:hover .about-orchid,
.about-card:hover .about-light { opacity: 1; }
.about-photo,
.about-text { position: relative; z-index: 1; margin: 0; }
.about-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 49% 30%;
  border-radius: 18px;
}
.about-name {
  margin: 0;
  font-family: var(--font-script);
  font-size: clamp(64px, 7vw, 84px);
  font-weight: 400;
  line-height: 0.9;
  color: var(--ink);
}
.about-line {
  max-width: 36ch;
  margin: 0 0 22px;
  font-size: 18px;
  line-height: 1.55;
}

/* Little map motions shared by the maps */
.ripple { animation: ripple 7s ease-in-out infinite alternate; }
.ripple-2 { animation-duration: 9s; animation-direction: alternate-reverse; }
@keyframes ripple {
  from { translate: -8px 0; opacity: 0.55; }
  to { translate: 8px 0; opacity: 0.95; }
}
.smoke { animation: smoke 4.5s ease-out infinite; }
.smoke-2 { animation-delay: 2.2s; }
@keyframes smoke {
  0% { translate: 0 6px; opacity: 0; }
  30% { opacity: 0.9; }
  100% { translate: 6px -22px; opacity: 0; }
}
.sway { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 5s ease-in-out infinite alternate; }
@keyframes sway { from { rotate: -3deg; } to { rotate: 3deg; } }

@media (max-width: 720px) {
  .about-card { grid-template-columns: 1fr; }
  .about-photo { width: min(100%, 220px); }
  .about-orchid { width: 220px; height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .walker .w-bob, .walker .w-leg-l, .walker .w-leg-r, .walker .w-arm-l, .walker .w-arm-r,
  .w-idle, .w-blink, .sway, .ripple, .smoke { animation: none !important; }
}

/* Home About section: a little less space above and below the card (was clamp(80px, 11vw, 128px)) */
.section.about { padding-top: clamp(56px, 8vw, 88px); padding-bottom: clamp(56px, 8vw, 88px); }

/* Hero: a little more space between "hi i'm" and "Jocelyn" (was margin-right: 0.15em) */
.hello .hi { margin-right: 1em; }

/* Home: "Scroll for more" a little higher, closer to the garden (was margin-top: 8px) */
.island-screen .scroll-cue { position: relative; z-index: 1; margin-top: -32px; }

/* Home About card: a tiny bit bigger (card 760 → 820px, photo 220 → 240px, name 84 → 90px, line 18 → 19px) */
.about-card { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); max-width: 820px; padding: clamp(22px, 3.8vw, 36px); }
.about-name { font-size: clamp(68px, 7.5vw, 90px); }
.about-line { font-size: 19px; }