/* DevOps as a Profession. The student stands in the workplace: a photo of
   it fills the page, darkened so the neon picture and the branches glow over
   it. Dark in both modes, as the picture is. */

:root {
  --bg: #121417;
  --text: #f1f4f8;
  --dim: #b5bfcb;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fold: 1190ms;   /* anything dissolving, from full view to gone: evenly, so it is seen fading all the way; FOLD in the JS */
  --form: 2080ms;   /* anything appearing; FORM in the JS */
  /* Appearing, a thing turns faintly visible early and then sharpens slowly,
     so it is seen forming for the whole time, as it is seen dissolving */
  --faint-early: cubic-bezier(0.15, 0.55, 0.35, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.pv-app { height: 100%; display: flex; flex-direction: column; }
.pv-head { flex: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.9rem; padding: 0.5rem 16px; }
.pv-head h1 { font-size: 1.3rem; margin: 0; }
.pv-head p { margin: 0; color: var(--dim); font-size: 0.92rem; }
.in-viewer .pv-head { display: none; }

/* --- the room: the stage is drawn at its design size and scaled to fit */
.pv-room { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.pv-stage { position: absolute; left: 50%; top: 50%; transform-origin: center; }
/* The workplace behind the student: a photo whose edge fades out along a
   wavy line (baked into its alpha), centred in the room */
.backdrop { position: absolute; inset: 2%; }
.backdrop .room { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0;
  filter: brightness(0.5) saturate(0.9); transform: scale(0.97);
  transition: opacity 1.8s ease, transform 20s linear; }
.backdrop .room.on { opacity: 1; transform: scale(1.04); }
/* A tall screen: the photo fills the height and is cut at the screen's sides, keeping its fade top and bottom */
@media (max-aspect-ratio: 4/5) {
  .backdrop { inset: 6% 0; }
  .backdrop .room { object-fit: cover; }
}

/* --- the lines: drawn out from their start (pathLength 1) */
.lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; pointer-events: none; }
.line { fill: none; stroke: var(--c); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  opacity: 0; filter: blur(6px) drop-shadow(0 0 5px var(--c));
  transition: stroke-dashoffset var(--fold) ease-in-out, opacity var(--fold) linear, filter var(--fold) ease-in; }
.line.trunk { stroke-width: 3.4; }
/* A line grows while it gathers out of a soft blur */
.line.on { stroke-dashoffset: 0; opacity: 0.9; filter: blur(0) drop-shadow(0 0 5px var(--c));
  transition: stroke-dashoffset var(--form) ease-in-out, opacity var(--form) var(--faint-early), filter var(--form) ease-in-out; }

/* --- the student */
.pic { position: absolute; z-index: 2; transform: translate(-50%, -50%); padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.pic img { position: relative; display: block; width: 100%; height: 100%;
  animation: pv-appear 2.4s ease-out backwards, pv-float 7s ease-in-out 2.4s infinite; transition: filter 0.4s; }
@keyframes pv-appear { 0% { opacity: 0; filter: blur(18px) brightness(2.2); } 60% { opacity: 1; filter: blur(2px) brightness(1.4); } 100% { filter: none; } }
.pic::before { content: ''; position: absolute; inset: -18%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(8, 10, 14, 0.85), rgba(8, 10, 14, 0.5) 60%, transparent); }
.pic:hover img, .pic:focus-visible img { filter: brightness(1.2) drop-shadow(0 0 14px rgba(70, 160, 255, 0.5)); }
.pic:focus-visible { outline: none; }
@keyframes pv-float { 50% { transform: translateY(-6px); } }
/* A ring breathing round the student while nothing is open */
.halo { position: absolute; left: 50%; top: 52%; width: 92%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  border: 2px solid rgba(80, 170, 255, 0.55); box-shadow: 0 0 24px rgba(60, 150, 255, 0.35), inset 0 0 24px rgba(60, 150, 255, 0.2);
  opacity: 0; transition: opacity 0.6s; }
.pv-stage[data-level="0"] .halo { opacity: 1; animation: pv-breathe 2.8s ease-in-out infinite; }
@keyframes pv-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(0.94); opacity: 0.35; } 50% { transform: translate(-50%, -50%) scale(1.04); opacity: 1; } }
.invite { position: absolute; z-index: 3; width: 0; height: 0; pointer-events: none; transition: opacity 0.6s; }
.pv-stage:not([data-level="0"]) .invite { opacity: 0; }
/* The hand comes in from below right, presses on the student, and a ripple spreads from where it pressed */
.invite .hand { position: absolute; width: 54px; height: 54px; fill: none; stroke: #e8f4ff; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(90, 180, 255, 0.9)) drop-shadow(0 0 14px rgba(90, 180, 255, 0.5));
  animation: pv-invite 4.2s ease-in-out infinite 1.5s both; }
