/* ==========================================================================
   Conferences 2026 page (/conferences-2026/)
   --------------------------------------------------------------------------
   Loaded after main.css. Uses its tokens, .grid, .container, .section,
   .section--cream, .eyebrow, .link and the scroll reveal.

   Contents
     1. Page tokens and shared bits
     2. Hero
     3. Promises and introduction
     4. Five jobs
     5. What we do instead
     6. Where we will be (event cards)
     7. Find your sector (table)
     8. When each event runs (timeline)
     9. Three ways to work with us
    10. Interested?
    11. Your hosts
    12. Card hover (works together with the scroll reveal)
   ========================================================================== */


/* 1. Page tokens and shared bits ----------------------------------------
   Below the introduction the original page is built from code blocks with
   their own fixed sizes. Each section here is one such block: content up to
   1120px wide, kept 6vw inside the page gutter on smaller screens, with the
   block's line height and letter spacing inherited by everything inside.
   The colours are the ones the original blocks use. */

:root {
  --conf-ink: #14161a;           /* headings and strong text */
  --conf-text: #4a4d53;          /* running text in cards and leads */
  --conf-label: #9a9da3;         /* small uppercase labels */
  --conf-summary: #8a8d93;       /* level summary line */
  --conf-rule: #eeedea;          /* rules in the promises and five jobs blocks */
  --conf-line: #ede6e0;          /* hairlines inside cards and the table */
  --conf-price: #faf8f6;         /* price box */
  --conf-dot-off: #e5dcd4;       /* empty dot in the "work we take on" meter */
  --conf-row-hover: #fff0ee;     /* sector table row under the pointer */
  --conf-max: 1120px;            /* content width of the blocks */
  --conf-radius: 16px;           /* cards */
  --conf-lh: calc(1.5 * var(--text-base));       /* inherited line height */
  /* Cards keep their minimum width (300px, 320px) like the original, which
     lets them run into the block's side padding on a phone, but never past
     the page gutter. */
  --conf-card-cap: calc(100vw - 2 * var(--gutter) - 6vw);
  --conf-ls: calc(-0.04 * var(--text-base));     /* inherited letter spacing */
}

/* Every block gets the page's section padding and nothing more, so the
   space between two blocks is the same all down the page (Peter asked for
   even spacing; the original blocks each had their own). */
.conf-section {
  padding-block: var(--section-sm);
}

.container--program {
  max-width: none;
  padding-inline: max(calc(var(--gutter) + 6vw), calc((100% - var(--conf-max)) / 2));
  line-height: var(--conf-lh);
  letter-spacing: var(--conf-ls);
}

/* Inside the blocks every element sets its own spacing. */
.container--program :where(p, h2, h3, h4, ul, ol, dl, dd) {
  margin: 0;
}

/* The hosts block sits on the page gutter, without the extra 6vw. */
.conf-section--hosts .container--program {
  padding-inline: max(var(--gutter), calc((100% - var(--conf-max)) / 2));
}

.conf-title {
  margin-bottom: 24px;
  color: var(--conf-ink);
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.0992;
  letter-spacing: -0.01em;
  text-wrap: wrap;
}

.conf-section--jobs .conf-title {
  margin-bottom: 40px;
  line-height: 1.2;
}

#events .conf-title {
  margin-bottom: 32px;
}

.conf-title--small {
  margin-bottom: 40px;
  font-size: clamp(28px, 3.6vw, 40px);
}

.conf-lead {
  max-width: 720px;
  margin-bottom: 48px;
  color: var(--conf-text);
  font-size: 20px;
  line-height: 1.6;
}

#sectors .conf-lead,
#calendar .conf-lead {
  margin-bottom: 40px;
}

.conf-note {
  max-width: 720px;
  margin-top: 32px;
  color: var(--conf-text);
  font-size: 17px;
  line-height: 1.6;
}

#calendar .conf-note {
  margin-top: 0;
}

/* Headings inside the blocks: h3 keeps the site's heading tracking, the
   ones that were plain text on the original inherit the block's. */
.jobs__title,
.steps__title,
.region__title,
.event-card__name,
.timeline__title,
.level-card__title,
.addon-card__title,
.host__name {
  color: var(--conf-ink);
  font-weight: 700;
  text-wrap: wrap;
}

