/* davideriboni.com v9 · biography pages (biography.html, biografia.html)
   Loaded after /v9.css. Page-only pieces: the international path (route) and the career reel.
   Owner rule: no halo, glow or wash. Coral-gold only on type, rules and actions.
   Every word is in the DOM and visible without JS and under reduced motion; the scroll effects
   below only change decorative lines and the outlined year numerals (aria-hidden). */

/* ---------- 02 · International path: Milan, Madrid, Turin, New York, Dubai ---------- */
.bio-intl .h2 { max-width: 14em; }
.route { position: relative; margin-top: 44px; padding-left: 30px; display: grid; gap: 30px; }
.prose > .route { margin-top: 44px; }
.route::before, .route::after { content: ""; position: absolute; left: 4px; top: 10px; bottom: 12px; width: 1px; background: var(--line); }
.route::after { background: linear-gradient(to bottom, #FF5F6D, #FFC371); transform-origin: 50% 0; }
:root[data-theme="light"] .route::after { background: linear-gradient(to bottom, #A52F43, #805017); }
.route__stop { position: relative; max-width: none; }
.prose .route > li { padding-left: 0; max-width: none; }
.prose .route > li::before {
  content: ""; position: absolute; left: -30px; top: 6px; width: 9px; height: 9px;
  background: var(--film); border: 1.5px solid var(--outline);
}
.prose .route > li.is-now::before { background: var(--grad); border: 0; }
.route__when { font: 600 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.route__city { margin-top: 6px; font: 400 44px/1.04 var(--serif); letter-spacing: -.015em; color: var(--text); font-variant-numeric: lining-nums; white-space: nowrap; }
.route__city .grad { padding-bottom: .12em; margin-bottom: -.12em; }
.route__what { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--text2); max-width: 17em; }
.prose > .bio-split { margin-top: 48px; }
.bio-split { display: grid; gap: 20px; }
.bio-split p { max-width: 37em; }

@media (min-width: 901px) {
  .route { padding-left: 0; padding-top: 40px; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 28px; margin-top: 64px; }
  .prose > .route { margin-top: 64px; }
  .route::before, .route::after { left: 0; right: 0; top: 4px; bottom: auto; width: auto; height: 1px; }
  .route::after { background: var(--grad); transform-origin: 0 50%; }
  :root[data-theme="light"] .route::after { background: linear-gradient(110deg, #A52F43, #805017); }
  .prose .route > li::before { left: 0; top: -40px; }
  .route__city { font-size: clamp(36px, 3.3vw, 52px); margin-top: 10px; }
  .route__what { margin-top: 12px; }
  .prose > .bio-split { margin-top: 72px; }
  .bio-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; align-items: start; padding-top: 40px; border-top: 1px solid var(--line); }
}

/* hero: two display lines at desktop widths ("Davide Riboni." / "Italian Group CEO.") */
@media (min-width: 901px) {
  .bio-hero .page-hero__title { font-size: clamp(60px, min(6.2vw, 11vh), 104px); max-width: none; }
}

/* ---------- 03 · Career: a vertical reel, big outlined years that light coral-gold as they cross the screen ---------- */
.bio-career .chapter__body > .h2 { max-width: 15em; }
.reel { --yr-fill: var(--bg); --yr-stroke: var(--outline); }
.prose > .reel { margin-top: 48px; }
.reel__year::before { content: attr(data-y); }
.reel__year {
  width: fit-content; max-width: none;
  font: 400 52px/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: lining-nums;
  margin: 0 0 10px; padding-bottom: .06em;
  /* two layers clipped to the glyphs: the coral-gold fill (wiped in from the left) over the page colour */
  background-image: var(--grad-text), linear-gradient(var(--yr-fill), var(--yr-fill));
  background-repeat: no-repeat; background-position: 0 0, 0 0; background-size: 0% 100%, 100% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px var(--yr-stroke);
}
.reel .is-now .reel__year { background-size: 100% 100%, 100% 100%; -webkit-text-stroke-color: transparent; }
.reel .is-minor .reel__year { font-size: 40px; }
/* on phones the year sits inside the rail, so the node lines up with it */
.prose .reel > li::before { top: 20px; }
.prose .reel > li.is-minor::before { top: 16px; }
.reel .timeline__fact { max-width: 37em; }

@media (min-width: 901px) {
  .prose > .reel { margin-top: 72px; }
  .prose .reel > li {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 26px;
    padding: 0; border-left: 0;
  }
  .prose .reel > li::before { display: none; }
  .reel__year {
    grid-column: 1; align-self: start; justify-self: start; position: sticky; top: calc(var(--head) + 28px);
    margin: -8px 0 0; font-size: clamp(76px, 7.4vw, 116px); line-height: .92;
  }
  .reel .is-minor .reel__year { font-size: clamp(56px, 4.9vw, 76px); margin-top: -4px; }
  /* each year releases before the next one arrives (the margin keeps a clear gap at the hand-over),
     and a second numeral for the same year (Soprana runs alongside IDS Borjomi) stays out of the sticky stack */
  .reel__year { margin-bottom: 64px; }
  .reel .is-minor .reel__year { margin-bottom: 44px; }
  .reel__year--same { visibility: hidden; }
  .reel__body { grid-column: 2; position: relative; border-left: 1px solid var(--line); padding: 0 0 72px 40px; }
  .reel > li:last-child .reel__body { padding-bottom: 4px; }
  .reel > li.is-minor .reel__body { padding-bottom: 44px; }
  .reel > li.is-minor:last-child .reel__body { padding-bottom: 4px; }
  .reel__body::before { content: ""; position: absolute; left: -5px; top: 8px; width: 9px; height: 9px; background: var(--grad); }
  .reel .is-minor .reel__body::before { background: var(--bg); border: 1.5px solid var(--outline); }
}

/* ---------- 04 · Boards: three rows of two; the Applied AI link ---------- */
.prose > .bio-ai { margin-top: 40px; color: var(--text); }

/* ---------- Scroll-linked light (browsers with scroll-driven animations, motion allowed) ----------
   Without support or under reduced motion: the route line is drawn, the current year is lit and the others are outlined. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .route { view-timeline-name: --route; view-timeline-axis: block; }
    .route::after { animation: route-draw-y linear both; animation-timeline: --route; animation-range: entry 40% cover 60%; }
    .reel > li { view-timeline-name: --reel; view-timeline-axis: block; }
    .reel__year, .reel .is-now .reel__year { animation: reel-light linear both; animation-timeline: --reel; animation-range: cover 0% cover 100%; }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
    .route::after { animation-name: route-draw-x; }
  }
}
@keyframes route-draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes route-draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes reel-light {
  0%, 20%   { background-size: 0% 100%, 100% 100%;   background-position: 0 0, 0 0;    -webkit-text-stroke-color: var(--yr-stroke); }
  34%       { background-size: 100% 100%, 100% 100%; background-position: 0 0, 0 0;    -webkit-text-stroke-color: transparent; }
  62%       { background-size: 100% 100%, 100% 100%; background-position: 100% 0, 0 0; -webkit-text-stroke-color: transparent; }
  78%, 100% { background-size: 0% 100%, 100% 100%;   background-position: 100% 0, 0 0; -webkit-text-stroke-color: var(--yr-stroke); }
}

@media print {
  .reel__year { background: none !important; -webkit-text-fill-color: #201E1C !important; -webkit-text-stroke: 0 !important; color: #201E1C !important; position: static !important; }
  .route::after { display: none; }
}