.invite.mouse .hand { width: 30px; height: 30px; left: -3.75px; top: -2.5px; fill: rgba(232, 244, 255, 0.15); transform-origin: 3.75px 2.5px; }
.invite.touch .hand { left: -18px; top: -4.5px; transform-origin: 18px 4.5px; }
@keyframes pv-invite {
  0% { opacity: 0; translate: 110px 95px; scale: 1; }
  12% { opacity: 1; }
  42% { translate: 0 0; scale: 1; }
  50% { translate: 0 0; scale: 0.82; }
  58% { translate: 0 0; scale: 1; }
  80% { opacity: 1; translate: 0 0; }
  95%, 100% { opacity: 0; translate: 6px 5px; }
}
.invite .ripple { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%;
  border: 2px solid rgba(110, 190, 255, 0.9); box-shadow: 0 0 16px rgba(80, 170, 255, 0.6), inset 0 0 12px rgba(80, 170, 255, 0.4);
  opacity: 0; animation: pv-ripple 4.2s ease-out infinite 1.5s both; }
.invite .ripple.late { animation-delay: 1.8s; }
.invite.mouse .ripple { left: -28px; top: -28px; width: 56px; height: 56px; }
@keyframes pv-ripple {
  0%, 49% { opacity: 0; transform: scale(0.15); }
  51% { opacity: 1; transform: scale(0.2); }
  85%, 100% { opacity: 0; transform: scale(2.6); }
}

/* --- the branches and their items: pills that glow in the branch's colour */
.node { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; white-space: nowrap; cursor: pointer;
  transform: translate(-50%, -50%) scale(1.06); opacity: 0; filter: blur(10px); pointer-events: none;
  padding: 9px 18px 9px 12px; border-radius: 999px; font-family: inherit; font-size: 18px; font-weight: 600; line-height: 1.2; color: var(--text);
  background: color-mix(in srgb, var(--c) 16%, rgba(14, 16, 20, 0.82)); border: 1.5px solid color-mix(in srgb, var(--c) 75%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--c) 35%, transparent), inset 0 0 12px color-mix(in srgb, var(--c) 15%, transparent);
  backdrop-filter: blur(3px);
  transition: opacity var(--fold) linear, filter var(--fold) ease-in, transform var(--fold) ease-in, box-shadow 0.4s, background 0.4s; }
.node.on { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: blur(0); pointer-events: auto;
  transition: opacity var(--form) var(--faint-early) var(--d, 0ms), filter var(--form) ease-in-out var(--d, 0ms),
    transform var(--form) ease-in-out var(--d, 0ms), box-shadow 0.4s, background 0.4s; }
.node.on:hover, .node.on:focus-visible { outline: none; background: color-mix(in srgb, var(--c) 30%, rgba(14, 16, 20, 0.85));
  box-shadow: 0 0 28px color-mix(in srgb, var(--c) 60%, transparent), inset 0 0 14px color-mix(in srgb, var(--c) 25%, transparent); }
.node .ico { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 4px var(--c)); }
.hub { font-size: 21px; padding: 11px 22px 11px 14px; letter-spacing: 0.01em; }
.hub .ico { width: 30px; height: 30px; }
.hub.chosen { background: color-mix(in srgb, var(--c) 28%, rgba(14, 16, 20, 0.85)); }
/* An item that has opened into its card hides behind it */
.kid.chosen.on { opacity: 0; }

/* --- the card: an item's explanation */
.card { position: absolute; z-index: 4; transform: translate(-50%, -50%) scale(1.05); opacity: 0; filter: blur(12px); pointer-events: none; cursor: pointer;
  padding: 18px 22px 14px; border-radius: 18px; color: var(--text); overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 22%, rgba(14, 16, 20, 0.92)), rgba(14, 16, 20, 0.92) 60%);
  border: 1.5px solid color-mix(in srgb, var(--c) 80%, transparent);
  box-shadow: 0 0 34px color-mix(in srgb, var(--c) 40%, transparent), 0 18px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  transition: opacity var(--fold) linear, filter var(--fold) ease-in, transform var(--fold) ease-in; }