.steps__title,
.region__title,
.level-card__title,
.addon-card__title {
  line-height: 1.1232;
  letter-spacing: -0.05em;
}

.jobs__title,
.event-card__name,
.timeline__title,
.host__name {
  line-height: var(--conf-lh);
  letter-spacing: inherit;
}

/* White card surface */
.steps__item,
.event-card,
.level-card,
.addon-card,
.interested,
.host {
  border-radius: var(--conf-radius);
  background: var(--color-white);
}


/* 2. Hero ----------------------------------------------------------------
   The text sits on the page grid. The artwork (1870x841) is a red band with
   white margins above and below; like the original it covers the hero plus
   the strip under the header, so the top margin stays out of sight. */

.conf-hero {
  position: relative;
  overflow: hidden;
  padding: 3vw 0 calc(2 * var(--section-sm));
  background: var(--color-red);
  color: var(--color-white);
}

.conf-hero__art {
  position: absolute;
  top: calc(-1 * var(--header-height));
  left: 0;
  width: 100%;
  max-width: none;
  height: calc(100% + var(--header-height));
  object-fit: cover;
}

.conf-hero__grid {
  --rows-m: 10;
  --rows: 10;
  position: relative;
}

.conf-hero__title {
  grid-area: 1 / 2 / 3 / 10;
  text-wrap: wrap;
}

.conf-hero__tagline {
  grid-area: 3 / 2 / 5 / 10;
  margin: 0;
}

.conf-hero__when {
  grid-area: 5 / 2 / 11 / 10;
}

.conf-hero__dates {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 40px;
  padding: 12px 18px;
  border-radius: 12px;
  background: rgb(0 0 0 / 0.28);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: var(--conf-ls);
  white-space: nowrap;
}

.conf-hero__dates svg {
  flex: 0 0 18px;
}

@media (min-width: 768px) {
  .conf-hero__title { grid-area: 1 / 5 / 8 / 18; }
  .conf-hero__tagline { grid-area: 8 / 5 / 9 / 14; }
  .conf-hero__when { grid-area: 9 / 5 / 11 / 9; }
}


/* 3. Promises and introduction ------------------------------------------- */

.conf-intro__grid {
  --rows-m: 14;
  --rows: 13;
}

.conf-intro__promises { grid-area: 1 / 2 / 7 / 10; }
.conf-intro__title { grid-area: 7 / 2 / 9 / 10; }
.conf-intro__text { grid-area: 9 / 2 / 15 / 10; }

@media (min-width: 768px) {
  .conf-intro__promises { grid-area: 1 / 2 / 6 / 26; }
  .conf-intro__title { grid-area: 6 / 6 / 8 / 18; }
  .conf-intro__text { grid-area: 8 / 6 / 14 / 20; }
}

/* content-box: the 6vw padding comes on top of the 1120px, as on the original */
.promises {
  display: grid;
  box-sizing: content-box;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  max-width: var(--conf-max);
  margin: 0 auto;
  padding: 56px 6vw;
  border-bottom: 1px solid var(--conf-rule);
  line-height: var(--conf-lh);
  letter-spacing: var(--conf-ls);
}

.promises dt {
  margin-bottom: 8px;
  color: var(--conf-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.promises dd {
  margin: 0;
  color: var(--conf-ink);
  font-size: 19px;
  font-weight: 700;
}


/* 4. Five jobs ------------------------------------------------------------ */

.jobs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px;
  padding: 0;
  list-style: none;
}

/* The number with a hairline running to the next step */
.jobs__num {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--color-red-bright);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.jobs__num::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--conf-rule);
}

.container--program .jobs__when {
  margin-bottom: 4px;
  color: var(--conf-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.container--program .jobs__title {
  margin-bottom: 8px;
  font-size: 21px;
  line-height: 1.25;
}

.jobs__text {
  color: var(--conf-text);
  font-size: 17px;
  line-height: 1.6;
}

.container--program .jobs__summary {
  max-width: 640px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--conf-rule);
  color: var(--conf-ink);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
}


/* 5. What we do instead -------------------------------------------------- */

.steps {
  display: grid;
  gap: 20px;
  padding: 0;
  list-style: none;
}

.steps__item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 20px;
  align-items: start;
  padding: 24px;
}

