/* ==================================================================
   Flow — kwizzbit/flow (whole-file segment)
   Faithful slice of /HTML/flow.html. Globals (reset/body/font-face/:root)
   dropped; tokens canonical (theme.json). Full-bleed via the .kwb-segment wrapper.
   ================================================================== */

.modes {
  background: var(--wp--preset--color--cream);
  /* STYLEGUIDE: section padding for .how-it-works: padding-top 4rem — reusing
     as nearest named peer. Actual design: 80px top, 100px bottom desktop. */
  padding-block: 7rem 9rem;
  overflow: hidden;
}

/* ─── HEADER BLOCK ───────────────────────────────────────────────── */
.modes__header {
  text-align: center;
  margin-bottom: 4.6875rem; /* ~75px */
}

.modes__eyebrow {
  font-family: 'Pixelar', monospace;
  font-size: var(--wp--preset--font-size--h-8-eyebrow); /* 19px */
  font-weight: 400;
  color: var(--wp--preset--color--coral);
  letter-spacing: 0.06em;
  line-height: 1;
  margin-bottom: 0.5rem; /* 8px */
  text-transform: uppercase;
}

.modes__headline {
  font-family: var(--wp--preset--font-family--display);
  /* Using h2-sketch 4.5rem per design — matches other section H2s.
     Pending confirmation same as all other section headings. */
  font-size: 6.25rem; /* 100px */
  font-weight: 400;
  line-height: 0.889;
  letter-spacing: -0.10764em;
  color: var(--wp--preset--color--ink);
  margin-bottom: var(--wp--preset--spacing--50);
}

/* Coral arrows and dot */
.modes__headline .modes__arrow {
  color: var(--wp--preset--color--coral);
  font-style: normal;
}
.modes__headline .modes__dot {
  color: var(--wp--preset--color--coral);
}

/* Typewriter cursor */
.modes__cursor {
  display: inline-block;
  color: var(--wp--preset--color--coral);
  animation: modescursor 0.7s step-end infinite;
  font-style: normal;
}
@keyframes modescursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.modes__lead {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--md); /* 17px */
  font-weight: 500;
  line-height: 1.412;
  color: #473531;
  max-width: 26.5625rem; /* 425px */
  margin-inline: auto;
}

/* ─── DASHED CONNECTOR ───────────────────────────────────────────── */
.modes__connector {
  display: none; /* revealed on tablet + desktop */
  width: 100%;
  max-width: 1188px;
  margin-inline: auto;
  overflow: visible;
  margin-block: 0;
}
.modes__connector-svg {
  width: 100%;
  height: 72px;
  overflow: visible;
}
.modes__connector-svg line {
  stroke: var(--dash-clr);
  stroke-width: 2;
  stroke-dasharray: 6 3.5;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
  opacity: 0.6;
  animation: modes-color 5s linear infinite;
}
@property --dash-clr {
  syntax: '<color>';
  inherits: true;
  initial-value: #FD4631;
}
@keyframes modes-color {
  0%, 60%   { --dash-clr: #FD4631; }
  75%        { --dash-clr: #FFCB2B; }
  90%, 100% { --dash-clr: #FD4631; }
}

/* Mobile vertical separator between stacked cards */
.modes__mobile-sep {
  display: none;
  width: 2px;
  height: 28px;
  margin: 0 auto;
  background: repeating-linear-gradient(
    to bottom,
    var(--dash-clr) 0px, var(--dash-clr) 6px,
    transparent 6px, transparent 11px
  );
  background-size: 100% 11px;
  opacity: 0.6;
  animation: modes-color 5s linear infinite;
}

/* ─── CARD GRID ──────────────────────────────────────────────────── */
.modes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 30px;
  max-width: 1188px; /* 3 × 376px + 2 × 30px */
  width: 100%;
  margin-inline: auto;
  margin-bottom: 0;
}

/* ─── CARD ───────────────────────────────────────────────────────── */
.modes__card {
  background: #FFFAF5;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 376px;
  box-shadow: 0 28px 60px 0 rgba(255, 54, 35, 0.15);
  transition: transform var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
}
.modes__card:hover {
  transform: translateY(-2px);
}
.modes__card:hover .modes__card-photo img {
  transform: scale(1.025);
}

.modes__card-body {
  padding: 3rem 1.5rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
}

.modes__card-label {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.625rem; /* 26px */
  font-weight: 400; /* Roobert Semimono Medium */
  background: linear-gradient(to right, #FF3623 0%, #FF8C5A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.0908em; /* -2.36px at 26px */
  line-height: 1;
}

.modes__card-label sup {
  font-size: 0.6em;
  vertical-align: super;
  letter-spacing: 0;
}

.modes__card-title {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.125rem; /* 18px */
  font-weight: 600; /* Roobert Semimono Semibold */
  line-height: 1.2; /* 24px at 20px */
  letter-spacing: -0.091em; /* -1.82px at 20px */
  color: var(--wp--preset--color--ink);
}

.modes__card-desc {
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.9375rem; /* 15px */
  font-weight: 500;
  line-height: 1.5;
  color: var(--wp--preset--color--ink-soft);
  opacity: 0.75;
  flex: 1;
  max-width: 298px;
}

.modes__card-feature {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.9375rem; /* 15px */
  font-weight: 700;
  color: var(--wp--preset--color--ink);
  margin-top: auto;
  padding-top: var(--wp--preset--spacing--30);
}

.modes__card-tick {
  flex-shrink: 0;
  display: inline-flex;
  /* Hidden until the card lifts into view, then pops in (see .is-visible rule).
     Keyed off the card's own reveal so it's all-at-once on desktop (cards reveal
     together) and one-at-a-time on mobile/tablet (cards reveal on scroll). */
  transform: scale(0);
  opacity: 0;
  transform-origin: center;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),  /* springy pop */
              opacity 0.25s ease;
}
.modes__card.is-visible .modes__card-tick {
  transform: scale(1);
  opacity: 1;
  transition-delay: 0.5s;   /* a beat after the tile has lifted */
}
.modes__card-tick svg {
  width: 20px;
  height: 20px;
}

/* ─── CARD PHOTO ─────────────────────────────────────────────────── */
.modes__card-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.modes__card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
  /* Pixelated treatment matching the design */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}

/* ─── CREATION ROW ───────────────────────────────────────────────── */
.modes__creation {
  display: grid;
  place-items: center;
  width: 100%;
  margin-bottom: 0.5rem;
}

.modes__creation-panel {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: 420px;
  width: 100%;
  position: relative;
}

.modes__creation-panel--ai {
  animation: modes-fade-ai 9s ease-in-out infinite;
}
.modes__creation-panel--manual {
  animation: modes-fade-manual 9s ease-in-out infinite;
}

@keyframes modes-fade-ai {
  0%, 38%  { opacity: 1; }
  44%, 94% { opacity: 0; }
  100%     { opacity: 1; }
}
@keyframes modes-fade-manual {
  0%, 38%  { opacity: 0; }
  44%, 94% { opacity: 1; }
  100%     { opacity: 0; }
}

.modes__creation-label {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.5rem, 3vw, 2.375rem); /* ~38px design */
  font-weight: 400;
  letter-spacing: -0.091em;
  line-height: 1;
  color: #1D0B09;
  text-align: center;
}

