/* =========================================================
   Fable layer (Phase B) - signature interactions and craft.
   F1 hero self-assembly, F2 frame auto-scroll + dimension
   annotations, F3 WhatsApp chat mockup.
   Every hidden state here is gated behind a JS-added class
   (fable-hero-armed / fable-anim / fable-scrollable), so the
   page stays fully static and readable without JS and under
   prefers-reduced-motion.
   ========================================================= */

/* ---------- F1: hero self-assembly ---------- */

/* Hidden-until-built state, only while the sequence is armed */
.fable-hero-armed [data-fable="hero-seq"] {
  opacity: 0;
  transform: translateY(16px);
}
.fable-hero-armed [data-fable="hero-seq"].is-built {
  opacity: 1;
  transform: none;
  transition: opacity .42s ease, transform .42s cubic-bezier(.2, .7, .3, 1);
}

/* The amber underline draws itself in as the headline builds */
.fable-hero-armed .hero__underline path {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
}
.fable-hero-armed .is-built .hero__underline path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .55s ease .2s;
}

/* Blueprint ghost boxes (created by fable.js, positioned inline) */
.fable-ghost {
  position: absolute;
  z-index: 3;
  border: 1px dashed var(--draft);
  border-radius: 6px;
  opacity: .85;
  pointer-events: none;
  animation: fable-ghost-in .32s ease backwards;
}
.fable-ghost::after {
  content: attr(data-label);
  position: absolute;
  top: -17px;
  inset-inline-start: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--draft);
  opacity: .8;
}
.fable-ghost.is-gone {
  opacity: 0;
  transition: opacity .3s ease;
}
/* Cyan draw line tracing the headline box just before it fills */
.fable-ghost--h1::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -1px;
  height: 1.5px;
  background: var(--draft);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: fable-trace .6s ease .25s forwards;
}

@keyframes fable-ghost-in {
  from { opacity: 0; transform: scale(.985); }
  to   { opacity: .85; transform: none; }
}
@keyframes fable-trace {
  to { transform: scaleX(1); }
}

/* ---------- F2: screenshot auto-scroll inside frames ---------- */

.fable-scrollable img {
  animation: fable-frame-scroll var(--fable-scroll-dur, 14s) linear infinite alternate;
  animation-play-state: paused;
  will-change: transform;
}
.composite.is-scrolling .fable-scrollable img {
  animation-play-state: running;
}
@keyframes fable-frame-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(var(--fable-scroll-dist, 0px)); }
}

/* ---------- F2: drafting dimension annotations ---------- */

.fable-dim {
  position: absolute;
  bottom: -24px;
  inset-inline-start: 14.5%;
  inset-inline-end: auto;
  width: 27%;
  max-width: none;
  pointer-events: none;
}
.composite--bot .fable-dim { inset-inline-start: 17%; width: 33%; }
.fable-dim::before {
  content: "";
  display: block;
  height: 8px;
  border-inline: 1px solid var(--draft);
  background: linear-gradient(var(--draft), var(--draft)) center / 100% 1px no-repeat;
  opacity: .7;
}
.fable-dim span {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--draft);
  margin-top: 3px;
  opacity: .85;
}
/* Reserve room for the dimension annotation below each composite on mobile */
@media (max-width: 767px) {
  .project .project__visual { margin-bottom: 44px; }
  /* On the narrow phone viewport the chat needs a bigger device to stay legible
     and show the whole conversation, so beds-fast gets a larger, taller phone here. */
  .composite--bot { aspect-ratio: 100 / 96; }
  .composite--bot .frame--browser { width: 62%; }
  .composite--bot .frame--phone { width: 44%; inset-inline-start: 16%; }
}

/* ---------- F3: WhatsApp chat mockup (beds-fast) ---------- */

.frame__screen--chat { display: block; }

.wa-chat {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #0B141A;
  background-image: radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 14px 14px;
  font-family: var(--font-body);
  text-align: start;
}
.wa-chat__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #202C33;
  flex: none;
}
.wa-chat__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--wa-green);
  color: #06301C;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex: none;
}
.wa-chat__meta { display: flex; flex-direction: column; line-height: 1.2; }
.wa-chat__name { color: #E9EDEF; font-size: .72rem; font-weight: 700; }
.wa-chat__status { color: #8696A0; font-size: .56rem; }

.wa-chat__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
  padding: 8px;
  overflow: hidden;
}
.wa-msg {
  max-width: 84%;
  padding: 4px 7px;
  border-radius: 8px;
  font-size: .58rem;
  line-height: 1.42;
  color: #E9EDEF;
}
/* Hebrew WhatsApp: incoming (bot) on the inline-start side, outgoing (user, green) mirrored */
.wa-msg--in {
  background: #202C33;
  align-self: flex-start;
  border-start-start-radius: 2px;
}
.wa-msg--out {
  background: #005C4B;
  align-self: flex-end;
  border-start-end-radius: 2px;
}
.wa-time {
  font-size: .48rem;
  color: #8696A0;
  margin-inline-start: 6px;
  white-space: nowrap;
}
.wa-ticks {
  font-size: .5rem;
  color: #53BDEB;
  margin-inline-start: 2px;
  letter-spacing: -.1em;
}

/* Bubble-by-bubble reveal - hidden state only when JS armed animations */
.fable-anim .wa-msg {
  opacity: 0;
  transform: translateY(8px) scale(.97);
}
.fable-anim .wa-msg.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .34s ease, transform .34s cubic-bezier(.2, .7, .3, 1);
}