.card.on { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: blur(0); pointer-events: auto;
  transition: opacity var(--form) var(--faint-early) var(--d, 0ms), filter var(--form) ease-in-out var(--d, 0ms),
    transform var(--form) ease-in-out var(--d, 0ms); }
.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.card-head .ico { width: 34px; height: 34px; flex: none; fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 5px var(--c)); }
.card h2 { margin: 0; font-size: 24px; color: color-mix(in srgb, var(--c) 45%, #fff); }
.card .main { margin: 0 0 8px; font-size: 19px; line-height: 1.45; font-weight: 600; }
.card ul { margin: 0 0 6px; padding-inline-start: 22px; padding-inline-end: 0; font-size: 17px; line-height: 1.45; color: var(--dim); }
.card li { margin-bottom: 4px; }
.card .jobs { display: flex; gap: 12px; margin: 12px 0 0; }
.card .jobs > div { flex: 1; padding: 8px 12px; border-radius: 12px; text-align: center;
  background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
/* A figure reads left to right in a Hebrew card too: 2,000+, not +2,000 */
.card .jobs b { direction: ltr; unicode-bidi: isolate; display: block; font-size: 28px; line-height: 1.1; color: color-mix(in srgb, var(--c) 40%, #fff);
  text-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); }
.card .jobs span { font-size: 14px; color: var(--dim); }
.card .jobs .trend { flex: 1.4; display: flex; flex-direction: column; justify-content: flex-end; }
.card .bars { display: flex; align-items: flex-end; justify-content: center; gap: 14px; height: 64px; margin: 20px 0 4px; }
.card .bars i { font-style: normal; position: relative; width: 26px; height: var(--h); border-radius: 5px 5px 2px 2px; margin-bottom: 16px;
  background: linear-gradient(to top, color-mix(in srgb, var(--c) 45%, transparent), var(--c)); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 50%, transparent); }
.card .bars i b { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font-size: 13px; line-height: 1.4; text-shadow: none; color: #fff; }
.card .bars i span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); font-size: 12px; line-height: 1.5; }
.portrait .card .bars { height: 84px; gap: 20px; margin-top: 28px; }
.portrait .card .bars i { width: 34px; margin-bottom: 22px; }
.portrait .card .bars i b { font-size: 18px; }
.portrait .card .bars i span { font-size: 16px; }
.card .source { margin: 4px 0 0; font-size: 12.5px; color: var(--dim); opacity: 0.8; }
.portrait .card .jobs b { font-size: 38px; }
.portrait .card .jobs span { font-size: 19px; }
.portrait .card .source { font-size: 17px; }
.card .keep { margin: 10px 0 0; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 60%, #fff); opacity: 0.7; }
.pinned .card .keep { opacity: 1; }
.pinned .card .keep::before { content: '● '; }
/* The bar along the card's foot drains while it waits */
.clock { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.06); }
.clock i { display: block; height: 100%; background: var(--c); box-shadow: 0 0 8px var(--c); transform-origin: left;
  animation: pv-drain linear forwards; }
[dir="rtl"] .clock i { transform-origin: right; }
.card.on .clock i { animation-name: pv-drain; }
.pinned .clock { opacity: 0; transition: opacity 0.4s; }
@keyframes pv-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Opened from a link: no transitions on the first frame */
.instant .node, .instant .card, .instant .line, .instant .room { transition: none !important; animation: none !important; }
.instant .pic img { animation: pv-float 7s ease-in-out infinite; }

/* Portrait: bigger type, since the stage scales down on a phone */
.portrait .node { font-size: 24px; }
.portrait .hub { font-size: 27px; }
.portrait .card h2 { font-size: 32px; }
.portrait .card .main { font-size: 26px; }
.portrait .card ul { font-size: 23px; }
.portrait .invite .hand { width: 70px; height: 70px; }
.portrait .invite.mouse .hand { width: 38px; height: 38px; left: -4.75px; top: -3.2px; transform-origin: 4.75px 3.2px; }
.portrait .invite.touch .hand { left: -23px; top: -6px; transform-origin: 23px 6px; }
@media (prefers-reduced-motion: reduce) {
  /* The fades stay, since they are the drawing's whole motion; only the drift and zoom go */
  .pic img, .halo { animation: none !important; }
  .invite .hand { animation: none !important; opacity: 1; }
  .backdrop .room, .backdrop .room.on { transform: none; }
  .node, .node.on, .card, .card.on { transform: translate(-50%, -50%); }
}