/* entry section: ACTBE pEntry. A huge headline slides in row by row, then a tilted business card lands on top
   (hover: the card follows the pointer in 3D). Desktop shows two buttons; phones show a round Entry button. */
.cr-entry { position: relative; padding: 0; overflow: visible; color: var(--c-ink); pointer-events: none; background: none; border: 0; opacity: var(--init-opacity); } /* resets the legacy .cr-entry box in app.css */
.cr-entry *, .cr-entry *::before, .cr-entry *::after { box-sizing: border-box; }
.cr-entry.is-ready, .cr-entry.is-static { pointer-events: auto; }
.cr-entry.is-static { opacity: 1; }
.cr-entry__inner { position: relative; display: flex; align-items: center; justify-content: center; height: 100vh; height: 100dvh; overflow: hidden; overflow: clip; }
.cr-entry__vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; white-space: nowrap; border: 0; clip: rect(0 0 0 0); }

/* background headline */
.cr-entry__bg { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--f-inter); font-size: 17vw; font-weight: 600; line-height: 1; letter-spacing: -.06em; }
.cr-entry__bg-left, .cr-entry__bg-right { display: grid; width: 100%; }
.cr-entry__bg-mask { position: relative; left: var(--_left, 0); width: max-content; height: 1em; overflow: hidden; white-space: nowrap; }
.cr-entry__bg-text[data-id="1"] { --_left: -2.05vw; }
.cr-entry__bg-text[data-id="2"] { --_left: 11.54vw; }
.cr-entry__bg-text[data-id="3"] { --_left: 48.72vw; margin-top: -4.62vw; }
.cr-entry__bg-text[data-id="4"] { --_left: 22.56vw; }
.cr-entry__bg-text[data-id="5"] { --_left: 16.15vw; margin-top: -1.03vw; }
.cr-entry__bg-inner { display: block; }
.cr-entry__d { display: none; }