.modes__creation-label--muted {
  opacity: 1;
}

/* ─── CREATION MOCK UI ───────────────────────────────────────────── */
.modes__creation-mock {
  position: relative;
  width: 100%;
  max-width: 376px;
}

/* AI mock — prompt input */
.modes__mock-ai {
  background: var(--wp--preset--color--white);
  border-radius: var(--wp--custom--radius--md);
  box-shadow: 0 4px 24px rgba(29,11,9,0.10);
  overflow: hidden;
}

.modes__mock-ai-bar {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(29,11,9,0.06);
}

.modes__mock-ai-icon {
  width: 16px;
  height: 16px;
  opacity: 0.3;
}

.modes__mock-ai-text {
  flex: 1;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 500;
  color: var(--wp--preset--color--ink);
  opacity: 0.8;
}

.modes__mock-ai-send {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--wp--preset--color--coral);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.modes__mock-ai-send svg {
  width: 12px;
  height: 12px;
}

.modes__mock-ai-options {
  padding: 0.5rem 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.modes__mock-ai-opt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  color: var(--wp--preset--color--ink);
  opacity: 0.55;
  padding-block: 0.2rem;
}
.modes__mock-ai-opt svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.6;
}

.modes__mock-screenshot {
  width: 100%;
  max-width: 325px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Pixel hand floating on AI panel */
.modes__pixel-hand {
  position: absolute;
  width: 130px;
  height: 130px;
  object-fit: contain;
  pointer-events: none;
  bottom: -40px;
  right: 25px;
  transform: translate(0%, 20%);
  animation: pixel-hand-float 3s ease-in-out infinite;
  image-rendering: pixelated;
  z-index: 2;
}

@keyframes pixel-hand-float {
  0%, 100% { transform: translate(0, 0) rotate(-5deg); }
  50%       { transform: translate(-4px, -6px) rotate(2deg); }
}

/* Manual mock — question input */
.modes__mock-manual {
  background: var(--wp--preset--color--white);
  border-radius: var(--wp--custom--radius--md);
  box-shadow: 0 4px 24px rgba(29,11,9,0.10);
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.modes__mock-manual-answer {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  background: var(--wp--preset--color--cream-soft);
  border-radius: var(--wp--custom--radius--sm);
}
.modes__mock-manual-check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--wp--preset--color--coral);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.modes__mock-manual-check svg {
  width: 8px;
  height: 8px;
}
.modes__mock-manual-q {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  color: var(--wp--preset--color--ink);
  opacity: 0.8;
  flex: 1;
}
.modes__mock-manual-cursor {
  display: inline-block;
  width: 2px;
  height: 0.9em;
  background: var(--wp--preset--color--ink);
  animation: cursor-blink 1s step-end infinite;
  vertical-align: text-bottom;
  margin-left: 1px;
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Pixel pencil floating on manual panel */
.modes__pixel-pencil {
  position: absolute;
  width: 122px;
  height: 122px;
  object-fit: contain;
  pointer-events: none;
  bottom: 20px;
  right: 10px;
  transform: translate(10%, -10%);
  animation: pixel-pencil-float 3.5s ease-in-out infinite;
  animation-delay: 0.6s;
  image-rendering: pixelated;
  z-index: 2;
}
@keyframes pixel-pencil-float {
  0%, 100% { transform: translate(0, 0) rotate(5deg); }
  50%       { transform: translate(3px, -5px) rotate(-2deg); }
}

/* ─── CTA ────────────────────────────────────────────────────────── */
.modes__cta {
  text-align: center;
  margin-top: 3rem;
}

/* ─── SCROLL REVEAL ──────────────────────────────────────────────── */
.modes__reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--wp--custom--motion--ease-out),
              transform 0.6s var(--wp--custom--motion--ease-out);
}
.modes__reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.modes__reveal--delay-1 { transition-delay: 0.1s; }
.modes__reveal--delay-2 { transition-delay: 0.2s; }
.modes__reveal--delay-3 { transition-delay: 0.3s; }
.modes__reveal--delay-4 { transition-delay: 0.4s; }

