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

    .feature-tour {
      background-color: var(--wp--preset--color--cream);
      padding-block: 9rem;
    }
    .feature-tour__rows { display: flex; flex-direction: column; }

    /* ROW */
    .feature-tour__row { padding-block: var(--wp--preset--spacing--70); }
    .feature-tour__row-inner {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      max-width: 1100px;
      margin-inline: auto;
      gap: 0;
    }
    .feature-tour__content {
      display: flex; flex-direction: column; align-items: center;
      text-align: center; position: relative; z-index: 2;
    }
    .feature-tour__media {
      display: flex; align-items: center; position: relative; z-index: 2;
    }

    .feature-tour__row--media-left .feature-tour__media   { order: 1; justify-content: flex-end; }
    .feature-tour__row--media-left .feature-tour__content { order: 2; }
    .feature-tour__row--media-right .feature-tour__content { order: 1; }
    .feature-tour__row--media-right .feature-tour__media   { order: 2; justify-content: flex-start; }

    /* TYPOGRAPHY */
    .feature-tour__eyebrow {
      font-family: "Pixelar", monospace;
      font-weight: 400;
      font-size: 19px;
      line-height: 1;
      letter-spacing: 0.06em;
      color: var(--wp--preset--color--coral);
      text-transform: uppercase;
      margin-bottom: 2px;
    }
    .feature-tour__title {
      font-family: var(--wp--preset--font-family--display);
      font-weight: 400;
      font-size: 2.8125rem;
      line-height: 1;
      letter-spacing: -0.091em;
      color: var(--wp--preset--color--ink);
      width: 380px;
      max-width: 100%;
      margin-bottom: calc(var(--wp--preset--spacing--50) - 10px);
    }
    .feature-tour__title--narrow { width: 290px; }

    /* Coral full-stop blink — site-wide period accent, matches the
       cursor-blink animation used in Audience-Hero / Beliefs / etc. */
    @keyframes feature-tour-cursor-blink {
      0%, 100% { opacity: 1; }
      50%      { opacity: 0; }
    }
    .feature-tour__title-accent {
      color: var(--wp--preset--color--coral);
      animation: feature-tour-cursor-blink 1.1s step-end infinite;
    }
    .feature-tour__lead {
      font-family: var(--wp--preset--font-family--body);
      font-weight: 500;
      font-size: 0.9375rem;
      line-height: 1.412;
      color: var(--wp--preset--color--ink);
      max-width: 280px;
      margin-bottom: var(--wp--preset--spacing--60);
    }

    /* VISUAL — base container.
       All three hero images share an aligned 550×482 mask, so the visual
       container uses a single fixed size and lets each image fill it.
       Per-row inward margin pulls the visual closer to the text block,
       matching the HiW step tightness. */
    .feature-tour__visual {
      position: relative;
      width: 100%;
      max-width: 480px;
    }
    .feature-tour__hero-img {
      width: 100%;
      height: auto;
      display: block;
    }

    /* Decorative stickers (pencil, brush, wand) — positioned over the canvas */
    .feature-tour__sticker {
      position: absolute;
      display: block;
      pointer-events: none;
      object-fit: contain;
      z-index: 10;
    }
    /* Row 1 pencil — top-left corner of paper */
    .feature-tour__sticker--pencil {
      width: 18%;
      top: calc(2% + 24px);
      left: calc(4% - 20px);
      transform: rotate(-18deg);
      animation: sticker-pencil 4.2s ease-in-out infinite;
    }
    /* Desktop & tablet: nudge the floating pencil 65px further left, 40px down */
    @media (min-width: 1024px) {
      .feature-tour__sticker--pencil { top: calc(2% + 40px); left: calc(4% - 65px); }
    }
    /* Row 2 brush — emerges from right of phone, scribble tip into screen */
    .feature-tour__sticker--brush {
      width: 40%;
      top: 38%;
      right: 8%;
      transform: rotate(8deg);
      animation: sticker-brush 4.6s ease-in-out infinite;
    }
    /* Row 3 wand — bottom-left of phone */
    .feature-tour__sticker--wand {
      width: 18%;
      bottom: 10%;
      left: 10%;
      transform: rotate(-10deg);
      animation: sticker-wand 4s ease-in-out infinite;
    }

    @keyframes sticker-pencil {
      0%   { transform: rotate(-18deg) translate(0, 0); }
      50%  { transform: rotate(-15deg) translate(3px, -4px); }
      100% { transform: rotate(-18deg) translate(0, 0); }
    }
    @keyframes sticker-brush {
      0%   { transform: rotate(8deg)  translate(0, 0); }
      50%  { transform: rotate(6deg)  translate(-3px, -5px); }
      100% { transform: rotate(8deg)  translate(0, 0); }
    }
    @keyframes sticker-wand {
      0%   { transform: rotate(-10deg) translate(0, 0); }
      50%  { transform: rotate(-8deg)  translate(3px, -6px); }
      100% { transform: rotate(-10deg) translate(0, 0); }
    }

    /* SECONDARY COMPOSITE IMAGE below content */
    .feature-tour__secondary {
      display: block;
      width: 100%;
      height: auto;
      margin-top: var(--wp--preset--spacing--30);
      margin-inline: auto;
    }
    .feature-tour__secondary--customisation {
      max-width: 209px;
      animation: feature-tour-float-a 5.5s ease-in-out infinite;
    }
    .feature-tour__secondary--data {
      max-width: 319px;
      animation: feature-tour-float-b 6.2s ease-in-out infinite;
    }
    @keyframes feature-tour-float-a {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-7px); }
    }
    @keyframes feature-tour-float-b {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-6px); }
    }

    /* DECORATION CHIPS — row 2 */
    .feature-tour__chips {
      display: flex; flex-direction: column; align-items: center;
      gap: var(--wp--preset--spacing--30);
      margin-top: var(--wp--preset--spacing--30);
    }
    .feature-tour__file-chip {
      display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--30);
      background: var(--wp--preset--color--white);
      border-radius: var(--wp--custom--radius--pill);
      padding: 0.5rem 1rem 0.5rem 0.5rem;
      box-shadow: 0 8px 24px rgba(29,11,9,0.10), 0 2px 6px rgba(29,11,9,0.06);
      position: relative;
    }
    .feature-tour__file-thumb {
      width: 32px; height: 32px;
      border-radius: var(--wp--custom--radius--sm);
      object-fit: cover; display: block;
      background: linear-gradient(135deg, #6B4427 0%, #3C2715 100%);
    }
    .feature-tour__file-meta { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
    .feature-tour__file-name {
      font-family: var(--wp--preset--font-family--body); font-weight: 600;
      font-size: var(--wp--preset--font-size--sm);
      color: var(--wp--preset--color--ink);
    }
    .feature-tour__file-size {
      font-family: var(--wp--preset--font-family--body); font-weight: 500;
      font-size: var(--wp--preset--font-size--xs);
      color: rgba(29,11,9,0.55);
    }
    .feature-tour__file-x {
      width: 18px; height: 18px;
      display: inline-flex; align-items: center; justify-content: center;
      color: rgba(29,11,9,0.45); margin-left: var(--wp--preset--spacing--20);
    }
    .feature-tour__tool-chips {
      display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--30);
    }
    .feature-tour__tool-chip {
      background: var(--wp--preset--color--white);
      border-radius: var(--wp--custom--radius--pill);
      padding: 0.5rem 0.875rem;
      font-family: var(--wp--preset--font-family--body); font-weight: 600;
      font-size: var(--wp--preset--font-size--sm);
      color: var(--wp--preset--color--ink);
      display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--20);
      box-shadow: 0 6px 18px rgba(29,11,9,0.08), 0 1px 3px rgba(29,11,9,0.05);
    }
    .feature-tour__tool-chip--blank {
      width: 56px; height: 32px;
      background: var(--wp--preset--color--cream-soft);
      border-radius: var(--wp--custom--radius--sm);
      box-shadow: none; padding: 0;
    }
    .feature-tour__swatch-dots { display: inline-flex; gap: 4px; margin-left: 4px; }
    .feature-tour__swatch-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
    .feature-tour__swatch-dot--coral { background: var(--wp--preset--color--coral); }
    .feature-tour__swatch-dot--teal  { background: #2BB39E; }
    .feature-tour__swatch-dot--ink   { background: var(--wp--preset--color--ink); }
    .feature-tour__badge {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--wp--preset--color--white);
      border: 1px solid rgba(29,11,9,0.08);
      border-radius: var(--wp--custom--radius--sm);
      padding: 0.375rem 0.75rem;
      font-family: var(--wp--preset--font-family--body); font-weight: 600;
      font-size: var(--wp--preset--font-size--xs);
      color: var(--wp--preset--color--ink);
    }
    .feature-tour__badge-accent { color: var(--wp--preset--color--coral); }

    /* DECORATION CHIPS — row 3 */
    /* Stat pill — typography matched to More story.html .hero-split__stat */
    .feature-tour__stat-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.375rem 0.75rem;
      font-family: var(--wp--preset--font-family--body);
      font-weight: 500;
      font-size: 0.8125rem;
      line-height: 1;
      color: var(--wp--preset--color--ink-soft, var(--wp--preset--color--ink));
      background: transparent;
      border: 1px solid rgba(26, 26, 26, 0.18);
      border-radius: 0;
      margin-bottom: var(--wp--preset--spacing--40);
    }
    .feature-tour__stat-pill-num {
      color: var(--wp--preset--color--coral);
      margin: 0 0.3em;
      font-weight: 600;
    }
    .feature-tour__stat-pill--themes,
    .feature-tour__stat-pill--after-graphic {
      margin-top: var(--wp--preset--spacing--50);
    }
    .feature-tour__player-card {
      display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--30);
      background: var(--wp--preset--color--white);
      border-radius: var(--wp--custom--radius--pill);
      padding: 0.5rem 0.5rem 0.5rem 0.75rem;
      box-shadow: 0 8px 24px rgba(29,11,9,0.10), 0 2px 6px rgba(29,11,9,0.06);
    }
    .feature-tour__player-shield {
      width: 18px; height: 18px;
      color: var(--wp--preset--color--coral);
      flex-shrink: 0;
    }
    .feature-tour__player-name { display: flex; flex-direction: column; text-align: left; line-height: 1.1; }
    .feature-tour__player-title {
      font-family: var(--wp--preset--font-family--body); font-weight: 600;
      font-size: var(--wp--preset--font-size--sm);
      color: var(--wp--preset--color--ink);
    }
    .feature-tour__player-sub {
      font-family: var(--wp--preset--font-family--body); font-weight: 500;
      font-size: var(--wp--preset--font-size--xs);
      color: rgba(29,11,9,0.55);
    }
    .feature-tour__player-avatar {
      width: 36px; height: 36px; border-radius: 50%;
      background: radial-gradient(circle at 40% 30%, #E8B898 0 30%, #5F3826 32% 100%);
      display: block; flex-shrink: 0;
    }
    .feature-tour__player-chips {
      display: inline-flex; align-items: center; flex-wrap: wrap;
      gap: var(--wp--preset--spacing--20);
      margin-top: var(--wp--preset--spacing--30);
      justify-content: center;
    }
    .feature-tour__chip {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(29,11,9,0.06);
      border-radius: var(--wp--custom--radius--pill);
      padding: 0.375rem 0.75rem;
      font-family: var(--wp--preset--font-family--body); font-weight: 600;
      font-size: var(--wp--preset--font-size--xs);
      color: var(--wp--preset--color--ink);
    }
    .feature-tour__chip-flag {
      width: 14px; height: 14px; border-radius: 50%;
      display: inline-block; overflow: hidden;
    }

    /* TABLET */
    @media (min-width: 641px) and (max-width: 1023px) {
      .feature-tour { padding-block: 7rem; }
      .feature-tour__row { padding-block: var(--wp--preset--spacing--60); }
      .feature-tour__row-inner {
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--60);
        max-width: 600px;
      }
      .feature-tour__row--media-left  .feature-tour__content,
      .feature-tour__row--media-right .feature-tour__content { order: 1; }
      .feature-tour__row--media-left  .feature-tour__media,
      .feature-tour__row--media-right .feature-tour__media   { order: 2; justify-content: center; }
      .feature-tour__visual { max-width: 460px; margin-inline: auto !important; }
      /* Scale typography down for the single-column tablet layout, since the
         desktop 45px title is too big once stacked above its visual.
         Constrain max-width so each headline breaks onto two lines. */
      .feature-tour__title,
      .feature-tour__title--narrow {
        width: auto;
        max-width: 380px;
        font-size: clamp(2rem, 4.5vw, 2.5rem);
        line-height: 1;
      }
      .feature-tour__lead { max-width: 360px; }
    }

    /* MOBILE */
    @media (max-width: 640px) {
      .feature-tour { padding-block: 5rem; }
      .feature-tour__row {
        padding-block: var(--wp--preset--spacing--60);
      }
      .feature-tour__rows > .feature-tour__row:first-child {
        padding-bottom: var(--wp--preset--spacing--70);
      }
      .feature-tour__row-inner {
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--50);
      }
      .feature-tour__row--media-left  .feature-tour__content,
      .feature-tour__row--media-right .feature-tour__content { order: 1; }
      .feature-tour__row--media-left  .feature-tour__media,
      .feature-tour__row--media-right .feature-tour__media   { order: 2; justify-content: center; }
      .feature-tour__title,
      .feature-tour__title--narrow {
        width: auto;
        font-size: clamp(2.25rem, 7.875vw, 2.875rem);
        line-height: 1;
        letter-spacing: -0.115em;
        max-width: min(280px, 84vw);
      }
      /* Section 2 (image-right row) — wider wrap so "Play it with /
         pixels or / pencils." lands on three lines at the larger
         mobile headline size. */
      .feature-tour__row--media-right .feature-tour__title {
        max-width: min(310px, 92vw);
      }
      .feature-tour__lead {
        font-size: 1rem;
        max-width: min(290px, 86vw);
        color: #473531;
      }
      .feature-tour__eyebrow { font-size: 18px; }
      /* Drop the container side padding for this section on mobile so
         non-paper visuals can fill the full viewport width without
         needing negative-margin break-out tricks (those were shifting
         the sibling content off-centre). */
      .feature-tour .container { padding-inline: 0; }
      .feature-tour__visual {
        max-width: 100vw;
        width: 100%;
        margin-inline: auto !important;
      }
      .feature-tour__visual--paper {
        max-width: min(380px, 88vw);
      }
      /* Section 3 (Dave's sauce) — phone canvas reads ~5px right of
         centre against its neighbours, so nudge it back left.
         transform: paint-only, no impact on sibling layout. */
      .feature-tour__rows > .feature-tour__row:nth-child(3) .feature-tour__visual {
        transform: translateX(-10px);
      }
      /* Restore inline padding for the text content so it doesn't run
         to the viewport edges — only the visuals go edge-to-edge. */
      .feature-tour__content { padding-inline: clamp(1rem, 4vw, 1.5rem); }
      .feature-tour__secondary--data { max-width: 316px; }
    }

    /* Scroll-in animation — staggered.
       Each child element starts hidden + dropped 40px, then lifts and
       fades in once the row receives .is-visible. Per-element delays
       cascade so the eyebrow leads, title follows, body next, then
       the secondary chip / badge. Media animates in parallel with
       the eyebrow so the visual + heading land together. The secondary
       image only fades (no transform) so the infinite float animation
       owns its transform property without conflict. */
    .feature-tour__row .feature-tour__eyebrow,
    .feature-tour__row .feature-tour__title,
    .feature-tour__row .feature-tour__lead,
    .feature-tour__row .feature-tour__stat-pill,
    .feature-tour__row .feature-tour__media {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.65s var(--wp--custom--motion--ease-out),
                  transform 0.65s var(--wp--custom--motion--ease-out);
    }
    .feature-tour__row .feature-tour__secondary {
      opacity: 0;
      transition: opacity 0.65s var(--wp--custom--motion--ease-out);
    }

    .feature-tour__row.is-visible .feature-tour__eyebrow,
    .feature-tour__row.is-visible .feature-tour__title,
    .feature-tour__row.is-visible .feature-tour__lead,
    .feature-tour__row.is-visible .feature-tour__stat-pill,
    .feature-tour__row.is-visible .feature-tour__media {
      opacity: 1;
      transform: translateY(0);
    }
    .feature-tour__row.is-visible .feature-tour__secondary { opacity: 1; }

    .feature-tour__row.is-visible .feature-tour__media    { transition-delay: 0s; }
    .feature-tour__row.is-visible .feature-tour__eyebrow  { transition-delay: 0s; }
    .feature-tour__row.is-visible .feature-tour__title    { transition-delay: 0.08s; }
    .feature-tour__row.is-visible .feature-tour__lead     { transition-delay: 0.16s; }
    .feature-tour__row.is-visible .feature-tour__secondary{ transition-delay: 0.24s; }
    .feature-tour__row.is-visible .feature-tour__stat-pill{ transition-delay: 0.32s; }

    @media (prefers-reduced-motion: reduce) {
      .feature-tour__row .feature-tour__eyebrow,
      .feature-tour__row .feature-tour__title,
      .feature-tour__row .feature-tour__lead,
      .feature-tour__row .feature-tour__stat-pill,
      .feature-tour__row .feature-tour__media,
      .feature-tour__row .feature-tour__secondary {
        opacity: 1; transform: none; transition: none;
      }
      .feature-tour__sticker,
      .feature-tour__secondary--customisation,
      .feature-tour__secondary--data,
      .feature-tour__title-accent { animation: none; }
    }