/* Aimlink | Start page "Built for": two lanes, not two cards (styles for assets/home-builtfor.js).
   The idea is the site's own movement language (DESIGNDIRECTION 0.1, point 6): scroll AIMS, a threshold FIRES, the result LANDS.
     aim      each lane opens like an iris as it scrolls in, and a lime reticle closes on the subject
     fire     one soft flash when the reticle locks
     land     the problem line, the lane's name and the gain arrive in turn
   Then it is yours: the lane you aim at (pointer or keyboard) grows, the other steps back, the problem line is struck through in
   lime, and a scope (Magic UI Lens) shows the photo in colour where you look. Magic UI BorderBeam rides the aimed lane's edge.
   Scroll-driven in CSS (animation-timeline: view()); browsers without it get the same sequence on a timer (class is-in from the script).
   Reduced motion: finished state, no iris, no reticle, no flash, no scope. The lanes are real links and read as one. */

/* ───────────── the section ───────────── */
.bfh-wrap { display: grid; gap: var(--gap-group); }
.bfh-head .lede { max-width: 28ch; }

.bfh-lanes { display: grid; gap: var(--space-4); }
.bfh-lane {
  --dim: 0.5;
  --bfh-r: 0px;
  position: relative; display: block; overflow: hidden; isolation: isolate;
  min-height: clamp(26rem, 70svh, 32rem); border-radius: var(--radius-panel);
  background: var(--color-night); color: var(--color-snow);
  clip-path: circle(150% at 50% 46%);   /* the iris: animated below, 150% is "all open" */
  -webkit-tap-highlight-color: transparent;
}
.bfh-lane:focus-visible { outline: 2px solid var(--color-lime); outline-offset: 4px; }

@media (min-width: 1000px) {
  .bfh-lanes { display: flex; gap: var(--space-3); height: clamp(32rem, 76svh, 43rem); }
  .bfh-lane { flex: 1 1 0; min-width: 0; min-height: 0; transition: flex-grow 800ms var(--ease-out); }
  .bfh-lane.is-aimed { flex-grow: 1.5; }
}

/* ───────────── the photo: dark and grey until you look at it ───────────── */
.bfh-media, .bfh-media picture, .bfh-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.bfh-media img { object-fit: cover; }
.bfh-base img { filter: grayscale(0.9) brightness(var(--dim)) contrast(1.05); transform: scale(1.07); transition: transform 1600ms var(--ease-out), filter 900ms var(--ease-out); }
.bfh-lane.is-aimed .bfh-base img { transform: scale(1); }
/* a lane stepping back while the other one is aimed */
.bfh-lanes:has(.bfh-lane.is-aimed) .bfh-lane:not(.is-aimed) .bfh-base img { filter: grayscale(1) brightness(calc(var(--dim) * 0.72)) contrast(1.05); }
/* the colour layer is visible only inside the scope (a circle of --bfh-r px at the pointer, or all of it when the lane is aimed by scroll) */
@property --bfh-r { syntax: '<length>'; inherits: true; initial-value: 0px; }
.bfh-color {
  -webkit-mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 58%), #000 calc(var(--bfh-r) - 1px), transparent var(--bfh-r));
          mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 58%), #000 calc(var(--bfh-r) - 1px), transparent var(--bfh-r));
  transition: --bfh-r 600ms var(--ease-out);
}
.bfh-lane.is-aimed { --bfh-r: 170px; }
.bfh-touch .bfh-lane.is-aimed { --bfh-r: 150vmax; --mx: 50%; --my: 60%; }
.bfh-touch .bfh-color { transition-duration: 1100ms; }
.bfh-lane::before {   /* the ground the words stand on */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgb(12 20 28 / 0.94) 0%, rgb(12 20 28 / 0.72) 30%, rgb(12 20 28 / 0.18) 62%, transparent 82%);
}