/* ─── REDUCED MOTION ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .modes__reveal { opacity: 1; transform: none; transition: none; }
  .modes__card-tick { opacity: 1; transform: none; transition: none; }
  .modes__pixel-hand, .modes__pixel-pencil { animation: none; }
  .modes__mock-manual-cursor { animation: none; opacity: 1; }
}

/* ═══ TABLET ≤1023px ═════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .modes {
    padding-block: 4rem 5rem;
  }
  .modes__grid {
    gap: 0 20px;
  }
  .modes__connector { display: block; }
  .modes__card-title   { font-size: 0.9375rem; } /* 15px on tablet */
  .modes__card-desc    { font-size: 0.8125rem; } /* 13px on tablet */
  .modes__card-feature { font-size: 0.8125rem; } /* 13px on tablet */
  .modes__creation-label {
    font-size: clamp(1.25rem, 3.5vw, 1.75rem);
  }
}

/* ═══ DESKTOP ≥1024px: show connector ════════════════════════════════ */
@media (min-width: 1024px) {
  .modes__connector { display: block; }
}

/* ═══ MOBILE ≤640px ══════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .modes {
    padding-block: 6.75rem 7.75rem;
  }
  .modes__connector { display: none !important; }
  .modes__mobile-sep { display: block; }

  /* Header */
  .modes__eyebrow {
    font-size: 18px;
  }
  .modes__headline {
    font-size: clamp(3.5rem, 19vw, 5.25rem);
    line-height: 0.89;
    letter-spacing: -0.10763em;
    margin-bottom: var(--wp--preset--spacing--40);
  }
  .modes__lead {
    font-size: 1rem; /* 16px — matches hero lead */
    max-width: 254px;
    margin-inline: auto;
  }
  .modes__header {
    margin-bottom: 3.5rem;
  }

  /* Grid → single column stacked, centred */
  .modes__grid {
    grid-template-columns: 1fr;
    gap: 1rem 0;
    justify-items: center;
  }
  .modes__card {
    width: 100%;
    max-width: 420px;
  }
  .modes__card-photo {
    aspect-ratio: 4 / 3;
  }
  .modes__card-title   { font-size: 1.0625rem; } /* 17px */
  .modes__card-desc    { font-size: 0.875rem; }  /* 14px */
  .modes__card-feature { font-size: 0.875rem; }  /* 14px */

  /* Creation → centred single column */
  .modes__creation {
    margin-bottom: 2rem;
  }
  .modes__creation-panel {
    gap: 1rem;
    max-width: 320px;
  }
  .modes__creation-label {
    font-size: clamp(1.8rem, 8.4vw, 2.4rem);
  }
  .modes__creation-mock {
    max-width: 90%;
    margin-inline: auto;
  }
  .modes__pixel-hand,
  .modes__pixel-pencil {
    width: 104px;
    height: 104px;
  }
  /* Pointing finger: 30px right, 3px down */
  .modes__pixel-hand {
    right: 5px;    /* 35px − 30px */
    bottom: -18px; /* -15px − 3px */
  }
  /* Pencil: 30px right, 3px down */
  .modes__pixel-pencil {
    right: -20px;  /* 10px − 30px */
    bottom: 17px;  /* 20px − 3px */
  }
}