/* ==========================================================================
   The plumber scene: a full-screen copper-pipe backdrop with a centred
   message. Used by the 404 page.
   ========================================================================== */

/* ---------- Hero ---------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #000;
  color: #fff;
}

.hero__content {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 22px;
  width: min(100%, 980px);
  padding: calc(var(--header-h) + 40px) var(--gutter) 150px;
  text-align: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 12px;
  border-radius: var(--r-pill);
  background: rgb(10 11 14 / 0.5);
  box-shadow: inset 0 0 0 1px var(--c-line-2);
  backdrop-filter: blur(8px);
  color: var(--c-ink-2);
  font-size: var(--fs-13);
  --fade-delay: 0.1s;
}

.hero__eyebrow .chip__dot {
  animation: spark-pulse 3.2s ease-in-out infinite;
}

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: var(--tracking-tight);
  text-shadow: 0 2px 40px rgb(0 0 0 / 0.55);
}

:root[lang="fa"] .hero__title {
  line-height: 1.3;
  font-weight: 800;
}

.hero__title {
  --split-delay: 0.25s;
}

.hero__lede {
  --split-delay: 0.85s;
  max-width: 34rem;
  color: rgb(250 240 233 / 0.78);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
}

:root[lang="fa"] .hero__lede {
  max-width: 36rem;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 2;
}

.hero__cta {
  --fade-delay: 1.5s;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}

/* Scroll cue: a short pipe with a drop running down it. */
.scroll-cue {
  --fade-delay: 2s;
  position: absolute;
  z-index: 3;
  bottom: 28px;
  inset-inline-start: 50%;
  translate: calc(-50% * var(--dir)) 0;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--c-ink-4);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: color var(--t-fast) ease;
}

.scroll-cue:hover {
  color: var(--c-ink-2);
}

.scroll-cue__pipe {
  position: relative;
  width: 20px;
  height: 34px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1.5px currentColor;
  overflow: hidden;
}

.scroll-cue__pipe::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  top: 6px;
  width: 4px;
  height: 7px;
  margin-inline-start: -2px;
  border-radius: 3px;
  background: var(--c-mint);
  box-shadow: 0 0 10px var(--c-mint);
  animation: drip 2.4s var(--ease-in-out) infinite;
}

@keyframes drip {
  0% { transform: translateY(-4px); opacity: 0; }
  20% { opacity: 1; }
  70% { transform: translateY(14px); opacity: 1; }
  100% { transform: translateY(18px); opacity: 0; }
}

@keyframes spark-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--c-mint-a20); }
  50% { box-shadow: 0 0 0 6px rgb(111 216 173 / 0); }
}

/* Veil: the prompt's 40% black, shaped so the centre stays darkest for type. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 44% 38% at 50% 50%, rgb(5 6 8 / 0.6), rgb(5 6 8 / 0) 100%),
    linear-gradient(to bottom, rgb(5 6 8 / 0.5), rgb(5 6 8 / 0) 20%, rgb(5 6 8 / 0) 74%, var(--c-ground) 100%),
    rgb(0 0 0 / 0.22);
}

/* ---------- The plumber scene -------------------------------------------- */

/* Three things only: the emblem in the corner, one riser carrying a gauge,
   one line along the floor. Everything is CSS gradients or inline SVG, so
   the hero costs no image requests. */
.hero__scene {
  --pt: clamp(20px, 0.9vw + 13px, 30px);   /* pipe thickness */
  --pt-s: clamp(12px, 0.5vw + 8px, 18px);  /* the gauge stub */
  --yb: calc(100% - clamp(96px, 13vh, 150px)); /* the floor line */
  --rx: 11%;                                /* riser, from the end edge */
  --gy: 66%;                                /* gauge height on the riser */
  --edge: #050608;
  --cu: #3c1c08 0%, #8a4618 9%, #c8732f 22%, #eea463 34%, #ffe0b4 43%, #f3ad6b 51%, #d5843f 68%, #9c5422 87%, #552810 100%;

  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 120%, rgb(212 130 60 / 0.14), transparent 60%),
    radial-gradient(90% 70% at 50% 40%, #12141a, #07080a 70%);
  animation: scene-in 1.4s var(--ease-out) both;
}

@keyframes scene-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.scene-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.scene-glow {
  position: absolute;
  border-radius: 50%;
}

.scene-glow--gear {
  top: -30%;
  inset-inline-end: -22%;
  width: min(80vw, 1000px);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgb(212 130 60 / 0.3), rgb(212 130 60 / 0.08) 55%, transparent);
}