/* ───────────── the scope (Magic UI Lens): a ring with four ticks and a lime centre, the same drawing the site has always used for a sight ───────────── */
.bfh-scope, .bfh-reticle {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-snow) 90%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-night) 35%, transparent);
}
.bfh-scope::before, .bfh-reticle::before, .bfh-scope::after, .bfh-reticle::after { content: ""; position: absolute; background: color-mix(in srgb, var(--color-snow) 90%, transparent); }
.bfh-scope::before, .bfh-reticle::before {
  left: 50%; top: -9px; bottom: -9px; width: 1.5px; margin-left: -0.75px;
  -webkit-mask: linear-gradient(#000 0 9px, transparent 9px calc(100% - 9px), #000 calc(100% - 9px)); mask: linear-gradient(#000 0 9px, transparent 9px calc(100% - 9px), #000 calc(100% - 9px));
}
.bfh-scope::after, .bfh-reticle::after {
  top: 50%; left: -9px; right: -9px; height: 1.5px; margin-top: -0.75px;
  -webkit-mask: linear-gradient(90deg, #000 0 9px, transparent 9px calc(100% - 9px), #000 calc(100% - 9px)); mask: linear-gradient(90deg, #000 0 9px, transparent 9px calc(100% - 9px), #000 calc(100% - 9px));
}
.bfh-dot { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--color-lime); }
.bfh-scope { display: none; width: calc(var(--bfh-r) * 2); height: calc(var(--bfh-r) * 2); transform: translate(calc(var(--mx) - 50%), calc(var(--my) - 50%)); }
.bfh-pointer .bfh-scope { display: block; opacity: 0; transition: opacity 200ms var(--ease-out); }
.bfh-pointer .bfh-lane.is-aimed .bfh-scope { opacity: 1; }
.bfh-touch .bfh-scope { display: none !important; }
.bfh-ping { position: absolute; z-index: 3; left: 0; top: 0; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; border: 1.5px solid var(--color-lime); pointer-events: none; animation: bfh-ping 760ms var(--ease-out) both; }
@keyframes bfh-ping { from { opacity: 0.9; transform: scale(0.4); } to { opacity: 0; transform: scale(2.8); } }

/* ───────────── the words ───────────── */
.bfh-copy {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: var(--space-3);
  padding: clamp(1.25rem, 2.4vw, 2.25rem); padding-right: clamp(5rem, 7vw, 6.25rem); pointer-events: none;
}
.bfh-pain { font: 400 var(--type-small-size)/1.45 var(--font-text); color: rgb(244 246 248 / 0.7); max-width: 34ch; text-wrap: pretty; transition: color 600ms var(--ease-out); }
.bfh-pain span {   /* struck through when you aim: one lime line per line of text, drawn left to right */
  background: linear-gradient(var(--color-lime), var(--color-lime)) no-repeat 0 58% / 0% 1.5px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 700ms var(--ease-out) 120ms;
}
.bfh-lane.is-aimed .bfh-pain { color: rgb(244 246 248 / 0.52); }
.bfh-lane.is-aimed .bfh-pain span { background-size: 100% 1.5px; }
.bfh-title {
  font: var(--type-display-m-weight) clamp(2.25rem, 1.4rem + 2.2vw, 3.5rem)/0.94 var(--font-display);
  letter-spacing: var(--type-display-m-tracking); text-transform: uppercase; text-wrap: balance;
}
.bfh-title em { font-style: italic; color: var(--color-lime); padding-right: 0.06em; }
.bfh-gain { font: var(--type-body-weight) var(--type-body-size)/1.5 var(--font-text); color: var(--color-snow); max-width: 34ch; text-wrap: pretty; }
.bfh-go {
  position: absolute; z-index: 2; right: clamp(1.25rem, 2.4vw, 2.25rem); bottom: clamp(1.25rem, 2.4vw, 2.25rem);
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%;
  border: 1px solid rgb(244 246 248 / 0.5); color: var(--color-snow); pointer-events: none;
  transition: background-color 350ms var(--ease-out), color 350ms var(--ease-out), border-color 350ms var(--ease-out), transform 500ms var(--ease-out);
}
.bfh-go svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 500ms var(--ease-out); }
.bfh-lane.is-aimed .bfh-go { background: var(--color-lime); border-color: var(--color-lime); color: var(--color-night); transform: scale(1.08); }
.bfh-lane.is-aimed .bfh-go svg { transform: translateX(3px); }

/* the aimed lane's edge: Magic UI BorderBeam (built by the script, runs only while the lane is aimed) */
.bfh-lane > .mu-fx-beam { z-index: 4; opacity: 0; transition: opacity 500ms var(--ease-out); }
.bfh-lane.is-aimed > .mu-fx-beam { opacity: 1; }
.bfh-lane:not(.is-aimed) > .mu-fx-beam .mu-fx-beam-dot { animation-play-state: paused; }

/* ───────────── aim, fire, land: the arrival ───────────── */
.bfh-reticle { display: none; top: 42%; left: 50%; width: min(10.5rem, 44%); aspect-ratio: 1; transform: translate(-50%, -50%); opacity: 0; }
.bfh-flash { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle at 50% 42%, rgb(244 246 248 / 0.34), transparent 62%); opacity: 0; display: none; }
@keyframes bfh-open { from { clip-path: circle(0% at 50% 46%); } to { clip-path: circle(150% at 50% 46%); } }
@keyframes bfh-lock {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(2.7); }
  40%  { opacity: 1; }
  72%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}