.steps__num {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--color-red-bright);
  color: var(--color-white);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.4s var(--ease-out);
}

.steps__item:hover .steps__num {
  transform: rotate(-6deg) scale(1.06);
}

.container--program .steps__title {
  margin-bottom: 8px;
  font-size: 21px;
}

.steps__text {
  color: var(--conf-text);
  font-size: 17px;
  line-height: 1.6;
}

.container--program .callout {
  max-width: 720px;
  margin-top: 40px;
  padding: 4px 0 4px 24px;
  border-left: 4px solid var(--color-red-bright);
  color: var(--conf-ink);
  font-size: 20px;
  line-height: 1.6;
}


/* 6. Where we will be ------------------------------------------------------
   One <article class="event-card"> per event, grouped by region. */

.region + .region {
  margin-top: 48px;
}

.container--program .region__title {
  margin-bottom: 8px;
  font-size: 21px;
}

.container--program .region__intro {
  max-width: 720px;
  margin-bottom: 32px;
  color: var(--conf-text);
  font-size: 17px;
  line-height: 1.6;
}

.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, var(--conf-card-cap)), 1fr));
  gap: 24px;
}

.event-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
}

/* Logo box: a fixed-height panel, the logo is fitted inside it. */
.event-card__logo {
  position: relative;
  display: grid;
  place-items: center;
  height: 160px;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--color-sand);
  color: var(--conf-ink);
  text-decoration: none;
}

.event-card__logo--dark {
  background: var(--conf-ink);
  color: var(--color-white);
}

/* The image fills the fixed-height box exactly, so a logo is scaled down, never cropped. */
.event-card__logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 24px;
  object-fit: contain;
  transition: transform 0.6s var(--ease-out);
}

.event-card__logo--cover img {
  padding: 0;
  object-fit: cover;
}

/* Text stand-in for events whose logo we do not have */
.event-card__wordmark {
  padding: 24px;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
  transition: transform 0.6s var(--ease-out);
}

.event-card:hover .event-card__logo img,
.event-card:hover .event-card__wordmark {
  transform: scale(1.04);
}

.container--program .event-card__name {
  margin-bottom: 6px;
  font-size: 21px;
}

.container--program .event-card__when {
  margin-bottom: 2px;
  color: var(--color-red-bright);
  font-size: 15px;
  font-weight: 600;
}

.container--program .event-card__venue,
.container--program .event-card__facts {
  margin-bottom: 16px;
  color: var(--conf-text);
  font-size: 15px;
}

.container--program .event-card__tags {
  margin-bottom: 16px;
  padding: 0;
  list-style: none;
}

.event-card__tags li {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-sand);
  color: var(--conf-ink);
  font-size: 13px;
  font-weight: 600;
}

.container--program .event-card__text {
  margin-bottom: 16px;
  color: var(--conf-text);
  font-size: 17px;
  line-height: 1.6;
}

/* Pinned to the bottom so the footers line up across a row */
.event-card__footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--conf-line);
  font-size: 15px;
}

.event-card__site {
  display: inline-block;
  margin-bottom: 4px;
  color: var(--color-red-bright);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.event-card__site:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.event-card__team {
  color: var(--conf-text);
}

.event-card__team strong {
  color: var(--conf-ink);
  font-weight: 600;
}


/* 7. Find your sector ------------------------------------------------------
   The table keeps its full width and scrolls inside .table-scroll on small
   screens; the sector names stay pinned on the left while it scrolls. */

.table-scroll {
  /* relative: the visually hidden labels inside are absolutely positioned
     and would otherwise escape the scroller and widen the page. */
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  background: var(--color-white);
}

.sector-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  background: var(--color-white);
}

.sector-table thead th {
  padding: 14px 8px;
  border-bottom: 2px solid var(--conf-ink);
  color: var(--conf-ink);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  vertical-align: bottom;
}

.sector-table tbody tr {
  background: var(--color-white);
  transition: background-color 0.2s;
}

