/* ============================================
   FEATURE SECTIONS
   A repeatable list of feature blocks: a mini header (title + description)
   followed by a Preview / Process box. The box reuses .preview-section from
   project.css for its look; the rules here handle the section layout, header
   spacing, and the in-box video badge.

   Pairs with feature-sections.js. Horizontal width + gutter match the other
   page sections (project-details / progress-section).
   ============================================ */

.feature-sections {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* One feature block: header on top, preview box under it. (Vertical spacing is
   carried by the .feature-divider lines above/below it.) */
.feature-section {
  display: flex;
  flex-direction: column;
}

/* Simple 1px hairline before + after the feature section(s) */
.feature-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}
.feature-divider--top    { margin: 100px 0; }   /* gap from intro, then to header */
.feature-divider--bottom { margin-top: 100px; } /* gap above the divider (matches --top) */
/* On feature pages, the section right after the bottom divider drops to the SAME
   gap below it, so the divider sits centered at the divider rhythm (100/80/64) —
   not the larger section padding. Scoped to feature pages; other pages keep theirs. */
body.has-feature-sections #progress-section,
body.has-feature-sections #project-details { padding-top: 100px; }

/* Mini header (title + description) above the box. Full content width — wraps
   as one column, matching Challenge / Impact / My Role. */
.feature-section .feature-head {
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(30px);
}

/* Slide + fade in together with the box (same motion as .preview-section
   .animate-in), so the title + description enter with the rest of the content
   instead of popping in instantly. */
.feature-section .feature-head.animate-in {
  animation: sectionFadeIn 1.5s ease both,
             sectionSlideIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* First section has no divider line above it. No extra top margin: the page
   header's own padding-bottom already provides the standard ~140px section gap,
   so the intro→first-section spacing matches the rest of the page. */
.feature-section--flush { margin-top: 0; }

/* Description moved BELOW the box (e.g. the Preview grid's caption). Uses the
   mini-title font size (.pd2-label: 16px, 14px on mobile) rather than the
   larger body size, so the caption reads as a small note. */
.feature-section .feature-desc-below { margin-top: 28px; font-size: 16px; }
@media (max-width: 768px) {
  .feature-section .feature-desc-below { font-size: 14px; }
}

/* The Preview/Process box. .preview-section gives it the rounded tinted look,
   sizing, and slide/fade entrance; here we just let it sit in normal flow. */
.feature-preview {
  margin: 0;                     /* override .preview-section's auto-centering */
}

/* Scroll-perf: the embedded-grid Preview box holds a heavy iframe (a big
   zoomable canvas of 65 screens). content-visibility lets the browser SKIP
   rendering it while it's scrolled off-screen, so scrolling the rest of the
   page stays smooth. Safe with no layout jump because the box has a fixed
   height (from .preview-section). Scoped to boxes that contain an iframe. */
.feature-preview:has(iframe) {
  content-visibility: auto;
}

/* Challenge + Impact under a feature's box (opt-in). Reuses .pd2-* text styles;
   this just handles the stacking + spacing from the box and the meta below. */
.feature-details {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 48px;
}
@media (max-width: 768px) {
  .feature-details { gap: 24px; margin-top: 32px; }
}

/* Team + Role mini sub-sections under each feature's box — stacked one under
   the other (single column). */
.feature-meta {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 48px;
}
.feature-meta-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (max-width: 768px) {
  .feature-meta { gap: 24px; margin-top: 32px; }
}

/* Preview = scrolling strip of screens (reuses .progress-* from the Progress
   section). Reserve the toggle's zone at the bottom so screens clear it
   (80px toggle + 24px gap = 104; 64px toggle + 24px = 88 on tablet/mobile). */
.feature-preview .progress-marquee { padding-bottom: 104px; }
@media (max-width: 1400px) {
  .feature-preview .progress-marquee { padding-bottom: 88px; }
}

/* The in-box speed badge: a glassy circle showing 2x / 1x. Reuses
   .vc-center-btn for the circle; these add the label + pulse. */
.fs-speed-btn {
  gap: 8px;
}

.fs-speed-label {
  font-family: 'ABCDiatype', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.02em;
}

.fs-speed-icon {
  height: 20px;
  width: auto;
}

/* A quick squash-and-settle when the speed changes */
.fs-speed-btn.is-pulsing {
  animation: fs-speed-pulse 0.65s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes fs-speed-pulse {
  0%   { scale: 1; }
  35%  { scale: 0.82; }
  70%  { scale: 1.12; }
  100% { scale: 1; }
}

/* Width + gutter handling so feature sections line up with the other sections.
   Placed last so it wins over the base max-width above. */
.feature-sections {
  max-width: min(1080px, calc(100vw - 2 * var(--side-gutter, 0px)));
}

@media (max-width: 1400px) {
  .feature-divider--top    { margin: 80px 0; }
  .feature-divider--bottom { margin-top: 80px; }
  body.has-feature-sections #progress-section,
  body.has-feature-sections #project-details { padding-top: 80px; }
}

@media (max-width: 768px) {
  .feature-sections { padding: 0 16px; }
  .feature-divider--top    { margin: 64px 0; }
  .feature-divider--bottom { margin-top: 64px; }
  body.has-feature-sections #progress-section,
  body.has-feature-sections #project-details { padding-top: 64px; }
  .feature-section .feature-head { margin-bottom: 24px; }
  .fs-speed-label { font-size: 16px; }
}

/* ── Link inside a feature description ("Product Hunt" in AI Logo Reveals) ──
   Plain text with a thin underline, drawn as TWO 1px lines so the hover can
   choreograph them:
   • line A (::before) is the resting underline, pinned to the RIGHT — so
     when it shrinks, its left edge races right: the line "walks out" rightward.
   • line B (::after) is pinned to the LEFT and starts at zero width — it
     "walks in" left-to-right just as A finishes leaving.
   Leaving the link plays the whole thing in reverse (B retreats left,
   then A walks back in from the right) — transitions reverse for free;
   the swapped delays below keep the two phases in the right order.
   Touch screens never fire :hover, so they just keep the steady underline. */
.pd2-text .desc-link {
  position: relative;
  display: inline-block;
  white-space: nowrap;        /* one line, so the underline is one piece */
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.pd2-text .desc-link::before,
.pd2-text .desc-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.pd2-text .desc-link::before { right: 0; width: 100%; transition-delay: 0.22s; }  /* returns AFTER B has left */
.pd2-text .desc-link::after  { left: 0;  width: 0;    transition-delay: 0s; }
@media (hover: hover) {
  .pd2-text .desc-link:hover::before { width: 0;    transition-delay: 0s; }      /* exits right, immediately */
  .pd2-text .desc-link:hover::after  { width: 100%; transition-delay: 0.22s; }   /* enters from the left, after */
}