/* ---------- HX: hero side exhibits (the thesis, acted out) ----------
   Phone = the idea arriving in WhatsApp; terminal = Claude Code building it.
   Wide desktop only; below 1280px they simply do not exist. Hidden animation
   states are gated behind .fable-hx-armed (JS + motion + wide screen), so
   no-JS and reduced-motion visitors get the finished static exhibits. */

.hx { display: none; }
.hx__label--wink { display: none; }

@media (min-width: 1280px) {
  .hx {
    display: block;
    position: absolute;
    z-index: 2;
    text-align: center;
  }
  /* Anchored to the top zone (logo + headline are narrow there), clear of the
     wide subtitle lines below. RTL: inline-start = visual right, inline-end = visual left.
     Step 1 (idea) on the right, step 2 (build) on the left - natural reading order. */
  .hx--idea {
    top: 110px;
    inset-inline-start: clamp(26px, 3.2vw, 90px);
    width: 182px;
  }
  .hx--build {
    top: 176px;
    inset-inline-end: clamp(22px, 3vw, 84px);
    width: 274px;
  }

  .hx__label {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    color: var(--amber);
    padding-bottom: 5px;
    border-bottom: 1.5px dashed var(--draft-dim);
    margin-bottom: 14px;
  }
  .hx__label--wink {
    display: block;
    width: fit-content;
    margin: 0 auto 8px;
  }
  .hero__wink { margin-top: 40px; }
  .hero__wink > span:last-child { display: block; }

  .hx__device {
    display: block;
    position: relative;
    animation: hx-float 6.5s ease-in-out infinite alternate;
  }
  .hx--idea .hx__device {
    rotate: -3.5deg;
    background: #060F18;
    border: 3px solid #0A2136;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .55);
  }
  .hx--build .hx__device { rotate: 2.5deg; animation-delay: -3.2s; }
  .hx__notch {
    position: absolute;
    top: 6px;
    inset-inline: 0;
    margin-inline: auto;
    width: 44px;
    height: 4px;
    border-radius: 4px;
    background: #0A2136;
    z-index: 2;
  }

  /* Hover: pause the float, straighten slightly, invite the click */
  .hx--idea:hover .hx__device {
    animation-play-state: paused;
    rotate: -1.5deg;
    box-shadow: 0 28px 56px rgba(0, 0, 0, .65), 0 0 0 2px rgba(37, 211, 102, .4);
    transition: rotate .3s ease, box-shadow .3s ease;
  }

  @keyframes hx-float {
    from { translate: 0 -7px; }
    to   { translate: 0 7px; }
  }

  /* --- Phone chat --- */
  .hxchat {
    display: flex;
    flex-direction: column;
    aspect-ratio: 390 / 720;
    background: #0B141A;
    background-image: radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 14px 14px;
    text-align: start;
    border-radius: 17px;
    overflow: hidden;
  }
  .hxchat__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 10px 8px;
    background: #202C33;
    flex: none;
  }
  .hxchat__avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--wa-green);
    color: #06301C;
    font-size: .72rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex: none;
  }
  .hxchat__meta { display: flex; flex-direction: column; line-height: 1.25; }
  .hxchat__name { color: #E9EDEF; font-size: .74rem; font-weight: 700; }
  .hxchat__status { color: #8696A0; font-size: .58rem; }
  .hxchat__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 8px;
    overflow: hidden;
  }
  .hx-msg {
    max-width: 88%;
    padding: 5px 8px;
    border-radius: 9px;
    font-size: .66rem;
    line-height: 1.45;
    color: #E9EDEF;
  }
  .hx-msg--in {
    background: #202C33;
    align-self: flex-start;
    border-start-start-radius: 2px;
  }
  .hx-msg--out {
    background: #005C4B;
    align-self: flex-end;
    border-start-end-radius: 2px;
  }
  .hx-time {
    font-size: .5rem;
    color: #8696A0;
    margin-inline-start: 6px;
    white-space: nowrap;
  }

  /* Typing indicator (JS shows it before each bubble) */
  .hx-typing {
    display: none;
    align-self: flex-start;
    background: #202C33;
    border-radius: 9px;
    border-start-start-radius: 2px;
    padding: 7px 10px;
  }
  .hx-typing.is-on { display: inline-flex; gap: 3px; }
  .hx-typing--out { align-self: flex-end; background: #005C4B; border-radius: 9px; border-start-end-radius: 2px; border-start-start-radius: 9px; }
  .hx-typing i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #8696A0;
    animation: hx-typing-dot 1s ease-in-out infinite;
  }
  .hx-typing i:nth-child(2) { animation-delay: .15s; }
  .hx-typing i:nth-child(3) { animation-delay: .3s; }
  @keyframes hx-typing-dot {
    0%, 60%, 100% { opacity: .35; translate: 0 0; }
    30% { opacity: 1; translate: 0 -3px; }
  }

  /* --- Terminal --- */
  .hxterm {
    display: block;
    background: #081C30;
    border: 1px solid var(--draft-dim);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .5);
    text-align: left;
  }
  .hxterm__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    background: #0A2136;
    border-bottom: 1px solid var(--draft-dim);
  }
  .hxterm__bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--draft-dim); }
  .hxterm__title {
    margin-inline-start: 8px;
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .06em;
    color: var(--draft);
  }
  .hxterm__body {
    display: block;
    padding: 14px 16px 16px;
    font-family: var(--font-mono);
    font-size: .68rem;
    line-height: 1.9;
    color: #9FBBD0;
  }
  .hx-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hx-line--think { color: var(--draft); }
  .hx-line--ok { color: var(--wa-green); }
  .hx-caret {
    display: inline-block;
    width: 8px;
    height: 13px;
    background: var(--draft);
    vertical-align: -2px;
    animation: hx-caret-blink 1.1s steps(1) infinite;
  }
  @keyframes hx-caret-blink {
    50% { opacity: 0; }
  }

  /* --- Hidden states, only while the sequence is armed (JS + motion + wide) --- */
  .fable-hx-armed .hx-msg {
    opacity: 0;
    transform: translateY(8px) scale(.96);
  }
  .fable-hx-armed .hx-msg.is-in {
    opacity: 1;
    transform: none;
    transition: opacity .32s ease, transform .32s cubic-bezier(.2, .7, .3, 1);
  }
  .fable-hx-armed .hx-line { visibility: hidden; }
  .fable-hx-armed .hx-line.is-in { visibility: visible; }
}

