/* Context Conference kit for the MIT report page.
   Every value here is copied from the live conference page source,
   website/src/components-vue/common-panels/context26/Context26HeroPage.vue,
   which matches the bundle served at atlan.com/context-conference/ (checked 2026-10-12).
   Cool is the machine, warm is the human. Layouts stay cool-dominant; warm arrives,
   it never carpets. Do not invent new gradients: use these. */

:root {
  /* color, cool side */
  --c26-paper: #f9f9fc;
  --c26-field: #d2d4f6;
  --c26-periwinkle: #797de4;
  --c26-cool: #5f97f6;
  --c26-cool-deep: #2f66c4;
  /* color, warm side */
  --c26-warm: #fd8550;
  --c26-wash: #f9e0d8;
  /* neutrals */
  --c26-ink: #252530;
  --c26-slate: #555572;
  --c26-hairline: #e6e6f0;
  --c26-tint: rgba(210, 212, 246, 0.34);

  /* THE gradients. --c26-2temp is the button, the plates and every big colour moment. */
  --c26-2temp: linear-gradient(74deg, #5f97f6 29.7%, #fd8550 93.3%);
  --c26-2temp-strip: linear-gradient(90deg, #5f97f6 0%, #fd8550 100%);
  --c26-2temp-slash: linear-gradient(155deg, #5f97f6 20%, #fd8550 90%);
  --c26-2temp-statement: linear-gradient(
    18.68deg,
    #5f97f6 3.51%,
    #fd8550 86.25%
  );
  --c26-2temp-rule-v: linear-gradient(180deg, #5f97f6 0%, #fd8550 100%);
  --c26-2temp-wash: linear-gradient(
    74deg,
    rgba(253, 133, 80, 0.13) 0%,
    rgba(210, 212, 246, 0.16) 46%,
    rgba(95, 151, 246, 0.13) 100%
  );
  --c26-rule-h: linear-gradient(
    90deg,
    rgba(95, 151, 246, 0.45) 0%,
    rgba(253, 133, 80, 0.45) 100%
  );
  --c26-rule-v: linear-gradient(
    180deg,
    rgba(95, 151, 246, 0.45) 0%,
    rgba(253, 133, 80, 0.45) 100%
  );
  --c26-wedge: linear-gradient(90deg, #8b91c7 0%, #b98c97 100%);

  /* the agenda's seven accent stops, cool to warm in running order
     ("the day runs the wordmark gradient") */
  --c26-acc-1: #5f97f6;
  --c26-acc-2: #7994da;
  --c26-acc-3: #9491bf;
  --c26-acc-4: #ae8ea3;
  --c26-acc-5: #c88b87;
  --c26-acc-6: #e3886c;
  --c26-acc-7: #fd8550;

  /* motion */
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-travel: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-tap: 180ms;
  --dur-move: 420ms;
  --dur-arrive: 760ms;

  /* type */
  --f-display: "Funnel Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-tex: "Geist Mono", ui-monospace, Menlo, monospace;
}

/* ---- The hero atmosphere (.hero26 .washes / .grain), verbatim ----
   Put both as the first children of a position:relative section, under the content. */
.c26-washes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 72%,
    transparent 100%
  );
  mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
  background: radial-gradient(
      52% 42% at 0% 100%,
      #f9e0d8 0%,
      rgba(249, 224, 216, 0) 100%
    ),
    radial-gradient(
      40% 34% at 100% 96%,
      #f6e3dc 0%,
      rgba(246, 227, 220, 0) 100%
    ),
    radial-gradient(36% 30% at 100% 0%, #efeffa 0%, rgba(239, 239, 250, 0) 100%);
}
.c26-grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: soft-light;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 72%,
    transparent 100%
  );
  mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.55'/></svg>");
}
/* the footer's inverse wash (only if a version ever needs the warm floor glow) */
.c26-floor-wash {
  background: radial-gradient(
      56% 62% at 50% 118%,
      rgba(253, 133, 80, 0.2) 0%,
      rgba(253, 133, 80, 0) 100%
    ),
    radial-gradient(
      42% 48% at 4% 0%,
      rgba(95, 151, 246, 0.16) 0%,
      rgba(95, 151, 246, 0) 100%
    );
}

/* ---- The swirl canvas (#atmo). The canvas draws --bleed past its section and
   dissolves the tail, so the section must NOT clip it: use overflow: clip with
   overflow-clip-margin, exactly like .hero26. ---- */
.c26-swirl-host {
  position: relative;
  overflow: clip;
  overflow-clip-margin: var(--bleed, 200px);
}
.c26-swirl {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% + var(--bleed, 200px));
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* ---- The slash-cut PLATE (agenda .tl-plate). A card's right end carries the
   row's accent, cut along the wordmark's slash: a constant 18deg skew.
   Markup: <div class="c26-plate" aria-hidden="true"></div> as a child of a
   position:relative, border-radius'd card; set --acc on the card, and
   --plate-at to move the cut (79.5% on the agenda). Glyph canvases ride on it in white. ---- */
.c26-plate {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.c26-plate::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--plate-at, 79.5%);
  right: -40%;
  transform: skewX(-18deg);
  transform-origin: top left;
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--acc, #797de4) 88%, #252530) 0%,
    var(--acc, #797de4) 78%,
    color-mix(in srgb, var(--acc, #797de4) 78%, #fff) 100%
  );
}
/* the agenda's plate-rise reveal: the plate wipes up along its own slash, the glyph follows */
.js .c26-rise .c26-plate::before {
  transform: translateY(103%) skewX(-18deg);
}
.js .c26-rise.is-in .c26-plate::before {
  transform: translateY(0) skewX(-18deg);
  transition: transform 560ms var(--ease-settle);
  transition-delay: calc(var(--stag, 0) * 110ms);
}
.js .c26-rise {
  opacity: 0;
  transform: translateY(30px) scale(0.985);
  filter: blur(4px);
}
.js .c26-rise.is-in {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 560ms var(--ease-settle), transform 560ms
    var(--ease-settle), filter 560ms var(--ease-settle);
  transition-delay: calc(var(--stag, 0) * 110ms);
}

/* the agenda card itself */
.c26-card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(37, 37, 48, 0.04), 0 10px 26px
    rgba(37, 37, 48, 0.06);
  transition: transform var(--dur-move) var(--ease-settle), box-shadow
    var(--dur-move) var(--ease-travel);
}
.c26-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(37, 37, 48, 0.05), 0 18px 44px
    rgba(37, 37, 48, 0.1);
}
/* the research callout card */
.c26-callout {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e6e6f0;
  box-shadow: 0 2px 5px rgba(37, 37, 48, 0.04), 0 22px 52px
    rgba(37, 37, 48, 0.07);
}

/* agenda label: Geist Mono caps in the row accent (use slate for small text if contrast fails) */
.c26-label {
  font-family: var(--f-tex);
  font-weight: 700;
  font-size: 11.7px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c26-periwinkle);
}