.sector-table tbody tr:nth-child(even) {
  background: var(--color-sand);
}

.sector-table tbody tr:hover {
  background: var(--conf-row-hover);
}

.sector-table tbody th,
.sector-table td {
  border-bottom: 1px solid var(--conf-line);
}

.sector-table tbody tr:last-child > * {
  border-bottom: 0;
}

.sector-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  padding: 14px 16px 14px 20px;
  background: inherit;
  color: var(--conf-ink);
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.sector-table td {
  padding: 14px 8px;
  text-align: center;
}

/* The red dot; the cell also holds a visually hidden "Yes" or "No". */
.sector-table td.is-yes::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-red-bright);
}

.container--program .sector-legend {
  max-width: 900px;
  margin-top: 24px;
}

.sector-legend div {
  color: var(--conf-text);
  font-size: 15px;
  line-height: 1.9;
}

.sector-legend dt,
.sector-legend dd {
  display: inline;
  margin: 0;
}

.sector-legend dt {
  color: var(--conf-ink);
  font-weight: 700;
}


/* 8. When each event runs ---------------------------------------------------
   conferences.js sets --days on each month, --left on ticks, and --left (or
   --right) and --width on bars. Without JavaScript the ticks are spread
   evenly and the bars simply stack, which still reads fine. */

.timeline-scroll {
  /* relative: the visually hidden labels inside are absolutely positioned
     and would otherwise escape the scroller and widen the page. */
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}

.timeline {
  min-width: 640px;
}

.timeline__month {
  margin-bottom: 40px;
}

.container--program .timeline__title {
  margin-bottom: 4px;
  font-size: 21px;
}

.container--program .timeline__ticks {
  display: flex;
  justify-content: space-between;
  height: 20px;
  margin-bottom: 6px;
  padding: 0;
  list-style: none;
}

.timeline__ticks li {
  color: var(--conf-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
}

.js .timeline__ticks {
  position: relative;
  display: block;
}

.js .timeline__ticks li {
  position: absolute;
  top: 0;
  left: var(--left, 0);
}

.container--program .timeline__rows {
  padding: 0;
  list-style: none;
}

/* One row per event, with a hairline for every day of the month */
.timeline__row {
  position: relative;
  height: 80px;
  margin-bottom: 10px;
  border-radius: 8px;
  background-image: repeating-linear-gradient(
    to right,
    var(--conf-line) 0 1px,
    transparent 1px calc(100% / var(--days, 31))
  );
}

.timeline__bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: fit-content;
  min-width: 210px;
  max-width: 100%;
  height: 100%;
  padding: 10px 14px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--color-red-bright);
  color: var(--color-white);
  text-decoration: none;
  transition: background-color 0.25s, box-shadow 0.25s;
}

.timeline__bar:hover {
  background: var(--color-red-dark);
  box-shadow: 0 10px 24px -12px rgb(234 35 23 / 0.7);
}

.js .timeline__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--left, 0);
  width: var(--width, auto);
}

.js .timeline__bar--end {
  right: var(--right, 0);
  left: auto;
}

.timeline__name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.timeline__when {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.3;
  opacity: 0.85;
}


/* 9. Three ways to work with us ------------------------------------------- */

.levels,
.addons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, var(--conf-card-cap)), 1fr));
  gap: 24px;
}

.addons {
  margin-top: 24px;
}

.level-card .eyebrow,
.addon-card .eyebrow {
  margin-bottom: 6px;
  font-size: 13px;
  letter-spacing: 0.08em;
}

.level-card {
  display: flex;
  flex-direction: column;
  padding: 32px;
}

/* Recommended level */
.level-card--featured {
  border: 2px solid var(--color-red-bright);
}

.container--program .level-card__title {
  margin-bottom: 12px;
  font-size: 24px;
}

.container--program .level-card__price {
  margin-bottom: 24px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--conf-price);
  color: var(--conf-ink);
  font-size: 15px;
  font-weight: 700;
}

.level-card__work {
  margin-bottom: 20px;
}

