:root {
  --bg: #f7f6d7;      /* Ivory */
  --ink: #000000;     /* bio paragraph text */
  --plum: #6e1e3b;    /* Dried Plum — wordmark / top text */
  --green: #c9db63;   /* Lime Green — hover-circle stroke, chat accent */
  --border: rgba(110, 30, 59, 0.18);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  font-family: "Open Sans", system-ui, sans-serif;
  color: var(--ink);
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-width: 1000px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 0;
}

/* --- nav --- */
.nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3.6rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.6rem;
  flex-wrap: wrap;
}

.wordmark {
  text-decoration: none;
  font-family: "Anton", sans-serif;
  font-size: clamp(1.8rem, 4.5vw, 2.4rem);
  letter-spacing: 0.16em;
  color: var(--plum);
}

.nav-item {
  -webkit-tap-highlight-color: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.6rem;
}

.nav-circle-img {
  position: absolute;
  inset: -10px -14px;
  width: calc(100% + 28px);
  height: calc(100% + 20px);
  pointer-events: none;
  opacity: 0;
  -webkit-mask-image: conic-gradient(from -90deg, #000 0deg, transparent 0deg);
  mask-image: conic-gradient(from -90deg, #000 0deg, transparent 0deg);
}

@media (hover: hover) {
  .nav-item:hover .nav-circle-img {
    opacity: 1;
    animation: draw-nav-circle 0.6s linear forwards;
  }
}

/* Touch tap feedback: same draw-on animation while the finger is down */
.nav-item:active .nav-circle-img {
  opacity: 1;
  animation: draw-nav-circle 0.6s linear forwards;
}

/* mask-image can't be smoothly interpolated between two different
   conic-gradient values, so each stop is explicit and snaps instantly
   (steps(1, jump-end)) rather than trying to blend — 20 stops close
   enough together to read as a sweeping reveal, not a jump-cut. */
@keyframes draw-nav-circle {
  0%   { -webkit-mask-image: conic-gradient(from -90deg, #000 0deg,   transparent 0deg);   mask-image: conic-gradient(from -90deg, #000 0deg,   transparent 0deg);   animation-timing-function: steps(1, jump-end); }
  5%   { -webkit-mask-image: conic-gradient(from -90deg, #000 18deg,  transparent 0deg);   mask-image: conic-gradient(from -90deg, #000 18deg,  transparent 0deg);   animation-timing-function: steps(1, jump-end); }
  10%  { -webkit-mask-image: conic-gradient(from -90deg, #000 36deg,  transparent 0deg);   mask-image: conic-gradient(from -90deg, #000 36deg,  transparent 0deg);   animation-timing-function: steps(1, jump-end); }
  15%  { -webkit-mask-image: conic-gradient(from -90deg, #000 54deg,  transparent 0deg);   mask-image: conic-gradient(from -90deg, #000 54deg,  transparent 0deg);   animation-timing-function: steps(1, jump-end); }
  20%  { -webkit-mask-image: conic-gradient(from -90deg, #000 72deg,  transparent 0deg);   mask-image: conic-gradient(from -90deg, #000 72deg,  transparent 0deg);   animation-timing-function: steps(1, jump-end); }
  25%  { -webkit-mask-image: conic-gradient(from -90deg, #000 90deg,  transparent 0deg);   mask-image: conic-gradient(from -90deg, #000 90deg,  transparent 0deg);   animation-timing-function: steps(1, jump-end); }
  30%  { -webkit-mask-image: conic-gradient(from -90deg, #000 108deg, transparent 0deg);   mask-image: conic-gradient(from -90deg, #000 108deg, transparent 0deg);   animation-timing-function: steps(1, jump-end); }
  35%  { -webkit-mask-image: conic-gradient(from -90deg, #000 126deg, transparent 0deg);   mask-image: conic-gradient(from -90deg, #000 126deg, transparent 0deg);   animation-timing-function: steps(1, jump-end); }
  40%  { -webkit-mask-image: conic-gradient(from -90deg, #000 144deg, transparent 0deg);   mask-image: conic-gradient(from -90deg, #000 144deg, transparent 0deg);   animation-timing-function: steps(1, jump-end); }
  45%  { -webkit-mask-image: conic-gradient(from -90deg, #000 162deg, transparent 0deg);   mask-image: conic-gradient(from -90deg, #000 162deg, transparent 0deg);   animation-timing-function: steps(1, jump-end); }
  50%  { -webkit-mask-image: conic-gradient(from -90deg, #000 180deg, transparent 0deg);   mask-image: conic-gradient(from -90deg, #000 180deg, transparent 0deg);   animation-timing-function: steps(1, jump-end); }
  55%  { -webkit-mask-image: conic-gradient(from -90deg, #000 198deg, transparent 0deg);   mask-image: conic-gradient(from -90deg, #000 198deg, transparent 0deg);   animation-timing-function: steps(1, jump-end); }
  60%  { -webkit-mask-image: conic-gradient(from -90deg, #000 216deg, transparent 0deg);   mask-image: conic-gradient(from -90deg, #000 216deg, transparent 0deg);   animation-timing-function: steps(1, jump-end); }
  65%  { -webkit-mask-image: conic-gradient(from -90deg, #000 234deg, transparent 0deg);   mask-image: conic-gradient(from -90deg, #000 234deg, transparent 0deg);   animation-timing-function: steps(1, jump-end); }
  70%  { -webkit-mask-image: conic-gradient(from -90deg, #000 252deg, transparent 0deg);   mask-image: conic-gradient(from -90deg, #000 252deg, transparent 0deg);   animation-timing-function: steps(1, jump-end); }
  75%  { -webkit-mask-image: conic-gradient(from -90deg, #000 270deg, transparent 0deg);   mask-image: conic-gradient(from -90deg, #000 270deg, transparent 0deg);   animation-timing-function: steps(1, jump-end); }
  80%  { -webkit-mask-image: conic-gradient(from -90deg, #000 288deg, transparent 0deg);   mask-image: conic-gradient(from -90deg, #000 288deg, transparent 0deg);   animation-timing-function: steps(1, jump-end); }
  85%  { -webkit-mask-image: conic-gradient(from -90deg, #000 306deg, transparent 0deg);   mask-image: conic-gradient(from -90deg, #000 306deg, transparent 0deg);   animation-timing-function: steps(1, jump-end); }
  90%  { -webkit-mask-image: conic-gradient(from -90deg, #000 324deg, transparent 0deg);   mask-image: conic-gradient(from -90deg, #000 324deg, transparent 0deg);   animation-timing-function: steps(1, jump-end); }
  95%  { -webkit-mask-image: conic-gradient(from -90deg, #000 342deg, transparent 0deg);   mask-image: conic-gradient(from -90deg, #000 342deg, transparent 0deg);   animation-timing-function: steps(1, jump-end); }
  100% { -webkit-mask-image: conic-gradient(from -90deg, #000 360deg, transparent 0deg);   mask-image: conic-gradient(from -90deg, #000 360deg, transparent 0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-circle-img { animation: none !important; opacity: 0; }
  .nav-item:active .nav-circle-img {
    opacity: 1;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) {
  .nav-item:hover .nav-circle-img {
    opacity: 1;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Each label's crop has a different aspect ratio (עליי's swirl runs much
   taller relative to its width than the others), so a forced-equal height
   makes the written text render at different sizes — one shared scale
   factor on each image's own natural width keeps it visually consistent. */
.nav-label {
  display: block;
  height: auto;
  transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Tap/click thump: press-in, springy release bounce */
.nav-item:active .nav-label {
  transform: scale(0.86);
  transition-duration: 0.16s;
}

.wordmark {
  display: inline-block;
  transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wordmark:active {
  transform: scale(0.9);
  transition-duration: 0.16s;
}

.nav-label--tik {
  width: 115px;
}

.nav-label--sherutim {
  width: 73px;
}

.nav-label--alay {
  width: 35px;
}

/* --- hero --- */
.about-view {
  flex: 1;
  display: flex;
  justify-content: center;
  transition: opacity 0.4s ease;
}

.hero {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  margin: auto 0;
  padding: 2rem 0;
}

.photo-frame {
  width: 300px;
  flex-shrink: 0;
  transform: rotate(-4deg);
  transition: filter 0.35s ease;
}

@media (hover: hover) {
  .photo-frame { cursor: grab; }
  .photo-frame:active { cursor: grabbing; }
  .photo-frame:hover {
    filter: drop-shadow(0 18px 22px rgba(110, 30, 59, 0.2));
  }
}

.photo {
  display: block;
  width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

.hero-text {
  flex: 1;
  min-width: 0;
}

.headline {
  display: block;
  height: 76px;
  width: auto;
  margin-bottom: 1.5rem;
}

.bio {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.85;
  max-width: 28em;
}

.bio strong {
  font-weight: 700;
}

@media (max-width: 720px) {
  .nav {
    flex-wrap: nowrap;
    gap: 0.95rem;
    /* Links flush to the left edge, wordmark flush right */
    justify-content: space-between;
  }

  .nav-links {
    flex-wrap: nowrap;
    gap: 0.45rem;
  }

  .wordmark {
    font-size: 1.4rem;
  }

  .nav-item {
    padding: 0.15rem 0.2rem;
  }

  /* Scale each label's width down by the same factor, keeping height:auto
     from the base rule — overriding height alone (as before) stretched
     them, since the width stayed fixed at the desktop size. */
  .nav-label--tik {
    width: 70px;
  }

  .nav-label--sherutim {
    width: 45px;
  }

  .nav-label--alay {
    width: 22px;
  }

  .bio {
    font-size: 0.85rem;
  }

  .hero {
    flex-direction: column;
    gap: 1.25rem;
    margin: 0 0 auto;
    padding-top: 0.25rem;
  }

  .headline {
    height: 42px;
  }

  .photo-frame {
    width: 170px;
  }
}

/* --- composer: sits below the bio, becomes a fixed bottom bar once the
   chat takes over the screen --- */
.composer {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  max-width: 480px;
  margin: 0 auto 1.5rem;
  padding: 0.4rem 0.45rem 0.4rem 0.6rem;
  background: #faf9e5; /* slightly lighter tint of the page bg */
  background: color-mix(in srgb, var(--bg) 65%, #fff 35%);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 10px 32px rgba(110, 30, 59, 0.16), 0 2px 8px rgba(110, 30, 59, 0.08);
  transition: opacity 0.4s ease;
}

.composer:focus-within {
  box-shadow: 0 0 0 2px var(--green), 0 10px 32px rgba(110, 30, 59, 0.16), 0 2px 8px rgba(110, 30, 59, 0.08);
}

.input-wrap {
  position: relative;
  flex: 1;
  display: flex;
}

.placeholder-rotator {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.2rem 0.45rem 0.2rem 0.2rem;
  font-size: 0.9rem;
  color: #8a8a8a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.placeholder-rotator.faded {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .placeholder-rotator { transition: none; }
}

#askInput {
  flex: 1;
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.2rem 0.45rem 0.2rem 0.2rem;
  border: none;
  background: transparent;
  resize: none;
  max-height: 5em;
  direction: rtl;
  text-align: right;
  color: var(--ink);
}

#askInput:focus {
  outline: none;
}

/* Icon-only "sign" button, no filled pill */
#askSubmit {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--plum);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

/* hidden until the field has text; pops in with a spring once typing starts */
.composer:not(.has-text) #askSubmit {
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
}

#askSubmit:hover:not(:disabled) {
  background: rgba(110, 30, 59, 0.08);
}

#askSubmit:active:not(:disabled) {
  transform: scale(0.92);
}

#askSubmit:disabled {
  opacity: 0.3;
  cursor: default;
}

@media (max-width: 480px) {
  .composer {
    max-width: 84%;
  }
}

/* --- chat takeover: the about content fades away, the composer becomes a
   fixed bottom bar, and the chat log fills the screen above it --- */
.chat-log {
  display: none;
  flex-direction: column;
  gap: 0.75rem;
}

.page.started .about-view {
  opacity: 0;
  pointer-events: none;
}

.page.started .nav {
  display: none;
}

.page.started .composer {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  margin: 0;
  z-index: 2;
}

.page.started .chat-log {
  display: flex;
  position: fixed;
  left: 50%;
  top: 0;
  bottom: 5.5rem;
  width: 100%;
  max-width: 700px;
  transform: translateX(-50%);
  padding: 1.5rem;
  overflow-y: auto;
  z-index: 1;
}

.msg {
  max-width: 80%;
  padding: 0.7rem 1rem;
  border-radius: 16px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.msg.user {
  align-self: flex-start;
  background: #eaf2c9; /* pale Lime Green tint */
  border-bottom-right-radius: 4px;
}

.msg.assistant {
  align-self: flex-end;
  background: #ffffff;
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}

.msg.pending {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.85rem 1.1rem;
}

.typing-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.5;
  animation: typing-bounce 1.2s ease-in-out infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-3px); opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .typing-dot { animation: none; }
}

.msg.error {
  align-self: flex-end;
  background: #ffffff;
  border: 1px solid #e0a99f;
  color: #a33;
}

/* --- portfolio --- */
a.nav-item {
  text-decoration: none;
  cursor: pointer;
}

.portfolio-view {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0 3rem;
}

.polaroids {
  direction: ltr; /* physical order: jewelry left, analytics center, cooking right */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2rem;
  width: 100%;
}

/* The three PNGs are normalized to one canvas size, so one width rule
   renders all three cards at identical dimensions. */
.polaroid {
  width: clamp(340px, 30vw, 450px);
  height: auto;
  transform: translateX(var(--shift-x, 0px));
  filter: drop-shadow(0 10px 14px rgba(110, 30, 59, 0.14));
  transition: transform 0.35s ease, filter 0.35s ease;
}

/* Center card sits lower, matching the composition mockup */
.polaroid--ugc {
  margin-top: 7rem;
}

@media (hover: hover) {
  .polaroid:hover {
    transform: translateY(-10px) rotate(-1.6deg);
    filter: drop-shadow(0 18px 22px rgba(110, 30, 59, 0.2));
  }

  .polaroid--ugc:hover {
    transform: translateY(-10px) rotate(1.4deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .polaroid { transition: none; }
  .polaroid:hover { transform: none; }
}

@media (max-width: 720px) {
  .portfolio-view {
    align-items: flex-start;
    padding-top: 1rem;
  }

  .polaroids {
    flex-direction: column;
    align-items: center;
    gap: 2.25rem;
  }

  .polaroid {
    width: min(300px, 76vw);
  }

  .polaroid--ugc {
    margin-top: 0;
  }

  /* The tape overhang is baked into the image canvas, so centering the
     canvas leaves the card itself off-center. Shift each card left by its
     measured canvas-center offset (percentages scale with display size). */
  .polaroid--social { --shift-x: -4.3%; }
  .polaroid--ugc    { --shift-x: -6.2%; }
  .polaroid--ai     { --shift-x: -4.5%; }
}

/* --- entrance animations (page load) --- */
@keyframes enter-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes enter-photo {
  from { opacity: 0; transform: translateY(14px) rotate(0deg); }
  to   { opacity: 1; transform: translateY(0) rotate(-4deg); }
}

@keyframes enter-polaroid {
  from { opacity: 0; transform: translate(var(--shift-x, 0px), 34px) rotate(-3deg); }
  to   { opacity: 1; transform: translate(var(--shift-x, 0px), 0) rotate(0deg); }
}

@media (prefers-reduced-motion: no-preference) {
  .wordmark,
  .nav-links .nav-item,
  .headline,
  .bio,
  .composer {
    animation: enter-rise 0.55s cubic-bezier(0.22, 0.8, 0.36, 1) backwards;
  }

  .photo-frame {
    animation: enter-photo 0.75s cubic-bezier(0.22, 0.8, 0.36, 1) backwards;
    animation-delay: 0.36s;
  }

  .nav-links .nav-item:nth-child(1) { animation-delay: 0.08s; }
  .nav-links .nav-item:nth-child(2) { animation-delay: 0.16s; }
  .nav-links .nav-item:nth-child(3) { animation-delay: 0.24s; }

  .headline    { animation-delay: 0.15s; }
  .bio         { animation-delay: 0.28s; }
  .composer    { animation-delay: 0.5s; }

  .polaroid {
    animation: enter-polaroid 1.05s cubic-bezier(0.22, 0.8, 0.36, 1) backwards;
  }
  .polaroid--social { animation-delay: 0.15s; }
  .polaroid--ugc    { animation-delay: 0.38s; }
  .polaroid--ai     { animation-delay: 0.61s; }
}