/* ---- Gradient lines and strokes ---- */
.c26-edge-strip {
  height: 10px;
  background: var(--c26-2temp-strip);
}
.c26-rule-h {
  height: 1px;
  border: 0;
  background: var(--c26-rule-h);
}
.c26-rule-v {
  width: 1px;
  background: var(--c26-rule-v);
}
/* gradient stroke on a pill (agenda "Add to calendar") */
.c26-stroke-pill {
  position: relative;
  border-radius: 999px;
  background: transparent;
}
.c26-stroke-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  padding: 1px;
  background: var(--c26-2temp-strip);
  pointer-events: none;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

/* ---- The opening quote mark (.t-mark): Impact, gradient-clipped, out of flow ---- */
.c26-tmark {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  line-height: 0.62;
  user-select: none;
  pointer-events: none;
  background-image: var(--c26-2temp);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---- The leaning plate (.voices-plate): a parallelogram carrying the 2temp
   gradient, with a halftone portrait inside; one clip-path masks both. ---- */
.c26-lean {
  position: relative;
  overflow: hidden;
  background: var(--c26-2temp);
  clip-path: polygon(
    var(--lean, 22%) 0,
    100% 0,
    calc(100% - var(--lean, 22%)) 100%,
    0 100%
  );
}

/* ---- Glyph canvases (kit/c26-glyphs.js paints in the canvas's `color`) ---- */
.c26-glyph {
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
}

/* ---- The cover fan (kit/cover-fan.js). Give the host a width; height follows the art. ---- */
/* --amt is each panel's fold (0 = assembled, 1 = folded); registered so it animates with the turn */
@property --amt {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.cover-fan {
  position: relative;
  width: 100%;
  aspect-ratio: 1438 / 1100;
  perspective: 1600px;
  perspective-origin: 50% 40%;
}
.cover-fan > i {
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  will-change: transform;
  transition: transform var(--fan-dur, 900ms) var(--ease-settle), opacity
    var(--fan-dur, 900ms) var(--ease-settle), --amt var(--fan-dur, 900ms)
    var(--ease-settle);
  transition-delay: var(--fan-delay, 0ms);
}
/* tint: true. A soft two-temperature gradient rides each pane and slides across it as the pane
   turns, settling to a faint warmth once assembled; the far edge shades while it is turned. */
.cover-fan > i > .fan-tint {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: soft-light;
  background-image: linear-gradient(
      90deg,
      rgba(37, 37, 48, 0) 35%,
      rgba(37, 37, 48, calc(var(--amt) * 0.55)) 100%
    ), linear-gradient(90deg, #5f97f6 0%, #fd8550 50%, #5f97f6 100%);
  background-size: 100% 100%, 300% 100%;
  background-position: 0 0, calc(var(--amt) * 100%) 0;
  opacity: calc(0.22 + var(--amt) * 0.6);
}
.cover-fan > i > .fan-tint[data-near="right"] {
  background-image: linear-gradient(
      270deg,
      rgba(37, 37, 48, 0) 35%,
      rgba(37, 37, 48, calc(var(--amt) * 0.55)) 100%
    ), linear-gradient(270deg, #5f97f6 0%, #fd8550 50%, #5f97f6 100%);
}
.cover-fan--data {
  display: flex;
  align-items: flex-end;
  gap: var(--fan-gap, 6px);
  aspect-ratio: auto;
  perspective: 1600px;
}
.cover-fan--data > i {
  position: relative;
  top: auto;
  bottom: auto;
  flex: 0 0 auto;
  border-radius: 8px;
  overflow: hidden;
  transform-origin: 50% 100%;
}
.cover-fan--data > i::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.55;
  mix-blend-mode: soft-light;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
/* orient 'h': the cover's panes turned 90deg, stacked as slats that assemble like blinds */
.cover-fan--h {
  flex-direction: column;
  align-items: flex-start;
  perspective: 900px;
}
.cover-fan--h > i {
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .js .c26-rise,
  .js .c26-rise.is-in {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .js .c26-rise .c26-plate::before {
    transform: skewX(-18deg);
  }
  .cover-fan > i {
    transition: none !important;
  }
}