/* ---------- Process: the dashed line draws itself, nodes pop in ---------- */

/* Mobile: vertical line, draws top-to-bottom */
.fable-anim .process::before {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.2s ease .15s;
}
.fable-anim .process.is-drawn::before { transform: scaleY(1); }

.fable-anim .step__node {
  opacity: 0;
  transform: scale(.55);
  transition: opacity .4s ease, transform .45s cubic-bezier(.2, .7, .3, 1.15);
}
.fable-anim .process.is-drawn .step__node { opacity: 1; transform: none; }
.fable-anim .process.is-drawn .step:nth-child(1) .step__node { transition-delay: .15s; }
.fable-anim .process.is-drawn .step:nth-child(2) .step__node { transition-delay: .45s; }
.fable-anim .process.is-drawn .step:nth-child(3) .step__node { transition-delay: .75s; }
.fable-anim .process.is-drawn .step:nth-child(4) .step__node { transition-delay: 1.05s; }

/* Desktop: horizontal line, draws in reading direction (RTL: right-to-left) */
@media (min-width: 768px) {
  .fable-anim .process::before {
    transform: scaleX(0);
    transform-origin: 100% 50%;
  }
  .fable-anim .process.is-drawn::before { transform: scaleX(1); }
}

/* ---------- Services: drafting-selection hover ---------- */
@media (hover: hover) {
  .fable-anim .service-card:hover {
    outline: 1.5px dashed var(--draft);
    outline-offset: 6px;
  }
  .service-card__ico { transition: color .2s ease; }
  .fable-anim .service-card:hover .service-card__ico { color: var(--amber); }
}

/* ---------- Portfolio composites: gentle 3D tilt on hover ---------- */
@media (hover: hover) and (min-width: 768px) {
  .fable-anim .composite { transition: transform .45s ease; }
  .fable-anim .composite:hover {
    transform: perspective(1100px) rotateX(1.5deg) rotateY(-2.5deg);
  }
  .fable-anim .project--flip .composite:hover {
    transform: perspective(1100px) rotateX(1.5deg) rotateY(2.5deg);
  }
}

/* ---------- Reduced motion: force everything static ---------- */
@media (prefers-reduced-motion: reduce) {
  .fable-hero-armed [data-fable="hero-seq"],
  .fable-anim .wa-msg { opacity: 1; transform: none; }
  .fable-ghost { display: none; }
  .fable-scrollable img { animation: none; }
  .fable-hero-armed .hero__underline path { stroke-dasharray: none; stroke-dashoffset: 0; }
  .hx__device { animation: none; }
  .hx-caret { animation: none; }
  .hx-typing { display: none !important; }
}