/* Torqevixamonas / Blueprint Lab — contoured section transitions.
   Inspired by the supplied video: a raised rounded tab at the boundary of
   alternating paper surfaces. Only the homepage uses these styles. */
body[data-page="index"] #app > .torq-paper-panel {
  --torq-panel-bg: #e5ebea;
  position: relative;
  isolation: isolate;
  margin-top: 48px;
  padding-top: clamp(86px, 7vw, 105px);
  padding-bottom: clamp(74px, 7vw, 94px);
  background-color: var(--torq-panel-bg);
  border-top: 1px solid rgba(68,110,130,.20);
  border-bottom: 1px solid rgba(68,110,130,.17);
}
body[data-page="index"] #app > .torq-paper-panel.torq-panel-warm {
  --torq-panel-bg: #e9ece8;
}
body[data-page="index"] #app > .torq-paper-panel.torq-panel-slate {
  --torq-panel-bg: #dfe8e8;
}
/* Texture is a noninteractive surface; the actual content is above it. */
body[data-page="index"] #app > .torq-paper-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .075;
  background: url("paper-grain.png") 0 0 / 350px auto repeat;
}
body[data-page="index"] #app > .torq-paper-panel > .container {
  position: relative;
  z-index: 1;
}
/* The tab is a true rounded contour, not a generic divider line. */
body[data-page="index"] .torq-section-tab {
  position: absolute;
  top: -48px;
  left: max(24px, calc((100vw - 1200px)/2 + 58px));
  width: 340px;
  height: 48px;
  z-index: 3;
  color: var(--ink);
  pointer-events: none;
}
body[data-page="index"] .torq-section-tab svg {
  display: block;
  width: 100%;
  height: 48px;
  overflow: visible;
}
body[data-page="index"] .torq-section-tab .tab-fill { fill: var(--torq-panel-bg); }
body[data-page="index"] .torq-section-tab .tab-stroke {
  stroke: rgba(68,110,130,.28);
  fill: none;
  stroke-width: 1.2px;
  vector-effect: non-scaling-stroke;
}
body[data-page="index"] .torq-section-tab span {
  position: absolute;
  left: 53px;
  right: 50px;
  bottom: 10px;
  text-align: center;
  font: 10px/1.3 var(--mono);
  letter-spacing: .15em;
  white-space: nowrap;
  color: #315569;
}
body[data-page="index"] .torq-section-tab span::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 10px;
  vertical-align: 1px;
  background: var(--rust);
  transform: rotate(45deg);
}
body[data-page="index"] .torq-section-tab span::after {
  content: "";
  display: inline-block;
  width: 12px;
  margin-left: 10px;
  border-top: 1px solid var(--blue);
  vertical-align: 3px;
}
/* One-shot, scroll-triggered reveal of the TAB only. Content never hides. */
body[data-page="index"].torq-seams-motion .torq-paper-panel:not(.torq-seam-visible) .torq-section-tab {
  opacity: 0;
  transform: translateY(13px);
}
body[data-page="index"].torq-seams-motion .torq-section-tab {
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.65,.25,1);
}
/* The quiz already has a top border. The seam replaces that particular line. */
body[data-page="index"] #api-self-test.torq-paper-panel .torq-self-test__heading { border-top: 0; }
/* The mission has its own column border and should keep its original layout. */
@media(max-width:770px) {
  body[data-page="index"] #app > .torq-paper-panel {
    margin-top: 43px;
    padding-top: 66px;
    padding-bottom: 58px;
  }
  body[data-page="index"] .torq-section-tab {
    width: min(315px, calc(100vw - 28px));
    left: 12px;
  }
  body[data-page="index"] .torq-section-tab span {font-size:9px;letter-spacing:.115em;}
}
@media(prefers-reduced-motion:reduce) {
  body[data-page="index"] .torq-section-tab { transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* Scroll-linked micro-parallax, inspired by the subtle movement in the
   reference video. Moves INNER content only: panel boundaries stay locked.
   Fixed header/menu remain outside the transformed area. */
@media (min-width: 771px) and (prefers-reduced-motion: no-preference) {
  body[data-page="index"].torq-sections-drift #app > .torq-paper-panel > .container {
    transform: translate3d(0, var(--torq-drift-y, 0px), 0);
    transition: transform 85ms linear;
  }
  body[data-page="index"].torq-sections-drift #app > .torq-paper-panel.torq-drift-near > .container {
    will-change: transform;
  }
  body[data-page="index"].torq-sections-drift .torq-paper-panel.torq-seam-visible .torq-section-tab {
    transform: translate3d(0, var(--torq-tab-drift-y, 0px), 0);
  }
}
@media (max-width: 770px), (prefers-reduced-motion: reduce) {
  body[data-page="index"] #app > .torq-paper-panel > .container {
    transform: none !important;
  }
  body[data-page="index"] .torq-paper-panel.torq-seam-visible .torq-section-tab {
    transform: none !important;
  }
}