.scene-glow--floor {
  inset-inline: 6%;
  bottom: -6%;
  height: 34%;
  background: radial-gradient(closest-side, rgb(212 130 60 / 0.16), transparent);
}

/* Straight pipe: a copper cylinder lit from the top-left. */
.pipe {
  position: absolute;
  display: block;
  overflow: hidden;
  box-shadow: 0 0 0 1.5px var(--edge), 0 18px 30px -12px rgb(0 0 0 / 0.7);
}

.pipe--h {
  height: var(--pt);
  background: linear-gradient(180deg, var(--cu));
}

.pipe--v {
  width: var(--pt);
  background: linear-gradient(90deg, var(--cu));
}

/* Mirrored scene in rtl: the light comes from the top-right instead. */
[dir="rtl"] .pipe--v {
  background: linear-gradient(270deg, var(--cu));
}

/* The logo's dash-dot gloss along each pipe. */
.pipe--h::after,
.pipe--v::after {
  content: "";
  position: absolute;
  opacity: 0.55;
}

.pipe--h::after {
  inset-inline: 4%;
  top: 30%;
  height: 2px;
  background: repeating-linear-gradient(90deg, #fff1df 0 64px, transparent 64px 82px, #fff1df 82px 92px, transparent 92px 180px);
}

.pipe--v::after {
  inset-block: 4%;
  inset-inline-start: 30%;
  width: 2px;
  background: repeating-linear-gradient(180deg, #fff1df 0 64px, transparent 64px 82px, #fff1df 82px 92px, transparent 92px 180px);
}

/* The floor line, full width. */
.p-main {
  top: var(--yb);
  inset-inline: -2%;
  container-type: inline-size;
}

/* The riser: from under the emblem down into the floor line. */
.p-right {
  top: -2%;
  inset-inline-end: var(--rx);
  height: calc(var(--yb) + 2% + var(--pt) / 2);
}

/* A short stub off the riser, toward the centre, carrying the gauge. */
.p-gauge-stub {
  top: calc(var(--gy) - var(--pt-s) / 2);
  inset-inline-end: calc(var(--rx) + var(--pt) - 2px);
  width: clamp(26px, 2.6vw, 44px);
  height: var(--pt-s);
}

/* Couplings: a short, brighter band around the pipe. */
.cpl {
  position: absolute;
  display: block;
  border-radius: 4px;
  box-shadow:
    0 0 0 1.5px var(--edge),
    inset 0 0 0 1px rgb(255 230 200 / 0.18),
    0 8px 16px -6px rgb(0 0 0 / 0.7);
}

.cpl--h {
  top: calc(var(--yb) - 5px);
  width: clamp(12px, 0.6vw + 8px, 18px);
  height: calc(var(--pt) + 10px);
  background: linear-gradient(180deg, #4a230c, #c97a38 22%, #fbd9a9 42%, #e39a58 55%, #a35a24 82%, #4a230c);
}

.cpl--v {
  width: calc(var(--pt) + 10px);
  height: clamp(12px, 0.6vw + 8px, 18px);
  background: linear-gradient(90deg, #4a230c, #c97a38 22%, #fbd9a9 42%, #e39a58 55%, #a35a24 82%, #4a230c);
}

.c-1 { inset-inline-start: 18%; }
.c-2 { inset-inline-start: 44%; }
.c-3 { inset-inline-start: 68%; }

.c-4 {
  top: 30%;
  inset-inline-end: calc(var(--rx) - 5px);
}

/* The tee where the riser joins the floor line. */
.tee {
  position: absolute;
  display: block;
  top: calc(var(--yb) - 7px);
  width: calc(var(--pt) + 16px);
  height: calc(var(--pt) + 14px);
  border-radius: 6px;
  background: linear-gradient(180deg, #4a230c, #b8692c 20%, #f3c58f 40%, #d98a45 56%, #8a4a1e 86%, #3c1c08);
  box-shadow: 0 0 0 1.5px var(--edge), inset 0 1px 0 rgb(255 230 200 / 0.4);
}

.t-right {
  inset-inline-end: calc(var(--rx) - 8px);
}

/* The gauge, on its stub. */
.gauge {
  position: absolute;
  --gs: clamp(70px, 4.8vw + 26px, 120px);
  top: calc(var(--gy) - var(--gs) / 2);
  inset-inline-end: calc(var(--rx) + var(--pt) + clamp(26px, 2.6vw, 44px) - 4px);
  width: var(--gs);
  height: var(--gs);
  filter: drop-shadow(0 14px 18px rgb(0 0 0 / 0.65));
}

.gauge svg {
  width: 100%;
  height: 100%;
}

/* Two groups, plain transforms only (SVG <g> rotate is uneven across
   engines): the outer one holds the reading, the inner one sways. */
.gauge__needle-base {
  transform-origin: 50px 50px;
  transform: rotate(-48deg);
  transition: transform 0.9s var(--ease-out);
}

.gauge__needle {
  transform-origin: 50px 50px;
  animation: needle 7s var(--ease-in-out) infinite;
}

@keyframes needle {
  0%, 100% { transform: rotate(0deg); }
  38% { transform: rotate(7deg); }
  44% { transform: rotate(3deg); }
  70% { transform: rotate(-4deg); }
}

/* The emblem. The whole SVG turns on its own compositor layer; the shadow
   under it is a static layer, so nothing is re-filtered per frame. */
.scene-gear {
  position: absolute;
}

.scene-gear svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene-gear--big {
  --g: clamp(300px, 22vw + 220px, 640px);
  top: calc(var(--g) * -0.36);
  inset-inline-end: calc(var(--g) * -0.2);
  width: var(--g);
  height: var(--g);
}

.scene-gear__shadow {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.25) 70%, transparent);
  translate: 0 7%;
}

.scene-gear__body {
  animation: spin 180s linear infinite;
  will-change: transform;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Flow: a soft light that travels along the floor line now and then. */
.flow {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: clamp(120px, 14vw, 220px);
  background: radial-gradient(closest-side, rgb(255 244 226 / 0.85), rgb(111 216 173 / 0.25) 60%, transparent);
  opacity: 0.45;
  transform: translateX(-100%);
  animation: flow-x 9s var(--ease-in-out) 2s infinite;
  transition: opacity var(--t-slow) ease;
}

@keyframes flow-x {
  0% { transform: translateX(-100%); }
  50%, 100% { transform: translateX(100cqw); }
}

/* Mint sparks beside the emblem, as on the logo. */
.sparks {
  position: absolute;
  width: 26px;
  height: 26px;
}

.sparks i {
  position: absolute;
  width: 4px;
  height: 11px;
  border-radius: 3px;
  background: var(--c-mint);
  box-shadow: 0 0 10px rgb(111 216 173 / 0.7);
  transform-origin: 50% 100%;
  animation: spark 6s ease-in-out 2.5s infinite;
}

.sparks i:nth-child(1) { inset-inline-start: 0; top: 9px; rotate: -38deg; }
.sparks i:nth-child(2) { inset-inline-start: 10px; top: 2px; rotate: 6deg; animation-delay: 2.58s; }
.sparks i:nth-child(3) { inset-inline-start: 19px; top: 11px; rotate: 52deg; animation-delay: 2.66s; }

[dir="rtl"] .sparks {
  transform: scaleX(-1);
}

.s-gear {
  top: calc(clamp(300px, 22vw + 220px, 640px) * 0.5);
  inset-inline-end: calc(clamp(300px, 22vw + 220px, 640px) * 0.66);
}

@keyframes spark {
  0%, 62%, 100% { opacity: 0; transform: translateY(3px) scaleY(0.6); }
  68%, 80% { opacity: 1; transform: none; }
}

/* Film grain, unblended (a blend layer this size would re-composite every
   frame under the turning gear). */
.scene-grain {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Hovering the hero button opens the line: the pressure climbs, the flow
   brightens and the sparks fire. */
.hero:has(.hero__cta .btn:hover) .gauge__needle-base {
  transform: rotate(92deg);
}

.hero:has(.hero__cta .btn:hover) .flow {
  opacity: 1;
}

.hero:has(.hero__cta .btn:hover) .s-gear i {
  animation: spark-on 0.9s ease-out;
}

@keyframes spark-on {
  0% { opacity: 0; transform: translateY(3px) scaleY(0.6); }
  30%, 70% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

/* Phones: the riser hugs the edge, the gauge drops onto the floor line. */
@media (max-width: 759px) {
  .hero__scene {
    --yb: calc(100% - 118px);
    --pt: 16px;
    --rx: 3%;
  }

  .hero__content {
    padding-inline: 40px;
  }

  .c-4 {
    top: 34%;
  }

  .p-gauge-stub,
  .s-gear {
    display: none;
  }

  .gauge {
    --gs: 74px;
    top: auto;
    bottom: calc(100% - var(--yb) + 10px);
    inset-inline-end: auto;
    inset-inline-start: 9%;
  }

  .scene-gear--big {
    --g: 330px;
    top: -150px;
    inset-inline-end: -110px;
  }
}