/* Blueprint rig watermark behind the hero.
   A generated engineering drawing, converted to transparent cyan line art. js/blueprint.js sizes and
   positions it from the glance card, so nothing important ever sits behind the card. */

.hero-section { overflow: hidden; }
.hero-section > *:not(.bp-stage):not(.bp-tag):not(.bp-hint) { position: relative; z-index: 1; }

.bp-stage {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  /* dissolve toward the headline and at the very top */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 20%, #000 34%), linear-gradient(180deg, transparent 0%, #000 9%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 20%, #000 34%), linear-gradient(180deg, transparent 0%, #000 9%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* Arabic: the whole composition mirrors with the page, so the mast still stands beside the card */
html[dir='rtl'] .bp-stage { transform: scaleX(-1); }

.bp-rig {
  position: absolute; left: 0; top: 0; width: 1200px; aspect-ratio: 2336 / 1568;
  /* Entrance: the drawing develops out of the dark, from soft focus to sharp, settling upward */
  opacity: 0; filter: blur(14px); transform: translateY(26px) scale(1.015); transform-origin: 80% 100%;
  transition: opacity 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.35s, filter 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.35s, transform 2.6s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
}
.bp-rig.ready { opacity: 1; filter: none; transform: none; }
.bp-rig img { user-select: none; -webkit-user-drag: none; }
.bp-base, .bp-glow { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.bp-base { opacity: 0.23; transition: opacity 0.5s ease; }
.bp-rig.has-active .bp-base { opacity: 0.13; }

/* Highlight: the same drawing at full strength, revealed only over the hovered part through a feathered mask */
.bp-glow {
  opacity: 0;
  -webkit-mask-composite: source-in; mask-composite: intersect; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  filter: brightness(1.12) drop-shadow(0 0 5px rgba(0, 229, 255, 0.55)) drop-shadow(0 0 14px rgba(0, 229, 255, 0.25));
  transition: opacity 0.4s ease;
}
.bp-rig.has-active .bp-glow { opacity: 1; }

/* Company emblem on the cab door, traced as an outline in the drawing's own line colour */
.bp-door-logo {
  position: absolute; height: auto; transform: translate(-50%, -50%);
  opacity: 0.4; transition: opacity 0.45s ease, filter 0.45s ease;
}
html[dir='rtl'] .bp-door-logo { transform: translate(-50%, -50%) scaleX(-1); }   /* the truck mirrors, the emblem must not */
.bp-rig.has-active .bp-door-logo { opacity: 0.2; }
.bp-rig[data-active='cab'] .bp-door-logo { opacity: 1; filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.5)); }