/* business card */
.cr-entry__card { position: absolute; z-index: 2; padding: 100px; color: inherit; text-decoration: none; }
.cr-entry__card-image { position: relative; width: 74.62vw; height: 47.18vw; perspective: 100vh; transform-style: preserve-3d; }
.cr-entry__card-front { position: absolute; inset: 0; z-index: 2; backface-visibility: hidden; }
.cr-entry__face { position: absolute; inset: 0; container-type: inline-size; overflow: hidden; color: var(--color-text-inverse); background: var(--surface-inverse); border-radius: 1.4cqw; box-shadow: 0 2cqw 6cqw color-mix(in srgb, var(--gray-10) 24%, transparent); }
.cr-entry__logo { position: absolute; top: 5.5cqw; left: 5.5cqw; width: 9cqw; height: auto; border-radius: .8cqw; }
.cr-entry__who { position: absolute; left: 5.5cqw; top: 25cqw; display: flex; align-items: center; gap: 2.4cqw; }
.cr-entry__avatar { flex-shrink: 0; width: 10cqw; height: 10cqw; border-radius: 50%; background: radial-gradient(circle at 32% 28%, var(--color-text-inverse) 0 6%, transparent 22%), conic-gradient(from 210deg, var(--hue-lilac), var(--hue-mint), var(--hue-sky), var(--hue-yellow), var(--hue-coral), var(--hue-lilac)); box-shadow: inset 0 0 0 .25cqw color-mix(in srgb, var(--color-text-inverse) 35%, transparent); }
.cr-entry__name { font-family: var(--f-inter); font-size: 6.4cqw; font-weight: 400; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.cr-entry__details { position: absolute; right: 5.5cqw; bottom: 8cqw; width: 44cqw; font-size: 2.7cqw; line-height: 1.5; }
.cr-entry__details p { margin: 0; }
.cr-entry__org { font-weight: 600; letter-spacing: .02em; }
.cr-entry__where, .cr-entry__mail { color: var(--color-text-inverse-secondary); }
.cr-entry__mail { font-family: var(--f-roboto-mono); font-size: 2.2cqw; margin-top: 1.2cqw !important; }
.cr-entry__foot { position: absolute; left: 5.5cqw; bottom: 8cqw; margin: 0; font-size: 2.4cqw; line-height: 1.4; color: var(--color-text-inverse-secondary); }
.cr-entry__barcode { position: absolute; top: 5.5cqw; right: 5.5cqw; width: 24cqw; height: 6.5cqw; color: var(--color-text-inverse); }

/* buttons: phones get the round Entry button, desktop gets two pills */
.cr-entry__actions { position: absolute; bottom: 5.41svh; left: 0; right: 0; z-index: 3; display: flex; flex-direction: column; gap: 1.5svh; align-items: center; justify-content: flex-end; pointer-events: none; }
.cr-entry__actions > * { pointer-events: auto; }
.cr-entry__circle { display: flex; align-items: center; justify-content: center; width: 15.68svh; height: 15.68svh; padding: 1.5svh; color: var(--color-on-accent); text-align: center; text-decoration: none; background: var(--color-accent); border-radius: 50%; }
.cr-entry__circle-text { font-family: var(--f-roboto-mono); font-size: min(2.16svh, 4.4vw); font-weight: 400; line-height: 1.2; text-transform: uppercase; letter-spacing: .02em; }
.cr-entry__btn { display: inline-flex; align-items: center; justify-content: center; padding: 1em 1.8em; font: var(--t-button-14); letter-spacing: var(--ls-button-14); color: var(--c-ink); text-decoration: none; background: var(--c-white); border: 1px solid currentcolor; border-radius: var(--radius-pill); transition: background-color .4s var(--ease-out-expo), color .4s var(--ease-out-expo), border-color .4s var(--ease-out-expo); }
.cr-entry__btn--solid { display: none; color: var(--color-text-inverse); background: var(--c-ink); border-color: var(--c-ink); }

@media (any-hover: hover) {
  .cr-entry__btn:hover { color: var(--color-text-inverse); background: var(--c-ink); }
  .cr-entry__btn--solid:hover { color: var(--color-on-accent); background: var(--color-accent); border-color: var(--color-accent); }
  .cr-entry__circle { transition: background-color .4s var(--ease-out-expo); }
  .cr-entry__circle:hover { background: var(--color-accent-hover); }
  .cr-entry__card { cursor: pointer; }
}

@media screen and (min-width: 960px) {
  .cr-entry__bg { font-size: 10.6vw; line-height: .95; }
  .cr-entry__bg-mask { height: .95em; }
  .cr-entry__sp, .cr-entry__m { display: none; }
  .cr-entry__d { display: inline; }
  .cr-entry__bg-text[data-id="1"] { --_left: -1.02vw; }
  .cr-entry__bg-text[data-id="2"] { --_left: 16.54vw; margin-top: -.81vw; }
  .cr-entry__bg-text[data-id="4"] { --_left: 27.45vw; }
  .cr-entry__card { padding: min(13.02vh, 7.32vw); }
  .cr-entry__card-image { width: min(79.69vh, 44.8vw); height: min(50.13vh, 28.18vw); }
  .cr-entry__circle { display: none; }
  .cr-entry__actions { bottom: min(5.21vh, 2.93vw); flex-direction: row; gap: 12px; justify-content: center; }
  .cr-entry__btn { font-size: min(1.02vw, calc(.875rem * var(--r-max-scale))); }
  .cr-entry__btn--solid { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  .cr-entry *, .cr-entry *::before, .cr-entry *::after { transition-duration: .01ms !important; }
}

/* Desktop: ACTBE puts one red "Entry" tag over the card instead of buttons below it */
@media (min-width: 768px) {
  .cr-entry .cr-entry__actions { position: absolute; inset: 0; pointer-events: none; }
  .cr-entry .cr-entry__actions .cr-entry__circle { display: inline-flex; position: absolute; left: 46%; top: 60%; width: auto; height: auto; padding: .8rem 1.1rem; border-radius: 0; opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
  .cr-entry .cr-entry__circle .cr-entry__circle-text { font-size: 1.125rem; text-transform: none; letter-spacing: .02em; }
  .cr-entry .cr-entry__circle::after { content: "\2197"; margin-left: .7em; }
  .cr-entry .cr-entry__btn, .cr-entry .cr-entry__btn--solid { display: none; }
}

/* Desktop: the headline reads in full on the left, the card sits to its right and never covers it. */
@media (min-width: 960px) {
  .cr-entry__bg { align-items: flex-start; justify-content: center; font-size: 8.4vw; line-height: .96; }
  .cr-entry__bg-left, .cr-entry__bg-right { padding-left: 4vw; }
  .cr-entry__bg-mask { height: .96em; }
  .cr-entry__bg-text[data-id="1"], .cr-entry__bg-text[data-id="2"], .cr-entry__bg-text[data-id="4"] { --_left: 0; margin-top: 0; }
  .cr-entry__card { margin-left: 30vw; padding: min(9vh, 4.5vw); }
  .cr-entry__card-image { width: min(60vh, 34vw); height: min(37.7vh, 21.4vw); }
  .cr-entry .cr-entry__actions .cr-entry__circle { left: 79%; top: 74%; }
}