@keyframes bfh-flash { 0%, 55% { opacity: 0; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bfh-land { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes bfh-img { from { transform: scale(1.18); } to { transform: scale(1.07); } }

@media (prefers-reduced-motion: no-preference) {
  /* A. scrolled: the sequence is tied to the lane's entry into the viewport, so it can be scrubbed backwards */
  @supports (animation-timeline: view()) {
    .bfh-reticle, .bfh-flash { display: block; }
    /* the lane owns the timeline (an overflow:hidden ancestor would otherwise be its children's scroller). The ranges are in "cover" terms:
       0% = the lane's top edge reaches the bottom of the screen, about 43% = it has fully come in. The words land at 40 to 50%, when they are well on screen. */
    .bfh-lane { view-timeline: --bfh-lane block; animation: bfh-open linear both; animation-timeline: --bfh-lane; animation-range: cover calc(0% + var(--off, 0%)) cover calc(30% + var(--off, 0%)); }
    .bfh-lane .bfh-base img { animation: bfh-img linear both; animation-timeline: --bfh-lane; animation-range: cover 0% cover 60%; }
    .bfh-reticle { animation: bfh-lock linear both; animation-timeline: --bfh-lane; animation-range: cover calc(4% + var(--off, 0%)) cover calc(41% + var(--off, 0%)); }
    .bfh-flash { animation: bfh-flash linear both; animation-timeline: --bfh-lane; animation-range: cover calc(33% + var(--off, 0%)) cover calc(43% + var(--off, 0%)); }
    .bfh-pain { animation: bfh-land ease-out both; animation-timeline: --bfh-lane; animation-range: cover calc(37% + var(--off, 0%)) cover calc(44% + var(--off, 0%)); }
    .bfh-title { animation: bfh-land ease-out both; animation-timeline: --bfh-lane; animation-range: cover calc(40% + var(--off, 0%)) cover calc(47% + var(--off, 0%)); }
    .bfh-gain { animation: bfh-land ease-out both; animation-timeline: --bfh-lane; animation-range: cover calc(43% + var(--off, 0%)) cover calc(50% + var(--off, 0%)); }
    .bfh-go { animation: bfh-land ease-out both; animation-timeline: --bfh-lane; animation-range: cover calc(45% + var(--off, 0%)) cover calc(52% + var(--off, 0%)); }
  }
  /* B. no scroll timelines: the same sequence on a timer once the lanes are in view (the script sets bfh-armed, then is-in) */
  .bfh-armed .bfh-reticle, .bfh-armed .bfh-flash { display: block; }
  .bfh-armed:not(.is-in) .bfh-lane { clip-path: circle(0% at 50% 46%); }
  .bfh-armed:not(.is-in) .bfh-pain, .bfh-armed:not(.is-in) .bfh-title, .bfh-armed:not(.is-in) .bfh-gain, .bfh-armed:not(.is-in) .bfh-go { opacity: 0; }
  /* (where scroll timelines do exist, as in a test that forces this path, the timer must win over them) */
  .bfh-armed.is-in :is(.bfh-lane, .bfh-reticle, .bfh-flash, .bfh-pain, .bfh-title, .bfh-gain, .bfh-go) { animation-timeline: auto; animation-range: normal; }
  .bfh-armed.is-in .bfh-lane { animation: bfh-open 1000ms var(--ease-out) calc(var(--n, 0) * 180ms) both; }
  .bfh-armed.is-in .bfh-reticle { animation: bfh-lock 1100ms ease-in-out calc(var(--n, 0) * 180ms + 100ms) both; }
  .bfh-armed.is-in .bfh-flash { animation: bfh-flash 900ms linear calc(var(--n, 0) * 180ms + 700ms) both; }
  .bfh-armed.is-in .bfh-pain { animation: bfh-land 700ms var(--ease-out) calc(var(--n, 0) * 180ms + 800ms) both; }
  .bfh-armed.is-in .bfh-title { animation: bfh-land 700ms var(--ease-out) calc(var(--n, 0) * 180ms + 920ms) both; }
  .bfh-armed.is-in .bfh-gain { animation: bfh-land 700ms var(--ease-out) calc(var(--n, 0) * 180ms + 1040ms) both; }
  .bfh-armed.is-in .bfh-go { animation: bfh-land 700ms var(--ease-out) calc(var(--n, 0) * 180ms + 1160ms) both; }
}
@media (prefers-reduced-motion: reduce) {
  .bfh-lane, .bfh-base img, .bfh-color, .bfh-go, .bfh-go svg, .bfh-pain, .bfh-pain span { transition-duration: 0.01ms; }
  .bfh-scope, .bfh-reticle, .bfh-flash, .bfh-ping, .bfh-lane > .mu-fx-beam { display: none !important; }
}