/* Part label */
.bp-tag {
  position: absolute; z-index: 2; pointer-events: none; white-space: nowrap;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: #eafcff;
  opacity: 0; transform: translateY(4px); transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.bp-tag.on { opacity: 1; transform: none; }
.bp-tag::before { content: ''; width: 26px; height: 1px; background: var(--accent-cyan); box-shadow: 0 0 6px rgba(0, 229, 255, 0.7); }
.bp-tag.left { flex-direction: row-reverse; }
.bp-tag span { padding: 5px 10px; border: 1px solid rgba(0, 229, 255, 0.35); border-radius: 999px; background: rgba(6, 7, 9, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
html[dir='rtl'] .bp-tag { letter-spacing: 0; font-size: 0.8rem; direction: ltr; }   /* keep the line-then-label order; the text itself is Arabic */
html[dir='rtl'] .bp-tag span { direction: rtl; }

/* Hero layout: the card starts level with the badge, and on wide screens the text block and logo
   sit a little further left. Together these free the bottom-right of the section for the rig. */
@media (min-width: 993px) {
  .hero-grid { align-items: start; }
}
@media (min-width: 1700px) and (max-width: 1999px) {
  .hero-content, .brand-wrap { position: relative; inset-inline-start: -70px; }
}
@media (min-width: 2000px) {
  .hero-content, .brand-wrap { position: relative; inset-inline-start: -140px; }
}

/* ---- The drill: continues the drawn drill string down the page and reports the depth ---- */
.bp-drill { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 40; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; color: var(--accent-cyan); }
.bp-drill.on { opacity: 1; }
.bp-drill-pipe {
  position: absolute; left: 0;
  /* two thin walls like the drawn string, with a tool joint every 96px */
  border-left: 1px solid rgba(126, 214, 232, 0.5); border-right: 1px solid rgba(126, 214, 232, 0.5);
  background-image:
    repeating-linear-gradient(180deg, transparent 0px, transparent 84px, rgba(126, 214, 232, 0.55) 84px, rgba(126, 214, 232, 0.55) 85px, rgba(126, 214, 232, 0.16) 85px, rgba(126, 214, 232, 0.16) 95px, rgba(126, 214, 232, 0.55) 95px, rgba(126, 214, 232, 0.55) 96px),
    linear-gradient(90deg, rgba(126, 214, 232, 0.12), rgba(126, 214, 232, 0.03) 50%, rgba(126, 214, 232, 0.12));
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 70px); mask-image: linear-gradient(180deg, transparent 0, #000 70px);
}
.bp-drill-bit { position: absolute; left: 0; transform: translate(-50%, -3px); filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.7)) drop-shadow(0 0 16px rgba(0, 229, 255, 0.35)); }
.bp-drill-bit svg { display: block; width: 100%; height: auto; }
.bp-drill-label {
  position: absolute; left: 26px; transform: translateY(-50%); white-space: nowrap;
  display: grid; row-gap: 1px; padding: 7px 12px 8px;
  border: 1px solid rgba(0, 229, 255, 0.3); border-radius: 10px; background: rgba(6, 7, 9, 0.78);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono); text-transform: uppercase; line-height: 1.25;
}
.bp-drill-label::before { content: ''; position: absolute; top: 50%; left: -16px; width: 16px; height: 1px; background: rgba(0, 229, 255, 0.6); }
.bp-drill-label.flip { left: auto; right: 26px; text-align: right; }
.bp-drill-label.flip::before { left: auto; right: -16px; }
.bp-drill-label.compact { left: 16px; padding: 4px 8px 5px; border-radius: 8px; }
.bp-drill-label.compact.flip { left: auto; right: 16px; }
.bp-drill-label.compact::before { width: 8px; left: -8px; }
.bp-drill-label.compact.flip::before { left: auto; right: -8px; }
.bp-drill-label.compact small, .bp-drill-label.compact i { display: none; }
.bp-drill-label.compact b { font-size: 0.8rem; }
.bp-drill-label small { font-size: 0.56rem; letter-spacing: 0.2em; color: var(--text-muted); }
.bp-drill-label b { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.04em; color: #eafcff; font-variant-numeric: tabular-nums; text-transform: none; }
.bp-drill-label i { font-style: normal; font-size: 0.56rem; letter-spacing: 0.14em; color: var(--accent-cyan); opacity: 0.85; }
html[dir='rtl'] .bp-drill-label small, html[dir='rtl'] .bp-drill-label i { letter-spacing: 0; font-size: 0.68rem; }
html[dir='rtl'] .bp-drill-label b { letter-spacing: 0; }

/* Phones and tablets: not shown. The content is stacked there, so the card sits at the foot of the
   section and would cover the mast, which is nearly three times the truck's height. */
@media (max-width: 992px) {
  .bp-stage, .bp-tag, .bp-drill, .bp-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bp-rig { transition: opacity 0.4s ease; filter: none; transform: none; }
}

/* ---- Discovery hint under the rig: a subtle one-liner telling first-time visitors
   the drawing is interactive. Same font/colour as the hero stat labels. It fades in
   once the rig has drawn, breathes very gently, and is removed for good on first hover.
   Positioned by a small, separate script in index.html that only READS the rig — the
   rig itself is untouched. ---- */
.bp-hint {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 0.8125rem;      /* matches .stat-label */
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  opacity: 0;
  transition: opacity 0.9s ease;   /* smooth fade-out when dismissed */
}
.bp-hint.on {
  animation: bp-hint-in 0.9s ease both, bp-hint-breathe 4s ease-in-out 0.9s infinite;
}
@keyframes bp-hint-in { from { opacity: 0; } to { opacity: 0.85; } }
@keyframes bp-hint-breathe { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.55; } }
html[dir='rtl'] .bp-hint { font-size: 0.9rem; letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) { .bp-hint.on { animation: none; opacity: 0.8; } }