.container--program .level-card__label {
  margin-bottom: 8px;
  color: var(--conf-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Five dots: how many of the five conference jobs we take on */
.container--program .work-meter {
  margin-bottom: 8px;
}

.work-meter span {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--conf-dot-off);
}

.work-meter .is-on {
  background: var(--color-red-bright);
}

.level-card__summary {
  color: var(--conf-summary);
  font-size: 14px;
  line-height: 1.5;
}

.container--program .level-card__plus {
  margin-bottom: 12px;
  color: var(--conf-ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.container--program .level-card__list {
  margin-bottom: 4px;
  padding: 0;
  list-style: none;
}

.level-card__list li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 22px;
  color: var(--conf-text);
  font-size: 17px;
  line-height: 1.5;
}

.level-card__list li:last-child {
  margin-bottom: 0;
}

.level-card__list li::before {
  content: "\00B7";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-red-bright);
  font-weight: 700;
}

.level-card__list strong {
  color: var(--conf-ink);
}

/* Pinned to the bottom so both cards end on the same line */
.container--program .level-card__fit {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--conf-line);
  color: var(--conf-ink);
  font-size: 17px;
  font-style: italic;
  line-height: 1.6;
}

.addon-card {
  padding: 24px;
}

.container--program .addon-card__title {
  margin-bottom: 16px;
  font-size: 21px;
}

.addon-card__text {
  color: var(--conf-text);
  font-size: 17px;
  line-height: 1.6;
}


/* 10. Interested? -----------------------------------------------------------
   content-box: the padding comes on top of the 820px, as on the original. */

.interested {
  box-sizing: content-box;
  max-width: 820px;
  padding: 0 clamp(24px, 4vw, 48px);
}

.container--program .interested__lead {
  margin-bottom: 24px;
  color: var(--conf-text);
  font-size: 20px;
  line-height: 1.6;
}

.interested__lead a {
  color: var(--color-red-bright);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.interested__lead a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Numbered list with large red numbers */
.container--program .interested__list {
  padding: 0;
  list-style: none;
  counter-reset: ask;
}

.interested__list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 12px;
  color: var(--conf-ink);
  font-size: 18px;
  line-height: 1.5;
  counter-increment: ask;
}

.interested__list li:last-child {
  margin-bottom: 0;
}

.interested__list li::before {
  content: counter(ask);
  color: var(--color-red-bright);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.4;
}

.container--program .interested__note {
  margin-top: 20px;
  color: var(--conf-text);
  font-size: 16px;
  line-height: 1.6;
}

.container--program .interested__reply {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--conf-line);
  color: var(--conf-text);
  font-size: 18px;
  line-height: 1.6;
}


/* 11. Your hosts ------------------------------------------------------------ */

.hosts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 32px;
}

.host {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 24px 0;
}

.host__photo {
  flex: none;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--color-red-bright);
  object-fit: cover;
}

.container--program .host__name {
  font-size: 19px;
}

.container--program .host__role {
  margin: 2px 0 10px;
  color: var(--color-red-bright);
  font-size: 14px;
  font-weight: 600;
}

.container--program .host__bio {
  margin-bottom: 12px;
  color: var(--conf-text);
  font-size: 15px;
  line-height: 1.55;
}

.host__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--conf-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.host__link:hover {
  color: var(--color-red-text);
}

.host__link svg {
  color: #0a66c2;                /* LinkedIn blue */
}


/* 12. Card hover -------------------------------------------------------------
   Cards lift a little under the pointer. The lift uses the `translate`
   property, because `transform` belongs to the scroll reveal (main.css).
   The reveal rule also sets `transition`, so it is restated here with the
   hover properties added; the reveal delay applies to the entrance only. */

.event-card,
.level-card,
.addon-card,
.host {
  transition: translate 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.js .event-card[data-reveal],
.js .level-card[data-reveal],
.js .addon-card[data-reveal],
.js .host[data-reveal] {
  transition:
    opacity var(--duration) var(--ease-out) var(--reveal-delay, 0s),
    transform var(--duration) var(--ease-out) var(--reveal-delay, 0s),
    translate 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out);
}

.event-card:hover,
.level-card:hover,
.addon-card:hover,
.host:hover {
  translate: 0 -4px;
  box-shadow: 0 24px 40px -28px rgb(0 0 0 / 0.35);
}